feat: react wrappers (#1527)

* 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 - עם ישראל חי! <[email protected]>

* feat(skip-link): add `<rh-skip-link>` (#1515)

* feat(skip-link): add `<rh-skip-link>`

* 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 <[email protected]>
Co-authored-by: Steven Spriggs <[email protected]>

* feat(back-to-top): add `<rh-back-to-top>` (#1517)

* feat(back-to-top): add `<rh-back-to-top>`

* 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 - עם ישראל חי! <[email protected]>

* fix!: context types (#1518)

* fix(lib)!: context types

webcomponents-cg/community-protocols#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 lit/lit#4614 and https://github.com/webcomponents-cg/community-protocols/pull/59/files

* docs: create changeset

---------

Co-authored-by: Steven Spriggs <[email protected]>

* 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 <[email protected]>

* 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 <[email protected]>
Co-authored-by: Benny Powers - עם ישראל חי! <[email protected]>

* 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 <[email protected]>

* feat(site-status): add `<rh-site-status>` (#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 <[email protected]>
Co-authored-by: Adam Johnson <[email protected]>
Co-authored-by: marionnegp <[email protected]>

.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');
+