Skip to content

Commit 6a20ac6

Browse files
abernierabernier
committed
sb init
1 parent 49768e1 commit 6a20ac6

24 files changed

+6361
-109
lines changed

‎.babelrc.json‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
{
2+
"sourceType": "unambiguous",
3+
"presets": [
4+
[
5+
"@babel/preset-env",
6+
{
7+
"targets": {
8+
"chrome": 100
9+
}
10+
}
11+
],
12+
"@babel/preset-typescript",
13+
"@babel/preset-react"
14+
],
15+
"plugins": []
16+
}

‎.eslintrc.json‎

Lines changed: 73 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,16 @@
1010
"plugin:prettier/recommended",
1111
"plugin:react-hooks/recommended",
1212
"plugin:import/errors",
13-
"plugin:import/warnings"
13+
"plugin:import/warnings",
14+
"plugin:storybook/recommended"
15+
],
16+
"plugins": [
17+
"@typescript-eslint",
18+
"react",
19+
"prettier",
20+
"react-hooks",
21+
"import"
1422
],
15-
"plugins": ["@typescript-eslint", "react", "prettier", "react-hooks", "import"],
1623
"parser": "@typescript-eslint/parser",
1724
"parserOptions": {
1825
"ecmaVersion": 2018,
@@ -21,20 +28,40 @@
2128
"jsx": true
2229
},
2330
"rules": {
24-
"curly": ["warn", "multi-line", "consistent"],
31+
"curly": [
32+
"warn",
33+
"multi-line",
34+
"consistent"
35+
],
2536
"no-console": "off",
2637
"no-empty-pattern": "warn",
2738
"no-duplicate-imports": "error",
28-
"import/no-unresolved": ["error", { "commonjs": true, "amd": true }],
39+
"import/no-unresolved": [
40+
"error",
41+
{
42+
"commonjs": true,
43+
"amd": true
44+
}
45+
],
2946
"import/export": "error",
30-
// https://github.com/typescript-eslint/typescript-eslint/blob/master/docs/getting-started/linting/FAQ.md#eslint-plugin-import
31-
// We recommend you do not use the following import/* rules, as TypeScript provides the same checks as part of standard type checking:
3247
"import/named": "off",
3348
"import/namespace": "off",
3449
"import/default": "off",
3550
"@typescript-eslint/explicit-module-boundary-types": "off",
36-
"no-unused-vars": ["warn", { "argsIgnorePattern": "^_", "varsIgnorePattern": "^_" }],
37-
"@typescript-eslint/no-unused-vars": ["warn", { "argsIgnorePattern": "^_", "varsIgnorePattern": "^_" }],
51+
"no-unused-vars": [
52+
"warn",
53+
{
54+
"argsIgnorePattern": "^_",
55+
"varsIgnorePattern": "^_"
56+
}
57+
],
58+
"@typescript-eslint/no-unused-vars": [
59+
"warn",
60+
{
61+
"argsIgnorePattern": "^_",
62+
"varsIgnorePattern": "^_"
63+
}
64+
],
3865
"@typescript-eslint/no-use-before-define": "off",
3966
"@typescript-eslint/no-empty-function": "off",
4067
"@typescript-eslint/no-empty-interface": "off",
@@ -45,24 +72,55 @@
4572
"react": {
4673
"version": "detect"
4774
},
48-
"import/extensions": [".js", ".jsx", ".ts", ".tsx"],
75+
"import/extensions": [
76+
".js",
77+
".jsx",
78+
".ts",
79+
".tsx"
80+
],
4981
"import/parsers": {
50-
"@typescript-eslint/parser": [".js", ".jsx", ".ts", ".tsx"]
82+
"@typescript-eslint/parser": [
83+
".js",
84+
".jsx",
85+
".ts",
86+
".tsx"
87+
]
5188
},
5289
"import/resolver": {
5390
"node": {
54-
"extensions": [".js", ".jsx", ".ts", ".tsx", ".json"],
55-
"paths": ["src"]
91+
"extensions": [
92+
".js",
93+
".jsx",
94+
".ts",
95+
".tsx",
96+
".json"
97+
],
98+
"paths": [
99+
"src"
100+
]
56101
},
57102
"alias": {
58-
"extensions": [".js", ".jsx", ".ts", ".tsx", ".json"],
59-
"map": [["@react-three/postprocessing", "./src/index.tsx"]]
103+
"extensions": [
104+
".js",
105+
".jsx",
106+
".ts",
107+
".tsx",
108+
".json"
109+
],
110+
"map": [
111+
[
112+
"@react-three/postprocessing",
113+
"./src/index.tsx"
114+
]
115+
]
60116
}
61117
}
62118
},
63119
"overrides": [
64120
{
65-
"files": ["src"],
121+
"files": [
122+
"src"
123+
],
66124
"parserOptions": {
67125
"project": "./tsconfig.json"
68126
}

‎.storybook/main.ts‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import type { StorybookConfig } from '@storybook/react-webpack5'
2+
const config: StorybookConfig = {
3+
stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
4+
addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-interactions'],
5+
framework: {
6+
name: '@storybook/react-webpack5',
7+
options: {},
8+
},
9+
docs: {
10+
autodocs: 'tag',
11+
},
12+
}
13+
export default config

‎.storybook/preview.ts‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import type { Preview } from '@storybook/react'
2+
3+
const preview: Preview = {
4+
parameters: {
5+
actions: { argTypesRegex: '^on[A-Z].*' },
6+
controls: {
7+
matchers: {
8+
color: /(background|color)$/i,
9+
date: /Date$/,
10+
},
11+
},
12+
},
13+
}
14+
15+
export default preview

‎package.json‎

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,9 @@
4242
"test": "echo no tests yet",
4343
"typecheck": "tsc --noEmit --emitDeclarationOnly false --strict --jsx react",
4444
"typegen": "tsc --emitDeclarationOnly || true",
45-
"release": "semantic-release"
45+
"release": "semantic-release",
46+
"storybook": "storybook dev -p 6006",
47+
"build-storybook": "storybook build"
4648
},
4749
"dependencies": {
4850
"maath": "^0.5.3",
@@ -51,10 +53,20 @@
5153
"three-stdlib": "^2.21.10"
5254
},
5355
"devDependencies": {
56+
"@babel/preset-env": "^7.21.5",
57+
"@babel/preset-react": "^7.18.6",
58+
"@babel/preset-typescript": "^7.21.5",
5459
"@react-three/fiber": "^8.13.0",
5560
"@rollup/plugin-commonjs": "^24.1.0",
5661
"@rollup/plugin-node-resolve": "^15.0.2",
5762
"@rollup/plugin-typescript": "^11.1.0",
63+
"@storybook/addon-essentials": "^7.0.10",
64+
"@storybook/addon-interactions": "^7.0.10",
65+
"@storybook/addon-links": "^7.0.10",
66+
"@storybook/blocks": "^7.0.10",
67+
"@storybook/react": "^7.0.10",
68+
"@storybook/react-webpack5": "^7.0.10",
69+
"@storybook/testing-library": "^0.0.14-next.2",
5870
"@types/react": "^18.2.0",
5971
"@types/react-dom": "^18.2.1",
6072
"@types/three": "^0.150.2",
@@ -67,15 +79,18 @@
6779
"eslint-plugin-prettier": "^4.2.1",
6880
"eslint-plugin-react": "^7.32.2",
6981
"eslint-plugin-react-hooks": "^4.6.0",
82+
"eslint-plugin-storybook": "^0.6.12",
7083
"husky": "^8.0.3",
7184
"lint-staged": "^13.2.2",
7285
"prettier": "^2.8.8",
86+
"prop-types": "^15.8.1",
7387
"react": "^18.2.0",
7488
"react-dom": "^18.2.0",
7589
"rimraf": "^5.0.0",
7690
"rollup": "^3.21.0",
7791
"rollup-plugin-filesize": "^10.0.0",
7892
"semantic-release": "^21.0.2",
93+
"storybook": "^7.0.10",
7994
"three": "^0.151.3",
8095
"typescript": "^5.0.4"
8196
},

‎src/stories/Button.stories.ts‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import type { Meta, StoryObj } from '@storybook/react';
2+
3+
import { Button } from './Button';
4+
5+
// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
6+
const meta = {
7+
title: 'Example/Button',
8+
component: Button,
9+
tags: ['autodocs'],
10+
argTypes: {
11+
backgroundColor: { control: 'color' },
12+
},
13+
} satisfies Meta<typeof Button>;
14+
15+
export default meta;
16+
type Story = StoryObj<typeof meta>;
17+
18+
// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
19+
export const Primary: Story = {
20+
args: {
21+
primary: true,
22+
label: 'Button',
23+
},
24+
};
25+
26+
export const Secondary: Story = {
27+
args: {
28+
label: 'Button',
29+
},
30+
};
31+
32+
export const Large: Story = {
33+
args: {
34+
size: 'large',
35+
label: 'Button',
36+
},
37+
};
38+
39+
export const Small: Story = {
40+
args: {
41+
size: 'small',
42+
label: 'Button',
43+
},
44+
};

‎src/stories/Button.tsx‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
import React from 'react';
2+
import './button.css';
3+
4+
interface ButtonProps {
5+
/**
6+
* Is this the principal call to action on the page?
7+
*/
8+
primary?: boolean;
9+
/**
10+
* What background color to use
11+
*/
12+
backgroundColor?: string;
13+
/**
14+
* How large should the button be?
15+
*/
16+
size?: 'small' | 'medium' | 'large';
17+
/**
18+
* Button contents
19+
*/
20+
label: string;
21+
/**
22+
* Optional click handler
23+
*/
24+
onClick?: () => void;
25+
}
26+
27+
/**
28+
* Primary UI component for user interaction
29+
*/
30+
export const Button = ({
31+
primary = false,
32+
size = 'medium',
33+
backgroundColor,
34+
label,
35+
...props
36+
}: ButtonProps) => {
37+
const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
38+
return (
39+
<button
40+
type="button"
41+
className={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
42+
style={{ backgroundColor }}
43+
{...props}
44+
>
45+
{label}
46+
</button>
47+
);
48+
};

‎src/stories/Header.stories.ts‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import type { Meta, StoryObj } from '@storybook/react';
2+
import { Header } from './Header';
3+
4+
const meta = {
5+
title: 'Example/Header',
6+
component: Header,
7+
// This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/react/writing-docs/autodocs
8+
tags: ['autodocs'],
9+
parameters: {
10+
// More on how to position stories at: https://storybook.js.org/docs/react/configure/story-layout
11+
layout: 'fullscreen',
12+
},
13+
} satisfies Meta<typeof Header>;
14+
15+
export default meta;
16+
type Story = StoryObj<typeof meta>;
17+
18+
export const LoggedIn: Story = {
19+
args: {
20+
user: {
21+
name: 'Jane Doe',
22+
},
23+
},
24+
};
25+
26+
export const LoggedOut: Story = {};

0 commit comments

Comments
 (0)