@krapwoo/ds-viewer 0.1.0 → 0.2.0

package/starter-kit/icons/Icon.native.tsx

@@ -0,0 +1,90 @@
+/**
+ * react-native-svg renderer for the shared icon data (`./paths`).
+ *
+ * Reads `ICON_PATHS[name]` and maps each primitive to the matching RN-SVG element. Stroke icons
+ * get round caps/joins in the Lucide style; fill icons render solid. Per-primitive `fill`/`stroke`
+ * overrides (used by the transit icons) win over the def-level mode.
+ */
+import React from 'react';
+import Svg, { Path, Rect, Circle, Line, Polyline, Polygon } from 'react-native-svg';
+import { DS_SEMANTIC, DS_ICON_SIZE } from '../tokens';
+import { ICON_PATHS, type IconPrimitive } from './paths';
+import type { IconRenderProps } from './types';
+
+export type IconProps = IconRenderProps & { accessibilityLabel?: string };
+
+/** Resolve a primitive's `'color' | 'none'` sentinel against the active icon color. */
+function resolvePaint(value: 'color' | 'none' | undefined, color: string): string | undefined {
+  if (value === undefined) return undefined;
+  return value === 'color' ? color : 'none';
+}
+
+export function Icon({
+  name,
+  size = DS_ICON_SIZE.sm,
+  color = DS_SEMANTIC.text.regular,
+  strokeWidth,
+  accessibilityLabel,
+}: IconProps) {
+  const def = ICON_PATHS[name];
+  if (!def) return null;
+
+  const isStroke = def.mode === 'stroke';
+  const defStrokeWidth = strokeWidth ?? def.strokeWidth ?? 2;
+
+  return (
+    <Svg
+      width={size}
+      height={size}
+      viewBox={def.viewBox}
+      fill="none"
+      accessibilityLabel={accessibilityLabel}
+    >
+      {def.primitives.map((p, i) => {
+        // Per-primitive override wins; otherwise fall back to the def mode.
+        const fill = resolvePaint(p.fill, color) ?? (isStroke ? 'none' : color);
+        const stroke = resolvePaint(p.stroke, color) ?? (isStroke ? color : undefined);
+        const hasStroke = stroke !== undefined && stroke !== 'none';
+
+        const common: Record<string, unknown> = { fill, fillRule: p.fillRule };
+        if (hasStroke) {
+          common.stroke = stroke;
+          common.strokeWidth = p.strokeWidth ?? defStrokeWidth;
+          // Round caps/joins are the Lucide house style; only apply for stroke-mode icons.
+          if (isStroke) {
+            common.strokeLinecap = 'round';
+            common.strokeLinejoin = 'round';
+          }
+        }
+        // A `transform` string (not `translateX`/`translateY` props) — react-native-svg's web
+        // shim only folds `translateX`/`translateY` into the SVG `transform` attribute, it does not
+        // strip the original props first, so they would otherwise also reach the DOM unchanged and
+        // React would warn "does not recognize the `translateX` prop on a DOM element".
+        if (p.translateX !== undefined || p.translateY !== undefined) {
+          common.transform = `translate(${p.translateX ?? 0}, ${p.translateY ?? 0})`;
+        }
+
+        return renderPrimitive(p, common, i);
+      })}
+    </Svg>
+  );
+}
+
+function renderPrimitive(p: IconPrimitive, common: Record<string, unknown>, key: number): React.ReactElement | null {
+  switch (p.tag) {
+    case 'path':
+      return <Path key={key} {...common} d={p.d} />;
+    case 'rect':
+      return <Rect key={key} {...common} x={p.x} y={p.y} width={p.width} height={p.height} rx={p.rx} ry={p.ry} />;
+    case 'circle':
+      return <Circle key={key} {...common} cx={p.cx} cy={p.cy} r={p.r} />;
+    case 'line':
+      return <Line key={key} {...common} x1={p.x1} y1={p.y1} x2={p.x2} y2={p.y2} />;
+    case 'polyline':
+      return <Polyline key={key} {...common} points={p.points} />;
+    case 'polygon':
+      return <Polygon key={key} {...common} points={p.points} />;
+    default:
+      return null;
+  }
+}

package/starter-kit/icons/index.ts

@@ -0,0 +1,10 @@
+/**
+ * Shared icon layer barrel.
+ *
+ * Exposes the platform-neutral data + types only. Consumers import the renderer explicitly as
+ * `../icons/Icon.native` (the only renderer today — see the repo README for how a future platform
+ * port would add its own `Icon.<platform>.tsx` alongside it without touching this data).
+ */
+export { ICON_PATHS } from './paths';
+export type { IconPrimitive, IconDef } from './paths';
+export type { IconName, IconRenderProps } from './types';