feat: docs (#9)

- updated dependencies

docs/.babelrc

@@ -2,13 +2,7 @@
 	"plugins": ["@emotion/babel-plugin"],
 	"presets": [
 		"@babel/preset-env",
-		[
-			"@babel/preset-typescript",
-			{
-				"onlyRemoveTypeImports": true,
-				"allExtensions": true,
-				"isTSX": true
-			}
-		]
+		"@babel/preset-typescript",
+		["@babel/preset-react", { "runtime": "automatic" }]
 	]
 }

docs/.gitignore

@@ -0,0 +1,5 @@
+node_modules
+storybook-static
+yarn.lock
+
+*storybook.log

docs/.storybook/main.ts

@@ -1,11 +1,12 @@
 import type { StorybookConfig } from '@storybook/react-webpack5'
 
 const config: StorybookConfig = {
-	stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+	stories: ['../src/**/*.mdx', '../src/**/*.stories.@(ts|tsx)'],
 	addons: [
 		'@storybook/addon-links',
 		'@storybook/addon-essentials',
-		'@storybook/addon-interactions'
+		'@storybook/addon-interactions',
+		'@storybook/addon-webpack5-compiler-babel'
 	],
 	framework: {
 		name: '@storybook/react-webpack5',

docs/.storybook/preview.tsx

@@ -1,26 +1,25 @@
 import { StrictMode } from 'react'
-import type { Preview } from '@storybook/react'
+import type { Preview, Decorator } from '@storybook/react'
 
-export const decorators = [
+export const decorators: Decorator[] = [
 	Story => (
 		<StrictMode>
 			<div style={{ padding: 10 }}>
 				<Story />
 			</div>
 		</StrictMode>
 	)
-];
+]
 
 const preview: Preview = {
 	parameters: {
-		actions: { argTypesRegex: "^on[A-Z].*" },
 		controls: {
 			matchers: {
 				color: /(background|color)$/i,
-				date: /Date$/
+				date: /Date$/i
 			}
 		}
 	}
-};
+}
 
-export default preview;
+export default preview

docs/package.json

@@ -1,35 +1,38 @@
 {
-	"name": "docs",
-	"version": "0.0.0",
-	"scripts": {
-		"deploy": "gh-pages -d storybook-static",
-		"format": "prettier --write \"src/**/*.{ts,tsx}\"",
-		"build-storybook": "storybook build",
-		"storybook": "storybook dev -p 6006"
-	},
-	"dependencies": {
-		"@emotion/react": "^11.11.1",
-		"@emotion/styled": "^11.11.0",
-		"react": "^18.2.0",
-		"react-dom": "^18.2.0",
-		"react-router-dom": "^6.16.0",
-		"transitions-kit": "^1.2.2"
-	},
-	"devDependencies": {
-		"@babel/core": "^7.22.20",
-		"@babel/preset-env": "^7.22.20",
-		"@storybook/addon-essentials": "^7.4.3",
-		"@storybook/addon-interactions": "^7.4.3",
-		"@storybook/addon-links": "^7.4.3",
-		"@storybook/blocks": "^7.4.3",
-		"@storybook/react": "^7.4.3",
-		"@storybook/react-webpack5": "^7.4.3",
-		"@storybook/testing-library": "^0.2.1",
-		"@types/react": "^18.2.22",
-		"babel-loader": "^9.1.3",
-		"gh-pages": "^6.0.0",
-		"prettier": "^3.0.3",
-		"storybook": "^7.4.3",
-		"typescript": "^5.2.2"
-	}
+  "name": "docs",
+  "version": "0.0.0",
+  "scripts": {
+    "deploy": "gh-pages -d storybook-static",
+    "format": "prettier --write \"src/**/*.{ts,tsx}\"",
+    "build-storybook": "storybook build",
+    "storybook": "storybook dev -p 6006"
+  },
+  "dependencies": {
+    "@emotion/react": "^11.11.4",
+    "@emotion/styled": "^11.11.5",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.22.3",
+    "transitions-kit": "^1.2.3"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.24.3",
+    "@babel/preset-env": "^7.24.3",
+    "@babel/preset-react": "^7.24.1",
+    "@storybook/addon-essentials": "^8.0.5",
+    "@storybook/addon-interactions": "^8.0.5",
+    "@storybook/addon-links": "^8.0.5",
+    "@storybook/addon-webpack5-compiler-babel": "^3.0.3",
+    "@storybook/blocks": "^8.0.5",
+    "@storybook/builder-webpack5": "^8.0.5",
+    "@storybook/react": "^8.0.5",
+    "@storybook/react-webpack5": "^8.0.5",
+    "@storybook/test": "^8.0.5",
+    "@types/react": "^18.2.74",
+    "babel-loader": "^9.1.3",
+    "gh-pages": "^6.1.1",
+    "prettier": "^3.2.5",
+    "storybook": "^8.0.5",
+    "typescript": "^5.4.3"
+  }
 }

docs/src/components/@shared/collapse/styles.tsx

@@ -9,7 +9,9 @@ export const Box = styled.div`
 	border-radius: 5px;
 	background: #7f7f7f;
 	box-sizing: border-box;
-	box-shadow: rgba(50, 50, 93, 0.25) 0 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
+	box-shadow:
+		rgba(50, 50, 93, 0.25) 0 6px 12px -2px,
+		rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
 	position: relative;
 `
 
@@ -24,7 +26,8 @@ const Svg = styled.svg`
 	width: 100%;
 	height: 100%;
 	fill: #cec6e4;
-	box-shadow: rgba(50, 50, 93, 0.25) 0 30px 60px -12px inset,
+	box-shadow:
+		rgba(50, 50, 93, 0.25) 0 30px 60px -12px inset,
 		rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
 `