Fix storybook theme

.storybook/main.js

@@ -17,4 +17,10 @@ module.exports = {
   features: {
     emotionAlias: false,
   },
+  core: {
+    builder: 'webpack5',
+  },
+  refs: {
+    // '@chakra-ui/react': { disable: true }, // Enable this if you want to hide chakra UI vender storybook
+  },
 }

.storybook/preview.js

@@ -1,9 +1,8 @@
-const theme = require('../src/theme')
+import { ChakraProvider } from '@chakra-ui/react';
+import { theme } from "./../src/theme.js"
 
 export const parameters = {
-  chakra: {
-    theme,
-  },
+  chakra: { theme },
   actions: { argTypesRegex: "^on[A-Z].*" },
   controls: {
     matchers: {
@@ -12,3 +11,14 @@ export const parameters = {
     },
   },
 }
+
+/*
+ * Add Chakra UI provider in storybook
+ */
+export const decorators = [
+  Story => (
+    <ChakraProvider theme={theme}>
+      <Story />
+    </ChakraProvider>
+  ),
+];

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "typescript.tsdk": "node_modules/typescript/lib"
+}

package.json

@@ -13,6 +13,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",
+    "typescript": "^4.9.5",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

src/stories/Button.stories.tsx

@@ -0,0 +1,68 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { Button } from "./Button";
+
+export default {
+  title: "Example/Button",
+  component: Button,
+  argTypes: {
+    size: {
+      control: { type: "radio", options: ["xs", "sm", "md", "lg"] },
+      defaultValue: "md",
+    },
+    variant: {
+      control: {
+        type: "radio",
+        options: ["solid", "outline", "ghost", "link"],
+      },
+      defaultValue: "solid",
+    },
+    colorScheme: {
+      control: {
+        type: "select",
+        options: [
+          "primary",
+          "secondary",
+          "gray",
+          "red",
+          "orange",
+          "whiteAlpha",
+          "blackAlpha",
+          "yellow",
+          "green",
+          "teal",
+          "blue",
+          "cyan",
+          "purple",
+          "pink",
+        ],
+      },
+      defaultValue: "solid",
+    },
+  },
+  args: {
+    label: "Click me",
+    fluid: false,
+    isLoading: false,
+    isDisabled: false,
+    colorScheme: "primary",
+  },
+  parameters: {
+    controls: {
+      include: [
+        "label",
+        "size",
+        "variant",
+        "isLoading",
+        "isDisabled",
+        "colorScheme",
+      ],
+    },
+  },
+} as ComponentMeta<typeof Button>;
+
+const Template: ComponentStory<typeof Button> = (args) => <Button {...args} />;
+
+export const Primary = Template.bind({});
+
+Primary.args = {};

src/stories/Button.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import {
+  Button as CButton,
+  ButtonProps as CButtonProps,
+} from "@chakra-ui/react";
+
+export interface ButtonProps extends CButtonProps {
+  /**
+   * Button contents
+   */
+  label: string | React.ReactNode;
+}
+
+export const Button = ({ label, ...props }: ButtonProps): JSX.Element => {
+  return (
+    <CButton borderRadius="60px" {...props}>
+      {label}
+    </CButton>
+  );
+};

src/theme.js

@@ -1,13 +1,31 @@
-import { extendTheme } from '@chakra-ui/react';
+import { extendTheme } from "@chakra-ui/react";
 
-export default extendTheme({
-    components: {
-        Button: {
-            baseStyle: {
-                bg: 'blue',
-                backgroundColor: 'blue',
-                color: 'white',
-            },
-        },
+export const theme = extendTheme({
+  colors: {
+    primary: {
+      50: "#ffe2e2",
+      100: "#ffb1b2",
+      200: "#ff7f7f",
+      300: "#ff4d4d",
+      400: "#fe1d1b",
+      500: "#e50501",
+      600: "#b30000",
+      700: "#810000",
+      800: "#4f0000",
+      900: "#200000",
     },
+    secondary: {
+      50: "#ebe6ff",
+      100: "#c4b5ff",
+      200: "#9d85fb",
+      300: "#7655f8",
+      400: "#4f24f4",
+      500: "#350bdb",
+      600: "#2907ab",
+      700: "#1d057c",
+      800: "#10034c",
+      900: "#06001e",
+    },
+  },
+  useSystemColorMode: false,
 });

tsconfig.json

@@ -0,0 +1,55 @@
+{
+  "compilerOptions": {
+    /* Visit https://aka.ms/tsconfig to read more about this file */
+
+    /* Projects */
+    /* Language and Environment */
+    "target": "es2016" /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */,
+    "lib": [
+      "es6",
+      "dom",
+      "es2016"
+    ] /* Specify a set of bundled library declaration files that describe the target runtime environment. */,
+    "jsx": "react-jsx" /* Specify what JSX code is generated. */,
+    "experimentalDecorators": true /* Enable experimental support for TC39 stage 2 draft decorators. */,
+    // "emitDecoratorMetadata": true /* Emit design-type metadata for decorated declarations in source files. */,
+
+    /* Modules */
+    "module": "esnext" /* Specify what module code is generated. */,
+    "moduleResolution": "node" /* Specify how TypeScript looks up a file from a given module specifier. */,
+
+    /* Emit */
+    "declaration": true /* Generate .d.ts files from TypeScript and JavaScript files in your project. */,
+    "sourceMap": true /* Create source map files for emitted JavaScript files. */,
+    "outDir": "dist" /* Specify an output folder for all emitted files. */,
+    "removeComments": false /* Disable emitting comments. */,
+    "declarationDir": "./" /* Specify the output directory for generated declaration files. */,
+
+    /* Interop Constraints */
+    "allowSyntheticDefaultImports": true /* Allow 'import x from y' when a module doesn't have a default export. */,
+    "esModuleInterop": true /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */,
+    "forceConsistentCasingInFileNames": true /* Ensure that casing is correct in imports. */,
+
+    /* Type Checking */
+    "strict": true /* Enable all strict type-checking options. */,
+    "noImplicitAny": true /* Enable error reporting for expressions and declarations with an implied 'any' type. */,
+    "noUnusedLocals": true /* Enable error reporting when local variables aren't read. */,
+    "noUnusedParameters": true /* Raise an error when a function parameter isn't read. */,
+    "noImplicitReturns": true /* Enable error reporting for codepaths that do not explicitly return in a function. */,
+    "allowUnreachableCode": true /* Disable error reporting for unreachable code. */,
+
+    /* Completeness */
+    "skipLibCheck": true /* Skip type checking all .d.ts files. */
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx", "**/**.module.scss"],
+  "exclude": [
+    "example",
+    "node_modules",
+    "dist",
+    "**/__tests__/**",
+    "src/**/*.test.tsx",
+    "src/**/*.stories.tsx"
+  ],
+  "compileOnSave": false,
+  "buildOnSave": false
+}