feat: react wrapper components

.changeset/spicy-cups-fly.md

@@ -0,0 +1,38 @@
+---
+"@rhds/elements": minor
+---
+⚛️  Added React wrapper components
+
+You can now more easily integrate RHDS elements into your React apps by importing our wrapper components
+
+First, make sure that you list `@lit/react` as a dependency in your project
+
+```sh
+npm install --save @lit/react
+```
+
+Then import the element components you need and treat them like any other react component
+
+```js
+import { Tabs } from '@rhds/elements/react/rh-tabs/rh-tabs.js';
+import { Tab } from '@rhds/elements/react/rh-tabs/rh-tab.js';
+import { TabPanel } from '@rhds/elements/react/rh-tabs/rh-tab-panel.js';
+
+import { useState } from 'react';
+
+const tabs = [
+  { heading: 'Hello Red Hat', content: 'Let\'s break down silos' },
+  { heading: 'Web components', content: 'They work everywhere' }
+];
+
+function App() {
+  const [index, setExpanded] = useState(-1);
+  return (
+    <span>expanded {expanded}</span>
+    <Tabs>{tabs.map(({ heading, content }, i) => (
+      <Tab slot="tab" onExpand={() => setExpanded(i)}>{heading}</Tab>
+      <TabPanel>{content}</TabPanel>))}
+    </Tabs>
+  );
+}
+```

.gitignore

@@ -12,6 +12,7 @@ docs/assets/playgrounds/
 # Build artifacts
 elements/*/*.js
 elements/*/test/*.js
+react
 lib/**/*.js
 !elements/**/demo/*.css
 *.map

eslint.config.js

@@ -16,6 +16,7 @@ export default tseslint.config(
 
       '**/*.d.ts',
       '**/*.(spec|e2e).js',
+      'react',
       'elements/**/*.js',
       'lib/**/*.js',
 

package.json

@@ -8,6 +8,7 @@
   "exports": {
     ".": "./rhds.min.js",
     "./lib/*": "./lib/*",
+    "./react/*": "./react/elements/*",
     "./*": "./elements/*"
   },
   "contributors": [
@@ -109,6 +110,7 @@
       "dependencies": [
         "patch",
         "analyze",
+        "react-wrappers",
         "compile",
         "bundle",
         "docs"
@@ -135,6 +137,19 @@
         "!elements/*/{demo,test}/**/*.js"
       ]
     },
+    "react-wrappers": {
+      "command": "npx tsx scripts/generate-react-wrappers.ts",
+      "dependencies": [
+        "analyze"
+      ],
+      "files": [
+        "custom-elements.json",
+        "scripts/generate-react-wrappers.ts"
+      ],
+      "output": [
+        "react/**/*"
+      ]
+    },
     "bundle": {
       "command": "node scripts/bundle.js"
     },

scripts/generate-react-wrappers.ts

@@ -0,0 +1,11 @@
+import { generateReactWrappers } from '@patternfly/pfe-tools/react/generate-wrappers.js';
+
+const inURL = new URL('../custom-elements.json', import.meta.url);
+const outURL = new URL('../react/', import.meta.url);
+
+await generateReactWrappers(inURL,
+                            outURL,
+                            '@rhds/elements',
+                            'rh',
+                            'Rh');
+