@mich8060/unified-design-system 0.1.10

package/src/ui/FileUpload/FileUpload.jsx

@@ -0,0 +1,153 @@
+import React, { useState, useRef } from "react";
+import Icon from "../Icon/Icon";
+import "./FileUpload.scss";
+
+const BASE_CLASS = "uds-file-upload";
+
+/**
+ * FileUpload component for drag-and-drop and click-to-upload file selection
+ * @param {function} onFileSelect - Callback function when files are selected (receives FileList)
+ * @param {array} accept - Array of accepted file types (e.g., ['image/png', 'image/jpg'])
+ * @param {number} maxSize - Maximum file size in MB (default: 10)
+ * @param {string} acceptText - Text to display accepted file types (e.g., "PNG, JPG")
+ * @param {string} instructionText - Custom instruction text (default: "Drop files here or click to upload")
+ * @param {boolean} multiple - Whether to allow multiple file selection (default: false)
+ * @param {boolean} disabled - Whether the upload is disabled
+ * @param {string} className - Additional CSS classes
+ * @param {object} props - Additional props to pass to the file input
+ */
+export default function FileUpload({
+  onFileSelect,
+  accept = [],
+  maxSize = 10,
+  acceptText,
+  instructionText = "Drop files here or click to upload",
+  multiple = false,
+  disabled = false,
+  className = "",
+  ...props
+}) {
+  const [isDragging, setIsDragging] = useState(false);
+  const fileInputRef = useRef(null);
+
+  const classNames = [
+    BASE_CLASS,
+    isDragging && `${BASE_CLASS}--dragging`,
+    disabled && `${BASE_CLASS}--disabled`,
+    className,
+  ]
+    .filter(Boolean)
+    .join(" ");
+
+  const handleDragEnter = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (!disabled) {
+      setIsDragging(true);
+    }
+  };
+
+  const handleDragLeave = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragging(false);
+  };
+
+  const handleDragOver = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+  };
+
+  const handleDrop = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragging(false);
+
+    if (disabled) return;
+
+    const files = e.dataTransfer.files;
+    if (files && files.length > 0) {
+      handleFiles(files);
+    }
+  };
+
+  const handleFileInputChange = (e) => {
+    const files = e.target.files;
+    if (files && files.length > 0) {
+      handleFiles(files);
+    }
+    // Reset input so same file can be selected again
+    e.target.value = "";
+  };
+
+  const handleFiles = (files) => {
+    const fileArray = Array.from(files);
+    const validFiles = fileArray.filter((file) => {
+      // Check file type
+      if (accept.length > 0 && !accept.some((type) => file.type.match(type))) {
+        return false;
+      }
+      // Check file size (convert MB to bytes)
+      if (file.size > maxSize * 1024 * 1024) {
+        return false;
+      }
+      return true;
+    });
+
+    if (validFiles.length > 0 && onFileSelect) {
+      // Create a FileList-like object
+      const dataTransfer = new DataTransfer();
+      validFiles.forEach((file) => dataTransfer.items.add(file));
+      onFileSelect(dataTransfer.files);
+    }
+  };
+
+  const handleClick = () => {
+    if (!disabled && fileInputRef.current) {
+      fileInputRef.current.click();
+    }
+  };
+
+  // Generate accept text from accept prop if not provided
+  const displayAcceptText =
+    acceptText ||
+    (accept.length > 0
+      ? accept
+          .map((type) => {
+            const ext = type.split("/")[1]?.toUpperCase();
+            return ext || type;
+          })
+          .join(", ")
+      : "All files");
+
+  return (
+    <div
+      className={classNames}
+      onDragEnter={handleDragEnter}
+      onDragLeave={handleDragLeave}
+      onDragOver={handleDragOver}
+      onDrop={handleDrop}
+      onClick={handleClick}
+    >
+      <input
+        ref={fileInputRef}
+        type="file"
+        className={`${BASE_CLASS}__input`}
+        accept={accept.length > 0 ? accept.join(",") : undefined}
+        multiple={multiple}
+        disabled={disabled}
+        onChange={handleFileInputChange}
+        {...props}
+      />
+      <div className={`${BASE_CLASS}__content`}>
+        <div className={`${BASE_CLASS}__icon`}>
+          <Icon name="Upload" size={32} appearance="regular" />
+        </div>
+        <p className={`${BASE_CLASS}__instruction`}>{instructionText}</p>
+        <p className={`${BASE_CLASS}__accept`}>
+          {displayAcceptText} up to {maxSize}MB
+        </p>
+      </div>
+    </div>
+  );
+}

package/src/ui/FileUpload/FileUpload.scss

@@ -0,0 +1,78 @@
+@use "../../styles/typography" as *;
+
+.uds-file-upload {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 200px;
+  padding: var(--uds-spacing-48);
+  background: var(--uds-surface-primary, #ffffff);
+  border: var(--uds-border-width-2) dashed var(--uds-border-primary, #d1d5db);
+  border-radius: var(--uds-radius-8);
+  cursor: pointer;
+  transition: all var(--uds-animation-duration-200) var(--uds-animation-ease-standard);
+
+  &:hover:not(&--disabled) {
+    border-color: var(--uds-border-brand-primary, #3b82f6);
+    background: var(--uds-surface-secondary, #f9fafb);
+  }
+
+  &--dragging {
+    border-color: var(--uds-border-brand-primary, #3b82f6);
+    background: var(--uds-surface-brand-tertiary, #eff6ff);
+  }
+
+  &--disabled {
+    cursor: not-allowed;
+    opacity: 0.6;
+    pointer-events: none;
+  }
+
+  &__input {
+    position: absolute;
+    opacity: 0;
+    width: 0;
+    height: 0;
+    pointer-events: none;
+  }
+
+  &__content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: var(--uds-gap-12);
+    text-align: center;
+    pointer-events: none;
+  }
+
+  &__icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--uds-text-secondary, #6b7280);
+    transition: color var(--uds-animation-duration-200) var(--uds-animation-ease-standard);
+
+    .uds-file-upload:hover:not(.uds-file-upload--disabled) & {
+      color: var(--uds-text-brand-primary, #3b82f6);
+    }
+
+    .uds-file-upload--dragging & {
+      color: var(--uds-text-brand-primary, #3b82f6);
+    }
+  }
+
+  &__instruction {
+    @include uds-body-16;
+    margin: 0;
+    color: var(--uds-text-primary, #111827);
+    font-weight: var(--uds-font-weight-medium);
+  }
+
+  &__accept {
+    @include uds-body-14;
+    margin: 0;
+    color: var(--uds-text-secondary, #6b7280);
+  }
+}

package/src/ui/FileUpload/FileUpload.spec.ts

@@ -0,0 +1,12 @@
+export const FILE_UPLOAD_DEFAULTS = {
+  className: "",
+} as const;
+
+export const FILE_UPLOAD_STORY_SPEC = {
+  defaults: {
+    className: FILE_UPLOAD_DEFAULTS.className,
+  },
+  stories: {
+    default: {},
+  },
+} as const;

package/src/ui/FileUpload/FileUpload.stories.jsx

@@ -0,0 +1,14 @@
+import FileUpload from "./FileUpload";
+
+export default {
+  title: "Components/FileUpload",
+  component: FileUpload,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "padded",
+  },
+};
+
+export const Default = {
+  args: {},
+};

package/src/ui/FileUpload/FileUpload.stories.tsx

@@ -0,0 +1,14 @@
+import FileUpload from "./FileUpload.jsx";
+
+export default {
+  title: "Components/FileUpload",
+  component: FileUpload,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "padded",
+  },
+};
+
+export const Default = {
+  args: {},
+};

package/src/ui/FileUpload/FileUpload.test.tsx

@@ -0,0 +1 @@
+export {};

package/src/ui/FileUpload/FileUpload.tsx

@@ -0,0 +1,6 @@
+import type { ComponentType } from "react";
+import LegacyFileUpload from "./FileUpload.jsx";
+
+const FileUpload = LegacyFileUpload as ComponentType<any>;
+
+export default FileUpload;

package/src/ui/FileUpload/FileUpload.types.ts

@@ -0,0 +1,3 @@
+export interface FileUploadProps {
+  className?: string;
+}

package/src/ui/FileUpload/index.js

@@ -0,0 +1,2 @@
+export { default as FileUpload } from "./FileUpload";
+export { default } from "./FileUpload";

package/src/ui/Flex/Flex.ai.md

@@ -0,0 +1,130 @@
+# Flex
+
+Flexbox layout utility component for quick row/column layouts with optional container constraints.
+
+## When to Use
+- Any layout that needs flexbox (row/column, alignment, spacing)
+- Button groups, form rows, card layouts, toolbar arrangements
+- Quick spacing between child elements
+- Centered, max-width constrained page sections (via `container` prop)
+
+## Props
+
+| Prop | Type | Default | Values | Description |
+|------|------|---------|--------|-------------|
+| `direction` | `string` | `"row"` | `"row"`, `"column"`, `"row-reverse"`, `"column-reverse"` | Flex direction |
+| `gap` | `string` | — | UDS gap tokens: `"4"`, `"8"`, `"12"`, `"16"`, `"24"`, `"32"`, `"48"` | Gap between items |
+| `alignItems` | `string` | — | `"flex-start"`, `"flex-end"`, `"center"`, `"stretch"`, `"baseline"` | Cross-axis alignment |
+| `justifyContent` | `string` | — | `"flex-start"`, `"flex-end"`, `"center"`, `"space-between"`, `"space-around"`, `"space-evenly"` | Main-axis alignment |
+| `wrap` | `boolean` | `false` | — | Allow items to wrap |
+| `container` | `string\|boolean` | — | `true`, `"responsive"`, `"xs"`, `"sm"`, `"md"`, `"lg"`, `"xl"`, `"2xl"`, `"narrow"`, `"prose"`, `"wide"`, `"full"` | Applies container max-width and centering |
+| `padded` | `boolean` | `false` | — | Adds responsive horizontal padding (use with `container`) |
+| `className` | `string` | `""` | — | Additional CSS classes |
+
+## Container Sizes
+
+| Value | Max Width | Best For |
+|-------|-----------|----------|
+| `"xs"` | 480px | Modals, narrow dialogs |
+| `"sm"` / `"narrow"` | 640px | Forms, settings panels |
+| `"md"` | 768px | Content pages |
+| `"lg"` | 1024px | Standard page layouts |
+| `"xl"` | 1280px | Wide layouts |
+| `"2xl"` | 1536px | Extra-wide layouts |
+| `"prose"` | 65ch | Readable body text |
+| `"wide"` | 1440px | Dashboards, data-heavy pages |
+| `"full"` | 100% | No max-width, still centered |
+| `true` / `"responsive"` | Auto | Scales max-width at each breakpoint |
+
+## Container CSS Classes (Standalone)
+
+These classes can be used independently without the `Flex` component:
+
+```html
+<div class="container container-lg">Centered, max 1024px</div>
+<div class="container container-responsive container-padded">Responsive with padding</div>
+```
+
+| Class | Description |
+|-------|-------------|
+| `.container` | Base: `width: 100%; margin: 0 auto` |
+| `.container-xs` | `max-width: 480px` |
+| `.container-sm` | `max-width: 640px` |
+| `.container-md` | `max-width: 768px` |
+| `.container-lg` | `max-width: 1024px` |
+| `.container-xl` | `max-width: 1280px` |
+| `.container-2xl` | `max-width: 1536px` |
+| `.container-narrow` | `max-width: 640px` |
+| `.container-prose` | `max-width: 65ch` |
+| `.container-wide` | `max-width: 1440px` |
+| `.container-full` | `max-width: 100%` |
+| `.container-responsive` | Scales max-width at sm/md/lg/xl/2xl breakpoints |
+| `.container-padded` | Responsive horizontal padding (16→24→32→48px) |
+
+## Examples
+
+### Horizontal row with gap
+```jsx
+<Flex gap="8" alignItems="center">
+  <Avatar initials="JD" size="small" />
+  <span>John Doe</span>
+  <Tag label="Admin" color="blue" />
+</Flex>
+```
+
+### Button action bar
+```jsx
+<Flex gap="8" justifyContent="flex-end">
+  <Button label="Cancel" appearance="outline" />
+  <Button label="Save" />
+</Flex>
+```
+
+### Vertical form layout
+```jsx
+<Flex direction="column" gap="16">
+  <Field label="Name"><Input placeholder="Name" /></Field>
+  <Field label="Email"><Input type="email" placeholder="Email" /></Field>
+  <Button label="Submit" />
+</Flex>
+```
+
+### Wrapping grid
+```jsx
+<Flex gap="16" wrap>
+  {items.map(item => <Card key={item.id} {...item} />)}
+</Flex>
+```
+
+### Centered page content with container
+```jsx
+<Flex direction="column" gap="24" container="lg" padded>
+  <h1>Page Title</h1>
+  <p>Content centered and constrained to 1024px max width.</p>
+</Flex>
+```
+
+### Responsive container
+```jsx
+<Flex direction="column" gap="16" container padded>
+  {/* max-width scales with viewport: 640→768→1024→1280→1536 */}
+  <Card>Auto-scaling container</Card>
+</Flex>
+```
+
+### Narrow form container
+```jsx
+<Flex direction="column" gap="16" container="narrow" padded>
+  <Field label="Email"><Input type="email" /></Field>
+  <Field label="Password"><Input type="password" /></Field>
+  <Button label="Sign In" />
+</Flex>
+```
+
+### Prose container for readable text
+```jsx
+<Flex direction="column" gap="12" container="prose">
+  <h2>Article Title</h2>
+  <p>Body text constrained to 65 characters wide for optimal readability.</p>
+</Flex>
+```

package/src/ui/Flex/Flex.jsx

@@ -0,0 +1,53 @@
+import React from "react";
+import "./Flex.scss";
+
+/**
+ * Flex layout component
+ * @param {string} direction - Flex direction: 'row', 'column', 'row-reverse', 'column-reverse'
+ * @param {string} gap - Gap between items (uses UDS gap tokens)
+ * @param {string} alignItems - Align items: 'flex-start', 'flex-end', 'center', 'stretch', 'baseline'
+ * @param {string} justifyContent - Justify content: 'flex-start', 'flex-end', 'center', 'space-between', 'space-around', 'space-evenly'
+ * @param {boolean} wrap - Whether to wrap items
+ * @param {string|boolean} container - Container size constraint. true or "responsive" for responsive container,
+ *   or a named size: "xs" (480px), "sm" (640px), "md" (768px), "lg" (1024px), "xl" (1280px),
+ *   "2xl" (1536px), "narrow" (640px), "prose" (65ch), "wide" (1440px), "full" (100%)
+ * @param {boolean} padded - When true with container, adds responsive horizontal padding
+ * @param {string} className - Additional CSS classes
+ * @param {React.ReactNode} children - Child elements
+ * @param {object} props - Additional props to pass to the flex container
+ */
+export default function Flex({
+  direction = "row",
+  gap,
+  alignItems,
+  justifyContent,
+  wrap = false,
+  container,
+  padded = false,
+  className = "",
+  children,
+  ...props
+}) {
+  const flexClasses = [
+    "uds-flex",
+    direction && `uds-flex--${direction}`,
+    wrap && "uds-flex--wrap",
+    gap && `uds-flex--gap-${gap}`,
+    alignItems && `uds-flex--align-${alignItems.replace("-", "_")}`,
+    justifyContent && `uds-flex--justify-${justifyContent.replace(/-/g, "_")}`,
+    container && "container",
+    container === true || container === "responsive"
+      ? "container-responsive"
+      : container && `container-${container}`,
+    padded && "container-padded",
+    className,
+  ]
+    .filter(Boolean)
+    .join(" ");
+
+  return (
+    <div className={flexClasses} {...props}>
+      {children}
+    </div>
+  );
+}

package/src/ui/Flex/Flex.scss

@@ -0,0 +1,119 @@
+@use "../../styles/typography" as *;
+
+.uds-flex {
+  display: flex;
+
+  // ── Direction variants ──────────────────────────────
+  &--row {
+    flex-direction: row;
+  }
+
+  &--column {
+    flex-direction: column;
+  }
+
+  &--row-reverse {
+    flex-direction: row-reverse;
+  }
+
+  &--column-reverse {
+    flex-direction: column-reverse;
+  }
+
+  // ── Wrap ────────────────────────────────────────────
+  &--wrap {
+    flex-wrap: wrap;
+  }
+
+  // ── Gap variants (using UDS gap tokens) ─────────────
+  &--gap-4 {
+    gap: var(--uds-gap-4);
+  }
+
+  &--gap-8 {
+    gap: var(--uds-gap-8);
+  }
+
+  &--gap-12 {
+    gap: var(--uds-gap-12);
+  }
+
+  &--gap-16 {
+    gap: var(--uds-gap-16);
+  }
+
+  &--gap-24 {
+    gap: var(--uds-gap-24);
+  }
+
+  &--gap-32 {
+    gap: var(--uds-gap-32);
+  }
+
+  // ── Align items variants ────────────────────────────
+  &--align-flex_start {
+    align-items: flex-start;
+  }
+
+  &--align-flex_end {
+    align-items: flex-end;
+  }
+
+  &--align-center {
+    align-items: center;
+  }
+
+  &--align-stretch {
+    align-items: stretch;
+  }
+
+  &--align-baseline {
+    align-items: baseline;
+  }
+
+  // ── Justify content variants ────────────────────────
+  &--justify-flex_start {
+    justify-content: flex-start;
+  }
+
+  &--justify-flex_end {
+    justify-content: flex-end;
+  }
+
+  &--justify-center {
+    justify-content: center;
+  }
+
+  &--justify-space_between {
+    justify-content: space-between;
+  }
+
+  &--justify-space_around {
+    justify-content: space-around;
+  }
+
+  &--justify-space_evenly {
+    justify-content: space-evenly;
+  }
+
+  // ── Flex item utilities ─────────────────────────────
+  &-item {
+    flex: 0 1 auto;
+
+    &--grow {
+      flex: 1 1 auto;
+    }
+
+    &--shrink {
+      flex: 0 1 auto;
+    }
+
+    &--no-grow {
+      flex: 0 1 auto;
+    }
+
+    &--no-shrink {
+      flex: 1 0 auto;
+    }
+  }
+}

package/src/ui/Flex/Flex.spec.ts

@@ -0,0 +1,12 @@
+export const FLEX_DEFAULTS = {
+  className: "",
+} as const;
+
+export const FLEX_STORY_SPEC = {
+  defaults: {
+    className: FLEX_DEFAULTS.className,
+  },
+  stories: {
+    default: {},
+  },
+} as const;

package/src/ui/Flex/Flex.stories.jsx

@@ -0,0 +1,14 @@
+import Flex from "./Flex";
+
+export default {
+  title: "Components/Flex",
+  component: Flex,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "padded",
+  },
+};
+
+export const Default = {
+  args: {},
+};

package/src/ui/Flex/Flex.stories.tsx

@@ -0,0 +1,14 @@
+import Flex from "./Flex.jsx";
+
+export default {
+  title: "Components/Flex",
+  component: Flex,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "padded",
+  },
+};
+
+export const Default = {
+  args: {},
+};

package/src/ui/Flex/Flex.test.tsx

@@ -0,0 +1 @@
+export {};

package/src/ui/Flex/Flex.tsx

@@ -0,0 +1,6 @@
+import type { ComponentType } from "react";
+import LegacyFlex from "./Flex.jsx";
+
+const Flex = LegacyFlex as ComponentType<any>;
+
+export default Flex;

package/src/ui/Flex/Flex.types.ts

@@ -0,0 +1,3 @@
+export interface FlexProps {
+  className?: string;
+}

package/src/ui/Flex/index.js

@@ -0,0 +1 @@
+export { default } from "./Flex";