@mich8060/chg-design-system 0.1.0

package/src/ui/Field/Field.jsx

@@ -0,0 +1,89 @@
+import React from "react";
+import Icon from "../Icon/Icon";
+import "./Field.scss";
+
+const BASE_CLASS = "uds-field";
+
+/**
+ * Field component for form input fields with label, helper text, and optional features
+ * @param {string} label - Label text for the field
+ * @param {boolean} required - Whether the field is required (adds asterisk to label)
+ * @param {string} helperMessage - Helper text displayed below the input
+ * @param {string} infoIcon - Icon name for info icon (e.g., "Info")
+ * @param {function} onInfoClick - Callback when info icon is clicked
+ * @param {number} maxLength - Maximum character length (enables character count)
+ * @param {number|string} value - Current value (for character count calculation)
+ * @param {string} id - Unique identifier for the field
+ * @param {string} className - Additional CSS classes
+ * @param {React.ReactNode} children - The input element to wrap
+ * @param {object} props - Additional props to pass to the field wrapper
+ */
+export default function Field({
+  label,
+  required = false,
+  helperMessage,
+  infoIcon,
+  onInfoClick,
+  maxLength,
+  value,
+  id,
+  className = "",
+  children,
+  ...props
+}) {
+  const fieldId = id || `field-${Math.random().toString(36).substr(2, 9)}`;
+
+  // Calculate character count if maxLength is provided
+  const currentLength = value ? String(value).length : 0;
+  const showCharacterCount = maxLength !== undefined && maxLength !== null;
+
+  const classNames = [BASE_CLASS, className].filter(Boolean).join(" ");
+
+  return (
+    <div className={classNames} {...props}>
+      {/* Label Row */}
+      {(label || infoIcon) && (
+        <div className={`${BASE_CLASS}__label-row`}>
+          {label && (
+            <label htmlFor={fieldId} className={`${BASE_CLASS}__label`}>
+              {label}
+              {required && <span className={`${BASE_CLASS}__required`}>*</span>}
+            </label>
+          )}
+          {infoIcon && (
+            <button
+              type="button"
+              className={`${BASE_CLASS}__info-icon`}
+              onClick={onInfoClick}
+              aria-label="More information"
+              tabIndex={0}
+            >
+              <Icon name={infoIcon} size={16} appearance="regular" />
+            </button>
+          )}
+        </div>
+      )}
+
+      {/* Input Slot */}
+      <div className={`${BASE_CLASS}__input-wrapper`}>
+        {React.isValidElement(children) && fieldId
+          ? React.cloneElement(children, {
+              id: fieldId,
+              maxLength: maxLength || children.props.maxLength,
+              ...children.props,
+            })
+          : children}
+        {showCharacterCount && (
+          <span className={`${BASE_CLASS}__character-count`}>
+            {currentLength}/{maxLength}
+          </span>
+        )}
+      </div>
+
+      {/* Helper Message */}
+      {helperMessage && (
+        <div className={`${BASE_CLASS}__helper`}>{helperMessage}</div>
+      )}
+    </div>
+  );
+}

package/src/ui/Field/Field.scss

@@ -0,0 +1,119 @@
+@use "../../styles/typography" as *;
+
+.uds-field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--uds-gap-8);
+  width: 100%;
+
+  &__label-row {
+    display: flex;
+    align-items: center;
+    gap: var(--uds-gap-8);
+    justify-content: space-between;
+  }
+
+  &__label {
+    @include uds-body-14-medium;
+    color: var(--uds-text-primary);
+    display: inline-block;
+    line-height: 20px;
+  }
+
+  &__required {
+    color: var(--uds-text-error, #ef4444);
+    margin-left: 2px;
+  }
+
+  &__info-icon {
+    all: unset;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    background-color: var(--uds-surface-tertiary);
+    color: var(--uds-text-secondary);
+    cursor: pointer;
+    flex-shrink: 0;
+    transition: all var(--uds-animation-duration-200) var(--uds-animation-ease-standard);
+
+    &:hover {
+      background-color: var(--uds-surface-quaternary);
+      color: var(--uds-text-primary);
+    }
+
+    &:focus-visible {
+      outline: solid var(--uds-focus-ring-width) var(--uds-focus-ring-border);
+      outline-offset: var(--uds-focus-ring-offset);
+    }
+  }
+
+  &__input-wrapper {
+    position: relative;
+    display: flex;
+    align-items: flex-start;
+    width: 100%;
+
+    // Style the input element
+    input,
+    textarea,
+    select {
+      width: 100%;
+      padding: var(--uds-spacing-10) var(--uds-spacing-12);
+      border: var(--uds-border-width-1) solid var(--uds-border-primary);
+      border-radius: var(--uds-radius-4);
+      background-color: var(--uds-surface-primary);
+      color: var(--uds-text-primary);
+      @include uds-body-16;
+      transition: all var(--uds-animation-duration-200) var(--uds-animation-ease-standard);
+      box-sizing: border-box;
+
+      &::placeholder {
+        color: var(--uds-text-secondary);
+      }
+
+      &:focus {
+        outline: none;
+        border-color: var(--uds-border-brand-primary);
+      }
+
+      &:disabled {
+        background-color: var(--uds-surface-tertiary);
+        color: var(--uds-text-secondary);
+        cursor: not-allowed;
+        opacity: 0.6;
+      }
+    }
+
+    input,
+    select {
+      // For single-line inputs, center align vertically
+      align-self: center;
+    }
+
+    textarea {
+      resize: vertical;
+      min-height: 80px;
+      align-self: stretch;
+    }
+  }
+
+  &__character-count {
+    @include uds-body-12;
+    position: absolute;
+    bottom: var(--uds-spacing-8);
+    right: var(--uds-spacing-12);
+    color: var(--uds-text-secondary);
+    pointer-events: none;
+    line-height: 1;
+  }
+
+  &__helper {
+    @include uds-body-14;
+    color: var(--uds-text-secondary);
+    line-height: 20px;
+    margin-top: calc(var(--uds-gap-8) * -1);
+  }
+}

package/src/ui/Field/index.js

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

package/src/ui/FileUpload/FileUpload.figma.tsx

@@ -0,0 +1,28 @@
+import FileUpload from './FileUpload';
+import { code } from '@figma/code-connect';
+
+export default code.connect(
+    FileUpload,
+    'https://www.figma.com/design/LkIyThUA0oVNsDEAyOF7ER/Design-System--Components',
+    {
+        props: {
+            instructionText: code.string('instructionText'),
+            acceptText: code.string('acceptText'),
+            maxSize: code.number('maxSize'),
+            accept: code.array('accept'),
+            multiple: code.boolean('multiple'),
+            disabled: code.boolean('disabled'),
+        },
+        example: ({ instructionText, acceptText, maxSize, accept, multiple, disabled }) => (
+            <FileUpload
+                instructionText={instructionText}
+                acceptText={acceptText}
+                maxSize={maxSize}
+                accept={accept}
+                multiple={multiple}
+                disabled={disabled}
+                onFileSelect={(files) => console.log('Files selected:', files)}
+            />
+        ),
+    }
+);

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/index.js

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

package/src/ui/Flex/Flex.jsx

@@ -0,0 +1,42 @@
+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} 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,
+  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, "_")}`,
+    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
+.uds-flex-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/index.js

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

package/src/ui/Icon/Icon.figma.tsx

@@ -0,0 +1,22 @@
+import React from "react"
+import Icon from "./Icon"
+import figma from "@figma/code-connect"
+
+/**
+ * -- This file was auto-generated by Code Connect --
+ * `props` includes a mapping from Figma properties and variants to
+ * suggested values. You should update this to match the props of your
+ * code component, and update the `example` function to return the
+ * code example you'd like to see in Figma
+ */
+
+figma.connect(
+  Icon,
+  "https://www.figma.com/file/LkIyThUA0oVNsDEAyOF7ER/Design-System--Components?node-id=1393%3A7018",
+  {
+    props: {
+      icon: figma.instance("Icon"),
+    },
+    example: (props) => <Icon />,
+  },
+)