@mich8060/chg-design-system 0.1.0

package/src/ui/index.js

@@ -0,0 +1,63 @@
+/**
+ * UDS Component Library
+ * 
+ * A comprehensive React component library built with design tokens.
+ * 
+ * Usage:
+ *   import { Button, Chip, Avatar } from "@yourorg/uds-components";
+ *   import "@yourorg/uds-components/dist/styles.css";
+ */
+
+// Layout & Structure
+export { default as Accordion, AccordionItem } from "./Accordion";
+export { default as Card } from "./Card";
+export { default as Divider } from "./Divider";
+export { default as Flex } from "./Flex";
+export { default as ImageAspect } from "./ImageAspect";
+export { default as Steps } from "./Steps";
+export { default as Table } from "./Table";
+export { default as Tabs, TabItem } from "./Tabs";
+
+// Navigation
+export { default as ActionMenu } from "./ActionMenu";
+export { default as Breadcrumb } from "./Breadcrumb";
+export { default as Dropdown } from "./Dropdown";
+export { default as Menu } from "./Menu";
+export { default as Pagination } from "./Pagination";
+
+// Form Controls
+export { default as Button } from "./Button";
+export { default as Checkbox } from "./Checkbox";
+export { default as Chip } from "./Chip";
+export { default as Datepicker } from "./Datepicker";
+export { default as Field } from "./Field";
+export { default as FileUpload } from "./FileUpload";
+export { default as Input } from "./Input";
+export { default as PillToggle } from "./PillToggle";
+export { default as Radio } from "./Radio";
+export { default as Slider } from "./Slider";
+export { default as Textarea } from "./Textarea";
+export { default as Toggle } from "./Toggle";
+
+// Data Display
+export { default as Avatar } from "./Avatar";
+export { default as Badge } from "./Badge";
+export { default as DotStatus } from "./DotStatus";
+export { default as Icon } from "./Icon";
+export { default as Key } from "./Key";
+export { default as ProgressCircle } from "./ProgressCircle";
+export { default as ProgressIndicator } from "./ProgressIndicator";
+export { default as Status } from "./Status";
+export { default as Tag } from "./Tag";
+
+// Feedback
+export { default as Toast } from "./Toast";
+export { default as Tooltip } from "./Tooltip";
+
+// Branding
+export { default as Branding } from "./Branding";
+
+// Utilities
+export { default as CopyButton } from "./CopyButton";
+export { default as MicroCalendar } from "./MicroCalendar";
+export { default as Playground } from "./Playground";

package/src/utils/formatDate.js

@@ -0,0 +1,27 @@
+/**
+ * Format date as "Month Day, Year" (e.g., "March 11, 2025")
+ * @param {Date} date - Date object to format (defaults to today)
+ * @returns {string} Formatted date string
+ */
+export function formatLastUpdated(date = new Date()) {
+  const months = [
+    "January",
+    "February",
+    "March",
+    "April",
+    "May",
+    "June",
+    "July",
+    "August",
+    "September",
+    "October",
+    "November",
+    "December",
+  ];
+
+  const month = months[date.getMonth()];
+  const day = date.getDate();
+  const year = date.getFullYear();
+
+  return `${month} ${day}, ${year}`;
+}

package/src/utils/headerVariants.js

@@ -0,0 +1,69 @@
+/**
+ * Utility to assign random geometric shapes to headers
+ * Each page gets unique shapes positioned around the edges based on the Figma design
+ */
+
+/**
+ * Generate unique shapes data for a given pathname
+ * Returns an object with shapes to render
+ */
+export function getHeaderShapes(pathname) {
+  if (!pathname || pathname === "/") {
+    return generateShapes(0);
+  }
+
+  // Simple hash function to convert pathname to a number
+  let hash = 0;
+  for (let i = 0; i < pathname.length; i++) {
+    const char = pathname.charCodeAt(i);
+    hash = (hash << 5) - hash + char;
+    hash = hash & hash; // Convert to 32-bit integer
+  }
+
+  return generateShapes(Math.abs(hash));
+}
+
+function generateShapes(seed) {
+  // Use seed to generate consistent but varied shapes
+  const shapes = [];
+  const colors = [
+    "#00D4FF",
+    "#3B82F6",
+    "#06B6D4",
+    "#8B5CF6",
+    "#6366F1",
+    "#EC4899",
+    "#F472B6",
+    "#DB2777",
+  ];
+
+  // Generate circles
+  for (let i = 0; i < 4; i++) {
+    const x = (seed + i * 23) % 95;
+    const y = (seed + i * 37) % 90;
+    const size = 6 + ((seed + i * 7) % 8);
+    const color = colors[(seed + i * 3) % colors.length];
+    shapes.push({ type: "circle", x, y, size, color });
+  }
+
+  // Generate triangles
+  for (let i = 0; i < 5; i++) {
+    const x = (seed + i * 19) % 95;
+    const y = (seed + i * 41) % 90;
+    const size = 5 + ((seed + i * 11) % 6);
+    const color = colors[(seed + i * 5) % colors.length];
+    shapes.push({ type: "triangle", x, y, size, color });
+  }
+
+  // Generate lines (dashes)
+  for (let i = 0; i < 6; i++) {
+    const x = (seed + i * 31) % 95;
+    const y = (seed + i * 17) % 90;
+    const length = 8 + ((seed + i * 13) % 10);
+    const angle = (seed + i * 29) % 360;
+    const color = colors[(seed + i * 7) % colors.length];
+    shapes.push({ type: "line", x, y, length, angle, color });
+  }
+
+  return shapes;
+}

package/vite.config.lib.js

@@ -0,0 +1,55 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import { resolve } from "path";
+
+/**
+ * Vite configuration for building the component library
+ * 
+ * Run with: npm run build:lib
+ * 
+ * This creates:
+ *   - dist/uds-components.es.js (ES modules)
+ *   - dist/uds-components.umd.js (UMD for script tags)
+ *   - dist/style.css (all component styles bundled)
+ */
+export default defineConfig({
+  plugins: [react()],
+  build: {
+    outDir: "dist",
+    lib: {
+      entry: resolve(__dirname, "src/ui/index.js"),
+      name: "UDSComponents",
+      fileName: (format) => `uds-components.${format}.js`,
+    },
+    rollupOptions: {
+      // Externalize deps that shouldn't be bundled
+      external: ["react", "react-dom", "react-router-dom"],
+      output: {
+        // Global variables for UMD build
+        globals: {
+          react: "React",
+          "react-dom": "ReactDOM",
+          "react-router-dom": "ReactRouterDOM",
+        },
+        // Preserve component folder structure for CSS
+        assetFileNames: (assetInfo) => {
+          if (assetInfo.name === "style.css") return "styles.css";
+          return assetInfo.name;
+        },
+      },
+    },
+    // Generate sourcemaps for debugging
+    sourcemap: true,
+    // Don't minify for better debugging (set to true for production)
+    minify: false,
+  },
+  // Resolve SCSS imports
+  css: {
+    preprocessorOptions: {
+      scss: {
+        // Use modern Sass API
+        api: "modern-compiler",
+      },
+    },
+  },
+});