Skip to content

Commit

Permalink
chore: upgrade to storybook v8 (#101)
Browse files Browse the repository at this point in the history 
* chore(deps): update storybook monorepo to v8

* remove react

* update

---------

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Tobias Diez <[email protected]>
  • Loading branch information
@renovate @tobiasdiez
renovate[bot] and tobiasdiez authored Aug 14, 2024
1 parent 9f29587 commit 96984bc
Show file tree
Hide file tree
Showing 21 changed files with 2,254 additions and 4,469 deletions.
9 changes: 9 additions & 0 deletions examples/vite/.storybook/main.ts
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,29 @@
import Inspect from 'vite-plugin-inspect'
export default {
stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx|vue)'],

addons: [
'@storybook/addon-links',
'@storybook/addon-essentials',
'@storybook/addon-interactions',
'storybook-vue-addon',
'@storybook/addon-mdx-gfm',
],

framework: {
name: '@storybook/vue3-vite',
options: {},
},

features: {},

async viteFinal(config, { _configType }) {
// Inspect result can be found at subroute '/__inspect', e.g. http://127.0.0.1:6006/__inspect/
config.plugins.unshift(Inspect())
return config
},

docs: {
autodocs: true,
},
}
1 change: 0 additions & 1 deletion examples/vite/.storybook/preview.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
export const parameters = {
actions: { argTypesRegex: '^on[A-Z].*' },
controls: {
matchers: {
color: /(background|color)$/i,
Expand Down
23 changes: 11 additions & 12 deletions examples/vite/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,23 +15,22 @@
},
"devDependencies": {
"@babel/core": "7.25.2",
"@storybook/addon-actions": "7.4.6",
"@storybook/addon-essentials": "7.4.6",
"@storybook/addon-interactions": "7.4.6",
"storybook-vue-addon": "workspace:*",
"@storybook/addon-links": "7.4.6",
"@storybook/jest": "0.2.3",
"@storybook/testing-library": "0.2.2",
"@storybook/vue3": "7.4.6",
"@storybook/vue3-vite": "7.4.6",
"@storybook/addon-actions": "8.2.9",
"@storybook/addon-essentials": "8.2.9",
"@storybook/addon-interactions": "8.2.9",
"@storybook/addon-links": "8.2.9",
"@storybook/addon-mdx-gfm": "8.2.9",
"@storybook/blocks": "8.2.9",
"@storybook/test": "8.2.9",
"@storybook/vue3": "8.2.9",
"@storybook/vue3-vite": "8.2.9",
"@types/node": "20.8.7",
"@vitejs/plugin-vue": "5.1.2",
"@vue/tsconfig": "0.4.0",
"babel-loader": "9.1.3",
"npm-run-all2": "6.2.2",
"react": "18.2.0",
"react-dom": "18.2.0",
"storybook": "7.4.6",
"storybook": "8.2.9",
"storybook-vue-addon": "workspace:*",
"typescript": "5.2.2",
"vite": "5.3.5",
"vue-loader": "17.3.0",
Expand Down
217 changes: 217 additions & 0 deletions examples/vite/src/components/Introduction.mdx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,217 @@
import { Meta } from '@storybook/blocks'
import Code from '../assets/code-brackets.svg'
import Colors from '../assets/colors.svg'
import Comments from '../assets/comments.svg'
import Direction from '../assets/direction.svg'
import Flow from '../assets/flow.svg'
import Plugin from '../assets/plugin.svg'
import Repo from '../assets/repo.svg'
import StackAlt from '../assets/stackalt.svg'

<Meta title="Example/Introduction" />

<style>
{`
.subheading {
--mediumdark: '#999999';
font-weight: 900;
font-size: 13px;
color: #999;
letter-spacing: 6px;
line-height: 24px;
text-transform: uppercase;
margin-bottom: 12px;
margin-top: 40px;
}
.link-list {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr;
row-gap: 10px;
}
@media (min-width: 620px) {
.link-list {
row-gap: 20px;
column-gap: 20px;
grid-template-columns: 1fr 1fr;
}
}
@media all and (-ms-high-contrast:none) {
.link-list {
display: -ms-grid;
-ms-grid-columns: 1fr 1fr;
-ms-grid-rows: 1fr 1fr;
}
}
.link-item {
display: block;
padding: 20px 30px 20px 15px;
border: 1px solid #00000010;
border-radius: 5px;
transition: background 150ms ease-out, border 150ms ease-out, transform 150ms ease-out;
color: #333333;
display: flex;
align-items: flex-start;
}
.link-item:hover {
border-color: #1EA7FD50;
transform: translate3d(0, -3px, 0);
box-shadow: rgba(0, 0, 0, 0.08) 0 3px 10px 0;
}
.link-item:active {
border-color: #1EA7FD;
transform: translate3d(0, 0, 0);
}
.link-item strong {
font-weight: 700;
display: block;
margin-bottom: 2px;
}
.link-item img {
height: 40px;
width: 40px;
margin-right: 15px;
flex: none;
}
.link-item span {
font-size: 14px;
line-height: 20px;
}
.tip {
display: inline-block;
border-radius: 1em;
font-size: 11px;
line-height: 12px;
font-weight: 700;
background: #E7FDD8;
color: #66BF3C;
padding: 4px 12px;
margin-right: 10px;
vertical-align: top;
}
.tip-wrapper {
font-size: 13px;
line-height: 20px;
margin-top: 40px;
margin-bottom: 40px;
}
.tip-wrapper code {
font-size: 12px;
display: inline-block;
}
`}
</style>

# Welcome to Storybook

Storybook helps you build UI components in isolation from your app's business logic, data, and context.
That makes it easy to develop hard-to-reach states. Save these UI states as **stories** to revisit during development, testing, or QA.

Browse example stories now by navigating to them in the sidebar.
View their code in the `stories` directory to learn how they work.
We recommend building UIs with a [**component-driven**](https://componentdriven.org) process starting with atomic components and ending with pages.

<div className="subheading">Configure</div>

<div className="link-list">
<a className="link-item" href="https://storybook.js.org/docs/react/addons/addon-types" target="_blank">
<img src={Plugin} alt="plugin" />

<span>
<strong>Presets for popular tools</strong>
Easy setup for TypeScript, SCSS and more.
</span>

</a>

<a className="link-item" href="https://storybook.js.org/docs/react/configure/webpack" target="_blank">
<img src={StackAlt} alt="Build" />

<span>
<strong>Build configuration</strong>
How to customize webpack and Babel
</span>

</a>

<a className="link-item" href="https://storybook.js.org/docs/react/configure/styling-and-css" target="_blank">
<img src={Colors} alt="colors" />

<span>
<strong>Styling</strong>
How to load and configure CSS libraries
</span>

</a>

<a className="link-item" href="https://storybook.js.org/docs/react/get-started/setup#configure-storybook-for-your-stack" target="_blank">
<img src={Flow} alt="flow" />

<span>
<strong>Data</strong>
Providers and mocking for data libraries
</span>

</a>
</div>

<div className="subheading">Learn</div>

<div className="link-list">
<a className="link-item" href="https://storybook.js.org/docs" target="_blank">
<img src={Repo} alt="repo" />

<span>
<strong>Storybook documentation</strong>
Configure, customize, and extend
</span>

</a>

<a className="link-item" href="https://storybook.js.org/tutorials/" target="_blank">
<img src={Direction} alt="direction" />

<span>
<strong>In-depth guides</strong>
Best practices from leading teams
</span>

</a>

<a className="link-item" href="https://github.com/storybookjs/storybook" target="_blank">
<img src={Code} alt="code" />

<span>
<strong>GitHub project</strong>
View the source and add issues
</span>

</a>

<a className="link-item" href="https://discord.gg/storybook" target="_blank">
<img src={Comments} alt="comments" />

<span>
<strong>Discord chat</strong>
Chat with maintainers and the community
</span>

</a>
</div>

<div className="tip-wrapper">
<span className="tip">Tip</span>Edit the Markdown in{' '}
<code>stories/Introduction.stories.mdx</code>
</div>
Loading

0 comments on commit 96984bc

Please sign in to comment.