feat(Tearsheet): Implement new Tearsheet component

README.md

@@ -29,7 +29,7 @@ Please reference [PatternFly's AI-assisted development guidelines](https://githu
 ### Before adding a new component:
 
 - make sure your use case is new/complex enough to be added to this extension
-- the component should bring a value value above and beyond existing PatternFly components
+- the component should bring a value above and beyond existing PatternFly components
 
 ### To add a new component:
 
@@ -40,7 +40,7 @@ Please reference [PatternFly's AI-assisted development guidelines](https://githu
 
 #### Example component:
 
-```
+``` TSX
 import * as React from 'react';
 import { Content } from '@patternfly/react-core';
 import { createUseStyles } from 'react-jss';
@@ -75,7 +75,7 @@ export default MyComponent;
 
 #### Index file example:
 
-```
+``` TSX
 export { default } from './MyComponent';
 export * from './MyComponent';
 ```
@@ -99,8 +99,7 @@ src
 
 #### Component API definition example:
 
-```
-
+``` TSX
 import { FunctionComponent } from 'react';
 
 // when possible, extend available PatternFly types
@@ -113,7 +112,7 @@ export const MyComponent: FunctionComponent<MyComponentProps> = ({ customLabel,
 
 #### Markdown file example:
 
-````
+```` MDX
 ---
 section: Component groups
 subsection: My component's category
@@ -135,7 +134,7 @@ MyComponent has been created to demo contributing to this repository.
 
 #### Component usage file example: (`MyComponentExample.tsx`)
 
-```
+``` TSX
 import { FunctionComponent } from 'react';
 
 const MyComponentExample: FunctionComponent = () => (

packages/module/generate-fed-package-json.js

@@ -1,14 +1,14 @@
 const fse = require('fs-extra');
-const { globSync } = require('glob');
 const path = require('path');
 const { default: getDynamicModuleMap } = require('../../scripts/parse-dynamic-modules.mjs');
+const { toPosixPath, posixGlobSync, posixRelative } = require('./utils');
 
-const root = process.cwd();
+const root = toPosixPath(process.cwd());
 
-const sourceFiles = globSync(`${root}/src/*/`)
+const sourceFiles = posixGlobSync(`${root}/src/*/`)
   .map((name) => name.replace(/\/$/, ''));
-  
-const indexTypings = globSync(`${root}/src/index.d.ts`);
+
+const indexTypings = posixGlobSync(`${root}/src/index.d.ts`);
 
 const ENV_AGNOSTIC_ROOT = `${root}/dist/dynamic`
 
@@ -23,9 +23,9 @@ async function copyTypings(files, dest) {
 
 async function createPackage(file) {
   const fileName = file.split('/').pop();
-  const esmSource = globSync(`${root}/dist/esm/${fileName}/**/index.js`)[0];
-  const cjsSource = globSync(`${root}/dist/cjs/${fileName}/**/index.js`)[0];
-  const typingsSource = globSync(`${root}/dist/esm/${fileName}/**/index.d.ts`)[0]
+  const esmSource = posixGlobSync(`${root}/dist/esm/${fileName}/**/index.js`)[0];
+  const cjsSource = posixGlobSync(`${root}/dist/cjs/${fileName}/**/index.js`)[0];
+  const typingsSource = posixGlobSync(`${root}/dist/esm/${fileName}/**/index.d.ts`)[0]
   /**
    * Prevent creating package.json for directories with no JS files (like CSS directories)
    */
@@ -39,14 +39,14 @@ async function createPackage(file) {
   // ensure the directory exists
   fse.ensureDirSync(destDir)
 
-  const esmRelative = path.relative(file, esmSource).replace('/dist', '');
-  const cjsRelative = path.relative(file, cjsSource).replace('/dist', '');
-  const tsRelative = path.relative(file, typingsSource).replace('/dist', '')
+  const esmRelative = posixRelative(file, esmSource).replace('/dist', '');
+  const cjsRelative = posixRelative(file, cjsSource).replace('/dist', '');
+  const tsRelative = posixRelative(file, typingsSource).replace('/dist', '')
   const content = {
     main: cjsRelative,
     module: esmRelative,
   };
-  const typings = globSync(`${root}/src/${fileName}/*.d.ts`);
+  const typings = posixGlobSync(`${root}/src/${fileName}/*.d.ts`);
   const cmds = [];
   content.typings = tsRelative;
   cmds.push(copyTypings(typings, `${root}/dist/${fileName}`));

packages/module/generate-index.js

@@ -1,12 +1,12 @@
 const fse = require('fs-extra');
-const { globSync } = require('glob');
 const path = require('path');
+const { posixGlobSync } = require('./utils');
 
 const root = process.cwd();
 
 const ENV_AGNOSTIC_ROOT = `${root}/src`
 
-const sourceFiles = globSync(path.resolve(__dirname, './src/*/index.ts'))
+const sourceFiles = posixGlobSync(path.resolve(__dirname, './src/*/index.ts'))
 
 async function generateIndex(files) {
   // ensure the dynamic root exists

packages/module/patternfly-docs/content/extensions/component-groups/examples/Tearsheet/Tearsheet.md

@@ -0,0 +1,71 @@
+---
+# Sidenav top-level section
+# should be the same for all markdown files
+section: extensions
+subsection: component-groups
+# Sidenav secondary level section
+# should be the same for all markdown files
+id: Tearsheet
+# Tab (react | react-demos | html | html-demos | design-guidelines | accessibility)
+source: react
+# If you use typescript, the name of the interface to display props for
+# These are found through the sourceProps function provided in patternfly-docs.source.js
+propComponents: ['Tearsheet', 'TearsheetHeader', 'TearsheetBody', 'TearsheetFooter', 'TearsheetGroup']
+sourceLink: https://github.com/patternfly/react-component-groups/blob/main/packages/module/patternfly-docs/content/extensions/component-groups/examples/Tearsheet/Tearsheet.md
+---
+
+import { Fragment, useState } from 'react';
+import spacing from '@patternfly/react-styles/css/utilities/Spacing/spacing';
+import TearsheetGroup from '@patternfly/react-component-groups/dist/dynamic/TearsheetGroup';
+import Tearsheet from '@patternfly/react-component-groups/dist/dynamic/Tearsheet';
+import TearsheetHeader from '@patternfly/react-component-groups/dist/dynamic/TearsheetHeader';
+import TearsheetBody from '@patternfly/react-component-groups/dist/dynamic/TearsheetBody';
+import TearsheetFooter from '@patternfly/react-component-groups/dist/dynamic/TearsheetFooter';
+
+**Tearsheet** are a full-screen extension of the `<Modal>` component allowing more complex experiences to be provided to the user.
+While the biggest Modal size (`ModalVariant.large`) may work for some cases, tearsheets allow near the entire real-estate to be leveraged.
+This component extends the [modal component](/components/modal) allowing any use of its properties to be provided.
+
+## Examples
+
+### Basic
+
+Typical tearsheets should make use of the entire area, for this basic case some sample text is rendered. 
+
+```ts file="./TearsheetBasic.tsx"
+```
+
+### Tearsheet layouts
+
+Tearsheets should allow various sorts of layouts to be rendered.
+The `<TearsheetBody>` component will handle scrolling for long content.
+
+```ts file="./TearsheetLayouts.tsx"
+```
+
+### Stacked
+
+One special use case with tearsheets is stacking.
+When a user is using a tearsheet, if another one needs to open it can open one level "on-top" of it in a new stack.
+Tearsheets offer 3 stack levels (0,1,2). 
+A special stack level -1 allows a tearsheet to hide behind others.
+
+```ts file="./TearsheetStacked.tsx"
+```
+
+### Tearsheet group (infinite stacking)
+
+Use a `TearsheetGroup` to manage an unbounded number of stacked tearsheets.
+`children` rendering order determines stacking priority with later children stacking in front of earlier ones.
+Only the top 3 open tearsheets are visible; earlier ones hide behind the stack and reappear as front tearsheets are closed.
+
+```ts file="./TearsheetGroup.tsx"
+```
+
+### Tearsheets vs Modals
+
+To illustrate the difference between a tearsheet and a modal, this example showcases a complex use case with a search bar, side panel, and a number of cards.
+In a modal the content is crammed and is not as usable as if it were on a bigger area like the tearsheet.
+
+```ts file="./TearsheetComparison.tsx"
+```

packages/module/patternfly-docs/content/extensions/component-groups/examples/Tearsheet/TearsheetBasic.tsx

@@ -0,0 +1,43 @@
+import { Fragment, useState } from 'react';
+import { Button } from '@patternfly/react-core';
+import Tearsheet from '@patternfly/react-component-groups/dist/dynamic/Tearsheet';
+import TearsheetHeader from '@patternfly/react-component-groups/dist/dynamic/TearsheetHeader';
+import TearsheetBody from '@patternfly/react-component-groups/dist/dynamic/TearsheetBody';
+import TearsheetFooter from '@patternfly/react-component-groups/dist/dynamic/TearsheetFooter';
+
+export const TearsheetBasic: React.FunctionComponent = () => {
+  const [ isTearsheetOpen, setIsTearsheetOpen ] = useState(false);
+
+  const toggleTearsheet = (_event: React.MouseEvent<Element, MouseEvent> | KeyboardEvent | MouseEvent) => {
+    setIsTearsheetOpen(!isTearsheetOpen);
+  };
+
+  return (
+    <Fragment>
+      <Button variant="primary" onClick={toggleTearsheet}>
+        Show Tearsheet
+      </Button>
+      <Tearsheet
+        isOpen={isTearsheetOpen}
+        onClose={(e: React.MouseEvent<Element, MouseEvent> | KeyboardEvent | MouseEvent) => toggleTearsheet(e)}
+      >
+        <TearsheetHeader title="Tearsheet Header" labelId="basic-modal-title" />
+        <TearsheetBody>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+          magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+          consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
+          est laborum.
+        </TearsheetBody>
+        <TearsheetFooter>
+          <Button key="confirm" variant="primary" onClick={toggleTearsheet}>
+            Confirm
+          </Button>
+          <Button key="cancel" variant="link" onClick={toggleTearsheet}>
+            Cancel
+          </Button>
+        </TearsheetFooter>
+      </Tearsheet>
+    </Fragment>
+  );
+};