Skip to content

Commit

Permalink
Merge pull request #1 from imaimai17468/fix/imaimai/storybook-bug
Browse files Browse the repository at this point in the history
storybookのバグ修正
  • Loading branch information
imaimai17468 authored Aug 18, 2023
2 parents bcd154c + 687d4b4 commit 8080680
Show file tree
Hide file tree
Showing 6 changed files with 2,355 additions and 5,489 deletions.
2 changes: 1 addition & 1 deletion .eslintrc.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ module.exports = {
browser: true,
es2021: true,
},
extends: ['plugin:react/recommended', 'prettier'],
extends: ['plugin:react/recommended', 'prettier', 'plugin:storybook/recommended'],
parser: '@typescript-eslint/parser',
parserOptions: {
ecmaFeatures: {
Expand Down
4 changes: 2 additions & 2 deletions .storybook/main.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import type { StorybookConfig } from '@storybook/react-webpack5'
import type { StorybookConfig } from '@storybook/react-vite'

const config: StorybookConfig = {
stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
Expand All @@ -9,7 +9,7 @@ const config: StorybookConfig = {
'@storybook/addon-interactions',
],
framework: {
name: '@storybook/react-webpack5',
name: '@storybook/react-vite',
options: {},
},
docs: {
Expand Down
36 changes: 20 additions & 16 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -6,42 +6,46 @@
"author": "[author]",
"license": "MIT",
"dependencies": {
"@emotion/react": "^11.7.1",
"@emotion/styled": "^11.6.0",
"@rollup/plugin-typescript": "8.3.3",
"react": "^17.0.2",
"react-dom": "^17.0.2"
"react": "^18.2.0",
"react-dom": "^18.2.0",
"vite": "^4.4.9"
},
"devDependencies": {
"@babel/core": "^7.17.4",
"@rollup/plugin-commonjs": "^21.0.1",
"@storybook/addon-actions": "^6.4.19",
"@storybook/addon-essentials": "^6.4.19",
"@storybook/addon-interactions": "^6.4.19",
"@storybook/addon-links": "^6.4.19",
"@storybook/react": "^6.4.19",
"@storybook/testing-library": "^0.0.9",
"@storybook/addon-essentials": "^7.3.2",
"@storybook/addon-interactions": "^7.3.2",
"@storybook/addon-links": "^7.3.2",
"@storybook/addon-onboarding": "^1.0.8",
"@storybook/blocks": "^7.3.2",
"@storybook/react": "^7.3.2",
"@storybook/react-vite": "^7.3.2",
"@storybook/testing-library": "^0.2.0",
"@types/css-modules": "^1.0.2",
"@types/react": "^17.0.39",
"@typescript-eslint/parser": "^6.4.0",
"babel-loader": "^8.2.3",
"eslint": "^8.9.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-react": "^7.33.2",
"eslint-plugin-storybook": "^0.6.13",
"postcss": "^8.4.28",
"postcss-loader": "^7.3.3",
"prettier": "^2.5.1",
"rollup": "^2.67.2",
"rollup-plugin-dts": "^4.1.0",
"rollup-plugin-postcss": "^4.0.2",
"storybook": "^7.3.2",
"tslib": "^2.3.1",
"typescript": "^4.5.5"
},
"resolutions": {
"jackspeak": "2.1.1"
},
"peerDependencies": {
"@emotion/react": "^11.0.0",
"@emotion/styled": "^11.6.0",
"react": "^16.13.1",
"react-dom": "^16.13.1"
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"files": [
"package.json",
Expand All @@ -54,7 +58,7 @@
"build": "rollup -c",
"lint": "eslint --ext ts,tsx .",
"format": "prettier --write .",
"storybook": "start-storybook -p 6006",
"build-storybook": "build-storybook"
"storybook": "storybook dev -p 6006",
"build-storybook": "storybook build"
}
}
9 changes: 9 additions & 0 deletions src/components/AudioVisualizer/AudioVisualizer.module.css
Original file line number Diff line number Diff line change
Expand Up @@ -11,3 +11,12 @@
border: 1px solid #ccc;
border-radius: 5px;
}

.story-container-full {
width: 100%;
height: 100px;
background-color: #fff;
padding: 5px;
border: 1px solid #ccc;
border-radius: 5px;
}
33 changes: 23 additions & 10 deletions src/components/AudioVisualizer/AudioVisualizer.stories.tsx
Original file line number Diff line number Diff line change
@@ -1,18 +1,31 @@
import React from 'react'
import { ComponentStory, ComponentMeta } from '@storybook/react'
import { Meta, StoryObj } from '@storybook/react'
import AudioVisualizer from './AudioVisualizer'
import styles from './AudioVisualizer.module.css'

export default {
title: 'components/AudioVisualizer',
const meta: Meta<typeof AudioVisualizer> = {
title: 'common/AudioVisualizer',
component: AudioVisualizer,
tags: ['autodocs'],
argTypes: {},
} as ComponentMeta<typeof AudioVisualizer>
}
export default meta
type Story = StoryObj<typeof AudioVisualizer>

const Template: ComponentStory<typeof AudioVisualizer> = () => (
<div className={styles['story-container']}>
<AudioVisualizer />
</div>
)
export const Default: Story = {
args: {},
render: () => (
<div className={styles['story-container-full']}>
<AudioVisualizer />
</div>
),
}

export const Default = Template.bind({})
export const FixedWidth: Story = {
args: {},
render: () => (
<div className={styles['story-container']}>
<AudioVisualizer />
</div>
),
}
Loading

0 comments on commit 8080680

Please sign in to comment.