@wazobiatech/wazui 0.0.1 → 0.0.3

package/.env.test

@@ -0,0 +1,5 @@
+VITE_DOLOS_URL=https://dolos.hogfort.com
+VITE_RECIPES_ENDPOINT=https://devrecipes.junglecreations.com/graphql
+VITE_MUSE_ENDPOINT=https://muse.hogfort.com/graphql
+VITE_MUSE_TOKEN=token
+VITE_PHOENIX_ENDPOINT=/api/phoenix

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wazobiatech/wazui",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "private": false,
   "description": "`@repo/wazui` is a React component library that provides a set of reusable UI components, hooks, and providers for building modern web applications. It is built with TypeScript, Tailwind CSS, and integrates Shadcn UI components.",
   "homepage": "https://bitbucket.org/wazobiatech/wazui#readme",
@@ -15,9 +15,9 @@
   "author": "",
   "type": "module",
   "exports": {
-    "./shadcn": "./src/components/shadcn/index.ts",
-    "./styles.css": "./src/index.css",
-    ".": "./src/index.ts"
+    "./shadcn": "./dist/components/shadcn/index.ts",
+    "./styles.css": "./dist/styles.css",
+    ".": "./dist/index.js"
   },
   "main": "index.js",
   "scripts": {
@@ -114,6 +114,7 @@
     "@storybook/react": "8.6.12",
     "@storybook/react-vite": "8.6.12",
     "@storybook/test": "8.6.12",
+    "@tailwindcss/postcss": "^4.1.18",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
@@ -131,6 +132,7 @@
     "ajv": "^8.17.1",
     "ajv-draft-04": "^1.0.0",
     "ajv-keywords": "^5.1.0",
+    "autoprefixer": "^10.4.23",
     "babel-jest": "^29.7.0",
     "eslint": "^9.21.0",
     "eslint-plugin-jest": "^28.11.0",
@@ -149,7 +151,7 @@
     "storybook": "8.6.12",
     "typescript": "~5.7.2",
     "typescript-eslint": "^8.24.1",
-    "vite": "^6.2.0",
+    "vite": "^7.3.0",
     "vite-plugin-dts": "^4.5.3",
     "vitest": "^3.1.1"
   },

package/postcss.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  plugins: [require('@tailwindcss/postcss'), require('autoprefixer')],
+};

package/tailwind.config.js

@@ -0,0 +1,70 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ['./src/**/*.{js,ts,jsx,tsx}'],
+  darkMode: 'class',
+  theme: {
+    extend: {
+      fontFamily: {
+        'universal-jungle': ['UniversalJungle', 'sans-serif'],
+        'universal-feature': ['UniversalFeature', 'sans-serif'],
+      },
+      borderRadius: {
+        lg: 'var(--radius)',
+        md: 'calc(var(--radius) - 2px)',
+        sm: 'calc(var(--radius) - 4px)',
+      },
+      colors: {
+        background: 'var(--background)',
+        foreground: 'var(--foreground)',
+        card: {
+          DEFAULT: 'var(--card)',
+          foreground: 'var(--card-foreground)',
+        },
+        popover: {
+          DEFAULT: 'var(--popover)',
+          foreground: 'var(--popover-foreground)',
+        },
+        primary: {
+          DEFAULT: 'var(--primary)',
+          foreground: 'var(--primary-foreground)',
+        },
+        secondary: {
+          DEFAULT: 'var(--secondary)',
+          foreground: 'var(--secondary-foreground)',
+        },
+        muted: {
+          DEFAULT: 'var(--muted)',
+          foreground: 'var(--muted-foreground)',
+        },
+        accent: {
+          DEFAULT: 'var(--accent)',
+          foreground: 'var(--accent-foreground)',
+        },
+        destructive: {
+          DEFAULT: 'var(--destructive)',
+          foreground: 'var(--destructive-foreground)',
+        },
+        border: 'var(--border)',
+        input: 'var(--input)',
+        ring: 'var(--ring)',
+        chart: {
+          1: 'var(--chart-1)',
+          2: 'var(--chart-2)',
+          3: 'var(--chart-3)',
+          4: 'var(--chart-4)',
+          5: 'var(--chart-5)',
+        },
+      },
+      keyframes: {
+        'wazui-progress-bar': {
+          '0%': { transform: 'translateX(-98%)' },
+          '100%': { transform: 'translateX(0%)' },
+        },
+      },
+      animation: {
+        'wazui-progress-bar': 'wazui-progress-bar 0.5s ease-out',
+      },
+    },
+  },
+  plugins: [],
+};

package/tsconfig.json

@@ -5,7 +5,7 @@
     "paths": {
       "@/*": ["./src/*"],
       "@config/env": ["src/env.ts"],
-      "@repo/wazui/styles.css": ["../packages/wazui/src/index.css"]
+      "@wazobiatech/wazui/styles.css": ["../packages/wazui/src/index.css"]
     },
     "strict": true,
     "declaration": true,

package/vite.config.ts

@@ -2,7 +2,8 @@ import { defineConfig } from 'vite';
 import { resolve } from 'path';
 import react from '@vitejs/plugin-react';
 import dts from 'vite-plugin-dts';
-import tailwindcss from '@tailwindcss/vite';
+import tailwindcss from '@tailwindcss/postcss';
+import autoprefixer from 'autoprefixer';
 
 export default defineConfig({
   server: {
@@ -35,16 +36,23 @@ export default defineConfig({
           react: 'React',
           'react-dom': 'ReactDOM',
         },
+        assetFileNames: 'styles.[ext]',
       },
     },
+    cssCodeSplit: false,
+    sourcemap: true,
+  },
+  css: {
+    postcss: {
+      plugins: [tailwindcss, autoprefixer],
+    },
   },
   plugins: [
     react(),
-    tailwindcss(),
     dts({
-      include: ['src', '.storybook'], // Ensure the "src" directory is included
-      outDir: 'dist', // Output the declarations to the "dist" directory
-      insertTypesEntry: true, // Add a "types" entry to the package.json
+      include: ['src'],
+      outDir: 'dist',
+      insertTypesEntry: true,
     }),
   ],
 });

package/.storybook/main.ts

@@ -1,41 +0,0 @@
-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/experimental-addon-test',
-    '@storybook/addon-themes',
-  ],
-  framework: {
-    name: '@storybook/react-vite',
-    options: {},
-  },
-  viteFinal(storybookConfig) {
-    if (!storybookConfig.build) storybookConfig.build = {};
-    if (!storybookConfig.build.rollupOptions) storybookConfig.build.rollupOptions = {};
-    if (!storybookConfig.build.rollupOptions.external)
-      storybookConfig.build.rollupOptions.external = [];
-
-    // Add external dependencies
-    const external = storybookConfig.build.rollupOptions.external as string[];
-    external.push('@storybook/types', '@storybook/internal/manager-api');
-
-    // ✅ Add proxy for /api/phoenix
-    // storybookConfig.server = storybookConfig.server || {};
-    // storybookConfig.server.proxy = {
-    //   ...(storybookConfig.server.proxy || {}),
-    //   '/api/phoenix': {
-    //     target: 'https://phoenix.hogfort.com',
-    //     changeOrigin: true,
-    //     rewrite: (path: string) => path.replace(/^\/api\/phoenix/, '/graphql'),
-    //   },
-    // };
-
-    return storybookConfig;
-  },
-};
-
-export default config;

package/.storybook/preview-head.html

@@ -1,3 +0,0 @@
-<!-- Load your CSS file -->
-<link rel="stylesheet" href="../src/index.css" />
-<link rel="stylesheet" href="./styles.css" />

package/.storybook/preview.ts

@@ -1,53 +0,0 @@
-import '../src/index.css';
-import type { Preview } from '@storybook/react';
-
-import { withThemeByClassName } from '@storybook/addon-themes';
-
-import TimeAgo from 'javascript-time-ago';
-
-import en from 'javascript-time-ago/locale/en';
-import ru from 'javascript-time-ago/locale/ru';
-import { withApollo } from '../src/decorators/ApolloDecorator';
-import { withReactQuery } from '../src/decorators/ReactQueryDecorator';
-import { withRouter } from '../src/decorators/RouterDecorator';
-import { withActionModalProvider } from '../src/decorators/ActionModalDecorator';
-
-TimeAgo.addDefaultLocale(en);
-TimeAgo.addLocale(ru);
-
-export const decorators = [
-  withThemeByClassName({
-    themes: {
-      light: 'light',
-      dark: 'dark',
-      brand: 'brand',
-    },
-    defaultTheme: 'light',
-    parentSelector: 'html',
-  }),
-  withRouter,
-  withReactQuery,
-  withApollo,
-  withActionModalProvider,
-];
-
-const preview: Preview = {
-  parameters: {
-    controls: {
-      matchers: {
-        color: /(background|color)$/i,
-        date: /Date$/i,
-      },
-    },
-    backgrounds: {
-      default: 'light',
-      values: [
-        { name: 'light', value: '#ffffff' },
-        { name: 'dark', value: '#000000' },
-        { name: 'brand', value: '#f0f0f0' },
-      ],
-    },
-  },
-};
-
-export default preview;

package/src/assets/dashboard/book.svg

@@ -1,6 +0,0 @@
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M18.3332 13.9501V3.89174C18.3332 2.89174 17.5165 2.15008 16.5248 2.23341H16.4748C14.7248 2.38341 12.0665 3.27508 10.5832 4.20841L10.4415 4.30008C10.1998 4.45008 9.79984 4.45008 9.55817 4.30008L9.34984 4.17508C7.8665 3.25008 5.2165 2.36674 3.4665 2.22508C2.47484 2.14174 1.6665 2.89174 1.6665 3.88341V13.9501C1.6665 14.7501 2.3165 15.5001 3.1165 15.6001L3.35817 15.6334C5.1665 15.8751 7.95817 16.7917 9.55817 17.6667L9.5915 17.6834C9.8165 17.8084 10.1748 17.8084 10.3915 17.6834C11.9915 16.8001 14.7915 15.8751 16.6082 15.6334L16.8832 15.6001C17.6832 15.5001 18.3332 14.7501 18.3332 13.9501Z" stroke="#6574FF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M10 4.57422V17.0742" stroke="#6574FF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M6.4585 7.07422H4.5835" stroke="#6574FF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M7.0835 9.57422H4.5835" stroke="#6574FF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>

package/src/assets/dashboard/edit.svg

@@ -1,5 +0,0 @@
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M9.1665 1.66602H7.49984C3.33317 1.66602 1.6665 3.33268 1.6665 7.49935V12.4993C1.6665 16.666 3.33317 18.3327 7.49984 18.3327H12.4998C16.6665 18.3327 18.3332 16.666 18.3332 12.4993V10.8327" stroke="#208B02" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M13.3666 2.51639L6.7999 9.08306C6.5499 9.33306 6.2999 9.82472 6.2499 10.1831L5.89157 12.6914C5.75823 13.5997 6.3999 14.2331 7.30823 14.1081L9.81657 13.7497C10.1666 13.6997 10.6582 13.4497 10.9166 13.1997L17.4832 6.63306C18.6166 5.49972 19.1499 4.18306 17.4832 2.51639C15.8166 0.849722 14.4999 1.38306 13.3666 2.51639Z" stroke="#208B02" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M12.4248 3.45898C12.9831 5.45065 14.5415 7.00898 16.5415 7.57565" stroke="#208B02" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>