Let's improve the functions and organize the next step to

.chromatic

@@ -0,0 +1 @@
+token=chpt_bdbc00ff04a5003

.eslintrc.cjs

@@ -0,0 +1,17 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parser: '@typescript-eslint/parser',
+  plugins: ["react", "prettier"],
+  rules: {
+    'no-extra-boolean-cast': ["warn", {"enforceForLogicalOperands": true}],
+    '@typescript-eslint/no-explicit-any': ["warn"],
+    '@typescript-eslint/no-unused-vars': ["warn"],
+  },
+}

.gitignore

@@ -32,3 +32,10 @@ yarn-error.log*
 
 # storybook
 storybook-static
+
+.idea
+.vscode
+.yarn
+build-storybook
+
+*storybook.log

.npmignore

@@ -0,0 +1,6 @@
+src
+__tests__
+jest.config.js
+tsconfig.json
+.eslintrc.js
+.prettierrc

.storybook/main.ts

@@ -0,0 +1,27 @@
+import type { StorybookConfig } from "@storybook/react-vite";
+import { withoutVitePlugins } from "@storybook/builder-vite";
+
+const config: StorybookConfig = {
+  stories: ["../stories/*.mdx", "../stories/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  addons: [
+    "@storybook/addon-onboarding",
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@chromatic-com/storybook",
+    "@storybook/addon-interactions",
+  ],
+  framework: {
+    name: "@storybook/react-vite",
+    options: {},
+  },
+  async viteFinal(config) {
+    return {
+      ...config,
+      plugins: await withoutVitePlugins(config.plugins, ["peer-deps-external"]),
+    };
+  },
+  docs: {
+    autodocs: "tag",
+  },
+};
+export default config;

.storybook/preview.ts

@@ -0,0 +1,14 @@
+import type { Preview } from "@storybook/react";
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;