feat(templates): add templates package

packages/react-core/src/components/Select/examples/Select.md

@@ -15,6 +15,8 @@ import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
 
 Select builds off of the menu component suite to adapt commonly used properties and functions to create a select menu. See the [menu documentation](/components/menus/menu) for a full list of properties that may be used to further customize a select menu. View the [custom menu examples](/components/menus/custom-menus) to see examples of fully functional select menus.
 
+For use cases that do not require a lot of customization, there are various template components available to use in the `@react-templates` package. These templates have a streamlined API and logic, making them easier to set up and use, but are limited in scope and flexibility. See the [templates page](/components/menus/select/react-templates) for details.
+
 ### Single select
 To let users select a single item from a list, use a single select menu.
 

packages/react-docs/package.json

@@ -30,7 +30,8 @@
     "@patternfly/react-icons": "^5.3.0-prerelease.3",
     "@patternfly/react-styles": "^5.3.0-prerelease.3",
     "@patternfly/react-table": "^5.3.0-prerelease.18",
-    "@patternfly/react-tokens": "^5.3.0-prerelease.3"
+    "@patternfly/react-tokens": "^5.3.0-prerelease.3",
+    "@patternfly/react-templates": "^1.0.0-alpha.0"
   },
   "devDependencies": {
     "@patternfly/documentation-framework": "^5.8.2",

packages/react-docs/patternfly-docs/patternfly-docs.source.js

@@ -17,13 +17,15 @@ module.exports = (baseSourceMD, sourceProps) => {
     .resolve('@patternfly/react-code-editor/package.json')
     .replace('package.json', 'src');
   const reactDragDropPath = require.resolve('@patternfly/react-drag-drop/package.json').replace('package.json', 'src');
+  const reactTemplatesPath = require.resolve('@patternfly/react-templates/package.json').replace('package.json', 'src');
   const reactPropsIgnore = '**/*.test.tsx';
 
   sourceProps(path.join(reactCorePath, '/**/*.tsx'), reactPropsIgnore);
   sourceProps(path.join(reactTablePath, '/**/*.tsx'), reactPropsIgnore);
   sourceProps(path.join(reactChartsPath, '/**/*.tsx'), reactPropsIgnore);
   sourceProps(path.join(reactCodeEditorPath, '/**/*.tsx'), reactPropsIgnore);
   sourceProps(path.join(reactDragDropPath, '/**/*.tsx'), reactPropsIgnore);
+  sourceProps(path.join(reactTemplatesPath, '/**/*.tsx'), reactPropsIgnore);
 
   // React MD
   sourceMD(path.join(reactCorePath, '/components/**/examples/*.md'), 'react');
@@ -46,6 +48,9 @@ module.exports = (baseSourceMD, sourceProps) => {
   // Drag drop MD
   sourceMD(path.join(reactDragDropPath, '/**/examples/*.md'), 'react-next');
 
+  // Templates MD
+  sourceMD(path.join(reactTemplatesPath, '/**/examples/*.md'), 'react-templates');
+
   // OUIA MD
   sourceMD(path.join(reactCorePath, 'helpers/OUIA/OUIA.md'), 'react');
 };

packages/react-templates/.gitignore

@@ -0,0 +1,2 @@
+/deprecated
+/components

packages/react-templates/.npmignore

@@ -0,0 +1,2 @@
+dist/*.tsbuildinfo
+tsconfig.*

packages/react-templates/CHANGELOG.md

@@ -0,0 +1,4 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

packages/react-templates/README.md

@@ -0,0 +1,42 @@
+# @patternfly/react-templates
+
+This package provides wrapped Patternfly component demos with a streamlined API for ease of use.
+
+### Prerequisite
+
+#### Node Environment
+
+This project currently supports [Node Active LTS](https://github.com/nodejs/Release#release-schedule) releases. Please stay current with Node Active LTS when developing patternfly-react.
+
+For example, to develop with Node 18, use the following:
+
+```
+nvm install 18
+nvm use 18
+```
+
+This project also requires a Yarn version of >=1.6.0. The latest version can be installed from the [Yarn](https://yarnpkg.com/) home page.
+
+### Installing
+
+```
+yarn add @patternfly/react-templates
+```
+
+or
+
+```
+npm install @patternfly/react-templates --save
+```
+
+### Usage
+
+It's strongly advised to use the PatternFly Base CSS in your whole project, or some components may diverge in appearance:
+
+```js
+import '@patternfly/react-core/dist/styles/base.css';
+```
+
+```js
+import { SimpleSelect } from '@patternfly/react-templates';
+```

packages/react-templates/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@patternfly/react-templates",
+  "version": "1.0.0-alpha.0",
+  "description": "This package provides wrapped component demos for ease of use\n",
+  "main": "dist/js/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/esm/index.d.ts",
+  "patternfly:src": "src/",
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public",
+    "tag": "alpha"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/patternfly/patternfly-react.git"
+  },
+  "keywords": [
+    "react",
+    "patternfly",
+    "templates"
+  ],
+  "author": "Red Hat",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/patternfly/patternfly-react/issues"
+  },
+  "homepage": "https://github.com/patternfly/patternfly-react/tree/main/packages/react-templates#readme",
+  "scripts": {
+    "build:umd": "rollup -c --environment IS_PRODUCTION",
+    "build:single:packages": "node ../../scripts/build-single-packages.js --config single-packages.config.json",
+    "clean": "rimraf dist components deprecated",
+    "subpaths": "node ../../scripts/exportSubpaths.js --config subpaths.config.json"
+  },
+  "dependencies": {
+    "@patternfly/react-core": "^5.3.0-prerelease.17",
+    "@patternfly/react-icons": "^5.3.0-prerelease.3",
+    "@patternfly/react-styles": "^5.3.0-prerelease.3",
+    "@patternfly/react-tokens": "^5.3.0-prerelease.3",
+    "tslib": "^2.5.0"
+  },
+  "peerDependencies": {
+    "react": "^17 || ^18",
+    "react-dom": "^17 || ^18"
+  },
+  "devDependencies": {
+    "rimraf": "^2.6.2",
+    "typescript": "^4.7.4"
+  }
+}

packages/react-templates/rollup.config.js

@@ -0,0 +1,7 @@
+const { name } = require('./package.json');
+const baseConfig = require('../rollup.base');
+
+module.exports = baseConfig({
+  packageName: name.replace('@patternfly/', ''),
+  name: 'PatternFlyTemplates'
+});

packages/react-templates/single-packages.config.json

@@ -0,0 +1,4 @@
+{
+  "packageName": "@patternfly/react-templates",
+  "exclude": ["dist/esm/deprecated/index.js", "dist/esm/next/index.js"]
+}

packages/react-templates/src/components/Select/SelectSimple.tsx

@@ -0,0 +1,100 @@
+import React from 'react';
+import { Select, SelectList, SelectOption, SelectOptionProps } from '@patternfly/react-core/dist/esm/components/Select';
+import { MenuToggle, MenuToggleElement } from '@patternfly/react-core/dist/esm/components/MenuToggle';
+
+export interface SelectSimpleOption extends Omit<SelectOptionProps, 'content'> {
+  /** Content of the select option. */
+  content: React.ReactNode;
+  /** Value of the select option. */
+  value: string | number;
+}
+
+export interface SelectSimpleProps {
+  /** @hide Forwarded ref */
+  innerRef?: React.Ref<any>;
+  /** Initial options of the select. */
+  initialOptions?: SelectSimpleOption[];
+  /** Callback triggered on selection. */
+  onSelect?: (_event: React.MouseEvent<Element, MouseEvent>, selection: string | number) => void;
+  /** Callback triggered when the select opens or closes. */
+  onToggle?: (nextIsOpen: boolean) => void;
+  /** Flag indicating the select should be disabled. */
+  isDisabled?: boolean;
+  /** Content of the toggle. Defaults to the selected option. */
+  toggleContent?: React.ReactNode;
+  /** Width of the toggle */
+  toggleWidth?: string;
+}
+
+const SelectSimpleBase: React.FunctionComponent<SelectSimpleProps> = ({
+  innerRef,
+  initialOptions,
+  isDisabled,
+  onSelect,
+  onToggle,
+  toggleContent,
+  toggleWidth = '200px',
+  ...props
+}: SelectSimpleProps) => {
+  const [isOpen, setIsOpen] = React.useState(false);
+  const [selected, setSelected] = React.useState<string>('Select a value');
+
+  const simpleSelectOptions = initialOptions?.map((option) => {
+    const { content, value, ...props } = option;
+    const isSelected = selected.includes(`${value}`);
+    return (
+      <SelectOption {...props} value={value} key={value} isSelected={isSelected}>
+        {content}
+      </SelectOption>
+    );
+  });
+
+  const onToggleClick = () => {
+    onToggle && onToggle(!isOpen);
+    setIsOpen(!isOpen);
+  };
+
+  const _onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, value: string | number | undefined) => {
+    onSelect && onSelect(_event, value);
+    setSelected(value as string);
+    setIsOpen(false);
+  };
+
+  const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
+    <MenuToggle
+      ref={toggleRef}
+      onClick={onToggleClick}
+      isExpanded={isOpen}
+      isDisabled={isDisabled}
+      style={
+        {
+          width: toggleWidth
+        } as React.CSSProperties
+      }
+    >
+      {toggleContent ? toggleContent : selected}
+    </MenuToggle>
+  );
+
+  return (
+    <Select
+      id="single-select"
+      isOpen={isOpen}
+      selected={selected}
+      onSelect={_onSelect}
+      onOpenChange={(isOpen) => setIsOpen(isOpen)}
+      toggle={toggle}
+      shouldFocusToggleOnSelect
+      ref={innerRef}
+      {...props}
+    >
+      <SelectList>{simpleSelectOptions}</SelectList>
+    </Select>
+  );
+};
+
+export const SelectSimple = React.forwardRef((props: SelectSimpleProps, ref: React.Ref<any>) => (
+  <SelectSimpleBase {...props} innerRef={ref} />
+));
+
+SelectSimple.displayName = 'SelectSimple';

packages/react-templates/src/components/Select/examples/SelectSimpleDemo.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { Checkbox } from '@patternfly/react-core';
+import { SelectSimple, SelectSimpleOption } from '@patternfly/react-templates';
+
+export const SelectSimpleDemo: React.FunctionComponent = () => {
+  const [isDisabled, setIsDisabled] = React.useState<boolean>(false);
+
+  const initialOptions: SelectSimpleOption[] = [
+    { content: 'Option 1', value: 'option1' },
+    { content: 'Option 2', value: 'option2' },
+    { content: 'Option 3', value: 'option3' }
+  ];
+
+  return (
+    <React.Fragment>
+      <Checkbox
+        id="toggle-disabled"
+        label="isDisabled"
+        isChecked={isDisabled}
+        onChange={(_event, checked) => setIsDisabled(checked)}
+        style={{ marginBottom: 20 }}
+      />
+      <SelectSimple initialOptions={initialOptions} isDisabled={isDisabled} />
+    </React.Fragment>
+  );
+};

packages/react-templates/src/components/Select/examples/SelectTemplates.md

@@ -0,0 +1,23 @@
+---
+id: Select
+section: components
+subsection: menus
+template: true
+beta: true
+propComponents: ['SimpleSelect']
+---
+
+Note: Templates live in their own package at [@patternfly/react-templates](https://www.npmjs.com/package/@patternfly/react-templates)!
+
+For custom use cases, please see the select component suite from [@patternfly/react-core](https://www.npmjs.com/package/@patternfly/react-core).
+
+import { SelectOption, Checkbox } from '@patternfly/react-core';
+import { SelectSimple } from '@patternfly/react-templates';
+
+## Select template examples
+
+### Simple
+
+```ts file="SelectSimpleDemo.tsx"
+
+```

packages/react-templates/src/components/Select/index.ts

@@ -0,0 +1 @@
+export * from './SelectSimple';

packages/react-templates/src/components/index.ts

@@ -0,0 +1 @@
+export * from './Select';

packages/react-templates/src/index.ts

@@ -0,0 +1 @@
+export * from './components';

packages/react-templates/subpaths.config.json

@@ -0,0 +1,4 @@
+{
+  "packageName": "@patternfly/react-templates",
+  "paths": ["components"]
+}

packages/react-templates/tsconfig.cjs.json

@@ -0,0 +1,8 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./dist/js",
+    "module": "commonjs",
+    "tsBuildInfoFile": "dist/cjs.tsbuildinfo"
+  }
+}

packages/react-templates/tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "extends": "../tsconfig.base.json",
+  "compilerOptions": {
+    "rootDir": "./src",
+    "outDir": "./dist/esm",
+    "tsBuildInfoFile": "dist/esm.tsbuildinfo"
+  },
+  "include": [
+    "./src/*",
+    "./src/**/*"
+  ],
+  "references": [
+    {
+      "path": "../react-core"
+    },
+    {
+      "path": "../react-icons"
+    },
+    {
+      "path": "../react-styles"
+    }
+  ]
+}

packages/tsconfig.cjs.json

@@ -21,6 +21,9 @@
     },
     {
       "path": "./react-table/tsconfig.cjs.json"
+    },
+    {
+      "path": "./react-templates/tsconfig.cjs.json"
     }
   ]
 }

packages/tsconfig.json

@@ -21,6 +21,9 @@
     },
     {
       "path": "./react-table"
+    },
+    {
+      "path": "./react-templates"
     }
   ]
 }

scripts/promote.sh

@@ -8,6 +8,7 @@ packages=(
   @patternfly/react-icons
   @patternfly/react-styles
   @patternfly/react-table
+  @patternfly/react-templates
   @patternfly/react-tokens
 )
 prereleaseTag=prerelease