diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index d6c95379..0393f8ca 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -1,11 +1,7 @@
module.exports = {
root: true,
env: { browser: true, es2020: true },
- extends: [
- 'eslint:recommended',
- 'plugin:@typescript-eslint/recommended',
- 'plugin:react-hooks/recommended',
- ],
+ extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'plugin:react-hooks/recommended', 'plugin:storybook/recommended', 'plugin:storybook/recommended', 'plugin:storybook/recommended'],
ignorePatterns: ['dist', '.eslintrc.cjs'],
parser: '@typescript-eslint/parser',
plugins: ['react-refresh'],
diff --git a/.gitignore b/.gitignore
index a547bf36..bc6d3062 100644
--- a/.gitignore
+++ b/.gitignore
@@ -22,3 +22,5 @@ dist-ssr
*.njsproj
*.sln
*.sw?
+
+*storybook.log
\ No newline at end of file
diff --git a/.storybook/main.ts b/.storybook/main.ts
new file mode 100644
index 00000000..e8fc8066
--- /dev/null
+++ b/.storybook/main.ts
@@ -0,0 +1,18 @@
+import type { StorybookConfig } from "@storybook/react-vite";
+
+const config: StorybookConfig = {
+ stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+ addons: [
+ "@storybook/addon-onboarding",
+ "@storybook/addon-links",
+ "@storybook/addon-essentials",
+ "@chromatic-com/storybook",
+ "@storybook/addon-interactions",
+ "@storybook/addon-themes"
+ ],
+ framework: {
+ name: "@storybook/react-vite",
+ options: {},
+ },
+};
+export default config;
diff --git a/.storybook/preview.ts b/.storybook/preview.ts
new file mode 100644
index 00000000..d6a99c5d
--- /dev/null
+++ b/.storybook/preview.ts
@@ -0,0 +1,22 @@
+import { GlobalStyle } from './../src/styles/globalStyle';
+import type { Preview } from '@storybook/react';
+import { withThemeFromJSXProvider } from '@storybook/addon-themes';
+
+const preview: Preview = {
+ parameters: {
+ controls: {
+ matchers: {
+ color: /(background|color)$/i,
+ date: /Date$/i,
+ },
+ },
+ },
+
+ decorators: [
+ withThemeFromJSXProvider({
+ GlobalStyles: GlobalStyle,
+ }),
+ ],
+};
+
+export default preview;
diff --git a/index.html b/index.html
index c9809a9d..bf65ab99 100644
--- a/index.html
+++ b/index.html
@@ -1,12 +1,15 @@
-
-
-
- React Clean Code Payments
-
-
-
-
-
-
+
+
+
+
+ React Clean Code Payments
+
+
+
+
+
+
+
+