chore: tailwind-configuration

.github/workflows/eslint.yml

@@ -1,13 +1,15 @@
 name: ESLint
 on:
   pull_request:
-    branches: [ main ]
+    branches: [main]
 jobs:
   eslint:
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v2
-    - name: Install modules
-      run: yarn
-    - name: Run ESLint
-      run: yarn check-style
+      - uses: actions/checkout@v2
+      - name: Enable corepack
+        run: corepack enable
+      - name: Install modules
+        run: yarn
+      - name: Run ESLint
+        run: yarn check-style

.github/workflows/tsc.yml

@@ -1,13 +1,15 @@
 name: TypeCheck
 on:
   pull_request:
-    branches: [ main ]
+    branches: [main]
 jobs:
   TypeScriptCompiler:
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v2
-    - name: Install modules
-      run: yarn
-    - name: Run TypeScriptCompiler
-      run: yarn check-types
+      - uses: actions/checkout@v2
+      - name: Enable corepack
+        run: corepack enable
+      - name: Install modules
+        run: yarn
+      - name: Run TypeScriptCompiler
+        run: yarn check-types

.gitignore

@@ -6,12 +6,9 @@
 /.pnp.*
 node_modules
 
-# parcel
-.parcel-cache
 development
 build
 dist
-parcel-bundle-reports
 
 # misc
 .eslintcache
@@ -26,3 +23,5 @@ parcel-bundle-reports
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+*storybook.log

.lintstagedrc.json

@@ -1,3 +1,3 @@
 {
-  "**/*.{js,jsx,ts,tsx}": ["eslint"]
+  "**/*.{js,jsx,ts,tsx}": ["eslint --fix"]
 }

.prettierrc

@@ -0,0 +1,3 @@
+{
+  "plugins": ["prettier-plugin-tailwindcss"]
+}

.storybook/main.ts

@@ -0,0 +1,41 @@
+import type { StorybookConfig } from "@storybook/react-vite";
+
+const config: StorybookConfig = {
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  addons: [
+    "@storybook/addon-essentials",
+    "@storybook/addon-onboarding",
+    "@chromatic-com/storybook",
+    "@storybook/addon-interactions",
+  ],
+  framework: {
+    name: "@storybook/react-vite",
+    options: {},
+  },
+  typescript: {
+    reactDocgen: "react-docgen-typescript",
+    reactDocgenTypescriptOptions: {
+      propFilter: (prop) => {
+        if (prop.parent) {
+          const fileName = prop.parent.fileName;
+          // Include props from our own code (not in node_modules)
+          if (!fileName.includes("node_modules")) {
+            return true;
+          }
+          // Include props from react-aria-components and react-aria
+          if (
+            fileName.includes("react-aria-components") ||
+            fileName.includes("react-aria") ||
+            fileName.includes("node_modules/@react-types")
+          ) {
+            return true;
+          }
+          // Exclude all other props from node_modules
+          return false;
+        }
+        return true;
+      },
+    },
+  },
+};
+export default config;

.storybook/preview.tsx

@@ -0,0 +1,54 @@
+import React, { useEffect } from "react";
+import clsx from "clsx";
+
+import type { Preview } from "@storybook/react";
+
+import "../src/styles/global.css";
+
+export type IPreviewArgs = {
+  themeUI: "light" | "dark";
+  backgroundUI: "white" | "light";
+};
+
+const preview: Preview = {
+  decorators: [
+    (Story, { args }) => {
+      const { themeUI, backgroundUI } = args;
+      useEffect(() => {
+        if (themeUI === "dark") document.documentElement.classList.add("dark");
+        else document.documentElement.classList.remove("dark");
+      }, [themeUI]);
+      return (
+        <div
+          className={clsx(
+            "p-4",
+            backgroundUI === "white"
+              ? "bg-klerosUIComponentsWhiteBackground"
+              : "bg-klerosUIComponentsLightBackground",
+          )}
+        >
+          <Story />
+        </div>
+      );
+    },
+  ],
+  args: {
+    themeUI: "light",
+    backgroundUI: "white",
+  },
+  argTypes: {
+    themeUI: {
+      options: ["light", "dark"],
+      control: { type: "radio" },
+    },
+    backgroundUI: {
+      options: ["white", "light"],
+      control: { type: "radio" },
+    },
+  },
+  parameters: {
+    layout: "centered",
+  },
+};
+
+export default preview;