Feat(UI): Storybook is added (#456)

* feat(storybook): storybook is added

* spinner story is added

* package.json is updated

frontend/.storybook/main.js

@@ -0,0 +1,11 @@
+module.exports = {
+  "stories": [
+    "../src/**/*.stories.mdx",
+    "../src/**/*.stories.@(js|jsx|ts|tsx)"
+  ],
+  "addons": [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials"
+  ],
+  "framework": "@storybook/react"
+}

frontend/.storybook/preview.js

@@ -0,0 +1,11 @@
+import '../public/css/antd.min.css';
+
+export const parameters = {
+	actions: { argTypesRegex: '^on[A-Z].*' },
+	controls: {
+		matchers: {
+			color: /(background|color)$/i,
+			date: /Date$/,
+		},
+	},
+};

frontend/package.json

@@ -14,7 +14,9 @@
 		"jest": "jest",
 		"jest:coverage": "jest --coverage",
 		"jest:watch": "jest --watch",
-		"bundle:size": "bundlesize"
+		"bundle:size": "bundlesize",
+		"storybook": "start-storybook -p 6006",
+		"build-storybook": "build-storybook"
 	},
 	"engines": {
 		"node": ">=12.13.0"
@@ -88,6 +90,11 @@
 		"@babel/preset-env": "^7.12.17",
 		"@babel/preset-react": "^7.12.13",
 		"@babel/preset-typescript": "^7.12.17",
+		"@storybook/addon-actions": "^6.4.7",
+		"@storybook/addon-essentials": "^6.4.7",
+		"@storybook/addon-links": "^6.4.7",
+		"@storybook/cli": "^6.4.7",
+		"@storybook/react": "^6.4.7",
 		"@testing-library/cypress": "^8.0.0",
 		"@types/compression-webpack-plugin": "^9.0.0",
 		"@types/copy-webpack-plugin": "^8.0.1",

frontend/src/stories/Spinner.stories.tsx

@@ -0,0 +1,21 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import React from 'react';
+
+import Spinner from '../components/Spinner';
+
+export default {
+	title: 'Components/Common',
+	component: Spinner,
+} as ComponentMeta<typeof Spinner>;
+
+const Template: ComponentStory<typeof Spinner> = (args) => (
+	<Spinner {...args} />
+);
+
+export const DefaultSpinner = Template.bind({});
+
+DefaultSpinner.args = {
+	tip: 'Loading...',
+	size: 'default',
+	height: '40vh',
+};