@olympusoss/canvas 4.0.0 → 5.0.0

package/src/organisms/charts/charts.styles.ts

@@ -0,0 +1,135 @@
+import { type ViewStyle, type TextStyle } from "react-native";
+import { type ColorTokens, palette, shadow } from "../../style/index.js";
+
+// Co-located Chart styles. Layout-only fragments are static objects; anything
+// that reads a color is a function of the active tokens (so the surface follows
+// light/dark, and reads as glass when the ThemeProvider's surface is "glass",
+// since tokens.card is swapped translucent at the theming level). The bar fill
+// per tone is the one palette-vs-token choice, resolved by `barFill`.
+
+export type Tone = "primary" | "success" | "destructive";
+
+// --- surface ----------------------------------------------------------------
+
+// The bordered, shadowed card surface (rounded-lg border border-border bg-card
+// shadow-sm), mirroring the docs `cardCls`.
+export function surface(tokens: ColorTokens): ViewStyle {
+  return {
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: tokens.border,
+    backgroundColor: tokens.card,
+    ...shadow("sm"),
+  };
+}
+
+// Surface padding by density: p-4 (compact) vs p-5 (default).
+export const surfacePadCompact: ViewStyle = { padding: 16 };
+export const surfacePadDefault: ViewStyle = { padding: 20 };
+
+// --- title ------------------------------------------------------------------
+
+// Heading: font-semibold text-card-foreground; size/inset switch by density.
+export function title(tokens: ColorTokens): TextStyle {
+  return { fontWeight: "600", color: tokens["card-foreground"] };
+}
+
+// mb-3 text-sm (compact) vs mb-4 text-base (default).
+export const titleCompact: TextStyle = { marginBottom: 12, fontSize: 14, lineHeight: 20 };
+export const titleDefault: TextStyle = { marginBottom: 16, fontSize: 16, lineHeight: 24 };
+
+// --- bar fill ---------------------------------------------------------------
+
+// The fill for each bar, by tone. Token primary by default; saturated palette
+// hues for the success / destructive tones so the chart reads in either scheme.
+export function barFill(tokens: ColorTokens, tone: Tone): string {
+  if (tone === "success") return palette["green-500"];
+  if (tone === "destructive") return palette["red-500"];
+  return tokens.primary;
+}
+
+// --- horizontal layout ------------------------------------------------------
+
+// The horizontal stack of rows (flex-col); the gap is applied by the component.
+export const horizontalStack: ViewStyle = { flexDirection: "column" };
+
+// One horizontal row: a label, a track-aligned bar, and the value
+// (flex-row items-center gap-2).
+export const horizontalRow: ViewStyle = { flexDirection: "row", alignItems: "center", gap: 8 };
+
+// The row's leading label (w-16 text-xs text-muted-foreground).
+export function horizontalLabel(tokens: ColorTokens): TextStyle {
+  return { width: 64, fontSize: 12, lineHeight: 16, color: tokens["muted-foreground"] };
+}
+
+// The track that holds a horizontal bar (flex-1 flex-row items-center).
+export const horizontalTrack: ViewStyle = {
+  flexGrow: 1,
+  flexShrink: 1,
+  flexBasis: "0%",
+  flexDirection: "row",
+  alignItems: "center",
+};
+
+// A horizontal bar: h-3 rounded-r plus its fill and width (set by the
+// component). The right corners are rounded; the left edge sits on the track.
+export function horizontalBar(fill: string, width: number): ViewStyle {
+  return {
+    height: 12,
+    borderTopRightRadius: 4,
+    borderBottomRightRadius: 4,
+    backgroundColor: fill,
+    width,
+  };
+}
+
+// The trailing value (text-xs font-medium text-card-foreground).
+export function horizontalValue(tokens: ColorTokens): TextStyle {
+  return { fontSize: 12, lineHeight: 16, fontWeight: "500", color: tokens["card-foreground"] };
+}
+
+// --- vertical layout --------------------------------------------------------
+
+// The baseline-aligned row of columns (flex-row items-end); the gap and the
+// plot height are applied by the component.
+export const verticalBars: ViewStyle = { flexDirection: "row", alignItems: "flex-end" };
+
+// One column wrapping a vertical bar (flex-1 items-stretch).
+export const verticalColumn: ViewStyle = {
+  flexGrow: 1,
+  flexShrink: 1,
+  flexBasis: "0%",
+  alignItems: "stretch",
+};
+
+// A vertical bar: rounded-t plus its fill and height (set by the component).
+export function verticalBar(fill: string, height: number): ViewStyle {
+  return {
+    borderTopLeftRadius: 4,
+    borderTopRightRadius: 4,
+    backgroundColor: fill,
+    height,
+  };
+}
+
+// The hairline baseline under the bars (h-px w-full bg-border).
+export function baseline(tokens: ColorTokens): ViewStyle {
+  return { height: 1, width: "100%", backgroundColor: tokens.border };
+}
+
+// The labels row under the baseline (mt-2 flex-row); the gap is applied by the
+// component.
+export const verticalLabelsRow: ViewStyle = { marginTop: 8, flexDirection: "row" };
+
+// One column's label (flex-1 text-center text-xs text-muted-foreground).
+export function verticalLabel(tokens: ColorTokens): TextStyle {
+  return {
+    flexGrow: 1,
+    flexShrink: 1,
+    flexBasis: "0%",
+    textAlign: "center",
+    fontSize: 12,
+    lineHeight: 16,
+    color: tokens["muted-foreground"],
+  };
+}

package/src/organisms/charts/charts.tsx

@@ -0,0 +1,124 @@
+import { View, Text, useTheme, type StyleProp, type ViewStyle } from "../../style/index.js";
+import * as s from "./charts.styles.js";
+import { type Tone } from "./charts.styles.js";
+
+// Chart: a token-themed bar chart built entirely from View views, no SVG and no
+// CSS grid. Each datum is a vertical (or horizontal) bar whose length is a
+// pixel height computed in JS from its value against the axis max. A label sits
+// under (or beside) each bar.
+//
+// This is Canvas's faithful, SVG-free take on the docs "charts" organism: the
+// other chart types in that entry (sparkline, gauge, heatmap, stacked) lean on
+// SVG and grid, so they are approximated by the bar chart here.
+//
+// Boolean-prop API: one boolean per option, grouped by axis, first-match
+// precedence within an axis (mirrors Button's intentOf). Axes:
+//
+// - Tone (pick one; default is the primary fill): `success` paints bars green,
+//   `destructive` paints them red. Precedence: success > destructive > default.
+// - Orientation: `horizontal` lays bars out as sideways rows; omit for the
+//   default vertical column chart.
+// - Density: `compact` shrinks the plot area and tightens the gaps; omit for
+//   the default density.
+
+export interface ChartDatum {
+  /** Bucket label shown under (vertical) or beside (horizontal) the bar. */
+  label: string;
+  /** The bar's magnitude. Compared against `max` to size the bar. */
+  value: number;
+}
+
+export interface ChartProps {
+  /** The bars to render, in order. */
+  data: ChartDatum[];
+  /** Optional heading shown above the plot. */
+  title?: string;
+  /** Axis maximum. Defaults to the largest value in `data`. */
+  max?: number;
+  // Tone (pick one; default is the primary fill).
+  success?: boolean;
+  destructive?: boolean;
+  // Orientation (default is a vertical column chart).
+  horizontal?: boolean;
+  // Density (default is the standard plot size).
+  compact?: boolean;
+  /** Escape hatch for layout/positioning composition (mainly width). */
+  style?: StyleProp<ViewStyle>;
+}
+
+// Tone precedence when more than one is passed: first match wins.
+function toneOf(p: ChartProps): Tone {
+  if (p.success) return "success";
+  if (p.destructive) return "destructive";
+  return "primary";
+}
+
+// Plot length in px (bar travel: chart height for vertical, bar width for
+// horizontal), by density.
+const PLOT_LENGTH = { default: 140, compact: 96 } as const;
+
+export function Chart(props: ChartProps) {
+  const { data, title, style } = props;
+  const tone = toneOf(props);
+  const horizontal = !!props.horizontal;
+  const compact = !!props.compact;
+  const { tokens } = useTheme();
+
+  const fill = s.barFill(tokens, tone);
+  const plot = compact ? PLOT_LENGTH.compact : PLOT_LENGTH.default;
+  // Axis max: the caller's, else the largest value, else 1 to avoid /0.
+  const values = data.map((d) => d.value);
+  const max = props.max != null && props.max > 0 ? props.max : Math.max(1, ...values);
+
+  // Map a value to a clamped pixel length along the plot axis.
+  const lengthPx = (value: number): number => {
+    const ratio = Math.max(0, Math.min(1, value / max));
+    return Math.max(2, Math.round(ratio * plot));
+  };
+
+  // Per-bar gap by density: gap-1.5 (6) compact, gap-2 (8) default.
+  const gap = compact ? 6 : 8;
+
+  return (
+    <View style={[s.surface(tokens), compact ? s.surfacePadCompact : s.surfacePadDefault, style]}>
+      {title != null && title !== "" ? (
+        <Text style={[s.title(tokens), compact ? s.titleCompact : s.titleDefault]}>{title}</Text>
+      ) : null}
+
+      {horizontal ? (
+        // Horizontal: each row is a label, a track-aligned bar, and the value.
+        <View style={[s.horizontalStack, { gap }]}>
+          {data.map((d, i) => (
+            <View key={i} style={s.horizontalRow}>
+              <Text style={s.horizontalLabel(tokens)}>{d.label}</Text>
+              <View style={s.horizontalTrack}>
+                <View style={s.horizontalBar(fill, lengthPx(d.value))} />
+              </View>
+              <Text style={s.horizontalValue(tokens)}>{d.value}</Text>
+            </View>
+          ))}
+        </View>
+      ) : (
+        // Vertical: a baseline-aligned row of columns, each a bar over its label.
+        <View>
+          <View style={[s.verticalBars, { gap, height: plot }]}>
+            {data.map((d, i) => (
+              <View key={i} style={s.verticalColumn}>
+                <View style={s.verticalBar(fill, lengthPx(d.value))} />
+              </View>
+            ))}
+          </View>
+          {/* Baseline under the bars. */}
+          <View style={s.baseline(tokens)} />
+          <View style={[s.verticalLabelsRow, { gap }]}>
+            {data.map((d, i) => (
+              <Text key={i} style={s.verticalLabel(tokens)}>
+                {d.label}
+              </Text>
+            ))}
+          </View>
+        </View>
+      )}
+    </View>
+  );
+}

package/src/organisms/command/command.md

@@ -0,0 +1,117 @@
+# Command Palette
+
+Cmd+K search: navigation, actions, recent items.
+
+## Usage
+
+```tsx
+<Command
+  active={0}
+  placeholder="Type a command..."
+  trigger
+  groups={[
+    { heading: "Actions", items: [
+      { label: "New File", icon: "📄", shortcut: "Ctrl+N" },
+      { label: "Open File", icon: "📂", shortcut: "Ctrl+O" },
+      { label: "Save", icon: "💾", shortcut: "Ctrl+S" }
+    ] },
+    { heading: "Navigation", items: [
+      { label: "Go to Dashboard", icon: "▸" },
+      { label: "Go to Settings", icon: "▸" }
+    ] }
+  ]}
+/>
+```
+
+## Variants
+
+### Mode - inline
+
+```tsx
+<Command
+  active={0}
+  placeholder="Type a command..."
+  groups={[
+    { heading: "Actions", items: [
+      { label: "New File", icon: "📄", shortcut: "Ctrl+N" },
+      { label: "Open File", icon: "📂", shortcut: "Ctrl+O" },
+      { label: "Save", icon: "💾", shortcut: "Ctrl+S" }
+    ] },
+    { heading: "Navigation", items: [
+      { label: "Go to Dashboard", icon: "▸" },
+      { label: "Go to Settings", icon: "▸" }
+    ] }
+  ]}
+/>
+```
+
+### Footer with key hints
+
+```tsx
+<Command
+  active={0}
+  placeholder="Type a command..."
+  trigger
+  footer
+  groups={[
+    { heading: "Actions", items: [
+      { label: "New File", icon: "📄", shortcut: "Ctrl+N" },
+      { label: "Open File", icon: "📂", shortcut: "Ctrl+O" },
+      { label: "Save", icon: "💾", shortcut: "Ctrl+S" }
+    ] },
+    { heading: "Navigation", items: [
+      { label: "Go to Dashboard", icon: "▸" },
+      { label: "Go to Settings", icon: "▸" }
+    ] }
+  ]}
+/>
+```
+
+## Do & Don't
+
+### Trigger
+
+**Do** — Surface the shortcut in a trailing kbd so the trigger advertises the faster keyboard path.
+
+```tsx
+<Command trigger />
+```
+
+**Don't** — A bare search button hides the keyboard shortcut, so power users never learn the &#8984;K entry point.
+
+```tsx
+<Pressable style={{ flexDirection: "row", alignItems: "center", gap: 8, alignSelf: "flex-start", borderRadius: 6, borderWidth: 1, borderColor: tokens.input, backgroundColor: "transparent", paddingHorizontal: 12, paddingVertical: 6 }}>
+  <Icon search muted size={14} />
+  <Text style={{ fontSize: 14, lineHeight: 20, color: tokens.foreground }}>Search...</Text>
+</Pressable>
+```
+
+### Inline
+
+**Do** — Group commands under labels with separators and highlight the first match so results stay scannable.
+
+```tsx
+<Command open placeholder="Type a command..." active={0} groups={[
+    { heading: "Actions", items: [
+      { label: "New File", icon: "📄", shortcut: "Ctrl+N" },
+      { label: "Save", icon: "💾", shortcut: "Ctrl+S" }
+    ] },
+    { heading: "Navigation", items: [
+      { label: "Go to Dashboard", icon: "▸" },
+      { label: "Go to Settings", icon: "▸" }
+    ] }
+  ]} />
+```
+
+**Don't** — Dumping every command into one flat list with no labels makes the palette hard to scan.
+
+```tsx
+<Command open placeholder="Type a command..." active={-1} groups={[
+    { items: [
+      { label: "New File", icon: "📄", shortcut: "Ctrl+N" },
+      { label: "Save", icon: "💾", shortcut: "Ctrl+S" },
+      { label: "Go to Dashboard", icon: "▸" },
+      { label: "Go to Settings", icon: "▸" }
+    ] }
+  ]} />
+```

package/src/organisms/command/command.styles.ts

@@ -0,0 +1,179 @@
+import { type ViewStyle, type TextStyle } from "react-native";
+import { type ColorTokens, shadow } from "../../style/index.js";
+
+// Co-located Command styles. Layout-only fragments are static objects; anything
+// that reads a color is a function of the active tokens (so the palette follows
+// light/dark, and the popover surface reads as glass when the ThemeProvider's
+// surface is "glass", since tokens.popover is swapped translucent at the theming
+// level). The active-row highlight and the row press state both use the accent
+// token: the highlight is composed in the component, the press state in the
+// Pressable's style callback.
+
+// --- card shell -------------------------------------------------------------
+
+// The floating palette card: fixed width, rounded, bordered, raised, clipping
+// its rounded corners. (w-[420px] rounded-lg border border-border bg-popover
+// shadow-xl overflow-hidden.)
+export function card(tokens: ColorTokens): ViewStyle {
+  return {
+    width: 420,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: tokens.border,
+    backgroundColor: tokens.popover,
+    overflow: "hidden",
+    ...shadow("xl"),
+  };
+}
+
+// In trigger mode the card floats below the collapsed trigger button.
+// (absolute top-full left-0 z-50 mt-3.)
+export const cardFloating: ViewStyle = {
+  position: "absolute",
+  top: "100%",
+  left: 0,
+  zIndex: 50,
+  marginTop: 12,
+};
+
+// --- search row -------------------------------------------------------------
+
+// The search row at the top of the card: a leading glyph + the muted
+// placeholder, with a hairline under it.
+// (flex-row items-center gap-2 border-b border-border px-3 py-3.)
+export function searchRow(tokens: ColorTokens): ViewStyle {
+  return {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+    borderBottomWidth: 1,
+    borderColor: tokens.border,
+    paddingHorizontal: 12,
+    paddingVertical: 12,
+  };
+}
+
+// The magnifier glyph in the search row. (text-sm text-muted-foreground.)
+export function searchGlyph(tokens: ColorTokens): TextStyle {
+  return { fontSize: 14, lineHeight: 20, color: tokens["muted-foreground"] };
+}
+
+// The muted placeholder text in the search row. (text-sm text-muted-foreground.)
+export function searchPlaceholder(tokens: ColorTokens): TextStyle {
+  return { fontSize: 14, lineHeight: 20, color: tokens["muted-foreground"] };
+}
+
+// --- result groups + rows ---------------------------------------------------
+
+// The optional uppercase section heading above a group's rows.
+// (uppercase text-xs text-muted-foreground px-3 pt-3 pb-1.)
+export function groupHeading(tokens: ColorTokens): TextStyle {
+  return {
+    textTransform: "uppercase",
+    fontSize: 12,
+    lineHeight: 16,
+    color: tokens["muted-foreground"],
+    paddingHorizontal: 12,
+    paddingTop: 12,
+    paddingBottom: 4,
+  };
+}
+
+// A result row: leading icon + label + optional trailing shortcut.
+// (flex-row items-center gap-3 px-3 py-2; active:bg-accent is the press state.)
+export const rowBase: ViewStyle = {
+  flexDirection: "row",
+  alignItems: "center",
+  gap: 12,
+  paddingHorizontal: 12,
+  paddingVertical: 8,
+};
+
+// The accent surface: used for both the highlighted (active) row and the row
+// press state (active:bg-accent). (bg-accent.)
+export function rowAccent(tokens: ColorTokens): ViewStyle {
+  return { backgroundColor: tokens.accent };
+}
+
+// A row's leading glyph. (text-sm text-foreground.)
+export function rowIcon(tokens: ColorTokens): TextStyle {
+  return { fontSize: 14, lineHeight: 20, color: tokens.foreground };
+}
+
+// A row's label, taking the remaining width. (text-sm text-foreground flex-1.)
+export function rowLabel(tokens: ColorTokens): TextStyle {
+  return {
+    fontSize: 14,
+    lineHeight: 20,
+    color: tokens.foreground,
+    flexGrow: 1,
+    flexShrink: 1,
+    flexBasis: "0%",
+  };
+}
+
+// --- collapsed trigger ------------------------------------------------------
+
+// The wrapper around the collapsed trigger + the floating card.
+// (relative w-full.)
+export const triggerWrapper: ViewStyle = { position: "relative", width: "100%" };
+
+// When the palette is open in trigger mode, the wrapper is lifted into its own
+// stacking context above sibling content. react-native-web gives every
+// positioned View an implicit stacking context, so the floating card's own
+// `zIndex` is scoped INSIDE the `relative` wrapper and cannot rise above a later
+// sibling. Raising the wrapper's zIndex while open lifts the whole control —
+// trigger and palette together — above everything painted after it.
+export const triggerWrapperLifted: ViewStyle = { zIndex: 50 };
+
+// The collapsed full-width search trigger button.
+// (flex-row items-center gap-2 w-full justify-start rounded-md border
+//  border-input bg-transparent px-3 py-1.5.)
+export function triggerRow(tokens: ColorTokens): ViewStyle {
+  return {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+    width: "100%",
+    justifyContent: "flex-start",
+    borderRadius: 6,
+    borderWidth: 1,
+    borderColor: tokens.input,
+    backgroundColor: "transparent",
+    paddingHorizontal: 12,
+    paddingVertical: 6,
+  };
+}
+
+// The trigger button's "Search..." label. (text-sm text-foreground.)
+export function triggerLabel(tokens: ColorTokens): TextStyle {
+  return { fontSize: 14, lineHeight: 20, color: tokens.foreground };
+}
+
+// Pushes the trailing kbd cap to the right edge of the trigger. (ml-auto.)
+export const triggerKbd: ViewStyle = { marginLeft: "auto" };
+
+// --- footer hint bar --------------------------------------------------------
+
+// The footer hint bar below the list. (flex-row items-center gap-3 border-t
+// border-border px-4 py-2.5.)
+export function footerBar(tokens: ColorTokens): ViewStyle {
+  return {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 12,
+    borderTopWidth: 1,
+    borderColor: tokens.border,
+    paddingHorizontal: 16,
+    paddingVertical: 10,
+  };
+}
+
+// A single hint cluster in the footer (kbd cap(s) + its text).
+// (flex-row items-center gap-1.)
+export const footerHint: ViewStyle = { flexDirection: "row", alignItems: "center", gap: 4 };
+
+// A hint's supporting text. (text-xs text-muted-foreground.)
+export function footerText(tokens: ColorTokens): TextStyle {
+  return { fontSize: 12, lineHeight: 16, color: tokens["muted-foreground"] };
+}