From 00ef5f81c7ba70a509c25fc10a41a590f5210e77 Mon Sep 17 00:00:00 2001 From: Steven Spriggs Date: Wed, 4 Oct 2023 11:04:37 -0400 Subject: [PATCH 1/6] feat: add react wrappers --- package.json | 20 ++++++++++++++++++-- scripts/generate-react-wrappers.ts | 6 ++++++ tsconfig.json | 3 ++- 3 files changed, 26 insertions(+), 3 deletions(-) create mode 100644 scripts/generate-react-wrappers.ts diff --git a/package.json b/package.json index 1e8a69d113..df53a637cb 100644 --- a/package.json +++ b/package.json @@ -8,7 +8,8 @@ "exports": { ".": "./rhds.min.js", "./lib/*": "./lib/*", - "./*": "./elements/*" + "./*": "./elements/*", + "./react/*": "./react/*" }, "contributors": [ "Benny Powers ", @@ -97,7 +98,21 @@ "analyze", "compile", "bundle", - "docs" + "docs", + "build:react" + ] + }, + "build:react": { + "command": "ts-node --esm scripts/generate-react-wrappers.ts", + "dependencies": [ + "analyze" + ], + "files": [ + "custom-elements.json", + "scripts/generate-react-wrappers.ts" + ], + "output": [ + "react/**/*" ] }, "compile": { @@ -117,6 +132,7 @@ "bundle": { "command": "node scripts/bundle.js" }, + "analyze": { "command": "cem analyze && node scripts/cem-tokens.js && node scripts/system-tokens.js", "files": [ diff --git a/scripts/generate-react-wrappers.ts b/scripts/generate-react-wrappers.ts new file mode 100644 index 0000000000..f6639ccc05 --- /dev/null +++ b/scripts/generate-react-wrappers.ts @@ -0,0 +1,6 @@ +import { generateReactWrappers } from '@patternfly/pfe-tools/react/generate-wrappers.js'; + +const inURL = new URL('../custom-elements.json', import.meta.url); +const outURL = new URL('../elements/react/', import.meta.url); + +await generateReactWrappers(inURL, outURL); diff --git a/tsconfig.json b/tsconfig.json index 9a1996225e..4f1cabe83b 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -27,7 +27,7 @@ "importHelpers": true, "incremental": true, "inlineSources": true, - "module": "es2020", + "module": "es2022", "moduleResolution": "node", "noEmitOnError": false, "preserveValueImports": true, @@ -58,6 +58,7 @@ "DOM", "es2015.iterable", "es2020", + "es2022", "es5", "es6", "ScriptHost" From 337d9116cda542b9e36220d72379bda02259320b Mon Sep 17 00:00:00 2001 From: Steven Spriggs Date: Wed, 4 Oct 2023 11:07:46 -0400 Subject: [PATCH 2/6] fix: remove additional export react dir is in elements dir --- package.json | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/package.json b/package.json index df53a637cb..7420ff110e 100644 --- a/package.json +++ b/package.json @@ -8,8 +8,7 @@ "exports": { ".": "./rhds.min.js", "./lib/*": "./lib/*", - "./*": "./elements/*", - "./react/*": "./react/*" + "./*": "./elements/*" }, "contributors": [ "Benny Powers ", From c740f070c776cf4affe59a9311b8b5e9dae0d9e5 Mon Sep 17 00:00:00 2001 From: Steven Spriggs Date: Wed, 4 Oct 2023 11:10:52 -0400 Subject: [PATCH 3/6] fix: add ignore to react artifacts --- .gitignore | 2 ++ 1 file changed, 2 insertions(+) diff --git a/.gitignore b/.gitignore index 2efdad53af..a26d1d696d 100644 --- a/.gitignore +++ b/.gitignore @@ -21,6 +21,8 @@ rhds.min.js *LEGAL.txt *.tgz +/elements/react + # e2e test-results *.ts-snapshots From a64a45837492f489f3d18f2da7e14346248010fc Mon Sep 17 00:00:00 2001 From: Benny Powers Date: Wed, 29 Nov 2023 12:48:29 +0200 Subject: [PATCH 4/6] feat: react wrappers --- .changeset/react-wrappers.md | 19 +++++++++++++++++++ .gitignore | 3 +-- scripts/generate-react-wrappers.js | 7 +++++++ scripts/generate-react-wrappers.ts | 2 +- 4 files changed, 28 insertions(+), 3 deletions(-) create mode 100644 .changeset/react-wrappers.md create mode 100644 scripts/generate-react-wrappers.js diff --git a/.changeset/react-wrappers.md b/.changeset/react-wrappers.md new file mode 100644 index 0000000000..82f2144cfe --- /dev/null +++ b/.changeset/react-wrappers.md @@ -0,0 +1,19 @@ +--- +"@rhds/elements": minor +--- +React wrappers: Add automatically-generated react wrapper components + +```jsx +import { Card } from '@rhds/elements/react/rh-card/rh-card.js'; +import { Cta } from '@rhds/elements/react/rh-cta/rh-cta.js'; + +export const CardView = () => ( + +

Card!

+

For a legacy-compatible framework experience

+ + Read more + + +) +``` diff --git a/.gitignore b/.gitignore index a26d1d696d..30dcfb4d2d 100644 --- a/.gitignore +++ b/.gitignore @@ -20,8 +20,7 @@ test-results.xml rhds.min.js *LEGAL.txt *.tgz - -/elements/react +react/**/* # e2e test-results diff --git a/scripts/generate-react-wrappers.js b/scripts/generate-react-wrappers.js new file mode 100644 index 0000000000..89ebf1e8b4 --- /dev/null +++ b/scripts/generate-react-wrappers.js @@ -0,0 +1,7 @@ +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'); + diff --git a/scripts/generate-react-wrappers.ts b/scripts/generate-react-wrappers.ts index f6639ccc05..fe06c97839 100644 --- a/scripts/generate-react-wrappers.ts +++ b/scripts/generate-react-wrappers.ts @@ -1,6 +1,6 @@ import { generateReactWrappers } from '@patternfly/pfe-tools/react/generate-wrappers.js'; const inURL = new URL('../custom-elements.json', import.meta.url); -const outURL = new URL('../elements/react/', import.meta.url); +const outURL = new URL('../kkkct/', import.meta.url); await generateReactWrappers(inURL, outURL); From 73fdae6bb505c922414e6e8c4cc3247fb3374d18 Mon Sep 17 00:00:00 2001 From: Benny Powers Date: Wed, 29 Nov 2023 12:49:57 +0200 Subject: [PATCH 5/6] fix: doh --- scripts/generate-react-wrappers.js | 7 ------- scripts/generate-react-wrappers.ts | 5 +++-- 2 files changed, 3 insertions(+), 9 deletions(-) delete mode 100644 scripts/generate-react-wrappers.js diff --git a/scripts/generate-react-wrappers.js b/scripts/generate-react-wrappers.js deleted file mode 100644 index 89ebf1e8b4..0000000000 --- a/scripts/generate-react-wrappers.js +++ /dev/null @@ -1,7 +0,0 @@ -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'); - diff --git a/scripts/generate-react-wrappers.ts b/scripts/generate-react-wrappers.ts index fe06c97839..89ebf1e8b4 100644 --- a/scripts/generate-react-wrappers.ts +++ b/scripts/generate-react-wrappers.ts @@ -1,6 +1,7 @@ import { generateReactWrappers } from '@patternfly/pfe-tools/react/generate-wrappers.js'; const inURL = new URL('../custom-elements.json', import.meta.url); -const outURL = new URL('../kkkct/', import.meta.url); +const outURL = new URL('../react/', import.meta.url); + +await generateReactWrappers(inURL, outURL, '@rhds/elements', 'rh'); -await generateReactWrappers(inURL, outURL); From 4b194d8c883a7c232df8f1e6a9a37d95f2679d5a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Benny=20Powers=20-=20=D7=A2=D7=9D=20=D7=99=D7=A9=D7=A8?= =?UTF-8?q?=D7=90=D7=9C=20=D7=97=D7=99!?= Date: Tue, 5 Dec 2023 20:13:50 +0200 Subject: [PATCH 6/6] docs: code installation tabs (#1366) * docs: code installation tabs Fixes #1361 * docs: hack a fix for install tabs * docs: fix another careless error * docs: doh --- .changeset/tangy-sloths-scream.md | 4 +++ .../shortcodes/renderInstallation.cjs | 12 ++++---- .../elements/uxdot-installation-tabs.js | 28 ++++++++++++------- .../rh-navigation-secondary.ts | 14 ++-------- .../rh-secondary-nav.ts | 20 +++++++++++++ 5 files changed, 51 insertions(+), 27 deletions(-) create mode 100644 .changeset/tangy-sloths-scream.md create mode 100644 elements/rh-navigation-secondary/rh-secondary-nav.ts diff --git a/.changeset/tangy-sloths-scream.md b/.changeset/tangy-sloths-scream.md new file mode 100644 index 0000000000..bc4dbf572a --- /dev/null +++ b/.changeset/tangy-sloths-scream.md @@ -0,0 +1,4 @@ +--- +"@rhds/elements": patch +--- +``: moves the deprecated `` tag to a separate module diff --git a/docs/_plugins/shortcodes/renderInstallation.cjs b/docs/_plugins/shortcodes/renderInstallation.cjs index c6d14c4d3b..b6b13e1c93 100644 --- a/docs/_plugins/shortcodes/renderInstallation.cjs +++ b/docs/_plugins/shortcodes/renderInstallation.cjs @@ -32,7 +32,7 @@ fully initialized. Red Hat CDN - +

CDN Prerelease

We are currently working on our CDN, which will be soon moving @@ -81,9 +81,9 @@ ${!lightdomcss ? '' : /* md */`${lightdomcssblock} ~~~ `} - + NPM - + Install RHDS using your team's preferred NPM package manager, e.g. @@ -111,9 +111,9 @@ Replace \`/path/to\` in the \`href\` attribute with the installation path to the \`${docsPage.tagName}\` directory in your project. `} - + JSPM - +

Public CDNs

JSPM and other public CDNs should not be used on corporate domains. @@ -153,7 +153,7 @@ ${!lightdomcss ? '' : /* md */ `${lightdomcssblock} ~~~ `} - + ${content ?? ''}`} diff --git a/docs/assets/elements/uxdot-installation-tabs.js b/docs/assets/elements/uxdot-installation-tabs.js index 5583c54c28..b6ea3e4690 100644 --- a/docs/assets/elements/uxdot-installation-tabs.js +++ b/docs/assets/elements/uxdot-installation-tabs.js @@ -1,8 +1,9 @@ import { css } from 'lit'; -import '@rhds/elements/rh-alert/rh-alert.js'; + import { RhTabs } from '@rhds/elements/rh-tabs/rh-tabs.js'; +import { RhTabPanel } from '@rhds/elements/rh-tabs/rh-tab-panel.js'; -import { TabExpandEvent } from '@patternfly/elements/pf-tabs/BaseTab.js'; +import '@rhds/elements/rh-alert/rh-alert.js'; const TABS_KEY = 'rhds-installation-tabs-selected-index'; @@ -11,17 +12,11 @@ export class InstallationTabs extends RhTabs { static is = 'uxdot-installation-tabs'; - static styles = [...RhTabs.styles, css` - ::slotted(pre) { - max-width: 800px !important; - overflow-x: scroll; - } - `]; - static { customElements.define(this.is, this); } #onExpand(event) { - if (event instanceof TabExpandEvent) { + // TODO: when tabs is decoupled from PFE, update the event type here + if (event.constructor.name === 'TabExpandEvent') { localStorage.setItem(TABS_KEY, this.activeIndex.toString()); } } @@ -49,3 +44,16 @@ export class InstallationTabs extends RhTabs { this.addEventListener('expand', this.#onExpand); } } + +export class InstallationTabPanel extends RhTabPanel { + static is = 'uxdot-installation-tab-panel'; + + static styles = [...RhTabPanel.styles, css` + ::slotted(pre) { + max-width: 800px !important; + overflow-x: scroll; + } + `]; + + static { customElements.define(this.is, this); } +} diff --git a/elements/rh-navigation-secondary/rh-navigation-secondary.ts b/elements/rh-navigation-secondary/rh-navigation-secondary.ts index 039e46a947..f3db476674 100644 --- a/elements/rh-navigation-secondary/rh-navigation-secondary.ts +++ b/elements/rh-navigation-secondary/rh-navigation-secondary.ts @@ -14,6 +14,9 @@ import '@rhds/elements/lib/elements/rh-context-provider/rh-context-provider.js'; import './rh-navigation-secondary-menu-section.js'; import './rh-navigation-secondary-overlay.js'; +/** @deprecated */ +import './rh-secondary-nav.js'; + import { RhNavigationSecondaryDropdown, SecondaryNavDropdownExpandEvent } from './rh-navigation-secondary-dropdown.js'; import { DirController } from '../../lib/DirController.js'; @@ -432,19 +435,8 @@ export class RhNavigationSecondary extends LitElement { } } -@customElement('rh-secondary-nav') -class RhSecondaryNav extends RhNavigationSecondary { - #logger = new Logger(this); - - constructor() { - super(); - this.#logger.warn('rh-secondary-nav is deprecated. Use rh-navigation-secondary instead.'); - } -} - declare global { interface HTMLElementTagNameMap { 'rh-navigation-secondary': RhNavigationSecondary; - 'rh-secondary-nav': RhSecondaryNav; } } diff --git a/elements/rh-navigation-secondary/rh-secondary-nav.ts b/elements/rh-navigation-secondary/rh-secondary-nav.ts new file mode 100644 index 0000000000..7dfe2405e5 --- /dev/null +++ b/elements/rh-navigation-secondary/rh-secondary-nav.ts @@ -0,0 +1,20 @@ +/** @deprecated */ + +import { customElement } from 'lit/decorators/custom-element.js'; +import { RhNavigationSecondary } from './rh-navigation-secondary.js'; +import { Logger } from '@patternfly/pfe-core/controllers/logger.js'; + +@customElement('rh-secondary-nav') +class RhSecondaryNav extends RhNavigationSecondary { + constructor() { + super(); + new Logger(this).warn('rh-secondary-nav is deprecated. Use rh-navigation-secondary instead.'); + } +} + + +declare global { + interface HTMLElementTagNameMap { + 'rh-secondary-nav': RhSecondaryNav; + } +}