@voxel51/voodo 0.1.0 → 0.2.0-dev-prerelease-publishing.0

package/package.json

@@ -1,10 +1,11 @@
 {
   "name": "@voxel51/voodo",
-  "version": "0.1.0",
+  "version": "0.2.0-dev-prerelease-publishing.0",
   "description": "Voxel51's official design ontology (VOODO) system",
   "type": "module",
   "author": "Voxel Engineering <engineering@voxel51.com>",
   "license": "Apache-2.0",
+  "sideEffects": false,
   "repository": {
     "type": "git",
     "url": "https://github.com/voxel51/design-system.git"
@@ -24,7 +25,8 @@
     "./theme.css": "./dist/voodo.css"
   },
   "files": [
-    "dist"
+    "dist",
+    "NOTICE"
   ],
   "scripts": {
     "dev": "vite build --watch",
@@ -32,11 +34,16 @@
     "build:lib": "npm run prepublish && mkdir -p build/lib && npm pack --pack-destination build/lib/",
     "format": "prettier --write '**/*.{ts,tsx}'",
     "format:check": "prettier --check '**/*.{ts,tsx}'",
-    "generate-tailwind-theme": "tsx utils/generate-color-classes.ts && tsx utils/generate-tailwind-theme.ts",
+    "generate-icons": "tsx utils/generate-icons.ts && prettier --write src/components/Icons/icons.tsx --log-level warn",
+    "generate-tailwind-theme": "tsx utils/generate-color-classes.ts && tsx utils/generate-tailwind-theme.ts && tsx utils/generate-css-vars.ts && prettier --write src/theme/cssVar.ts --log-level silent",
     "lint": "eslint src --max-warnings 0",
     "lint:fix": "eslint src --fix",
     "prebuild": "npm run generate-tailwind-theme",
+    "prebuild-storybook": "npm run generate-tailwind-theme",
     "prepublishOnly": "npm run build",
+    "prestorybook": "npm run generate-tailwind-theme",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
     "test": "jest",
     "type-check": "tsc --noEmit",
     "validate:all": "npm run lint && npm run format:check && npm run type-check && npm run build && npm run test"
@@ -49,11 +56,17 @@
     "@headlessui/react": "^2.2.9",
     "@tanstack/react-virtual": "^3.13.24",
     "clsx": "^2.1.1",
+    "date-fns-tz": "^3.2.0",
     "lodash.debounce": "^4.0.8",
     "react-datepicker": "^9.1.0",
     "tailwind-merge": "^3.4.0"
   },
   "devDependencies": {
+    "@heroicons/react": "^2.2.0",
+    "@storybook/addon-a11y": "^10.2.15",
+    "@storybook/addon-docs": "^10.2.15",
+    "@storybook/addon-mcp": "^0.2.0",
+    "@storybook/react-vite": "^10.2.15",
     "@tailwindcss/postcss": "^4.1.17",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.9.1",
@@ -80,11 +93,13 @@
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^30.2.0",
+    "lorem-ipsum": "^2.0.8",
     "postcss": "^8.5.6",
     "prettier": "^3.6.2",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "react-is": "^18.0.0",
+    "storybook": "^10.2.15",
     "tailwindcss": "^4.1.17",
     "ts-jest": "^29.2.5",
     "ts-node": "^10.9.2",

package/dist/components/Icons/Icon.d.ts

@@ -1,37 +0,0 @@
-import { default as React, FC } from 'react';
-import { BrandColor, IconColor, TextColor } from '../../types';
-import { IconName } from '../../types/icons';
-import { Size } from '../../types/size';
-type SvgComponent = React.FC<React.SVGProps<SVGSVGElement>>;
-/**
- * To add a new icon:
- * 1. add the SVG file to the image directory,
- * 2. create a enum value for the icon name
- * 3. import the SVG file and add it to this map
- */
-export declare const iconMap: Record<Exclude<IconName, IconName.Spinner>, SvgComponent>;
-export interface IconProps {
-    name: IconName;
-    size?: Size;
-    className?: string;
-    color?: TextColor | IconColor | BrandColor;
-    style?: React.CSSProperties;
-}
-/**
- * An generic icon component which will take the form of the icon specified by `name`.
- *
- * @example
- * ```tsx
- * <Icon name={IconName.Edit} size={Size.Md} />
- * ```
- *
- * @param name Icon to display. See {@link IconName}.
- * @param size The size of the icon. See {@link Size}.
- * @param className `class` overrides to apply to the component.
- * @param color Color of the icon. By default, the icon inherits the text color of its container.
- * @param style `style` overrides to apply to the icon.
- * @param props Additional HTML properties to apply to the component.
- */
-export declare const Icon: FC<IconProps>;
-export {};
-//# sourceMappingURL=Icon.d.ts.map

package/dist/components/Icons/Icon.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../../src/components/Icons/Icon.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AA0GvC,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,EAAkB,MAAM,SAAS,CAAC;AAC3E,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEpC,KAAK,YAAY,GAAG,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC,CAAC;AAE5D;;;;;GAKG;AACH,eAAO,MAAM,OAAO,EAAE,MAAM,CAC1B,OAAO,CAAC,QAAQ,EAAE,QAAQ,CAAC,OAAO,CAAC,EACnC,YAAY,CAyGb,CAAC;AAWF,MAAM,WAAW,SAAS;IACxB,IAAI,EAAE,QAAQ,CAAC;IACf,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,UAAU,CAAC;IAC3C,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAED;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,IAAI,EAAE,EAAE,CAAC,SAAS,CAuB9B,CAAC"}

package/dist/types/icons.d.ts

@@ -1,108 +0,0 @@
-export declare enum IconName {
-    Activity = "Activity",
-    Add = "Add",
-    AI = "AI",
-    Annotate = "Annotate",
-    ArrowDown = "ArrowDown",
-    ArrowLeft = "ArrowLeft",
-    ArrowRight = "ArrowRight",
-    ArrowUp = "ArrowUp",
-    ArrowUpRight = "ArrowUpRight",
-    Blocks = "Blocks",
-    Boxes = "Boxes",
-    CalendarClock = "CalendarClock",
-    CaretDown = "CaretDown",
-    Check = "Check",
-    Checkbox = "Checkbox",
-    Checklist = "Checklist",
-    ChevronBottom = "ChevronBottom",
-    ChevronLeft = "ChevronLeft",
-    ChevronRight = "ChevronRight",
-    ChevronTop = "ChevronTop",
-    Circle = "Circle",
-    CircleUser = "CircleUser",
-    Close = "Close",
-    Cloud = "Cloud",
-    CloudCog = "CloudCog",
-    Code = "Code",
-    Cog = "Cog",
-    Contact = "Contact",
-    ContentCopy = "ContentCopy",
-    Database = "Database",
-    DateRange = "DateRange",
-    Draw = "Draw",
-    Delete = "Delete",
-    Detection = "Detection",
-    Download = "Download",
-    Drag = "Drag",
-    Edit = "Edit",
-    Embeddings = "Embeddings",
-    Enter = "Enter",
-    Error = "Error",
-    ExitWorkspace = "ExitWorkspace",
-    ExternalLink = "ExternalLink",
-    FileClock = "FileClock",
-    FineTune = "FineTune",
-    Fingerprint = "Fingerprint",
-    Fullscreen = "Fullscreen",
-    GridView = "GridView",
-    History = "History",
-    IdCard = "IdCard",
-    ImageSearch = "ImageSearch",
-    Info = "Info",
-    Insights = "Insights",
-    Inspect = "Inspect",
-    JSON = "JSON",
-    Key = "Key",
-    KeyRound = "KeyRound",
-    KeySquare = "KeySquare",
-    Label = "Label",
-    Lock = "Lock",
-    Logs = "Logs",
-    Menu = "Menu",
-    MoreHorizontal = "MoreHorizontal",
-    MoreVertical = "MoreVertical",
-    Move = "Move",
-    NotebookPen = "NotebookPen",
-    Notes = "Notes",
-    Orchestrator = "Orchestrator",
-    Pause = "Pause",
-    Pencil = "Pencil",
-    Pin = "Pin",
-    Play = "Play",
-    Polyline = "Polyline",
-    Puzzle = "Puzzle",
-    Radio = "Radio",
-    Redo = "Redo",
-    Refresh = "Refresh",
-    Remove = "Remove",
-    Review = "Review",
-    Search = "Search",
-    Server = "Server",
-    Settings = "Settings",
-    ShieldCheck = "ShieldCheck",
-    Slider = "Slider",
-    Sliders = "Sliders",
-    Spinner = "Spinner",
-    Tag = "Tag",
-    Text = "Text",
-    Toggle = "Toggle",
-    Undo = "Undo",
-    UnfoldMore = "UnfoldMore",
-    Unlock = "Unlock",
-    Unsupported = "Unsupported",
-    Upload = "Upload",
-    User = "User",
-    Users = "Users",
-    UsersRound = "UsersRound",
-    VAL = "VAL",
-    VolumeOff = "VolumeOff",
-    VolumeUp = "VolumeUp",
-    Warning = "Warning",
-    Waypoints = "Waypoints",
-    Workflow = "Workflow",
-    Workspaces = "Workspaces",
-    Zap = "Zap"
-}
-export default IconName;
-//# sourceMappingURL=icons.d.ts.map

package/dist/types/icons.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../../src/types/icons.ts"],"names":[],"mappings":"AAAA,oBAAY,QAAQ;IAClB,QAAQ,aAAa;IACrB,GAAG,QAAQ;IACX,EAAE,OAAO;IACT,QAAQ,aAAa;IACrB,SAAS,cAAc;IACvB,SAAS,cAAc;IACvB,UAAU,eAAe;IACzB,OAAO,YAAY;IACnB,YAAY,iBAAiB;IAC7B,MAAM,WAAW;IACjB,KAAK,UAAU;IACf,aAAa,kBAAkB;IAC/B,SAAS,cAAc;IACvB,KAAK,UAAU;IACf,QAAQ,aAAa;IACrB,SAAS,cAAc;IACvB,aAAa,kBAAkB;IAC/B,WAAW,gBAAgB;IAC3B,YAAY,iBAAiB;IAC7B,UAAU,eAAe;IACzB,MAAM,WAAW;IACjB,UAAU,eAAe;IACzB,KAAK,UAAU;IACf,KAAK,UAAU;IACf,QAAQ,aAAa;IACrB,IAAI,SAAS;IACb,GAAG,QAAQ;IACX,OAAO,YAAY;IACnB,WAAW,gBAAgB;IAC3B,QAAQ,aAAa;IACrB,SAAS,cAAc;IACvB,IAAI,SAAS;IACb,MAAM,WAAW;IACjB,SAAS,cAAc;IACvB,QAAQ,aAAa;IACrB,IAAI,SAAS;IACb,IAAI,SAAS;IACb,UAAU,eAAe;IACzB,KAAK,UAAU;IACf,KAAK,UAAU;IACf,aAAa,kBAAkB;IAC/B,YAAY,iBAAiB;IAC7B,SAAS,cAAc;IACvB,QAAQ,aAAa;IACrB,WAAW,gBAAgB;IAC3B,UAAU,eAAe;IACzB,QAAQ,aAAa;IACrB,OAAO,YAAY;IACnB,MAAM,WAAW;IACjB,WAAW,gBAAgB;IAC3B,IAAI,SAAS;IACb,QAAQ,aAAa;IACrB,OAAO,YAAY;IACnB,IAAI,SAAS;IACb,GAAG,QAAQ;IACX,QAAQ,aAAa;IACrB,SAAS,cAAc;IACvB,KAAK,UAAU;IACf,IAAI,SAAS;IACb,IAAI,SAAS;IACb,IAAI,SAAS;IACb,cAAc,mBAAmB;IACjC,YAAY,iBAAiB;IAC7B,IAAI,SAAS;IACb,WAAW,gBAAgB;IAC3B,KAAK,UAAU;IACf,YAAY,iBAAiB;IAC7B,KAAK,UAAU;IACf,MAAM,WAAW;IACjB,GAAG,QAAQ;IACX,IAAI,SAAS;IACb,QAAQ,aAAa;IACrB,MAAM,WAAW;IACjB,KAAK,UAAU;IACf,IAAI,SAAS;IACb,OAAO,YAAY;IACnB,MAAM,WAAW;IACjB,MAAM,WAAW;IACjB,MAAM,WAAW;IACjB,MAAM,WAAW;IACjB,QAAQ,aAAa;IACrB,WAAW,gBAAgB;IAC3B,MAAM,WAAW;IACjB,OAAO,YAAY;IACnB,OAAO,YAAY;IACnB,GAAG,QAAQ;IACX,IAAI,SAAS;IACb,MAAM,WAAW;IACjB,IAAI,SAAS;IACb,UAAU,eAAe;IACzB,MAAM,WAAW;IACjB,WAAW,gBAAgB;IAC3B,MAAM,WAAW;IACjB,IAAI,SAAS;IACb,KAAK,UAAU;IACf,UAAU,eAAe;IACzB,GAAG,QAAQ;IACX,SAAS,cAAc;IACvB,QAAQ,aAAa;IACrB,OAAO,YAAY;IACnB,SAAS,cAAc;IACvB,QAAQ,aAAa;IACrB,UAAU,eAAe;IACzB,GAAG,QAAQ;CACZ;AAED,eAAe,QAAQ,CAAC"}