Skip to content

Commit da8a26e

Browse files
Added: Button storybook and Box component
1 parent 3642a0e commit da8a26e

26 files changed

+12731
-11502
lines changed

.storybook/main.js

+14-3
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,19 @@
11
module.exports = {
2-
stories: ['../stories/**/*.stories.@(ts|tsx|js|jsx)'],
3-
addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
2+
stories: [
3+
'../stories/**/*.stories.mdx',
4+
'../stories/**/*.stories.@(ts|tsx|js|jsx)',
5+
],
6+
addons: [
7+
'@storybook/addon-links',
8+
'@storybook/addon-essentials',
9+
'@storybook/addon-a11y',
10+
'@storybook/addon-docs',
11+
],
412
// https://storybook.js.org/docs/react/configure/typescript#mainjs-configuration
513
typescript: {
614
check: true, // type-check stories during Storybook build
7-
}
15+
},
16+
features: {
17+
previewMdx2: true, // 👈 MDX 2 enabled here
18+
},
819
};

example/index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,6 @@
99

1010
<body>
1111
<div id="root"></div>
12-
<script src="./index.tsx" type="module"></script>
12+
<script src="./src/index.tsx" type="module"></script>
1313
</body>
1414
</html>

example/index.tsx

-17
This file was deleted.

example/package-lock.json

+138-7
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

example/package.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,8 @@
1919
"@types/react": "^16.9.11",
2020
"@types/react-dom": "^16.8.4",
2121
"parcel": "^2.7.0",
22-
"typescript": "^3.4.5"
22+
"tsconfig-paths-webpack-plugin": "^4.0.0",
23+
"typescript": "^4.8.4"
2324
},
2425
"resolutions": {
2526
"@babel/preset-env": "7.13.8"

example/src/index.tsx

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import 'react-app-polyfill/ie11';
2+
import * as React from 'react';
3+
import * as ReactDOM from 'react-dom';
4+
import { Thing, Button } from '../../src';
5+
6+
const App = () => {
7+
const btnRef = React.useRef<HTMLButtonElement | null>(null);
8+
const handleOnClick = () => {
9+
console.log(btnRef.current);
10+
};
11+
return (
12+
<div>
13+
<Thing />
14+
<Button
15+
ref={btnRef}
16+
size="lg"
17+
data-att="dataset"
18+
disabled={false}
19+
variant="secondary"
20+
onClick={handleOnClick}
21+
// onMouseLeave={() => console.log('mouse leave')}
22+
>
23+
click me!
24+
</Button>
25+
<button
26+
data-toggle="collapse"
27+
// onMouseEnter={() => console.log('mouse enter')}
28+
// onClick={handleOnClick}
29+
// onMouseLeave={() => console.log('mouse leave')}
30+
>
31+
original button
32+
</button>
33+
</div>
34+
);
35+
};
36+
// const root = ReactDOM.createRoot(document.getElementById('root'));
37+
38+
ReactDOM.render(<App />, document.getElementById('root'));

example/tsconfig.json

+5-1
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,10 @@
1313
"preserveConstEnums": true,
1414
"sourceMap": true,
1515
"lib": ["es2015", "es2016", "dom"],
16-
"types": ["node"]
16+
"types": ["node"],
17+
//custom ts config
18+
"paths": {
19+
"@components/*": ["../src/*", "./src"]
20+
}
1721
}
1822
}

example/webpack.config.js

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
2+
module.exports = {
3+
//other rules
4+
resolve: {
5+
plugins: [new TsconfigPathsPlugin()],
6+
},
7+
};

0 commit comments

Comments
 (0)