Skip to content

Commit

Permalink
feat(deps)!: migrate to Storybook 7.0 (#46)
Browse files Browse the repository at this point in the history
  • Loading branch information
rbardini authored Apr 25, 2023
1 parent 1a83a79 commit adeb64a
Show file tree
Hide file tree
Showing 56 changed files with 9,718 additions and 31,174 deletions.
49 changes: 18 additions & 31 deletions .babelrc.js
Original file line number Diff line number Diff line change
@@ -1,33 +1,20 @@
const presetEnvOptions = {
bugfixes: true,
corejs: '3',
modules: false,
shippedProposals: true,
targets: 'defaults',
useBuiltIns: 'usage',
};
module.exports = api => {
api.cache(true)

module.exports = {
assumptions: {
noDocumentAll: true,
privateFieldsAsProperties: true,
setClassMethods: true,
setComputedProperties: true,
setPublicClassFields: true,
setSpreadProperties: true,
},
env: {
cjs: {
presets: [
['@babel/preset-env', { ...presetEnvOptions, modules: 'cjs' }],
'@babel/preset-typescript',
'@babel/preset-react',
],
},
},
presets: [
['@babel/preset-env', presetEnvOptions],
'@babel/preset-typescript',
const presets = [
'@babel/preset-env',
'@babel/preset-react',
],
};
'@babel/preset-typescript',
]
const plugins = []

// Ignore CSS imports when generating snippets
if (process.env.GEN_SNIPPETS) {
plugins.push([
'babel-plugin-transform-import-ignore',
{ patterns: ['.css'] },
])
}

return { presets, plugins }
}
53 changes: 0 additions & 53 deletions .eslintrc

This file was deleted.

8 changes: 1 addition & 7 deletions .github/workflows/main.yml
Original file line number Diff line number Diff line change
Expand Up @@ -18,20 +18,14 @@ jobs:
- name: Setup Node.js
uses: actions/setup-node@v3
with:
node-version: 16
node-version: 18

- name: Install
run: npm ci

- name: Install example
run: npm i --prefix example

- name: Build
run: npm run build

- name: Lint
run: npm run lint

- name: Format-check
run: npm run format-check

Expand Down
10 changes: 6 additions & 4 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
.vscode/
dist/
node_modules/
storybook-static/
.DS_Store
.vscode
dist
node_modules
storybook-static
.env
build-storybook.log
snippets.json
7 changes: 0 additions & 7 deletions .lintstagedrc

This file was deleted.

3 changes: 3 additions & 0 deletions .lintstagedrc.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"*": "prettier --ignore-unknown --write"
}
2 changes: 1 addition & 1 deletion .nvmrc
Original file line number Diff line number Diff line change
@@ -1 +1 @@
16
18
2 changes: 2 additions & 0 deletions .prettierrc → .prettierrc.json
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
{
"arrowParens": "avoid",
"semi": false,
"singleQuote": true,
"trailingComma": "all"
}
15 changes: 15 additions & 0 deletions .storybook/local-preset.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
/**
* to load the built addon in this test Storybook
*/
function previewAnnotations(entry = []) {
return [...entry, require.resolve('../dist/preview.mjs')]
}

function managerEntries(entry = []) {
return [...entry, require.resolve('../dist/manager.mjs')]
}

module.exports = {
managerEntries,
previewAnnotations,
}
15 changes: 15 additions & 0 deletions .storybook/main.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
import type { StorybookConfig } from '@storybook/react-vite'

const config: StorybookConfig = {
stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
addons: ['./local-preset.js'],
framework: {
name: '@storybook/react-vite',
options: {},
},
docs: {
autodocs: 'tag',
},
}

export default config
6 changes: 3 additions & 3 deletions example/.storybook/manager.js → .storybook/manager.ts
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import { addons } from '@storybook/addons';
import { create } from '@storybook/theming/create';
import { addons } from '@storybook/manager-api'
import { create } from '@storybook/theming/create'

addons.setConfig({
theme: create({
base: 'light',
brandTitle: 'Storybook Playroom Addon',
}),
});
})
14 changes: 14 additions & 0 deletions .storybook/preview.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
import type { Preview } from '@storybook/react'

const preview: Preview = {
parameters: {
playroom: {
// Because Playroom is built inside Storybook on this example's deploy,
// we must define the absolute path to it when NODE_ENV is production,
// otherwise set undefined to use the default Playroom URL (localhost)
url: process.env.NODE_ENV === 'production' ? '/playroom/' : undefined,
},
},
}

export default preview
21 changes: 9 additions & 12 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
# Storybook Playroom Addon

[![npm package version](https://img.shields.io/npm/v/storybook-addon-playroom)](https://www.npmjs.com/package/storybook-addon-playroom)
[![Build status](https://img.shields.io/github/workflow/status/rbardini/storybook-addon-playroom/Main)](https://github.com/rbardini/storybook-addon-playroom/actions)
[![Build status](https://img.shields.io/github/actions/workflow/status/rbardini/storybook-addon-playroom/main.yml)](https://github.com/rbardini/storybook-addon-playroom/actions)
[![Dependencies status](https://img.shields.io/librariesio/release/npm/storybook-addon-playroom)](https://libraries.io/npm/storybook-addon-playroom)

🧩 Design with [Playroom](https://github.com/seek-oss/playroom) inside [Storybook](https://storybook.js.org), using each story source as a starting point.
Expand All @@ -18,16 +18,13 @@
npm install --save-dev storybook-addon-playroom
```

within [`.storybook/main.js`](https://storybook.js.org/docs/react/configure/overview#configure-your-storybook-project):

```js
module.exports = {
// .storybook/main.js
export default {
addons: ['storybook-addon-playroom'],
};
}
```

See [`example`](example) for a minimal working setup.

## Configuration

The addon can be configured via the `playroom` [parameter](https://storybook.js.org/docs/react/writing-stories/parameters). The following options are available:
Expand All @@ -46,7 +43,7 @@ export const parameters = {
playroom: {
url: 'http://localhost:9000',
},
};
}
```

You can also configure on per-story or per-component basis using [parameter inheritance](https://storybook.js.org/docs/react/writing-stories/parameters#component-parameters):
Expand All @@ -62,15 +59,15 @@ export default {
code: '<Button>Hello Button</Button>',
},
},
};
}

// Disable addon in Button/Large story only
export const Large = Template.bind({});
export const Large = Template.bind({})
Large.parameters = {
playroom: {
disable: true,
},
};
}
```

> **Note:** Disabling the addon does not hide the _Playroom_ tab from preview. For that, you must use Storybook's own [`previewTabs`](https://github.com/storybookjs/storybook/pull/9095) parameter:
Expand All @@ -82,7 +79,7 @@ Story.parameters = {
hidden: true,
},
},
};
}
```

## Generating Playroom snippets from stories
Expand Down
6 changes: 0 additions & 6 deletions babel.config.json

This file was deleted.

21 changes: 12 additions & 9 deletions bin/sb-playroom.js
Original file line number Diff line number Diff line change
@@ -1,21 +1,24 @@
#!/usr/bin/env node
/* eslint-disable default-param-last, global-require, @typescript-eslint/no-var-requires */
const program = require('commander');
const { version } = require('../package.json');
const program = require('commander')
const { version } = require('../package.json')

program
.command('gen-snippets [config-dir]')
.description('generate Playroom snippets from stories (experimental)')
.option('-o, --out-file <path>', 'output file', 'snippets.json')
.option('-c, --config-file <path>', 'Babel config file')
.action((configDir = '.storybook', { configFile, ...options }) => {
require('@babel/register')({ configFile, only: [new RegExp()] });
require('../dist/cjs/generateSnippets').default(configDir, options);
process.exit();
});
require('@babel/register')({
configFile,
extensions: ['.js', '.jsx', '.mjs', '.ts', '.tsx'],
only: [new RegExp()],
})
require('../dist/generateSnippets.js')(configDir, options)
process.exit()
})

program.version(version, '-v, --version').parse(process.argv);
program.version(version, '-v, --version').parse(process.argv)

if (program.rawArgs.length < 3) {
program.help();
program.help()
}
1 change: 1 addition & 0 deletions components.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export { Button } from './src/stories/Button'
10 changes: 0 additions & 10 deletions example/.eslintrc

This file was deleted.

1 change: 0 additions & 1 deletion example/.npmrc

This file was deleted.

12 changes: 0 additions & 12 deletions example/.storybook/main.js

This file was deleted.

8 changes: 0 additions & 8 deletions example/.storybook/preview.js

This file was deleted.

1 change: 0 additions & 1 deletion example/components/Button.js

This file was deleted.

1 change: 0 additions & 1 deletion example/components/Welcome.js

This file was deleted.

2 changes: 0 additions & 2 deletions example/components/index.js

This file was deleted.

Loading

0 comments on commit adeb64a

Please sign in to comment.