retail-design-system 1.0.0

package/packages/ui/src/foundations/colors/tailwind-v4.css

@@ -0,0 +1,116 @@
+@theme {
+  --color-bg-accent: #86EFAC;
+  --color-bg-accent-inverse: #052E16;
+  --color-bg-decorative-blue: #60A5FA;
+  --color-bg-decorative-blue-inverse: #1E3A8A;
+  --color-bg-decorative-orange: #FB923C;
+  --color-bg-decorative-orange-inverse: #7C2D12;
+  --color-bg-decorative-pink: #F472B6;
+  --color-bg-decorative-pink-inverse: #831843;
+  --color-bg-decorative-purple: #C084FC;
+  --color-bg-decorative-purple-inverse: #581C87;
+  --color-bg-error: #F87171;
+  --color-bg-error-inverse: #450A0A;
+  --color-bg-info: #60A5FA;
+  --color-bg-info-inverse: #172554;
+  --color-bg-interactive: #86EFAC;
+  --color-bg-interactive-disabled: #052E16;
+  --color-bg-interactive-inverse: #052E16;
+  --color-bg-inverse: #272a2d;
+  --color-bg-muted: #212225;
+  --color-bg-muted-disabled: #18191b;
+  --color-bg-muted-secondary: #272a2d;
+  --color-bg-muted-secondary-disabled: #212225;
+  --color-bg-primary: #111113;
+  --color-bg-secondary: #18191b;
+  --color-bg-success: #82E28D;
+  --color-bg-success-inverse: #0E2E12;
+  --color-bg-tertiary: #212225;
+  --color-bg-warning: #FACC15;
+  --color-bg-warning-inverse: #422006;
+  --color-blue-400: #60A5FA;
+  --color-blue-500: #3B82F6;
+  --color-blue-900: #1E3A8A;
+  --color-blue-950: #172554;
+  --color-border-accent: #22C55E;
+  --color-border-error: #EF4444;
+  --color-border-info: #3B82F6;
+  --color-border-inverse: #edeef0;
+  --color-border-primary: #18191b;
+  --color-border-secondary: #212225;
+  --color-border-success: #22C55E;
+  --color-border-tertiary: #272a2d;
+  --color-border-warning: #EAB308;
+  --color-green-100: #DCFCE7;
+  --color-green-200: #BBF7D0;
+  --color-green-300: #86EFAC;
+  --color-green-400: #4ADE80;
+  --color-green-50: #F0FDF4;
+  --color-green-500: #22C55E;
+  --color-green-600: #16A34A;
+  --color-green-700: #15803D;
+  --color-green-800: #166534;
+  --color-green-900: #14532D;
+  --color-green-950: #052E16;
+  --color-neutral-200: #E4E4E7;
+  --color-neutral-400: #A1A1AA;
+  --color-neutral-50: #FAFAFA;
+  --color-orange-400: #FB923C;
+  --color-orange-900: #7C2D12;
+  --color-pink-400: #F472B6;
+  --color-pink-900: #831843;
+  --color-purple-400: #C084FC;
+  --color-purple-900: #581C87;
+  --color-red-400: #F87171;
+  --color-red-500: #EF4444;
+  --color-red-900: #7F1D1D;
+  --color-red-950: #450A0A;
+  --color-sprout-100: #DDF8E0;
+  --color-sprout-200: #C2F2C7;
+  --color-sprout-300: #A3EAAB;
+  --color-sprout-400: #82E28D;
+  --color-sprout-50: #F2FCF3;
+  --color-sprout-500: #5DDF6C;
+  --color-sprout-600: #3DCC4D;
+  --color-sprout-700: #2EAA3C;
+  --color-sprout-800: #25812F;
+  --color-sprout-900: #1A5821;
+  --color-sprout-950: #0E2E12;
+  --color-text-accent: #86EFAC;
+  --color-text-accent-muted: #14532D;
+  --color-text-error: #F87171;
+  --color-text-error-muted: #7F1D1D;
+  --color-text-info: #3B82F6;
+  --color-text-info-muted: #1E3A8A;
+  --color-text-inverse: #111113;
+  --color-text-muted: #363a3f;
+  --color-text-on-accent: #052E16;
+  --color-text-on-disabled: #43484e;
+  --color-text-on-error: #450A0A;
+  --color-text-on-info: #172554;
+  --color-text-on-muted: #edeef0;
+  --color-text-on-success: #0E2E12;
+  --color-text-on-warning: #422006;
+  --color-text-primary: #FAFAFA;
+  --color-text-secondary: #E4E4E7;
+  --color-text-success: #5DDF6C;
+  --color-text-success-muted: #1A5821;
+  --color-text-tertiary: #A1A1AA;
+  --color-text-warning: #EAB308;
+  --color-text-warning-muted: #713F12;
+  --color-yellow-400: #FACC15;
+  --color-yellow-500: #EAB308;
+  --color-yellow-900: #713F12;
+  --color-yellow-950: #422006;
+  --color-zinc-100: #b0b4ba;
+  --color-zinc-200: #696e77;
+  --color-zinc-300: #5a6169;
+  --color-zinc-400: #43484e;
+  --color-zinc-50: #edeef0;
+  --color-zinc-500: #363a3f;
+  --color-zinc-600: #2e3135;
+  --color-zinc-700: #272a2d;
+  --color-zinc-800: #212225;
+  --color-zinc-900: #18191b;
+  --color-zinc-950: #111113;
+}

package/packages/ui/src/index.ts

@@ -0,0 +1,34 @@
+export { ButtonLink, type ButtonLinkProps } from "@/components/button-link/button-link"
+export {
+  Button,
+  BUTTON_CLASS_NAME,
+  type ButtonIconProps,
+  type ButtonProps,
+} from "@/components/button/button"
+export { Column, COLUMN_CLASS_NAME, type ColumnProps } from "@/components/column/column"
+export { Row, ROW_CLASS_NAME, type RowProps } from "@/components/row/row"
+export { Spacer, SPACER_CLASS_NAME, type SpacerProps } from "@/components/spacer/spacer"
+export { Switch, SWITCH_CLASS_NAME, type SwitchProps } from "@/components/switch/switch"
+export {
+  TABS_UNDERLINE_LIST_CLASS_NAME,
+  TabsUnderlineList,
+  type TabsUnderlineListProps,
+} from "@/components/tabs-underline/tabs-underline-list"
+export {
+  TABS_UNDERLINE_TAB_CLASS_NAME,
+  TabsUnderlineTab,
+  type TabsUnderlineTabProps,
+} from "@/components/tabs-underline/tabs-underline-tab"
+export { Tabs, TABS_CLASS_NAME, type TabsProps } from "@/components/tabs/tabs"
+export { TABS_PANEL_CLASS_NAME, TabsPanel, type TabsPanelProps } from "@/components/tabs/tabs-panel"
+export {
+  composite,
+  type CompositeColor,
+  type CompositeColorName,
+  primitive,
+  type PrimitiveColor,
+  type PrimitiveColorName,
+} from "@/foundations/colors/colors"
+export { tailwindV3Colors } from "@/foundations/colors/tailwind-v3"
+export { Input, INPUT_CLASS_NAME, type InputProps } from "@/input"
+export { Label, LABEL_CLASS_NAME, type LabelProps } from "@/label"

package/packages/ui/src/input.module.css

@@ -0,0 +1,57 @@
+/* ===================================================== */
+/* Base */
+/* ===================================================== */
+.input {
+  width: 100%;
+  height: 40px;
+  padding: 0 12px;
+  font-family: var(--font-sans, sans-serif);
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 1.5;
+  color: var(--color-text-primary);
+  text-decoration: none;
+  appearance: none;
+  cursor: text;
+  outline-width: 0;
+  outline-style: solid;
+  outline-color: var(--color-bg-accent);
+  outline-offset: 2px;
+  background-color: var(--color-bg-secondary);
+  border-color: var(--color-border-secondary);
+  border-style: solid;
+  border-width: 1px;
+  border-radius: 12px;
+  box-shadow: 0 1px rgba(0, 0, 0, 0.05);
+  transition-duration: 150ms;
+  transition-property: background-color, border-color, box-shadow, opacity;
+}
+
+.input::placeholder {
+  color: var(--color-text-muted);
+  user-select: none;
+}
+
+.input:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.input:enabled:active,
+.input:enabled:focus,
+.input:enabled:hover,
+.input:enabled[aria-pressed="true"] {
+  border-color: var(--color-zinc-600);
+  box-shadow: 0 1px transparent;
+}
+
+.input:focus-visible {
+  outline-width: 2px;
+}
+
+/* ===================================================== */
+/* Password */
+/* ===================================================== */
+.input__password {
+  font-family: var(--font-mono, monospace);
+}

package/packages/ui/src/input.tsx

@@ -0,0 +1,49 @@
+import type { ComponentProps, JSX } from "react"
+import styles from "@/input.module.css"
+
+export interface InputProps extends Omit<
+  ComponentProps<"input">,
+  "aria-pressed" | "disabled" | "readOnly" | "required"
+> {
+  isActive?: boolean
+  isDisabled?: boolean
+  isReadOnly?: boolean
+  isRequired?: boolean
+}
+
+export function Input(props: InputProps): JSX.Element {
+  const {
+    className: customClassName = "",
+    isDisabled = false,
+    isReadOnly = false,
+    isRequired = false,
+    type = "text",
+    ...rest
+  } = props
+
+  const isPassword = type === "password"
+
+  const combinedClassName = `
+    ${INPUT_CLASS_NAME.BASE}
+    ${isPassword ? INPUT_CLASS_NAME.PASSWORD : ""}
+    ${customClassName}
+  `
+    .replaceAll(/\s+/g, " ")
+    .trim()
+
+  return (
+    <input
+      className={combinedClassName}
+      disabled={isDisabled}
+      readOnly={isReadOnly}
+      required={isRequired}
+      type={type}
+      {...rest}
+    />
+  )
+}
+
+export const INPUT_CLASS_NAME = {
+  BASE: styles.input,
+  PASSWORD: styles.input__password,
+} as const

package/packages/ui/src/label.module.css

@@ -0,0 +1,8 @@
+/* ===================================================== */
+/* Base */
+/* ===================================================== */
+.label {
+  width: fit-content;
+  font-size: 13px;
+  color: var(--color-gray-11, #646464);
+}

package/packages/ui/src/label.tsx

@@ -0,0 +1,23 @@
+// oxlint-disable jsx_a11y/label-has-associated-control
+
+import type { ComponentProps, JSX } from "react"
+import styles from "@/label.module.css"
+
+export interface LabelProps extends ComponentProps<"label"> {}
+
+export function Label(props: LabelProps): JSX.Element {
+  const { className: customClassName = "", ...rest } = props
+
+  const combinedClassName = `
+    ${LABEL_CLASS_NAME.BASE}
+    ${customClassName}
+  `
+    .replaceAll(/\s+/g, " ")
+    .trim()
+
+  return <label className={combinedClassName} {...rest} />
+}
+
+export const LABEL_CLASS_NAME = {
+  BASE: styles.label,
+} as const

package/packages/ui/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "esModuleInterop": true,
+    "jsx": "react-jsx",
+    "lib": ["dom", "esnext"],
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "noEmit": true,
+    "paths": {
+      "@/*": ["./src/*"]
+    },
+    "skipLibCheck": true
+  }
+}

package/packages/ui/tsup.config.ts

@@ -0,0 +1,31 @@
+// oxlint-disable import/no-nodejs-modules
+
+import { copyFileSync, mkdirSync } from "node:fs"
+import path from "node:path"
+import { defineConfig } from "tsup"
+
+export default defineConfig({
+  clean: true,
+  dts: true,
+  entry: ["src/index.ts", "src/foundations/colors/tailwind-v3.ts"],
+  external: ["react", "react-dom"],
+  format: ["esm", "cjs"],
+  loader: {
+    ".css": "copy",
+  },
+  onSuccess: () => {
+    // Copy the tailwind-v3.css CSS file to the dist directory
+    let src = "src/foundations/colors/tailwind-v4.css"
+    let dest = "dist/foundations/colors/tailwind-v4.css"
+    mkdirSync(path.dirname(dest), { recursive: true })
+    copyFileSync(src, dest)
+
+    src = "src/foundations/colors/retail-design-system.css"
+    dest = "dist/foundations/colors/retail-design-system.css"
+    mkdirSync(path.dirname(dest), { recursive: true })
+    copyFileSync(src, dest)
+
+    console.log(`✓ Copied ${src} to ${dest}`)
+    return Promise.resolve()
+  },
+})

package/scripts/clean.sh

@@ -0,0 +1,69 @@
+#!/bin/bash
+
+# Clean script to remove node_modules, .next, dist, and .turbo directories
+# from all folders and subfolders in the project
+
+set -e  # Exit on any error
+
+echo "🧹 Starting cleanup..."
+
+# Function to remove directories if they exist
+remove_if_exists() {
+    local dir_name="$1"
+    local dirs_found
+    local count=0
+
+    echo "🔍 Looking for ${dir_name} directories..."
+
+    # Find all instances of the directory
+    dirs_found=$(find . -name "$dir_name" -type d 2>/dev/null)
+
+    if [ -z "$dirs_found" ]; then
+        echo "  ✅ No ${dir_name} directories found"
+    else
+        # Remove each directory and count them
+        while IFS= read -r dir; do
+            echo "  🗑️  Removing: ${dir}"
+            rm -rf "$dir"
+            ((count++))
+        done <<< "$dirs_found"
+
+        echo "  ✅ Removed ${count} ${dir_name} director$([ $count -eq 1 ] && echo "y" || echo "ies")"
+    fi
+    echo
+}
+
+# Function to remove files if they exist
+remove_files_if_exist() {
+    local file_name="$1"
+    local files_found
+    local count=0
+
+    echo "🔍 Looking for ${file_name} files..."
+
+    # Find all instances of the file
+    files_found=$(find . -name "$file_name" -type f 2>/dev/null)
+
+    if [ -z "$files_found" ]; then
+        echo "  ✅ No ${file_name} files found"
+    else
+        # Remove each file and count them
+        while IFS= read -r file; do
+            echo "  🗑️  Removing: ${file}"
+            rm -f "$file"
+            ((count++))
+        done <<< "$files_found"
+
+        echo "  ✅ Removed ${count} ${file_name} file$([ $count -eq 1 ] && echo "" || echo "s")"
+    fi
+    echo
+}
+
+remove_if_exists ".next"
+remove_if_exists ".turbo"
+remove_if_exists "dist"
+remove_if_exists "node_modules"
+
+remove_files_if_exist "bun.lock"
+
+echo "🎉 Cleanup completed successfully!"

package/scripts/sort-package-json.sh

@@ -0,0 +1,30 @@
+#!/bin/bash
+
+# Recursively finds and sorts all package.json files in the project
+
+set -e # Exit on any error
+
+echo "🔍 Finding all package.json files..."
+
+# Find all package.json files recursively, excluding node_modules
+package_files=$(find . -name "package.json" -not -path "*/node_modules/*" -type f)
+
+if [ -z "$package_files" ]; then
+    echo "❌ No package.json files found"
+    exit 1
+fi
+
+echo "📦 Found package.json files:"
+echo "$package_files" | sed 's/^/  /'
+
+echo ""
+echo "🔧 Sorting package.json files..."
+
+# Sort each package.json file
+for file in $package_files; do
+    echo "  Sorting: $file"
+    bunx sort-package-json "$file"
+done
+
+echo ""
+echo "✅ All package.json files have been sorted!"

package/turbo.json

@@ -0,0 +1,15 @@
+{
+  "$schema": "https://turbo.build/schema.json",
+  "envMode": "loose",
+  "tasks": {
+    "build": {
+      "dependsOn": ["^build"],
+      "outputs": ["!.next/cache/**", ".next/**", "dist/**", "storybook-static/**"]
+    },
+    "dev": {
+      "cache": false,
+      "persistent": true
+    }
+  },
+  "ui": "stream"
+}