@wazobiatech/wazui 0.0.1

package/.changeset/README.md

@@ -0,0 +1,8 @@
+# Changesets
+
+Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works
+with multi-package repos, or single-package repos to help you version and publish your code. You can
+find the full documentation for it [in our repository](https://github.com/changesets/changesets)
+
+We have a quick list of common questions to get you started engaging with this project in
+[our documentation](https://github.com/changesets/changesets/blob/main/docs/common-questions.md)

package/.changeset/config.json

@@ -0,0 +1,11 @@
+{
+  "$schema": "https://unpkg.com/@changesets/config@3.1.2/schema.json",
+  "changelog": "@changesets/cli/changelog",
+  "commit": false,
+  "fixed": [],
+  "linked": [],
+  "access": "restricted",
+  "baseBranch": "releases/npm",
+  "updateInternalDependencies": "patch",
+  "ignore": []
+}

package/.dockerignore

@@ -0,0 +1,9 @@
+.git
+.gitignore
+node_modules
+npm-debug.log
+Dockerfile*
+docker-compose*
+README.md
+LICENSE
+.vscode

package/.env.sample

@@ -0,0 +1,22 @@
+VITE_PORTAL_GRAPHQL_ENDPOINT=
+VITE_DOLOS_URL=
+VITE_DOLOS_TRANSFORMATION_ENDPOINT=
+VITE_RECIPES_ENDPOINT=
+VITE_MUSE_ENDPOINT=
+VITE_MUSE_TOKEN=
+VITE_PHOENIX_ENDPOINT=
+VITE_PROJECT_UUID=
+VITE_REVALIDATION_TWISTEDFOOD_TOKEN=
+VITE_REVALIDATION_VT_TOKEN=
+VITE_MERCURY_TOKEN_ENDPOINT=
+VITE_ATHENS_APP_ID=
+VITE_ATHENS_APP_SECRET=
+VITE_BLOG_UUID=
+VITE_GRAPH_QL_URL=
+VITE_MUSE_GRAPHQL_URL=
+VITE_RECIPE_GRAPHQL_URL=
+
+VITE_PROJECT_TOKEN=
+
+# NPM Token for private registry authentication
+NPM_TOKEN=

package/.husky/pre-commit

@@ -0,0 +1,7 @@
+# !/usr/bin/env sh
+
+# export NODE_OPTIONS="--max-old-space-size=4096"
+
+yarn run lint:staged
+yarn test
+yarn run build

package/.prettierignore

@@ -0,0 +1,5 @@
+node_modules
+build
+dist
+.vscode
+storybook-static

package/.prettierrc

@@ -0,0 +1,9 @@
+{
+  "singleQuote": true,
+  "semi": true,
+  "tabWidth": 2,
+  "trailingComma": "es5",
+  "printWidth": 100,
+  "arrowParens": "avoid",
+  "jsxSingleQuote": true
+}

package/.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/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

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

package/.storybook/preview.ts

@@ -0,0 +1,53 @@
+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/Dockerfile

@@ -0,0 +1,58 @@
+# Build stage
+FROM node:20-alpine AS build
+
+# Set working directory
+WORKDIR /app
+
+# Copy package files
+COPY package.json ./
+
+# Install dependencies
+RUN yarn install
+
+# Copy project files
+COPY . .
+
+# Build the component library
+RUN npm run build
+
+# Build Storybook
+RUN npm run build-storybook
+
+# Production stage with Nginx
+FROM nginx:alpine AS production
+
+# Create directories for both builds
+RUN mkdir -p /usr/share/nginx/html/storybook
+RUN mkdir -p /usr/share/nginx/html/dist
+
+# Copy Storybook static files
+COPY --from=build /app/storybook-static /usr/share/nginx/html/storybook
+
+# Copy dist files
+COPY --from=build /app/dist /usr/share/nginx/html/dist
+
+# Create a custom Nginx configuration
+RUN echo 'server { \
+    listen 80; \
+    \
+    location /storybook/ { \
+        alias /usr/share/nginx/html/storybook/; \
+        try_files $uri $uri/ /storybook/index.html; \
+    } \
+    \
+    location /dist/ { \
+        alias /usr/share/nginx/html/dist/; \
+        try_files $uri $uri/ /dist/index.html; \
+    } \
+    \
+    location / { \
+        return 301 /storybook/; \
+    } \
+}' > /etc/nginx/conf.d/default.conf
+
+# Nginx already exposes port 80
+EXPOSE 80
+
+# Start Nginx
+CMD ["nginx", "-g", "daemon off;"]

package/Dockerfile.dev

@@ -0,0 +1,11 @@
+FROM node:20-alpine
+
+WORKDIR /app
+
+COPY ./package.json .
+
+RUN yarn
+
+COPY . .
+
+CMD ["tail", "-f", "/dev/null"]

package/README.md

@@ -0,0 +1,130 @@
+# Wazui Component Library
+
+`@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.
+
+## Table of Contents
+
+- [Installation](#installation)
+- [Usage](#usage)
+- [Available Components](#available-components)
+- [Contributing](#contributing)
+
+## Installation
+
+To use the Wazui component library, you need to have a React project set up.
+
+1.  **Install the package**:
+
+    ```bash
+    npm install @repo/wazui
+    ```
+
+2.  **Install peer dependencies**:
+
+    This package has peer dependencies that need to be installed in your project.
+
+    ```bash
+    npm install react react-dom @tanstack/react-query @tanstack/react-query-devtools
+    ```
+
+## Usage
+
+### 1. Import Styles
+
+For the components to be styled correctly, import the CSS file into your main application file (e.g., `index.tsx` or `App.tsx`).
+
+```tsx
+import '@repo/wazui/styles.css';
+```
+
+### 2. Set up Providers
+
+The library includes providers for theme and data fetching. Wrap your application with them.
+
+```tsx
+// In your main App component
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+import { WazUIThemeProvider, WazUIQueryProvider } from '@repo/wazui';
+import '@repo/wazui/styles.css';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <WazUIQueryProvider>
+      <WazUIThemeProvider defaultTheme='dark' storageKey='wazui-theme'>
+        <App />
+      </WazUIThemeProvider>
+    </WazUIQueryProvider>
+  </React.StrictMode>
+);
+```
+
+### 3. Use Components
+
+You can import and use components from the library in your application.
+
+#### Wazui Components
+
+These are the main components from the `@repo/wazui` package.
+
+```tsx
+import { WazUIButton } from '@repo/wazui';
+
+function MyComponent() {
+  return <WazUIButton>Click Me</WazUIButton>;
+}
+```
+
+#### Shadcn Components
+
+The library also exports Shadcn UI components from a secondary entry point.
+
+```tsx
+import { Button } from '@repo/wazui/shadcn';
+
+function MyOtherComponent() {
+  return <Button variant='outline'>Shadcn Button</Button>;
+}
+```
+
+## Available Components
+
+This library exports a wide range of components, hooks, and utilities.
+
+### Main Exports (`@repo/wazui`)
+
+- `WazUIButton`
+- `WazUIBlogComponent`
+- `WazUiPostCard`
+- `WazUiGqlMediaLibrary`
+- `WazUiCreateBlogContent`
+- `WazUIBlogDashboard`
+- `WazUIThemeProvider` and `useWazUITheme` hook
+- `WazUIQueryProvider`
+- And many more...
+
+### Shadcn Exports (`@repo/wazui/shadcn`)
+
+A large set of UI primitives are available, including:
+
+- `Alert`
+- `Badge`
+- `Button`
+- `Card`
+- `Dialog`
+- `DropdownMenu`
+- `Input`
+- `Sheet`
+- `Table`
+- And many more...
+
+Refer to your Storybook or source code for a complete list of available components and their props.
+
+## Contributing
+
+1. Create a new branch from `main`
+2. Make your changes
+3. Submit a pull request
+4. Ensure tests pass and linting is clean
+5. Get approval from at least two senior engineers

package/__mocks__/fileMock.ts

@@ -0,0 +1 @@
+module.exports = 'test-file-stub';

package/__mocks__/svgMock.ts

@@ -0,0 +1 @@
+module.exports = 'SvgMock';

package/babel.config.js

@@ -0,0 +1,46 @@
+// import babelConfig from "@repo/babel-config/babel.config.base.js";
+// export default babelConfig;
+const replaceImportMeta = () => ({
+  visitor: {
+    MetaProperty(path) {
+      if (path.node.meta.name === 'import' && path.node.property.name === 'meta') {
+        path.replaceWithSourceString('process');
+      }
+    },
+  },
+});
+const config = {
+  presets: [
+    [
+      '@babel/preset-env',
+      {
+        targets: {
+          node: 'current',
+        },
+      },
+    ],
+    [
+      '@babel/preset-react',
+      {
+        runtime: 'automatic',
+      },
+    ],
+    '@babel/preset-typescript',
+  ],
+  plugins: ['@babel/plugin-syntax-import-meta'],
+  env: {
+    test: {
+      presets: [
+        [
+          '@babel/preset-env',
+          {
+            targets: { node: 'current' },
+            modules: 'commonjs',
+          },
+        ],
+      ],
+      plugins: ['@babel/plugin-syntax-import-meta', replaceImportMeta],
+    },
+  },
+};
+export default config;

package/bitbucket-pipelines.yml

@@ -0,0 +1,70 @@
+image: node:22.12.0-alpine
+
+definitions:
+  caches:
+    yarn: ~/.cache/yarn
+
+  services:
+    docker:
+      memory: 3072
+
+  steps:
+    # -------------------------
+    # Base step: install, lint, test, build
+    # -------------------------
+    - step: &install-lint-test-build
+        name: Install, Lint, Test, Build
+        caches:
+          - yarn
+        script:
+          - corepack enable
+          - yarn install --frozen-lockfile
+          - yarn lint
+          - yarn test
+          - yarn build
+        artifacts:
+          - dist/**
+          - storybook-static/**
+          - coverage/**
+        after-script:
+          - rm -rf node_modules/.cache
+
+    # -------------------------
+    # Version + Publish (main only)
+    # -------------------------
+    - step: &version-and-publish
+        name: Version & Publish (npm private)
+        deployment: production
+        caches:
+          - yarn
+        script:
+          - corepack enable
+          - yarn install --frozen-lockfile
+
+          # Apply version bumps from .changeset files
+          - yarn changeset version
+
+          # Reinstall after package.json updates
+          - yarn install --frozen-lockfile
+
+          # Build before publish
+          - yarn build
+
+          # Publish private packages
+          - yarn changeset publish
+
+pipelines:
+  # Default pipeline for all branches
+  default:
+    - step: *install-lint-test-build
+
+  # Pipeline for pull requests
+  pull-requests:
+    '**':
+      - step: *install-lint-test-build
+
+  # Pipeline for main branch (publishing enabled)
+  branches:
+    'releases/npm':
+      - step: *install-lint-test-build
+      - step: *version-and-publish

package/components.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/index.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components/shadcn",
+    "utils": "@/utils/utils",
+    "ui": "@/components/shadcn/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide"
+}

package/e2e/example.spec.ts

@@ -0,0 +1,18 @@
+import { test, expect } from '@playwright/test';
+
+test('has title', async ({ page }) => {
+  await page.goto('https://playwright.dev/');
+
+  // Expect a title "to contain" a substring.
+  await expect(page).toHaveTitle(/Playwright/);
+});
+
+test('get started link', async ({ page }) => {
+  await page.goto('https://playwright.dev/');
+
+  // Click the get started link.
+  await page.getByRole('link', { name: 'Get started' }).click();
+
+  // Expects page to have a heading with the name of Installation.
+  await expect(page.getByRole('heading', { name: 'Installation' })).toBeVisible();
+});

package/eslint.config.mjs

@@ -0,0 +1,37 @@
+import js from '@eslint/js';
+import globals from 'globals';
+import reactHooks from 'eslint-plugin-react-hooks';
+import reactRefresh from 'eslint-plugin-react-refresh';
+import tseslint from 'typescript-eslint';
+
+export default tseslint.config(
+  { ignores: ['dist', 'storybook-static', '.storybook'] },
+  {
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    files: ['**/*.{ts,tsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    plugins: {
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
+      // Add single quotes rule for JavaScript
+      quotes: ['error', 'single'],
+      // Add JSX quotes rule if needed
+      'jsx-quotes': ['error', 'prefer-single'],
+    },
+  },
+  // Add TypeScript-specific rules in a separate config object
+  {
+    files: ['**/*.{ts,tsx}'],
+    rules: {
+      // TypeScript-specific rules
+      quotes: ['error', 'single'],
+    },
+  }
+);

package/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React + TS</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/jest.config.ts

@@ -0,0 +1,79 @@
+import type { JestConfigWithTsJest } from 'ts-jest';
+
+const config: JestConfigWithTsJest = {
+  preset: 'ts-jest/presets/default-esm',
+
+  testEnvironment: 'jsdom',
+
+  testPathIgnorePatterns: [
+    '/node_modules/',
+    '/e2e/',
+    'node_modules/(?!(apollo-upload-client|@apollo/client)/)',
+  ],
+  setupFilesAfterEnv: ['./jest.setup.tsx'], // reference setup file here
+  // Module name mapping for path aliases
+  moduleNameMapper: {
+    // Handle ES module imports in source code only (not node_modules)
+    '^(\\.{1,2}/.*)\\.js$': '$1',
+    // Handle static assets
+    '\\.(css|less|scss|sass)$': 'identity-obj-proxy',
+    '\\.svg$': '<rootDir>/__mocks__/svgMock.ts',
+    '\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
+      'jest-transform-stub',
+    // Mock env file to avoid import.meta issues (must come before generic @/ mapping)
+    '^@/env$': '<rootDir>/src/mocks/env.ts',
+    // Path aliases (generic mapping must come last)
+    '^@/(.*)$': '<rootDir>/src/$1',
+  },
+
+  // Transform files
+  transform: {
+    '^.+\\.(js|jsx|ts|tsx)$': [
+      'ts-jest',
+      {
+        useESM: true,
+        tsconfig: {
+          jsx: 'react-jsx',
+        },
+      },
+    ],
+    // Transform CSS files to empty objects
+    '\\.(css|less|scss|sass)$': 'jest-transform-stub',
+    '\\.(mp3|wav|ogg|m4a|aac|flac)$': 'jest-transform-stub',
+  },
+
+  // Transform ignore patterns - let Jest handle ES modules properly
+  transformIgnorePatterns: ['node_modules/(?!(@tanstack|@apollo|react-day-picker|date-fns)/)'],
+
+  // File extensions to consider
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json'],
+
+  // Coverage configuration
+  collectCoverageFrom: [
+    'src/**/*.{ts,tsx}',
+    '!src/**/*.d.ts',
+    '!src/**/*.stories.{ts,tsx}',
+    '!src/index.tsx',
+    '!src/reportWebVitals.ts',
+  ],
+
+  // Coverage thresholds
+  coverageThreshold: {
+    global: {
+      branches: 70,
+      functions: 70,
+      lines: 70,
+      statements: 70,
+    },
+  },
+
+  // Additional Jest options for modern React
+  testEnvironmentOptions: {
+    customExportConditions: ['node', 'node-addons'],
+  },
+
+  // Handle ES modules
+  extensionsToTreatAsEsm: ['.ts', '.tsx'],
+};
+
+export default config;