@passui/react 0.1.16 → 0.1.19

package/src/components/view-controller/examples/view-controller-showcase.tsx

@@ -1,45 +0,0 @@
-import { toast } from "@passui/react"
-import { Button } from "@passui/react/button"
-import { TextField } from "@passui/react/text-field"
-import { ViewController } from "@passui/react/view-controller"
-import { useState } from "react"
-
-export function ViewControllerShowcase() {
-    const [email, setEmail] = useState("")
-
-    return (
-        <div className="w-full max-w-sm rounded-4xl bg-elevated px-6 shadow-sm ring-1 ring-separator/60">
-            <ViewController
-                className="gap-6 py-8"
-                heading={
-                    <ViewController.Heading
-                        size="compact"
-                        title="Sign in"
-                        description="Use your Pass account."
-                    />
-                }
-            >
-                <form
-                    className="flex flex-col gap-4"
-                    onSubmit={(event) => {
-                        event.preventDefault()
-                        toast.success("Check your email")
-                    }}
-                >
-                    <TextField
-                        label="Email"
-                        type="email"
-                        placeholder="you@example.com"
-                        value={email}
-                        onChange={(event) =>
-                            setEmail(event.target.value)
-                        }
-                    />
-                    <Button type="submit" variant="accent">
-                        Continue
-                    </Button>
-                </form>
-            </ViewController>
-        </div>
-    )
-}

package/src/components/view-controller/examples/view-controller-usage.tsx

@@ -1,19 +0,0 @@
-import { ViewController } from "@passui/react/view-controller"
-
-export function ViewControllerUsage() {
-    return (
-        <ViewController
-            className="py-6"
-            heading={
-                <ViewController.Heading
-                    title="Devices"
-                    description="Where you're signed in right now."
-                />
-            }
-        >
-            <p className="text-callout text-label-secondary">
-                The screen's content goes here.
-            </p>
-        </ViewController>
-    )
-}

package/src/components/view-controller/view-controller.docs.tsx

@@ -1,71 +0,0 @@
-import { ViewControllerSettings } from "./examples/view-controller-settings"
-import { Button } from "../button/button"
-import { jsxAttribute } from "../../docs/snippet"
-import { defineDocs } from "../../docs/types"
-import { ViewControllerAction } from "./examples/view-controller-action"
-import { ViewControllerShowcase } from "./examples/view-controller-showcase"
-import { ViewControllerUsage } from "./examples/view-controller-usage"
-import { ViewController } from "./view-controller"
-
-// The controls belong to ViewController.Heading, passed as `heading`;
-// the snippet writes that element itself.
-type DemoProps = {
-    title: string
-    description: string
-    size: "default" | "compact"
-}
-
-export const viewControllerDocs = defineDocs<DemoProps>()({
-    slug: "view-controller",
-    name: "ViewController",
-    importPath: "@passui/react/view-controller",
-    controls: {
-        title: { kind: "text", default: "Security" },
-        description: {
-            kind: "text",
-            default:
-                "Choose how you sign in and which devices stay signed in.",
-        },
-        size: {
-            kind: "select",
-            options: { default: true, compact: true },
-            default: "default",
-        },
-    },
-    render: ({ title, description, size }) => (
-        <ViewController
-            className="py-6"
-            heading={
-                <ViewController.Heading
-                    title={title}
-                    description={description || undefined}
-                    size={size}
-                />
-            }
-        >
-            <Button
-                variant="secondary"
-                className="self-start"
-            >
-                Change password
-            </Button>
-        </ViewController>
-    ),
-    childrenSnippet: ({ title, description, size }) => ({
-        imports: [],
-        omit: ["title", "description", "size"],
-        expressionProps: {
-            heading: `<ViewController.Heading ${jsxAttribute("title", title)}${description ? ` ${jsxAttribute("description", description)}` : ""}${size === "compact" ? ' size="compact"' : ""} />`,
-        },
-        children: "\n    {/* the screen's content */}\n",
-    }),
-    usage: ViewControllerUsage,
-    showcase: ViewControllerShowcase,
-    examples: [
-        {
-            id: "action",
-            component: ViewControllerAction,
-        },
-        { id: "settings", component: ViewControllerSettings },
-    ],
-})

package/src/docs/index.ts

@@ -1,3 +0,0 @@
-export * from "./registry"
-export * from "./types"
-export * from "./snippet"

package/src/docs/registry.ts

@@ -1,113 +0,0 @@
-import { buttonDocs } from "../components/button/button.docs"
-import { iconButtonDocs } from "../components/button/icon-button.docs"
-import { chipDocs } from "../components/chip/chip.docs"
-import { labeledContentDocs } from "../components/labeled-content/labeled-content.docs"
-import { pickerDocs } from "../components/picker/picker.docs"
-import { searchFieldDocs } from "../components/search-field/search-field.docs"
-import { secureFieldDocs } from "../components/secure-field/secure-field.docs"
-import { sectionDocs } from "../components/section/section.docs"
-import { segmentedControlDocs } from "../components/segmented-control/segmented-control.docs"
-import { statTileDocs } from "../components/stat-tile/stat-tile.docs"
-import { statusIndicatorDocs } from "../components/status-indicator/status-indicator.docs"
-import { swatchPickerDocs } from "../components/swatch-picker/swatch-picker.docs"
-import { textFieldDocs } from "../components/text-field/text-field.docs"
-import { toggleDocs } from "../components/toggle/toggle.docs"
-import { compactDatePickerDocs } from "../components/compact-date-picker/compact-date-picker.docs"
-import { compactTimePickerDocs } from "../components/compact-time-picker/compact-time-picker.docs"
-import { datePickerDocs } from "../components/date-picker/date-picker.docs"
-import { textEditorDocs } from "../components/text-editor/text-editor.docs"
-import { searchListDocs } from "../components/search-list/search-list.docs"
-import { profileImageDocs } from "../components/profile-image/profile-image.docs"
-import { tabViewDocs } from "../components/tab-view/tab-view.docs"
-import { tabBarDocs } from "../components/tab-bar/tab-bar.docs"
-import { sidebarDocs } from "../components/sidebar/sidebar.docs"
-import { viewControllerDocs } from "../components/view-controller/view-controller.docs"
-import { tableDocs } from "../components/table/table.docs"
-import { contentViewDocs } from "../components/content-view/content-view.docs"
-import { conversationDocs } from "../components/conversation/conversation.docs"
-import { ambientDocs } from "../components/ambient/ambient.docs"
-import { dialogDocs } from "../components/dialog/dialog.docs"
-import { sheetDocs } from "../components/sheet/sheet.docs"
-import { popoverDocs } from "../components/popover/popover.docs"
-import { toastDocs } from "../components/toast/toast.docs"
-import { contextMenuDocs } from "../components/context-menu/context-menu.docs"
-import { tooltipDocs } from "../components/tooltip/tooltip.docs"
-import { localeSwitcherDocs } from "../components/locale-switcher/locale-switcher.docs"
-import type { RegisteredDocs } from "./types"
-
-/** Every documented component. Add one line per docs file. */
-export const registry: readonly RegisteredDocs[] = [
-    buttonDocs,
-    iconButtonDocs,
-    chipDocs,
-    textFieldDocs,
-    secureFieldDocs,
-    searchFieldDocs,
-    toggleDocs,
-    segmentedControlDocs,
-    pickerDocs,
-    swatchPickerDocs,
-    sectionDocs,
-    labeledContentDocs,
-    statusIndicatorDocs,
-    statTileDocs,
-    datePickerDocs,
-    compactDatePickerDocs,
-    compactTimePickerDocs,
-    textEditorDocs,
-    searchListDocs,
-    profileImageDocs,
-    tabViewDocs,
-    tabBarDocs,
-    sidebarDocs,
-    viewControllerDocs,
-    tableDocs,
-    contentViewDocs,
-    conversationDocs,
-    ambientDocs,
-    dialogDocs,
-    sheetDocs,
-    popoverDocs,
-    toastDocs,
-    contextMenuDocs,
-    tooltipDocs,
-    localeSwitcherDocs,
-]
-
-export {
-    dialogDocs,
-    sheetDocs,
-    popoverDocs,
-    toastDocs,
-    contextMenuDocs,
-    tooltipDocs,
-    localeSwitcherDocs,
-    tableDocs,
-    contentViewDocs,
-    conversationDocs,
-    ambientDocs,
-    tabViewDocs,
-    tabBarDocs,
-    sidebarDocs,
-    viewControllerDocs,
-    datePickerDocs,
-    compactDatePickerDocs,
-    compactTimePickerDocs,
-    textEditorDocs,
-    searchListDocs,
-    profileImageDocs,
-    buttonDocs,
-    chipDocs,
-    iconButtonDocs,
-    labeledContentDocs,
-    pickerDocs,
-    searchFieldDocs,
-    secureFieldDocs,
-    sectionDocs,
-    segmentedControlDocs,
-    statTileDocs,
-    statusIndicatorDocs,
-    swatchPickerDocs,
-    textFieldDocs,
-    toggleDocs,
-}

package/src/docs/snippet.ts

@@ -1,17 +0,0 @@
-/**
- * A JSX attribute for a string, quoted so the code always parses: a
- * plain `name="value"`, or `name={"value"}` when the value holds a quote,
- * a brace, a backslash or a line break.
- */
-export function jsxAttribute(name: string, value: string) {
-    return /["\\{}\n]/.test(value)
-        ? `${name}={${JSON.stringify(value)}}`
-        : `${name}="${value}"`
-}
-
-/** Text as JSX children, wrapped in braces when JSX would misread it. */
-export function jsxText(text: string) {
-    return /[{}<>]/.test(text)
-        ? `{${JSON.stringify(text)}}`
-        : text
-}

package/src/docs/types.ts

@@ -1,180 +0,0 @@
-import type { ComponentType, ReactNode } from "react"
-
-/**
- * A choice among fixed options. The options are object keys, so the
- * record must name every member of the prop's union: adding a variant to
- * a component fails the typecheck here until its docs list it too.
- */
-export type SelectControl<T extends string> = {
-    kind: "select"
-    options: Record<T, true>
-    default: T
-}
-
-export type BooleanControl = {
-    kind: "boolean"
-    default: boolean
-}
-
-export type TextControl = {
-    kind: "text"
-    default: string
-    /**
-     * The prop is required, so the snippet always writes it, even at its
-     * default value, and the copied code compiles.
-     */
-    required?: true
-}
-
-export type AnyControl =
-    | SelectControl<string>
-    | BooleanControl
-    | TextControl
-
-/** The control that fits a prop's type. */
-export type ControlFor<V> = [NonNullable<V>] extends [boolean]
-    ? BooleanControl
-    : [NonNullable<V>] extends [string]
-      ? string extends NonNullable<V>
-          ? TextControl
-          : SelectControl<NonNullable<V> & string>
-      : never
-
-/** Controls for any of a component's props, plus its text children. */
-export type Controls<P> = {
-    [K in Exclude<keyof P, "children">]?: ControlFor<P[K]>
-} & { children?: TextControl }
-
-/** The current value of every control. */
-export type ControlValues<C> = {
-    [K in keyof C]-?: NonNullable<C[K]> extends {
-        kind: "select"
-        options: infer O
-    }
-        ? keyof O & string
-        : NonNullable<C[K]> extends BooleanControl
-          ? boolean
-          : string
-}
-
-/**
- * An example is a real React function in the component's `examples/`
- * folder, named `<slug>-<id>.tsx`; the site shows that file's source as
- * its code, so the code is always what runs. `playground` values let the
- * site open the example in the playground.
- */
-export type Example<C> = {
-    id: string
-    component: ComponentType
-    playground?: Partial<ControlValues<C>>
-}
-
-/** What the code snippet shows for children, when plain text is not enough. */
-export type SnippetChildren = {
-    imports: string[]
-    children: string
-    /** Literal string props, written as name="value". */
-    extraProps?: Record<string, string>
-    /** Code expressions, written as name={expression}: state and handlers. */
-    expressionProps?: Record<string, string>
-    /** Objects spread onto the element, written as {...name}. */
-    spreadProps?: string[]
-    /** Lines placed before the element, such as a useState call. */
-    setup?: string[]
-    /**
-     * Demo-only controls the snippet writes itself, left out of the
-     * generated props: a `critical` switch written as `tone="critical"`.
-     */
-    omit?: string[]
-    /**
-     * The element to write when it is a part rather than the export
-     * itself: `Conversation.Messages` for `Conversation`.
-     */
-    element?: string
-}
-
-export type ComponentDocs<
-    C,
-    E extends readonly Example<C>[],
-> = {
-    /** Kebab case, unique across the registry, used in URLs. */
-    slug: string
-    /** The component's export name, as written in code. */
-    name: string
-    /** Where it is imported from, for example `@passui/react/button`. */
-    importPath: string
-    controls: C
-    render: (values: ControlValues<C>) => ReactNode
-    childrenSnippet?: (
-        values: ControlValues<C>
-    ) => SnippetChildren
-    /** The smallest real use, shown under Usage (`<slug>-usage.tsx`). */
-    usage: ComponentType
-    /** A small, realistic interface built with it (`<slug>-showcase.tsx`). */
-    showcase: ComponentType
-    examples: E
-    /**
-     * The playground frame's least height in pixels, for components that
-     * open something over the page (a sheet, a popover, a menu) that the
-     * frame must have room to show.
-     */
-    previewHeight?: number
-}
-
-/**
- * Rejects select options that are not members of the prop's union, so
- * docs cannot offer a value the component does not accept.
- */
-type ExactOptions<C, P> = {
-    [K in keyof C]: K extends keyof P
-        ? C[K] extends { kind: "select"; options: infer O }
-            ? {
-                  options: {
-                      [Option in keyof O]: Option extends NonNullable<
-                          P[K]
-                      >
-                          ? true
-                          : never
-                  }
-              }
-            : unknown
-        : unknown
-}
-
-/**
- * Docs typed against a component's props. Curried so the props type is
- * given once and control keys and example ids stay exact:
- * `defineDocs<ButtonProps>()({ ... })`.
- */
-export function defineDocs<P>() {
-    return <
-        const C extends Controls<P>,
-        const E extends readonly Example<C>[],
-    >(
-        docs: ComponentDocs<C, E> & {
-            controls: ExactOptions<C, P>
-        }
-    ) => docs
-}
-
-/** Any component's docs, as the registry holds them. */
-export type RegisteredDocs = {
-    slug: string
-    name: string
-    importPath: string
-    controls: Record<string, AnyControl | undefined>
-    examples: readonly {
-        id: string
-        component: ComponentType
-        playground?: Record<string, string | boolean>
-    }[]
-    usage: ComponentType
-    showcase: ComponentType
-    previewHeight?: number
-    render(
-        values: Record<string, string | boolean>
-    ): ReactNode
-    childrenSnippet?(
-        values: Record<string, string | boolean>
-    ): SnippetChildren
-}