@dezkareid/components 0.0.0 → 1.0.0

package/src/react/Button/index.tsx

@@ -0,0 +1,31 @@
+import type { ButtonHTMLAttributes } from 'react';
+import cx from 'classnames';
+import type { ButtonProps } from '../../shared/types/button';
+import styles from '../../css/button.module.css';
+
+type Props = ButtonProps & ButtonHTMLAttributes<HTMLButtonElement>;
+
+export function Button({
+  variant = 'primary',
+  size = 'md',
+  disabled = false,
+  children,
+  className,
+  ...rest
+}: Props) {
+  return (
+    <button
+      className={cx(
+        styles.button,
+        styles[`button--${variant}`],
+        styles[`button--${size}`],
+        disabled && styles['button--disabled'],
+        className,
+      )}
+      disabled={disabled}
+      {...rest}
+    >
+      {children}
+    </button>
+  );
+}

package/src/react/Card/index.test.tsx

@@ -0,0 +1,38 @@
+import { render, screen } from '@testing-library/react';
+import { describe, it, expect } from 'vitest';
+import { Card } from './index';
+
+describe('Card', () => {
+  it('renders children', () => {
+    render(<Card>Card content</Card>);
+    expect(screen.getByText('Card content')).toBeInTheDocument();
+  });
+
+  it('renders arbitrary children', () => {
+    render(
+      <Card>
+        <h2>Title</h2>
+        <p>Body</p>
+      </Card>
+    );
+    expect(screen.getByText('Title')).toBeInTheDocument();
+    expect(screen.getByText('Body')).toBeInTheDocument();
+  });
+
+  it('applies raised elevation by default', () => {
+    const { container } = render(<Card>Content</Card>);
+    expect((container.firstChild as HTMLElement).className).toMatch(/card--raised/);
+  });
+
+  it('applies flat elevation when set', () => {
+    const { container } = render(<Card elevation="flat">Content</Card>);
+    const el = container.firstChild as HTMLElement;
+    expect(el.className).toMatch(/card--flat/);
+    expect(el.className).not.toMatch(/card--raised/);
+  });
+
+  it('applies raised elevation when explicitly set', () => {
+    const { container } = render(<Card elevation="raised">Content</Card>);
+    expect((container.firstChild as HTMLElement).className).toMatch(/card--raised/);
+  });
+});

package/src/react/Card/index.tsx

@@ -0,0 +1,14 @@
+import type { HTMLAttributes } from 'react';
+import cx from 'classnames';
+import type { CardProps } from '../../shared/types/card';
+import styles from '../../css/card.module.css';
+
+type Props = CardProps & HTMLAttributes<HTMLDivElement>;
+
+export function Card({ elevation = 'raised', children, className, ...rest }: Props) {
+  return (
+    <div className={cx(styles.card, styles[`card--${elevation}`], className)} {...rest}>
+      {children}
+    </div>
+  );
+}

package/src/react/Tag/index.test.tsx

@@ -0,0 +1,35 @@
+import { render, screen } from '@testing-library/react';
+import { describe, it, expect } from 'vitest';
+import { Tag } from './index';
+
+describe('Tag', () => {
+  it('renders children content', () => {
+    render(<Tag>Label</Tag>);
+    expect(screen.getByText('Label')).toBeInTheDocument();
+  });
+
+  it('renders arbitrary children (elements)', () => {
+    render(<Tag><strong>Bold label</strong></Tag>);
+    expect(screen.getByText('Bold label')).toBeInTheDocument();
+  });
+
+  it('renders default variant', () => {
+    render(<Tag variant="default">Default</Tag>);
+    expect(screen.getByText('Default').className).toMatch(/tag--default/);
+  });
+
+  it('renders success variant', () => {
+    render(<Tag variant="success">Success</Tag>);
+    expect(screen.getByText('Success').className).toMatch(/tag--success/);
+  });
+
+  it('renders danger variant', () => {
+    render(<Tag variant="danger">Danger</Tag>);
+    expect(screen.getByText('Danger').className).toMatch(/tag--danger/);
+  });
+
+  it('defaults to default variant when no variant is provided', () => {
+    render(<Tag>No variant</Tag>);
+    expect(screen.getByText('No variant').className).toMatch(/tag--default/);
+  });
+});

package/src/react/Tag/index.tsx

@@ -0,0 +1,14 @@
+import type { HTMLAttributes } from 'react';
+import cx from 'classnames';
+import type { TagProps } from '../../shared/types/tag';
+import styles from '../../css/tag.module.css';
+
+type Props = TagProps & HTMLAttributes<HTMLSpanElement>;
+
+export function Tag({ variant = 'default', children, className, ...rest }: Props) {
+  return (
+    <span className={cx(styles.tag, styles[`tag--${variant}`], className)} {...rest}>
+      {children}
+    </span>
+  );
+}

package/src/react/ThemeToggle/index.test.tsx

@@ -0,0 +1,84 @@
+import { render, screen, act } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { ThemeToggle } from './index';
+
+function mockMatchMedia(prefersDark: boolean) {
+  Object.defineProperty(window, 'matchMedia', {
+    writable: true,
+    value: vi.fn((query: string) => ({
+      matches: query === '(prefers-color-scheme: dark)' ? prefersDark : false,
+      media: query,
+      onchange: null,
+      addEventListener: vi.fn(),
+      removeEventListener: vi.fn(),
+      dispatchEvent: vi.fn(),
+    })),
+  });
+}
+
+beforeEach(() => {
+  localStorage.clear();
+  document.documentElement.removeAttribute('color-scheme');
+  mockMatchMedia(false);
+});
+
+describe('ThemeToggle', () => {
+  it('renders a button', () => {
+    render(<ThemeToggle />);
+    expect(screen.getByRole('button')).toBeInTheDocument();
+  });
+
+  it('initialises to light when localStorage is empty and OS preference is light', async () => {
+    mockMatchMedia(false);
+    await act(async () => { render(<ThemeToggle />); });
+    expect(screen.getByRole('button')).toHaveTextContent('Light');
+    expect(document.documentElement.getAttribute('color-scheme')).toBe('light');
+  });
+
+  it('initialises to dark from OS preference when localStorage is empty', async () => {
+    mockMatchMedia(true);
+    await act(async () => { render(<ThemeToggle />); });
+    expect(screen.getByRole('button')).toHaveTextContent('Dark');
+    expect(document.documentElement.getAttribute('color-scheme')).toBe('dark');
+  });
+
+  it('initialises from localStorage over OS preference', async () => {
+    localStorage.setItem('color-scheme', 'dark');
+    mockMatchMedia(false);
+    await act(async () => { render(<ThemeToggle />); });
+    expect(screen.getByRole('button')).toHaveTextContent('Dark');
+  });
+
+  it('toggles from light to dark on click', async () => {
+    await act(async () => { render(<ThemeToggle />); });
+    await userEvent.click(screen.getByRole('button'));
+    expect(screen.getByRole('button')).toHaveTextContent('Dark');
+    expect(document.documentElement.getAttribute('color-scheme')).toBe('dark');
+  });
+
+  it('toggles from dark to light on click', async () => {
+    localStorage.setItem('color-scheme', 'dark');
+    await act(async () => { render(<ThemeToggle />); });
+    await userEvent.click(screen.getByRole('button'));
+    expect(screen.getByRole('button')).toHaveTextContent('Light');
+    expect(document.documentElement.getAttribute('color-scheme')).toBe('light');
+  });
+
+  it('persists theme to localStorage on toggle', async () => {
+    await act(async () => { render(<ThemeToggle />); });
+    await userEvent.click(screen.getByRole('button'));
+    expect(localStorage.getItem('color-scheme')).toBe('dark');
+  });
+
+  it('sets aria-pressed to true when dark', async () => {
+    localStorage.setItem('color-scheme', 'dark');
+    await act(async () => { render(<ThemeToggle />); });
+    expect(screen.getByRole('button')).toHaveAttribute('aria-pressed', 'true');
+  });
+
+  it('sets aria-pressed to false when light', async () => {
+    await act(async () => { render(<ThemeToggle />); });
+    expect(screen.getByRole('button')).toHaveAttribute('aria-pressed', 'false');
+  });
+});

package/src/react/ThemeToggle/index.tsx

@@ -0,0 +1,36 @@
+import { useState, useEffect } from 'react';
+import cx from 'classnames';
+import type { Theme } from '../../shared/types/theme-toggle';
+import { getInitialTheme, applyTheme, persistTheme } from '../../shared/js/theme';
+import styles from '../../css/theme-toggle.module.css';
+
+export function ThemeToggle() {
+  const [theme, setTheme] = useState<Theme>('light');
+
+  useEffect(() => {
+    const initial = getInitialTheme();
+    setTheme(initial);
+    applyTheme(initial);
+  }, []);
+
+  function toggle() {
+    const next: Theme = theme === 'light' ? 'dark' : 'light';
+    setTheme(next);
+    applyTheme(next);
+    persistTheme(next);
+  }
+
+  const isDark = theme === 'dark';
+
+  return (
+    <button
+      type="button"
+      className={cx(styles['theme-toggle'], isDark && styles['theme-toggle--dark'])}
+      onClick={toggle}
+      aria-label={isDark ? 'Switch to light mode' : 'Switch to dark mode'}
+      aria-pressed={isDark}
+    >
+      {isDark ? 'Dark' : 'Light'}
+    </button>
+  );
+}

package/src/react/index.ts

@@ -0,0 +1,4 @@
+export { Button } from './Button/index';
+export { Tag } from './Tag/index';
+export { Card } from './Card/index';
+export { ThemeToggle } from './ThemeToggle/index';

package/src/shared/js/theme.ts

@@ -0,0 +1,22 @@
+import type { Theme } from '../types/theme-toggle';
+
+const STORAGE_KEY = 'color-scheme';
+
+export function getInitialTheme(): Theme {
+  if (typeof window === 'undefined') return 'light';
+
+  const stored = localStorage.getItem(STORAGE_KEY);
+  if (stored === 'light' || stored === 'dark') return stored;
+
+  return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+}
+
+export function applyTheme(theme: Theme): void {
+  if (typeof window === 'undefined') return;
+  document.documentElement.setAttribute('color-scheme', theme);
+}
+
+export function persistTheme(theme: Theme): void {
+  if (typeof window === 'undefined') return;
+  localStorage.setItem(STORAGE_KEY, theme);
+}

package/src/shared/types/button.ts

@@ -0,0 +1,8 @@
+export type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost' | 'success';
+export type ButtonSize = 'sm' | 'md' | 'lg' | 'small' | 'medium' | 'large';
+
+export interface ButtonProps {
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  disabled?: boolean;
+}

package/src/shared/types/card.ts

@@ -0,0 +1,5 @@
+export type CardElevation = 'flat' | 'raised';
+
+export interface CardProps {
+  elevation?: CardElevation;
+}

package/src/shared/types/tag.ts

@@ -0,0 +1,5 @@
+export type TagVariant = 'default' | 'success' | 'danger';
+
+export interface TagProps {
+  variant?: TagVariant;
+}

package/src/shared/types/theme-toggle.ts

@@ -0,0 +1,5 @@
+export type Theme = 'light' | 'dark';
+
+export interface ThemeToggleProps {
+  // No required props — self-contained stateful component
+}

package/src/vue/Button/index.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import cx from 'classnames';
+import type { ButtonProps } from '../../shared/types/button';
+import styles from '../../css/button.module.css';
+
+const props = withDefaults(defineProps<ButtonProps>(), {
+  variant: 'primary',
+  size: 'md',
+  disabled: false,
+});
+
+const classes = computed(() =>
+  cx(
+    styles.button,
+    styles[`button--${props.variant}`],
+    styles[`button--${props.size}`],
+    props.disabled && styles['button--disabled'],
+  )
+);
+</script>
+
+<template>
+  <button :class="classes" :disabled="disabled">
+    <slot />
+  </button>
+</template>

package/src/vue/Card/index.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import cx from 'classnames';
+import type { CardProps } from '../../shared/types/card';
+import styles from '../../css/card.module.css';
+
+const props = withDefaults(defineProps<CardProps>(), {
+  elevation: 'raised',
+});
+
+const classes = computed(() => cx(styles.card, styles[`card--${props.elevation}`]));
+</script>
+
+<template>
+  <div :class="classes">
+    <slot />
+  </div>
+</template>

package/src/vue/Tag/index.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import cx from 'classnames';
+import type { TagProps } from '../../shared/types/tag';
+import styles from '../../css/tag.module.css';
+
+const props = withDefaults(defineProps<TagProps>(), {
+  variant: 'default',
+});
+
+const classes = computed(() => cx(styles.tag, styles[`tag--${props.variant}`]));
+</script>
+
+<template>
+  <span :class="classes">
+    <slot />
+  </span>
+</template>

package/src/vue/ThemeToggle/index.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import cx from 'classnames';
+import type { Theme } from '../../shared/types/theme-toggle';
+import { getInitialTheme, applyTheme, persistTheme } from '../../shared/js/theme';
+import styles from '../../css/theme-toggle.module.css';
+
+const theme = ref<Theme>('light');
+
+onMounted(() => {
+  const initial = getInitialTheme();
+  theme.value = initial;
+  applyTheme(initial);
+});
+
+function toggle() {
+  const next: Theme = theme.value === 'light' ? 'dark' : 'light';
+  theme.value = next;
+  applyTheme(next);
+  persistTheme(next);
+}
+
+const isDark = () => theme.value === 'dark';
+
+const classes = () =>
+  cx(styles['theme-toggle'], isDark() && styles['theme-toggle--dark']);
+</script>
+
+<template>
+  <button
+    type="button"
+    :class="classes()"
+    :aria-label="isDark() ? 'Switch to light mode' : 'Switch to dark mode'"
+    :aria-pressed="isDark()"
+    @click="toggle"
+  >
+    {{ isDark() ? 'Dark' : 'Light' }}
+  </button>
+</template>

package/src/vue/index.ts

@@ -0,0 +1,4 @@
+export { default as Button } from './Button/index.vue';
+export { default as Tag } from './Tag/index.vue';
+export { default as Card } from './Card/index.vue';
+export { default as ThemeToggle } from './ThemeToggle/index.vue';

package/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "jsx": "react-jsx",
+    "strict": true,
+    "declaration": true,
+    "declarationMap": true,
+    "sourceMap": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "resolveJsonModule": true,
+    "types": ["vitest/globals", "@testing-library/jest-dom"],
+    "outDir": "dist"
+  },
+  "include": ["src", "setupTests.ts"]
+}

package/vite.config.build.ts

@@ -0,0 +1,34 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import { resolve } from 'node:path';
+import type { Plugin } from 'vite';
+
+function stripCssImports(): Plugin {
+  return {
+    name: 'strip-css-imports',
+    transform(code, id) {
+      if (!id.endsWith('.ts') && !id.endsWith('.tsx')) return;
+      return code.replace(/^import\s+\w+\s+from\s+['"].*?\.module\.css['"];?\s*$/gm, '');
+    },
+  };
+}
+
+export default defineConfig({
+  plugins: [react(), stripCssImports()],
+  build: {
+    lib: {
+      entry: { react: resolve(__dirname, 'src/react/index.ts') },
+      formats: ['es'],
+    },
+    rollupOptions: {
+      external: ['react', 'react/jsx-runtime', /\.css$/],
+      output: {
+        preserveModules: true,
+        preserveModulesRoot: 'src',
+        entryFileNames: '[name].js',
+      },
+    },
+    outDir: 'dist',
+    emptyOutDir: true,
+  },
+});

package/vitest.config.ts

@@ -0,0 +1,12 @@
+import { defineConfig } from 'vitest/config';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [react()],
+  test: {
+    globals: true,
+    environment: 'jsdom',
+    setupFiles: './setupTests.ts',
+    include: ['src/react/**/*.test.{ts,tsx}'],
+  },
+});