@hanzogui/demos 2.0.0

package/src/ContextMenuDemo.tsx

@@ -0,0 +1,178 @@
+import { ContextMenu } from '@hanzogui/context-menu'
+import { Calendar, Check, ChevronRight } from '@hanzogui/lucide-icons-2'
+import React from 'react'
+import { Text, View, YStack } from '@hanzo/gui'
+
+/**
+ * Note: you'll want to use createMenu() to customize further.
+ */
+
+export function ContextMenuDemo() {
+  const [bookmarksChecked, setBookmarksChecked] = React.useState(true)
+  const [native, setNative] = React.useState(true)
+
+  const onSelect = () => {
+    console.info('onSelect')
+  }
+
+  return (
+    <ContextMenu native={native}>
+      <ContextMenu.Trigger asChild>
+        <View
+          p="$4"
+          rounded="$4"
+          borderWidth={1}
+          borderStyle="dashed"
+          borderColor="$color6"
+          cursor="default"
+        >
+          <Text text="center" select="none" color="$color10">
+            Right Click or Long Press
+          </Text>
+        </View>
+      </ContextMenu.Trigger>
+
+      <ContextMenu.Portal zIndex={100}>
+        <ContextMenu.Content
+          p="$1.5"
+          minW={180}
+          borderWidth={1}
+          borderColor="$borderColor"
+          transformOrigin="left top"
+          enterStyle={{ scale: 0.9, opacity: 0, y: -5 }}
+          exitStyle={{ scale: 0.95, opacity: 0, y: -3 }}
+          elevation="$3"
+          transition="100ms"
+        >
+          <ContextMenu.Arrow size="$4" borderWidth={1} borderColor="$borderColor" />
+
+          <ContextMenu.Preview>
+            {() => {
+              return (
+                <YStack
+                  items="center"
+                  justify="center"
+                  height={100}
+                  width={250}
+                  bg="pink"
+                >
+                  <Text>Your Preview here</Text>
+                </YStack>
+              )
+            }}
+          </ContextMenu.Preview>
+          <ContextMenu.Item onSelect={onSelect} key="about-notes">
+            <ContextMenu.ItemTitle>About Notes</ContextMenu.ItemTitle>
+          </ContextMenu.Item>
+          <ContextMenu.Separator />
+
+          <ContextMenu.Item onSelect={onSelect} key="settings">
+            <ContextMenu.ItemTitle>Settings</ContextMenu.ItemTitle>
+          </ContextMenu.Item>
+          <ContextMenu.Item
+            onSelect={onSelect}
+            justify="space-between"
+            textValue="Calendar"
+            key="accounts"
+          >
+            <ContextMenu.ItemTitle>Calendar</ContextMenu.ItemTitle>
+            <ContextMenu.ItemIcon
+              androidIconName="ic_menu_today"
+              ios={{
+                name: 'calendar',
+              }}
+            >
+              <Calendar color="gray" size={14} />
+            </ContextMenu.ItemIcon>
+          </ContextMenu.Item>
+
+          <ContextMenu.Separator />
+
+          <ContextMenu.Item
+            onSelect={onSelect}
+            key="close-notes"
+            disabled
+            textValue="Locked Notes"
+          >
+            <ContextMenu.ItemTitle color="gray">Locked Notes</ContextMenu.ItemTitle>
+          </ContextMenu.Item>
+          <ContextMenu.Item destructive onSelect={onSelect} key="delete-all">
+            <ContextMenu.ItemTitle color="red">Delete all</ContextMenu.ItemTitle>
+          </ContextMenu.Item>
+          <ContextMenu.Separator />
+          {/* Submenu */}
+          <ContextMenu.Sub>
+            <ContextMenu.SubTrigger
+              key="actions-trigger"
+              justify="space-between"
+              textValue="Actions"
+            >
+              <ContextMenu.ItemTitle>Actions</ContextMenu.ItemTitle>
+              <ChevronRight size={12} color="$color10" />
+            </ContextMenu.SubTrigger>
+            <ContextMenu.Portal zIndex={200}>
+              <ContextMenu.SubContent
+                enterStyle={{ scale: 0.9, opacity: 0, x: -5 }}
+                exitStyle={{ scale: 0.95, opacity: 0, x: -3 }}
+                transition="100ms"
+                transformOrigin="left top"
+                elevation="$3"
+                minW={160}
+                bg="$background"
+                p="$1.5"
+                borderWidth={1}
+                borderColor="$borderColor"
+              >
+                <ContextMenu.Label>Note settings</ContextMenu.Label>
+                <ContextMenu.Item
+                  onSelect={onSelect}
+                  key="create-note"
+                  textValue="Create note"
+                >
+                  <ContextMenu.ItemTitle>Create note</ContextMenu.ItemTitle>
+                </ContextMenu.Item>
+                <ContextMenu.Item
+                  onSelect={onSelect}
+                  key="delete-all-notes"
+                  textValue="Delete all notes"
+                >
+                  <ContextMenu.ItemTitle>Delete all notes</ContextMenu.ItemTitle>
+                </ContextMenu.Item>
+                <ContextMenu.Item
+                  onSelect={onSelect}
+                  key="sync-all"
+                  textValue="Sync notes"
+                >
+                  <ContextMenu.ItemTitle>Sync notes</ContextMenu.ItemTitle>
+                </ContextMenu.Item>
+              </ContextMenu.SubContent>
+            </ContextMenu.Portal>
+          </ContextMenu.Sub>
+          <ContextMenu.Separator />
+          <ContextMenu.CheckboxItem
+            key="show-hidden"
+            checked={bookmarksChecked}
+            onCheckedChange={setBookmarksChecked}
+            justify="space-between"
+          >
+            <ContextMenu.ItemTitle>Mark as read</ContextMenu.ItemTitle>
+            <ContextMenu.ItemIndicator>
+              <Check size={12} color="$color10" />
+            </ContextMenu.ItemIndicator>
+          </ContextMenu.CheckboxItem>
+          <ContextMenu.CheckboxItem
+            key="show-other-notes"
+            checked={native}
+            onCheckedChange={setNative}
+            justify="space-between"
+          >
+            <ContextMenu.ItemTitle>Enable Native</ContextMenu.ItemTitle>
+            <ContextMenu.ItemIndicator>
+              <Check size={12} color="$color10" />
+            </ContextMenu.ItemIndicator>
+          </ContextMenu.CheckboxItem>
+        </ContextMenu.Content>
+      </ContextMenu.Portal>
+    </ContextMenu>
+  )
+}

package/src/DialogDemo.tsx

@@ -0,0 +1,180 @@
+import { ChevronDown, X } from '@hanzogui/lucide-icons-2'
+import { useState } from 'react'
+import {
+  Adapt,
+  Button,
+  Dialog,
+  Fieldset,
+  Input,
+  Label,
+  Paragraph,
+  Select,
+  Sheet,
+  TooltipSimple,
+  Unspaced,
+  View,
+  XGroup,
+  XStack,
+} from '@hanzo/gui'
+import { SelectDemoContents } from './SelectDemo'
+
+type DialogMode = 'plain' | 'adapt' | 'keepMounted'
+
+export function DialogDemo() {
+  const [mode, setMode] = useState<DialogMode>('plain')
+
+  return (
+    <View gap="$4" justify="center" items="center">
+      <XGroup>
+        <XGroup.Item>
+          <Button
+            size="$3"
+            theme={mode === 'plain' ? 'accent' : undefined}
+            onPress={() => setMode('plain')}
+          >
+            Plain
+          </Button>
+        </XGroup.Item>
+        <XGroup.Item>
+          <Button
+            size="$3"
+            theme={mode === 'adapt' ? 'accent' : undefined}
+            onPress={() => setMode('adapt')}
+          >
+            Adapt to Sheet
+          </Button>
+        </XGroup.Item>
+        <XGroup.Item>
+          <Button
+            size="$3"
+            theme={mode === 'keepMounted' ? 'accent' : undefined}
+            onPress={() => setMode('keepMounted')}
+          >
+            Keep Mounted
+          </Button>
+        </XGroup.Item>
+      </XGroup>
+
+      <DialogInstance mode={mode} />
+    </View>
+  )
+}
+
+function DialogInstance({ mode }: { mode: DialogMode }) {
+  const [open, setOpen] = useState(false)
+
+  return (
+    <Dialog
+      modal
+      keepChildrenMounted={mode === 'keepMounted'}
+      open={open}
+      onOpenChange={setOpen}
+    >
+      <Dialog.Trigger asChild>
+        <Button>
+          <Button.Text>Show Dialog</Button.Text>
+        </Button>
+      </Dialog.Trigger>
+
+      {mode === 'adapt' && (
+        <Adapt when="maxMd" platform="touch">
+          <Sheet
+            transition="medium"
+            zIndex={200000}
+            modal
+            dismissOnSnapToBottom
+            unmountChildrenWhenHidden
+          >
+            <Sheet.Frame p="$4" gap="$4">
+              <Adapt.Contents />
+            </Sheet.Frame>
+            <Sheet.Overlay
+              bg="$background"
+              opacity={0.5}
+              transition="lazy"
+              enterStyle={{ opacity: 0 }}
+              exitStyle={{ opacity: 0 }}
+            />
+          </Sheet>
+        </Adapt>
+      )}
+
+      <Dialog.Portal>
+        <Dialog.Overlay
+          bg="$background"
+          opacity={0.5}
+          animateOnly={['transform', 'opacity']}
+          transition={[
+            'quicker',
+            {
+              opacity: {
+                overshootClamping: true,
+              },
+            },
+          ]}
+          enterStyle={{ opacity: 0 }}
+          exitStyle={{ opacity: 0 }}
+        />
+
+        <Dialog.FocusScope focusOnIdle>
+          <Dialog.Content
+            transition={[
+              'quicker',
+              {
+                opacity: {
+                  overshootClamping: true,
+                },
+              },
+            ]}
+            enterStyle={{ x: 0, y: 20, opacity: 0 }}
+            exitStyle={{ x: 0, y: 10, opacity: 0, scale: 0.95 }}
+            gap="$4"
+          >
+            <Dialog.Title>Edit profile</Dialog.Title>
+            <Dialog.Description>
+              Make changes to your profile here. Click save when you're done.
+            </Dialog.Description>
+
+            <Fieldset gap="$4" horizontal>
+              <Label width={64} htmlFor="name">
+                Name
+              </Label>
+              <Input flex={1} id="name" defaultValue="Nate Wienert" />
+            </Fieldset>
+
+            <Fieldset gap="$4" horizontal>
+              <Label width={64} htmlFor="username">
+                <TooltipSimple label="Pick your favorite" placement="bottom-start">
+                  <Paragraph>Food</Paragraph>
+                </TooltipSimple>
+              </Label>
+              <XStack flex={1}>
+                <SelectDemoContents
+                  trigger={
+                    <Select.Trigger flex={1} iconAfter={ChevronDown} borderRadius="$4">
+                      <Select.Value placeholder="Something" />
+                    </Select.Trigger>
+                  }
+                />
+              </XStack>
+            </Fieldset>
+
+            <XStack self="flex-end" gap="$4">
+              <Dialog.Close displayWhenAdapted asChild>
+                <Button theme="accent" aria-label="Close">
+                  Save changes
+                </Button>
+              </Dialog.Close>
+            </XStack>
+
+            <Unspaced>
+              <Dialog.Close asChild>
+                <Button position="absolute" r="$3" size="$2" circular icon={X} />
+              </Dialog.Close>
+            </Unspaced>
+          </Dialog.Content>
+        </Dialog.FocusScope>
+      </Dialog.Portal>
+    </Dialog>
+  )
+}

package/src/FormsDemo.tsx

@@ -0,0 +1,60 @@
+import React from 'react'
+import type { SizeTokens } from '@hanzo/gui'
+import {
+  Button,
+  Form,
+  H4,
+  Spinner,
+  AnimatePresence,
+  Square,
+  XStack,
+  XGroup,
+  Label,
+  YStack,
+} from '@hanzo/gui'
+
+export function FormsDemo(props: { size: SizeTokens }) {
+  const [status, setStatus] = React.useState<'off' | 'submitting' | 'submitted'>('off')
+
+  React.useEffect(() => {
+    if (status === 'submitting') {
+      const timer = setTimeout(() => setStatus('off'), 2000)
+      return () => {
+        clearTimeout(timer)
+      }
+    }
+  }, [status])
+
+  return (
+    <Form
+      items="center"
+      gap="$2"
+      onSubmit={() => setStatus('submitting')}
+      borderWidth={1}
+      rounded="$4"
+      bg="$color2"
+      borderColor="$borderColor"
+      minW={350}
+      p="$6"
+    >
+      <Form.Trigger asChild disabled={status !== 'off'}>
+        <YStack gap="$4">
+          <Button>Submit</Button>
+          <YStack width="100%" height={40} justifyContent="center" alignItems="center">
+            <AnimatePresence>
+              {status === 'submitting' ? (
+                <Spinner
+                  transition="medium"
+                  enterStyle={{ opacity: 0 }}
+                  alignSelf="center"
+                  key="spinner"
+                  width={8}
+                />
+              ) : null}
+            </AnimatePresence>
+          </YStack>
+        </YStack>
+      </Form.Trigger>
+    </Form>
+  )
+}

package/src/Grid.tsx

@@ -0,0 +1,46 @@
+import { isWeb } from '@hanzogui/core'
+import { XStack } from '@hanzogui/stacks'
+import React from 'react'
+
+export type GridProps = {
+  children?: any
+  itemMinWidth?: number
+  gap?: any
+  columns?: number
+}
+
+export function Grid({ children, columns, itemMinWidth = 200, gap }: GridProps) {
+  if (isWeb) {
+    return (
+      <div
+        style={{
+          gap,
+          display: 'grid',
+          justifyContent: 'stretch',
+          gridTemplateColumns: `repeat( auto-fit, minmax(${itemMinWidth}px, 1fr) )`,
+        }}
+      >
+        {children}
+      </div>
+    )
+  }
+
+  const childrenList = React.Children.toArray(children)
+
+  return (
+    <XStack items="center" justify="center" flexWrap="wrap">
+      {childrenList.map((child, i) => {
+        if (!child) {
+          return null
+        }
+
+        // index key bad
+        return (
+          <XStack key={i} flex={1} minW={itemMinWidth} mr={gap} mb={gap}>
+            {child}
+          </XStack>
+        )
+      })}
+    </XStack>
+  )
+}

package/src/GroupDemo.tsx

@@ -0,0 +1,56 @@
+import { Activity, Airplay } from '@hanzogui/lucide-icons-2'
+import { Button, Group, ListItem, Separator, XGroup, YGroup, YStack } from '@hanzo/gui'
+
+export function GroupDemo() {
+  return (
+    <YStack p="$3" gap="$2" items="center">
+      <Group orientation="horizontal">
+        <Group.Item>
+          <Button>First</Button>
+        </Group.Item>
+        <Group.Item>
+          <Button>Second</Button>
+        </Group.Item>
+        <Group.Item>
+          <Button>Third</Button>
+        </Group.Item>
+      </Group>
+
+      {/* responsive size - children control their own size/radius */}
+      <XGroup>
+        <XGroup.Item>
+          <Button size="$3" $gtSm={{ size: '$5' }} icon={Activity}>
+            First
+          </Button>
+        </XGroup.Item>
+        <XGroup.Item>
+          <Button size="$3" $gtSm={{ size: '$5' }} icon={Airplay}>
+            Second
+          </Button>
+        </XGroup.Item>
+      </XGroup>
+
+      {/* with separators - add them between items */}
+      <YGroup>
+        <YGroup.Item>
+          <ListItem borderRadius="$6" theme="surface1" title="First" />
+        </YGroup.Item>
+        <Separator />
+        <YGroup.Item>
+          <ListItem
+            borderRadius="$6"
+            theme="surface1"
+            title="Second"
+            subTitle="Second subtitle"
+          />
+        </YGroup.Item>
+        <Separator />
+        <YGroup.Item>
+          <ListItem borderRadius="$6" theme="surface1">
+            Third
+          </ListItem>
+        </YGroup.Item>
+      </YGroup>
+    </YStack>
+  )
+}

package/src/HeadingsDemo.tsx

@@ -0,0 +1,14 @@
+import { H1, H2, H3, H4, H5, H6, YStack } from '@hanzo/gui'
+
+export function HeadingsDemo() {
+  return (
+    <YStack self="center">
+      <H1>Heading 1</H1>
+      <H2>Heading 2</H2>
+      <H3>Heading 3</H3>
+      <H4>Heading 4</H4>
+      <H5>Heading 5</H5>
+      <H6>Heading 6</H6>
+    </YStack>
+  )
+}

package/src/ImageDemo.tsx

@@ -0,0 +1,15 @@
+import { Image } from '@hanzogui/image'
+
+export function ImageDemo() {
+  return (
+    <>
+      <Image
+        src="https://picsum.photos/200/300"
+        width={200}
+        height={300}
+        onLoad={() => {}}
+        onLayout={(e) => {}}
+      />
+    </>
+  )
+}

package/src/InputsDemo.tsx

@@ -0,0 +1,27 @@
+import type { SizeTokens } from '@hanzo/gui'
+import { Button, Input, TextArea, XStack, YStack } from '@hanzo/gui'
+
+export function InputsDemo() {
+  return (
+    <YStack width={200} minH={250} overflow="hidden" gap="$2" m="$3" p="$2">
+      <InputDemo size="$2" />
+      <InputDemo size="$3" />
+      <InputDemo size="$4" />
+      <TextArea theme="surface1" placeholder="Enter your details..." />
+    </YStack>
+  )
+}
+
+function InputDemo(props: { size: SizeTokens }) {
+  return (
+    <XStack items="center" gap="$2">
+      <Input
+        theme="surface1"
+        flex={1}
+        size={props.size}
+        placeholder={`Size ${props.size}...`}
+      />
+      <Button size={props.size}>Go</Button>
+    </XStack>
+  )
+}

package/src/LabelDemo.tsx

@@ -0,0 +1,28 @@
+import { Input, Label, Switch, XStack, YStack } from '@hanzo/gui'
+
+export function LabelDemo() {
+  return (
+    <YStack $maxMd={{ width: '100%' }} minW={300} gap="$4">
+      <XStack items="center" gap="$4">
+        <Label width={90} htmlFor="name">
+          Name
+        </Label>
+        <Input flex={1} id="name" defaultValue="Nate Wienert" />
+      </XStack>
+
+      <XStack items="center" gap="$4">
+        <Label width={90} htmlFor="notify">
+          Notifications
+        </Label>
+        <Switch
+          activeStyle={{
+            backgroundColor: '$color8',
+          }}
+          id="notify"
+        >
+          <Switch.Thumb transition="quickest" />
+        </Switch>
+      </XStack>
+    </YStack>
+  )
+}

package/src/LinearGradientDemo.tsx

@@ -0,0 +1,28 @@
+import { XStack } from '@hanzo/gui'
+import { LinearGradient } from '@hanzogui/linear-gradient'
+
+export function LinearGradientDemo() {
+  return (
+    <XStack gap="$4">
+      {/* tokens */}
+      <LinearGradient
+        width="$6"
+        height="$6"
+        rounded="$4"
+        colors={['$red10', '$yellow10']}
+        start={[0, 1]}
+        end={[0, 0]}
+      />
+
+      {/* theme values */}
+      <LinearGradient
+        width="$6"
+        height="$6"
+        rounded="$4"
+        colors={['$background', '$color']}
+        start={[1, 1]}
+        end={[0, 0]}
+      />
+    </XStack>
+  )
+}