@agility/plenum-ui 2.0.0-rc47 → 2.0.0-rc49

package/stories/Introduction.mdx

@@ -1,314 +1,314 @@
-import { Meta } from "@storybook/blocks"
-import Code from "./assets/code-brackets.svg"
-import Colors from "./assets/colors.svg"
-import Comments from "./assets/comments.svg"
-import Direction from "./assets/direction.svg"
-import Flow from "./assets/flow.svg"
-import Plugin from "./assets/plugin.svg"
-import Repo from "./assets/repo.svg"
-import StackAlt from "./assets/stackalt.svg"
-
-<Meta title="Plenum Introduction" />
-
-<style>
-  {`
-    .subheading {
-      --mediumdark: '#999999';
-      font-weight: 900;
-      font-size: 13px;
-      color: #999;
-      letter-spacing: 6px;
-      line-height: 24px;
-      text-transform: uppercase;
-      margin-bottom: 12px;
-      margin-top: 40px;
-    }
-
-    .link-list {
-      display: grid;
-      grid-template-columns: 1fr;
-      grid-template-rows: 1fr 1fr;
-      row-gap: 10px;
-    }
-
-    @media (min-width: 620px) {
-      .link-list {
-        row-gap: 20px;
-        column-gap: 20px;
-        grid-template-columns: 1fr 1fr;
-      }
-    }
-
-    @media all and (-ms-high-contrast:none) {
-    .link-list {
-        display: -ms-grid;
-        -ms-grid-columns: 1fr 1fr;
-        -ms-grid-rows: 1fr 1fr;
-      }
-    }
-
-    .link-item {
-      display: block;
-      padding: 20px 30px 20px 15px;
-      border: 1px solid #00000010;
-      border-radius: 5px;
-      transition: background 150ms ease-out, border 150ms ease-out, transform 150ms ease-out;
-      color: #333333;
-      display: flex;
-      align-items: flex-start;
-    }
-
-    .link-item:hover {
-      border-color: #1EA7FD50;
-      transform: translate3d(0, -3px, 0);
-      box-shadow: rgba(0, 0, 0, 0.08) 0 3px 10px 0;
-    }
-
-    .link-item:active {
-      border-color: #1EA7FD;
-      transform: translate3d(0, 0, 0);
-    }
-
-    .link-item strong {
-      font-weight: 700;
-      display: block;
-      margin-bottom: 2px;
-    }
-
-    .link-item img {
-      height: 40px;
-      width: 40px;
-      margin-right: 15px;
-      flex: none;
-    }
-
-    .link-item span {
-      font-size: 14px;
-      line-height: 20px;
-    }
-
-    .tip {
-      display: inline-block;
-      border-radius: 1em;
-      font-size: 11px;
-      line-height: 12px;
-      font-weight: 700;
-      background: #E7FDD8;
-      color: #66BF3C;
-      padding: 4px 12px;
-      margin-right: 10px;
-      vertical-align: top;
-    }
-
-    .tip-wrapper {
-      font-size: 13px;
-      line-height: 20px;
-      margin-top: 40px;
-      margin-bottom: 40px;
-    }
-
-    .tip-wrapper code {
-      font-size: 12px;
-      display: inline-block;
-    }
-
-`}
-</style>
-
-[![Agility Yellow Triangle Logo withe gray text reading Agility to the right of the triangle](https://cdn.agilitycms.com/content-manager/images/logos/agility-logo-storybook-350.png)](https://agilitycms.com/)
-# Agility Plenum UI Library 
-
-Welcome to Plenum, the definitive UI library for working within the [Agility CMS](https://www.agilitycms.com/) ecosystem. Built with [Next.js 13](https://nextjs.org/) and [Storybook 7.1](https://storybook.js.org/), Plenum is a comprehensive collection of components and patterns designed for building user interfaces in Agility CMS, as well as your own applications within the Agility CMS ecosystem.
-
-
-## Building for the Agility Marketplace
-
-The Plenum library is designed to encourage and facilitate building applications for the Agility CMS Marketplace. Use the rich selection of components and patterns to build consistent, robust, and user-friendly applications for the Agility ecosystem.
-
-Contributions to extend and improve this library are welcome! Feel free to fork the repository and submit pull requests.
-
-## Features
-
-- Comprehensive UI components library, designed for versatility and consistency.
-- Built with modern technologies like Next.js 13 and Storybook 7.1.
-- Includes automation scripts for efficient component creation.
-- Adopts Tailwind CSS for utility-first styling.
-- Easy to use, install, and integrate into your project.
-  
-## Prerequisites
-
-Before you begin, ensure that Tailwind CSS is installed in your project. Follow the instructions here: [Install Tailwind CSS with Next.js](https://tailwindcss.com/docs/guides/nextjs)
-
-In your app entry point (i.e. \`_app.tsx\`), import the \`globals.css\` file from the previous step, and the \`tailwind.css\` file from Plenum:
-
-```jsx
-import "<RELATIVE_PATH>/globals.css";
-import "@agility/plenum-ui/dist/lib/tailwind.css";
-```
-
-Make sure to add any additional styles before these two import statements to prevent overwriting the Plenum styling.
-
-## Installation
-
-You can install the Plenum library using npm or yarn:
-
-```bash
-# Using npm:
-npm install @agility/plenum-ui
-
-# Using yarn:
-yarn add @agility/plenum-ui
-```
-
-## Usage
-
-Import and use the Plenum components in your React components:
-
-```jsx
-import { Component } from '@agility/plenum-ui';
-
-<Component {...{ComponentProps}} />
-```
-
-## Scripts
-
-### Development and Build Scripts
-
-Run your development server with Storybook:
-
-```bash
-npm run dev
-# or
-yarn dev
-```
-
-Build your project:
-
-```bash
-npm run build
-# or
-yarn build
-```
-
-Clean the \`dist\` directory:
-
-```bash
-npm run clean
-# or
-yarn clean
-```
-
-Lint your project:
-
-```bash
-npm run lint
-# or
-yarn lint
-```
-
-Build Tailwind CSS:
-
-```bash
-npm run build:tw
-# or
-yarn build:tw
-```
-
-### Storybook Scripts
-
-Build your Storybook:
-
-```bash
-npm run build-storybook
-# or
-yarn build-storybook
-```
-
-Run your Storybook in development mode:
-
-```bash
-npm run storybook:dev
-# or
-yarn storybook:dev
-```
-
-Generate Tailwind CSS for Storybook and watch for changes:
-
-```bash
-npm run storybook:tw
-# or
-yarn storybook:tw
-```
-
-Build specific parts of Storybook:
-
-```bash
-# Build Storybook
-npm run sb-build:storybook
-# or
-yarn sb-build:storybook
-
-# Build Tailwind CSS for Storybook
-npm run sb-build:tw
-# or
-yarn sb-build:tw
-```
-
-Compile TypeScript files using custom build script:
-
-```bash
-npm run build:tsc
-# or
-yarn build:tsc
-```
-
-These scripts cover various tasks related to development, build processes, linting, and handling specific aspects like Storybook and Tailwind CSS. Make sure to run the appropriate script for the task you want to perform.
-
-
-### Component Generation Script
-
-We have a Node.js script that automates the creation of new components for our Storybook library. This script generates a component directory, along with the necessary files like \`Component.tsx\`, \`Component.stories.tsx\`, and \`index.tsx\`.
-
-#### How to use the script
-
-To use the script, you should have Node.js installed. From the terminal, you can create a new component by running the following command:
-
-```bash
-node create-component.js ComponentName DestinationDirectory
-```
-
-This command takes two arguments:
-
-- \`ComponentName\` - The name of the new component you want to create. This should be in PascalCase (for example, "MyComponent").
-- \`DestinationDirectory\` - The directory where the new component will be created. This should be relative to the 'stories' directory. (for example, "atoms" or "Molecules").
-
-The script will create a new directory with the given component name inside the specified destination directory (under the 'stories' directory). Then, it will generate three files in the new directory:
-
-- \`ComponentName.tsx\` - This is the component file. It contains a basic React functional component structure.
-- \`ComponentName.stories.tsx\` - This is the Storybook story file. It sets up a basic story for the new component.
-- \`index.tsx\` - This file simply exports the new component. It's used for cleaner imports.
-
-#### Example
-
-To create a new component named "Button" in the "atoms" directory, you would run:
-
-```bash
-node create-component.js Button atoms
-```
-
-This would create a directory structure like:
-
-```
-- stories
-  - atoms
-    - Button
-      - Button.tsx
-      - Button.stories.tsx
-      - index.tsx
-```
-
-Each of the generated files will contain basic boilerplate code that you can start with.
-
-##### Notes
-
-This script does prompt the user before overwriting existing directories, so you can run it with confidence. Always use PascalCase for component names, and ensure the destination directory exists or can be created. If you encounter any issues, you can create the component and its files manually
+import { Meta } from "@storybook/blocks"
+import Code from "./assets/code-brackets.svg"
+import Colors from "./assets/colors.svg"
+import Comments from "./assets/comments.svg"
+import Direction from "./assets/direction.svg"
+import Flow from "./assets/flow.svg"
+import Plugin from "./assets/plugin.svg"
+import Repo from "./assets/repo.svg"
+import StackAlt from "./assets/stackalt.svg"
+
+<Meta title="Plenum Introduction" />
+
+<style>
+  {`
+    .subheading {
+      --mediumdark: '#999999';
+      font-weight: 900;
+      font-size: 13px;
+      color: #999;
+      letter-spacing: 6px;
+      line-height: 24px;
+      text-transform: uppercase;
+      margin-bottom: 12px;
+      margin-top: 40px;
+    }
+
+    .link-list {
+      display: grid;
+      grid-template-columns: 1fr;
+      grid-template-rows: 1fr 1fr;
+      row-gap: 10px;
+    }
+
+    @media (min-width: 620px) {
+      .link-list {
+        row-gap: 20px;
+        column-gap: 20px;
+        grid-template-columns: 1fr 1fr;
+      }
+    }
+
+    @media all and (-ms-high-contrast:none) {
+    .link-list {
+        display: -ms-grid;
+        -ms-grid-columns: 1fr 1fr;
+        -ms-grid-rows: 1fr 1fr;
+      }
+    }
+
+    .link-item {
+      display: block;
+      padding: 20px 30px 20px 15px;
+      border: 1px solid #00000010;
+      border-radius: 5px;
+      transition: background 150ms ease-out, border 150ms ease-out, transform 150ms ease-out;
+      color: #333333;
+      display: flex;
+      align-items: flex-start;
+    }
+
+    .link-item:hover {
+      border-color: #1EA7FD50;
+      transform: translate3d(0, -3px, 0);
+      box-shadow: rgba(0, 0, 0, 0.08) 0 3px 10px 0;
+    }
+
+    .link-item:active {
+      border-color: #1EA7FD;
+      transform: translate3d(0, 0, 0);
+    }
+
+    .link-item strong {
+      font-weight: 700;
+      display: block;
+      margin-bottom: 2px;
+    }
+
+    .link-item img {
+      height: 40px;
+      width: 40px;
+      margin-right: 15px;
+      flex: none;
+    }
+
+    .link-item span {
+      font-size: 14px;
+      line-height: 20px;
+    }
+
+    .tip {
+      display: inline-block;
+      border-radius: 1em;
+      font-size: 11px;
+      line-height: 12px;
+      font-weight: 700;
+      background: #E7FDD8;
+      color: #66BF3C;
+      padding: 4px 12px;
+      margin-right: 10px;
+      vertical-align: top;
+    }
+
+    .tip-wrapper {
+      font-size: 13px;
+      line-height: 20px;
+      margin-top: 40px;
+      margin-bottom: 40px;
+    }
+
+    .tip-wrapper code {
+      font-size: 12px;
+      display: inline-block;
+    }
+
+`}
+</style>
+
+[![Agility Yellow Triangle Logo withe gray text reading Agility to the right of the triangle](https://cdn.agilitycms.com/content-manager/images/logos/agility-logo-storybook-350.png)](https://agilitycms.com/)
+# Agility Plenum UI Library 
+
+Welcome to Plenum, the definitive UI library for working within the [Agility CMS](https://www.agilitycms.com/) ecosystem. Built with [Next.js 13](https://nextjs.org/) and [Storybook 7.1](https://storybook.js.org/), Plenum is a comprehensive collection of components and patterns designed for building user interfaces in Agility CMS, as well as your own applications within the Agility CMS ecosystem.
+
+
+## Building for the Agility Marketplace
+
+The Plenum library is designed to encourage and facilitate building applications for the Agility CMS Marketplace. Use the rich selection of components and patterns to build consistent, robust, and user-friendly applications for the Agility ecosystem.
+
+Contributions to extend and improve this library are welcome! Feel free to fork the repository and submit pull requests.
+
+## Features
+
+- Comprehensive UI components library, designed for versatility and consistency.
+- Built with modern technologies like Next.js 13 and Storybook 7.1.
+- Includes automation scripts for efficient component creation.
+- Adopts Tailwind CSS for utility-first styling.
+- Easy to use, install, and integrate into your project.
+  
+## Prerequisites
+
+Before you begin, ensure that Tailwind CSS is installed in your project. Follow the instructions here: [Install Tailwind CSS with Next.js](https://tailwindcss.com/docs/guides/nextjs)
+
+In your app entry point (i.e. \`_app.tsx\`), import the \`globals.css\` file from the previous step, and the \`tailwind.css\` file from Plenum:
+
+```jsx
+import "<RELATIVE_PATH>/globals.css";
+import "@agility/plenum-ui/dist/lib/tailwind.css";
+```
+
+Make sure to add any additional styles before these two import statements to prevent overwriting the Plenum styling.
+
+## Installation
+
+You can install the Plenum library using npm or yarn:
+
+```bash
+# Using npm:
+npm install @agility/plenum-ui
+
+# Using yarn:
+yarn add @agility/plenum-ui
+```
+
+## Usage
+
+Import and use the Plenum components in your React components:
+
+```jsx
+import { Component } from '@agility/plenum-ui';
+
+<Component {...{ComponentProps}} />
+```
+
+## Scripts
+
+### Development and Build Scripts
+
+Run your development server with Storybook:
+
+```bash
+npm run dev
+# or
+yarn dev
+```
+
+Build your project:
+
+```bash
+npm run build
+# or
+yarn build
+```
+
+Clean the \`dist\` directory:
+
+```bash
+npm run clean
+# or
+yarn clean
+```
+
+Lint your project:
+
+```bash
+npm run lint
+# or
+yarn lint
+```
+
+Build Tailwind CSS:
+
+```bash
+npm run build:tw
+# or
+yarn build:tw
+```
+
+### Storybook Scripts
+
+Build your Storybook:
+
+```bash
+npm run build-storybook
+# or
+yarn build-storybook
+```
+
+Run your Storybook in development mode:
+
+```bash
+npm run storybook:dev
+# or
+yarn storybook:dev
+```
+
+Generate Tailwind CSS for Storybook and watch for changes:
+
+```bash
+npm run storybook:tw
+# or
+yarn storybook:tw
+```
+
+Build specific parts of Storybook:
+
+```bash
+# Build Storybook
+npm run sb-build:storybook
+# or
+yarn sb-build:storybook
+
+# Build Tailwind CSS for Storybook
+npm run sb-build:tw
+# or
+yarn sb-build:tw
+```
+
+Compile TypeScript files using custom build script:
+
+```bash
+npm run build:tsc
+# or
+yarn build:tsc
+```
+
+These scripts cover various tasks related to development, build processes, linting, and handling specific aspects like Storybook and Tailwind CSS. Make sure to run the appropriate script for the task you want to perform.
+
+
+### Component Generation Script
+
+We have a Node.js script that automates the creation of new components for our Storybook library. This script generates a component directory, along with the necessary files like \`Component.tsx\`, \`Component.stories.tsx\`, and \`index.tsx\`.
+
+#### How to use the script
+
+To use the script, you should have Node.js installed. From the terminal, you can create a new component by running the following command:
+
+```bash
+node create-component.js ComponentName DestinationDirectory
+```
+
+This command takes two arguments:
+
+- \`ComponentName\` - The name of the new component you want to create. This should be in PascalCase (for example, "MyComponent").
+- \`DestinationDirectory\` - The directory where the new component will be created. This should be relative to the 'stories' directory. (for example, "atoms" or "Molecules").
+
+The script will create a new directory with the given component name inside the specified destination directory (under the 'stories' directory). Then, it will generate three files in the new directory:
+
+- \`ComponentName.tsx\` - This is the component file. It contains a basic React functional component structure.
+- \`ComponentName.stories.tsx\` - This is the Storybook story file. It sets up a basic story for the new component.
+- \`index.tsx\` - This file simply exports the new component. It's used for cleaner imports.
+
+#### Example
+
+To create a new component named "Button" in the "atoms" directory, you would run:
+
+```bash
+node create-component.js Button atoms
+```
+
+This would create a directory structure like:
+
+```
+- stories
+  - atoms
+    - Button
+      - Button.tsx
+      - Button.stories.tsx
+      - index.tsx
+```
+
+Each of the generated files will contain basic boilerplate code that you can start with.
+
+##### Notes
+
+This script does prompt the user before overwriting existing directories, so you can run it with confidence. Always use PascalCase for component names, and ensure the destination directory exists or can be created. If you encounter any issues, you can create the component and its files manually

package/stories/assets/stackalt.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48" version="1.1" viewBox="0 0 48 48"><title>illustration/stackalt</title><g id="illustration/stackalt" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><path id="Combined-Shape" fill="#FFAE00" d="M23.8628277,0 L23.8628277,48 L3.32291648,36.2491883 L3.32155653,11.9499781 L23.8628277,0 Z M23.8670509,0 L44.408322,11.9499781 L44.4069621,36.2491883 L23.8670509,48 L23.8670509,0 Z" opacity=".196"/><path id="Rectangle-46-Copy-3" fill="#66BF3C" d="M15.8232279,19.1155258 L24.7368455,21.4714881 C29.6053842,22.7582937 33.4077423,26.5606518 34.694548,31.4291905 L37.0505103,40.3428082 C37.6150232,42.4786032 36.3412474,44.6676353 34.2054524,45.2321482 C33.5569474,45.4035549 32.87575,45.4091235 32.2245294,45.2483418 L23.3459013,43.0562718 C18.2976962,41.809906 14.3561301,37.8683399 13.1097642,32.8201348 L10.9176943,23.9415066 C10.3881737,21.7967682 11.6975664,19.6288529 13.8423049,19.0993322 C14.4935255,18.9385505 15.1747229,18.9441191 15.8232279,19.1155258 Z" opacity=".5" transform="translate(23.999997, 32.166058) rotate(-45.000000) translate(-23.999997, -32.166058)"/><path id="Rectangle-46-Copy-2" fill="#FFAE00" d="M15.8232279,11.2216893 L24.7368455,13.5776516 C29.6053842,14.8644572 33.4077423,18.6668153 34.694548,23.5353541 L37.0505103,32.4489717 C37.6150232,34.5847667 36.3412474,36.7737988 34.2054524,37.3383117 C33.5569474,37.5097184 32.87575,37.515287 32.2245294,37.3545053 L23.3459013,35.1624353 C18.2976962,33.9160695 14.3561301,29.9745034 13.1097642,24.9262983 L10.9176943,16.0476701 C10.3881737,13.9029317 11.6975664,11.7350164 13.8423049,11.2054957 C14.4935255,11.044714 15.1747229,11.0502826 15.8232279,11.2216893 Z" opacity=".5" transform="translate(23.999997, 24.272222) rotate(-45.000000) translate(-23.999997, -24.272222)"/><path id="Rectangle-46-Copy" fill="#FC521F" d="M15.8232279,3.32785281 L24.7368455,5.68381509 C29.6053842,6.97062075 33.4077423,10.7729788 34.694548,15.6415176 L37.0505103,24.5551352 C37.6150232,26.6909302 36.3412474,28.8799623 34.2054524,29.4444752 C33.5569474,29.6158819 32.87575,29.6214505 32.2245294,29.4606688 L23.3459013,27.2685988 C18.2976962,26.022233 14.3561301,22.0806669 13.1097642,17.0324618 L10.9176943,8.15383364 C10.3881737,6.00909519 11.6975664,3.84117987 13.8423049,3.31165925 C14.4935255,3.15087753 15.1747229,3.15644615 15.8232279,3.32785281 Z" opacity=".5" transform="translate(23.999997, 16.378385) rotate(-45.000000) translate(-23.999997, -16.378385)"/></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48" version="1.1" viewBox="0 0 48 48"><title>illustration/stackalt</title><g id="illustration/stackalt" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><path id="Combined-Shape" fill="#FFAE00" d="M23.8628277,0 L23.8628277,48 L3.32291648,36.2491883 L3.32155653,11.9499781 L23.8628277,0 Z M23.8670509,0 L44.408322,11.9499781 L44.4069621,36.2491883 L23.8670509,48 L23.8670509,0 Z" opacity=".196"/><path id="Rectangle-46-Copy-3" fill="#66BF3C" d="M15.8232279,19.1155258 L24.7368455,21.4714881 C29.6053842,22.7582937 33.4077423,26.5606518 34.694548,31.4291905 L37.0505103,40.3428082 C37.6150232,42.4786032 36.3412474,44.6676353 34.2054524,45.2321482 C33.5569474,45.4035549 32.87575,45.4091235 32.2245294,45.2483418 L23.3459013,43.0562718 C18.2976962,41.809906 14.3561301,37.8683399 13.1097642,32.8201348 L10.9176943,23.9415066 C10.3881737,21.7967682 11.6975664,19.6288529 13.8423049,19.0993322 C14.4935255,18.9385505 15.1747229,18.9441191 15.8232279,19.1155258 Z" opacity=".5" transform="translate(23.999997, 32.166058) rotate(-45.000000) translate(-23.999997, -32.166058)"/><path id="Rectangle-46-Copy-2" fill="#FFAE00" d="M15.8232279,11.2216893 L24.7368455,13.5776516 C29.6053842,14.8644572 33.4077423,18.6668153 34.694548,23.5353541 L37.0505103,32.4489717 C37.6150232,34.5847667 36.3412474,36.7737988 34.2054524,37.3383117 C33.5569474,37.5097184 32.87575,37.515287 32.2245294,37.3545053 L23.3459013,35.1624353 C18.2976962,33.9160695 14.3561301,29.9745034 13.1097642,24.9262983 L10.9176943,16.0476701 C10.3881737,13.9029317 11.6975664,11.7350164 13.8423049,11.2054957 C14.4935255,11.044714 15.1747229,11.0502826 15.8232279,11.2216893 Z" opacity=".5" transform="translate(23.999997, 24.272222) rotate(-45.000000) translate(-23.999997, -24.272222)"/><path id="Rectangle-46-Copy" fill="#FC521F" d="M15.8232279,3.32785281 L24.7368455,5.68381509 C29.6053842,6.97062075 33.4077423,10.7729788 34.694548,15.6415176 L37.0505103,24.5551352 C37.6150232,26.6909302 36.3412474,28.8799623 34.2054524,29.4444752 C33.5569474,29.6158819 32.87575,29.6214505 32.2245294,29.4606688 L23.3459013,27.2685988 C18.2976962,26.022233 14.3561301,22.0806669 13.1097642,17.0324618 L10.9176943,8.15383364 C10.3881737,6.00909519 11.6975664,3.84117987 13.8423049,3.31165925 C14.4935255,3.15087753 15.1747229,3.15644615 15.8232279,3.32785281 Z" opacity=".5" transform="translate(23.999997, 16.378385) rotate(-45.000000) translate(-23.999997, -16.378385)"/></g></svg>