Skip to content

Commit 000505a

Browse files
kasperpeulenkasperpeulen
committed
Merge remote-tracking branch 'origin/kapser/test-package2' into kapser/test-package2
2 parents d888f60 + 19f2409 commit 000505a

25 files changed

+507
-125
lines changed

‎docs/builders/builder-api.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ To opt into a builder, the user must add it as a dependency and then edit their
3636

3737
## Builder API
3838

39-
In Storybook, every builder must implement the following [API](https://github.com/storybookjs/storybook/blob/next/code/lib/core-common/src/types.ts#L170-L189), exposing the following configuration options and entry points:
39+
In Storybook, every builder must implement the following [API](https://github.com/storybookjs/storybook/blob/next/code/lib/types/src/modules/core-common.ts#L183-L203), exposing the following configuration options and entry points:
4040

4141
<!-- prettier-ignore-start -->
4242

‎docs/essentials/toolbars-and-globals.md‎

Lines changed: 63 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ When the globals change, the story re-renders, and the decorators rerun with the
1616

1717
## Global types and the toolbar annotation
1818

19-
Storybook has a simple, declarative syntax for configuring toolbar menus. In your [`.storybook/preview.js`](../configure/overview.md#configure-story-rendering), you can add your own toolbars by creating `globalTypes` with a `toolbar` annotation:
19+
Storybook has a simple, declarative syntax for configuring toolbar menus. In your [`.storybook/preview.js|ts`](../configure/overview.md#configure-story-rendering), you can add your own toolbars by creating `globalTypes` with a `toolbar` annotation:
2020

2121
<!-- prettier-ignore-start -->
2222

@@ -31,7 +31,7 @@ Storybook has a simple, declarative syntax for configuring toolbar menus. In you
3131

3232
<div class="aside">
3333

34-
💡 As globals are _global_ you can _only_ set `globalTypes` in [`.storybook/preview.js`](../configure/overview.md#configure-story-rendering).
34+
💡 As globals are _global_ you can _only_ set `globalTypes` in [`.storybook/preview.js|ts`](../configure/overview.md#configure-story-rendering).
3535

3636
</div>
3737

@@ -41,7 +41,59 @@ When you start your Storybook, you should see a new dropdown with the `light` an
4141

4242
We have a `global` implemented. Let's wire it up! We can consume our new `theme` global in a decorator using the `context.globals.theme` value.
4343

44-
For example, suppose you are using `styled-components`. You can add a theme provider decorator to your [`.storybook/preview.js`](../configure/overview.md#configure-story-rendering) config:
44+
<IfRenderer renderer='react'>
45+
46+
For example, suppose you are using [`styled-components`](https://styled-components.com/). You can add a theme provider decorator to your [`.storybook/preview.js|ts`](../configure/overview.md#configure-story-rendering) config:
47+
48+
<!-- prettier-ignore-start -->
49+
50+
<CodeSnippets
51+
paths={[
52+
'react/storybook-preview-use-global-type.js.mdx',
53+
'react/storybook-preview-use-global-type.ts.mdx',
54+
]}
55+
/>
56+
57+
<!-- prettier-ignore-end -->
58+
59+
</IfRenderer>
60+
61+
<IfRenderer renderer='vue'>
62+
63+
For example, suppose you are using [`Vuetify`](https://vuetifyjs.com/en/). You can add a theme provider decorator to your [`.storybook/preview.js|ts`](../configure/overview.md#configure-story-rendering) config:
64+
65+
<!-- prettier-ignore-start -->
66+
67+
<CodeSnippets
68+
paths={[
69+
'vue/storybook-preview-use-global-type.3.js.mdx',
70+
'vue/storybook-preview-use-global-type.3.ts.mdx',
71+
]}
72+
/>
73+
74+
<!-- prettier-ignore-end -->
75+
76+
</IfRenderer>
77+
78+
<IfRenderer renderer='angular'>
79+
80+
For example, suppose you are using [`Angular Material`](https://material.angular.io/). You can add a theme provider decorator to your [`.storybook/preview.js|ts`](../configure/overview.md#configure-story-rendering) config:
81+
82+
<!-- prettier-ignore-start -->
83+
84+
<CodeSnippets
85+
paths={[
86+
'angular/storybook-preview-use-global-type.ts.mdx',
87+
]}
88+
/>
89+
90+
<!-- prettier-ignore-end -->
91+
92+
</IfRenderer>
93+
94+
<IfRenderer renderer={['ember', 'html', 'preact', 'qwik', 'svelte', 'solid', 'web-components' ]}>
95+
96+
Depending on your framework and theming library, you can extend your [`.storybook/preview.js|ts`](../configure/overview.md#configure-story-rendering) and provide a decorator to load the theme. For example:
4597

4698
<!-- prettier-ignore-start -->
4799

@@ -54,13 +106,15 @@ For example, suppose you are using `styled-components`. You can add a theme prov
54106

55107
<!-- prettier-ignore-end -->
56108

109+
</IfRenderer>
110+
57111
## Advanced usage
58112

59113
So far, we've managed to create and consume a global inside Storybook.
60114

61115
Now let's take a look at a more complex example. Let's suppose we wanted to implement a new global called **locale** for internationalization, which shows a flag on the right side of the toolbar.
62116

63-
In your [`.storybook/preview.js`](../configure/overview.md#configure-story-rendering), add the following:
117+
In your [`.storybook/preview.js|ts`](../configure/overview.md#configure-story-rendering), add the following:
64118

65119
<!-- prettier-ignore-start -->
66120

@@ -75,12 +129,15 @@ In your [`.storybook/preview.js`](../configure/overview.md#configure-story-rende
75129

76130
<div class="aside">
77131

78-
💡 The <code>icon</code> element used in the examples loads the icons from the <code>@storybook/components</code> package. See [here](../faq.md#what-icons-are-available-for-my-toolbar-or-my-addon) for the list of available icons that you can use.
132+
💡 The `icon` element used in the examples loads the icons from the `@storybook/components` package. See [here](../faq.md#what-icons-are-available-for-my-toolbar-or-my-addon) for the list of available icons that you can use.
79133

80134
</div>
81135

82136
<div class="aside">
83-
💡The <code>@storybook/addon-toolbars</code> addon is required to use toolbars. The toolbars addon is included by default in <code>@storybook/addon-essentials</code>.
137+
138+
💡 The `@storybook/addon-toolbars` addon is required to use toolbars. The toolbars addon is included by default in
139+
`@storybook/addon-essentials`.
140+
84141
</div>
85142

86143
By adding the configuration element `right`, the text will be displayed on the right side in the toolbar menu once you connect it to a decorator.

‎docs/snippets/angular/storybook-preview-global-decorator.ts.mdx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
11
```ts
22
// .storybook/preview.ts
33

4-
import { componentWrapperDecorator } from '@storybook/angular';
54
import type { Preview } from '@storybook/angular';
5+
import { componentWrapperDecorator } from '@storybook/angular';
66

77
const preview: Preview = {
88
decorators: [componentWrapperDecorator((story) => `<div style="margin: 3em">${story}</div>`)],
99
};
10+
1011
export default preview;
1112
```

‎docs/snippets/angular/storybook-preview-use-global-type.ts.mdx‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
```ts
2+
// .storybook/preview.js
3+
4+
import type { Preview } from '@storybook/angular';
5+
import { componentWrapperDecorator } from '@storybook/angular';
6+
7+
const preview: Preview = {
8+
decorators: [
9+
componentWrapperDecorator(
10+
(story) => `<div [class]="myTheme">${story}</div>`,
11+
({ globals }) => {
12+
return { myTheme: globals['theme'] };
13+
}
14+
),
15+
],
16+
};
17+
18+
export default preview;
19+
```

‎docs/snippets/common/storybook-auto-docs-standalone-page.mdx.mdx‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
```mdx
2+
{/* src/GettingStarted.mdx */}
3+
4+
# Getting Started
5+
6+
Welcome! Whether you're a designer or a developer, this guide will help you get started and connect you to the essential resources you need.
7+
8+
## Table of Contents
9+
10+
- [Design Resources](#design-resources)
11+
- [Figma](#figma)
12+
- [UI/UX Design Guidelines](#uiux-design-guidelines)
13+
- [Design Assets](#design-assets)
14+
15+
- [Development Resources](#development-resources)
16+
- [Coding Standards](#coding-standards)
17+
- [Version Control](#version-control)
18+
- [Development Tools](#development-tools)
19+
20+
---
21+
22+
## Design Resources
23+
24+
### Figma
25+
26+
[Figma](https://www.figma.com/) is a collaborative design and prototyping tool. It's the heart of the design process, allowing designers to work together seamlessly.
27+
28+
- **Get Access**: If you're not already part of the Figma project, request access from the project lead or manager.
29+
30+
### UI/UX Design Guidelines
31+
32+
Before you dive into designing, familiarize yourself with our UI/UX design guidelines. They provide valuable insights into our design philosophy and standards.
33+
34+
- [UI/UX Guidelines Document](https://your-design-guidelines-link.com)
35+
36+
### Design Assets
37+
38+
All the essential design assets like logos, icons, and brand guidelines can be found in the Figma project. Ensure you have access and familiarize yourself with these assets for consistency.
39+
40+
---
41+
42+
## Development Resources
43+
44+
### Coding Standards
45+
46+
Maintaining a consistent code style is essential for collaborative development. Our coding standards document will guide you on best practices.
47+
48+
- [Coding Standards Document](https://your-coding-standards-link.com)
49+
50+
### Version Control
51+
52+
We use Git for version control. Make sure you have Git installed and are familiar with its basics.
53+
54+
### Development Tools
55+
56+
Your development environment is critical. Here are some tools and resources to help you set up your workspace:
57+
58+
- **Code Editor**: We recommend using [Visual Studio Code](https://code.visualstudio.com/) for development. It's highly customizable and supports a wide range of extensions.
59+
60+
- **Package Manager**: [npm](https://www.npmjs.com/) is the package manager we use for JavaScript projects. Install it to manage project dependencies.
61+
62+
---
63+
```

‎docs/snippets/common/storybook-custom-docs-markdown.mdx.mdx‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
```mdx
2+
{/* Changelog.mdx */}
3+
4+
import { Meta, Markdown } from "@storybook/blocks";
5+
6+
import Readme from "../../Changelog.md?raw";
7+
8+
<Meta title="Changelog" />
9+
10+
# Changelog
11+
12+
<Markdown>{Readme}</Markdown>
13+
```

‎docs/snippets/common/storybook-main-enable-transcludemarkdown.js.mdx‎

Lines changed: 0 additions & 21 deletions
This file was deleted.

‎docs/snippets/common/storybook-preview-configure-globaltypes.js.mdx‎

Lines changed: 16 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,23 @@
11
```js
22
// .storybook/preview.js
33

4-
export const globalTypes = {
5-
theme: {
6-
description: 'Global theme for components',
7-
defaultValue: 'light',
8-
toolbar: {
9-
// The label to show for this toolbar item
10-
title: 'Theme',
11-
icon: 'circlehollow',
12-
// Array of plain string values or MenuItem shape (see below)
13-
items: ['light', 'dark'],
14-
// Change title based on selected value
15-
dynamicTitle: true,
4+
const preview = {
5+
globalTypes: {
6+
theme: {
7+
description: 'Global theme for components',
8+
defaultValue: 'light',
9+
toolbar: {
10+
// The label to show for this toolbar item
11+
title: 'Theme',
12+
icon: 'circlehollow',
13+
// Array of plain string values or MenuItem shape (see below)
14+
items: ['light', 'dark'],
15+
// Change title based on selected value
16+
dynamicTitle: true,
17+
},
1618
},
1719
},
1820
};
21+
22+
export default preview;
1923
```

‎docs/snippets/common/storybook-preview-configure-globaltypes.ts-4-9.mdx‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
```ts
2+
// .storybook/preview.ts
3+
4+
// Replace your-framework with the framework you are using (e.g., react, vue3)
5+
import { Preview } from '@storybook/your-framework';
6+
7+
const preview: Preview = {
8+
globalTypes: {
9+
theme: {
10+
description: 'Global theme for components',
11+
defaultValue: 'light',
12+
toolbar: {
13+
// The label to show for this toolbar item
14+
title: 'Theme',
15+
icon: 'circlehollow',
16+
// Array of plain string values or MenuItem shape (see below)
17+
items: ['light', 'dark'],
18+
// Change title based on selected value
19+
dynamicTitle: true,
20+
},
21+
},
22+
},
23+
};
24+
25+
export default preview;
26+
```

‎docs/snippets/common/storybook-preview-locales-globaltype.js.mdx‎

Lines changed: 17 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,24 @@
11
```js
22
// .storybook/preview.js
33

4-
export const globalTypes = {
5-
locale: {
6-
description: 'Internationalization locale',
7-
defaultValue: 'en',
8-
toolbar: {
9-
icon: 'globe',
10-
items: [
11-
{ value: 'en', right: '🇺🇸', title: 'English' },
12-
{ value: 'fr', right: '🇫🇷', title: 'Français' },
13-
{ value: 'es', right: '🇪🇸', title: 'Español' },
14-
{ value: 'zh', right: '🇨🇳', title: '中文' },
15-
{ value: 'kr', right: '🇰🇷', title: '한국어' },
16-
],
4+
const preview = {
5+
globalTypes: {
6+
locale: {
7+
description: 'Internationalization locale',
8+
defaultValue: 'en',
9+
toolbar: {
10+
icon: 'globe',
11+
items: [
12+
{ value: 'en', right: '🇺🇸', title: 'English' },
13+
{ value: 'fr', right: '🇫🇷', title: 'Français' },
14+
{ value: 'es', right: '🇪🇸', title: 'Español' },
15+
{ value: 'zh', right: '🇨🇳', title: '中文' },
16+
{ value: 'kr', right: '🇰🇷', title: '한국어' },
17+
],
18+
},
1719
},
1820
},
1921
};
22+
23+
export default preview;
2024
```

0 commit comments

Comments
 (0)