@semiont/react-ui 0.2.35 → 0.2.37

package/src/components/viewers/__tests__/ImageViewer.test.tsx

@@ -0,0 +1,63 @@
+import { describe, it, expect } from 'vitest';
+import React from 'react';
+import { screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { renderWithProviders } from '../../../test-utils';
+import { ImageViewer } from '../ImageViewer';
+import type { ResourceUri } from '@semiont/core';
+
+describe('ImageViewer', () => {
+  const defaultProps = {
+    resourceUri: 'http://example.com/resources/abc-123' as ResourceUri,
+    mimeType: 'image/png',
+  };
+
+  it('should render an img element with correct src derived from URI', () => {
+    renderWithProviders(<ImageViewer {...defaultProps} />);
+
+    const img = screen.getByRole('img');
+    expect(img).toHaveAttribute('src', '/api/resources/abc-123');
+  });
+
+  it('should use default alt text when none provided', () => {
+    renderWithProviders(<ImageViewer {...defaultProps} />);
+
+    const img = screen.getByRole('img');
+    expect(img).toHaveAttribute('alt', 'Resource image');
+  });
+
+  it('should use custom alt text when provided', () => {
+    renderWithProviders(
+      <ImageViewer {...defaultProps} alt="A beautiful diagram" />
+    );
+
+    const img = screen.getByRole('img');
+    expect(img).toHaveAttribute('alt', 'A beautiful diagram');
+  });
+
+  it('should extract the last segment of the URI as resource ID', () => {
+    renderWithProviders(
+      <ImageViewer
+        resourceUri={'http://example.com/deep/path/to/resource-xyz' as ResourceUri}
+        mimeType="image/jpeg"
+      />
+    );
+
+    const img = screen.getByRole('img');
+    expect(img).toHaveAttribute('src', '/api/resources/resource-xyz');
+  });
+
+  it('should render with correct class names', () => {
+    const { container } = renderWithProviders(<ImageViewer {...defaultProps} />);
+
+    expect(container.querySelector('.semiont-image-viewer')).toBeInTheDocument();
+    expect(container.querySelector('.semiont-image-viewer__image')).toBeInTheDocument();
+  });
+
+  it('should set imageRendering style to auto', () => {
+    renderWithProviders(<ImageViewer {...defaultProps} />);
+
+    const img = screen.getByRole('img');
+    expect(img).toHaveStyle({ imageRendering: 'auto' });
+  });
+});

package/src/integrations/__tests__/css-modules-helper.test.tsx

@@ -0,0 +1,225 @@
+import { describe, it, expect } from 'vitest';
+import React from 'react';
+import { render } from '@testing-library/react';
+import {
+  createSemiontClassName,
+  generateDataAttributes,
+  mergeDataAttributes,
+  withCSSModules,
+  cssModulesConfig,
+  defineCSSModules,
+} from '../css-modules-helper';
+
+describe('css-modules-helper', () => {
+  describe('createSemiontClassName', () => {
+    it('returns base class when no module match', () => {
+      const build = createSemiontClassName({}, 'semiont-button');
+      expect(build({})).toBe('semiont-button');
+    });
+
+    it('adds CSS module class when available', () => {
+      const styles = { 'semiont-button': 'abc123' };
+      const build = createSemiontClassName(styles, 'semiont-button');
+      const result = build({});
+      expect(result).toContain('semiont-button');
+      expect(result).toContain('abc123');
+    });
+
+    it('appends additional classes', () => {
+      const build = createSemiontClassName({}, 'semiont-button');
+      const result = build({}, 'extra-class');
+      expect(result).toContain('semiont-button');
+      expect(result).toContain('extra-class');
+    });
+  });
+
+  describe('generateDataAttributes', () => {
+    it('generates data attributes from props', () => {
+      const attrs = generateDataAttributes({
+        variant: 'primary',
+        size: 'md',
+        loading: true,
+        fullWidth: true,
+        iconOnly: true,
+        active: true,
+        disabled: true,
+        orientation: 'horizontal',
+        attached: true,
+        spacing: 'md',
+      });
+
+      expect(attrs['data-variant']).toBe('primary');
+      expect(attrs['data-size']).toBe('md');
+      expect(attrs['data-loading']).toBe('true');
+      expect(attrs['data-full-width']).toBe('true');
+      expect(attrs['data-icon-only']).toBe('true');
+      expect(attrs['data-active']).toBe('true');
+      expect(attrs['data-disabled']).toBe('true');
+      expect(attrs['data-orientation']).toBe('horizontal');
+      expect(attrs['data-attached']).toBe('true');
+    });
+
+    it('omits undefined values for falsy booleans', () => {
+      const attrs = generateDataAttributes({
+        loading: false,
+        fullWidth: false,
+        iconOnly: false,
+        active: false,
+        disabled: false,
+        attached: false,
+      });
+
+      expect(attrs['data-loading']).toBeUndefined();
+      expect(attrs['data-full-width']).toBeUndefined();
+      expect(attrs['data-icon-only']).toBeUndefined();
+      expect(attrs['data-active']).toBeUndefined();
+      expect(attrs['data-disabled']).toBeUndefined();
+      expect(attrs['data-attached']).toBeUndefined();
+    });
+
+    it('omits spacing when attached is true', () => {
+      const attrs = generateDataAttributes({
+        attached: true,
+        spacing: 'lg',
+      });
+      expect(attrs['data-spacing']).toBeUndefined();
+    });
+
+    it('includes spacing when attached is false', () => {
+      const attrs = generateDataAttributes({
+        attached: false,
+        spacing: 'lg',
+      });
+      expect(attrs['data-spacing']).toBe('lg');
+    });
+  });
+
+  describe('mergeDataAttributes', () => {
+    it('merges data attributes into props', () => {
+      const props = { id: 'btn', className: 'foo' };
+      const dataAttrs = { 'data-variant': 'primary', 'data-size': 'md' };
+      const merged = mergeDataAttributes(props, dataAttrs);
+
+      expect(merged.id).toBe('btn');
+      expect(merged.className).toBe('foo');
+      expect(merged['data-variant']).toBe('primary');
+      expect(merged['data-size']).toBe('md');
+    });
+
+    it('skips undefined data attributes', () => {
+      const props = { id: 'btn' };
+      const dataAttrs = { 'data-variant': 'primary', 'data-size': undefined };
+      const merged = mergeDataAttributes(props, dataAttrs);
+
+      expect(merged['data-variant']).toBe('primary');
+      expect(merged).not.toHaveProperty('data-size');
+    });
+
+    it('does not mutate original props', () => {
+      const props = { id: 'btn' };
+      mergeDataAttributes(props, { 'data-x': 'y' });
+      expect(props).not.toHaveProperty('data-x');
+    });
+  });
+
+  describe('withCSSModules', () => {
+    it('wraps a component with CSS module classes', () => {
+      const Inner = (props: { className?: string }) => (
+        <span data-testid="inner" className={props.className} />
+      );
+      const styles = { button: 'hashed_button' };
+      const Wrapped = withCSSModules(Inner, styles, 'button');
+
+      const { getByTestId } = render(<Wrapped />);
+      const el = getByTestId('inner');
+      expect(el.className).toContain('button');
+      expect(el.className).toContain('hashed_button');
+    });
+
+    it('preserves existing className from props', () => {
+      const Inner = (props: { className?: string }) => (
+        <span data-testid="inner" className={props.className} />
+      );
+      const styles = { button: 'hashed' };
+      const Wrapped = withCSSModules(Inner, styles, 'button');
+
+      const { getByTestId } = render(<Wrapped className="custom" />);
+      const el = getByTestId('inner');
+      expect(el.className).toContain('custom');
+      expect(el.className).toContain('hashed');
+    });
+
+    it('passes through other props', () => {
+      const Inner = (props: { className?: string; 'data-testid'?: string; title?: string }) => (
+        <span data-testid={props['data-testid']} title={props.title} />
+      );
+      const Wrapped = withCSSModules(Inner, {}, 'btn');
+
+      const { getByTestId } = render(<Wrapped data-testid="test" title="hello" />);
+      expect(getByTestId('test')).toHaveAttribute('title', 'hello');
+    });
+  });
+
+  describe('cssModulesConfig', () => {
+    it('has postcss config', () => {
+      expect(cssModulesConfig.postcss).toBeDefined();
+      expect(cssModulesConfig.postcss.plugins).toHaveLength(1);
+      expect(cssModulesConfig.postcss.plugins[0].postcssPlugin).toBe('preserve-data-attributes');
+    });
+
+    it('has webpack config with getLocalIdent', () => {
+      expect(cssModulesConfig.webpack.cssLoader.modules.localIdentName).toBeDefined();
+      const getLocalIdent = cssModulesConfig.webpack.cssLoader.modules.getLocalIdent;
+      expect(typeof getLocalIdent).toBe('function');
+
+      // semiont- prefixed classes are preserved
+      expect(getLocalIdent(null, '', 'semiont-button')).toBe('semiont-button');
+      // other classes return null for default hashing
+      expect(getLocalIdent(null, '', 'my-class')).toBeNull();
+    });
+
+    it('has vite config', () => {
+      expect(cssModulesConfig.vite.css.modules.scopeBehaviour).toBe('local');
+      expect(cssModulesConfig.vite.css.modules.generateScopedName).toBeDefined();
+    });
+
+    describe('postcss plugin', () => {
+      it('wraps class selectors in :global when rule contains [data-', () => {
+        const plugin = cssModulesConfig.postcss.plugins[0];
+        const rules: any[] = [];
+        const mockRoot = {
+          walkRules: (cb: (rule: any) => void) => {
+            for (const rule of rules) cb(rule);
+          },
+        };
+
+        // Rule with data-attribute selector
+        const rule = { selector: '.button[data-variant="primary"]' };
+        rules.push(rule);
+        plugin.Once(mockRoot);
+
+        expect(rule.selector).toContain(':global(.button)');
+      });
+
+      it('does not modify rules without data-attribute selectors', () => {
+        const plugin = cssModulesConfig.postcss.plugins[0];
+        const rule = { selector: '.button .icon' };
+        const mockRoot = {
+          walkRules: (cb: (rule: any) => void) => cb(rule),
+        };
+        plugin.Once(mockRoot);
+        expect(rule.selector).toBe('.button .icon');
+      });
+    });
+  });
+
+  describe('defineCSSModules', () => {
+    it('returns the styles object typed', () => {
+      const raw = { button: 'abc', 'button-content': 'def' };
+      const typed = defineCSSModules(raw);
+      expect(typed).toBe(raw);
+      expect(typed.button).toBe('abc');
+      expect(typed['button-content']).toBe('def');
+    });
+  });
+});

package/src/integrations/__tests__/styled-components-theme.test.ts

@@ -0,0 +1,179 @@
+import { describe, it, expect } from 'vitest';
+import { semiontTheme, semiontMixins, createStyledSemiontButton } from '../styled-components-theme';
+import { tokens } from '../../design-tokens';
+
+describe('styled-components-theme', () => {
+  describe('semiontTheme', () => {
+    it('includes all token categories', () => {
+      expect(semiontTheme).toHaveProperty('colors');
+      expect(semiontTheme).toHaveProperty('spacing');
+      expect(semiontTheme).toHaveProperty('typography');
+      expect(semiontTheme).toHaveProperty('borderRadius');
+      expect(semiontTheme).toHaveProperty('shadows');
+      expect(semiontTheme).toHaveProperty('transitions');
+      expect(semiontTheme).toHaveProperty('breakpoints');
+    });
+
+    it('spacing matches tokens.spacing', () => {
+      expect(semiontTheme.spacing).toBe(tokens.spacing);
+    });
+
+    it('typography matches tokens.typography', () => {
+      expect(semiontTheme.typography).toBe(tokens.typography);
+    });
+
+    it('borderRadius matches tokens.borderRadius', () => {
+      expect(semiontTheme.borderRadius).toBe(tokens.borderRadius);
+    });
+
+    it('shadows matches tokens.shadows', () => {
+      expect(semiontTheme.shadows).toBe(tokens.shadows);
+    });
+
+    it('transitions matches tokens.transitions', () => {
+      expect(semiontTheme.transitions).toBe(tokens.transitions);
+    });
+
+    it('breakpoints matches tokens.breakpoints', () => {
+      expect(semiontTheme.breakpoints).toBe(tokens.breakpoints);
+    });
+
+    it('flattens semantic colors onto colors', () => {
+      expect(semiontTheme.colors.error).toBe(tokens.colors.semantic.error);
+      expect(semiontTheme.colors.errorLight).toBe(tokens.colors.semantic.errorLight);
+      expect(semiontTheme.colors.errorDark).toBe(tokens.colors.semantic.errorDark);
+      expect(semiontTheme.colors.warning).toBe(tokens.colors.semantic.warning);
+      expect(semiontTheme.colors.warningLight).toBe(tokens.colors.semantic.warningLight);
+      expect(semiontTheme.colors.warningDark).toBe(tokens.colors.semantic.warningDark);
+      expect(semiontTheme.colors.success).toBe(tokens.colors.semantic.success);
+      expect(semiontTheme.colors.successLight).toBe(tokens.colors.semantic.successLight);
+      expect(semiontTheme.colors.successDark).toBe(tokens.colors.semantic.successDark);
+      expect(semiontTheme.colors.info).toBe(tokens.colors.semantic.info);
+      expect(semiontTheme.colors.infoLight).toBe(tokens.colors.semantic.infoLight);
+      expect(semiontTheme.colors.infoDark).toBe(tokens.colors.semantic.infoDark);
+    });
+
+    it('preserves nested color structures', () => {
+      expect(semiontTheme.colors.primary).toBe(tokens.colors.primary);
+      expect(semiontTheme.colors.secondary).toBe(tokens.colors.secondary);
+      expect(semiontTheme.colors.neutral).toBe(tokens.colors.neutral);
+      expect(semiontTheme.colors.semantic).toBe(tokens.colors.semantic);
+    });
+  });
+
+  describe('semiontMixins', () => {
+    it('has buttonBase mixin', () => {
+      expect(semiontMixins.buttonBase).toBeDefined();
+    });
+
+    it('has buttonVariant function', () => {
+      expect(typeof semiontMixins.buttonVariant).toBe('function');
+    });
+
+    it('buttonVariant accepts variant strings', () => {
+      for (const variant of ['primary', 'secondary', 'tertiary', 'danger', 'warning', 'ghost']) {
+        expect(semiontMixins.buttonVariant(variant)).toBeDefined();
+      }
+    });
+
+    it('has buttonSize function', () => {
+      expect(typeof semiontMixins.buttonSize).toBe('function');
+    });
+
+    it('buttonSize accepts size strings', () => {
+      for (const size of ['xs', 'sm', 'md', 'lg', 'xl']) {
+        expect(semiontMixins.buttonSize(size)).toBeDefined();
+      }
+    });
+
+    it('has focusRing function', () => {
+      expect(typeof semiontMixins.focusRing).toBe('function');
+      expect(semiontMixins.focusRing()).toBeDefined();
+      expect(semiontMixins.focusRing('#ff0000')).toBeDefined();
+    });
+
+    it('has truncate mixin', () => {
+      expect(semiontMixins.truncate).toBeDefined();
+    });
+
+    it('has srOnly mixin', () => {
+      expect(semiontMixins.srOnly).toBeDefined();
+    });
+
+    it('has media query helpers', () => {
+      expect(semiontMixins.media).toHaveProperty('sm');
+      expect(semiontMixins.media).toHaveProperty('md');
+      expect(semiontMixins.media).toHaveProperty('lg');
+      expect(semiontMixins.media).toHaveProperty('xl');
+      expect(semiontMixins.media).toHaveProperty('2xl');
+    });
+
+    it('media helpers are functions', () => {
+      expect(typeof semiontMixins.media.sm).toBe('function');
+      expect(typeof semiontMixins.media.md).toBe('function');
+      expect(typeof semiontMixins.media.lg).toBe('function');
+    });
+  });
+
+  describe('createStyledSemiontButton', () => {
+    it('is a function', () => {
+      expect(typeof createStyledSemiontButton).toBe('function');
+    });
+
+    it('calls styled.button.attrs', () => {
+      let attrsArg: any;
+      let templateArg: any;
+
+      const mockStyled = {
+        button: {
+          attrs: (arg: any) => {
+            attrsArg = arg;
+            return (strings: TemplateStringsArray, ...exprs: any[]) => {
+              templateArg = { strings, exprs };
+              return 'MockComponent';
+            };
+          },
+        },
+      };
+
+      const result = createStyledSemiontButton(mockStyled);
+      expect(result).toBe('MockComponent');
+      expect(attrsArg).toBeDefined();
+
+      // Test the attrs function generates correct data attributes
+      const attrs = attrsArg({
+        variant: 'primary',
+        size: 'md',
+        loading: true,
+        fullWidth: true,
+        iconOnly: false,
+        active: true,
+        disabled: false,
+        className: 'custom',
+      });
+
+      expect(attrs['data-variant']).toBe('primary');
+      expect(attrs['data-size']).toBe('md');
+      expect(attrs['data-loading']).toBe('true');
+      expect(attrs['data-full-width']).toBe('true');
+      expect(attrs['data-icon-only']).toBeUndefined();
+      expect(attrs['data-active']).toBe('true');
+      expect(attrs['data-disabled']).toBeUndefined();
+      expect(attrs.className).toBe('semiont-button custom');
+    });
+
+    it('attrs trims className when no additional class', () => {
+      const mockStyled = {
+        button: {
+          attrs: (arg: any) => {
+            const attrs = arg({});
+            expect(attrs.className).toBe('semiont-button');
+            return () => 'MockComponent';
+          },
+        },
+      };
+
+      createStyledSemiontButton(mockStyled);
+    });
+  });
+});