V2 - Drupal SDC + Vite

components/node-list/index.js → components/node-list/index.jsx

@@ -1,11 +1,11 @@
 import {NodeList} from './NodeList';
 import './node-list.scss'
+import { createRoot } from 'react-dom/client';
 
 (function (Drupal, $, once) {
   const attachNodeList = (element) => {
-    ReactDOM.render(
-      <NodeList endpoint={element.dataset.endpoint} theme={element.dataset.theme}/>,
-      element
+    createRoot(element).render(
+      <NodeList endpoint={element.dataset.endpoint} theme={element.dataset.theme}/>
     );
   };
 

components/node-list/node-list.component.yml

@@ -0,0 +1,43 @@
+$schema: https://git.drupalcode.org/project/drupal/-/raw/HEAD/core/assets/schemas/v1/metadata.schema.json
+name: Node List
+status: stable
+description: 'A React-based component that displays a list of nodes with theme variants.'
+group: Content
+props:
+  type: object
+  properties:
+    endpoint:
+      type: string
+      title: Endpoint
+      description: 'API endpoint for fetching node data'
+      default: '/api/node'
+      examples:
+        - '/api/node'
+    variant:
+      type: string
+      title: Theme Variant
+      description: 'Visual theme for the component'
+      default: 'light'
+      enum:
+        - 'light'
+        - 'dark'
+      meta:enum:
+        light: Light
+        dark: Dark
+      x-translation-context: Theme variants
+      examples:
+        - 'light'
+        - 'dark'
+  required:
+    - endpoint
+libraryOverrides:
+  js:
+    ../../assets/node-list.js: { }
+  css:
+    theme:
+      ../../assets/node-list.css: { }
+  dependencies:
+    - react_scaffold/react
+    - react_scaffold/react-api-client
+    - core/drupal.ajax
+    - core/drupal.dropbutton

components/node-list/node-list.story.twig

@@ -0,0 +1 @@
+{{ include('react_scaffold:node-list', { variant: 'light' }, with_context = false) }}

components/node-list/node-list.twig

@@ -0,0 +1 @@
+<div {{ attributes.addClass('node-list').addClass('node-list__' ~ variant).setAttribute('data-endpoint', endpoint).setAttribute('data-theme', variant) }}></div>

components/react-tooltip/index.js → components/react-tooltip/index.jsx

@@ -1,12 +1,13 @@
 import {TextWithTooltip} from './TextWithTooltip';
 import './react-tooltip.scss'
+import { createRoot } from 'react-dom/client';
 
 // Values for this component (e.g. 'text') come from the pattern field.
 (function (Drupal, $, once) {
+
   const attachTooltip = (element) => {
-    ReactDOM.render(
-      <TextWithTooltip text={element.dataset.text} content={element.innerText}/>,
-      element
+    createRoot(element).render(
+      <TextWithTooltip text={element.dataset.text} content={element.innerText}/>
     );
   };
 

components/react-tooltip/react-tooltip.component.yml

@@ -0,0 +1,33 @@
+$schema: https://git.drupalcode.org/project/drupal/-/raw/HEAD/core/assets/schemas/v1/metadata.schema.json
+name: React Tooltip
+status: stable
+description: 'A React-based tooltip component that displays helpful text on hover.'
+group: Interactive
+props:
+  type: object
+  properties:
+    text:
+      type: string
+      title: Tooltip Text
+      description: 'The text to display in the tooltip'
+      default: 'Tooltip text'
+      examples:
+        - 'This is the tooltip text'
+    content:
+      type: string
+      title: Content
+      description: 'The content that triggers the tooltip when hovered'
+      default: 'Hover me'
+      examples:
+        - 'Hover me to see the tooltip'
+  required:
+    - text
+    - content
+libraryOverrides:
+  js:
+    ../../assets/react-tooltip.js: { }
+  css:
+    theme:
+      ../../assets/react-tooltip.css: { }
+  dependencies:
+    - react_scaffold/react

components/react-tooltip/react-tooltip.story.twig

@@ -0,0 +1,4 @@
+{{ include('react_scaffold:react-tooltip', {
+  text: 'This is the tooltip text',
+  content: 'Hover me to see the tooltip',
+}, with_context = false) }}

components/react-tooltip/react-tooltip.twig

@@ -0,0 +1 @@
+<span {{ attributes.addClass('react-tooltip').setAttribute('data-text', text) }}>{{ content }}</span>

package.json

@@ -2,59 +2,42 @@
   "name": "drupal-react-scaffold",
   "version": "0.0.1",
   "description": "Drupal React Scaffold theme",
+  "type": "module",
   "dependencies": {
     "@babel/runtime": "^7.17.2",
-    "axios": "^0.25.0",
+    "@tanstack/react-query": "^5.89.0",
+    "axios": "^1.12.2",
     "classnames": "^2.3.1",
-    "core-js": "^3.21.0",
-    "flexboxgrid": "6.3.1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-query": "^3.34.14",
+    "core-js": "^3.45.1",
+    "flexboxgrid": "^6.3.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-tippy": "^1.4.0",
-    "uuid": "^8.3.2",
-    "whatwg-fetch": "^3.6.2",
-    "rsuite": "^5.37.4",
-    "rsuite-table": "^5.11.0"
+    "rsuite": "^5.83.3",
+    "rsuite-table": "^5.19.2",
+    "uuid": "^13.0.0",
+    "whatwg-fetch": "^3.6.20"
   },
   "devDependencies": {
-    "@babel/core": "^7.17.2",
-    "@babel/plugin-proposal-class-properties": "^7.16.7",
-    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@babel/preset-env": "^7.16.11",
-    "@babel/preset-react": "^7.16.7",
+    "@testing-library/jest-dom": "^6.8.0",
+    "@testing-library/react": "^16.3.0",
+    "@vitejs/plugin-react": "^4.2.1",
     "autoprefixer": "^10.4.2",
-    "babel-loader": "^8.2.3",
-    "clean-webpack-plugin": "^4.0.0",
-    "copy-webpack-plugin": "^10.2.4",
-    "css-loader": "^6.6.0",
-    "css-minimizer-webpack-plugin": "^3.4.1",
-    "mini-css-extract-plugin": "^2.5.3",
-    "node-sass": "^7.0.1",
-    "node-sass-magic-importer": "^5.3.2",
+    "babel-jest": "^30.1.2",
+    "jest": "^30.1.3",
+    "jest-junit": "^16.0.0",
+    "jest-mock-axios": "^4.9.0",
     "postcss": "^8.4.6",
-    "postcss-asset-webpack-plugin": "^1.0.2",
-    "postcss-loader": "^6.2.1",
     "react-select-event": "^4.1.4",
     "sass": "^1.49.7",
-    "sass-loader": "^12.4.0",
-    "style-loader": "^3.3.1",
-    "terser-webpack-plugin": "^5.3.1",
-    "webpack": "^5.68.0",
-    "webpack-cli": "^4.9.2",
-    "webpack-require-from": "^1.8.6",
-    "@testing-library/jest-dom": "^5.16.2",
-    "@testing-library/react": "^12.1.2",
-    "babel-jest": "^27.5.1",
-    "jest": "^27.5.1",
-    "jest-junit": "^13.0.0",
-    "jest-mock-axios": "^4.5.0"
+    "vite": "^7.1.6",
+    "vite-plugin-external": "^6.2.2"
   },
   "browserslist": "last 2 versions, not IE 11",
   "scripts": {
-    "build": "webpack --mode=none --config=webpack.config.prod.js",
-    "watch": "webpack --config webpack.config.dev.js",
-    "dist": "webpack --mode production --config webpack.config.prod.js",
+    "build": "vite build",
+    "watch": "vite build --watch --mode development",
+    "dist": "vite build --mode production",
     "test:watch": "jest --watchAll",
     "test": "jest"
   }

postcss.config.js

@@ -0,0 +1,7 @@
+import autoprefixer from 'autoprefixer';
+
+export default {
+  plugins: [
+    autoprefixer,
+  ],
+};

react_scaffold.info.yml

@@ -1,10 +1,31 @@
 name: 'React Scaffold'
-description: 'A React Scaffold theme.'
+description: 'A React Scaffold theme with Single Directory Components.'
 type: theme
-base theme: stark
-core_version_requirement: ^8 || ^9 || ^10
+base theme: umami
+core_version_requirement: ^10 || ^11
 package: Scaffold
 
 libraries:
   - "react_scaffold/global-styling"
   - "react_scaffold/global-libraries"
+
+# Enable component discovery in the components directory
+components:
+  namespaces:
+    react_scaffold: components
+
+regions:
+  pre_header: Pre-header
+  header: Header
+  highlighted: Highlighted
+  tabs: Tabs
+  banner_top: 'Banner Top'
+  breadcrumbs: Breadcrumbs
+  page_title: 'Page Title'
+  content: Content
+  sidebar: Sidebar
+  content_bottom: 'Content Bottom'
+  footer: Footer
+  bottom: Bottom
+  page_top: 'Page top' # Needed by Drupal Core
+  page_bottom: 'Page bottom' # Needed by Drupal Core

react_scaffold.libraries.yml

@@ -17,7 +17,31 @@ react:
     assets/react/react.js: { minified: true, weight: -4 }
     assets/react/react-dom.js: { minified: true, weight: -4 }
     assets/helpers.js: { minified: true, weight: -3 }
+  dependencies:
+    - react_scaffold/global-libraries
 
 react-api-client:
   js:
     assets/apiClient.js: { minified: true, weight: -2 }
+
+# SDC Component libraries
+node-list:
+  js:
+    assets/node-list.js: { minified: true }
+  css:
+    theme:
+      assets/node-list.css: {}
+  dependencies:
+    - react_scaffold/react
+    - react_scaffold/react-api-client
+    - core/drupal.ajax
+    - core/drupal.dropbutton
+
+react-tooltip:
+  js:
+    assets/react-tooltip.js: { minified: true }
+  css:
+    theme:
+      assets/react-tooltip.css: {}
+  dependencies:
+    - react_scaffold/react