@lateralus-ai/shipping-ui 1.4.16 → 2.0.0-dev.0

package/src/icons/createIcon.tsx

@@ -0,0 +1,128 @@
+import { forwardRef, type SVGProps } from "react";
+import { cn } from "../utils/cn";
+import { ICON_BOX, type IconProps, type IconSize } from "./types";
+
+export type IconShape = {
+  type?: "path" | "rect";
+  d?: string;
+  x?: number;
+  y?: number;
+  width?: number;
+  height?: number;
+  rx?: number;
+  fill?: string;
+  stroke?: string;
+  fillRule?: "evenodd";
+  strokeWidth?: number;
+  opacity?: number;
+};
+
+export type IconPathEntry = IconShape | IconShape[];
+
+export type IconPathSet = Partial<Record<IconSize, IconPathEntry>>;
+
+export type IconVariantSet = {
+  outline?: IconPathSet;
+  filled?: IconPathSet;
+};
+
+export type CreateIconOptions = {
+  name: string;
+  outline: IconPathSet;
+  filled?: IconPathSet;
+  variants?: Record<string, IconVariantSet>;
+};
+
+const normalizeShapes = (entry: IconPathEntry): IconShape[] =>
+  Array.isArray(entry) ? entry : [entry];
+
+const renderShape = (shape: IconShape, index: number) => {
+  const fill = shape.fill ?? (shape.type === "rect" ? "none" : "currentColor");
+  const stroke = shape.stroke ?? "currentColor";
+
+  if (shape.type === "rect") {
+    return (
+      <rect
+        key={index}
+        x={shape.x}
+        y={shape.y}
+        width={shape.width}
+        height={shape.height}
+        rx={shape.rx}
+        fill={fill}
+        stroke={shape.strokeWidth !== undefined ? stroke : undefined}
+        strokeWidth={shape.strokeWidth}
+        opacity={shape.opacity}
+      />
+    );
+  }
+
+  const useStroke = shape.strokeWidth !== undefined;
+
+  return (
+    <path
+      key={index}
+      d={shape.d}
+      fillRule={shape.fillRule}
+      fill={useStroke ? "none" : fill}
+      stroke={useStroke ? stroke : undefined}
+      strokeWidth={shape.strokeWidth}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      opacity={shape.opacity}
+    />
+  );
+};
+
+export const createIcon = ({ name, outline, filled, variants }: CreateIconOptions) => {
+  const Icon = forwardRef<SVGSVGElement, IconProps & SVGProps<SVGSVGElement>>(
+    ({ size = "large", filled: isFilled = false, variant, className, ...props }, ref) => {
+      const box = ICON_BOX[size];
+      const variantSet = variant ? variants?.[variant] : undefined;
+      const paths = variantSet
+        ? isFilled && variantSet.filled
+          ? variantSet.filled
+          : variantSet.outline
+        : isFilled && filled
+          ? filled
+          : outline;
+      const entry = paths?.[size];
+
+      if (!entry) return null;
+
+      const shapes = normalizeShapes(entry);
+
+      return (
+        <svg
+          ref={ref}
+          width={box}
+          height={box}
+          viewBox={`0 0 ${box} ${box}`}
+          fill="none"
+          className={cn("shrink-0", className)}
+          aria-hidden={props["aria-label"] ? undefined : true}
+          {...props}
+        >
+          {shapes.map(renderShape)}
+        </svg>
+      );
+    },
+  );
+
+  Icon.displayName = name;
+  return Icon;
+};
+
+/** Renders multiple size variants side-by-side for canvas stories */
+export const IconSizeRow = ({
+  Icon,
+  filled,
+}: {
+  Icon: React.ComponentType<IconProps>;
+  filled?: boolean;
+}) => (
+  <>
+    <Icon size="large" filled={filled} />
+    <Icon size="small" filled={filled} />
+  </>
+);

package/src/icons/generated.tsx

@@ -0,0 +1,71 @@
+import { createIcon } from "./createIcon";
+import { iconsData } from "./icons-data";
+
+export const AttachmentIcon = createIcon(iconsData.attachment);
+export const MicrophoneIcon = createIcon(iconsData.microphone);
+export const AddIcon = createIcon(iconsData.add);
+export const PlusIcon = createIcon(iconsData.plus);
+export const DoneIcon = createIcon(iconsData.done);
+export const MinusIcon = createIcon(iconsData.minus);
+export const SendIcon = createIcon(iconsData.send);
+export const SearchIcon = createIcon(iconsData.search);
+export const StarIcon = createIcon(iconsData.star);
+export const HeartIcon = createIcon(iconsData.heart);
+export const ClearIcon = createIcon(iconsData.clear);
+export const AnalyticsIcon = createIcon(iconsData.analytics);
+export const TrashIcon = createIcon(iconsData.trash);
+export const ChatIcon = createIcon(iconsData.chat);
+export const ChatProIcon = createIcon(iconsData.chatPro);
+export const FiltersIcon = createIcon(iconsData.filters);
+export const PenIcon = createIcon(iconsData.pen);
+export const TickIcon = createIcon(iconsData.tick);
+export const DocumentIcon = createIcon(iconsData.document);
+export const SparklesIcon = createIcon(iconsData.sparkles);
+export const ExpandIcon = createIcon(iconsData.expand);
+export const SpeakerIcon = createIcon(iconsData.speaker);
+export const CopyIcon = createIcon(iconsData.copy);
+export const DateIcon = createIcon(iconsData.date);
+export const RefreshIcon = createIcon(iconsData.refresh);
+export const ActivityIcon = createIcon(iconsData.activity);
+export const MenuIcon = createIcon(iconsData.menu);
+export const InviteIcon = createIcon(iconsData.invite);
+export const ReportIcon = createIcon(iconsData.report);
+export const SidebarIcon = createIcon(iconsData.sidebar);
+export const DownloadIcon = createIcon(iconsData.download);
+export const UploadIcon = createIcon(iconsData.upload);
+export const PreviewIcon = createIcon(iconsData.preview);
+export const FixesIcon = createIcon(iconsData.fixes);
+export const IssuesIcon = createIcon(iconsData.issues);
+export const MoreIcon = createIcon(iconsData.more);
+export const BulbIcon = createIcon(iconsData.bulb);
+export const ShipIcon = createIcon(iconsData.ship);
+export const PersonIcon = createIcon(iconsData.person);
+export const ArchiveIcon = createIcon(iconsData.archive);
+export const LogOutIcon = createIcon(iconsData.logOut);
+export const SettingsIcon = createIcon(iconsData.settings);
+export const TasksIcon = createIcon(iconsData.tasks);
+export const WorkflowIcon = createIcon(iconsData.workflow);
+export const FormIcon = createIcon(iconsData.form);
+export const ApprovalIcon = createIcon(iconsData.approval);
+export const FormsIcon = createIcon(iconsData.forms);
+export const BookIcon = createIcon(iconsData.book);
+export const MentionIcon = createIcon(iconsData.mention);
+export const ActionsIcon = createIcon(iconsData.actions);
+export const CriticalIcon = createIcon(iconsData.critical);
+export const InformationIcon = createIcon(iconsData.information);
+export const CautionIcon = createIcon(iconsData.caution);
+export const FolderIcon = createIcon(iconsData.folder);
+export const FolderStarredIcon = createIcon(iconsData.folderStarred);
+export const QualityIcon = createIcon(iconsData.quality);
+export const LocationIcon = createIcon(iconsData.location);
+export const UsersIcon = createIcon(iconsData.users);
+export const UndoIcon = createIcon(iconsData.undo);
+export const SpinnerIcon = createIcon(iconsData.spinner);
+export const ClockIcon = createIcon(iconsData.clock);
+export const GapIcon = createIcon(iconsData.gap);
+export const DefectReportIcon = createIcon(iconsData.defectReport);
+export const TaskIcon = createIcon(iconsData.task);
+export const FileIcon = createIcon(iconsData.file);
+export const ReportActionsIcon = createIcon(iconsData.reportActions);
+export const CheckboxIcon = createIcon(iconsData.checkbox);
+export const StatusIcon = createIcon(iconsData.status);

package/src/icons/icon-sizes.ts

@@ -0,0 +1,20 @@
+import { iconsData, type IconDataName } from "./icons-data";
+import type { IconSize } from "./types";
+
+const sizesFromPathSet = (set?: Partial<Record<IconSize, unknown>>): IconSize[] =>
+  set ? (Object.keys(set) as IconSize[]) : [];
+
+export const getOutlineSizes = (name: IconDataName): IconSize[] =>
+  sizesFromPathSet(iconsData[name].outline);
+
+export const getFilledSizes = (name: IconDataName): IconSize[] =>
+  sizesFromPathSet(iconsData[name].filled);
+
+export const hasIconSize = (
+  name: IconDataName,
+  size: IconSize,
+  filled = false,
+): boolean => {
+  const paths = filled ? iconsData[name].filled : iconsData[name].outline;
+  return Boolean(paths?.[size]);
+};