Move Current Components to Experimental Section in Storybook

[sreidthomas]

Move Current Components to Experimental Section in Storybook

This PR introduces an Experimental section in Storybook and moves all current components and form components under this section. Additionally, it updates build configurations and scripts to reflect these changes.

---

Key Updates

1. Create Experimental Section in Storybook

• Updated the title property in each story file for the components and form components to include Experimental/ as a prefix.
  • For example:
    • Changed "Components/Button" to "Experimental/Components/Button".
    • Changed "Forms/Input" to "Experimental/Forms/Input".
• Outcome: Components now appear under the "Experimental" section in the Storybook sidebar.

2. Update Documentation

• Updated the documentation under the COD UXDS section to include the following details:

  Experimental Components
  These components are unstable and should only be used for testing purposes. They:

  • May undergo significant changes.
  • Are not suitable for production environments.
  • Should be used at the user's own risk.

3. Rename Component Index

• Renamed the main component index file:
  • From: src/index.js
  • To: src/index-experimental.js.
• Updated the Webpack configuration:
  • Changed the entry point:
    • From: ./src/index.js
    • To: ./src/index-experimental.js.
  • Updated the build output directory:
    • From: build/
    • To: build/experimental/.
• Verified functionality by running npm run build and yarn storybook.

4. Rename Build Script

• Updated the package.json file:
  • Renamed the build script:
    • From: "build": "webpack --mode production"
    • To: "build:experimental": "webpack --mode production".
• Verified the build process by running yarn build:experimental.

---

Testing

1. Ran yarn storybook to ensure the updated structure appears correctly in the Storybook sidebar.
2. Built the experimental components package with yarn build:experimental to confirm the build output in the correct directory.

---

Notes

• Folder Structure: No changes were made to the folder structure of components. The section titles in Storybook were updated by modifying the title field in the respective story files.

[sreidthomas]

Design System is working and updated:

[maxatdetroit]

Would you also move the component implementations into a separate experimental directory as well to organize the code in the repo?

Please use the git mv command where possible to make the PR easier to review.

The final directory structure should look like:

src
├── experimental
    ├── components
    ├── index-experimental.js
    └── stories
├── stable
    ├── components
    ├── index-stable.js
    └── stories
├── scss
└── shared

[maxatdetroit]

@sreidthomas you can also pull the latest dev branch (with #275 included) and merge it into this branch to fix the CI errors.

[sreidthomas]

Would you also move the component implementations into a separate experimental directory as well to organize the code in the repo?

Please use the git mv command where possible to make the PR easier to review.

The final directory structure should look like:

src
├── experimental
    ├── components
    ├── index-experimental.js
    └── stories
├── stable
    ├── components
    ├── index-stable.js
    └── stories
├── scss
└── shared

@maxatdetroit

[maxatdetroit]

@sreidthomas the new directory structure is causing some issues finding files during JS imports. You'll have to fix that to fix the new CI failures.

[maxatdetroit]

Moving the component implementation files is causing import errors that need to be fixed.

[maxatdetroit]

Looks good, nice work!