@multiplatform.one/components 6.1.0 → 6.3.0

package/package.json

@@ -1,34 +1,48 @@
 {
   "name": "@multiplatform.one/components",
-  "version": "6.1.0",
+  "version": "6.3.0",
   "description": "multiplatform.one ui components",
+  "keywords": [
+    "components",
+    "cross-platform",
+    "multiplatform",
+    "multiplatform.one",
+    "react",
+    "react-native",
+    "tamagui",
+    "ui"
+  ],
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
-    "url": "https://gitlab.com/bitspur/multiplatform.one/multiplatform.one.git"
+    "url": "git+https://gitlab.com/bitspur/frappe/multiplatform.one.git",
+    "directory": "public/components"
   },
   "source": "src/index.ts",
   "files": [
     "css",
     "dist",
     "src",
-    "types"
+    "types",
+    "!types/.tsbuildinfo"
   ],
   "sideEffects": [
-    "*.css"
+    "**/*.css"
   ],
   "main": "src/index.ts",
   "module": "src/index.ts",
-  "types": "src/index.ts",
+  "types": "types/index.d.ts",
   "exports": {
     "./package.json": "./package.json",
+    "./src/*": "./src/*",
     ".": {
       "source": "./src/index.ts",
       "react-native": {
+        "types": "./types/index.d.ts",
         "import": "./dist/esm/index.native.js",
         "require": "./dist/cjs/index.native.js"
       },
-      "types": "./src/index.ts",
+      "types": "./types/index.d.ts",
       "import": "./dist/esm/index.mjs",
       "require": "./dist/cjs/index.cjs",
       "default": "./dist/cjs/index.native.js"
@@ -50,44 +64,57 @@
     "@tamagui/react-native-svg": "2.0.0-rc.41",
     "@tamagui/shorthands": "2.0.0-rc.41",
     "@tamagui/themes": "2.0.0-rc.41",
+    "@tamagui/toast": "2.0.0-rc.41",
     "@tanstack/react-form": "^1.29.1",
     "@tanstack/react-hotkeys": "^0.5.1",
+    "@tanstack/react-virtual": "^3.13.24",
+    "d3-scale": "^4.0.2",
+    "d3-shape": "^3.2.0",
     "fast-xml-parser": "^5.7.2",
     "link": "^2.1.2",
+    "shiki": "^4.0.2",
     "tamagui": "2.0.0-rc.41",
-    "@multiplatform.one/i18n": "6.1.0",
-    "@multiplatform.one/forms": "6.1.0",
-    "@multiplatform.one/platform": "6.1.0",
-    "@multiplatform.one/router": "6.1.0",
-    "@multiplatform.one/theme": "6.1.0"
+    "@multiplatform.one/forms": "6.3.0",
+    "@multiplatform.one/i18n": "6.3.0",
+    "@multiplatform.one/router": "6.3.0",
+    "@multiplatform.one/platform": "6.3.0",
+    "@multiplatform.one/theme": "6.3.0"
   },
   "devDependencies": {
     "@tamagui/build": "2.0.0-rc.41",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
+    "@types/d3-scale": "^4.0.9",
+    "@types/d3-shape": "^3.1.8",
     "@vitejs/plugin-react": "^6.0.1",
     "@vitest/coverage-v8": "^4.1.5",
+    "expo-video": "~55.0.19",
     "matchmedia-polyfill": "^0.3.2",
     "moti": "^0.30.0",
+    "react-i18next": "^16.6.6",
     "react-native-reanimated": "~4.3.0",
+    "react-native-svg": "15.15.4",
     "react-native-web": "^0.21.2",
     "vitest": "^4.1.5",
-    "@multiplatform.one/config": "6.1.0",
-    "@multiplatform.one/storybook": "6.1.0",
-    "@multiplatform.one/test-utils": "6.1.0"
+    "@multiplatform.one/config": "6.3.0",
+    "@multiplatform.one/test-utils": "6.3.0",
+    "@multiplatform.one/storybook": "6.3.0"
   },
   "peerDependencies": {
     "@mdx-js/mdx": "^3.1.1",
     "@mdx-js/react": "^3.1.1",
+    "expo-video": "*",
     "gray-matter": "^4.0.3",
     "hast-util-to-html": "8.0.4",
     "moti": "^0.25.3",
     "parse-numeric-range": "^1.3.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
+    "react-i18next": ">=14",
     "react-native": ">=0.83.0",
     "react-native-reanimated": "^4.2.0",
     "react-native-safe-area-context": "*",
+    "react-native-svg": "*",
     "refractor": "^4.9.0",
     "rehype-autolink-headings": "~6.1.1",
     "rehype-parse": "~8.0.5",
@@ -103,6 +130,9 @@
     "@mdx-js/react": {
       "optional": true
     },
+    "expo-video": {
+      "optional": true
+    },
     "gray-matter": {
       "optional": true
     },
@@ -112,12 +142,18 @@
     "parse-numeric-range": {
       "optional": true
     },
+    "react-i18next": {
+      "optional": true
+    },
     "react-native": {
       "optional": true
     },
     "react-native-safe-area-context": {
       "optional": true
     },
+    "react-native-svg": {
+      "optional": true
+    },
     "refractor": {
       "optional": true
     },
@@ -142,7 +178,7 @@
   },
   "module:jsx": "dist/jsx",
   "scripts": {
-    "build": "rm -rf dist types 2>/dev/null && tamagui-build --ts-project ./tsconfig.build.json",
+    "build": "rm -rf dist types 2>/dev/null && tamagui-build --ts-project ./tsconfig.build.json --exclude '\\.spec\\.|\\.test\\.|\\.stories\\.'",
     "test": "vitest run --coverage --coverage.provider=v8 --coverage.reporter=text --coverage.reporter=lcov --coverage.reporter=html",
     "typecheck": "tsc --noEmit"
   }

package/src/Accordion/Accordion.spec.tsx

@@ -0,0 +1,114 @@
+import { fireEvent } from "@testing-library/react";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { describe, expect, it, vi } from "vitest";
+import { Text } from "tamagui";
+import { Accordion } from "./index";
+
+function renderAccordion(props: Record<string, any> = {}) {
+  return renderWithProviders(
+    <Accordion {...props}>
+      <Accordion.Item value="a">
+        <Accordion.Trigger>Section A</Accordion.Trigger>
+        <Accordion.Content>
+          <Text>Content A</Text>
+        </Accordion.Content>
+      </Accordion.Item>
+      <Accordion.Item value="b">
+        <Accordion.Trigger>Section B</Accordion.Trigger>
+        <Accordion.Content>
+          <Text>Content B</Text>
+        </Accordion.Content>
+      </Accordion.Item>
+    </Accordion>,
+  );
+}
+
+function getTriggers(container: HTMLElement) {
+  return Array.from(container.querySelectorAll("[aria-expanded]")) as HTMLElement[];
+}
+
+describe("Accordion", () => {
+  it("renders headers with collapsed content", () => {
+    const result = renderAccordion();
+    const triggers = getTriggers(result.container);
+    expect(triggers).toHaveLength(2);
+    expect(triggers[0].getAttribute("aria-expanded")).toBe("false");
+    expect(result.container.textContent).not.toContain("Content A");
+  });
+
+  it("opens on click and fires onValueChange", () => {
+    const onValueChange = vi.fn();
+    const result = renderAccordion({ onValueChange });
+    const triggers = getTriggers(result.container);
+    fireEvent.click(triggers[0]);
+    expect(onValueChange).toHaveBeenCalledWith("a");
+    expect(triggers[0].getAttribute("aria-expanded")).toBe("true");
+    expect(result.container.textContent).toContain("Content A");
+  });
+
+  it("single mode closes the previous item when another opens", () => {
+    const result = renderAccordion({ defaultValue: "a" });
+    const triggers = getTriggers(result.container);
+    expect(result.container.textContent).toContain("Content A");
+    fireEvent.click(triggers[1]);
+    expect(result.container.textContent).not.toContain("Content A");
+    expect(result.container.textContent).toContain("Content B");
+  });
+
+  it("single mode is collapsible by default", () => {
+    const result = renderAccordion({ defaultValue: "a" });
+    const triggers = getTriggers(result.container);
+    fireEvent.click(triggers[0]);
+    expect(triggers[0].getAttribute("aria-expanded")).toBe("false");
+    expect(result.container.textContent).not.toContain("Content A");
+  });
+
+  it("multiple mode keeps several items open", () => {
+    const result = renderAccordion({ type: "multiple", defaultValue: ["a"] });
+    const triggers = getTriggers(result.container);
+    fireEvent.click(triggers[1]);
+    expect(result.container.textContent).toContain("Content A");
+    expect(result.container.textContent).toContain("Content B");
+  });
+
+  it("controlled value wins and does not self-mutate", () => {
+    const onValueChange = vi.fn();
+    const result = renderAccordion({ value: "a", onValueChange });
+    const triggers = getTriggers(result.container);
+    expect(result.container.textContent).toContain("Content A");
+    fireEvent.click(triggers[1]);
+    expect(onValueChange).toHaveBeenCalledWith("b");
+    // still controlled to "a"
+    expect(result.container.textContent).toContain("Content A");
+    expect(result.container.textContent).not.toContain("Content B");
+  });
+
+  it("wires aria-controls to an existing content id", () => {
+    const result = renderAccordion({ defaultValue: "a" });
+    const triggers = getTriggers(result.container);
+    const controls = triggers[0].getAttribute("aria-controls");
+    expect(controls).toBeTruthy();
+    const content = result.container.querySelector(`[id="${controls}"]`);
+    expect(content).not.toBeNull();
+    expect(content?.getAttribute("aria-labelledby")).toBe(triggers[0].id);
+    expect(content?.getAttribute("role")).toBe("region");
+  });
+
+  it("disabled item does not toggle", () => {
+    const onValueChange = vi.fn();
+    const result = renderWithProviders(
+      <Accordion onValueChange={onValueChange}>
+        <Accordion.Item value="a" disabled>
+          <Accordion.Trigger>Section A</Accordion.Trigger>
+          <Accordion.Content>
+            <Text>Content A</Text>
+          </Accordion.Content>
+        </Accordion.Item>
+      </Accordion>,
+    );
+    const trigger = getTriggers(result.container)[0];
+    fireEvent.click(trigger);
+    expect(onValueChange).not.toHaveBeenCalled();
+    expect(result.container.textContent).not.toContain("Content A");
+  });
+});

package/src/Accordion/Accordion.stories.tsx

@@ -0,0 +1,187 @@
+import { action } from "@multiplatform.one/storybook";
+import { Checkbox, FormGrid, Input, Select, TextArea } from "@multiplatform.one/forms";
+import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
+import { useState } from "react";
+import { Text, XStack, YStack, Button } from "tamagui";
+import { Accordion, type AccordionProps } from "./index";
+
+const meta: Meta<typeof Accordion> = {
+  title: "Components/Accordion",
+  component: Accordion,
+  parameters: {
+    status: { type: "beta" },
+    docs: {
+      description: {
+        component:
+          "Themed collapsible sections over the tamagui Accordion primitive. Single or multiple expand modes, controlled or uncontrolled, plain (divider rows) and card (surface per item) variants. Header rows are full-width tap targets; keyboard Enter/Space toggles and ArrowUp/ArrowDown moves between headers.",
+      },
+    },
+  },
+  argTypes: {
+    type: { control: "radio", options: ["single", "multiple"] },
+    variant: { control: "radio", options: ["plain", "card"] },
+    collapsible: { control: "boolean" },
+    disabled: { control: "boolean" },
+  },
+  args: {
+    type: "single",
+    variant: "plain",
+    collapsible: true,
+    disabled: false,
+  },
+};
+export default meta;
+
+type Story = StoryObj<typeof Accordion>;
+
+function DemoItems() {
+  return (
+    <>
+      <Accordion.Item value="shipping">
+        <Accordion.Trigger description="Where should we deliver the order?">
+          Shipping details
+        </Accordion.Trigger>
+        <Accordion.Content>
+          <Text>
+            We ship to most countries within 3-5 business days. Free shipping applies to orders over
+            $50.
+          </Text>
+        </Accordion.Content>
+      </Accordion.Item>
+      <Accordion.Item value="billing">
+        <Accordion.Trigger description="Payment methods and invoices">Billing</Accordion.Trigger>
+        <Accordion.Content>
+          <Text>
+            All major credit cards are supported. Invoices are emailed after every successful
+            charge.
+          </Text>
+        </Accordion.Content>
+      </Accordion.Item>
+      <Accordion.Item value="returns" disabled>
+        <Accordion.Trigger description="Disabled section">Returns</Accordion.Trigger>
+        <Accordion.Content>
+          <Text>Returns are accepted within 30 days.</Text>
+        </Accordion.Content>
+      </Accordion.Item>
+    </>
+  );
+}
+
+export const Main: Story = {
+  render: (args) => (
+    <Accordion
+      {...(args as AccordionProps)}
+      defaultValue={args.type === "multiple" ? (["shipping"] as any) : "shipping"}
+      onValueChange={action("onValueChange")}
+      maxWidth={520}
+    >
+      <DemoItems />
+    </Accordion>
+  ),
+};
+
+export const Multiple: Story = {
+  args: { type: "multiple" },
+  render: () => (
+    <Accordion
+      type="multiple"
+      defaultValue={["shipping", "billing"]}
+      onValueChange={action("onValueChange")}
+      maxWidth={520}
+    >
+      <DemoItems />
+    </Accordion>
+  ),
+};
+
+export const CardVariant: Story = {
+  args: { variant: "card" },
+  render: () => (
+    <Accordion
+      variant="card"
+      defaultValue="shipping"
+      onValueChange={action("onValueChange")}
+      maxWidth={520}
+    >
+      <DemoItems />
+    </Accordion>
+  ),
+};
+
+export const WithFormContent: Story = {
+  render: () => (
+    <Accordion
+      type="multiple"
+      variant="card"
+      defaultValue={["contact"]}
+      onValueChange={action("onValueChange")}
+      maxWidth={640}
+    >
+      <Accordion.Item value="contact">
+        <Accordion.Trigger description="Frappe Section Break: collapsible section with a form grid">
+          Contact information
+        </Accordion.Trigger>
+        <Accordion.Content>
+          <FormGrid columns={2}>
+            <Input name="firstName" label="First Name" placeholder="Jane" />
+            <Input name="lastName" label="Last Name" placeholder="Doe" />
+            <Input name="email" label="Email" placeholder="jane@example.com" />
+            <Select
+              name="country"
+              label="Country"
+              placeholder="Select country"
+              options={[
+                { label: "United States", value: "us" },
+                { label: "India", value: "in" },
+                { label: "Germany", value: "de" },
+              ]}
+            />
+          </FormGrid>
+        </Accordion.Content>
+      </Accordion.Item>
+      <Accordion.Item value="notes">
+        <Accordion.Trigger description="A second collapsed section">Notes</Accordion.Trigger>
+        <Accordion.Content>
+          <YStack gap="$3">
+            <TextArea name="notes" label="Internal Notes" placeholder="Anything worth recording" />
+            <Checkbox name="subscribe" label="Subscribe to updates" />
+          </YStack>
+        </Accordion.Content>
+      </Accordion.Item>
+    </Accordion>
+  ),
+};
+
+export const Controlled: Story = {
+  render: () => {
+    const [open, setOpen] = useState<string>("billing");
+    return (
+      <YStack gap="$4" maxWidth={520}>
+        <XStack gap="$2" alignItems="center">
+          <Button size="$2" onPress={() => setOpen("shipping")}>
+            Open shipping
+          </Button>
+          <Button size="$2" onPress={() => setOpen("billing")}>
+            Open billing
+          </Button>
+          <Button size="$2" onPress={() => setOpen("")}>
+            Close all
+          </Button>
+          <Text fontSize="$2" color="$color11" data-testid="controlled-value">
+            value: {open || "(none)"}
+          </Text>
+        </XStack>
+        <Accordion
+          type="single"
+          value={open}
+          onValueChange={(next) => {
+            setOpen(next);
+            action("onValueChange")(next);
+          }}
+        >
+          <DemoItems />
+        </Accordion>
+      </YStack>
+    );
+  },
+};