Beta tremor v4

.github/workflows/build.yaml

@@ -24,9 +24,9 @@ jobs:
           node-version: 20
           registry-url: https://registry.npmjs.org
       - name: install react
-        run: npm i react
+        run: npm i react --legacy-peer-deps
       - name: install dependencies
-        run: npm ci
+        run: npm ci --legacy-peer-deps
       - name: lint checks
         run: npm run lint
       - name: unit tests

.github/workflows/release.yaml

@@ -20,9 +20,9 @@ jobs:
           node-version: 20
           registry-url: https://registry.npmjs.org
       - name: install react
-        run: npm i react
+        run: npm i react --legacy-peer-deps
       - name: install dependencies
-        run: npm ci
+        run: npm ci --legacy-peer-deps
       - name: build
         run: npm run build
       - name: release

.gitignore

@@ -4,4 +4,5 @@ dist
 storybook-static
 package-lock.json
 .vscode
-yarn.lock
+yarn.lock
+*storybook.log

.prettierrc.json

@@ -6,5 +6,7 @@
   "semi": true,
   "printWidth": 100,
   "jsxSingleQuote": false,
-  "endOfLine": "auto"
+  "endOfLine": "auto",
+  "plugins": ["prettier-plugin-tailwindcss"],
+  "tailwindFunctions": ["clsx", "cx", "twmerge", "tremorTwMerge"]
 }

.storybook/main.ts

@@ -0,0 +1,20 @@
+import type { StorybookConfig } from "@storybook/react-vite";
+
+const config: StorybookConfig = {
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  addons: [
+    {
+      name: "@storybook/addon-essentials",
+    },
+    "@storybook/addon-interactions",
+    "@storybook/addon-themes",
+  ],
+  framework: {
+    name: "@storybook/react-vite",
+    options: {
+      strictMode: true,
+    },
+  },
+};
+
+export default config;

.storybook/manager.tsx

@@ -0,0 +1,9 @@
+import "../assets/fonts/stylesheet.css";
+
+
+import { addons } from "@storybook/manager-api";
+
+addons.setConfig({
+  panelPosition: "bottom",
+  initialActive: "canvas",
+});

.storybook/preview.ts

@@ -0,0 +1,21 @@
+import "../assets/fonts/stylesheet.css";
+import "../src/styles.css";
+
+import type { Preview } from "@storybook/react";
+
+const preview = {
+  parameters: {
+    // docs: {
+    //   theme,
+    // },
+    backgrounds: {
+      values: [
+        { name: 'Dark', value: '#030712' },
+        { name: 'Light', value: '#fff' },
+      ],
+      default: 'Light',
+    },
+  },
+} satisfies Preview;
+
+export default preview;

.storybook/theme.ts

@@ -0,0 +1,25 @@
+import { create } from "@storybook/theming";
+
+export default create({
+  base: "light",
+  fontBase: "var(--font-geist-sans)",
+  fontCode: "var(--font-geist-mono)",
+  //   appContentBg: "#161618",
+  //   appBg: "#161618",
+  //   barBg: "#161618",
+  //   inputBg: "#232326",
+  //   buttonBg: "#232326",
+  //   booleanBg: "#232326",
+  //   appBorderColor: "#1C1C1F",
+  //   inputBorder: "#383A43",
+  //   buttonBorder: "#383A43",
+  //   textColor: "#ECEEF0",
+  //   colorSecondary: "#1e3a8a",
+  //   colorPrimary: "#3b82f6",
+  //   barTextColor: "#ECEEF0",
+  //   barHoverColor: "#3E63DD",
+  //   barSelectedColor: "#3E63DD",
+  //   inputTextColor: "#ECEEF0",
+  //   textMutedColor: "#CCCED3",
+  //   textInverseColor: "#161618",
+});

assets/fonts/stylesheet.css

@@ -0,0 +1,23 @@
+@font-face {
+  font-family: "Geist Sans";
+  src: url("./GeistVariable.ttf") format("truetype");
+  font-weight: 100 900;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "Geist Mono";
+  src: url("./GeistMonoVariable.ttf") format("truetype");
+  font-weight: 100 900;
+  font-style: normal;
+}
+
+:root {
+  --font-geist-sans: "Geist Sans";
+  --font-geist-mono: "Geist Mono";
+}
+
+/* @theme {
+  --font-geist-sans: "Geist Sans";
+  --font-geist-mono: "Geist Mono";
+} */