@udixio/ui-react 0.0.1 → 0.1.0

package/src/tests/Button.spec.tsx

@@ -0,0 +1,67 @@
+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/udixio.css

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

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

package/tsconfig.json

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

package/tsconfig.lib.json

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

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

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

@@ -0,0 +1,75 @@
+/// <reference types='vitest' />
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import dts from 'vite-plugin-dts';
+import * as path from 'path';
+
+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)).udixioVite();
+  }
+};
+
+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'),
+    }),
+  ],
+  // Uncomment this if you are using workers.
+  // worker: {
+  //  plugins: [ nxViteTsPaths() ],
+  // },
+  // 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: {
+      // 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',
+        'react-dom',
+        'react/jsx-runtime',
+        'react-textarea-autosize',
+        'tailwind-merge',
+        'motion',
+        'motion/react',
+        '@udixio/theme',
+      ],
+    },
+  },
+  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,
+    },
+  },
+}));

package/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../packages/ui-react/src/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC"}