@olympusoss/canvas 3.2.1 → 5.0.0

package/src/organisms/dialog/dialog.md

@@ -0,0 +1,271 @@
+# Dialog
+
+A modal dialog: a centered panel over a dimmed, blurred backdrop, with a title, an optional description, a body for real content like a form, and right-aligned actions. Use it for a focused task that warrants interrupting the page; reach for the Alert Dialog for a terse yes/no confirmation.
+
+## Usage
+
+```tsx
+<Dialog
+  trigger="Open dialog"
+  title="Refund payment"
+  description="The refund will be reflected in the customer's bank account within 2 to 3 business days."
+  withBody
+  confirmLabel="Confirm"
+  cancelLabel="Cancel"
+/>
+```
+
+## Variants
+
+### Size - xs
+
+```tsx
+<Dialog
+  trigger="Open dialog"
+  title="Refund payment"
+  description="The refund will be reflected in the customer's bank account within 2 to 3 business days."
+  withBody
+  confirmLabel="Confirm"
+  cancelLabel="Cancel"
+  xs
+/>
+```
+
+### Size - sm
+
+```tsx
+<Dialog
+  trigger="Open dialog"
+  title="Refund payment"
+  description="The refund will be reflected in the customer's bank account within 2 to 3 business days."
+  withBody
+  confirmLabel="Confirm"
+  cancelLabel="Cancel"
+  small
+/>
+```
+
+### Size - md
+
+```tsx
+<Dialog
+  trigger="Open dialog"
+  title="Refund payment"
+  description="The refund will be reflected in the customer's bank account within 2 to 3 business days."
+  withBody
+  confirmLabel="Confirm"
+  cancelLabel="Cancel"
+  medium
+/>
+```
+
+### Size - xl
+
+```tsx
+<Dialog
+  trigger="Open dialog"
+  title="Refund payment"
+  description="The refund will be reflected in the customer's bank account within 2 to 3 business days."
+  withBody
+  confirmLabel="Confirm"
+  cancelLabel="Cancel"
+  large
+/>
+```
+
+### Size - 2xl
+
+```tsx
+<Dialog
+  trigger="Open dialog"
+  title="Refund payment"
+  description="The refund will be reflected in the customer's bank account within 2 to 3 business days."
+  withBody
+  confirmLabel="Confirm"
+  cancelLabel="Cancel"
+  wide
+/>
+```
+
+### Destructive action
+
+```tsx
+<Dialog
+  trigger="Open dialog"
+  title="Refund payment"
+  description="The refund will be reflected in the customer's bank account within 2 to 3 business days."
+  withBody
+  confirmLabel="Refund"
+  cancelLabel="Cancel"
+  destructive
+/>
+```
+
+## Do & Don't
+
+### When to use
+
+**Do** — Use the Dialog for a focused task with real content, like a short form.
+
+```tsx
+<Dialog open large>
+  <Text style={{ fontSize: 16, lineHeight: 24, fontWeight: "600", color: tokens["popover-foreground"] }}>Edit profile</Text>
+  <Text style={{ fontSize: 14, lineHeight: 20, color: tokens["muted-foreground"], marginTop: 8 }}>Update how your name and email appear to teammates.</Text>
+  <View style={{ marginTop: 20 }}>
+    <Text style={{ fontSize: 14, lineHeight: 20, fontWeight: "500", color: tokens.foreground, marginBottom: 6 }}>Name</Text>
+    <Input value="Ada Lovelace" />
+    <Text style={{ fontSize: 14, lineHeight: 20, fontWeight: "500", color: tokens.foreground, marginBottom: 6, marginTop: 16 }}>Email</Text>
+    <Input value="ada@example.com" />
+  </View>
+  <View style={{ flexDirection: "row", justifyContent: "flex-end", gap: 8, marginTop: 24 }}>
+    <Button outline small>Cancel</Button>
+    <Button primary small>Save changes</Button>
+  </View>
+</Dialog>
+```
+
+**Don't** — A bare yes/no question does not need the roomier Dialog; that is what the Alert Dialog is for.
+
+```tsx
+<Dialog open title="Delete file?" small destructive confirmLabel="Delete" cancelLabel="Cancel" />
+```
+
+### Description
+
+**Do** — Keep the description to one supporting line; link out for the full policy.
+
+```tsx
+<Dialog open title="Refund payment" description="The refund posts to the original card in 2 to 3 business days." medium confirmLabel="Refund" cancelLabel="Cancel" />
+```
+
+**Don't** — A multi-sentence policy dump in the description buries the task under reading.
+
+```tsx
+<Dialog open title="Refund payment" description="Refunds are processed through the original payment method. Depending on the bank, the amount can take 2 to 3 business days to appear. Partial refunds are supported. Once submitted a refund cannot be cancelled, and the payout for this period will be adjusted on your next statement." medium confirmLabel="Refund" cancelLabel="Cancel" />
+```
+
+### Body form
+
+**Do** — Keep the body to the few fields the task needs; send long forms to a full page.
+
+```tsx
+<Dialog open large>
+  <Text style={{ fontSize: 16, lineHeight: 24, fontWeight: "600", color: tokens["popover-foreground"] }}>Create project</Text>
+  <View style={{ marginTop: 20 }}>
+    <Text style={{ fontSize: 14, lineHeight: 20, fontWeight: "500", color: tokens.foreground, marginBottom: 6 }}>Name</Text>
+    <Input placeholder="Acme website" />
+    <Text style={{ fontSize: 14, lineHeight: 20, fontWeight: "500", color: tokens.foreground, marginBottom: 6, marginTop: 16 }}>Key</Text>
+    <Input placeholder="ACME" />
+  </View>
+  <View style={{ flexDirection: "row", justifyContent: "flex-end", gap: 8, marginTop: 24 }}>
+    <Button outline small>Cancel</Button>
+    <Button primary small>Create</Button>
+  </View>
+</Dialog>
+```
+
+**Don't** — A seven-field form crammed into a small dialog feels like a page stuffed into a popup.
+
+```tsx
+<Dialog open small>
+  <Text style={{ fontSize: 16, lineHeight: 24, fontWeight: "600", color: tokens["popover-foreground"] }}>Create project</Text>
+  <View style={{ marginTop: 20 }}>
+    <Text style={{ fontSize: 14, lineHeight: 20, fontWeight: "500", color: tokens.foreground, marginBottom: 6 }}>Name</Text>
+    <Input />
+    <Text style={{ fontSize: 14, lineHeight: 20, fontWeight: "500", color: tokens.foreground, marginBottom: 6, marginTop: 12 }}>Key</Text>
+    <Input />
+    <Text style={{ fontSize: 14, lineHeight: 20, fontWeight: "500", color: tokens.foreground, marginBottom: 6, marginTop: 12 }}>Description</Text>
+    <Input />
+    <Text style={{ fontSize: 14, lineHeight: 20, fontWeight: "500", color: tokens.foreground, marginBottom: 6, marginTop: 12 }}>Lead</Text>
+    <Input />
+    <Text style={{ fontSize: 14, lineHeight: 20, fontWeight: "500", color: tokens.foreground, marginBottom: 6, marginTop: 12 }}>Team</Text>
+    <Input />
+    <Text style={{ fontSize: 14, lineHeight: 20, fontWeight: "500", color: tokens.foreground, marginBottom: 6, marginTop: 12 }}>Visibility</Text>
+    <Input />
+    <Text style={{ fontSize: 14, lineHeight: 20, fontWeight: "500", color: tokens.foreground, marginBottom: 6, marginTop: 12 }}>Template</Text>
+    <Input />
+  </View>
+  <View style={{ flexDirection: "row", justifyContent: "flex-end", gap: 8, marginTop: 24 }}>
+    <Button outline small>Cancel</Button>
+    <Button primary small>Create</Button>
+  </View>
+</Dialog>
+```
+
+### Actions
+
+**Do** — One primary plus quieter secondaries, right-aligned and labeled with their verb.
+
+```tsx
+<Dialog open medium>
+  <Text style={{ fontSize: 16, lineHeight: 24, fontWeight: "600", color: tokens["popover-foreground"] }}>Unsaved changes</Text>
+  <Text style={{ fontSize: 14, lineHeight: 20, color: tokens["muted-foreground"], marginTop: 8 }}>You have edits that are not saved.</Text>
+  <View style={{ flexDirection: "row", justifyContent: "flex-end", gap: 8, marginTop: 24 }}>
+    <Button ghost small>Discard</Button>
+    <Button outline small>Keep editing</Button>
+    <Button primary small>Save</Button>
+  </View>
+</Dialog>
+```
+
+**Don't** — Three look-alike primary buttons give no signal about the default, safe choice.
+
+```tsx
+<Dialog open medium>
+  <Text style={{ fontSize: 16, lineHeight: 24, fontWeight: "600", color: tokens["popover-foreground"] }}>Unsaved changes</Text>
+  <Text style={{ fontSize: 14, lineHeight: 20, color: tokens["muted-foreground"], marginTop: 8 }}>You have edits that are not saved.</Text>
+  <View style={{ flexDirection: "row", justifyContent: "flex-end", gap: 8, marginTop: 24 }}>
+    <Button primary small>Save</Button>
+    <Button primary small>Discard</Button>
+    <Button primary small>Keep editing</Button>
+  </View>
+</Dialog>
+```
+
+### Destructive action
+
+**Do** — Reserve the destructive tone for the irreversible action it names.
+
+```tsx
+<Dialog open title="Delete workspace" description="This removes all projects and cannot be undone." medium destructive confirmLabel="Delete" cancelLabel="Cancel" />
+```
+
+**Don't** — A red button on a routine Save trains users to ignore the colour that should mean danger.
+
+```tsx
+<Dialog open title="Save changes" description="Update the profile with your edits." medium destructive confirmLabel="Save" cancelLabel="Cancel" />
+```
+
+### Size
+
+**Do** — Size the dialog to its content: a single field belongs in xs or sm.
+
+```tsx
+<Dialog open small>
+  <Text style={{ fontSize: 16, lineHeight: 24, fontWeight: "600", color: tokens["popover-foreground"] }}>Rename</Text>
+  <View style={{ marginTop: 20 }}>
+    <Text style={{ fontSize: 14, lineHeight: 20, fontWeight: "500", color: tokens.foreground, marginBottom: 6 }}>Name</Text>
+    <Input value="Untitled" />
+  </View>
+  <View style={{ flexDirection: "row", justifyContent: "flex-end", gap: 8, marginTop: 24 }}>
+    <Button outline small>Cancel</Button>
+    <Button primary small>Save</Button>
+  </View>
+</Dialog>
+```
+
+**Don't** — A 2xl panel around a single field leaves a vast empty expanse beside the input.
+
+```tsx
+<Dialog open wide>
+  <Text style={{ fontSize: 16, lineHeight: 24, fontWeight: "600", color: tokens["popover-foreground"] }}>Rename</Text>
+  <View style={{ marginTop: 20 }}>
+    <Text style={{ fontSize: 14, lineHeight: 20, fontWeight: "500", color: tokens.foreground, marginBottom: 6 }}>Name</Text>
+    <Input value="Untitled" />
+  </View>
+  <View style={{ flexDirection: "row", justifyContent: "flex-end", gap: 8, marginTop: 24 }}>
+    <Button outline small>Cancel</Button>
+    <Button primary small>Save</Button>
+  </View>
+</Dialog>
+```

package/src/organisms/dialog/dialog.shared.tsx

@@ -0,0 +1,230 @@
+import { useState, type ReactNode } from "react";
+import { View, Text, Pressable, useTheme, type StyleProp, type ViewStyle } from "../../style/index.js";
+import { Button } from "../../atoms/button/button.js";
+import { Input } from "../../atoms/input/input.js";
+import * as s from "./dialog.styles.js";
+import { type Size, type DialogSkin } from "./dialog.styles.js";
+
+// Shared Dialog shell. The structure (an optional trigger plus a modal panel
+// centered over a dimmed backdrop, a title, an optional description, an optional
+// data-driven Amount/Reason form, and a confirm/cancel footer), the public
+// boolean-prop API, the size precedence, the controlled/uncontrolled open state,
+// and the action handlers all live here once. A platform file supplies only its
+// skin (the backdrop dimming, the card shape/fill/border/shadow, the title/body
+// type, and the footer layout) and calls createDialog.
+//
+// In the docs preview the overlay is rendered INLINE: a contained dim backdrop
+// View wraps the centered card, so it reads as a modal within the preview area
+// rather than a full-screen portal that would cover it.
+//
+// Boolean-prop API: one boolean per option, grouped by axis, first-match
+// precedence within an axis (mirrors Button's intentOf). Axes:
+//
+// - Confirm intent: `destructive` renders the confirm action for an irreversible
+//   action (a destructive Button on web, the `destructive` red on iOS/Android);
+//   omit for the default primary confirm.
+// - Width (pick one): from narrowest to widest, `xs`, `small`, `medium`,
+//   `large`, `wide`; omit for the default panel width (one step wider than
+//   `medium`). First-match precedence in that order, so a narrower prop wins if
+//   more than one is set.
+
+export interface DialogProps {
+  children?: ReactNode;
+  // Content (strings, for the children-less / data-driven case).
+  title?: string;
+  description?: string;
+  // Body: render a short form (Amount + Reason fields) inside the panel for
+  // the data-driven case.
+  withBody?: boolean;
+  // Trigger button label. When set, the dialog renders the button and opens
+  // itself on press (uncontrolled). Omit when you drive `open` yourself.
+  trigger?: string;
+  // Action labels.
+  confirmLabel?: string;
+  cancelLabel?: string;
+  // Controlled open state. Omit for uncontrolled (the trigger opens it).
+  open?: boolean;
+  // Fired when the open state changes (trigger press, confirm, cancel).
+  onOpenChange?: (open: boolean) => void;
+  // Confirm intent (default is a primary confirm).
+  destructive?: boolean;
+  // Width (pick one; default is the standard panel width). First-match
+  // precedence: xs, small, medium, large, wide.
+  xs?: boolean;
+  small?: boolean;
+  medium?: boolean;
+  large?: boolean;
+  wide?: boolean;
+  // Action handlers.
+  onConfirm?: () => void;
+  onCancel?: () => void;
+  /** Escape hatch for layout/positioning composition on the panel (mainly width). */
+  style?: StyleProp<ViewStyle>;
+}
+
+// Size precedence when more than one is passed: first match wins.
+function sizeOf(p: DialogProps): Size {
+  if (p.xs) return "xs";
+  if (p.small) return "small";
+  if (p.medium) return "medium";
+  if (p.large) return "large";
+  if (p.wide) return "wide";
+  return "default";
+}
+
+/** Build a Dialog component from a platform skin. */
+export function createDialog(skin: DialogSkin) {
+  return function Dialog(props: DialogProps) {
+    const {
+      children,
+      title,
+      description,
+      withBody,
+      confirmLabel = "Confirm",
+      cancelLabel = "Cancel",
+      trigger,
+      open: openProp,
+      onOpenChange,
+      destructive,
+      onConfirm,
+      onCancel,
+      style,
+    } = props;
+    const { tokens } = useTheme();
+
+    // Uncontrolled by default: the trigger opens the dialog and an action closes
+    // it; a controlled `open` prop overrides this.
+    const [internalOpen, setInternalOpen] = useState(false);
+    const open = openProp ?? internalOpen;
+    const setOpen = (next: boolean) => {
+      if (openProp === undefined) setInternalOpen(next);
+      onOpenChange?.(next);
+    };
+
+    const size = sizeOf(props);
+
+    const confirm = () => {
+      onConfirm?.();
+      setOpen(false);
+    };
+    const cancel = () => {
+      onCancel?.();
+      setOpen(false);
+    };
+
+    // The confirm/cancel footer. Three platform shapes:
+    //   - web (footerKind "buttons", no skin.textButton): the outline Cancel +
+    //     primary/destructive Confirm Button row (verbatim Canvas look).
+    //   - Android (footerKind "buttons", skin.textButton set): flat text buttons,
+    //     Cancel then Confirm, brand-indigo, with a ripple.
+    //   - iOS (footerKind "capsules"): a side-by-side row of capsule buttons, a
+    //     gray Cancel capsule then a primary (or destructive-red-labeled) Confirm
+    //     capsule, no dividers; a pressed capsule dims.
+    const footer =
+      skin.footerKind === "capsules" ? (
+        <View style={skin.footer(tokens)}>
+          {/* Cancel capsule (gray) on the left, Confirm capsule (indigo, or gray
+              with red label when destructive) on the right. */}
+          {(
+            [
+              { label: cancelLabel, onPress: cancel, confirm: false, dangerous: false },
+              { label: confirmLabel, onPress: confirm, confirm: true, dangerous: !!destructive },
+            ] as const
+          ).map((cap, i) => (
+            <Pressable
+              key={`${cap.label}-${i}`}
+              accessibilityRole="button"
+              onPress={cap.onPress}
+              style={({ pressed }) => [
+                skin.capsule != null ? skin.capsule(tokens, cap.confirm, cap.dangerous) : null,
+                skin.capsulePressedOpacity != null && pressed ? { opacity: skin.capsulePressedOpacity } : null,
+              ]}
+            >
+              {skin.capsuleLabel != null ? (
+                <Text style={skin.capsuleLabel(tokens, cap.confirm, cap.dangerous)}>{cap.label}</Text>
+              ) : null}
+            </Pressable>
+          ))}
+        </View>
+      ) : skin.textButton != null ? (
+        <View style={skin.footer(tokens)}>
+          {/* Android: flat text buttons, Cancel then Confirm. */}
+          <Pressable
+            accessibilityRole="button"
+            onPress={cancel}
+            android_ripple={skin.textButtonRipple ? skin.textButtonRipple(tokens) : undefined}
+            style={skin.textButton}
+          >
+            {skin.textButtonLabel != null ? (
+              <Text style={skin.textButtonLabel(tokens, false)}>{cancelLabel}</Text>
+            ) : null}
+          </Pressable>
+          <Pressable
+            accessibilityRole="button"
+            onPress={confirm}
+            android_ripple={skin.textButtonRipple ? skin.textButtonRipple(tokens) : undefined}
+            style={skin.textButton}
+          >
+            {skin.textButtonLabel != null ? (
+              <Text style={skin.textButtonLabel(tokens, !!destructive)}>{confirmLabel}</Text>
+            ) : null}
+          </Pressable>
+        </View>
+      ) : (
+        <View style={skin.footer(tokens)}>
+          {/* Web: outline Cancel + primary/destructive Confirm Button row. */}
+          <Button outline small onPress={cancel}>
+            {cancelLabel}
+          </Button>
+          {destructive ? (
+            <Button destructive small onPress={confirm}>
+              {confirmLabel}
+            </Button>
+          ) : (
+            <Button primary small onPress={confirm}>
+              {confirmLabel}
+            </Button>
+          )}
+        </View>
+      );
+
+    // Optional trigger button plus the modal. The modal is a contained dim
+    // backdrop: a centered scrim with presence in the preview (explicit
+    // minHeight) so the panel reads as a modal within the area.
+    return (
+      <View style={s.root}>
+        {trigger != null ? (
+          <Button outline small onPress={() => setOpen(true)}>
+            {trigger}
+          </Button>
+        ) : null}
+        {open ? (
+          <View style={[trigger != null ? s.backdropTriggerGap : null, s.backdropLayout, skin.backdrop(tokens)]}>
+            <View style={[s.cardLayout, skin.card(tokens), s.cardWidth(size), style]}>
+              {children != null ? (
+                children
+              ) : (
+                <>
+                  {title != null ? <Text style={skin.title(tokens)}>{title}</Text> : null}
+                  {description != null ? <Text style={skin.body(tokens)}>{description}</Text> : null}
+                  {withBody ? (
+                    <View style={skin.formBody}>
+                      <Text style={skin.fieldLabel(tokens)}>Amount</Text>
+                      <View style={skin.amountRow}>
+                        <Text style={skin.currency(tokens)}>$</Text>
+                        <Input value="90.00" style={skin.amountInput} />
+                      </View>
+                      <Text style={[skin.fieldLabel(tokens), skin.fieldLabelGap]}>Reason</Text>
+                      <Input placeholder="Duplicate charge" />
+                    </View>
+                  ) : null}
+                  {footer}
+                </>
+              )}
+            </View>
+          </View>
+        ) : null}
+      </View>
+    );
+  };
+}