Setup storybook

.gitignore

@@ -193,4 +193,6 @@ $RECYCLE.BIN/
 *.msp
 
 # Windows shortcuts
-*.lnk
+*.lnk
+
+storybook-static/

.storybook/main.js

@@ -0,0 +1,25 @@
+const path = require("path");
+
+module.exports = {
+	stories: ["../src/*.stories.tsx"],
+	// Add any Storybook addons you want here: https://storybook.js.org/addons/
+	addons: [],
+	webpackFinal: async (config) => {
+		config.module.rules.push({
+			test: /\.scss$/,
+			use: ["style-loader", "css-loader", "sass-loader"],
+			include: path.resolve(__dirname, "../"),
+		});
+
+		config.module.rules.push({
+			test: /\.(ts|tsx)$/,
+			loader: require.resolve("babel-loader"),
+			options: {
+				presets: [["react-app", { flow: false, typescript: true }]],
+			},
+		});
+		config.resolve.extensions.push(".ts", ".tsx");
+
+		return config;
+	},
+};

package.json

@@ -17,8 +17,12 @@
 	"devDependencies": {
 		"@rollup/plugin-commonjs": "^17.1.0",
 		"@rollup/plugin-node-resolve": "^11.2.0",
+		"@storybook/react": "^6.1.21",
 		"@types/react": "^17.0.3",
 		"@types/react-dom": "^17.0.1",
+		"babel-loader": "^8.2.2",
+		"babel-preset-react-app": "^10.0.0",
+		"postcss": "^8.2.7",
 		"prettier": "^2.2.1",
 		"react": "^17.0.1",
 		"react-dom": "^17.0.1",
@@ -31,8 +35,10 @@
 		"typescript": "^4.2.3"
 	},
 	"scripts": {
-		"style:fix": "prettier --write src/ *.js *.ts *.json .github/",
-		"style:lint": "prettier --check src/ *.js *.ts *.json .github/",
+		"style:fix": "prettier --write src/ *.js *.ts *.json .github/ .storybook/",
+		"style:lint": "prettier --check src/ *.js *.ts *.json .github/ .storybook/",
+		"storybook:start": "start-storybook -p 6006",
+		"storybook:build": "build-storybook",
 		"build": "rollup --config"
 	},
 	"prettier": {

build/index.d.ts → src/index.stories.tsx

@@ -18,12 +18,12 @@
  * @copyright 2021 Marvin Schopf
  *
  */
-import * as React from "react";
-declare type Props = {
-    value?: string;
+
+import React from "react";
+import Hours from "./index";
+
+export default {
+	title: "Hours",
 };
-declare class Hours extends React.Component<Props> {
-    constructor(props: Props);
-    render(): any;
-}
-export default Hours;
+
+export const Primary = () => <Hours />;