@wazobiatech/wazui 0.0.12 → 0.0.14

package/USAGE.md

@@ -1,96 +0,0 @@
-# WazUI Usage Guide
-
-## Installation
-
-```bash
-npm install @wazobiatech/wazui
-# or
-yarn add @wazobiatech/wazui
-```
-
-## Importing Components
-
-### Shadcn UI Components
-
-All shadcn UI components are now available from the main package export:
-
-```tsx
-import { Button, Card, Badge, Alert, Input, Dialog } from '@wazobiatech/wazui';
-// Import CSS
-import '@wazobiatech/wazui/styles.css';
-
-export function MyComponent() {
-  return (
-    <Card>
-      <CardHeader>
-        <CardTitle>Example Card</CardTitle>
-      </CardHeader>
-      <CardContent>
-        <p>This uses shadcn components from WazUI</p>
-        <Button variant='primary'>Click me</Button>
-        <Badge variant='secondary'>New</Badge>
-      </CardContent>
-    </Card>
-  );
-}
-```
-
-### Available Shadcn Components
-
-- Alert (Alert, AlertDescription, AlertTitle)
-- Badge
-- Breadcrumb (Breadcrumb, BreadcrumbItem, BreadcrumbLink, etc.)
-- Button
-- Calendar
-- Card (Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle)
-- Checkbox
-- Collapsible (Collapsible, CollapsibleContent, CollapsibleTrigger)
-- Command (Command, CommandDialog, CommandEmpty, etc.)
-- ContextMenu (ContextMenu, ContextMenuContent, ContextMenuItem, etc.)
-- Dialog (Dialog, DialogContent, DialogDescription, etc.)
-- DropdownMenu (DropdownMenu, DropdownMenuContent, DropdownMenuItem, etc.)
-- Form (Form, FormControl, FormDescription, etc.)
-- Input
-- Label
-- Popover (Popover, PopoverContent, PopoverTrigger)
-- RadioGroup (RadioGroup, RadioGroupItem)
-- Select (Select, SelectContent, SelectItem, etc.)
-- Separator
-- Sheet (Sheet, SheetContent, SheetDescription, etc.)
-- Sidebar (Sidebar, SidebarContent, SidebarProvider, etc.)
-- Skeleton
-- Switch
-- ShadcnTable (TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow) _Note: Exported as `ShadcnTable` to avoid conflicts_
-- Tabs (Tabs, TabsContent, TabsList, TabsTrigger)
-- Textarea
-- Toggle (Toggle, ToggleGroup, ToggleGroupItem)
-- Tooltip (Tooltip, TooltipContent, TooltipProvider, TooltipTrigger)
-- Toast (Toaster)
-
-### WazUI Custom Components
-
-```tsx
-import {
-  WazUIButton,
-  WazUIBlogComponent,
-  WazUiPostCard,
-  WazUIThemeProvider,
-  WazUIQueryProvider,
-} from '@wazobiatech/wazui';
-```
-
-## CSS Import
-
-Always import the CSS file in your main application file:
-
-```tsx
-import '@wazobiatech/wazui/styles.css';
-```
-
-## TypeScript Support
-
-The library includes full TypeScript definitions. All components are properly typed.
-
-## Migration Note
-
-Previously, shadcn components were available via `@wazobiatech/wazui/shadcn`. This export has been removed. All shadcn components are now available from the main package export for better tree-shaking and simpler imports.

package/__mocks__/fileMock.ts

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

package/__mocks__/svgMock.ts

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

package/babel.config.js

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

@@ -1,70 +0,0 @@
-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

@@ -1,21 +0,0 @@
-{
-  "$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

@@ -1,18 +0,0 @@
-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

@@ -1,37 +0,0 @@
-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

@@ -1,13 +0,0 @@
-<!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

@@ -1,79 +0,0 @@
-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;

package/jest.setup.tsx

@@ -1,276 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import '@testing-library/jest-dom';
-import TimeAgo from 'javascript-time-ago';
-import { TextEncoder as NodeTextEncoder, TextDecoder as NodeTextDecoder } from 'util';
-
-import en from 'javascript-time-ago/locale/en';
-import ru from 'javascript-time-ago/locale/ru';
-
-// Simple polyfill for TextEncoder/TextDecodr with proper typing
-if (typeof global.TextEncoder === 'undefined') {
-  global.TextEncoder = NodeTextEncoder as unknown as typeof TextEncoder;
-  global.TextDecoder = NodeTextDecoder as unknown as typeof TextDecoder;
-}
-Object.defineProperty(global, 'importMeta', {
-  value: {
-    env: {},
-    url: 'file:///test',
-  },
-});
-
-// Mock ResizeObserver IMMEDIATELY
-class MockResizeObserver {
-  callback: ResizeObserverCallback;
-
-  constructor(callback: ResizeObserverCallback) {
-    this.callback = callback;
-  }
-
-  observe = jest.fn();
-  disconnect = jest.fn();
-  unobserve = jest.fn();
-}
-
-// Set up ResizeObserver mock on global objects
-Object.defineProperty(global, 'ResizeObserver', {
-  writable: true,
-  configurable: true,
-  value: MockResizeObserver,
-});
-
-Object.defineProperty(window, 'ResizeObserver', {
-  writable: true,
-  configurable: true,
-  value: MockResizeObserver,
-});
-
-// Mock IntersectionObserver
-class MockIntersectionObserver {
-  callback: IntersectionObserverCallback;
-
-  constructor(callback: IntersectionObserverCallback) {
-    this.callback = callback;
-  }
-
-  observe = jest.fn();
-  disconnect = jest.fn();
-  unobserve = jest.fn();
-}
-
-Object.defineProperty(global, 'IntersectionObserver', {
-  writable: true,
-  configurable: true,
-  value: MockIntersectionObserver,
-});
-
-Object.defineProperty(window, 'IntersectionObserver', {
-  writable: true,
-  configurable: true,
-  value: MockIntersectionObserver,
-});
-
-// Mock window.matchMedia
-Object.defineProperty(window, 'matchMedia', {
-  writable: true,
-  value: jest.fn().mockImplementation(query => ({
-    matches: false,
-    media: query,
-    onchange: null,
-    addListener: jest.fn(),
-    removeListener: jest.fn(),
-    addEventListener: jest.fn(),
-    removeEventListener: jest.fn(),
-    dispatchEvent: jest.fn(),
-  })),
-});
-TimeAgo.addDefaultLocale(en);
-TimeAgo.addLocale(ru);
-jest.mock('@/utils/images', () => ({
-  cn: jest.fn((...classes) => classes.filter(Boolean).join(' ')),
-  getImageWithDimensions: jest.fn((url, width, height) => {
-    if (width && height) {
-      return { url: `${url}?w=${width}&h=${height}`, srcset: `${url}?w=${width}&h=${height}` };
-    }
-    if (width) {
-      return {
-        url: `${url}?w=${width}`,
-        srcset: `${url}?w=${width}`,
-      };
-    }
-    return { url, srcset: url };
-  }),
-  getImageTransformationsUrl: jest.fn(({ url }) => {
-    if (!url) {
-      console.warn('getImageTransformationsUrl: No URL provided');
-      return '';
-    }
-    return url;
-  }),
-}));
-
-jest.mock('@/utils/apolloClient', () => ({
-  createApolloClient: jest.fn(() => ({
-    query: jest.fn(),
-    mutate: jest.fn(),
-    subscribe: jest.fn(),
-    cache: {
-      readQuery: jest.fn(),
-      writeQuery: jest.fn(),
-    },
-  })),
-  createApolloUploadClient: jest.fn(() => ({
-    query: jest.fn(),
-    mutate: jest.fn(),
-    subscribe: jest.fn(),
-    cache: {
-      readQuery: jest.fn(),
-      writeQuery: jest.fn(),
-    },
-  })),
-}));
-
-// Mock Apollo Client Provider if needed
-jest.mock('@apollo/client', () => ({
-  ...jest.requireActual('@apollo/client'),
-  // ApolloProvider: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
-  useQuery: jest.fn(() => ({
-    data: null,
-    loading: false,
-    error: null,
-  })),
-  useMutation: jest.fn(() => [jest.fn(), { data: null, loading: false, error: null }]),
-}));
-
-jest.mock('quill', () => {
-  // Mock Quill constructor
-  const MockQuill = function (
-    this: {
-      selector: string;
-      options: any;
-      root: any;
-      container: any;
-      getContents: any;
-      setContents: jest.Mock<any, any, any>;
-      getText: any;
-      getLength: any;
-      insertText: jest.Mock<any, any, any>;
-      deleteText: jest.Mock<any, any, any>;
-      formatText: jest.Mock<any, any, any>;
-      getSelection: any;
-      setSelection: jest.Mock<any, any, any>;
-      focus: jest.Mock<any, any, any>;
-      blur: jest.Mock<any, any, any>;
-      enable: jest.Mock<any, any, any>;
-      disable: jest.Mock<any, any, any>;
-      on: jest.Mock<any, any, any>;
-      off: jest.Mock<any, any, any>;
-      once: jest.Mock<any, any, any>;
-      emit: jest.Mock<any, any, any>;
-      __esModule: true;
-      default: {
-        (selector: string, options: any): any;
-        // Add static methods that Quill might have
-        register: jest.Mock<any, any, any>;
-        find: jest.Mock<any, any, any>;
-        import: jest.Mock<any, any, any>;
-      };
-    },
-    selector: string,
-    options: any
-  ) {
-    // Store the selector and options
-    this.selector = selector;
-    this.options = options;
-    this.root = null;
-    this.container = null;
-
-    // Mock methods that Quill instances typically have
-    this.getContents = jest.fn(() => ({ ops: [] }));
-    this.setContents = jest.fn();
-    this.getText = jest.fn(() => '');
-    this.getLength = jest.fn(() => 0);
-    this.insertText = jest.fn();
-    this.deleteText = jest.fn();
-    this.formatText = jest.fn();
-    this.getSelection = jest.fn(() => null);
-    this.setSelection = jest.fn();
-    this.focus = jest.fn();
-    this.blur = jest.fn();
-    this.enable = jest.fn();
-    this.disable = jest.fn();
-    this.on = jest.fn();
-    this.off = jest.fn();
-    this.once = jest.fn();
-    this.emit = jest.fn();
-
-    // Create mock DOM elements without accessing document directly
-    const mockElement = {
-      id: selector?.replace?.('#', ''),
-      innerHTML: '',
-      textContent: '',
-      addEventListener: jest.fn(),
-      removeEventListener: jest.fn(),
-      appendChild: jest.fn(),
-      removeChild: jest.fn(),
-      querySelector: jest.fn(),
-      querySelectorAll: jest.fn(() => []),
-      classList: {
-        add: jest.fn(),
-        remove: jest.fn(),
-        contains: jest.fn(() => false),
-        toggle: jest.fn(),
-      },
-      style: {},
-      setAttribute: jest.fn(),
-      getAttribute: jest.fn(),
-      removeAttribute: jest.fn(),
-    };
-
-    this.root = mockElement;
-    this.container = mockElement;
-
-    return this;
-  };
-
-  // Add static methods that Quill might have
-  MockQuill.register = jest.fn();
-  MockQuill.find = jest.fn();
-  MockQuill.import = jest.fn();
-
-  return {
-    __esModule: true,
-    default: MockQuill,
-  };
-});
-
-jest.mock('react-responsive-masonry', () => {
-  return {
-    __esModule: true,
-    default: ({
-      children,
-      columnsCount,
-      gutter,
-    }: {
-      children: React.ReactNode;
-      columnsCount: number;
-      gutter: string | number;
-    }) => (
-      <div
-        data-testid='mock-masonry'
-        className='mock-masonry-grid'
-        style={{
-          display: 'grid',
-          gridTemplateColumns: `repeat(${columnsCount}, 1fr)`,
-          gap: gutter,
-        }}
-      >
-        {children}
-      </div>
-    ),
-    ResponsiveMasonry: ({ children }: { children: React.ReactNode }) => (
-      <div data-testid='mock-responsive-masonry' className='mock-responsive-masonry'>
-        {children}
-      </div>
-    ),
-  };
-});