@discourser/design-system 0.9.3 → 0.9.4

package/src/stories/foundations/components/ElevationCard.tsx

@@ -0,0 +1,81 @@
+import { type CSSProperties } from 'react';
+
+interface ElevationCardProps {
+  level: string;
+  shadow: string;
+}
+
+export const ElevationCard = ({ level, shadow }: ElevationCardProps) => {
+  const containerStyle: CSSProperties = {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    marginBottom: '32px',
+  };
+
+  const cardStyle: CSSProperties = {
+    width: '200px',
+    height: '120px',
+    backgroundColor: '#fff',
+    borderRadius: '12px',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginBottom: '16px',
+    boxShadow: shadow === 'none' ? 'none' : shadow,
+  };
+
+  const labelStyle: CSSProperties = {
+    fontSize: '16px',
+    fontWeight: '600',
+    fontFamily: 'Inter, sans-serif',
+    marginBottom: '8px',
+    color: '#333',
+  };
+
+  const shadowValueStyle: CSSProperties = {
+    fontSize: '11px',
+    fontFamily: 'monospace',
+    color: '#666',
+    maxWidth: '300px',
+    textAlign: 'center',
+    wordBreak: 'break-word',
+    lineHeight: '1.5',
+  };
+
+  return (
+    <div style={containerStyle}>
+      <div style={labelStyle}>{level}</div>
+      <div style={cardStyle}>
+        <span style={{ color: '#999', fontSize: '14px' }}>
+          {level === 'level0' ? 'No shadow' : 'Elevation'}
+        </span>
+      </div>
+      <div style={shadowValueStyle}>{shadow === 'none' ? 'none' : shadow}</div>
+    </div>
+  );
+};
+
+interface ElevationGridProps {
+  elevations: Record<string, string>;
+}
+
+export const ElevationGrid = ({ elevations }: ElevationGridProps) => {
+  const gridStyle: CSSProperties = {
+    display: 'grid',
+    gridTemplateColumns: 'repeat(auto-fill, minmax(300px, 1fr))',
+    gap: '48px',
+    marginTop: '32px',
+    padding: '32px',
+    backgroundColor: '#f5f5f5',
+    borderRadius: '8px',
+  };
+
+  return (
+    <div style={gridStyle}>
+      {Object.entries(elevations).map(([level, shadow]) => (
+        <ElevationCard key={level} level={level} shadow={shadow} />
+      ))}
+    </div>
+  );
+};

package/src/stories/foundations/components/SpacingBox.tsx

@@ -0,0 +1,94 @@
+import { type CSSProperties } from 'react';
+
+interface SpacingBoxProps {
+  name: string;
+  value: string;
+}
+
+export const SpacingBox = ({ name, value }: SpacingBoxProps) => {
+  const containerStyle: CSSProperties = {
+    display: 'flex',
+    alignItems: 'center',
+    marginBottom: '24px',
+    gap: '16px',
+  };
+
+  const labelContainerStyle: CSSProperties = {
+    minWidth: '120px',
+    display: 'flex',
+    flexDirection: 'column',
+  };
+
+  const nameStyle: CSSProperties = {
+    fontSize: '14px',
+    fontWeight: '500',
+    fontFamily: 'Inter, sans-serif',
+    marginBottom: '4px',
+  };
+
+  const valueStyle: CSSProperties = {
+    fontSize: '12px',
+    fontFamily: 'monospace',
+    color: '#666',
+  };
+
+  const boxContainerStyle: CSSProperties = {
+    display: 'flex',
+    alignItems: 'center',
+    flex: 1,
+  };
+
+  const boxStyle: CSSProperties = {
+    width: value,
+    height: '40px',
+    backgroundColor: '#4C662B',
+    borderRadius: '4px',
+    position: 'relative',
+  };
+
+  const dimensionStyle: CSSProperties = {
+    position: 'absolute',
+    top: '-20px',
+    left: '0',
+    right: '0',
+    fontSize: '10px',
+    fontFamily: 'monospace',
+    color: '#999',
+    textAlign: 'center',
+  };
+
+  return (
+    <div style={containerStyle}>
+      <div style={labelContainerStyle}>
+        <div style={nameStyle}>{name}</div>
+        <div style={valueStyle}>{value}</div>
+      </div>
+      <div style={boxContainerStyle}>
+        <div style={boxStyle}>
+          <div style={dimensionStyle}>{value}</div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+interface SpacingGridProps {
+  spacings: Record<string, string>;
+}
+
+export const SpacingGrid = ({ spacings }: SpacingGridProps) => {
+  const gridStyle: CSSProperties = {
+    display: 'grid',
+    gridTemplateColumns: 'repeat(auto-fill, minmax(250px, 1fr))',
+    gap: '32px',
+    marginTop: '24px',
+  };
+
+  return (
+    <div style={gridStyle}>
+      {Object.entries(spacings).map(([name, value]) => (
+        <SpacingBox key={name} name={name} value={value} />
+      ))}
+    </div>
+  );
+};

package/src/stories/foundations/components/TypeSpecimen.tsx

@@ -0,0 +1,117 @@
+import { type CSSProperties } from 'react';
+
+interface TypeSpecimenProps {
+  name: string;
+  fontSize: string;
+  lineHeight: string;
+  fontWeight: string;
+  letterSpacing: string;
+  fontFamily: string;
+  sampleText?: string;
+}
+
+export const TypeSpecimen = ({
+  name,
+  fontSize,
+  lineHeight,
+  fontWeight,
+  letterSpacing,
+  fontFamily,
+  sampleText = 'The quick brown fox jumps over the lazy dog',
+}: TypeSpecimenProps) => {
+  const containerStyle: CSSProperties = {
+    marginBottom: '32px',
+    paddingBottom: '24px',
+    borderBottom: '1px solid #e0e0e0',
+  };
+
+  const headerStyle: CSSProperties = {
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'baseline',
+    marginBottom: '12px',
+  };
+
+  const nameStyle: CSSProperties = {
+    fontSize: '16px',
+    fontWeight: '600',
+    fontFamily: 'Inter, sans-serif',
+    color: '#333',
+  };
+
+  const specimenStyle: CSSProperties = {
+    fontSize,
+    lineHeight,
+    fontWeight,
+    letterSpacing,
+    fontFamily: getFontFamilyString(fontFamily),
+    marginBottom: '16px',
+    color: '#000',
+  };
+
+  const propertiesStyle: CSSProperties = {
+    display: 'grid',
+    gridTemplateColumns: 'repeat(auto-fit, minmax(150px, 1fr))',
+    gap: '12px',
+    fontSize: '12px',
+    fontFamily: 'monospace',
+    color: '#666',
+    backgroundColor: '#f5f5f5',
+    padding: '12px',
+    borderRadius: '4px',
+  };
+
+  const propertyStyle: CSSProperties = {
+    display: 'flex',
+    flexDirection: 'column',
+  };
+
+  const propertyLabelStyle: CSSProperties = {
+    fontSize: '10px',
+    textTransform: 'uppercase',
+    color: '#999',
+    marginBottom: '4px',
+    fontWeight: '600',
+  };
+
+  return (
+    <div style={containerStyle}>
+      <div style={headerStyle}>
+        <div style={nameStyle}>{name}</div>
+      </div>
+      <div style={specimenStyle}>{sampleText}</div>
+      <div style={propertiesStyle}>
+        <div style={propertyStyle}>
+          <div style={propertyLabelStyle}>Font Size</div>
+          <div>{fontSize}</div>
+        </div>
+        <div style={propertyStyle}>
+          <div style={propertyLabelStyle}>Line Height</div>
+          <div>{lineHeight}</div>
+        </div>
+        <div style={propertyStyle}>
+          <div style={propertyLabelStyle}>Font Weight</div>
+          <div>{fontWeight}</div>
+        </div>
+        <div style={propertyStyle}>
+          <div style={propertyLabelStyle}>Letter Spacing</div>
+          <div>{letterSpacing}</div>
+        </div>
+        <div style={propertyStyle}>
+          <div style={propertyLabelStyle}>Font Family</div>
+          <div>{fontFamily}</div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+function getFontFamilyString(family: string): string {
+  const fontFamilies = {
+    display: '"Fraunces", Georgia, "Times New Roman", serif',
+    body: '"Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+    mono: '"JetBrains Mono", "Fira Code", Consolas, monospace',
+  };
+
+  return fontFamilies[family as keyof typeof fontFamilies] || family;
+}

package/src/test/setup.ts

@@ -0,0 +1,12 @@
+import '@testing-library/jest-dom/vitest';
+import { expect, afterEach } from 'vitest';
+import { cleanup } from '@testing-library/react';
+import { toHaveNoViolations } from 'jest-axe';
+
+// Extend Vitest's expect with jest-axe matchers
+expect.extend(toHaveNoViolations);
+
+// Cleanup after each test
+afterEach(() => {
+  cleanup();
+});

package/src/test/vitest.d.ts

@@ -0,0 +1,29 @@
+/// <reference types="vitest/globals" />
+import '@testing-library/jest-dom';
+
+// jest-axe types for Vitest
+interface AxeMatchers<R = void> {
+  toHaveNoViolations(): R;
+}
+
+declare module 'vitest' {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  interface Assertion<T = any> extends AxeMatchers<T> {}
+  interface AsymmetricMatchersContaining extends AxeMatchers {}
+}
+
+// Declare jest-axe module since it doesn't have proper TS types for Vitest
+declare module 'jest-axe' {
+  import type { AxeResults, RunOptions, Spec } from 'axe-core';
+  
+  export function axe(
+    html: Element | string,
+    options?: RunOptions & { globalOptions?: Spec }
+  ): Promise<AxeResults>;
+  
+  export const toHaveNoViolations: {
+    toHaveNoViolations(results: AxeResults): { pass: boolean; message(): string };
+  };
+  
+  export function configureAxe(options?: RunOptions & { globalOptions?: Spec }): typeof axe;
+}

package/src/utils/cn.ts

@@ -0,0 +1,8 @@
+import { clsx, type ClassValue } from 'clsx';
+
+/**
+ * Utility function to merge class names
+ */
+export function cn(...inputs: ClassValue[]) {
+  return clsx(inputs);
+}

package/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />