Skip to content

Latest commit

 

History

History
172 lines (122 loc) · 4.15 KB

README.md

File metadata and controls

172 lines (122 loc) · 4.15 KB
Raw

Drupal React Scaffold theme

Hello, this is a Drupal theme that uses React and Webpack to build the front-end.

Benefits over other solutions:

  • it uses ui_patterns for components
  • react connected statically (on single library for any components)
  • you can mix up together React component and Drupal ajax framework 😎
  • ☝️ and it is working even for hidden elements that appears after some event, like tab open
  • fetch library wrapper with provided csrf token
  • jest tests included
  • contains example of one component

Demo

react-drupal-components-demo.mp4

Installation

Just copy structure to your custom Drupal theme, replace react_scaffold with your theme name.

Usage

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',
  }) }}

Architecture

  • Drupal is used as main index point, so it is NOT fully decoupled.
  • React is loaded statically to allow components to be independent.
  • Components connected to Drupal via ui_patterns module.
  • NPM and Webpack is used to build the front-end.

Dependencies

  • composer require drupal/ui_patterns
  • npm
  • webpack

Build

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

Testing

React components can be tested with Jest framework.

docker run --rm -it -v $(pwd):/src -w /src node npm run test

Components

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

Examples

Simple example

See react_scaffold/components/react-tooltip for example.

When enable the them you will see that page title has a tooltip.

Very complex example

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.

Credits