-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
docs: migrating from Ladle to StoryBook for API documentation (#748)
<!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit ## Release Notes - **New Features** - Introduced new documentation pages for "Installation", "Configuration", "Overview", "Release Tags", "Usage", and "Changelogs" to enhance user guidance. - Added new components for navigation and code highlighting to improve the usability of documentation. - Integrated Tailwind CSS into the Storybook setup for better styling options. - New Storybook configurations for `Button` and `ButtonIcon` components to facilitate visual testing. - **Bug Fixes** - Adjusted build processes to exclude the `@versini/api` package from various workflows, streamlining operations. - **Chores** - Updated configuration files for TypeScript, Vite, PostCSS, and Tailwind CSS to enhance development experience and integration. - Added `.gitignore` entry for log files generated by Storybook. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
- Loading branch information
Showing
33 changed files
with
1,779 additions
and
15 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -75,3 +75,5 @@ types | |
| !.yarn/releases | ||
| !.yarn/sdks | ||
| !.yarn/versions | ||
|
|
||
| *storybook.log | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,34 @@ | ||
| /** @type { import('@storybook/react-vite').StorybookConfig } */ | ||
|
|
||
| const config = { | ||
| stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"], | ||
| addons: [ | ||
| { | ||
| name: "@storybook/addon-essentials", | ||
| }, | ||
| "@storybook/addon-links", | ||
| ], | ||
| framework: { | ||
| name: "@storybook/react-vite", | ||
| options: {}, | ||
| }, | ||
| docs: { | ||
| // autodocs: true, | ||
| }, | ||
| typescript: { | ||
| reactDocgen: "react-docgen-typescript", | ||
| reactDocgenTypescriptOptions: { | ||
| tsconfigPath: "./tsconfig.json", | ||
| propFilter: (prop) => { | ||
| const res = | ||
| /@versini/.test(prop.parent?.fileName) || | ||
| !/node_modules/.test(prop.parent?.fileName); | ||
| return prop.parent ? res : true; | ||
| }, | ||
| shouldExtractLiteralValuesFromEnum: true, | ||
| savePropValueAsString: true, | ||
| shouldRemoveUndefinedFromOptional: true, | ||
| }, | ||
| }, | ||
| }; | ||
| export default config; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,31 @@ | ||
| /** @type { import('@storybook/react').Preview } */ | ||
| import "./styles.css"; | ||
| import "@versini/ui-button/dist/style.css"; | ||
| import "@versini/ui-pill/dist/style.css"; | ||
|
|
||
| const preview = { | ||
| parameters: { | ||
| options: { | ||
| storySort: { | ||
| order: [ | ||
| "Overview", | ||
| "Installation", | ||
| "Configuration", | ||
| "Usage", | ||
| "Release Tags", | ||
| "Components", | ||
| ], | ||
| }, | ||
| }, | ||
| controls: { | ||
| // show description and default values in the individual stories (basic, etc.) | ||
| expanded: true, | ||
| matchers: { | ||
| color: /(background|color)$/i, | ||
| date: /Date$/i, | ||
| }, | ||
| }, | ||
| }, | ||
| }; | ||
|
|
||
| export default preview; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| @tailwind base; | ||
| @tailwind components; | ||
| @tailwind utilities; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,33 @@ | ||
| { | ||
| "watch": [ | ||
| "tailwind.config.js", | ||
| ".storybook/*.*", | ||
|
|
||
| "../ui-styles/src/**/*.*", | ||
| "../ui-fingerprint/src/**/*.*", | ||
| "../ui-icons/src/**/*.*", | ||
| "../ui-system/src/**/*.*", | ||
|
|
||
| "../ui-anchor/src/**/*.*", | ||
| "../ui-bubble/src/**/*.*", | ||
| "../ui-button/src/**/*.*", | ||
| "../ui-card/src/**/*.*", | ||
| "../ui-footer/src/**/*.*", | ||
| "../ui-header/src/**/*.*", | ||
| "../ui-hooks/src/**/*.*", | ||
| "../ui-icons/src/**/*.*", | ||
| "../ui-main/src/**/*.*", | ||
| "../ui-menu/src/**/*.*", | ||
| "../ui-panel/src/**/*.*", | ||
| "../ui-pill/src/**/*.*", | ||
| "../ui-private/src/**/*.*", | ||
| "../ui-spinner/src/**/*.*", | ||
| "../ui-system/src/**/*.*", | ||
| "../ui-table/src/**/*.*", | ||
| "../ui-textarea/src/**/*.*", | ||
| "../ui-textinput/src/**/*.*", | ||
| "../ui-toggle/src/**/*.*", | ||
| "../ui-togglegroup/src/**/*.*", | ||
| "../ui-truncate/src/**/*.*" | ||
| ] | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,43 @@ | ||
| { | ||
| "name": "@versini/api", | ||
| "version": "0.0.0", | ||
| "license": "MIT", | ||
| "author": "Arno Versini", | ||
| "private": true, | ||
| "scripts": { | ||
| "clean": "rimraf dist", | ||
| "dev": "nodemon", | ||
| "build": "tsc && storybook build --disable-telemetry --output-dir dist", | ||
| "lint": "biome lint src", | ||
| "start": "storybook dev -p 6006 --no-open --disable-telemetry" | ||
| }, | ||
| "dependencies": { | ||
| "@versini/ui-anchor": "workspace:../../packages/ui-anchor", | ||
| "@versini/ui-button": "workspace:../../packages/ui-button", | ||
| "@versini/ui-card": "workspace:../../packages/ui-card", | ||
| "@versini/ui-footer": "workspace:../../packages/ui-footer", | ||
| "@versini/ui-form": "workspace:../../packages/ui-form", | ||
| "@versini/ui-header": "workspace:../../packages/ui-header", | ||
| "@versini/ui-icons": "workspace:../../packages/ui-icons", | ||
| "@versini/ui-main": "workspace:../../packages/ui-main", | ||
| "@versini/ui-menu": "workspace:../../packages/ui-menu", | ||
| "@versini/ui-pill": "workspace:../../packages/ui-pill", | ||
| "@versini/ui-panel": "workspace:../../packages/ui-panel", | ||
| "@versini/ui-styles": "workspace:../../packages/ui-styles", | ||
| "@versini/ui-system": "workspace:../../packages/ui-system", | ||
| "@versini/ui-table": "workspace:../../packages/ui-table", | ||
| "@versini/ui-textinput": "workspace:../../packages/ui-textinput", | ||
| "react": "18.3.1", | ||
| "react-dom": "18.3.1" | ||
| }, | ||
| "devDependencies": { | ||
| "@storybook/addon-essentials": "8.4.7", | ||
| "@storybook/blocks": "8.4.7", | ||
| "@storybook/addon-links": "8.4.7", | ||
| "@storybook/react": "8.4.7", | ||
| "@storybook/react-vite": "8.4.7", | ||
| "@storybook/test": "8.4.7", | ||
| "prop-types": "15.8.1", | ||
| "storybook": "8.4.7" | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| export default { | ||
| plugins: { | ||
| tailwindcss: {}, | ||
| autoprefixer: {}, | ||
| }, | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,59 @@ | ||
| import { Meta, Markdown, Unstyled } from "@storybook/blocks"; | ||
| import { Card } from "@versini/ui-card"; | ||
|
|
||
| import Navigators from "./helpers/Navigators"; | ||
| import ComponentsChangelog from "../../../ui-components/CHANGELOG.md?raw"; | ||
| import StylesChangelog from "../../../ui-styles/CHANGELOG.md?raw"; | ||
| import FormComponentsChangelog from "../../../ui-form/CHANGELOG.md?raw"; | ||
| import IconsChangelog from "../../../ui-icons/CHANGELOG.md?raw"; | ||
| import SystemChangelog from "../../../ui-system/CHANGELOG.md?raw"; | ||
|
|
||
| <Meta title="Changelogs" /> | ||
|
|
||
| <div className="prose"> | ||
| <h1>Changelogs</h1> | ||
|
|
||
| <Unstyled> | ||
| <div className="mt-4" /> | ||
| </Unstyled> | ||
|
|
||
| <details> | ||
| <summary>Components</summary> | ||
| <Card mode="light"> | ||
| <Markdown>{ComponentsChangelog}</Markdown> | ||
| </Card> | ||
| </details> | ||
|
|
||
| <details> | ||
| <summary>Styles</summary> | ||
| <Card mode="light"> | ||
| <Markdown>{StylesChangelog}</Markdown> | ||
| </Card> | ||
| </details> | ||
|
|
||
| <details> | ||
| <summary>Form Components</summary> | ||
| <Card mode="light"> | ||
| <Markdown>{FormComponentsChangelog}</Markdown> | ||
| </Card> | ||
| </details> | ||
|
|
||
| <details> | ||
| <summary>Icons</summary> | ||
| <Card mode="light"> | ||
| <Markdown>{IconsChangelog}</Markdown> | ||
| </Card> | ||
| </details> | ||
|
|
||
| <details> | ||
| <summary>System</summary> | ||
| <Card mode="light"> | ||
| <Markdown>{SystemChangelog}</Markdown> | ||
| </Card> | ||
| </details> | ||
|
|
||
| <Unstyled> | ||
| <div className="mt-4" /> | ||
| </Unstyled> | ||
| <Navigators leftLink="Release Tags" /> | ||
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,40 @@ | ||
| import { Meta } from "@storybook/blocks"; | ||
|
|
||
| import Navigators from "./helpers/Navigators"; | ||
| import Highlight from "./helpers/Highlight"; | ||
| import codeBlocks from "./helpers/codeBlocks"; | ||
|
|
||
| <Meta title="Configuration" /> | ||
|
|
||
| <div className="prose"> | ||
| <h1>Configuration</h1> | ||
| <h2>JavaScript</h2> | ||
| <ul> | ||
| <li> | ||
| <p>UI Components come un-bundled, which means you need to use a bundler | ||
| such as Webpack, Vite or Rollup to bundle components into your | ||
| application. </p> | ||
| </li> | ||
| <li> | ||
| <p>UI Components are tree-shakeable, side-effect free and each component style is self-contained.</p> | ||
| </li> | ||
| <li> | ||
| <p>Please refer to each component API documentation (under the Components or Form components menu) to see how they should be imported, what their individual props are as well as many different examples. </p> | ||
| </li> | ||
| </ul> | ||
|
|
||
| <h2>CSS</h2> | ||
|
|
||
| <p>TailwindCSS is required to style the components within the{" "} | ||
| <strong>UI-Components</strong> library. Thanks to our TailwindCSS plugin, | ||
| you can take advantage of tree-shaking unused styles:</p> | ||
| <div> | ||
| <Highlight | ||
| codeBlock={codeBlocks.config.code} | ||
| language={codeBlocks.config.language} | ||
| /> | ||
| </div> | ||
|
|
||
| <Navigators leftLink="Installation" rightLink="Usage" /> | ||
|
|
||
| </div> |
Oops, something went wrong.