diff --git a/.circleci/config.yml b/.circleci/config.yml index 617cdac42c28..9b03dd3739bc 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -17,7 +17,7 @@ executors: default: 'small' working_directory: /tmp/storybook docker: - - image: cimg/node:16.20.0 + - image: cimg/node:18.18.0 environment: NODE_OPTIONS: --max_old_space_size=6144 resource_class: <> @@ -30,7 +30,7 @@ executors: default: 'small' working_directory: /tmp/storybook docker: - - image: cimg/node:16.20.0-browsers + - image: cimg/node:18.18.0-browsers environment: NODE_OPTIONS: --max_old_space_size=6144 resource_class: <> diff --git a/.github/workflows/generate-sandboxes-main.yml b/.github/workflows/generate-sandboxes-main.yml index 474542495848..a99b2288cf0c 100644 --- a/.github/workflows/generate-sandboxes-main.yml +++ b/.github/workflows/generate-sandboxes-main.yml @@ -21,7 +21,7 @@ jobs: steps: - uses: actions/setup-node@v3 with: - node-version: 16 + node-version-file: '.nvmrc' - uses: actions/checkout@v3 with: ref: main diff --git a/.github/workflows/generate-sandboxes-next.yml b/.github/workflows/generate-sandboxes-next.yml index c20f5491ef30..91515e0862e9 100644 --- a/.github/workflows/generate-sandboxes-next.yml +++ b/.github/workflows/generate-sandboxes-next.yml @@ -21,7 +21,7 @@ jobs: steps: - uses: actions/setup-node@v3 with: - node-version: 16 + node-version-file: '.nvmrc' - uses: actions/checkout@v3 with: ref: next diff --git a/.github/workflows/tests-unit.yml b/.github/workflows/tests-unit.yml index 6c355ec1714b..650d40d3ff10 100644 --- a/.github/workflows/tests-unit.yml +++ b/.github/workflows/tests-unit.yml @@ -9,19 +9,18 @@ on: jobs: build: - name: Core Unit Tests node-${{ matrix.node_version }}, ${{ matrix.os }} + name: Core Unit Tests, ${{ matrix.os }} strategy: fail-fast: false matrix: os: [windows-latest] - node_version: [16] runs-on: ${{ matrix.os }} steps: - uses: actions/checkout@v3 - - name: Set node version to ${{ matrix.node_version }} + - name: Set node version uses: actions/setup-node@v3 with: - node-version: ${{ matrix.node_version }} + node-version-file: '.nvmrc' - name: install and compile run: yarn task --task compile --start-from=auto --no-link - name: test diff --git a/.nvmrc b/.nvmrc index 59ea99ee63cb..4a58985bb483 100644 --- a/.nvmrc +++ b/.nvmrc @@ -1 +1 @@ -16.20 +18.18 diff --git a/CHANGELOG.prerelease.md b/CHANGELOG.prerelease.md index b883c7eaa546..9920bf4c4810 100644 --- a/CHANGELOG.prerelease.md +++ b/CHANGELOG.prerelease.md @@ -1,3 +1,11 @@ +## 7.5.0-alpha.6 + +- Angular: Introduce argsToTemplate for property and event Bindings - [#24434](https://github.com/storybookjs/storybook/pull/24434), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)! +- Controls: Fix select / multiselect when value contains multiple spaces - [#22334](https://github.com/storybookjs/storybook/pull/22334), thanks [@oxcened](https://github.com/oxcened)! +- Next.js: Support rename font import - [#24406](https://github.com/storybookjs/storybook/pull/24406), thanks [@yoshi2no](https://github.com/yoshi2no)! +- UI: Update ScrollArea with radix - [#24413](https://github.com/storybookjs/storybook/pull/24413), thanks [@cdedreuille](https://github.com/cdedreuille)! +- Web-components: Add Lit3 support - [#24437](https://github.com/storybookjs/storybook/pull/24437), thanks [@shilman](https://github.com/shilman)! + ## 7.5.0-alpha.5 - Angular: Add CLI options (debugWebpack, webpackStatsJson, and more) - [#24388](https://github.com/storybookjs/storybook/pull/24388), thanks [@yannbf](https://github.com/yannbf)! diff --git a/CONTRIBUTING/RELEASING.md b/CONTRIBUTING/RELEASING.md index 7cf29a463c62..d1c4eecdb849 100644 --- a/CONTRIBUTING/RELEASING.md +++ b/CONTRIBUTING/RELEASING.md @@ -124,11 +124,11 @@ A few key points to note in this flow: Patch releases are created by [cherry-picking](https://www.atlassian.com/git/tutorials/cherry-pick) any merged, unreleased pull requests that have the "**patch:yes**" label applied to the `next` branch. The merge commit of said pull requests are cherry-picked. -Sometimes it is desired to pick pull requests back to `main` even if they are not considered "releasable". Unlike non-patch-release preparation, patch releases will not be canceled if the content is not releasable. It might not make sense to create a new patch release if the changes are only for documentation and/or internal build systems. However, getting the changes back to `main` is the only way to deploy the documentation to the production docs site. You may also want to cherry-pick changes to internal CI to fix issues. These are valid scenarios where you want to cherry-pick the changes without being blocked on "releasable" content. In these cases, where all cherry picks are non-releasable, the preparation workflow creates a "merging" pull request instead of a "releasing" pull request. This pull request does not bump versions or update changelogs; it just cherry-picks the changes and allows you to merge them into `latest-release` -> `main`. +Sometimes it is desired to pick pull requests back to `main` even if they are not considered "releasable". Unlike non-patch release preparation, patch releases will not be canceled if the content is not releasable. It might not make sense to create a new patch release if the changes are only for documentation and/or internal build systems. However, getting the changes back to `main` is the only way to deploy the documentation to the production docs site. You may also want to cherry-pick changes to internal CI to fix issues. These are valid scenarios where you want to cherry-pick the changes without being blocked on "releasable" content. In these cases, where all cherry picks are non-releasable, the preparation workflow creates a "merging" pull request instead of a "releasing" pull request. This pull request does not bump versions or update changelogs; it just cherry-picks the changes and allows you to merge them into `latest-release` -> `main`. The preparation workflow sequentially cherry-picks each patch pull request to its branch. If this cherry-picking fails due to conflicts or other reasons, it is ignored and the next pull request is processed. All failing cherry-picks are listed in the release pull request's description, for the Releaser to manually cherry-pick during the release process. This problem occurs more often when `main` and `next` diverge, i.e. the longer it has been since a stable major/minor release. -Similar to the non-patch-release flow, the preparation workflow for patches will create a new branch from `main` called `version-patch-from-`, and open a pull request that targets `latest-release`. When the pull request is merged by the Releaser, the [publish workflow](#publishing) will eventually merge `latest-release` into `main`. +Similar to the non-patch release flow, the preparation workflow for patches will create a new branch from `main` called `version-patch-from-`, and open a pull request that targets `latest-release`. When the pull request is merged by the Releaser, the [publish workflow](#publishing) will eventually merge `latest-release` into `main`. Here is an example of a workflow where a feature and two bug fixes have been merged to `next`. Only the bug fixes have the "**patch:yes**" label, so only those two go into the new `7.0.19` release. Note that it is the merge commits to `next` that are cherry-picked, not the commits on the bugfix branches. @@ -173,7 +173,7 @@ gitGraph > **Note** > Workflow: [`prepare-non-patch-release.yml`](../.github/workflows/prepare-non-patch-release.yml) -Non-patch-releases are prepared with all content from the `next` branch. The changelog is generated by examining the git history, and looking up all the commits and pull requests between the current prerelease (on `next-release`) and `HEAD` of `next`. +Non-patch releases are prepared with all content from the `next` branch. The changelog is generated by examining the git history, and looking up all the commits and pull requests between the current prerelease (on `next-release`) and `HEAD` of `next`. The default versioning strategy is to increase the current prerelease number, as described in [Prereleases - `7.1.0-alpha.12` -> `7.1.0-alpha.13`](#prereleases---710-alpha12---710-alpha13). If there is no prerelease number (i.e., we just released a new stable minor/major version), it will add one to a patch bump, so it would go from `7.2.0` to `7.2.1-0` by default. @@ -215,7 +215,7 @@ gitGraph > **Note** > Workflow: [`publish.yml`](../.github/workflows/publish.yml) -When either a non-patch-release or a patch release branch is merged into `latest-release` or `next-release`, the publishing workflow is triggered. This workflow performs the following tasks: +When either a non-patch release or a patch release branch is merged into `latest-release` or `next-release`, the publishing workflow is triggered. This workflow performs the following tasks: 1. Bump versions of all packages according to the plan from the prepared PRs 2. Install dependencies and build all packages. @@ -306,7 +306,7 @@ The workflows can be triggered here: Crucially for prereleases, this is also where you change the versioning strategy if you need something else than the default as described in [Preparing - Non-patch Releases](#non-patch-releases). When triggering the non-patch workflow manually, you can optionally add inputs: -![Screenshot of triggering the non-patch-release workflow in GitHub Actions, with a form that shows a release type selector and a prerelease identifier text field](prerelease-workflow-inputs.png) +![Screenshot of triggering the non-patch release workflow in GitHub Actions, with a form that shows a release type selector and a prerelease identifier text field](prerelease-workflow-inputs.png) See [Versioning Scenarios](#versioning-scenarios) for a description of each version bump scenario, how to activate it and what it does, and [Which combination of inputs creates the version bump I need?](#which-combination-of-inputs-creates-the-version-bump-i-need) for a detailed description of the workflow inputs. @@ -376,7 +376,7 @@ Before you start you should make sure that your working tree is clean and the re 4. `git add ./CHANGELOG.md` 5. `git commit -m "Update CHANGELOG.md for v"` 6. `git push origin` -19. (If non-patch-release) Sync `versions/next.json` from `next` to `main` +19. (If non-patch release) Sync `versions/next.json` from `next` to `main` 1. `git checkout main` 2. `git pull` 3. `git checkout origin/next ./docs/versions/next.json` diff --git a/code/addons/controls/template/stories/basics.stories.ts b/code/addons/controls/template/stories/basics.stories.ts index aabbda0e4d4c..812f66ebc0e3 100644 --- a/code/addons/controls/template/stories/basics.stories.ts +++ b/code/addons/controls/template/stories/basics.stories.ts @@ -26,8 +26,8 @@ export default { control: { type: 'radio', options: ['a', 'b', 'c'], labels: ['alpha', 'beta', 'gamma'] }, }, inlineRadio: { control: { type: 'inline-radio', options: ['a', 'b', 'c'] } }, - select: { control: { type: 'select', options: ['a', 'b', 'c'] } }, - multiSelect: { control: { type: 'multi-select', options: ['a', 'b', 'c'] } }, + select: { control: 'select', options: ['a', 'b', 'c', 'double space'] }, + multiSelect: { control: { type: 'multi-select' }, options: ['a', 'b', 'c', 'double space'] }, range: { control: 'range' }, rangeCustom: { control: { type: 'range', min: 0, max: 1000, step: 100 } }, text: { control: 'text' }, diff --git a/code/addons/interactions/package.json b/code/addons/interactions/package.json index 76fc4f5e7357..963a4e19e142 100644 --- a/code/addons/interactions/package.json +++ b/code/addons/interactions/package.json @@ -91,7 +91,7 @@ "@devtools-ds/object-inspector": "^1.1.2", "@storybook/jest": "next", "@storybook/testing-library": "next", - "@types/node": "^16.0.0", + "@types/node": "^18.0.0", "formik": "^2.2.9", "typescript": "~4.9.3" }, diff --git a/code/addons/storyshots-puppeteer/README.md b/code/addons/storyshots-puppeteer/README.md index 2175c1d436d4..de7d4d801326 100644 --- a/code/addons/storyshots-puppeteer/README.md +++ b/code/addons/storyshots-puppeteer/README.md @@ -19,7 +19,7 @@ When running Puppeteer tests for your stories, you have two options: - Have a storybook running (ie. accessible via http(s), for instance using `npm run storybook`) - Have a static build of the storybook (for instance, using `npm run build-storybook`) -Then you will need to reference the storybook URL (`file://...` if local, `http(s)://...` if served) +Then you will need to reference the storybook URL (`http(s)://...`) ## _puppeteerTest_ @@ -72,21 +72,6 @@ initStoryshots({ The above config will use __ for tests. You can also use query parameters in your URL (e.g. for setting a different background for your storyshots, if you use `@storybook/addon-backgrounds`). -You may also use a local static build of storybook if you do not want to run the webpack dev-server: - -```js -import initStoryshots from '@storybook/addon-storyshots'; -import { puppeteerTest } from '@storybook/addon-storyshots-puppeteer'; - -initStoryshots({ - suite: 'Puppeteer storyshots', - test: puppeteerTest({ - storybookUrl: 'file:///path/to/my/storybook-static', - // storybookUrl: 'file://${path.resolve(__dirname, '../storybook-static')}' - }), -}); -``` - ### Specifying options to _goto()_ (Puppeteer API) You might use `getGotoOptions` to specify options when the storybook is navigating to a story (using the `goto` method). Will be passed to [Puppeteer .goto() fn](https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#pagegotourl-options) diff --git a/code/addons/themes/README.md b/code/addons/themes/README.md index 52c20f5dfeb9..94c5dc846336 100644 --- a/code/addons/themes/README.md +++ b/code/addons/themes/README.md @@ -2,7 +2,7 @@ Storybook Addon Themes can be used which between multiple themes for components inside the preview in [Storybook](https://storybook.js.org). -![React Storybook Screenshot](https://user-images.githubusercontent.com/42671/98158421-dada2300-1ea8-11eb-8619-af1e7018e1ec.png) +![React Storybook Screenshot](https://user-images.githubusercontent.com/18172605/274302488-77a39112-cdbe-4d16-9966-0d8e9e7e3399.gif) ## Usage diff --git a/code/addons/themes/package.json b/code/addons/themes/package.json index 975f598af39f..a0808daeb76e 100644 --- a/code/addons/themes/package.json +++ b/code/addons/themes/package.json @@ -114,6 +114,6 @@ "unsupportedFrameworks": [ "react-native" ], - "icon": "" + "icon": "https://user-images.githubusercontent.com/18172605/264114587-e4b32190-a9b7-4afa-b739-c873fc0498a6.png" } } diff --git a/code/builders/builder-vite/package.json b/code/builders/builder-vite/package.json index c20a8164300c..c5faa0453b67 100644 --- a/code/builders/builder-vite/package.json +++ b/code/builders/builder-vite/package.json @@ -62,7 +62,7 @@ }, "devDependencies": { "@types/express": "^4.17.13", - "@types/node": "^16.0.0", + "@types/node": "^18.0.0", "glob": "^10.0.0", "rollup": "^3.20.1", "slash": "^5.0.0", diff --git a/code/builders/builder-webpack5/package.json b/code/builders/builder-webpack5/package.json index 94933ce1d438..8662e84ff190 100644 --- a/code/builders/builder-webpack5/package.json +++ b/code/builders/builder-webpack5/package.json @@ -66,7 +66,7 @@ "@storybook/preview": "workspace:*", "@storybook/preview-api": "workspace:*", "@swc/core": "^1.3.82", - "@types/node": "^16.0.0", + "@types/node": "^18.0.0", "@types/semver": "^7.3.4", "babel-loader": "^9.0.0", "babel-plugin-named-exports-order": "^0.0.2", diff --git a/code/e2e-tests/addon-controls.spec.ts b/code/e2e-tests/addon-controls.spec.ts index bcbf96019947..df376782aae8 100644 --- a/code/e2e-tests/addon-controls.spec.ts +++ b/code/e2e-tests/addon-controls.spec.ts @@ -70,4 +70,31 @@ test.describe('addon-controls', () => { const label = await sbPage.panelContent().locator('textarea[name=label]').inputValue(); await expect(label).toEqual('Hello world'); }); + + test('should set select option when value contains double spaces', async ({ page }) => { + await page.goto(`${storybookUrl}?path=/story/addons-controls-basics--undefined`); + + const sbPage = new SbPage(page); + await sbPage.waitUntilLoaded(); + await sbPage.viewAddonPanel('Controls'); + await sbPage.panelContent().locator('#control-select').selectOption('double space'); + + await expect(sbPage.panelContent().locator('#control-select')).toHaveValue('double space'); + await expect(page).toHaveURL(/.*select:double\+\+space.*/); + }); + + test('should set multiselect option when value contains double spaces', async ({ page }) => { + await page.goto(`${storybookUrl}?path=/story/addons-controls-basics--undefined`); + + const sbPage = new SbPage(page); + await sbPage.waitUntilLoaded(); + await sbPage.viewAddonPanel('Controls'); + await sbPage.panelContent().locator('#control-multiSelect').selectOption('double space'); + + await expect(sbPage.panelContent().locator('#control-multiSelect')).toHaveValue( + 'double space' + ); + + await expect(page).toHaveURL(/.*multiSelect\[0]:double\+\+space.*/); + }); }); diff --git a/code/frameworks/angular/package.json b/code/frameworks/angular/package.json index 03d6fb7bf296..e51bd6912e00 100644 --- a/code/frameworks/angular/package.json +++ b/code/frameworks/angular/package.json @@ -51,7 +51,7 @@ "@storybook/preview-api": "workspace:*", "@storybook/telemetry": "workspace:*", "@storybook/types": "workspace:*", - "@types/node": "^16.0.0", + "@types/node": "^18.0.0", "@types/react": "^16.14.34", "@types/react-dom": "^16.9.14", "@types/semver": "^7.3.4", diff --git a/code/frameworks/angular/src/client/argsToTemplate.test.ts b/code/frameworks/angular/src/client/argsToTemplate.test.ts new file mode 100644 index 000000000000..88db1208a6ee --- /dev/null +++ b/code/frameworks/angular/src/client/argsToTemplate.test.ts @@ -0,0 +1,102 @@ +import { argsToTemplate, ArgsToTemplateOptions } from './argsToTemplate'; // adjust path + +describe('argsToTemplate', () => { + it('should correctly convert args to template string and exclude undefined values', () => { + const args: Record = { + prop1: 'value1', + prop2: undefined, + prop3: 'value3', + }; + const options: ArgsToTemplateOptions = {}; + const result = argsToTemplate(args, options); + expect(result).toBe('[prop1]="prop1" [prop3]="prop3"'); + }); + + it('should include properties from include option', () => { + const args = { + prop1: 'value1', + prop2: 'value2', + prop3: 'value3', + }; + const options: ArgsToTemplateOptions = { + include: ['prop1', 'prop3'], + }; + const result = argsToTemplate(args, options); + expect(result).toBe('[prop1]="prop1" [prop3]="prop3"'); + }); + + it('should include non-undefined properties from include option', () => { + const args: Record = { + prop1: 'value1', + prop2: 'value2', + prop3: undefined, + }; + const options: ArgsToTemplateOptions = { + include: ['prop1', 'prop3'], + }; + const result = argsToTemplate(args, options); + expect(result).toBe('[prop1]="prop1"'); + }); + + it('should exclude properties from exclude option', () => { + const args = { + prop1: 'value1', + prop2: 'value2', + prop3: 'value3', + }; + const options: ArgsToTemplateOptions = { + exclude: ['prop2'], + }; + const result = argsToTemplate(args, options); + expect(result).toBe('[prop1]="prop1" [prop3]="prop3"'); + }); + + it('should exclude properties from exclude option and undefined properties', () => { + const args: Record = { + prop1: 'value1', + prop2: 'value2', + prop3: undefined, + }; + const options: ArgsToTemplateOptions = { + exclude: ['prop2'], + }; + const result = argsToTemplate(args, options); + expect(result).toBe('[prop1]="prop1"'); + }); + + it('should prioritize include over exclude when both options are given', () => { + const args = { + prop1: 'value1', + prop2: 'value2', + prop3: 'value3', + }; + const options: ArgsToTemplateOptions = { + include: ['prop1', 'prop2'], + exclude: ['prop2', 'prop3'], + }; + const result = argsToTemplate(args, options); + expect(result).toBe('[prop1]="prop1" [prop2]="prop2"'); + }); + + it('should work when neither include nor exclude options are given', () => { + const args = { + prop1: 'value1', + prop2: 'value2', + }; + const options: ArgsToTemplateOptions = {}; + const result = argsToTemplate(args, options); + expect(result).toBe('[prop1]="prop1" [prop2]="prop2"'); + }); + + it('should bind events correctly when value is a function', () => { + const args = { event1: () => {}, event2: () => {} }; + const result = argsToTemplate(args, {}); + expect(result).toEqual('(event1)="event1($event)" (event2)="event2($event)"'); + }); + + it('should mix properties and events correctly', () => { + const args = { input: 'Value1', event1: () => {} }; + const result = argsToTemplate(args, {}); + expect(result).toEqual('[input]="input" (event1)="event1($event)"'); + }); +}); diff --git a/code/frameworks/angular/src/client/argsToTemplate.ts b/code/frameworks/angular/src/client/argsToTemplate.ts new file mode 100644 index 000000000000..0072aa84743d --- /dev/null +++ b/code/frameworks/angular/src/client/argsToTemplate.ts @@ -0,0 +1,74 @@ +/** + * Options for controlling the behavior of the argsToTemplate function. + * + * @template T The type of the keys in the target object. + */ +export interface ArgsToTemplateOptions { + /** + * An array of keys to specifically include in the output. + * If provided, only the keys from this array will be included in the output, + * irrespective of the `exclude` option. Undefined values will still be excluded from the output. + */ + include?: Array; + /** + * An array of keys to specifically exclude from the output. + * If provided, these keys will be omitted from the output. This option is + * ignored if the `include` option is also provided + */ + exclude?: Array; +} + +/** + * Converts an object of arguments to a string of property and event bindings and excludes undefined values. + * Why? Because Angular treats undefined values in property bindings as an actual value + * and does not apply the default value of the property as soon as the binding is set. + * This feels counter-intuitive and is a common source of bugs in stories. + * @example + * ```ts + * // component.ts + *ㅤ@Component({ selector: 'example' }) + * export class ExampleComponent { + * ㅤ@Input() input1: string = 'Default Input1'; + * ㅤ@Input() input2: string = 'Default Input2'; + * ㅤ@Output() click = new EventEmitter(); + * } + * + * // component.stories.ts + * import { argsToTemplate } from '@storybook/angular'; + * export const Input1: Story = { + * render: (args) => ({ + * props: args, + * // Problem1: + * // This will set input2 to undefined and the internal default value will not be used. + * // Problem2: + * // The default value of input2 will be used, but it is not overridable by the user via controls. + * // Solution: Now the controls will be applicable to both input1 and input2, and the default values will be used if the user does not override them. + * template: ``, + * }), + * args: { + * // In this Story, we want to set the input1 property, and the internal default property of input2 should be used. + * input1: 'Input 1', + * click: { action: 'clicked' }, + * }, + *}; + * ``` + */ +export function argsToTemplate>( + args: A, + options: ArgsToTemplateOptions = {} +) { + const includeSet = options.include ? new Set(options.include) : null; + const excludeSet = options.exclude ? new Set(options.exclude) : null; + + return Object.entries(args) + .filter(([key]) => args[key] !== undefined) + .filter(([key]) => { + if (includeSet) return includeSet.has(key); + if (excludeSet) return !excludeSet.has(key); + return true; + }) + .map(([key, value]) => + typeof value === 'function' ? `(${key})="${key}($event)"` : `[${key}]="${key}"` + ) + .join(' '); +} diff --git a/code/frameworks/angular/src/client/index.ts b/code/frameworks/angular/src/client/index.ts index bfc209efb4d4..2377678bda2e 100644 --- a/code/frameworks/angular/src/client/index.ts +++ b/code/frameworks/angular/src/client/index.ts @@ -10,6 +10,7 @@ export * from './public-types'; export type { StoryFnAngularReturnType as IStory } from './types'; export { moduleMetadata, componentWrapperDecorator, applicationConfig } from './decorators'; +export { argsToTemplate } from './argsToTemplate'; // optimization: stop HMR propagation in webpack if (typeof module !== 'undefined') module?.hot?.decline(); diff --git a/code/frameworks/angular/template/stories/argTypes/doc-button/doc-button.stories.ts b/code/frameworks/angular/template/stories/argTypes/doc-button/doc-button.stories.ts index d23f3896359f..11dc4d7cd32d 100644 --- a/code/frameworks/angular/template/stories/argTypes/doc-button/doc-button.stories.ts +++ b/code/frameworks/angular/template/stories/argTypes/doc-button/doc-button.stories.ts @@ -1,24 +1,29 @@ -import { Args } from '@storybook/angular'; +import { Meta, StoryObj, argsToTemplate } from '@storybook/angular'; import { DocButtonComponent } from './doc-button.component'; -export default { +const meta: Meta> = { component: DocButtonComponent, }; -export const Basic = (args: Args) => ({ - props: args, -}); -Basic.args = { label: 'Args test', isDisabled: false }; -Basic.ArgTypes = { - theDefaultValue: { - table: { - defaultValue: { summary: 'Basic default value' }, +export default meta; + +type Story = StoryObj>; + +export const Basic: Story = { + args: { label: 'Args test', isDisabled: false }, + argTypes: { + theDefaultValue: { + table: { + defaultValue: { summary: 'Basic default value' }, + }, }, }, }; -export const WithTemplate = (args: Args) => ({ - props: args, - template: '', -}); -WithTemplate.args = { label: 'Template test', appearance: 'primary' }; +export const WithTemplate: Story = { + args: { label: 'Template test', appearance: 'primary' }, + render: (args) => ({ + props: args, + template: ``, + }), +}; diff --git a/code/frameworks/angular/template/stories/argTypes/doc-directive/doc-directive.stories.ts b/code/frameworks/angular/template/stories/argTypes/doc-directive/doc-directive.stories.ts index b734b93bf40d..e949d8e88252 100644 --- a/code/frameworks/angular/template/stories/argTypes/doc-directive/doc-directive.stories.ts +++ b/code/frameworks/angular/template/stories/argTypes/doc-directive/doc-directive.stories.ts @@ -1,14 +1,19 @@ +import { Meta, StoryObj } from '@storybook/angular'; import { DocDirective } from './doc-directive.directive'; -export default { +const meta: Meta = { component: DocDirective, }; -const modules = { - declarations: [DocDirective], -}; +export default meta; + +type Story = StoryObj; -export const Basic = () => ({ - moduleMetadata: modules, - template: '

DocDirective

', -}); +export const Basic: Story = { + render: () => ({ + moduleMetadata: { + declarations: [DocDirective], + }, + template: '

DocDirective

', + }), +}; diff --git a/code/frameworks/angular/template/stories/argTypes/doc-injectable/doc-injectable.stories.ts b/code/frameworks/angular/template/stories/argTypes/doc-injectable/doc-injectable.stories.ts index eca5e10fb11d..7741bca9ba88 100644 --- a/code/frameworks/angular/template/stories/argTypes/doc-injectable/doc-injectable.stories.ts +++ b/code/frameworks/angular/template/stories/argTypes/doc-injectable/doc-injectable.stories.ts @@ -1,14 +1,19 @@ +import { Meta, StoryObj } from '@storybook/angular'; import { DocInjectableService } from './doc-injectable.service'; -export default { +const meta: Meta = { component: DocInjectableService, }; -const modules = { - provider: [DocInjectableService], -}; +export default meta; + +type Story = StoryObj; -export const Basic = () => ({ - moduleMetadata: modules, - template: '

DocInjectable

', -}); +export const Basic: Story = { + render: () => ({ + moduleMetadata: { + providers: [DocInjectableService], + }, + template: '

DocInjectable

', + }), +}; diff --git a/code/frameworks/angular/template/stories/argTypes/doc-pipe/doc-pipe.stories.ts b/code/frameworks/angular/template/stories/argTypes/doc-pipe/doc-pipe.stories.ts index 6ab616f16ee2..018ab04a9951 100644 --- a/code/frameworks/angular/template/stories/argTypes/doc-pipe/doc-pipe.stories.ts +++ b/code/frameworks/angular/template/stories/argTypes/doc-pipe/doc-pipe.stories.ts @@ -1,14 +1,19 @@ +import { Meta, StoryObj } from '@storybook/angular'; import { DocPipe } from './doc-pipe.pipe'; -export default { +const meta: Meta = { component: DocPipe, }; -const modules = { - declarations: [DocPipe], -}; +export default meta; + +type Story = StoryObj; -export const Basic = () => ({ - moduleMetadata: modules, - template: `

{{ 'DocPipe' | docPipe }}

`, -}); +export const Basic: Story = { + render: () => ({ + moduleMetadata: { + declarations: [DocPipe], + }, + template: `

{{ 'DocPipe' | docPipe }}

`, + }), +}; diff --git a/code/frameworks/angular/template/stories/basics/angular-forms/customControlValueAccessor/custom-cva-component.stories.ts b/code/frameworks/angular/template/stories/basics/angular-forms/customControlValueAccessor/custom-cva-component.stories.ts index 228e2d7b9045..0396bae99acc 100644 --- a/code/frameworks/angular/template/stories/basics/angular-forms/customControlValueAccessor/custom-cva-component.stories.ts +++ b/code/frameworks/angular/template/stories/basics/angular-forms/customControlValueAccessor/custom-cva-component.stories.ts @@ -1,8 +1,8 @@ import { FormsModule } from '@angular/forms'; -import { Meta, StoryFn, moduleMetadata } from '@storybook/angular'; +import { Meta, StoryFn, StoryObj, moduleMetadata } from '@storybook/angular'; import { CustomCvaComponent } from './custom-cva.component'; -export default { +const meta: Meta = { // title: 'Basics / Angular forms / ControlValueAccessor', component: CustomCvaComponent, decorators: [ @@ -17,11 +17,16 @@ export default { ], } as Meta; -export const SimpleInput: StoryFn = () => ({ - props: { - ngModel: 'Type anything', - ngModelChange: () => {}, - }, -}); +export default meta; -SimpleInput.storyName = 'Simple input'; +type Story = StoryObj; + +export const SimpleInput: Story = { + name: 'Simple input', + render: () => ({ + props: { + ngModel: 'Type anything', + ngModelChange: () => {}, + }, + }), +}; diff --git a/code/frameworks/angular/template/stories/basics/component-with-complex-selectors/attribute-selectors.component.stories.ts b/code/frameworks/angular/template/stories/basics/component-with-complex-selectors/attribute-selectors.component.stories.ts index d935de5215d7..73894b83b34a 100644 --- a/code/frameworks/angular/template/stories/basics/component-with-complex-selectors/attribute-selectors.component.stories.ts +++ b/code/frameworks/angular/template/stories/basics/component-with-complex-selectors/attribute-selectors.component.stories.ts @@ -1,8 +1,13 @@ +import { Meta, StoryObj } from '@storybook/angular'; import { AttributeSelectorComponent } from './attribute-selector.component'; -export default { +const meta: Meta = { // title: 'Basics / Component / With Complex Selectors', component: AttributeSelectorComponent, }; -export const AttributeSelectors = {}; +export default meta; + +type Story = StoryObj; + +export const AttributeSelectors: Story = {}; diff --git a/code/frameworks/angular/template/stories/basics/component-with-enums/enums.component.stories.ts b/code/frameworks/angular/template/stories/basics/component-with-enums/enums.component.stories.ts index 647ca86d8d67..b79bd371baf3 100644 --- a/code/frameworks/angular/template/stories/basics/component-with-enums/enums.component.stories.ts +++ b/code/frameworks/angular/template/stories/basics/component-with-enums/enums.component.stories.ts @@ -1,4 +1,4 @@ -import { Meta, StoryFn } from '@storybook/angular'; +import { Meta, StoryObj } from '@storybook/angular'; import { EnumsComponent, EnumNumeric, @@ -6,19 +6,22 @@ import { EnumStringValues, } from './enums.component'; -export default { +const meta: Meta = { // title: 'Basics / Component / With Enum Types', component: EnumsComponent, -} as Meta; +}; + +export default meta; + +type Story = StoryObj; -export const Basic: StoryFn = (args) => ({ - props: args, -}); -Basic.args = { - unionType: 'union a', - aliasedUnionType: 'Type Alias 1', - enumNumeric: EnumNumeric.FIRST, - enumNumericInitial: EnumNumericInitial.UNO, - enumStrings: EnumStringValues.PRIMARY, - enumAlias: EnumNumeric.FIRST, +export const Basic: Story = { + args: { + unionType: 'Union A', + aliasedUnionType: 'Type Alias 1', + enumNumeric: EnumNumeric.FIRST, + enumNumericInitial: EnumNumericInitial.UNO, + enumStrings: EnumStringValues.PRIMARY, + enumAlias: EnumNumeric.FIRST, + }, }; diff --git a/code/frameworks/angular/template/stories/basics/component-with-inheritance/base-button.stories.ts b/code/frameworks/angular/template/stories/basics/component-with-inheritance/base-button.stories.ts index a206115f5de7..271e6a3fcc9d 100644 --- a/code/frameworks/angular/template/stories/basics/component-with-inheritance/base-button.stories.ts +++ b/code/frameworks/angular/template/stories/basics/component-with-inheritance/base-button.stories.ts @@ -1,12 +1,15 @@ +import { Meta, StoryObj } from '@storybook/angular'; import { BaseButtonComponent } from './base-button.component'; -export default { +const meta: Meta = { // title: 'Basics / Component / With Inheritance', component: BaseButtonComponent, }; -export const BaseButton = () => ({ - props: { +export default meta; + +export const BaseButton: StoryObj = { + args: { label: 'this is label', }, -}); +}; diff --git a/code/frameworks/angular/template/stories/basics/component-with-inheritance/icon-button.stories.ts b/code/frameworks/angular/template/stories/basics/component-with-inheritance/icon-button.stories.ts index baefe65c4f58..bb5c5fb02bcb 100644 --- a/code/frameworks/angular/template/stories/basics/component-with-inheritance/icon-button.stories.ts +++ b/code/frameworks/angular/template/stories/basics/component-with-inheritance/icon-button.stories.ts @@ -1,13 +1,18 @@ +import { Meta, StoryObj } from '@storybook/angular'; import { IconButtonComponent } from './icon-button.component'; -export default { +const meta: Meta = { // title: 'Basics / Component / With Inheritance', component: IconButtonComponent, }; -export const IconButton = () => ({ - props: { +export default meta; + +type Story = StoryObj; + +export const IconButton: Story = { + args: { icon: 'this is icon', label: 'this is label', }, -}); +}; diff --git a/code/frameworks/angular/template/stories/basics/component-with-ng-content/ng-content-about-parent.stories.ts b/code/frameworks/angular/template/stories/basics/component-with-ng-content/ng-content-about-parent.stories.ts index 0512582aca6e..f8185f8eb80a 100644 --- a/code/frameworks/angular/template/stories/basics/component-with-ng-content/ng-content-about-parent.stories.ts +++ b/code/frameworks/angular/template/stories/basics/component-with-ng-content/ng-content-about-parent.stories.ts @@ -1,5 +1,5 @@ import { Component, Input } from '@angular/core'; -import { componentWrapperDecorator, Meta, StoryFn } from '@storybook/angular'; +import { componentWrapperDecorator, Meta, StoryObj } from '@storybook/angular'; @Component({ selector: 'sb-button', @@ -17,7 +17,7 @@ class SbButtonComponent { color = '#5eadf5'; } -export default { +const meta: Meta = { // title: 'Basics / Component / With ng-content / Button with different contents', // Implicitly declares the component to Angular // This will be the component described by the addon docs @@ -35,24 +35,24 @@ export default { }, } as Meta; +export default meta; + +type Story = StoryObj; + // By default storybook uses the default export component if no template or component is defined in the story // So Storybook nests the component twice because it is first added by the componentWrapperDecorator. -export const AlwaysDefineTemplateOrComponent: StoryFn = () => ({}); +export const AlwaysDefineTemplateOrComponent: Story = {}; -export const EmptyButton: StoryFn = () => ({ - template: '', -}); - -export const WithDynamicContentAndArgs: StoryFn = (args) => ({ - template: `${args['content']}`, -}); -WithDynamicContentAndArgs.argTypes = { - content: { control: 'text' }, +export const EmptyButton: Story = { + render: () => ({ + template: '', + }), }; -WithDynamicContentAndArgs.args = { content: 'My button text' }; -export const InH1: StoryFn = () => ({ - template: 'My button in h1', -}); -InH1.decorators = [componentWrapperDecorator((story) => `

${story}

`)]; -InH1.storyName = 'In

'; +export const InH1: Story = { + render: () => ({ + template: 'My button in h1', + }), + decorators: [componentWrapperDecorator((story) => `

${story}

`)], + name: 'In

', +}; diff --git a/code/frameworks/angular/template/stories/basics/component-with-ng-content/ng-content-simple.stories.ts b/code/frameworks/angular/template/stories/basics/component-with-ng-content/ng-content-simple.stories.ts index 13cc2eb550c5..71b0fe84df38 100644 --- a/code/frameworks/angular/template/stories/basics/component-with-ng-content/ng-content-simple.stories.ts +++ b/code/frameworks/angular/template/stories/basics/component-with-ng-content/ng-content-simple.stories.ts @@ -1,6 +1,6 @@ import { Component } from '@angular/core'; -import { Meta, StoryFn } from '@storybook/angular/'; +import { Meta, StoryObj } from '@storybook/angular'; @Component({ selector: 'storybook-with-ng-content', @@ -9,21 +9,29 @@ import { Meta, StoryFn } from '@storybook/angular/'; }) class WithNgContentComponent {} -export default { +const meta: Meta = { // title: 'Basics / Component / With ng-content / Simple', component: WithNgContentComponent, } as Meta; -export const OnlyComponent: StoryFn = () => ({}); +export default meta; -export const Default: StoryFn = () => ({ - template: `

This is rendered in ng-content

`, -}); +type Story = StoryObj; -export const WithDynamicContentAndArgs: StoryFn = (args) => ({ - template: `

${args['content']}

`, -}); -WithDynamicContentAndArgs.argTypes = { - content: { control: 'text' }, +export const OnlyComponent: Story = {}; + +export const Default: Story = { + render: () => ({ + template: `

This is rendered in ng-content

`, + }), +}; + +export const WithDynamicContentAndArgs: Story = { + render: (args) => ({ + template: `

${args['content']}

`, + }), + args: { content: 'Default content' }, + argTypes: { + content: { control: 'text' }, + }, }; -WithDynamicContentAndArgs.args = { content: 'Default content' }; diff --git a/code/frameworks/angular/template/stories/basics/component-with-ng-on-destroy/component-with-on-destroy.stories.ts b/code/frameworks/angular/template/stories/basics/component-with-ng-on-destroy/component-with-on-destroy.stories.ts index b833424367bb..9ac53d2dde03 100644 --- a/code/frameworks/angular/template/stories/basics/component-with-ng-on-destroy/component-with-on-destroy.stories.ts +++ b/code/frameworks/angular/template/stories/basics/component-with-ng-on-destroy/component-with-on-destroy.stories.ts @@ -27,7 +27,7 @@ class OnDestroyComponent implements OnInit, OnDestroy { } } -export default { +const meta: Meta = { // title: 'Basics / Component / with ngOnDestroy', component: OnDestroyComponent, parameters: { @@ -37,4 +37,8 @@ export default { }, } as Meta; -export const SimpleComponent: StoryObj = {}; +export default meta; + +type Story = StoryObj; + +export const SimpleComponent: Story = {}; diff --git a/code/frameworks/angular/template/stories/basics/component-with-on-push/on-push.stories.ts b/code/frameworks/angular/template/stories/basics/component-with-on-push/on-push.stories.ts index 6ad452797bc2..cc672938a7f2 100644 --- a/code/frameworks/angular/template/stories/basics/component-with-on-push/on-push.stories.ts +++ b/code/frameworks/angular/template/stories/basics/component-with-on-push/on-push.stories.ts @@ -1,7 +1,7 @@ -import { Meta, StoryFn } from '@storybook/angular'; +import { Meta, StoryObj } from '@storybook/angular'; import { OnPushBoxComponent } from './on-push-box.component'; -export default { +const meta: Meta = { // title: 'Basics / Component / With OnPush strategy', component: OnPushBoxComponent, argTypes: { @@ -12,10 +12,12 @@ export default { word: 'The text', bgColor: '#FFF000', }, -} as Meta; +}; -export const ClassSpecifiedComponentWithOnPushAndArgs: StoryFn = (args) => ({ - props: args, -}); -ClassSpecifiedComponentWithOnPushAndArgs.storyName = - 'Class-specified component with OnPush and Args'; +export default meta; + +type Story = StoryObj; + +export const ClassSpecifiedComponentWithOnPushAndArgs: Story = { + name: 'Class-specified component with OnPush and Args', +}; diff --git a/code/frameworks/angular/template/stories/basics/component-with-pipe/custom-pipes.stories.ts b/code/frameworks/angular/template/stories/basics/component-with-pipe/custom-pipes.stories.ts index 6c8f9254208f..9a4a8e53c577 100644 --- a/code/frameworks/angular/template/stories/basics/component-with-pipe/custom-pipes.stories.ts +++ b/code/frameworks/angular/template/stories/basics/component-with-pipe/custom-pipes.stories.ts @@ -1,9 +1,9 @@ -import { Meta, StoryFn, moduleMetadata } from '@storybook/angular'; +import { Meta, StoryObj, moduleMetadata } from '@storybook/angular'; import { CustomPipePipe } from './custom.pipe'; import { WithPipeComponent } from './with-pipe.component'; -export default { +const meta: Meta = { // title: 'Basics / Component / With Pipes', component: WithPipeComponent, decorators: [ @@ -11,21 +11,26 @@ export default { declarations: [CustomPipePipe], }), ], -} as Meta; +}; -export const Simple: StoryFn = () => ({ - props: { - field: 'foobar', - }, -}); +export default meta; + +type Story = StoryObj; -export const WithArgsStory: StoryFn = (args) => ({ - props: args, -}); -WithArgsStory.storyName = 'With args'; -WithArgsStory.argTypes = { - field: { control: 'text' }, +export const Simple: Story = { + render: () => ({ + props: { + field: 'foobar', + }, + }), }; -WithArgsStory.args = { - field: 'Foo Bar', + +export const WithArgsStory: Story = { + name: 'With args', + argTypes: { + field: { control: 'text' }, + }, + args: { + field: 'Foo Bar', + }, }; diff --git a/code/frameworks/angular/template/stories/basics/component-with-provider/di.component.stories.ts b/code/frameworks/angular/template/stories/basics/component-with-provider/di.component.stories.ts index fea1bc95c15f..381c272fb96d 100644 --- a/code/frameworks/angular/template/stories/basics/component-with-provider/di.component.stories.ts +++ b/code/frameworks/angular/template/stories/basics/component-with-provider/di.component.stories.ts @@ -1,26 +1,30 @@ -import { Args } from '@storybook/angular'; +import { Args, Meta, StoryObj } from '@storybook/angular'; import { DiComponent } from './di.component'; -export default { +const meta: Meta = { // title: 'Basics / Component / With Provider', component: DiComponent, }; -export const InputsAndInjectDependencies = () => ({ - props: { - title: 'Component dependencies', - }, -}); +export default meta; -InputsAndInjectDependencies.storyName = 'inputs and inject dependencies'; +type Story = StoryObj; -export const InputsAndInjectDependenciesWithArgs = (args: Args) => ({ - props: args, -}); -InputsAndInjectDependenciesWithArgs.storyName = 'inputs and inject dependencies with args'; -InputsAndInjectDependenciesWithArgs.argTypes = { - title: { control: 'text' }, +export const InputsAndInjectDependencies: Story = { + render: () => ({ + props: { + title: 'Component dependencies', + }, + }), + name: 'inputs and inject dependencies', }; -InputsAndInjectDependenciesWithArgs.args = { - title: 'Component dependencies', + +export const InputsAndInjectDependenciesWithArgs: Story = { + name: 'inputs and inject dependencies with args', + argTypes: { + title: { control: 'text' }, + }, + args: { + title: 'Component dependencies', + }, }; diff --git a/code/frameworks/angular/template/stories/basics/component-with-style/styled.component.stories.ts b/code/frameworks/angular/template/stories/basics/component-with-style/styled.component.stories.ts index 0818ff28cc6f..c0cd88c09bc2 100644 --- a/code/frameworks/angular/template/stories/basics/component-with-style/styled.component.stories.ts +++ b/code/frameworks/angular/template/stories/basics/component-with-style/styled.component.stories.ts @@ -1,10 +1,15 @@ +import { Meta, StoryObj } from '@storybook/angular'; import { StyledComponent } from './styled.component'; -export default { +const meta: Meta = { // title: 'Basics / Component / With StyleUrls', component: StyledComponent, }; -export const ComponentWithStyles = () => ({}); +export default meta; -ComponentWithStyles.storyName = 'Component with styles'; +type Story = StoryObj; + +export const ComponentWithStyles: Story = { + name: 'Component with styles', +}; diff --git a/code/frameworks/angular/template/stories/basics/component-with-template/template.component.ts b/code/frameworks/angular/template/stories/basics/component-with-template/template.component.ts new file mode 100644 index 000000000000..2071a6db7738 --- /dev/null +++ b/code/frameworks/angular/template/stories/basics/component-with-template/template.component.ts @@ -0,0 +1,27 @@ +import { CommonModule } from '@angular/common'; +import { Component, EventEmitter, Input, Output } from '@angular/core'; + +@Component({ + selector: 'app-template', + imports: [CommonModule], + template: `
+ Label: {{ label }} +
+ Label2: {{ label2 }} +
+ +
`, + styles: [], + standalone: true, +}) +export class Template { + @Input() label = 'default label'; + + @Input() label2 = 'default label2'; + + @Output() changed = new EventEmitter(); + + inc() { + this.changed.emit('Increase'); + } +} diff --git a/code/frameworks/angular/template/stories/basics/component-with-template/template.stories.ts b/code/frameworks/angular/template/stories/basics/component-with-template/template.stories.ts new file mode 100644 index 000000000000..55639870f262 --- /dev/null +++ b/code/frameworks/angular/template/stories/basics/component-with-template/template.stories.ts @@ -0,0 +1,24 @@ +import { Meta, StoryObj, argsToTemplate } from '@storybook/angular'; +import { Template } from './template.component'; + +const meta: Meta