@multiplatform.one/components 5.0.27 → 6.0.0

package/src/layouts/Attachments.stories.tsx

@@ -0,0 +1,135 @@
+import { YStack, Text } from "tamagui";
+import { Attachments, type AttachmentItem } from "./attachments";
+
+export default {
+  title: "Components/Attachments",
+  component: Attachments,
+  tags: ["!test"],
+  parameters: {
+    status: { type: "stable" },
+    docs: {
+      description: {
+        component:
+          "A generic file attachment component for displaying, uploading, downloading, and removing file attachments.",
+      },
+    },
+  },
+  argTypes: {
+    enableAdd: { control: "boolean", description: "Allow file uploads" },
+    enableDownload: { control: "boolean", description: "Allow file downloads" },
+    enableRemove: { control: "boolean", description: "Allow file deletion" },
+    enablePreview: { control: "boolean", description: "Allow image previews" },
+    compact: { control: "boolean", description: "Use compact layout" },
+    maxAttachments: { control: "number", description: "Maximum number of attachments" },
+  },
+};
+
+const sampleItems: AttachmentItem[] = [
+  {
+    id: "file-001",
+    fileName: "invoice-2026-001.pdf",
+    fileUrl: "/files/invoice-2026-001.pdf",
+    fileSize: 125000,
+    fileType: "application/pdf",
+  },
+  {
+    id: "file-002",
+    fileName: "product-image.jpg",
+    fileUrl: "https://picsum.photos/800/600",
+    fileSize: 450000,
+    fileType: "image/jpeg",
+    isImage: true,
+  },
+  {
+    id: "file-003",
+    fileName: "contract.docx",
+    fileUrl: "/files/contract.docx",
+    fileSize: 85000,
+    fileType: "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+  },
+];
+
+export const Default = () => (
+  <Attachments
+    items={sampleItems}
+    onAdd={(file) => console.log("Add:", file.name)}
+    onRemove={(item) => console.log("Remove:", item.id)}
+  />
+);
+Default.storyName = "Main";
+Default.parameters = {
+  docs: {
+    description: {
+      story: "Basic attachment list with upload, download, and delete functionality.",
+    },
+  },
+};
+
+export const ReadOnly = () => (
+  <Attachments items={sampleItems} enableAdd={false} enableRemove={false} />
+);
+ReadOnly.parameters = {
+  docs: {
+    description: {
+      story: "Read-only attachment list without upload or delete options.",
+    },
+  },
+};
+
+export const CompactMode = () => (
+  <Attachments
+    items={sampleItems}
+    compact
+    onAdd={(file) => console.log("Add:", file.name)}
+    onRemove={(item) => console.log("Remove:", item.id)}
+  />
+);
+CompactMode.parameters = {
+  docs: {
+    description: {
+      story: "Compact layout for smaller UI spaces.",
+    },
+  },
+};
+
+export const Empty = () => (
+  <Attachments items={[]} onAdd={(file) => console.log("Add:", file.name)} />
+);
+Empty.parameters = {
+  docs: {
+    description: {
+      story: "Empty attachment list with upload prompt.",
+    },
+  },
+};
+
+export const AllStates = () => (
+  <YStack gap="$6">
+    <YStack gap="$2">
+      <Text fontWeight="600">With Files</Text>
+      <Attachments items={sampleItems} />
+    </YStack>
+
+    <YStack gap="$2">
+      <Text fontWeight="600">Empty</Text>
+      <Attachments items={[]} onAdd={(file) => console.log("Add:", file.name)} />
+    </YStack>
+
+    <YStack gap="$2">
+      <Text fontWeight="600">Read Only</Text>
+      <Attachments items={sampleItems.slice(0, 1)} enableAdd={false} enableRemove={false} />
+    </YStack>
+
+    <YStack gap="$2">
+      <Text fontWeight="600">Compact</Text>
+      <Attachments items={sampleItems.slice(0, 2)} compact />
+    </YStack>
+  </YStack>
+);
+AllStates.parameters = {
+  docs: {
+    description: {
+      story: "All states of the Attachments component.",
+    },
+  },
+};

package/src/layouts/Breadcrumbs.stories.tsx

@@ -0,0 +1,27 @@
+import { YStack } from "tamagui";
+import { Breadcrumbs } from "./breadcrumbs";
+
+export default {
+  title: "Components/Breadcrumbs",
+  component: Breadcrumbs,
+  parameters: { status: { type: "stable" } },
+};
+
+export const Default = () => (
+  <YStack gap="$4">
+    <Breadcrumbs
+      items={[
+        { label: "Home", href: "/" },
+        { label: "Projects", href: "/projects" },
+        { label: "multiplatform.one", href: "/projects/mp1" },
+        { label: "Settings" },
+      ]}
+      onNavigate={(href) => console.log("Navigate:", href)}
+    />
+    <Breadcrumbs
+      items={[{ label: "Dashboard", href: "/" }, { label: "Users" }]}
+      onNavigate={(href) => console.log("Navigate:", href)}
+    />
+  </YStack>
+);
+Default.storyName = "Main";

package/src/layouts/Debug/DebugLayout.stories.tsx

@@ -1,36 +1,19 @@
-/**
- * File: /src/layouts/Debug/DebugLayout.stories.tsx
- * Project: @multiplatform.one/components
- * File Created: 04-04-2024 15:50:39
- * Author: Clay Risser
- * -----
- * BitSpur (c) Copyright 2021 - 2024
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import { action } from "@storybook/addon-actions";
-import { Button } from "tamagui";
+import { action } from "@multiplatform.one/storybook";
+import { Button } from "@multiplatform.one/forms";
 import { withDebugLayout } from "./index";
 
 export default {
-  title: "layouts/Debug",
+  title: "Components/DebugLayout",
   parameters: {
     status: { type: "beta" },
   },
 };
 
-const Main = withDebugLayout(() => (
+const MainComponent = withDebugLayout(() => (
   <Button onPress={action("onPress")}>Hello, world!</Button>
 ));
-export const main = () => <Main />;
+
+export const main = {
+  name: "Main",
+  render: () => <MainComponent />,
+};

package/src/layouts/Debug/debug.spec.tsx

@@ -0,0 +1,202 @@
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { act, cleanup, fireEvent, screen } from "@testing-library/react";
+import { Paragraph } from "tamagui";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { DebugLayout } from "./index";
+
+vi.mock("multiplatform.one", () => ({
+  useTheme: () => [{}, vi.fn(), false],
+  useLanguage: () => ["en", vi.fn()],
+  config: { get: () => "1" },
+  createWithLayout: vi.fn(),
+  isWeb: false,
+}));
+
+vi.mock("@multiplatform.one/platform", () => ({
+  config: { get: () => "1" },
+  createWithLayout: vi.fn((Component: any) => Component),
+}));
+
+vi.mock("@multiplatform.one/theme", () => ({
+  useTheme: () => [{}, vi.fn(), false],
+}));
+
+vi.mock("i18next", () => ({
+  default: {
+    languages: ["en", "es", "fr"],
+    language: "en",
+    on: vi.fn(),
+    off: vi.fn(),
+    changeLanguage: vi.fn(),
+  },
+}));
+
+vi.mock("@multiplatform.one/i18n", () => ({
+  useLanguage: () => ["en", vi.fn()],
+}));
+
+vi.mock("tamagui", async () => {
+  const actual = await vi.importActual("tamagui");
+  return {
+    ...(actual as any),
+    Select: {
+      Item: ({ children, value, index }: any) => (
+        <Paragraph data-testid={`select-item-${value}`} data-index={index}>
+          {children}
+        </Paragraph>
+      ),
+      ItemText: ({ children }: any) => (
+        <Paragraph data-testid="select-item-text">{children}</Paragraph>
+      ),
+    },
+  };
+});
+
+describe("DebugLayout", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+  afterEach(cleanup);
+
+  it("renders children correctly", () => {
+    renderWithProviders(
+      <DebugLayout>
+        <Paragraph data-testid="child">Test Content</Paragraph>
+      </DebugLayout>,
+    );
+    expect(screen.getByTestId("child")).toBeInTheDocument();
+  });
+
+  it("renders debug circle when DEBUG is enabled", () => {
+    renderWithProviders(
+      <DebugLayout>
+        <Paragraph>Content</Paragraph>
+      </DebugLayout>,
+    );
+    expect(screen.getByTestId("debug-circle")).toBeInTheDocument();
+  });
+
+  it("maintains layout structure at different viewport sizes", () => {
+    renderWithProviders(
+      <DebugLayout>
+        <Paragraph>Responsive Content</Paragraph>
+      </DebugLayout>,
+    );
+    expect(screen.getByTestId("debug-layout-root")).toBeInTheDocument();
+    expect(screen.getByText("Responsive Content")).toBeInTheDocument();
+  });
+
+  // Skipped: opening the debug popover triggers @tamagui/use-presence which uses a nested React (Invalid hook call)
+  it.skip("handles scheme changes correctly", async () => {
+    renderWithProviders(
+      <DebugLayout>
+        <Paragraph>Theme Test</Paragraph>
+      </DebugLayout>,
+    );
+    const debugCircle = screen.getByTestId("debug-circle");
+    expect(debugCircle).toBeInTheDocument();
+    await act(async () => {
+      fireEvent.click(debugCircle);
+    });
+  });
+
+  it("renders with custom size", () => {
+    const customSize = 24;
+    renderWithProviders(
+      <DebugLayout size={customSize}>
+        <Paragraph>Custom Size Test</Paragraph>
+      </DebugLayout>,
+    );
+    const debugCircle = screen.getByTestId("debug-circle");
+    expect(debugCircle).toBeInTheDocument();
+    const debugContainer = screen.getByTestId("debug-container");
+    expect(debugContainer).toBeInTheDocument();
+  });
+
+  it.skip("shows and hides popover content on click", async () => {
+    renderWithProviders(
+      <DebugLayout>
+        <Paragraph>Content</Paragraph>
+      </DebugLayout>,
+    );
+    const debugCircle = screen.getByTestId("debug-circle");
+    expect(debugCircle).toBeInTheDocument();
+    await act(async () => {
+      fireEvent.click(debugCircle);
+    });
+    const popoverContent = screen.getByTestId("debug-circle").closest('[data-state="open"]');
+    expect(popoverContent).toBeInTheDocument();
+  });
+
+  it.skip("handles color theme changes correctly", async () => {
+    renderWithProviders(
+      <DebugLayout>
+        <Paragraph>Color Theme Test</Paragraph>
+      </DebugLayout>,
+    );
+    const debugCircle = screen.getByTestId("debug-circle");
+    expect(debugCircle).toBeInTheDocument();
+    await act(async () => {
+      fireEvent.click(debugCircle);
+    });
+  });
+
+  it("handles missing theme names gracefully", () => {
+    renderWithProviders(
+      <DebugLayout>
+        <Paragraph>Error Test</Paragraph>
+      </DebugLayout>,
+    );
+    expect(screen.getByTestId("debug-circle")).toBeInTheDocument();
+  });
+
+  it.skip("handles empty theme arrays", async () => {
+    renderWithProviders(
+      <DebugLayout>
+        <Paragraph>Empty Theme Test</Paragraph>
+      </DebugLayout>,
+    );
+    const debugButton = screen.getByTestId("debug-circle");
+    expect(debugButton).toBeTruthy();
+    fireEvent.click(debugButton!);
+    const popoverContent = await screen.findByRole("dialog");
+    expect(popoverContent).toBeInTheDocument();
+  });
+
+  it.skip("handles undefined i18n languages", async () => {
+    vi.mock("i18next", () => ({
+      default: { languages: undefined },
+    }));
+    renderWithProviders(
+      <DebugLayout>
+        <Paragraph>Content</Paragraph>
+      </DebugLayout>,
+    );
+    const debugButton = screen.getByTestId("debug-circle");
+    expect(debugButton).toBeTruthy();
+    fireEvent.click(debugButton!);
+    const popoverContent = await screen.findByRole("dialog");
+    expect(popoverContent).toBeInTheDocument();
+  });
+
+  it("should render debug button", () => {
+    renderWithProviders(
+      <DebugLayout>
+        <Paragraph>Test Content</Paragraph>
+      </DebugLayout>,
+    );
+    expect(screen.getByTestId("debug-circle")).toBeTruthy();
+  });
+
+  it.skip("should open popover when debug button is clicked", async () => {
+    renderWithProviders(
+      <DebugLayout>
+        <Paragraph>Test Content</Paragraph>
+      </DebugLayout>,
+    );
+    const debugButton = screen.getByTestId("debug-circle");
+    fireEvent.click(debugButton);
+    const dialog = await screen.findByRole("dialog");
+    expect(dialog).toBeInTheDocument();
+  });
+});

package/src/layouts/Debug/index.tsx

@@ -1,179 +1,52 @@
-/**
- * File: /src/layouts/Debug/index.tsx
- * Project: @multiplatform.one/components
- * File Created: 10-10-2023 06:39:34
- * Author: Clay Risser
- * -----
- * BitSpur (c) Copyright 2021 - 2024
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import i18n from "i18next";
-import type { WithLayout } from "multiplatform.one";
-import { config } from "multiplatform.one";
-import { createWithLayout, useLanguage } from "multiplatform.one";
-import { useTheme } from "multiplatform.one/theme";
-// import { SelectSimple } from '../../forms/SelectSimple';
+import { componentColors } from "../../componentColors";
+import type { WithLayout } from "@multiplatform.one/platform";
+import { createWithLayout } from "@multiplatform.one/platform";
+import { config } from "@multiplatform.one/platform";
+import { useResolvedKnobs } from "@multiplatform.one/theme";
 import type { ComponentType, ReactNode } from "react";
-import type { ThemeName } from "tamagui";
-import { Adapt, Circle, Popover, Select, XStack, YStack } from "tamagui";
-import { useTint } from "../../tints";
-
-type ColorScheme = "dark" | "light";
+import { Circle, Popover, XStack, YStack } from "tamagui";
 
 export interface DebugLayoutProps<DebugViewProps> {
   children: ReactNode;
   debugView?: ComponentType<DebugViewProps>;
   debugViewProps?: DebugViewProps;
-  rootThemeNames?: string[];
   size?: number;
-  subThemeNames?: string[];
 }
 
 export function DebugLayout<DebugViewProps>({
   children,
   debugView,
   debugViewProps,
-  rootThemeNames = ["system", "light", "dark"],
   size = 12,
-  subThemeNames = [
-    "blue",
-    "gray",
-    "green",
-    "orange",
-    "pink",
-    "purple",
-    "red",
-    "yellow",
-  ],
 }: DebugLayoutProps<DebugViewProps>) {
-  const { familiesNames, setFamily, name } = useTint();
+  const { knobProps } = useResolvedKnobs();
   const DebugView = debugView;
-  const [theme, setTheme] = useTheme();
-  const [language, setLanguage] = useLanguage();
-
-  function handleSubThemeChange(subTheme: ThemeName) {
-    setTheme({ sub: subTheme });
-  }
-
-  function handleRootThemeChange(rootTheme: ColorScheme) {
-    setTheme({ root: rootTheme });
-  }
-
-  function renderSubThemeItems() {
-    return (subThemeNames || []).map((name: string, i: number) => {
-      return (
-        <Select.Item key={i + name} index={i} value={name}>
-          <Select.ItemText>{name}</Select.ItemText>
-        </Select.Item>
-      );
-    });
-  }
-
-  function renderRootThemeItems() {
-    return (rootThemeNames || []).map((name: string, i: number) => {
-      return (
-        <Select.Item key={i + name} index={i} value={name}>
-          <Select.ItemText>{name}</Select.ItemText>
-        </Select.Item>
-      );
-    });
-  }
-
-  // TODO: fix this
-  function renderLocaleItems() {
-    return (i18n?.languages || []).map((name: string, i: number) => {
-      return (
-        <Select.Item key={i + name} index={i} value={name}>
-          <Select.ItemText>{name}</Select.ItemText>
-        </Select.Item>
-      );
-    });
-  }
-
-  function renderTintFamilyItems() {
-    return familiesNames.map((name, i) => {
-      return (
-        <Select.Item key={i + name} index={i} value={name}>
-          <Select.ItemText>{name}</Select.ItemText>
-        </Select.Item>
-      );
-    });
-  }
 
   function renderDebug() {
     return (
-      <XStack gap="$4" margin="$4" width={size} height={size}>
+      <XStack
+        {...knobProps.gap}
+        margin={knobProps.panelPadding.padding}
+        width={size}
+        height={size}
+        data-testid="debug-container"
+      >
         <Popover placement="right" size="$5">
           <Popover.Trigger>
             <Circle
               cursor="pointer"
-              backgroundColor="$color9"
+              backgroundColor={componentColors.debug}
               width={size}
               height={size}
+              data-testid="debug-circle"
             />
           </Popover.Trigger>
-          <Adapt>
-            <Popover.Sheet modal dismissOnSnapToBottom>
-              <Popover.Sheet.Frame padding="$4">
-                <Adapt.Contents />
-              </Popover.Sheet.Frame>
-              <Popover.Sheet.Overlay />
-            </Popover.Sheet>
-          </Adapt>
-          <Popover.Content borderWidth={1} borderColor="$borderColor" elevate>
-            <XStack gap="$4">
-              {/* <SelectSimple
-                id="root-theme"
-                placeholder={theme.root}
-                width={96}
-                value={theme.root || 'system'}
-                onValueChange={handleRootThemeChange}
-              >
-                {renderRootThemeItems()}
-              </SelectSimple>
-              <SelectSimple
-                id="sub-theme"
-                placeholder={theme.sub}
-                width={96}
-                backgroundColor="$color5"
-                value={theme.sub?.toString()}
-                onValueChange={handleSubThemeChange}
-              >
-                {renderSubThemeItems()}
-              </SelectSimple>
-              <SelectSimple
-                id="locales"
-                width={96}
-                placeholder={locale}
-                backgroundColor="$color10"
-                value={language}
-                onValueChange={setLanguage}
-              >
-                {renderLocaleItems()}
-              </SelectSimple>
-              <SelectSimple
-                id="tint-families"
-                width={96}
-                placeholder={name.toString()}
-                backgroundColor="$color10"
-                value={name.toString()}
-                onValueChange={setFamily}
-              >
-                {renderTintFamilyItems()}
-              </SelectSimple> */}
-            </XStack>
+          <Popover.Content
+            borderWidth={1}
+            borderColor="$borderColor"
+            elevation={knobProps.elevation}
+          >
+            <XStack {...knobProps.gap} />
             {DebugView && <DebugView {...(debugViewProps as any)} />}
           </Popover.Content>
         </Popover>
@@ -183,7 +56,7 @@ export function DebugLayout<DebugViewProps>({
 
   if (config.get("DEBUG") !== "1") return <>{children}</>;
   return (
-    <YStack fullscreen>
+    <YStack fullscreen data-testid="debug-layout-root">
       {children}
       <YStack position="absolute">{renderDebug()}</YStack>
     </YStack>
@@ -206,6 +79,4 @@ export const withDebugLayout = createWithDebugLayout();
 interface CreateWithDebugLayout<DebugViewProps> {
   debugView?: ComponentType<DebugViewProps>;
   debugViewProps?: DebugViewProps;
-  rootThemeNames?: string[];
-  subThemeNames?: string[];
 }

package/src/layouts/KeyboardAvoidingWrapper/KeyboardAvoidingWrapper.stories.tsx

@@ -0,0 +1,31 @@
+import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
+import { Input } from "@multiplatform.one/forms";
+import { Text, YStack } from "tamagui";
+import { KeyboardAvoidingWrapper } from "./index";
+
+const meta: Meta<typeof KeyboardAvoidingWrapper> = {
+  title: "Components/KeyboardAvoidingWrapper",
+  component: KeyboardAvoidingWrapper,
+  parameters: {
+    status: { type: "stable" },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof KeyboardAvoidingWrapper>;
+
+export const Default: Story = {
+  name: "Main",
+  render: () => (
+    <KeyboardAvoidingWrapper behavior="padding" padding="$4">
+      <YStack gap="$4">
+        <Text>Content inside KeyboardAvoidingWrapper</Text>
+        <Text fontSize="$2" color="$color10">
+          On native, this shifts content when the keyboard appears. On web, it is a simple
+          passthrough wrapper.
+        </Text>
+        <Input label="Test input" placeholder="Focus to test keyboard avoidance" />
+      </YStack>
+    </KeyboardAvoidingWrapper>
+  ),
+};