Skip to content

Commit

Permalink
Merge pull request #24613 from storybookjs/version-patch-from-7.5.2
Browse files Browse the repository at this point in the history
Release: Patch 7.5.3
  • Loading branch information
kasperpeulen authored Nov 6, 2023
2 parents 0ef03ec + 740e15a commit f0a5f07
Show file tree
Hide file tree
Showing 25 changed files with 117 additions and 90 deletions.
6 changes: 6 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,9 @@
## 7.5.3

- Angular: Support v17 - [#24717](https://github.com/storybookjs/storybook/pull/24717), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)!
- CLI: Catch when prettier failed to prettify main and preview config files - [#24604](https://github.com/storybookjs/storybook/pull/24604), thanks [@kasperpeulen](https://github.com/kasperpeulen)!
- UI: Fix button contrast-ratio - [#24525](https://github.com/storybookjs/storybook/pull/24525), thanks [@maheshchandra10](https://github.com/maheshchandra10)!

## 7.5.2

- Addon-themes: Fix globals not being set when using absolute path - [#24596](https://github.com/storybookjs/storybook/pull/24596), thanks [@JReinhold](https://github.com/JReinhold)!
Expand Down
22 changes: 11 additions & 11 deletions code/frameworks/angular/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -90,17 +90,17 @@
"zone.js": "^0.13.0"
},
"peerDependencies": {
"@angular-devkit/architect": ">=0.1400.0 < 0.1700.0",
"@angular-devkit/build-angular": ">=14.1.0 < 17.0.0",
"@angular-devkit/core": ">=14.1.0 < 17.0.0",
"@angular/cli": ">=14.1.0 < 17.0.0",
"@angular/common": ">=14.1.0 < 17.0.0",
"@angular/compiler": ">=14.1.0 < 17.0.0",
"@angular/compiler-cli": ">=14.1.0 < 17.0.0",
"@angular/core": ">=14.1.0 < 17.0.0",
"@angular/forms": ">=14.1.0 < 17.0.0",
"@angular/platform-browser": ">=14.1.0 < 17.0.0",
"@angular/platform-browser-dynamic": ">=14.1.0 < 17.0.0",
"@angular-devkit/architect": ">=0.1400.0 < 0.1800.0",
"@angular-devkit/build-angular": ">=14.1.0 < 18.0.0",
"@angular-devkit/core": ">=14.1.0 < 18.0.0",
"@angular/cli": ">=14.1.0 < 18.0.0",
"@angular/common": ">=14.1.0 < 18.0.0",
"@angular/compiler": ">=14.1.0 < 18.0.0",
"@angular/compiler-cli": ">=14.1.0 < 18.0.0",
"@angular/core": ">=14.1.0 < 18.0.0",
"@angular/forms": ">=14.1.0 < 18.0.0",
"@angular/platform-browser": ">=14.1.0 < 18.0.0",
"@angular/platform-browser-dynamic": ">=14.1.0 < 18.0.0",
"@babel/core": "*",
"react": "^16.8.0 || ^17.0.0 || ^18.0.0",
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
Expand Down
42 changes: 25 additions & 17 deletions code/lib/cli/src/generators/configure.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import fse from 'fs-extra';
import path from 'path';
import { dedent } from 'ts-dedent';
import { logger } from '@storybook/node-logger';
import { externalFrameworks, SupportedLanguage } from '../project_types';

interface ConfigureMainOptions {
Expand Down Expand Up @@ -33,8 +34,6 @@ interface ConfigurePreviewOptions {
rendererId: string;
}

const logger = console;

/**
* We need to clean up the paths in case of pnp
* input: "path.dirname(require.resolve(path.join('@storybook/react-webpack5', 'package.json')))"
Expand Down Expand Up @@ -96,20 +95,25 @@ export async function configureMain({
finalPrefixes.push(`/** @type { import('${frameworkPackage}').StorybookConfig } */`);
}

const mainJsContents = mainConfigTemplate
let mainJsContents = mainConfigTemplate
.replace('<<import>>', `${imports.join('\n\n')}\n\n`)
.replace('<<prefix>>', finalPrefixes.length > 0 ? `${finalPrefixes.join('\n\n')}\n` : '')
.replace('<<type>>', isTypescript ? ': StorybookConfig' : '')
.replace('<<mainContents>>', mainContents);

const prettier = (await import('prettier')).default;

const mainPath = `./${storybookConfigFolder}/main.${isTypescript ? 'ts' : 'js'}`;
const prettyMain = prettier.format(dedent(mainJsContents), {
...prettier.resolveConfig.sync(process.cwd()),
filepath: mainPath,
});
await fse.writeFile(mainPath, prettyMain, { encoding: 'utf8' });

try {
const prettier = (await import('prettier')).default;
mainJsContents = prettier.format(dedent(mainJsContents), {
...prettier.resolveConfig.sync(process.cwd()),
filepath: mainPath,
});
} catch {
logger.verbose(`Failed to prettify ${mainPath}`);
}

await fse.writeFile(mainPath, mainJsContents, { encoding: 'utf8' });
}

export async function configurePreview(options: ConfigurePreviewOptions) {
Expand Down Expand Up @@ -140,7 +144,7 @@ export async function configurePreview(options: ConfigurePreviewOptions) {
.filter(Boolean)
.join('\n');

const preview = dedent`
let preview = dedent`
${prefix}${prefix.length > 0 ? '\n' : ''}
${
!isTypescript && rendererPackage
Expand All @@ -163,11 +167,15 @@ export async function configurePreview(options: ConfigurePreviewOptions) {
.replace(' \n', '')
.trim();

const prettier = (await import('prettier')).default;
try {
const prettier = (await import('prettier')).default;
preview = prettier.format(preview, {
...prettier.resolveConfig.sync(process.cwd()),
filepath: previewPath,
});
} catch {
logger.verbose(`Failed to prettify ${previewPath}`);
}

const prettyPreview = prettier.format(preview, {
...prettier.resolveConfig.sync(process.cwd()),
filepath: previewPath,
});
await fse.writeFile(previewPath, prettyPreview, { encoding: 'utf8' });
await fse.writeFile(previewPath, preview, { encoding: 'utf8' });
}
2 changes: 1 addition & 1 deletion code/lib/theming/src/themes/light.ts
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ const theme: ThemeVars = {
// Text colors
textColor: color.darkest,
textInverseColor: color.lightest,
textMutedColor: color.mediumdark,
textMutedColor: color.dark,

// Toolbar default and active colors
barTextColor: color.mediumdark,
Expand Down
3 changes: 2 additions & 1 deletion code/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -328,5 +328,6 @@
"Dependency Upgrades"
]
]
}
},
"deferredNextVersion": "7.5.3"
}
22 changes: 11 additions & 11 deletions code/yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -6438,17 +6438,17 @@ __metadata:
webpack: 5
zone.js: ^0.13.0
peerDependencies:
"@angular-devkit/architect": ">=0.1400.0 < 0.1700.0"
"@angular-devkit/build-angular": ">=14.1.0 < 17.0.0"
"@angular-devkit/core": ">=14.1.0 < 17.0.0"
"@angular/cli": ">=14.1.0 < 17.0.0"
"@angular/common": ">=14.1.0 < 17.0.0"
"@angular/compiler": ">=14.1.0 < 17.0.0"
"@angular/compiler-cli": ">=14.1.0 < 17.0.0"
"@angular/core": ">=14.1.0 < 17.0.0"
"@angular/forms": ">=14.1.0 < 17.0.0"
"@angular/platform-browser": ">=14.1.0 < 17.0.0"
"@angular/platform-browser-dynamic": ">=14.1.0 < 17.0.0"
"@angular-devkit/architect": ">=0.1400.0 < 0.1800.0"
"@angular-devkit/build-angular": ">=14.1.0 < 18.0.0"
"@angular-devkit/core": ">=14.1.0 < 18.0.0"
"@angular/cli": ">=14.1.0 < 18.0.0"
"@angular/common": ">=14.1.0 < 18.0.0"
"@angular/compiler": ">=14.1.0 < 18.0.0"
"@angular/compiler-cli": ">=14.1.0 < 18.0.0"
"@angular/core": ">=14.1.0 < 18.0.0"
"@angular/forms": ">=14.1.0 < 18.0.0"
"@angular/platform-browser": ">=14.1.0 < 18.0.0"
"@angular/platform-browser-dynamic": ">=14.1.0 < 18.0.0"
"@babel/core": "*"
react: ^16.8.0 || ^17.0.0 || ^18.0.0
react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
Expand Down
4 changes: 2 additions & 2 deletions docs/configure/sidebar-and-urls.md
Original file line number Diff line number Diff line change
Expand Up @@ -162,6 +162,6 @@ When Storybook generates the titles for all matching stories, they'll retain the

### Story Indexers

[Story Indexers](./main-config-indexers.md) are a set of heuristics used by Storybook to crawl your filesystem based on a given glob pattern searching for matching stories, which is then used to generate an `index.json` (formerly `stories.json`) file responsible for populating the sidebar with the necessary information. By default, this heuristic will look for files that contain the following scheme `*.stories.@(js|jsx|mjs|ts|tsx)`.
[Story Indexers](../api/main-config-indexers.md) are a set of heuristics used by Storybook to crawl your filesystem based on a given glob pattern searching for matching stories, which is then used to generate an `index.json` (formerly `stories.json`) file responsible for populating the sidebar with the necessary information. By default, this heuristic will look for files that contain the following scheme `*.stories.@(js|jsx|mjs|ts|tsx)`.

You can provide your own indexer to include stories with a different naming convention, adjust the automatic title generation beyond a prefix, and many other use cases. For more information, see the [Story Indexers API reference](./main-config-indexers.md).
You can provide your own indexer to include stories with a different naming convention, adjust the automatic title generation beyond a prefix, and many other use cases. For more information, see the [Story Indexers API reference](../api/main-config-indexers.md).
21 changes: 18 additions & 3 deletions docs/sharing/publish-storybook.md
Original file line number Diff line number Diff line change
Expand Up @@ -131,15 +131,30 @@ When you publish Storybook, you also get component history and versioning down t

## Publish Storybook to other services

Since Storybook is built as a static web application, you can also publish it to any web host, including [GitHub Pages](https://docs.github.com/en/pages), [Netlify](https://www.netlify.com/), [AWS S3](https://aws.amazon.com/s3/), and more. However, features such as [Composition](./storybook-composition.md),
[embedding stories](./embed.md), history, and versioning require tighter integration with Storybook APIs and secure authentication. Your hosting provider may not be capable of supporting these features. Learn about the Component Publishing Protocol (CPP) to see what.
Since Storybook is built as a static web application, you can also publish it to any web host, including [GitHub Pages](https://docs.github.com/en/pages), [Netlify](https://www.netlify.com/), [AWS S3](https://aws.amazon.com/s3/), and more. However, features such as [Composition](./storybook-composition.md), [embedding stories](./embed.md), history, versioning, and assets may require tighter integration with Storybook APIs and secure authentication. If you want to know more about headers, you can refer to the [Migration guide](https://github.com/storybookjs/storybook/blob/main/MIGRATION.md#deploying-build-artifacts). Additionally, if you want to learn about the Component Publishing Protocol (CPP), you can find more information below.

### GitHub Pages

To deploy Storybook on GitHub Pages, use the community-built [Deploy Storybook to GitHub Pages](https://github.com/bitovi/github-actions-storybook-to-github-pages) Action. To enable it, create a new workflow file inside your `.github/workflows` directory with the following content:


<!-- prettier-ignore-start -->

<CodeSnippets
paths={[
'common/ghp-github-action.yml.mdx',
]}
/>

<!-- prettier-ignore-end -->

<div class="aside">

ℹ️ Additional header configuration may be required to serve Storybook's static files correctly on your host. For more information on the required headers, see the [Migration guide](https://github.com/storybookjs/storybook/blob/main/MIGRATION.md#deploying-build-artifacts).
ℹ️ The GitHub Pages Action requires additional configuration options to customize the deployment process. Refer to the [official documentation](https://github.com/marketplace/actions/deploy-storybook-to-github-pages) for more information.

</div>


<details>

<summary><h2>Component Publishing Protocol (CPP)</h2></summary>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,11 @@

import type { Meta, StoryObj } from '@storybook/angular/';

import { withDesign } from 'storybook-addon-designs';

import { MyComponent } from './MyComponent.component';

// More on default export: https://storybook.js.org/docs/angular/writing-stories/introduction#default-export
const meta: Meta<MyComponent> = {
component: MyComponent,
decorators: [withDesign],
};

export default meta;
Expand Down
39 changes: 39 additions & 0 deletions docs/snippets/common/ghp-github-action.yml.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
```yml
# .github/workflows/deploy-github-pages.yaml

# Workflow name
name: Build and Publish Storybook to GitHub Pages

on:
# Event for the workflow to run on
push:
branches:
- 'your-branch-name' # Replace with the branch you want to deploy from

permissions:
contents: read
pages: write
id-token: write

# List of jobs
jobs:
deploy:
runs-on: ubuntu-latest
# Job steps
steps:
# Manual Checkout
- uses: actions/checkout@v3

# Set up Node
- uses: actions/setup-node@v3
with:
node-version: '16.x'

#👇 Add Storybook build and deploy to GitHub Pages as a step in the workflow
- uses: bitovi/github-actions-storybook-to-github-pages@v1.0.1
with:
install_command: yarn install # default: npm ci
build_command: yarn build-storybook # default: npm run build-storybook
path: storybook-static # default: dist/storybook
checkout: false # default: true
```
3 changes: 0 additions & 3 deletions docs/snippets/react/component-story-figma-integration.js.mdx
Original file line number Diff line number Diff line change
@@ -1,14 +1,11 @@
```js
// MyComponent.stories.js|jsx

import { withDesign } from 'storybook-addon-designs';

import { MyComponent } from './MyComponent';

// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
export default {
component: MyComponent,
decorators: [withDesign],
};

export const Example = {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,11 @@

import type { Meta, StoryObj } from '@storybook/react';

import { withDesign } from 'storybook-addon-designs';

import { MyComponent } from './MyComponent';

// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
const meta = {
component: MyComponent,
decorators: [withDesign],
} satisfies Meta<typeof MyComponent>;

export default meta;
Expand Down
3 changes: 0 additions & 3 deletions docs/snippets/react/component-story-figma-integration.ts.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,11 @@

import type { Meta, StoryObj } from '@storybook/react';

import { withDesign } from 'storybook-addon-designs';

import { MyComponent } from './MyComponent';

// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
const meta: Meta<typeof MyComponent> = {
component: MyComponent,
decorators: [withDesign],
};

export default meta;
Expand Down
3 changes: 0 additions & 3 deletions docs/snippets/solid/component-story-figma-integration.js.mdx
Original file line number Diff line number Diff line change
@@ -1,13 +1,10 @@
```js
// MyComponent.stories.js|jsx

import { withDesign } from 'storybook-addon-designs';

import { MyComponent } from './MyComponent';

export default {
component: MyComponent,
decorators: [withDesign],
};

export const Example = {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,10 @@

import type { Meta, StoryObj } from 'storybook-solidjs';

import { withDesign } from 'storybook-addon-designs';

import { MyComponent } from './MyComponent';

const meta = {
component: MyComponent,
decorators: [withDesign],
} satisfies Meta<typeof MyComponent>;

export default meta;
Expand Down
3 changes: 0 additions & 3 deletions docs/snippets/solid/component-story-figma-integration.ts.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,10 @@

import type { Meta, StoryObj } from 'storybook-solidjs';

import { withDesign } from 'storybook-addon-designs';

import { MyComponent } from './MyComponent';

const meta: Meta<typeof MyComponent> = {
component: MyComponent,
decorators: [withDesign],
};

export default meta;
Expand Down
3 changes: 0 additions & 3 deletions docs/snippets/svelte/component-story-figma-integration.js.mdx
Original file line number Diff line number Diff line change
@@ -1,14 +1,11 @@
```js
// MyComponent.stories.js

import { withDesign } from 'storybook-addon-designs';

import MyComponent from './MyComponent.svelte';

// More on default export: https://storybook.js.org/docs/svelte/writing-stories/introduction#default-export
export default {
component: { MyComponent },
decorators: [withDesign],
};

export const Example = {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,11 @@

import { Canvas, Meta, Story } from '@storybook/addon-docs';

import { withDesign } from 'storybook-addon-designs';

import MyComponent from './MyComponent.svelte';

<Meta
title="FigmaExample"
component={MyComponent}
decorators={[withDesign]}
/>

<!--
Expand Down
3 changes: 0 additions & 3 deletions docs/snippets/vue/component-story-figma-integration.js.mdx
Original file line number Diff line number Diff line change
@@ -1,14 +1,11 @@
```js
// MyComponent.stories.js

import { withDesign } from 'storybook-addon-designs';

import MyComponent from './MyComponent.vue';

// More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
export default {
component: MyComponent,
decorators: [withDesign],
};

export const Example = {
Expand Down
Loading

0 comments on commit f0a5f07

Please sign in to comment.