From ba0404776e4ffc88665d0ce1a57023d7ba8455dd 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: Thu, 18 Apr 2024 18:12:48 +0300 Subject: [PATCH] feat: react wrappers (#1527) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * docs: draft release notes * fix(tabs): improve long tab content with container queries (#1411) * fix(tabs): improve long tab content with container queries * chore(tabs): add changeset * docs(tabs): update long tab content * docs: update .changeset/silver-hornets-cry.md --------- Co-authored-by: Benny Powers - עם ישראל חי! * feat(skip-link): add `` (#1515) * feat(skip-link): add `` * chore(skip-link): add changeset * docs(skip-link): add appropriate screenshot * fix: added lightdom-shim.css to export * chore: add Adam Johnson to contributors list * chore(skip-link): update readme * fix(skip-link): implement lightdom-shim * docs(skip-link): added JSDoc * docs(skip-link): enlarge screenshot * test(skip-link): add tests * chore(skip-link): lint tests * fix(skip-link): remove empty demo files * fix(skip-link): create container and move styles * fix(skip-link): reformat `.changeset` * fix(skip-link): add important to every CSS property * docs(skip-link): reformat `.changeset`. * fix(skip-link): Remove `!important` from lightdom shim. * fix(skip-link): set `font-size` * refactor(skip-link): change container `id` name * test(skip-link): refactor tests * feat: add more skip links docs content Note: There are a few images that still need to be added. * feat: add images to accessibility page * feat: add static image of skip link to Overview subpage * docs(skip-link): add sample element * feat: add deprecation alert to skip navigation page * test(skip-link): use `aTimeout` for focus test * feat: make the best practices more clear * docs(skip-link): add repoStatus * docs(skip-links): remove extraneous repoStatus shortcodes --------- Co-authored-by: marionnegp Co-authored-by: Steven Spriggs * feat(back-to-top): add `` (#1517) * feat(back-to-top): add `` * chore(back-to-top): lint * fix(back-to-top): support dev server and docs demo * fix(back-to-top): suggestion for focus ring when on differnt backgrounds * docs(back-to-top): update readme * test(back-to-top): add tests * chore(back-to-top): add changeset * docs(back-to-top): remove comment * chore(back-to-top): update changeset with example * chore(back-to-top): remove unused demo.css * docs(back-to-top): improve screenshot * docs(back-to-top): attempt fix for playground view * fix(back-to-top): change attribute to visible="always" * docs(back-to-top): add back to top to repo status * docs: fix bug when component isnt yet in the repoStatus.yml * docs(back-to-top): update shortcodes for repoStatus --------- Co-authored-by: Benny Powers - עם ישראל חי! * fix!: context types (#1518) * fix(lib)!: context types https://github.com/webcomponents-cg/community-protocols/pull/59 made a breaking change to the way the context protocol works. This commit brings our types in line with the new types on the protocol * fix(context)!: adapt our contexts to new types see https://github.com/lit/lit/pull/4614 and https://github.com/webcomponents-cg/community-protocols/pull/59/files * docs: create changeset --------- Co-authored-by: Steven Spriggs * feat(code-block): actions and line numbers (#1496) * feat(code-block): wip extensions * feat(code-block): wrap * feat(code-block): show more * perf(code-block): don't clone to compute lines thanks @nikkimk! * feat(code-block): line numbers * feat(code-block): icons still tbd: switching text of toggle button from "toggle wrap" to "toggle overflow" - probably should be a pattern thing * fix(code-block): toggle slots for actions * fix(code-block): style adjustments * fix(code-block): classic css whoopsie * fix(code-block): gradient this was fun to debug. the key insight is that pseudo elements of a grid are *also* grid items * docs(code-block): changesets * docs(code-block): jsdoc * fix(code-block): review notes * docs(code-block): remove expandable demo it was decided (cc @coreyvickery) that expandable would automatically determined * docs(code-block): remove card with tabs demo should be revisited after PFE3/TabsAriaController * fix(code-block): refactor in anticipation of rh-fab * fix(code-block): polish up actions * fix(code-block): wrap fab state * fix(code-block): badge, not tag * fix: 🦄 * fix(code-block): remove actions slot * fix(code-block): expand button styles * fix(code-block): tooltip state in wrap * feat: update code for action buttons in color context demo --------- Co-authored-by: marionnegp * chore: update to @patternfly/pfe-core version 3.0 (#1508) * chore: update patternfly/elements dep to 3.0 * chore: update lit and typescript deps * chore: update typescript config and declaration * fix(tile): update internals controller instantiation * fix(button): update internals controller instantiation * fix(accordion): update rti api for setting active item * fix(menu): update rti api for setting active item * fix(navigation-secondary): update rti api for setting active item * fix(subnav): update rti api for setting active item * fix(tabs): update rti api for setting active item * chore: remove pfe elements from dep to a devDep add pfe-core as dep * docs(dialog): remove unneeded imports from demo * chore: lint * chore: update deps * test(tile): tile group a11y spec * chore: node version * docs: remove cases of band shortcode * docs: uxdot-search a11y tweaks * docs: 11ty plugins * docs: import package * fix(button): lint a11y in template * fix(audio-player): label dialog from it's opening button * chore: add playwright browser install to test workflow * fix(tooltip): a11y template linting * fix(tabs): use context instead of lightdom classes * docs: add @lit/context to importMap * style(tabs): lint css * fix(tabs) revert use context instead of lightdom classes * fix(tabs): Reverts 4b27d24 * chore: update lit/context to 1.1.1 * fix(menu): implement updated RTIC api * test(menu): remove pageup and pagedown tests reserved for scrolling page * refactor: no side effects in getters * test(footer): deflake tests * test(tooltip): assert on ax tree instead of shadow root * fix(tooltip): invert css to hide content until open / initialized * fix(tabs): use aria-tabs-controller * fix(tabs): refactor using pfe-core 3 * fix(tabs): tab context * fix(tabs): box context --------- Co-authored-by: Benny Powers Co-authored-by: Benny Powers - עם ישראל חי! * chore: eslint 9 (#1523) * chore: update linters * style: lint everything * chore: add optional dependency for rollup-darwin-x64 * style: lint line length and autofixes * chore: add .cache files to eslint ignore * style(tile): lint line length * style: more linting * fix(tile): replace mistakenly deleted expression * fix(navigation-secondary): query for all nav links update RTIC usage * fix(navigation-secondary): update items on slotchange * test(skip-link): visibility assertion --------- Co-authored-by: Steven Spriggs * feat(site-status): add `` (#1507) * feat(site-status): add site-status * fix(site-status): add missing export * chore(site-stutus): fix comment * fix(site-status): lint * fix(site-status): add color-context * test(site-staus): fix missing semi colon * fix(site-status): remove errant import * fix(site-status): allow endpoint to be overridden * docs(site-status): add incorrect endpoint demo * docs(site-status): correct auto generated template for demo * test(site-status): improve tests * fix(site-status): lint * fix(site-status): lint * fix(site-status): ugh lint... * fix(site-status): revert customizable endpoint, add href to status page link * test(site-status): improve tests * docs(site-status): add status demos * docs(site-status): stub docs * docs(site-status): add jsdoc * docs: add site-status to related items * fix(site-status): add type guard for api response * docs(site-status): update readme * docs(site-status): imporove jsdoc * docs(site-status): add docs pages and images * chore(site-status): add changeset * chore(site-status): update changeset to include example * chore(site-status): remove unused demo files * fix(site-status): remove unused part * style(site-status): reorder type * fix(site-status): make #isApiStatus static * fix(site-status): class decorators cant be use with static private identifier * fix(site-status): move getStatus to firstUpdated, remove extraneous throw * fix(site-status): handle capitalization in css * fix(site-status): correct first letter uppercase style * fix(site-status): revert response error removal * fix(site-status): remove status as statusText includes the 404 text. * fix(site-status): correct viewbox attr * docs(site-status): add repoStatus * test(site-status): use sinon for fetch stub * test(site-status): remove unused aTimeout * fix(site-status): switch api call to a try catch * fix(site-status): remove contextProvider not used in design spec * fix(site-status): use block instead of display contents on host * fix(site-status): move restore of fetch to top describes * fix(site-status): implement loading-text slot for translations and accessibility with aria-polite and aria-busy * docs(site-status): improve demos with loading state demo * fix(site-status): add focus and hover states * docs(site-status): add if status is still loading to accessibility * fix(site-status): readding color context provider * chore(site-status): lint * fix(site-status): remove context provider add dark styles * docs(site-status): readding arg check to fetch override * chore(site-status): lint * docs: update .changeset/witty-papayas-tease.md * style: lint * feat: react wrapper components --------- Co-authored-by: Steven Spriggs Co-authored-by: Adam Johnson Co-authored-by: marionnegp --- .changeset/spicy-cups-fly.md | 38 ++++++++++++++++++++++++++++++ .gitignore | 1 + eslint.config.js | 1 + package.json | 15 ++++++++++++ scripts/generate-react-wrappers.ts | 11 +++++++++ 5 files changed, 66 insertions(+) create mode 100644 .changeset/spicy-cups-fly.md create mode 100644 scripts/generate-react-wrappers.ts diff --git a/.changeset/spicy-cups-fly.md b/.changeset/spicy-cups-fly.md new file mode 100644 index 0000000000..3d7aaaf773 --- /dev/null +++ b/.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 ( + expanded {expanded} + {tabs.map(({ heading, content }, i) => ( + setExpanded(i)}>{heading} + {content}))} + + ); +} +``` diff --git a/.gitignore b/.gitignore index 12b4b78b54..1216e5e6df 100644 --- a/.gitignore +++ b/.gitignore @@ -12,6 +12,7 @@ docs/assets/playgrounds/ # Build artifacts elements/*/*.js elements/*/test/*.js +react lib/**/*.js !elements/**/demo/*.css *.map diff --git a/eslint.config.js b/eslint.config.js index ffa894e585..4f219f682b 100644 --- a/eslint.config.js +++ b/eslint.config.js @@ -16,6 +16,7 @@ export default tseslint.config( '**/*.d.ts', '**/*.(spec|e2e).js', + 'react', 'elements/**/*.js', 'lib/**/*.js', diff --git a/package.json b/package.json index 2d1505dcbc..add67b6fa8 100644 --- a/package.json +++ b/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" }, diff --git a/scripts/generate-react-wrappers.ts b/scripts/generate-react-wrappers.ts new file mode 100644 index 0000000000..c02441449e --- /dev/null +++ b/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'); +