{"id":14968559,"url":"https://github.com/zviryatko/drupal-react-scaffold-theme","last_synced_at":"2025-10-26T02:31:12.816Z","repository":{"id":187911559,"uuid":"677791779","full_name":"zviryatko/drupal-react-scaffold-theme","owner":"zviryatko","description":"Scaffold theme for react component for Drupal","archived":false,"fork":false,"pushed_at":"2023-08-16T19:27:42.000Z","size":29,"stargazers_count":4,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-01-31T13:43:36.628Z","etag":null,"topics":["drupal","drupal-theme","pattern-design","pattern-lab","react"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/zviryatko.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2023-08-12T16:40:20.000Z","updated_at":"2023-11-06T15:40:40.000Z","dependencies_parsed_at":"2023-08-12T18:24:17.660Z","dependency_job_id":null,"html_url":"https://github.com/zviryatko/drupal-react-scaffold-theme","commit_stats":null,"previous_names":["zviryatko/drupal-react-scaffold-theme"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zviryatko%2Fdrupal-react-scaffold-theme","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zviryatko%2Fdrupal-react-scaffold-theme/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zviryatko%2Fdrupal-react-scaffold-theme/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zviryatko%2Fdrupal-react-scaffold-theme/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zviryatko","download_url":"https://codeload.github.com/zviryatko/drupal-react-scaffold-theme/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238247984,"owners_count":19440879,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["drupal","drupal-theme","pattern-design","pattern-lab","react"],"created_at":"2024-09-24T13:40:07.355Z","updated_at":"2025-10-26T02:31:12.437Z","avatar_url":"https://github.com/zviryatko.png","language":"JavaScript","readme":"# Drupal React Scaffold theme\n\nHello, this is a Drupal theme that uses React and Webpack to build the front-end.\n\nBenefits over other solutions:\n\n* it uses ui_patterns for components\n* react connected statically (on single library for any components)\n* you can mix up together React component and Drupal ajax framework 😎\n* ☝️ and it is working even for hidden elements that appears after some event, like tab open\n* fetch library wrapper with provided csrf token\n* jest tests included\n* contains example of one component\n\n## Demo\n\nhttps://github.com/zviryatko/drupal-react-scaffold-theme/assets/1087411/aa084ad1-d22e-48be-99ce-7f555445db58\n\n## Installation\n\nJust copy structure to your custom Drupal theme, replace `react_scaffold` with your theme name.\n\n## Usage\n\nSee `react_scaffold.theme` for example.\n\nAs render array:\n\n```php\n  [\n    '#type' =\u003e 'pattern',\n    '#id' =\u003e 'react_tooltip',\n    '#fields' =\u003e [\n      'text' =\u003e 'Tooltip text',\n      'content' =\u003e $title,\n    ],\n  ]\n```\n\nor in twig:\n\n```twig\n  {{ pattern('react_tooltip', {\n    text: 'Tooltip text',\n    content: 'Text',\n  }) }}\n```\n\n## Architecture\n\n* Drupal is used as main index point, so it is NOT fully decoupled.\n* React is loaded statically to allow components to be independent.\n* Components connected to Drupal via ui_patterns module.\n* NPM and Webpack is used to build the front-end.\n\n## Dependencies\n\n* `composer require drupal/ui_patterns`\n* npm\n* webpack\n\n## Build\n\nInstall the dependencies:\n\n```bash\ndocker run --rm -it -v $(pwd):/src -w /src node npm install\n```\n\nBuild the theme:\n\n```bash\ndocker run --rm -it -v $(pwd):/src -w /src node npm run dist\n```\n\nOr run watcher for development:\n\n```bash\ndocker run --rm -it -v $(pwd):/src -w /src node npm run watch\n```\n\n## Testing\n\nReact components can be tested with Jest framework.\n\n```bash\ndocker run --rm -it -v $(pwd):/src -w /src node npm run test\n```\n\n# Components\n\nAs per component-driven philosophy, components are standardized, interchangeable building blocks of UIs. They\nencapsulate the appearance and function of UI pieces.\n\n```\nreact_scalfold\n    |__ components\n          |__ component-1\n          |__ component-2\n          |__ component-3\n```\n\nComponents are developed following [BEM](http://getbem.com/) rules\nand [Atomic Design](https://bradfrost.com/blog/post/atomic-web-design/) paradigm as base.\n\nEach component folder must contain all assets needed for the component itself, for example:\n\n```\ncomponent-1\n    |__ images\n          |__ img-1.png\n          |__ img-2.svg\n    |__ component-1.js\n    |__ component-1.scss\n    |__ component-1.ui_patterns.yml\n    |__ pattern-component-1.html.twig\n```\n\nA component could be an **ui_pattern** (from [ui_patterns](https://www.drupal.org/project/ui_patterns) Drupal module)\nlike the example above, but not necessarily. Take the pager as example for a very simple component:\n\n```\npager\n    |__ _pager.scss\n```\n\nHere's also an example of a React component:\n\n```\nreact-tooltip\n    |__ __tests__\n          |__ __snapshots__\n                 |__ react-tooltip.test.js.snap\n          |__ react-tooltip.test.js\n    |__ index.js\n    |__ pattern-react-tooltip.html.twig\n    |__ react-tooltip.scss\n    |__ react-tooltip.ui_patterns.yml\n    |__ TextWithTooltip.jsx\n```\n\n## Examples\n\n### Simple example\n\nSee `react_scaffold/components/react-tooltip` for example.\n\nWhen enable the them you will see that page title has a tooltip.\n\n### Very complex example\n\nSee `react_scaffold/components/node-list` for example.\n\nTo enable download the theme and enable it. Run next command after:\n\n```php\ncomposer require drupal/views_better_rest\ndrush en node rest serialization user views_better_rest config\ndrush cim --partial --source=themes/custom/react_scaffold/config/optional/\n```\n\nCreate few node types and add some nodes.\n\nThen open `/patterns/node_list` page. You will see a list of nodes. You can filter it by type and sort by updated date.\n\nAwesome thing is edit button. It is a React component that uses Drupal ajax framework to open node edit form in modal.\n\n# Credits\n\n- Scaffolded by [zviryatko](https://github.com/zviryatko)\n- Developed by [Nuvole.org](https://nuvole.org)\n- The initial theme scaffolding was inspired by project of [Massimo Altafini](massimo@nuvole.org)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzviryatko%2Fdrupal-react-scaffold-theme","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzviryatko%2Fdrupal-react-scaffold-theme","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzviryatko%2Fdrupal-react-scaffold-theme/lists"}