Skip to content
This repository has been archived by the owner on Oct 3, 2023. It is now read-only.

Commit

Permalink
Merge pull request #150 from calmery-chan/feature/storybook
Browse files Browse the repository at this point in the history
Storybook を導入する
  • Loading branch information
calmery authored Nov 5, 2020
2 parents b2084d3 + 7bdd077 commit 3639668
Show file tree
Hide file tree
Showing 11 changed files with 4,712 additions and 214 deletions.
26 changes: 26 additions & 0 deletions .github/workflows/build-storybook.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
name: Build Storybook

on:
push:
branches:
- master

jobs:
build:
strategy:
matrix:
node-version: [14.15.0]
os: [ubuntu-latest]

runs-on: ${{ matrix.os }}

steps:
- uses: actions/checkout@v1
- uses: actions/setup-node@v1
with:
node-version: ${{ matrix.node-version }}
- run: yarn run build-storybook --no-dll
- run: |
git config --local user.email "41898282+github-actions[bot]@users.noreply.github.com"
git config --local user.name "github-actions[bot]"
- run: gh-pages -d storybook-static
3 changes: 3 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -32,3 +32,6 @@ yarn-error.log*

# vercel
.vercel

# storybook
storybook-static/
12 changes: 12 additions & 0 deletions .storybook/main.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
module.exports = {
addons: ["@storybook/addon-essentials", "@storybook/addon-links"],
stories: ["../src/**/*.stories.tsx"],
webpackFinal(config) {
config.module.rules.push({
test: /\.scss$/,
use: ["style-loader", "css-loader", "postcss-loader", "sass-loader"],
});

return config;
},
};
5 changes: 5 additions & 0 deletions .storybook/preview.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
import "../src/styles/globals.scss";

export const parameters = {
actions: { argTypesRegex: "^on[A-Z].*" },
};
16 changes: 15 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -14,26 +14,39 @@
"redux": "4.0.5"
},
"devDependencies": {
"@babel/core": "7.12.3",
"@next/bundle-analyzer": "10.0.1",
"@sentry/webpack-plugin": "1.13.0",
"@storybook/addon-actions": "6.0.28",
"@storybook/addon-essentials": "6.0.28",
"@storybook/addon-links": "6.0.28",
"@storybook/react": "6.0.28",
"@tailwindcss/custom-forms": "0.2.1",
"@types/node": "14.14.6",
"@types/react": "16.9.55",
"@types/react-redux": "7.1.11",
"@typescript-eslint/eslint-plugin": "4.6.1",
"@typescript-eslint/parser": "4.6.1",
"@vercel/node": "1.8.4",
"@zeit/next-source-maps": "0.0.4-canary.1",
"babel-loader": "8.1.0",
"css-loader": "5.0.1",
"eslint": "7.12.1",
"eslint-config-prettier": "6.15.0",
"eslint-import-resolver-custom-alias": "1.2.0",
"eslint-plugin-import": "2.22.1",
"eslint-plugin-react": "7.21.5",
"eslint-plugin-unused-imports": "1.0.0",
"gh-pages": "3.1.0",
"husky": "4.3.0",
"lint-staged": "10.5.1",
"npm-run-all": "4.1.5",
"postcss-loader": "4.0.4",
"prettier": "2.1.2",
"react-is": "17.0.1",
"sass": "1.29.0",
"sass-loader": "10.0.5",
"style-loader": "2.0.0",
"stylelint": "13.7.2",
"stylelint-config-prettier": "8.0.2",
"stylelint-config-recommended-scss": "4.2.0",
Expand All @@ -52,7 +65,8 @@
"fix:stylelint": "stylelint --fix --ignore-path .gitignore **/*.scss",
"fix:svgo": "svgo **/*.svg",
"start": "next dev",
"start:analyze": "ANALYZE=true npm start"
"start:analyze": "ANALYZE=true npm start",
"start:storybook": "start-storybook -p 6006 --no-dll"
},
"version": "0.1.0"
}
Empty file removed src/components/.keep
Empty file.
8 changes: 8 additions & 0 deletions src/components/Example.stories.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
import React from "react";
import { Example as ExampleComponent } from "./Example";

export default {
title: "Example",
};

export const Example = () => <ExampleComponent />;
101 changes: 101 additions & 0 deletions src/components/Example.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,101 @@
import React from "react";

export const Example: React.FC = () => {
return (
<div className="bg-gray-200">
<div className="flex flex-col items-center justify-center h-screen">
<div className="flex flex-col">
<label className="inline-flex items-center mt-3">
<input
type="checkbox"
className="form-checkbox h-5 w-5 text-gray-600"
checked
/>
<span className="ml-2 text-gray-700">label</span>
</label>

<label className="inline-flex items-center mt-3">
<input
type="checkbox"
className="form-checkbox h-5 w-5 text-red-600"
checked
/>
<span className="ml-2 text-gray-700">label</span>
</label>

<label className="inline-flex items-center mt-3">
<input
type="checkbox"
className="form-checkbox h-5 w-5 text-orange-600"
checked
/>
<span className="ml-2 text-gray-700">label</span>
</label>

<label className="inline-flex items-center mt-3">
<input
type="checkbox"
className="form-checkbox h-5 w-5 text-yellow-600"
checked
/>
<span className="ml-2 text-gray-700">label</span>
</label>

<label className="inline-flex items-center mt-3">
<input
type="checkbox"
className="form-checkbox h-5 w-5 text-green-600"
checked
/>
<span className="ml-2 text-gray-700">label</span>
</label>

<label className="inline-flex items-center mt-3">
<input
type="checkbox"
className="form-checkbox h-5 w-5 text-teal-600"
checked
/>
<span className="ml-2 text-gray-700">label</span>
</label>

<label className="inline-flex items-center mt-3">
<input
type="checkbox"
className="form-checkbox h-5 w-5 text-blue-600"
checked
/>
<span className="ml-2 text-gray-700">label</span>
</label>

<label className="inline-flex items-center mt-3">
<input
type="checkbox"
className="form-checkbox h-5 w-5 text-indigo-600"
checked
/>
<span className="ml-2 text-gray-700">label</span>
</label>

<label className="inline-flex items-center mt-3">
<input
type="checkbox"
className="form-checkbox h-5 w-5 text-purple-600"
checked
/>
<span className="ml-2 text-gray-700">label</span>
</label>

<label className="inline-flex items-center mt-3">
<input
type="checkbox"
className="form-checkbox h-5 w-5 text-pink-600"
checked
/>
<span className="ml-2 text-gray-700">label</span>
</label>
</div>
</div>
</div>
);
};
8 changes: 7 additions & 1 deletion src/pages/dummy.tsx
Original file line number Diff line number Diff line change
@@ -1,10 +1,16 @@
import React from "react";
import { Example } from "~/components/Example";
import { useI18n } from "~/utils/i18n";

const Dummy = () => {
const { t } = useI18n();

return <p>{t("message")}</p>;
return (
<>
<p>{t("message")}</p>
<Example />
</>
);
};

export default Dummy;
2 changes: 1 addition & 1 deletion tailwind.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -8,5 +8,5 @@ module.exports = {
extend: {},
},
variants: {},
plugins: [],
plugins: [require("@tailwindcss/custom-forms")],
};
Loading

0 comments on commit 3639668

Please sign in to comment.