From 1670aa6e2901982defb03c63f66b8b72afe629a3 Mon Sep 17 00:00:00 2001 From: John Melin Date: Mon, 26 May 2025 10:21:45 +0200 Subject: [PATCH 1/2] Add config doc --- stories/Configure.mdx | 374 ++---------------- .../{Typography.mdx => TypographyClasses.mdx} | 48 +-- 2 files changed, 50 insertions(+), 372 deletions(-) rename stories/{Typography.mdx => TypographyClasses.mdx} (82%) diff --git a/stories/Configure.mdx b/stories/Configure.mdx index 7780a36..ab02220 100644 --- a/stories/Configure.mdx +++ b/stories/Configure.mdx @@ -1,364 +1,42 @@ import { Meta } from "@storybook/blocks"; -import Github from "./assets/github.svg"; -import Discord from "./assets/discord.svg"; -import Youtube from "./assets/youtube.svg"; -import Tutorials from "./assets/tutorials.svg"; -import Styling from "./assets/styling.png"; -import Context from "./assets/context.png"; -import Assets from "./assets/assets.png"; -import Docs from "./assets/docs.png"; -import Share from "./assets/share.png"; -import FigmaPlugin from "./assets/figma-plugin.png"; -import Testing from "./assets/testing.png"; -import Accessibility from "./assets/accessibility.png"; -import Theming from "./assets/theming.png"; -import AddonLibrary from "./assets/addon-library.png"; - -export const RightArrow = () => - - - -
-
- # Configure your project - - Because Storybook works separately from your app, you'll need to configure it for your specific stack and setup. Below, explore guides for configuring Storybook with popular frameworks and tools. If you get stuck, learn how you can ask for help from our community. -
-
-
- A wall of logos representing different styling technologies -

Add styling and CSS

-

Like with web applications, there are many ways to include CSS within Storybook. Learn more about setting up styling within Storybook.

- Learn more -
-
- An abstraction representing the composition of data for a component -

Provide context and mocking

-

Often when a story doesn't render, it's because your component is expecting a specific environment or context (like a theme provider) to be available.

- Learn more -
-
- A representation of typography and image assets -
-

Load assets and resources

-

To link static files (like fonts) to your projects and stories, use the - `staticDirs` configuration option to specify folders to load when - starting Storybook.

- Learn more -
-
-
-
-
-
- # Do more with Storybook - - Now that you know the basics, let's explore other parts of Storybook that will improve your experience. This list is just to get you started. You can customise Storybook in many ways to fit your needs. -
- -
-
-
- A screenshot showing the autodocs tag being set, pointing a docs page being generated -

Autodocs

-

Auto-generate living, - interactive reference documentation from your components and stories.

- Learn more -
-
- A browser window showing a Storybook being published to a chromatic.com URL -

Publish to Chromatic

-

Publish your Storybook to review and collaborate with your entire team.

- Learn more -
-
- Windows showing the Storybook plugin in Figma -

Figma Plugin

-

Embed your stories into Figma to cross-reference the design and live - implementation in one place.

- Learn more -
-
- Screenshot of tests passing and failing -

Testing

-

Use stories to test a component in all its variations, no matter how - complex.

- Learn more -
-
- Screenshot of accessibility tests passing and failing -

Accessibility

-

Automatically test your components for a11y issues as you develop.

- Learn more -
-
- Screenshot of Storybook in light and dark mode -

Theming

-

Theme Storybook's UI to personalize it to your project.

- Learn more -
-
-
-
-
-
-

Addons

-

Integrate your tools with Storybook to connect workflows.

- Discover all addons -
-
- Integrate your tools with Storybook to connect workflows. -
-
- -
-
- Github logo - Join our contributors building the future of UI development. - - Star on GitHub -
-
- Discord logo -
- Get support and chat with frontend developers. - - Join Discord server -
-
-
- Youtube logo -
- Watch tutorials, feature previews and interviews. - - Watch on YouTube -
-
-
- A book -

Follow guided walkthroughs on for key workflows.

- - Discover tutorials -
-
- - +Web Component (Angular, Vue etc.) + ... +``` diff --git a/stories/Typography.mdx b/stories/TypographyClasses.mdx similarity index 82% rename from stories/Typography.mdx rename to stories/TypographyClasses.mdx index bc477d7..a4ae731 100644 --- a/stories/Typography.mdx +++ b/stories/TypographyClasses.mdx @@ -1,10 +1,10 @@ import { Meta, Subtitle, Title } from '@storybook/blocks'; - + -Typography +Typography classes - There exists three types of typography, titles, text and clickable text. + There exists three types of typography classes, titles, text and clickable text. ## Titles @@ -22,35 +22,35 @@ import { Meta, Subtitle, Title } from '@storybook/blocks'; - `cx-title-1` + `.cx-title-1` Lorem ipsum 44px / 32px (mobile) 400 160% - `cx-title-2` + `.cx-title-2` Lorem ipsum 36px / 28px (mobile) 600 160% - `cx-title-3` + `.cx-title-3` Lorem ipsum 28px / 24px (mobile) 600 160% - `cx-title-4` + `.cx-title-4` Lorem ipsum 24px / 20px (mobile) 600 160% - `cx-title-5` + `.cx-title-5` Lorem ipsum 18px 600 @@ -74,91 +74,91 @@ import { Meta, Subtitle, Title } from '@storybook/blocks'; - `cx-text-1` + `.cx-text-1` Lorem ipsum dolor sit amet, consectetur adipiscing elit. 24px / 20px (mobile) 400 160% - `cx-text-2` + `.cx-text-2` Lorem ipsum dolor sit amet, consectetur adipiscing elit. 18px 400 160% - `cx-text-2-light` + `.cx-text-2-light` Lorem ipsum dolor sit amet, consectetur adipiscing elit. 18px 300 160% - `cx-text-2-strong` + `.cx-text-2-strong` Lorem ipsum dolor sit amet, consectetur adipiscing elit. 18px 600 160% - `cx-text-3` + `.cx-text-3` Lorem ipsum dolor sit amet, consectetur adipiscing elit. 16px 400 160% - `cx-text-3-light` + `.cx-text-3-light` Lorem ipsum dolor sit amet, consectetur adipiscing elit. 16px 300 160% - `cx-text-3-strong` + `.cx-text-3-strong` Lorem ipsum dolor sit amet, consectetur adipiscing elit. 16px 600 160% - `cx-text-4` + `.cx-text-4` Lorem ipsum dolor sit amet, consectetur adipiscing elit. 14px 400 160% - `cx-text-4-light` + `.cx-text-4-light` Lorem ipsum dolor sit amet, consectetur adipiscing elit. 14px 300 160% - `cx-text-4-strong` + `.cx-text-4-strong` Lorem ipsum dolor sit amet, consectetur adipiscing elit. 14px 600 160% - `cx-text-jumbo` + `.cx-text-jumbo` Lorem ipsum 60px 900 160% - `cx-text-micro` + `.cx-text-micro` Lorem ipsum dolor sit amet, consectetur adipiscing elit. 12px 400 160% - `cx-text-micro-strong` + `.cx-text-micro-strong` Lorem ipsum dolor sit amet, consectetur adipiscing elit. 12px 600 @@ -183,21 +183,21 @@ import { Meta, Subtitle, Title } from '@storybook/blocks'; - `cx-text-clickable-1` + `.cx-text-clickable-1` Lorem ipsum 18px 500 100% - `cx-text-clickable-2` + `.cx-text-clickable-2` Lorem ipsum 16px 500 100% - `cx-text-clickable-3` + `.cx-text-clickable-3` Lorem ipsum 14px 500 From 74e6ecb8a28a0e964e549e80a0eead7d7f598905 Mon Sep 17 00:00:00 2001 From: John Melin Date: Mon, 26 May 2025 10:24:04 +0200 Subject: [PATCH 2/2] Clean --- stories/Configure.mdx | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/stories/Configure.mdx b/stories/Configure.mdx index ab02220..6589d3d 100644 --- a/stories/Configure.mdx +++ b/stories/Configure.mdx @@ -6,7 +6,7 @@ import { Meta } from "@storybook/blocks"; Install the library in your application using your preferred package manager. -``` +``` ts npm install @computas/designsystem ``` @@ -16,14 +16,13 @@ This style sheet adds an opinionated CSS reset to your page, adds all CSS variables to the root of your stylesheet, and provides the code for the CSS-based components. -``` - +``` ts @import "@computas/designsystem/global-styles.css"; ``` ## Import the components that you need for your application. -``` +``` ts React import { CxSelect } from "@computas/designsystem/select/react"; @@ -33,7 +32,7 @@ import "@computas/designsystem/select"; Finally, use your component in your template. -``` +``` ts React ...