Hello, this is a Drupal theme that uses React and Webpack to build the front-end.
Benefits over other solutions:
Just copy structure to your custom Drupal theme, replace react_scaffold
with your theme name.
See react_scaffold.theme
for example.
As render array:
[
'#type' => 'pattern',
'#id' => 'react_tooltip',
'#fields' => [
'text' => 'Tooltip text',
'content' => $title,
],
]
or in twig:
{{ pattern('react_tooltip', {
text: 'Tooltip text',
content: 'Text',
}) }}
composer require drupal/ui_patterns
Install the dependencies:
docker run --rm -it -v $(pwd):/src -w /src node npm install
Build the theme:
docker run --rm -it -v $(pwd):/src -w /src node npm run dist
Or run watcher for development:
docker run --rm -it -v $(pwd):/src -w /src node npm run watch
React components can be tested with Jest framework.
docker run --rm -it -v $(pwd):/src -w /src node npm run test
As per component-driven philosophy, components are standardized, interchangeable building blocks of UIs. They encapsulate the appearance and function of UI pieces.
react_scalfold
|__ components
|__ component-1
|__ component-2
|__ component-3
Components are developed following BEM rules and Atomic Design paradigm as base.
Each component folder must contain all assets needed for the component itself, for example:
component-1
|__ images
|__ img-1.png
|__ img-2.svg
|__ component-1.js
|__ component-1.scss
|__ component-1.ui_patterns.yml
|__ pattern-component-1.html.twig
A component could be an ui_pattern (from ui_patterns Drupal module) like the example above, but not necessarily. Take the pager as example for a very simple component:
pager
|__ _pager.scss
Here's also an example of a React component:
react-tooltip
|__ __tests__
|__ __snapshots__
|__ react-tooltip.test.js.snap
|__ react-tooltip.test.js
|__ index.js
|__ pattern-react-tooltip.html.twig
|__ react-tooltip.scss
|__ react-tooltip.ui_patterns.yml
|__ TextWithTooltip.jsx
See react_scaffold/components/react-tooltip
for example.
When enable the them you will see that page title has a tooltip.
See react_scaffold/components/node-list
for example.
To enable download the theme and enable it. Run next command after:
composer require drupal/views_better_rest
drush en node rest serialization user views_better_rest config
drush cim --partial --source=themes/custom/react_scaffold/config/optional/
Create few node types and add some nodes.
Then open /patterns/node_list
page. You will see a list of nodes. You can filter it by type and sort by updated date.
Awesome thing is edit button. It is a React component that uses Drupal ajax framework to open node edit form in modal.