@ankhorage/zora 0.3.6 → 0.3.8

package/src/patterns/switch-field/index.ts

@@ -0,0 +1,2 @@
+export * from './SwitchField';
+export * from './types';

package/src/patterns/switch-field/types.ts

@@ -0,0 +1,10 @@
+import type { ReactNode } from 'react';
+
+export interface SwitchFieldProps {
+  label: ReactNode;
+  description?: ReactNode;
+  value: boolean;
+  onValueChange: (value: boolean) => void;
+  disabled?: boolean;
+  testID?: string;
+}

package/src/patterns/tile-grid/PaletteItem.tsx

@@ -0,0 +1,49 @@
+import { Box, Heading, Text, useTheme } from '@ankhorage/surface';
+import React from 'react';
+
+import { Card } from '../../components/card';
+import type { PaletteItemProps } from './types';
+
+export function PaletteItem({
+  title,
+  description,
+  icon,
+  badge,
+  selected,
+  disabled,
+  onPress,
+  testID,
+}: PaletteItemProps) {
+  const { theme } = useTheme();
+
+  return (
+    <Card
+      compact
+      disabled={disabled}
+      onPress={onPress}
+      testID={testID}
+      tone={selected ? 'default' : 'subtle'}
+      style={
+        selected
+          ? {
+              borderColor: theme.colors.primary,
+              borderWidth: 2,
+            }
+          : undefined
+      }
+    >
+      <Box p="xs" style={{ alignItems: 'center' }}>
+        {icon ? <Box pb="s">{/* Icon spec here */}</Box> : null}
+        <Heading level={5} align="center">
+          {title}
+        </Heading>
+        {description ? (
+          <Text align="center" tone="muted" variant="caption">
+            {description}
+          </Text>
+        ) : null}
+        {badge ? <Box pt="xs">{badge}</Box> : null}
+      </Box>
+    </Card>
+  );
+}

package/src/patterns/tile-grid/TileGrid.tsx

@@ -0,0 +1,44 @@
+import { Box } from '@ankhorage/surface';
+import React from 'react';
+
+import type { TileGridProps } from './types';
+
+export function TileGrid({
+  children,
+  columns = 'responsive',
+  compact = false,
+  testID,
+}: TileGridProps) {
+  return (
+    <Box
+      testID={testID}
+      style={{
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+        gap: compact ? 8 : 16,
+      }}
+    >
+      {React.Children.map(children, (child) => {
+        if (!child) return null;
+
+        return (
+          <Box
+            style={
+              columns === 'responsive'
+                ? {
+                    flexBasis: '30%',
+                    flexGrow: 1,
+                    minWidth: 120,
+                  }
+                : {
+                    width: `${100 / columns}%`,
+                  }
+            }
+          >
+            {child}
+          </Box>
+        );
+      })}
+    </Box>
+  );
+}

package/src/patterns/tile-grid/index.ts

@@ -0,0 +1,3 @@
+export * from './PaletteItem';
+export * from './TileGrid';
+export * from './types';

package/src/patterns/tile-grid/types.ts

@@ -0,0 +1,20 @@
+import type { ButtonIconSpec } from '@ankhorage/surface';
+import type { ReactNode } from 'react';
+
+export interface TileGridProps {
+  children?: ReactNode;
+  columns?: number | 'responsive';
+  compact?: boolean;
+  testID?: string;
+}
+
+export interface PaletteItemProps {
+  title: ReactNode;
+  description?: ReactNode;
+  icon?: ButtonIconSpec;
+  badge?: ReactNode;
+  selected?: boolean;
+  disabled?: boolean;
+  onPress?: () => void;
+  testID?: string;
+}

package/src/patterns/tree-view/TreeItem.tsx

@@ -0,0 +1,86 @@
+import { Box, Stack } from '@ankhorage/surface';
+import React from 'react';
+
+import { IconButton } from '../../components/icon-button';
+import { SettingsRow } from '../settings-row';
+import type { TreeItemNode, TreeItemRenderProps } from './types';
+
+interface TreeItemProps<TId extends string = string> {
+  node: TreeItemNode<TId>;
+  depth: number;
+  selectedId?: TId;
+  expandedIds: readonly TId[];
+  onSelect?: (id: TId) => void;
+  onToggleExpand: (id: TId) => void;
+  renderItem?: (props: TreeItemRenderProps<TId>) => React.ReactNode;
+}
+
+export function TreeItem<TId extends string = string>({
+  node,
+  depth,
+  selectedId,
+  expandedIds,
+  onSelect,
+  onToggleExpand,
+  renderItem,
+}: TreeItemProps<TId>) {
+  const hasChildren = node.children !== undefined && node.children.length > 0;
+  const isExpanded = expandedIds.includes(node.id);
+  const isSelected = selectedId === node.id;
+
+  const renderContent = () => {
+    if (renderItem) {
+      return renderItem({
+        node,
+        depth,
+        selected: isSelected,
+        expanded: isExpanded,
+        hasChildren,
+      });
+    }
+
+    return (
+      <SettingsRow
+        title={node.label}
+        control={
+          <Stack direction="row" gap="xs" align="center">
+            {node.actions}
+            {hasChildren ? (
+              <IconButton
+                icon={{ name: isExpanded ? 'chevron-down-outline' : 'chevron-forward-outline' }}
+                label={isExpanded ? 'Collapse' : 'Expand'}
+                onPress={() => onToggleExpand(node.id)}
+                size="s"
+                emphasis="ghost"
+              />
+            ) : null}
+          </Stack>
+        }
+        meta={node.meta}
+        disabled={node.disabled}
+      />
+    );
+  };
+
+  return (
+    <Box>
+      <Box style={{ paddingLeft: depth * 16 }}>{renderContent()}</Box>
+      {hasChildren && isExpanded ? (
+        <Box>
+          {node.children?.map((child) => (
+            <TreeItem
+              key={child.id}
+              depth={depth + 1}
+              expandedIds={expandedIds}
+              node={child}
+              onSelect={onSelect}
+              onToggleExpand={onToggleExpand}
+              renderItem={renderItem}
+              selectedId={selectedId}
+            />
+          ))}
+        </Box>
+      ) : null}
+    </Box>
+  );
+}

package/src/patterns/tree-view/TreeView.tsx

@@ -0,0 +1,50 @@
+import { Stack } from '@ankhorage/surface';
+import React from 'react';
+
+import { TreeItem } from './TreeItem';
+import type { TreeViewProps } from './types';
+
+export function TreeView<TId extends string = string>({
+  nodes,
+  selectedId,
+  expandedIds: controlledExpandedIds,
+  defaultExpandedIds,
+  onSelect,
+  onExpandedChange,
+  renderItem,
+  testID,
+}: TreeViewProps<TId>) {
+  const [internalExpandedIds, setInternalExpandedIds] = React.useState<readonly TId[]>(
+    defaultExpandedIds ?? [],
+  );
+
+  const isControlled = controlledExpandedIds !== undefined;
+  const expandedIds = isControlled ? controlledExpandedIds : internalExpandedIds;
+
+  const handleToggleExpand = (id: TId) => {
+    const isExpanded = expandedIds.includes(id);
+    const newIds = isExpanded ? expandedIds.filter((eid) => eid !== id) : [...expandedIds, id];
+
+    if (!isControlled) {
+      setInternalExpandedIds(newIds);
+    }
+    onExpandedChange?.(newIds);
+  };
+
+  return (
+    <Stack gap="none" testID={testID}>
+      {nodes.map((node) => (
+        <TreeItem
+          key={node.id}
+          depth={0}
+          expandedIds={expandedIds}
+          node={node}
+          onSelect={onSelect}
+          onToggleExpand={handleToggleExpand}
+          renderItem={renderItem}
+          selectedId={selectedId}
+        />
+      ))}
+    </Stack>
+  );
+}

package/src/patterns/tree-view/index.ts

@@ -0,0 +1,3 @@
+export * from './TreeItem';
+export * from './TreeView';
+export * from './types';

package/src/patterns/tree-view/types.ts

@@ -0,0 +1,31 @@
+import type { ButtonIconSpec } from '@ankhorage/surface';
+import type { ReactNode } from 'react';
+
+export interface TreeItemNode<TId extends string = string> {
+  id: TId;
+  label: ReactNode;
+  icon?: ButtonIconSpec;
+  children?: readonly TreeItemNode<TId>[];
+  disabled?: boolean;
+  meta?: ReactNode;
+  actions?: ReactNode;
+}
+
+export interface TreeItemRenderProps<TId extends string = string> {
+  node: TreeItemNode<TId>;
+  depth: number;
+  selected: boolean;
+  expanded: boolean;
+  hasChildren: boolean;
+}
+
+export interface TreeViewProps<TId extends string = string> {
+  nodes: readonly TreeItemNode<TId>[];
+  selectedId?: TId;
+  expandedIds?: readonly TId[];
+  defaultExpandedIds?: readonly TId[];
+  onSelect?: (id: TId) => void;
+  onExpandedChange?: (ids: readonly TId[]) => void;
+  renderItem?: (props: TreeItemRenderProps<TId>) => ReactNode;
+  testID?: string;
+}

package/src/theme/ZoraProvider.tsx

@@ -0,0 +1,22 @@
+import { ResponsiveProvider, ThemeProvider } from '@ankhorage/surface';
+import React from 'react';
+
+import { createZoraTheme, type ZoraThemeOverride } from './createZoraTheme';
+
+export interface ZoraProviderProps {
+  children: React.ReactNode;
+  initialConfig?: ZoraThemeOverride;
+  initialMode?: 'light' | 'dark';
+}
+
+export function ZoraProvider({
+  children,
+  initialConfig,
+  initialMode = 'light',
+}: ZoraProviderProps) {
+  return (
+    <ThemeProvider initialConfig={createZoraTheme(initialConfig)} initialMode={initialMode}>
+      <ResponsiveProvider>{children}</ResponsiveProvider>
+    </ThemeProvider>
+  );
+}

package/src/theme/createZoraTheme.test.ts

@@ -0,0 +1,25 @@
+import { describe, expect, test } from 'bun:test';
+
+import { createZoraTheme } from './createZoraTheme';
+
+describe('createZoraTheme', () => {
+  test('keeps the default preset stable', () => {
+    const theme = createZoraTheme();
+
+    expect(theme.id).toBe('zora');
+    expect(theme.light.primaryColor).toBe('#0f766e');
+    expect(theme.dark.primaryColor).toBe('#2dd4bf');
+  });
+
+  test('merges overrides without dropping the preset identity', () => {
+    const theme = createZoraTheme({
+      light: {
+        primaryColor: '#1d4ed8',
+      },
+    });
+
+    expect(theme.id).toBe('zora');
+    expect(theme.light.primaryColor).toBe('#1d4ed8');
+    expect(theme.dark.primaryColor).toBe('#2dd4bf');
+  });
+});

package/src/theme/createZoraTheme.ts

@@ -0,0 +1,10 @@
+import type { ThemeConfig } from '@ankhorage/surface';
+
+import { deepMerge } from '../internal/deepMerge';
+import { zoraTheme } from './zoraTheme';
+
+export type ZoraThemeOverride = Partial<ThemeConfig>;
+
+export function createZoraTheme(overrides: ZoraThemeOverride = {}): ThemeConfig {
+  return deepMerge(zoraTheme, overrides);
+}

package/src/theme/index.ts

@@ -0,0 +1,6 @@
+export type { ZoraThemeOverride } from './createZoraTheme';
+export { createZoraTheme } from './createZoraTheme';
+export { useZoraTheme } from './useZoraTheme';
+export type { ZoraProviderProps } from './ZoraProvider';
+export { ZoraProvider } from './ZoraProvider';
+export { zoraTheme } from './zoraTheme';

package/src/theme/useZoraTheme.ts

@@ -0,0 +1,5 @@
+import { useTheme } from '@ankhorage/surface';
+
+export function useZoraTheme() {
+  return useTheme();
+}

package/src/theme/zoraTheme.ts

@@ -0,0 +1,16 @@
+import type { ThemeConfig } from '@ankhorage/surface';
+
+export const zoraTheme: ThemeConfig = {
+  id: 'zora',
+  name: 'ZORA',
+  light: {
+    primaryColor: '#0f766e',
+    harmony: 'analogous',
+    systemTone: 'jewel',
+  },
+  dark: {
+    primaryColor: '#2dd4bf',
+    harmony: 'analogous',
+    systemTone: 'jewel',
+  },
+};