@mich8060/chg-design-system 0.1.0

package/src/ui/Icon/Icon.jsx

@@ -0,0 +1,47 @@
+import React, { useMemo } from "react";
+import * as PhosphorIcons from "@phosphor-icons/react";
+
+/**
+ * Icons component wrapper for Phosphor icons
+ * @param {string} name - The name of the Phosphor icon (e.g., "ArrowRight", "User", "House")
+ * @param {number|string} size - The size of the icon (default: 24)
+ * @param {string} appearance - Optional: "regular" | "bold" | "thin" | "light" | "duotone" | "fill" (default: "regular")
+ * @param {object} props - Additional props to pass to the icon component
+ */
+export default function Icon({
+  name,
+  size = 24,
+  appearance = "regular",
+  ...props
+}) {
+  const weightMap = {
+    regular: "regular",
+    bold: "bold",
+    thin: "thin",
+    light: "light",
+    duotone: "duotone",
+    fill: "fill",
+    solid: "fill",
+    outline: "regular",
+  };
+
+  const weight = weightMap[appearance] || "regular";
+  const IconComponent = useMemo(() => {
+    if (!name) return null;
+    const nameString = typeof name === "string" ? name : String(name);
+    const iconName = nameString
+      .split(/(?=[A-Z])|[-_\s]/)
+      .map((part) => part.charAt(0).toUpperCase() + part.slice(1).toLowerCase())
+      .join("");
+    return PhosphorIcons[iconName] || null;
+  }, [name]);
+
+  if (!IconComponent) {
+    if (name) {
+      console.warn(`Icon "${name}" not found in Phosphor icons.`);
+    }
+    return null;
+  }
+
+  return <IconComponent size={size} weight={weight} {...props} />;
+}

package/src/ui/Icon/index.js

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

package/src/ui/ImageAspect/ImageAspect.jsx

@@ -0,0 +1,56 @@
+import React from "react";
+import "./ImageAspect.scss";
+
+const BASE_CLASS = "uds-image-aspect";
+
+const aspectRatioClassMap = {
+  square: "square",
+  video: "video",
+  "4-3": "4-3",
+  "3-2": "3-2",
+  "21-9": "21-9",
+  portrait: "portrait",
+  auto: "auto",
+};
+
+/**
+ * ImageAspect component for maintaining consistent aspect ratios for images
+ * @param {string} ratio - Aspect ratio variant: 'square', 'video', '4-3', '3-2', '21-9', 'portrait', 'auto'
+ * @param {string} src - Image source URL
+ * @param {string} alt - Alt text for the image
+ * @param {string} className - Additional CSS classes
+ * @param {object} props - Additional props to pass to the image element
+ */
+export default function ImageAspect({
+  ratio = "square",
+  src,
+  alt = "",
+  className = "",
+  ...props
+}) {
+  const classNames = [
+    BASE_CLASS,
+    aspectRatioClassMap[ratio] &&
+      `${BASE_CLASS}--${aspectRatioClassMap[ratio]}`,
+    className,
+  ]
+    .filter(Boolean)
+    .join(" ");
+
+  return (
+    <div className={classNames}>
+      {src ? (
+        <img
+          src={src}
+          alt={alt}
+          className={`${BASE_CLASS}__image`}
+          {...props}
+        />
+      ) : (
+        <div className={`${BASE_CLASS}__placeholder`}>
+          <span className={`${BASE_CLASS}__placeholder-text`}>Image</span>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/ui/ImageAspect/ImageAspect.scss

@@ -0,0 +1,62 @@
+@use "../../styles/typography" as *;
+
+.uds-image-aspect {
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+  background-color: var(--uds-surface-tertiary);
+  border-radius: var(--uds-radius-4);
+
+  // Aspect ratio variants
+  &--square {
+    aspect-ratio: var(--uds-aspect-ratio-square, 1 / 1);
+  }
+
+  &--video {
+    aspect-ratio: var(--uds-aspect-ratio-video, 16 / 9);
+  }
+
+  &--4-3 {
+    aspect-ratio: var(--uds-aspect-ratio-4-3, 4 / 3);
+  }
+
+  &--3-2 {
+    aspect-ratio: var(--uds-aspect-ratio-3-2, 3 / 2);
+  }
+
+  &--21-9 {
+    aspect-ratio: var(--uds-aspect-ratio-21-9, 21 / 9);
+  }
+
+  &--portrait {
+    aspect-ratio: var(--uds-aspect-ratio-portrait, 3 / 4);
+  }
+
+  &--auto {
+    aspect-ratio: var(--uds-aspect-ratio-auto, auto);
+  }
+
+  &__image {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    object-position: center;
+    display: block;
+  }
+
+  &__placeholder {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: var(--uds-surface-tertiary);
+    border: var(--uds-border-width-1) dashed var(--uds-border-primary);
+    color: var(--uds-text-secondary);
+  }
+
+  &__placeholder-text {
+    @include uds-body-14;
+    color: var(--uds-text-secondary);
+  }
+}

package/src/ui/ImageAspect/index.js

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

package/src/ui/Input/Input.figma.tsx

@@ -0,0 +1,35 @@
+import React, { useState } from 'react';
+import Input from './Input';
+
+/**
+ * Figma Code Connect for Input component
+ * 
+ * Simple execution version of input with various configurations
+ */
+export default function InputFigma({
+    value,
+    placeholderText = 'Placeholder',
+    type = 'text',
+    size = 'default',
+    state = 'default',
+    placeholder = false,
+    disabled = false,
+}) {
+    const [internalValue, setInternalValue] = useState(value || '');
+
+    const handleChange = (e) => {
+        setInternalValue(e.target.value);
+    };
+
+    return (
+        <Input
+            value={placeholder ? '' : (value || internalValue)}
+            onChange={handleChange}
+            placeholder={placeholder ? placeholderText : undefined}
+            type={type}
+            size={size.toLowerCase()}
+            state={state.toLowerCase()}
+            disabled={disabled || state === 'disabled'}
+        />
+    );
+}

package/src/ui/Input/Input.jsx

@@ -0,0 +1,68 @@
+import React from "react";
+import "./Input.scss";
+
+const BASE_CLASS = "uds-input";
+
+const sizeClassMap = {
+  compact: "compact",
+  default: "default",
+};
+
+const stateClassMap = {
+  default: "default",
+  focused: "focused",
+  error: "error",
+  disabled: "disabled",
+};
+
+/**
+ * Input component for single-line text input
+ *
+ * @param {string} value - The value of the input
+ * @param {function} onChange - Callback function when value changes
+ * @param {string} placeholder - Placeholder text
+ * @param {string} type - Input type: 'text', 'email', 'password', etc. (default: 'text')
+ * @param {string} size - Size variant: 'compact' or 'default' (default: 'default')
+ * @param {string} state - State variant: 'default', 'focused', 'error', or 'disabled'
+ * @param {boolean} disabled - Whether the input is disabled (overrides state)
+ * @param {string} id - Unique identifier for the input
+ * @param {string} className - Additional CSS classes
+ * @param {object} props - Additional props to pass to the input element
+ */
+export default function Input({
+  value,
+  onChange,
+  placeholder,
+  type = "text",
+  size = "default",
+  state = "default",
+  disabled = false,
+  id,
+  className = "",
+  ...props
+}) {
+  const effectiveState = disabled ? "disabled" : state;
+
+  const classNames = [
+    BASE_CLASS,
+    sizeClassMap[size] && `${BASE_CLASS}--${sizeClassMap[size]}`,
+    stateClassMap[effectiveState] &&
+      `${BASE_CLASS}--${stateClassMap[effectiveState]}`,
+    className,
+  ]
+    .filter(Boolean)
+    .join(" ");
+
+  return (
+    <input
+      id={id}
+      type={type}
+      className={classNames}
+      value={value}
+      onChange={onChange}
+      placeholder={placeholder}
+      disabled={disabled || effectiveState === "disabled"}
+      {...props}
+    />
+  );
+}

package/src/ui/Input/Input.scss

@@ -0,0 +1,64 @@
+@use "../../styles/typography" as *;
+
+.uds-input {
+  @include uds-body-16;
+  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);
+  transition: all var(--uds-animation-duration-200) var(--uds-animation-ease-standard);
+  box-sizing: border-box;
+  font-family: var(--uds-font-family);
+  height: fit-content;
+
+  &::placeholder {
+    color: var(--uds-text-placeholder);
+  }
+
+  // Size variants
+  &--compact {
+    padding: var(--uds-spacing-8) var(--uds-spacing-10);
+    @include uds-body-14;
+  }
+
+  &--default {
+    padding: var(--uds-spacing-10) var(--uds-spacing-12);
+    @include uds-body-16;
+  }
+
+  // Default state (border color)
+  border-color: var(--uds-border-primary);
+
+  // State: Focused
+  &--focused {
+    border-color: var(--uds-border-brand-primary);
+  }
+
+  // State: Error
+  &--error {
+    border-color: var(--uds-text-error, #ef4444);
+  }
+
+  // State: Disabled
+  &--disabled,
+  &:disabled {
+    background-color: var(--uds-surface-tertiary);
+    color: var(--uds-text-secondary);
+    cursor: not-allowed;
+    opacity: 0.6;
+    border-color: var(--uds-border-primary);
+  }
+
+  // Focus state (applies to all states except disabled)
+  &:focus:not(:disabled) {
+    outline: none;
+    border-color: var(--uds-border-brand-primary);
+  }
+
+  // Remove default input styling that might interfere
+  &:focus-visible {
+    outline: none;
+  }
+}

package/src/ui/Input/index.js

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

package/src/ui/Key/Key.jsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import './Key.scss';
+
+const BASE_CLASS = 'uds-key';
+
+const appearanceClassMap = {
+    light: 'light',
+    dark: 'dark',
+};
+
+/**
+ * Key component for displaying keyboard key representations
+ * @param {string} label - The text or symbol to display on the key (e.g., "Esc", "⌘", "Ctrl")
+ * @param {string} appearance - Visual style variant: 'light' or 'dark'
+ * @param {string} className - Additional CSS classes
+ * @param {object} props - Additional props to pass to the key element
+ */
+export default function Key({
+    label,
+    appearance = 'light',
+    className = '',
+    ...props
+}) {
+    const classNames = [
+        BASE_CLASS,
+        appearanceClassMap[appearance] && `${BASE_CLASS}--${appearanceClassMap[appearance]}`,
+        className,
+    ]
+        .filter(Boolean)
+        .join(' ');
+
+    return (
+        <kbd className={classNames} {...props}>
+            {label}
+        </kbd>
+    );
+}

package/src/ui/Key/Key.scss

@@ -0,0 +1,34 @@
+@use "../../styles/typography" as *;
+
+.uds-key {
+    @include uds-body-14-medium;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 24px;
+    height: 24px;
+    padding-inline: var(--uds-padding-8);
+    padding-block: var(--uds-padding-4);
+    border-radius: var(--uds-radius-4);
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+    @include uds-body-12;
+    font-size: 12px;
+    line-height: 1;
+    white-space: nowrap;
+    user-select: none;
+    box-sizing: border-box;
+    transition: all var(--uds-duration-200) var(--uds-ease-standard);
+
+    // Appearance variants
+    &--light {
+        background-color: var(--uds-surface-primary);
+        border: var(--uds-border-width-1) solid var(--uds-border-primary);
+        color: var(--uds-text-secondary);
+    }
+
+    &--dark {
+        background-color: #374151; // Dark blue-gray
+        border: none;
+        color: #FFFFFF;
+    }
+}

package/src/ui/Key/index.js

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