@multiplatform.one/components 5.0.26 → 6.0.0

package/src/layouts/KeyboardAvoidingWrapper/index.native.tsx

@@ -0,0 +1,60 @@
+import type { PropsWithChildren } from "react";
+import { KeyboardAvoidingView, Platform, StyleSheet } from "react-native";
+import { YStack, type YStackProps } from "tamagui";
+
+export interface KeyboardAvoidingWrapperProps extends YStackProps {
+  /**
+   * The behavior for keyboard avoidance
+   * - 'padding': Add padding to avoid keyboard (default for iOS)
+   * - 'height': Reduce height to avoid keyboard (default for Android)
+   * - 'position': Change position to avoid keyboard
+   */
+  behavior?: "padding" | "height" | "position";
+  /**
+   * Additional offset to add when keyboard is visible
+   */
+  keyboardVerticalOffset?: number;
+  /**
+   * Whether keyboard avoiding behavior is enabled
+   * @default true
+   */
+  enabled?: boolean;
+}
+
+/**
+ * KeyboardAvoidingWrapper - Native implementation
+ *
+ * Wraps content in a KeyboardAvoidingView that automatically adjusts
+ * its layout when the keyboard appears. Uses platform-specific
+ * default behavior (padding for iOS, height for Android).
+ */
+export function KeyboardAvoidingWrapper({
+  children,
+  behavior,
+  keyboardVerticalOffset = 0,
+  enabled = true,
+  ...stackProps
+}: PropsWithChildren<KeyboardAvoidingWrapperProps>) {
+  // Default behavior based on platform
+  const defaultBehavior = Platform.OS === "ios" ? "padding" : "height";
+  const effectiveBehavior = behavior || defaultBehavior;
+
+  return (
+    <KeyboardAvoidingView
+      style={styles.container}
+      behavior={effectiveBehavior}
+      keyboardVerticalOffset={keyboardVerticalOffset}
+      enabled={enabled}
+    >
+      <YStack flex={1} {...stackProps}>
+        {children}
+      </YStack>
+    </KeyboardAvoidingView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+});

package/src/layouts/KeyboardAvoidingWrapper/index.tsx

@@ -0,0 +1,42 @@
+import type { PropsWithChildren } from "react";
+import { YStack, type YStackProps } from "tamagui";
+
+export interface KeyboardAvoidingWrapperProps extends YStackProps {
+  /**
+   * The behavior for keyboard avoidance
+   * - 'padding': Add padding to avoid keyboard (default for iOS)
+   * - 'height': Reduce height to avoid keyboard (default for Android)
+   * - 'position': Change position to avoid keyboard
+   */
+  behavior?: "padding" | "height" | "position";
+  /**
+   * Additional offset to add when keyboard is visible
+   */
+  keyboardVerticalOffset?: number;
+  /**
+   * Whether keyboard avoiding behavior is enabled
+   * @default true
+   */
+  enabled?: boolean;
+}
+
+/**
+ * KeyboardAvoidingWrapper - Web implementation
+ *
+ * On web, this is a simple passthrough component since browsers
+ * handle keyboard behavior differently. The native implementation
+ * (.native.tsx) will handle actual keyboard avoiding.
+ */
+export function KeyboardAvoidingWrapper({
+  children,
+  behavior: _behavior,
+  keyboardVerticalOffset: _offset,
+  enabled: _enabled,
+  ...stackProps
+}: PropsWithChildren<KeyboardAvoidingWrapperProps>) {
+  return (
+    <YStack flex={1} {...stackProps}>
+      {children}
+    </YStack>
+  );
+}

package/src/layouts/SafeAreaWrapper/SafeAreaWrapper.stories.tsx

@@ -0,0 +1,29 @@
+import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
+import { Text, YStack } from "tamagui";
+import { SafeAreaWrapper } from "./index";
+
+const meta: Meta<typeof SafeAreaWrapper> = {
+  title: "Components/SafeAreaWrapper",
+  component: SafeAreaWrapper,
+  parameters: {
+    status: { type: "stable" },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof SafeAreaWrapper>;
+
+export const Default: Story = {
+  name: "Main",
+  render: () => (
+    <SafeAreaWrapper backgroundColor="$background" padding="$4">
+      <YStack gap="$2">
+        <Text>Content inside SafeAreaWrapper</Text>
+        <Text fontSize="$2" color="$color10">
+          On native, this respects device safe area insets. On web, it is a simple passthrough
+          wrapper.
+        </Text>
+      </YStack>
+    </SafeAreaWrapper>
+  ),
+};

package/src/layouts/SafeAreaWrapper/index.native.tsx

@@ -0,0 +1,57 @@
+import type { PropsWithChildren } from "react";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { YStack, type YStackProps } from "tamagui";
+
+export interface SafeAreaWrapperProps extends YStackProps {
+  /**
+   * Which edges to apply safe area insets to
+   * @default ['top', 'bottom', 'left', 'right']
+   */
+  edges?: Array<"top" | "bottom" | "left" | "right">;
+  /**
+   * Additional mode for safe area behavior
+   * - 'padding': Apply as padding (default)
+   * - 'margin': Apply as margin
+   */
+  mode?: "padding" | "margin";
+}
+
+/**
+ * SafeAreaWrapper - Native implementation
+ *
+ * Wraps content with safe area insets for devices with notches,
+ * home indicators, and other system UI elements.
+ *
+ * Uses react-native-safe-area-context for proper inset handling.
+ */
+export function SafeAreaWrapper({
+  children,
+  edges = ["top", "bottom", "left", "right"],
+  mode = "padding",
+  ...stackProps
+}: PropsWithChildren<SafeAreaWrapperProps>) {
+  const insets = useSafeAreaInsets();
+
+  const edgesSet = new Set(edges);
+
+  const insetStyles =
+    mode === "padding"
+      ? {
+          paddingTop: edgesSet.has("top") ? insets.top : 0,
+          paddingBottom: edgesSet.has("bottom") ? insets.bottom : 0,
+          paddingLeft: edgesSet.has("left") ? insets.left : 0,
+          paddingRight: edgesSet.has("right") ? insets.right : 0,
+        }
+      : {
+          marginTop: edgesSet.has("top") ? insets.top : 0,
+          marginBottom: edgesSet.has("bottom") ? insets.bottom : 0,
+          marginLeft: edgesSet.has("left") ? insets.left : 0,
+          marginRight: edgesSet.has("right") ? insets.right : 0,
+        };
+
+  return (
+    <YStack flex={1} style={insetStyles} {...stackProps}>
+      {children}
+    </YStack>
+  );
+}

package/src/layouts/SafeAreaWrapper/index.tsx

@@ -0,0 +1,36 @@
+import type { PropsWithChildren } from "react";
+import { YStack, type YStackProps } from "tamagui";
+
+export interface SafeAreaWrapperProps extends YStackProps {
+  /**
+   * Which edges to apply safe area insets to
+   * @default ['top', 'bottom', 'left', 'right']
+   */
+  edges?: Array<"top" | "bottom" | "left" | "right">;
+  /**
+   * Additional mode for safe area behavior
+   * - 'padding': Apply as padding (default)
+   * - 'margin': Apply as margin
+   */
+  mode?: "padding" | "margin";
+}
+
+/**
+ * SafeAreaWrapper - Web implementation
+ *
+ * On web, this is a simple passthrough component that wraps children
+ * in a YStack. The native implementation (.native.tsx) will handle
+ * the actual safe area insets.
+ */
+export function SafeAreaWrapper({
+  children,
+  edges: _edges,
+  mode: _mode,
+  ...stackProps
+}: PropsWithChildren<SafeAreaWrapperProps>) {
+  return (
+    <YStack flex={1} {...stackProps}>
+      {children}
+    </YStack>
+  );
+}

package/src/layouts/Sidebar.stories.tsx

@@ -0,0 +1,44 @@
+import { Paragraph, XStack, YStack } from "tamagui";
+import { Sidebar } from "./sidebar";
+
+export default {
+  title: "Components/Sidebar",
+  component: Sidebar,
+  parameters: { status: { type: "stable" } },
+};
+
+export const Default = () => (
+  <XStack
+    height={320}
+    borderWidth={1}
+    borderColor="$borderColor"
+    borderRadius="$3"
+    overflow="hidden"
+  >
+    <Sidebar
+      sections={[
+        {
+          title: "Navigation",
+          items: [
+            { label: "Dashboard", value: "dashboard", active: true, onPress: () => {} },
+            { label: "Projects", value: "projects", count: 5, onPress: () => {} },
+            { label: "Tasks", value: "tasks", count: 12, onPress: () => {} },
+            { label: "Messages", value: "messages", count: 3, onPress: () => {} },
+          ],
+        },
+        {
+          title: "Settings",
+          items: [
+            { label: "Profile", value: "profile", onPress: () => {} },
+            { label: "Preferences", value: "preferences", onPress: () => {} },
+            { label: "Billing", value: "billing", onPress: () => {} },
+          ],
+        },
+      ]}
+    />
+    <YStack flex={1} padding="$4" justifyContent="center" alignItems="center">
+      <Paragraph color="$color10">Main content area</Paragraph>
+    </YStack>
+  </XStack>
+);
+Default.storyName = "Main";

package/src/layouts/Tags.stories.tsx

@@ -0,0 +1,131 @@
+import { YStack, Text } from "tamagui";
+import { Tags, type TagItem } from "./tags";
+
+export default {
+  title: "Components/Tags",
+  component: Tags,
+  tags: ["!test"],
+  parameters: {
+    status: { type: "stable" },
+    docs: {
+      description: {
+        component:
+          "A generic tag management component for adding and removing tags with autocomplete support.",
+      },
+    },
+  },
+  argTypes: {
+    enableAdd: { control: "boolean", description: "Allow adding new tags" },
+    enableRemove: { control: "boolean", description: "Allow removing tags" },
+    maxTags: { control: "number", description: "Maximum number of tags" },
+    compact: { control: "boolean", description: "Use compact layout" },
+    disabled: { control: "boolean", description: "Disable all interactions" },
+  },
+};
+
+const sampleTags: TagItem[] = [
+  { id: "tag-1", label: "urgent" },
+  { id: "tag-2", label: "important" },
+  { id: "tag-3", label: "review" },
+];
+
+const allSuggestions: TagItem[] = [
+  { id: "sug-1", label: "follow-up" },
+  { id: "sug-2", label: "completed" },
+  { id: "sug-3", label: "pending" },
+  { id: "sug-4", label: "bug" },
+];
+
+export const Default = () => (
+  <Tags
+    tags={sampleTags}
+    suggestions={allSuggestions}
+    onAdd={(name) => console.log("Add:", name)}
+    onRemove={(tag) => console.log("Remove:", tag.id)}
+  />
+);
+Default.storyName = "Main";
+Default.parameters = {
+  docs: {
+    description: {
+      story: "Basic tag display with add and remove functionality.",
+    },
+  },
+};
+
+export const ReadOnly = () => <Tags tags={sampleTags} enableAdd={false} enableRemove={false} />;
+ReadOnly.parameters = {
+  docs: {
+    description: {
+      story: "Read-only tags without add or remove options.",
+    },
+  },
+};
+
+export const CompactMode = () => (
+  <Tags
+    tags={sampleTags}
+    compact
+    onAdd={(name) => console.log("Add:", name)}
+    onRemove={(tag) => console.log("Remove:", tag.id)}
+  />
+);
+CompactMode.parameters = {
+  docs: {
+    description: {
+      story: "Compact layout for smaller UI spaces.",
+    },
+  },
+};
+
+export const Empty = () => (
+  <Tags
+    tags={[]}
+    suggestions={allSuggestions}
+    onAdd={(name) => console.log("Add:", name)}
+    placeholder="Add your first tag..."
+  />
+);
+Empty.parameters = {
+  docs: {
+    description: {
+      story: "Empty tags component ready for adding tags.",
+    },
+  },
+};
+
+export const AllStates = () => (
+  <YStack gap="$6">
+    <YStack gap="$2">
+      <Text fontWeight="600">With Tags</Text>
+      <Tags tags={sampleTags} onRemove={(tag) => console.log("Remove:", tag.id)} />
+    </YStack>
+
+    <YStack gap="$2">
+      <Text fontWeight="600">Empty</Text>
+      <Tags tags={[]} onAdd={(name) => console.log("Add:", name)} placeholder="Add tag..." />
+    </YStack>
+
+    <YStack gap="$2">
+      <Text fontWeight="600">Read Only</Text>
+      <Tags tags={sampleTags.slice(0, 2)} enableAdd={false} enableRemove={false} />
+    </YStack>
+
+    <YStack gap="$2">
+      <Text fontWeight="600">Disabled</Text>
+      <Tags tags={sampleTags.slice(0, 1)} disabled />
+    </YStack>
+
+    <YStack gap="$2">
+      <Text fontWeight="600">Compact</Text>
+      <Tags tags={sampleTags} compact />
+    </YStack>
+  </YStack>
+);
+AllStates.parameters = {
+  docs: {
+    description: {
+      story: "All states of the Tags component.",
+    },
+  },
+};

package/src/layouts/Timeline.stories.tsx

@@ -0,0 +1,175 @@
+import { YStack, Text, XStack } from "tamagui";
+import { Timeline, type TimelineEntry } from "./timeline";
+
+export default {
+  title: "Components/Timeline",
+  component: Timeline,
+  tags: ["!test"],
+  parameters: {
+    status: { type: "stable" },
+    docs: {
+      description: {
+        component:
+          "A generic timeline/activity feed component displaying comments, version history, and other activity.",
+      },
+    },
+  },
+  argTypes: {
+    compact: { control: "boolean", description: "Use compact layout" },
+    enableAddComment: { control: "boolean", description: "Allow adding comments" },
+  },
+};
+
+const sampleEntries: TimelineEntry[] = [
+  {
+    id: "entry-1",
+    type: "version",
+    author: "john@example.com",
+    timestamp: "2026-01-24T12:00:00Z",
+    changes: [
+      { field: "status", old: "Draft", new: "Submitted" },
+      { field: "total", old: 1000, new: 1200 },
+    ],
+  },
+  {
+    id: "entry-2",
+    type: "comment",
+    content: "Pricing looks good. Approved!",
+    author: "manager@example.com",
+    timestamp: "2026-01-24T11:45:00Z",
+  },
+  {
+    id: "entry-3",
+    type: "comment",
+    content: "Please review the pricing before approval.",
+    author: "john@example.com",
+    timestamp: "2026-01-24T10:30:00Z",
+  },
+  {
+    id: "entry-4",
+    type: "attachment",
+    content: "Added invoice-draft.pdf",
+    author: "john@example.com",
+    timestamp: "2026-01-24T09:15:00Z",
+  },
+  {
+    id: "entry-5",
+    type: "assignment",
+    content: "Assigned to Finance Team",
+    author: "admin@example.com",
+    timestamp: "2026-01-24T08:00:00Z",
+  },
+];
+
+export const Default = () => (
+  <Timeline
+    entries={sampleEntries}
+    onCommentAdded={(content) => console.log("Comment:", content)}
+  />
+);
+Default.storyName = "Main";
+Default.parameters = {
+  docs: {
+    description: {
+      story: "Timeline showing comments and version history.",
+    },
+  },
+};
+
+export const CommentsOnly = () => (
+  <Timeline
+    entries={sampleEntries.filter((e) => e.type === "comment")}
+    onCommentAdded={(content) => console.log("Comment:", content)}
+  />
+);
+CommentsOnly.parameters = {
+  docs: {
+    description: {
+      story: "Timeline showing only comment entries.",
+    },
+  },
+};
+
+export const CompactMode = () => (
+  <Timeline
+    entries={sampleEntries}
+    compact
+    onCommentAdded={(content) => console.log("Comment:", content)}
+  />
+);
+CompactMode.parameters = {
+  docs: {
+    description: {
+      story: "Compact layout for smaller UI spaces.",
+    },
+  },
+};
+
+export const Empty = () => (
+  <Timeline entries={[]} onCommentAdded={(content) => console.log("Comment:", content)} />
+);
+Empty.parameters = {
+  docs: {
+    description: {
+      story: "Empty timeline with no activity.",
+    },
+  },
+};
+
+export const CustomEntryRenderer = () => (
+  <Timeline
+    entries={sampleEntries}
+    renderEntry={(entry: TimelineEntry, defaultContent) => (
+      <YStack
+        key={entry.id}
+        padding="$3"
+        backgroundColor={entry.type === "comment" ? "$blue2" : "$gray2"}
+        borderRadius="$3"
+        marginBottom="$2"
+      >
+        <XStack justifyContent="space-between" marginBottom="$1">
+          <Text fontSize="$2" fontWeight="600">
+            {entry.author}
+          </Text>
+          <Text fontSize="$1" color="$gray10">
+            {entry.type}
+          </Text>
+        </XStack>
+        {defaultContent}
+      </YStack>
+    )}
+  />
+);
+CustomEntryRenderer.parameters = {
+  docs: {
+    description: {
+      story: "Timeline with custom entry styling based on entry type.",
+    },
+  },
+};
+
+export const AllStates = () => (
+  <YStack gap="$6">
+    <YStack gap="$2">
+      <Text fontWeight="600">With Activity</Text>
+      <Timeline entries={sampleEntries} />
+    </YStack>
+
+    <YStack gap="$2">
+      <Text fontWeight="600">Empty</Text>
+      <Timeline entries={[]} onCommentAdded={(content) => console.log("Comment:", content)} />
+    </YStack>
+
+    <YStack gap="$2">
+      <Text fontWeight="600">Compact</Text>
+      <Timeline entries={sampleEntries.slice(0, 2)} compact />
+    </YStack>
+  </YStack>
+);
+AllStates.parameters = {
+  docs: {
+    description: {
+      story: "All states of the Timeline component.",
+    },
+  },
+};

package/src/layouts/Toolbar.stories.tsx

@@ -0,0 +1,43 @@
+import { Paragraph, YStack } from "tamagui";
+import { Toolbar } from "./toolbar";
+
+export default {
+  title: "Components/Toolbar",
+  component: Toolbar,
+  parameters: { status: { type: "stable" } },
+};
+
+export const Default = () => (
+  <YStack gap="$4">
+    <Paragraph size="$3" color="$color10">
+      Top toolbar with actions:
+    </Paragraph>
+    <Toolbar
+      primaryActions={[
+        { label: "Save", onPress: () => {}, variant: "primary" },
+        { label: "Publish", onPress: () => {}, variant: "default" },
+      ]}
+      secondaryActions={[
+        { label: "Discard", onPress: () => {}, variant: "outlined" },
+        { label: "Delete", onPress: () => {}, variant: "destructive" },
+      ]}
+    />
+  </YStack>
+);
+
+Default.storyName = "Main";
+export const Loading = () => (
+  <YStack gap="$4">
+    <Paragraph size="$3" color="$color10">
+      Toolbar with loading state:
+    </Paragraph>
+    <Toolbar
+      primaryActions={[
+        { label: "Saving...", onPress: () => {}, variant: "primary", loading: true },
+      ]}
+      secondaryActions={[
+        { label: "Cancel", onPress: () => {}, variant: "outlined", disabled: true },
+      ]}
+    />
+  </YStack>
+);

package/src/layouts/ViewSwitcher.stories.tsx

@@ -0,0 +1,36 @@
+import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
+import { useState } from "react";
+import { YStack, Text } from "tamagui";
+import { ViewSwitcher, type ViewOption } from "./ViewSwitcher";
+
+const views: ViewOption[] = [
+  { type: "list", label: "List" },
+  { type: "grid", label: "Grid" },
+  { type: "kanban", label: "Kanban" },
+];
+
+function ViewSwitcherExample() {
+  const [current, setCurrent] = useState("list");
+  return (
+    <YStack gap="$4" padding="$4">
+      <ViewSwitcher views={views} currentView={current} onViewChange={setCurrent} />
+      <Text>Current view: {current}</Text>
+    </YStack>
+  );
+}
+
+const meta: Meta<typeof ViewSwitcher> = {
+  title: "Components/ViewSwitcher",
+  component: ViewSwitcher,
+  parameters: {
+    status: { type: "stable" },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof ViewSwitcher>;
+
+export const Default: Story = {
+  name: "Main",
+  render: () => <ViewSwitcherExample />,
+};