@hanzogui/demos 4.3.1 → 8.0.0

package/src/ToastDemo.tsx

@@ -1,121 +1,236 @@
-import { Toast, useToastController, useToastState } from '@hanzogui/toast'
-import React from 'react'
-import { Button, Label, Switch, XStack, YStack } from '@hanzo/gui'
+import { isWeb } from 'hanzogui'
+import {
+  Toast,
+  toast,
+  useToastItem,
+  type ToastPosition,
+  type ToastT,
+} from '@hanzogui/toast/v2'
+import {
+  ArrowDown,
+  ArrowDownLeft,
+  ArrowDownRight,
+  ArrowUp,
+  ArrowUpLeft,
+  ArrowUpRight,
+} from '@hanzogui/lucide-icons-2'
+import { useRef, useState } from 'react'
+import { Button, Label, SizableText, Slider, XStack, YStack } from 'hanzogui'
 
-/**
- *  IMPORTANT NOTE: if you're copy-pasting this demo into your code, make sure to add:
- *    - <ToastProvider> at the root
- *    - <ToastViewport /> where you want to show the toasts
- */
 export const ToastDemo = () => {
-  const [native, setNative] = React.useState(false)
+  const [position, setPosition] = useState<ToastPosition>('bottom-right')
+  const [gap, setGap] = useState(14)
+  const [visibleToasts, setVisibleToasts] = useState(4)
+  const [duration, setDuration] = useState(4000)
+  const count = useRef(0)
+
+  const showToast = (newPosition: ToastPosition) => {
+    setPosition(newPosition)
+    count.current++
+    toast(`Toast #${count.current}`, {
+      description: 'Swipe to dismiss or wait for auto-close.',
+    })
+  }
 
   return (
-    <YStack gap="$4" items="center">
-      <ToastControl native={native} />
-      <CurrentToast />
+    <Toast
+      position={position}
+      gap={Math.round(gap)}
+      visibleToasts={visibleToasts}
+      duration={duration}
+    >
+      <Toast.Viewport offset={16}>
+        <Toast.List
+          renderItem={({ toast: t, index }) => (
+            <Toast.Item key={t.id} toast={t} index={index} testID="toast-item">
+              <ToastContent toast={t} />
+            </Toast.Item>
+          )}
+        />
+      </Toast.Viewport>
+
+      <YStack gap="$3" self="center" width={280}>
+        {/* Position buttons */}
+        <YStack gap="$2" self="center">
+          <XStack gap="$2">
+            <PositionButton
+              position="top-left"
+              current={position}
+              onPress={showToast}
+              Icon={ArrowUpLeft}
+            />
+            <PositionButton
+              position="top-center"
+              current={position}
+              onPress={showToast}
+              Icon={ArrowUp}
+            />
+            <PositionButton
+              position="top-right"
+              current={position}
+              onPress={showToast}
+              Icon={ArrowUpRight}
+              testID="toast-top-right-button"
+            />
+          </XStack>
+          <XStack gap="$2">
+            <PositionButton
+              position="bottom-left"
+              current={position}
+              onPress={showToast}
+              Icon={ArrowDownLeft}
+            />
+            <PositionButton
+              position="bottom-center"
+              current={position}
+              onPress={showToast}
+              Icon={ArrowDown}
+            />
+            <PositionButton
+              position="bottom-right"
+              current={position}
+              onPress={showToast}
+              Icon={ArrowDownRight}
+              testID="toast-show-button"
+            />
+          </XStack>
+        </YStack>
 
-      <NativeOptions native={native} setNative={setNative} />
-    </YStack>
+        {/* Controls */}
+        <YStack gap="$1" paddingTop="$1">
+          <DemoSlider
+            label="Gap"
+            value={gap}
+            min={0}
+            max={30}
+            step={0.1}
+            onChange={setGap}
+          />
+          <DemoSlider
+            label="Visible"
+            value={visibleToasts}
+            min={1}
+            max={8}
+            step={1}
+            onChange={setVisibleToasts}
+          />
+          <DemoSlider
+            label="Duration"
+            value={duration}
+            min={1000}
+            max={10000}
+            step={100}
+            onChange={setDuration}
+            format={(v) => `${(v / 1000).toFixed(1)}s`}
+          />
+        </YStack>
+      </YStack>
+    </Toast>
   )
 }
 
-const CurrentToast = () => {
-  const currentToast = useToastState()
+function ToastContent({ toast: t }: { toast: ToastT }) {
+  const { handleClose } = useToastItem()
 
-  if (!currentToast || currentToast.isHandledNatively) return null
+  const title = typeof t.title === 'function' ? t.title() : t.title
+  const description =
+    typeof t.description === 'function' ? t.description() : t.description
 
   return (
-    <Toast
-      key={currentToast.id}
-      duration={currentToast.duration}
-      viewportName={currentToast.viewportName}
-      enterStyle={{ opacity: 0, scale: 0.95, y: -80 }}
-      exitStyle={{ opacity: 0, scale: 0.95, y: -80 }}
-      opacity={1}
-      scale={1}
-      y={-50}
-      transition="quicker"
-      bg="$color2"
-      boxShadow="0px 2px 4px rgba(0,0,0,0.12), 0px 8px 24px rgba(0,0,0,0.08)"
-    >
-      <XStack gap="$5" items="center" justify="space-between">
-        <YStack gap="$0.5" flex={1}>
-          <Toast.Title>{currentToast.title}</Toast.Title>
-          {!!currentToast.message && (
-            <Toast.Description>{currentToast.message}</Toast.Description>
+    <>
+      <XStack gap="$3" alignItems="flex-start">
+        <Toast.Icon />
+        <YStack flex={1} gap="$0.5">
+          {title && (
+            <Toast.Title fontWeight="600" size="$3">
+              {title}
+            </Toast.Title>
+          )}
+          {description && (
+            <Toast.Description color="$color9" size="$2">
+              {description}
+            </Toast.Description>
           )}
         </YStack>
-        <Toast.Action asChild altText="Dismiss toast">
-          <Button size="$2">Dismiss</Button>
-        </Toast.Action>
       </XStack>
-    </Toast>
+
+      {isWeb && (
+        <Toast.Close
+          testID="toast-close-button"
+          position="absolute"
+          top={-6}
+          left={-6}
+          zIndex={1}
+        />
+      )}
+    </>
   )
 }
 
-const ToastControl = ({ native }: { native: boolean }) => {
-  const toast = useToastController()
-
+function DemoSlider({
+  label,
+  value,
+  min,
+  max,
+  step,
+  onChange,
+  format,
+}: {
+  label: string
+  value: number
+  min: number
+  max: number
+  step?: number
+  onChange: (v: number) => void
+  format?: (v: number) => string
+}) {
   return (
-    <XStack gap="$2" justify="center">
-      <Button
-        onPress={() => {
-          toast.show('Successfully saved!', {
-            message: "Don't worry, we've got your data.",
-            native,
-            demo: true,
-          })
-        }}
-      >
-        Show
-      </Button>
-      <Button
-        onPress={() => {
-          toast.hide()
-        }}
+    <XStack gap="$2" alignItems="center">
+      <Label size="$2" width={55}>
+        {label}
+      </Label>
+      <Slider
+        flex={1}
+        value={[value]}
+        min={min}
+        max={max}
+        step={step}
+        onValueChange={([v]) => onChange(v)}
       >
-        Hide
-      </Button>
+        <Slider.Track>
+          <Slider.TrackActive />
+        </Slider.Track>
+        <Slider.Thumb theme="accent" size={16} borderRadius={100} index={0} />
+      </Slider>
+      <SizableText userSelect="none" size="$2" width={35} textAlign="right">
+        {format ? format(value) : Math.round(value)}
+      </SizableText>
     </XStack>
   )
 }
 
-const NativeOptions = ({
-  native,
-  setNative,
+const PositionButton = ({
+  position,
+  current,
+  onPress,
+  Icon,
+  testID,
 }: {
-  native: boolean
-  setNative: (native: boolean) => void
+  position: ToastPosition
+  current: ToastPosition
+  onPress: (p: ToastPosition) => void
+  Icon: any
+  testID?: string
 }) => {
-  return (
-    <XStack gap="$3">
-      <Label size="$1" onPress={() => setNative(false)}>
-        Custom
-      </Label>
-      <Switch
-        theme="surface2"
-        id="native-toggle"
-        size="$1"
-        checked={!!native}
-        onCheckedChange={(val) => setNative(val)}
-      >
-        <Switch.Thumb
-          theme="accent"
-          transition={[
-            'quickest',
-            {
-              transform: {
-                overshootClamping: true,
-              },
-            },
-          ]}
-        />
-      </Switch>
+  const isActive = position === current
 
-      <Label size="$1" onPress={() => setNative(true)}>
-        Native
-      </Label>
-    </XStack>
+  return (
+    <Button
+      icon={Icon}
+      circular
+      theme={isActive ? 'accent' : undefined}
+      onPress={() => onPress(position)}
+      testID={testID}
+    />
   )
 }

package/src/ToastDuplicateDemo.tsx

@@ -1,47 +1,57 @@
 import { CheckCircle2 } from '@hanzogui/lucide-icons-2'
-import { Toast } from '@hanzogui/toast'
-import React from 'react'
-import { Button, XStack, YStack } from '@hanzo/gui'
+import { Toast, toast, useToasts } from '@hanzogui/toast/v2'
+import { Button, XStack, YStack } from 'hanzogui'
 
 /**
- *  IMPORTANT NOTE: if you're copy-pasting this demo into your code, make sure to add the ToastProvider and ToastViewport as well.
+ *  IMPORTANT NOTE: if you're copy-pasting this demo into your code, make sure to add the Toast wrapper as well.
  */
 export const ToastDuplicateDemo = () => {
-  const [savedCount, setSavedCount] = React.useState(0)
-
   return (
-    <YStack items="center">
-      <Button
-        onPress={() => {
-          setSavedCount((old) => old + 1)
-        }}
-      >
-        Show toast
-      </Button>
-      {[...Array(savedCount)].map((_, index) => (
-        <Toast
-          viewportName="viewport-multiple" // Sends to a viewport that supports multiple toasts with the `multipleToasts` prop
-          key={index}
-          duration={4000}
-          enterStyle={{ opacity: 0, scale: 0.5, y: -25 }}
-          exitStyle={{ opacity: 0, scale: 1, y: -20 }}
-          y={0}
-          opacity={1}
-          scale={1}
-          transition="100ms"
+    <Toast>
+      <Toast.Viewport>
+        <ToastList />
+      </Toast.Viewport>
+
+      <YStack items="center">
+        <Button
+          onPress={() => {
+            toast('Successfully saved!', {
+              description: "Don't worry... We've got your data.",
+            })
+          }}
         >
+          Show toast
+        </Button>
+      </YStack>
+    </Toast>
+  )
+}
+
+const ToastList = () => {
+  const { toasts } = useToasts()
+
+  return (
+    <>
+      {toasts.map((t, index) => (
+        <Toast.Item key={t.id} toast={t} index={index}>
           <XStack gap="$4" items="center">
             <YStack>
               <CheckCircle2 />
             </YStack>
 
             <YStack>
-              <Toast.Title>Successfully saved!</Toast.Title>
-              <Toast.Description>Don't worry... We've got your data.</Toast.Description>
+              <Toast.Title>
+                {typeof t.title === 'function' ? t.title() : t.title}
+              </Toast.Title>
+              {t.description && (
+                <Toast.Description>
+                  {typeof t.description === 'function' ? t.description() : t.description}
+                </Toast.Description>
+              )}
             </YStack>
           </XStack>
-        </Toast>
+        </Toast.Item>
       ))}
-    </YStack>
+    </>
   )
 }

package/src/ToastV1Demo.tsx

@@ -0,0 +1,121 @@
+import { Toast, useToastController, useToastState } from '@hanzogui/toast'
+import React from 'react'
+import { Button, Label, Switch, XStack, YStack } from 'hanzogui'
+
+/**
+ *  IMPORTANT NOTE: if you're copy-pasting this demo into your code, make sure to add:
+ *    - <ToastProvider> at the root
+ *    - <ToastViewport /> where you want to show the toasts
+ */
+export const ToastV1Demo = () => {
+  const [native, setNative] = React.useState(false)
+
+  return (
+    <YStack gap="$4" items="center">
+      <ToastControl native={native} />
+      <CurrentToast />
+
+      <NativeOptions native={native} setNative={setNative} />
+    </YStack>
+  )
+}
+
+const CurrentToast = () => {
+  const currentToast = useToastState()
+
+  if (!currentToast || currentToast.isHandledNatively) return null
+
+  return (
+    <Toast
+      key={currentToast.id}
+      duration={currentToast.duration}
+      viewportName={currentToast.viewportName}
+      enterStyle={{ opacity: 0, scale: 0.95, y: -80 }}
+      exitStyle={{ opacity: 0, scale: 0.95, y: -80 }}
+      opacity={1}
+      scale={1}
+      y={-50}
+      transition="quicker"
+      bg="$color2"
+      boxShadow="0px 2px 4px rgba(0,0,0,0.12), 0px 8px 24px rgba(0,0,0,0.08)"
+    >
+      <XStack gap="$5" items="center" justify="space-between">
+        <YStack gap="$0.5" flex={1}>
+          <Toast.Title>{currentToast.title}</Toast.Title>
+          {!!currentToast.message && (
+            <Toast.Description>{currentToast.message}</Toast.Description>
+          )}
+        </YStack>
+        <Toast.Action asChild altText="Dismiss toast">
+          <Button size="$2">Dismiss</Button>
+        </Toast.Action>
+      </XStack>
+    </Toast>
+  )
+}
+
+const ToastControl = ({ native }: { native: boolean }) => {
+  const toast = useToastController()
+
+  return (
+    <XStack gap="$2" justify="center">
+      <Button
+        onPress={() => {
+          toast.show('Successfully saved!', {
+            message: "Don't worry, we've got your data.",
+            native,
+            demo: true,
+          })
+        }}
+      >
+        Show
+      </Button>
+      <Button
+        onPress={() => {
+          toast.hide()
+        }}
+      >
+        Hide
+      </Button>
+    </XStack>
+  )
+}
+
+const NativeOptions = ({
+  native,
+  setNative,
+}: {
+  native: boolean
+  setNative: (native: boolean) => void
+}) => {
+  return (
+    <XStack gap="$3">
+      <Label size="$1" onPress={() => setNative(false)}>
+        Custom
+      </Label>
+      <Switch
+        theme="surface2"
+        id="native-toggle"
+        size="$1"
+        checked={!!native}
+        onCheckedChange={(val) => setNative(val)}
+      >
+        <Switch.Thumb
+          theme="accent"
+          transition={[
+            'quickest',
+            {
+              transform: {
+                overshootClamping: true,
+              },
+            },
+          ]}
+        />
+      </Switch>
+
+      <Label size="$1" onPress={() => setNative(true)}>
+        Native
+      </Label>
+    </XStack>
+  )
+}

package/src/ToggleGroupDemo.tsx

@@ -1,5 +1,5 @@
 import { AlignCenter, AlignLeft, AlignRight } from '@hanzogui/lucide-icons-2'
-import { Label, ToggleGroup, XGroup, YGroup, XStack, YStack } from '@hanzo/gui'
+import { Label, ToggleGroup, XGroup, YGroup, XStack, YStack } from 'hanzogui'
 
 export function ToggleGroupDemo() {
   return (

package/src/TokensDemo.tsx

@@ -1,7 +1,7 @@
 import type { Tokens } from '@hanzogui/core'
 import { getConfig } from '@hanzogui/core'
 import React from 'react'
-import { Button, H2, H3, H4, Square, XGroup, XStack, YStack } from '@hanzo/gui'
+import { Button, H2, H3, H4, Square, XGroup, XStack, YStack } from 'hanzogui'
 
 type Section = 'spaceNegative' | keyof Tokens
 

package/src/TooltipDemo.tsx

@@ -5,16 +5,8 @@ import {
   ChevronUp,
   Circle,
 } from '@hanzogui/lucide-icons-2'
-import type { TooltipProps } from '@hanzo/gui'
-import {
-  Button,
-  Paragraph,
-  Theme,
-  Tooltip,
-  TooltipGroup,
-  XStack,
-  YStack,
-} from '@hanzo/gui'
+import type { TooltipProps } from 'hanzogui'
+import { Button, Paragraph, Theme, Tooltip, TooltipGroup, XStack, YStack } from 'hanzogui'
 
 export function TooltipDemo() {
   return (

package/src/UpdateThemeDemo.tsx

@@ -10,7 +10,7 @@ import {
   YStack,
   getVariableValue,
   useIsomorphicLayoutEffect,
-} from '@hanzo/gui'
+} from 'hanzogui'
 
 const colors = config.tokens.color
 const colorKeys = Object.keys(colors)

package/src/{gui.config.ts → hanzogui.config.ts}

@@ -1,11 +1,11 @@
 import { config } from '@hanzogui/dev-config'
-import { createGui } from '@hanzo/gui'
+import { createGui } from 'hanzogui'
 
 const tamaConf = createGui(config)
 
 export type Conf = typeof tamaConf
 
-declare module '@hanzo/gui' {
+declare module 'hanzogui' {
   interface GuiCustomConfig extends Conf {}
 
   interface TypeOverride {

package/src/index.tsx

@@ -1,5 +1,5 @@
-// Include gui config types for proper type checking
-import type {} from './gui.config'
+// Include hanzogui config types for proper type checking
+import type {} from './hanzogui.config'
 
 export * from './AccordionDemo'
 export * from './AddThemeDemo'
@@ -57,6 +57,7 @@ export * from './TextDemo'
 export * from './ThemeInverseDemo'
 export * from './ToastDemo'
 export * from './ToastDuplicateDemo'
+export * from './ToastV1Demo'
 export * from './ToggleGroupDemo'
 export * from './TokensDemo'
 export * from './TooltipDemo'

package/src/useOnIntersecting.tsx

@@ -1,6 +1,6 @@
 import type { RefObject } from 'react'
 import { useEffect, useState } from 'react'
-import { isWeb, useEvent } from '@hanzo/gui'
+import { isWeb, useEvent } from 'hanzogui'
 
 type DisposeFn = () => void
 

package/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-  Copyright (c) 2020 Nate Wienert
-  
-  Permission is hereby granted, free of charge, to any person obtaining a copy
-  of this software and associated documentation files (the "Software"), to deal
-  in the Software without restriction, including without limitation the rights
-  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-  copies of the Software, and to permit persons to whom the Software is
-  furnished to do so, subject to the following conditions:
-  
-  The above copyright notice and this permission notice shall be included in all
-  copies or substantial portions of the Software.
-  
-  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-  SOFTWARE.

package/dist/cjs/gui.config.native.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","gui_config_exports","__export","default","gui_config_default","module","exports","import_dev_config","require","import_gui","tamaConf","createGui","config"],"sources":["../../src/gui.config.ts"],"sourcesContent":[null],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,YAAA,GAAAC,GAAA,IAAAC,WAAA,CAAAC,SAAA;EAAAC,KAAA;AAAA,IAAAH,GAAA;AAAA,IAAAI,kBAAA;AAAAC,QAAA,CAAAD,kBAAA;EAAAE,OAAA,EAAAA,CAAA,KAAAC;AAAA;AAAAC,MAAA,CAAAC,OAAA,GAAAV,YAAuB,CAAAK,kBAAA;AACvB,IAAAM,iBAA0B,GAAAC,OAAA;AAE1B,IAAAC,UAAM,GAAAD,OAAW;AAYjB,IAAOE,QAAA,OAAAD,UAAQ,CAAAE,SAAA,EAAAJ,iBAAA,CAAAK,MAAA","ignoreList":[]}

package/dist/esm/gui.config.mjs

@@ -1,6 +0,0 @@
-import { config } from "@hanzogui/dev-config";
-import { createGui } from "@hanzo/gui";
-const tamaConf = createGui(config);
-var gui_config_default = tamaConf;
-export { gui_config_default as default };
-//# sourceMappingURL=gui.config.mjs.map

package/dist/esm/gui.config.mjs.map

@@ -1 +0,0 @@
-{"version":3,"names":["config","createGui","tamaConf","gui_config_default"],"sources":["../../src/gui.config.ts"],"sourcesContent":[null],"mappings":"AAAA,SAASA,MAAA,QAAc;AACvB,SAASC,SAAA,QAAiB;AAE1B,MAAMC,QAAA,GAAWD,SAAA,CAAUD,MAAM;AAYjC,IAAOG,kBAAA,GAAQD,QAAA","ignoreList":[]}

package/dist/esm/gui.config.native.js

@@ -1,6 +0,0 @@
-import { config } from "@hanzogui/dev-config";
-import { createGui } from "@hanzo/gui";
-var tamaConf = createGui(config);
-var gui_config_default = tamaConf;
-export { gui_config_default as default };
-//# sourceMappingURL=gui.config.native.js.map

package/dist/esm/gui.config.native.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["config","createGui","tamaConf","gui_config_default"],"sources":["../../src/gui.config.ts"],"sourcesContent":[null],"mappings":"AAAA,SAASA,MAAA,QAAc;AACvB,SAASC,SAAA,QAAiB;AAE1B,IAAAC,QAAM,GAAAD,SAAW,CAAAD,MAAU;AAY3B,IAAOG,kBAAA,GAAQD,QAAA","ignoreList":[]}