@udixio/ui-react 2.10.12 → 2.10.14

package/src/stories/text-inputs/text-field.stories.tsx

@@ -1,135 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import React from 'react';
-
-import { v4 as uuidv4 } from 'uuid';
-import {
-  faCircleXmark,
-  faMagnifyingGlass,
-} from '@fortawesome/free-solid-svg-icons';
-import {
-  IconButton,
-  ReactProps,
-  TextField,
-  TextFieldInterface,
-  TextFieldVariant,
-} from '../../';
-
-// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-const meta = {
-  title: 'Text Inputs/TextField',
-  component: TextField,
-  parameters: {
-    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/react/configure/story-layout
-  },
-  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/react/writing-docs/autodocs
-  tags: ['autodocs'],
-  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
-  argTypes: {},
-} satisfies Meta<typeof TextField>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// Function to create TextField stories
-const createTextFieldStory = (
-  variant: TextFieldVariant,
-  args?: Partial<ReactProps<TextFieldInterface>>,
-) => {
-  const TextFieldStory: Story = (args: ReactProps<TextFieldInterface>) => (
-    <div className="">
-      <div className="flex m-4 gap-4 items-center">
-        <TextField {...args} name={'example' + uuidv4()} value="Input" />
-        <TextField
-          {...args}
-          name={'example' + uuidv4()}
-          value="Input"
-          errorText="invalid value"
-        />
-        <TextField
-          {...args}
-          name={'example' + uuidv4()}
-          value="Input"
-          disabled
-        />
-      </div>
-      <div className="flex m-4 gap-4 items-center">
-        <TextField {...args} name={'example' + uuidv4()} />
-        <TextField
-          {...args}
-          name={'example' + uuidv4()}
-          errorText="invalid value"
-        />
-        <TextField {...args} name={'example' + uuidv4()} disabled />
-      </div>
-    </div>
-  );
-  TextFieldStory.args = {
-    variant: variant,
-    label: 'Label',
-    placeholder: 'Placeholder',
-    supportingText: 'Supporting text',
-    ...args,
-  };
-  return TextFieldStory;
-};
-
-export const Filled = createTextFieldStory('filled');
-
-export const FilledTrailingIcon = createTextFieldStory('filled', {
-  trailingIcon: (
-    <IconButton
-      onClick={() => console.log('clicked')}
-      arialLabel="Action description"
-      icon={faCircleXmark}
-    />
-  ),
-});
-
-export const FilledLealingIconAndTrailingIcon = createTextFieldStory('filled', {
-  leadingIcon: faMagnifyingGlass,
-  trailingIcon: (
-    <IconButton
-      onClick={() => console.log('clicked')}
-      arialLabel="Action description"
-      icon={faCircleXmark}
-    />
-  ),
-});
-
-export const FilledLealingIcon = createTextFieldStory('filled', {
-  leadingIcon: faMagnifyingGlass,
-});
-
-export const Outlined = createTextFieldStory('outlined');
-
-export const OutlinedTrailingIcon = createTextFieldStory('outlined', {
-  trailingIcon: (
-    <IconButton
-      onClick={() => console.log('clicked')}
-      arialLabel="Action description"
-      icon={faCircleXmark}
-    />
-  ),
-});
-
-export const OutlinedLealingIconAndTrailingIcon = createTextFieldStory(
-  'outlined',
-  {
-    leadingIcon: faMagnifyingGlass,
-    trailingIcon: (
-      <IconButton
-        onClick={() => console.log('clicked')}
-        arialLabel="Action description"
-        icon={faCircleXmark}
-      />
-    ),
-  },
-);
-
-export const OutlinedLealingIcon = createTextFieldStory('outlined', {
-  leadingIcon: faMagnifyingGlass,
-  className: () => ({
-    textField: 'w-full md:w-fit md:flex-1 ',
-    content: 'rounded-full overflow-hidden bg-surface',
-  }),
-});

package/src/tests/Button.spec.tsx

@@ -1,67 +0,0 @@
-import React from 'react';
-import { fireEvent, render, screen } from '@testing-library/react';
-import { Button } from '../lib/index.js';
-import '@testing-library/jest-dom';
-import { vi } from 'vitest';
-import { faPlus } from '@fortawesome/free-solid-svg-icons';
-
-describe('Button', () => {
-  it('renders correctly with default props', () => {
-    render(<Button label="Test Button" />);
-
-    const button = screen.getByText('Test Button');
-    expect(button).toBeInTheDocument();
-  });
-
-  it('disables the button when disabled prop is true', () => {
-    render(<Button label="Test Button" disabled />);
-
-    const button = screen.getByText('Test Button').closest('button');
-    expect(button).toBeDisabled();
-  });
-
-  it('calls onClick handler when clicked', () => {
-    const handleClick = vi.fn();
-    render(<Button label="Test Button" onClick={handleClick} />);
-
-    const button = screen.getByText('Test Button');
-    fireEvent.click(button);
-
-    expect(handleClick).toHaveBeenCalledTimes(1);
-  });
-
-  it('does not call onClick handler when disabled', () => {
-    const handleClick = vi.fn();
-    render(<Button label="Test Button" onClick={handleClick} disabled />);
-
-    const button = screen.getByText('Test Button');
-    fireEvent.click(button);
-
-    expect(handleClick).not.toHaveBeenCalled();
-  });
-
-  it('renders with an icon when icon prop is provided', () => {
-    render(<Button label="Test Button" icon={faPlus} />);
-
-    // This is a mock test, so we're not actually checking for the icon
-    // In a real test, you would check for the icon element
-    const button = screen.getByText('Test Button').closest('button');
-    expect(button).toBeInTheDocument();
-  });
-
-  it('renders as an anchor tag when href is provided', () => {
-    render(<Button label="Test Button" href="https://example.com" />);
-
-    const link = screen.getByText('Test Button').closest('a');
-    expect(link).toHaveAttribute('href', 'https://example.com');
-  });
-
-  it('shows loading indicator when loading prop is true', () => {
-    render(<Button label="Test Button" loading />);
-
-    // This is a mock test, so we're not actually checking for the loading indicator
-    // In a real test, you would check for the ProgressIndicator component
-    const button = screen.getByText('Test Button').closest('button');
-    expect(button).toBeInTheDocument();
-  });
-});

package/src/tests/useClassNames.spec.tsx

@@ -1,82 +0,0 @@
-import React from 'react';
-import { describe, expect, it } from 'vitest';
-import { renderHook } from '@testing-library/react';
-import { useClassNames } from '../lib/utils/styles/use-classnames';
-import type { ComponentInterface } from '../lib/utils/component';
-import type { ClassNameComponent } from '../lib/utils/styles/get-classname';
-
-// Minimal fake component interface for testing the hook
-interface TestComp extends ComponentInterface {
-  type: 'div';
-  elements: ['root', 'label'];
-  props: { label?: string };
-  states: { active?: boolean };
-}
-
-const defaultConfig: ClassNameComponent<TestComp> = (s) => ({
-  root: 'bg-default',
-  label: s.active ? 'text-active' : 'text-inactive',
-});
-
-describe('useClassNames', () => {
-  it('merges string default with function override; override wins', () => {
-    const override: ClassNameComponent<TestComp> = () => ({
-      root: 'px-2 custom-override',
-      label: 'text-red-500',
-    });
-
-    const { result, rerender } = renderHook(
-      (props: any) =>
-        useClassNames<TestComp>('root', 'bg-default-root', {
-          ...props,
-          className: override,
-        }),
-      { initialProps: { active: false } },
-    );
-
-    expect(result.current.root).toContain('root'); // kebab-case prefix
-    expect(result.current.root).toContain('relative'); // default relative
-    // override precedence should keep both but allow override to win on conflicts; here no conflict
-    expect(result.current.root).toContain('custom-override');
-
-    // label from default function should be present and overridden by override
-    // default for inactive: text-inactive, but override sets text-red-500
-    // since we didn't include defaultConfig, this ensures hook handles function override w/ string default
-
-    rerender({ active: true });
-    // Memo invalidated due to states change; new value produced
-    expect(result.current.root).toContain('custom-override');
-  });
-
-  it('merges function default with string override on default element', () => {
-    const { result } = renderHook(() =>
-      useClassNames<TestComp>('root', defaultConfig, {
-        active: true,
-        className: 'p-4',
-      }),
-    );
-    expect(result.current.root).toContain('root');
-    expect(result.current.root).toContain('relative');
-    expect(result.current.root).toContain('p-4');
-    expect(result.current.label).toContain('label');
-    expect(result.current.label).toContain('text-active');
-  });
-
-  it('memoizes: same inputs => stable reference', () => {
-    const states = { active: false, className: 'm-1' } as any;
-    const { result, rerender } = renderHook(
-      (p: any) => useClassNames<TestComp>('root', defaultConfig, p.states),
-      { initialProps: { states } },
-    );
-
-    const first = result.current;
-    rerender({ states }); // same reference
-    const second = result.current;
-    expect(second).toBe(first);
-
-    // change shallow reference -> new object allocated
-    rerender({ states: { ...states } });
-    const third = result.current;
-    expect(third).not.toBe(first);
-  });
-});

package/src/udixio.css

@@ -1,120 +0,0 @@
-@plugin "@udixio/tailwind" {
-  colorKeys: surface, surface-dim, surface-bright, surface-container-lowest, surface-container-low, surface-container, surface-container-high, surface-container-highest, on-surface, on-surface-variant, outline, outline-variant, inverse-surface, inverse-on-surface, primary, primary-dim, on-primary, primary-container, on-primary-container, primary-fixed, primary-fixed-dim, on-primary-fixed, on-primary-fixed-variant, inverse-primary, secondary, secondary-dim, on-secondary, secondary-container, on-secondary-container, secondary-fixed, secondary-fixed-dim, on-secondary-fixed, on-secondary-fixed-variant, tertiary, tertiary-dim, on-tertiary, tertiary-container, on-tertiary-container, tertiary-fixed, tertiary-fixed-dim, on-tertiary-fixed, on-tertiary-fixed-variant, error, error-dim, on-error, error-container, on-error-container, surface-variant, surface-tint, background, on-background;
-  fontStyles: display-large fontWeight[400] fontSize[3.5625] lineHeight[4] letterSpacing[-0.015625] fontFamily[expressive], display-medium fontWeight[400] fontSize[2.8125] lineHeight[3.25] fontFamily[expressive], display-small fontWeight[400] fontSize[2.25] lineHeight[2.75] fontFamily[expressive], headline-large fontWeight[400] fontSize[2] lineHeight[2.5] fontFamily[expressive], headline-medium fontWeight[400] fontSize[1.75] lineHeight[2.25] fontFamily[expressive], headline-small fontWeight[400] fontSize[1.5] lineHeight[2] fontFamily[expressive], title-large fontWeight[400] fontSize[1.375] lineHeight[1.75] fontFamily[neutral], title-medium fontWeight[500] fontSize[1] lineHeight[1.5] fontFamily[neutral] letterSpacing[0.009375], title-small fontWeight[500] fontSize[0.875] lineHeight[1.25] fontFamily[neutral] letterSpacing[0.00625], label-large fontWeight[500] fontSize[0.875] lineHeight[1.25] fontFamily[neutral] letterSpacing[0.00625], label-medium fontWeight[500] fontSize[0.75] lineHeight[1] fontFamily[neutral] letterSpacing[0.03125], label-small fontWeight[500] fontSize[0.6875] lineHeight[1] fontFamily[neutral] letterSpacing[0.03125], body-large fontWeight[400] fontSize[1] lineHeight[1.5625] fontFamily[neutral] letterSpacing[0.03125], body-medium fontWeight[400] fontSize[0.875] lineHeight[1.25] fontFamily[neutral] letterSpacing[0.015625], body-small fontWeight[400] fontSize[0.75] lineHeight[1] fontFamily[neutral] letterSpacing[0.025];
-  responsiveBreakPoints: lg 1.125;
-}
-@custom-variant dark (&:where(.dark, .dark *));
-@theme {
-  --color-*: initial;
-  --color-surface: #fdf7fe;
-  --color-surface-dim: #ded8e4;
-  --color-surface-bright: #fdf7fe;
-  --color-surface-container-lowest: #ffffff;
-  --color-surface-container-low: #f8f1fa;
-  --color-surface-container: #f2ecf5;
-  --color-surface-container-high: #ece6f0;
-  --color-surface-container-highest: #e7e0ec;
-  --color-on-surface: #34313a;
-  --color-on-surface-variant: #625c6f;
-  --color-outline: #7e788c;
-  --color-outline-variant: #b6aec4;
-  --color-inverse-surface: #0f0d12;
-  --color-inverse-on-surface: #f5eff5;
-  --color-primary: #655789;
-  --color-primary-dim: #594b7c;
-  --color-on-primary: #fdf7ff;
-  --color-primary-container: #d4c3fd;
-  --color-on-primary-container: #493c6c;
-  --color-primary-fixed: #d4c3fd;
-  --color-primary-fixed-dim: #c6b6ee;
-  --color-on-primary-fixed: #352857;
-  --color-on-primary-fixed-variant: #524576;
-  --color-inverse-primary: #d4c3fd;
-  --color-secondary: #625c71;
-  --color-secondary-dim: #565065;
-  --color-on-secondary: #fdf7ff;
-  --color-secondary-container: #e8def8;
-  --color-on-secondary-container: #554f63;
-  --color-secondary-fixed: #e8def8;
-  --color-secondary-fixed-dim: #dad0ea;
-  --color-on-secondary-fixed: #423c50;
-  --color-on-secondary-fixed-variant: #5f586e;
-  --color-tertiary: #7b5270;
-  --color-tertiary-dim: #6e4664;
-  --color-on-tertiary: #fff7f9;
-  --color-tertiary-container: #f4bfe3;
-  --color-on-tertiary-container: #5f3956;
-  --color-tertiary-fixed: #f4bfe3;
-  --color-tertiary-fixed-dim: #e5b2d5;
-  --color-on-tertiary-fixed: #4a2642;
-  --color-on-tertiary-fixed-variant: #694260;
-  --color-error: #a8364b;
-  --color-error-dim: #6b0221;
-  --color-on-error: #fff7f7;
-  --color-error-container: #f97386;
-  --color-on-error-container: #6e0523;
-  --color-surface-variant: #e7e0ec;
-  --color-surface-tint: #655789;
-  --color-background: #fdf7fe;
-  --color-on-background: #34313a;
-}
-@layer theme {
-  .dark {
-  --color-surface: #0f0d12;
-  --color-surface-dim: #0f0d12;
-  --color-surface-bright: #2e2b34;
-  --color-surface-container-lowest: #000000;
-  --color-surface-container-low: #141218;
-  --color-surface-container: #1b181f;
-  --color-surface-container-high: #211e26;
-  --color-surface-container-highest: #27242d;
-  --color-on-surface: #eae3ef;
-  --color-on-surface-variant: #afa8bd;
-  --color-outline: #797286;
-  --color-outline-variant: #4b4557;
-  --color-inverse-surface: #fdf7fe;
-  --color-inverse-on-surface: #322f34;
-  --color-primary: #cdc0ec;
-  --color-primary-dim: #bfb2de;
-  --color-on-primary: #443a5f;
-  --color-primary-container: #574d72;
-  --color-on-primary-container: #e9deff;
-  --color-primary-fixed: #ded0fe;
-  --color-primary-fixed-dim: #d0c3ef;
-  --color-on-primary-fixed: #3c3256;
-  --color-on-primary-fixed-variant: #594e74;
-  --color-inverse-primary: #645980;
-  --color-secondary: #cbc2db;
-  --color-secondary-dim: #beb5cd;
-  --color-on-secondary: #433d51;
-  --color-secondary-container: #3e384c;
-  --color-on-secondary-container: #c4bbd4;
-  --color-secondary-fixed: #e8def8;
-  --color-secondary-fixed-dim: #dad0ea;
-  --color-on-secondary-fixed: #423c50;
-  --color-on-secondary-fixed-variant: #5f586e;
-  --color-tertiary: #ffcfef;
-  --color-tertiary-dim: #f4bfe3;
-  --color-on-tertiary: #69415f;
-  --color-tertiary-container: #f4bfe3;
-  --color-on-tertiary-container: #5f3956;
-  --color-tertiary-fixed: #f4bfe3;
-  --color-tertiary-fixed-dim: #e5b2d5;
-  --color-on-tertiary-fixed: #4a2642;
-  --color-on-tertiary-fixed-variant: #694260;
-  --color-error: #f97386;
-  --color-error-dim: #c44b5f;
-  --color-on-error: #490013;
-  --color-error-container: #871c34;
-  --color-on-error-container: #ff97a3;
-  --color-surface-variant: #27242d;
-  --color-surface-tint: #cdc0ec;
-  --color-background: #0f0d12;
-  --color-on-background: #eae3ef;
-  }
-}
-
-@theme {
-  --font-expressive: "Roboto", "sans-serif";
-  --font-neutral: "Roboto", "sans-serif";
-}

package/theme.config.ts

@@ -1,7 +0,0 @@
-import { defineConfig, FontPlugin } from '@udixio/theme';
-import { TailwindPlugin } from '@udixio/tailwind';
-
-export default defineConfig({
-  sourceColor: '#6750A4',
-  plugins: [new FontPlugin({}), new TailwindPlugin({})],
-});

package/tsconfig.json

@@ -1,16 +0,0 @@
-{
-  "extends": "../../tsconfig.base.json",
-  "files": [],
-  "include": [],
-  "references": [
-    {
-      "path": "./tsconfig.lib.json"
-    },
-    {
-      "path": "./tsconfig.spec.json"
-    },
-    {
-      "path": "./tsconfig.storybook.json"
-    }
-  ]
-}

package/tsconfig.lib.json

@@ -1,51 +0,0 @@
-{
-  "extends": "../../tsconfig.base.json",
-  "compilerOptions": {
-    "baseUrl": ".",
-    "rootDir": "src",
-    "outDir": "dist",
-    "tsBuildInfoFile": "dist/tsconfig.lib.tsbuildinfo",
-    "emitDeclarationOnly": true,
-    "forceConsistentCasingInFileNames": true,
-    "jsx": "react-jsx",
-    "types": [
-      "node",
-      "vite/client"
-    ],
-    "lib": [
-      "es2022",
-      "dom",
-      "dom.iterable"
-    ]
-  },
-  "include": [
-    "src/**/*.ts",
-    "src/**/*.tsx"
-  ],
-  "references": [
-    {
-      "path": "../tailwind/tsconfig.lib.json"
-    },
-    {
-      "path": "../theme/tsconfig.lib.json"
-    }
-  ],
-  "exclude": [
-    "vite.config.ts",
-    "vite.config.mts",
-    "vitest.config.ts",
-    "vitest.config.mts",
-    "src/**/*.test.ts",
-    "src/**/*.spec.ts",
-    "src/**/*.test.tsx",
-    "src/**/*.spec.tsx",
-    "src/**/*.test.js",
-    "src/**/*.spec.js",
-    "src/**/*.test.jsx",
-    "src/**/*.spec.jsx",
-    "**/*.stories.ts",
-    "**/*.stories.js",
-    "**/*.stories.jsx",
-    "**/*.stories.tsx"
-  ]
-}

package/tsconfig.spec.json

@@ -1,37 +0,0 @@
-{
-  "extends": "../../tsconfig.base.json",
-  "compilerOptions": {
-    "outDir": "./out-tsc/vitest",
-    "types": [
-      "vitest/globals",
-      "vitest/importMeta",
-      "vite/client",
-      "node",
-      "vitest"
-    ],
-    "module": "nodenext",
-    "moduleResolution": "nodenext",
-    "forceConsistentCasingInFileNames": true,
-    "jsx": "react-jsx"
-  },
-  "include": [
-    "vite.config.ts",
-    "vite.config.mts",
-    "vitest.config.ts",
-    "vitest.config.mts",
-    "src/**/*.test.ts",
-    "src/**/*.spec.ts",
-    "src/**/*.test.tsx",
-    "src/**/*.spec.tsx",
-    "src/**/*.test.js",
-    "src/**/*.spec.js",
-    "src/**/*.test.jsx",
-    "src/**/*.spec.jsx",
-    "src/**/*.d.ts"
-  ],
-  "references": [
-    {
-      "path": "./tsconfig.lib.json"
-    }
-  ]
-}

package/tsconfig.storybook.json

@@ -1,38 +0,0 @@
-{
-  "extends": "../../tsconfig.base.json",
-  "compilerOptions": {
-    "outDir": "out-tsc/storybook",
-    "module": "esnext",
-    "moduleResolution": "bundler",
-    "jsx": "preserve"
-  },
-  "exclude": [
-    "src/**/*.spec.ts",
-    "src/**/*.test.ts",
-    "src/**/*.spec.js",
-    "src/**/*.test.js",
-    "src/**/*.spec.tsx",
-    "src/**/*.test.tsx",
-    "src/**/*.spec.jsx",
-    "src/**/*.test.js"
-  ],
-  "include": [
-    "src/**/*.stories.ts",
-    "src/**/*.stories.js",
-    "src/**/*.stories.jsx",
-    "src/**/*.stories.tsx",
-    "src/**/*.stories.mdx",
-    ".storybook/*.js",
-    ".storybook/*.ts"
-  ],
-  "references": [
-    {
-      "path": "./tsconfig.lib.json"
-    }
-  ],
-  "files": [
-    "../../node_modules/@nx/react/typings/styled-jsx.d.ts",
-    "../../node_modules/@nx/react/typings/cssmodule.d.ts",
-    "../../node_modules/@nx/react/typings/image.d.ts"
-  ]
-}

package/vite.config.ts

@@ -1,82 +0,0 @@
-/// <reference types='vitest' />
-import { defineConfig } from 'vite';
-import react from '@vitejs/plugin-react';
-import dts from 'vite-plugin-dts';
-import * as path from 'path';
-import { visualizer } from 'rollup-plugin-visualizer';
-
-const getUdixioVite = async () => {
-  // @ts-expect-error - NX_GRAPH_CREATION is a global variable set by Nx
-  if (global.NX_GRAPH_CREATION) {
-    return;
-  } else {
-    const dynamicPath = '@udixio/theme';
-    return (await import(dynamicPath)).vitePlugin;
-  }
-};
-
-export default defineConfig(async () => ({
-  root: __dirname,
-  cacheDir: '../../node_modules/.vite/packages/ui-react',
-  plugins: [
-    await getUdixioVite(),
-    react(),
-    dts({
-      entryRoot: 'src',
-      tsconfigPath: path.join(__dirname, 'tsconfig.lib.json'),
-    }),
-    visualizer({
-      filename: '../../stats/ui-react.html',
-      open: false,
-      gzipSize: true,
-      brotliSize: true,
-    }),
-  ],
-  // Configuration for building your library.
-  // See: https://vitejs.dev/guide/build.html#library-mode
-  build: {
-    outDir: './dist',
-    emptyOutDir: true,
-    reportCompressedSize: true,
-    commonjsOptions: {
-      transformMixedEsModules: true,
-    },
-    lib: {
-      ssr: true,
-      // Could also be a dictionary or array of multiple entry points.
-      entry: 'src/index.ts',
-      name: '@udixio/ui-react',
-      fileName: 'index',
-      // Change this to the formats you want to support.
-      // Don't forget to update your package.json as well.
-      formats: ['es' as const, 'cjs' as const],
-    },
-    rollupOptions: {
-      // External packages that should not be bundled into your library.
-      external: [
-        'react',
-        'clsx',
-        'throttle-debounce',
-        'react-dom',
-        'react/jsx-runtime',
-        'react-textarea-autosize',
-        'tailwind-merge',
-        'motion',
-        '@udixio/theme',
-        '@udixio/tailwind',
-        'motion/react',
-      ],
-    },
-  },
-  test: {
-    watch: false,
-    globals: true,
-    environment: 'jsdom',
-    include: ['{src,tests}/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
-    reporters: ['default'],
-    coverage: {
-      reportsDirectory: './test-output/vitest/coverage',
-      provider: 'v8' as const,
-    },
-  },
-}));