@multiplatform.one/components 0.2.17 → 0.7.1

package/src/organize/SimpleTabs/index.tsx

@@ -0,0 +1,118 @@
+import type { PropsWithChildren } from 'react';
+import React, { useMemo } from 'react';
+import type { TabsProps, TabsContentProps, TabsTabProps, TabsListProps, ThemeValueFallback, SizeTokens } from 'tamagui';
+import { SizableText } from 'tamagui';
+import { Separator } from 'tamagui';
+import { Tabs } from 'tamagui';
+
+export type SimpleTabsProps = Omit<TabsProps, 'defaultValue'> & { fullScreen?: boolean } & { defaultRoute?: string };
+
+export type ContentProps = Omit<TabsContentProps, 'value'> & { route: string };
+
+export type TabProps = Omit<TabsTabProps, 'value'> & { path: string };
+
+export type ListProps = TabsListProps & { fullHeight?: boolean };
+
+interface SimpleTabsContextProps extends PropsWithChildren {
+  orientation: 'horizontal' | 'vertical' | undefined;
+  width: SizeTokens | ThemeValueFallback | undefined;
+}
+
+interface TabListContextProps extends PropsWithChildren {
+  fullHeight: boolean;
+}
+
+const SimpleTabsContext = React.createContext<SimpleTabsContextProps | null>(null);
+
+const TabsListContext = React.createContext<TabListContextProps | null>(null);
+
+export function SimpleTabs({
+  width,
+  height,
+  fullScreen,
+  defaultRoute,
+  orientation = 'horizontal',
+  ...props
+}: SimpleTabsProps) {
+  const contextValue = useMemo(() => ({ orientation, width }), [orientation, width]);
+
+  return (
+    <SimpleTabsContext.Provider value={contextValue}>
+      <Tabs
+        borderRadius="$4"
+        borderWidth="$0.25"
+        overflow="hidden"
+        borderColor="$borderColor"
+        flexDirection={orientation === 'vertical' ? 'row' : 'column'}
+        defaultValue={defaultRoute}
+        {...props}
+        width={fullScreen ? '100%' : width ?? 300}
+        height={fullScreen ? '100%' : height ?? 150}
+      >
+        {props.children}
+      </Tabs>
+    </SimpleTabsContext.Provider>
+  );
+}
+
+export function TabsList({ fullHeight = false, ...props }: ListProps) {
+  const context = React.useContext(SimpleTabsContext);
+  if (!context) throw new Error('TabsList must be used inside SimpleTabs');
+  const { orientation } = context;
+  const contextValue = useMemo(() => ({ fullHeight }), [fullHeight]);
+
+  return (
+    <TabsListContext.Provider value={contextValue}>
+      <Tabs.List
+        separator={<Separator vertical={orientation === 'horizontal'} />}
+        disablePassBorderRadius={orientation === 'horizontal' ? 'bottom' : 'end'}
+        aria-label="Manage your account"
+        flex={0}
+        style={orientation === 'vertical' ? { display: 'flex', flexDirection: 'column' } : {}}
+        {...props}
+      >
+        {props.children}
+      </Tabs.List>
+    </TabsListContext.Provider>
+  );
+}
+
+export function TabContent({ route, ...props }: ContentProps) {
+  return (
+    <Tabs.Content
+      backgroundColor="$background"
+      key={route}
+      padding="$2"
+      flex={1}
+      borderColor="$background"
+      borderRadius="$2"
+      borderTopLeftRadius={0}
+      borderTopRightRadius={0}
+      borderWidth="$2"
+      value={route}
+      {...props}
+    >
+      {props.children}
+    </Tabs.Content>
+  );
+}
+
+export function Tab({ path, ...props }: TabProps) {
+  const context = React.useContext(SimpleTabsContext);
+  const listContext = React.useContext(TabsListContext);
+  if (!context) throw new Error('Tab must be used inside TabList');
+  const { orientation } = context;
+  if (!listContext) throw new Error('Tab must be used inside TabList');
+  const { fullHeight } = listContext;
+
+  return (
+    <Tabs.Tab
+      key={path}
+      f={orientation === 'horizontal' || (orientation === 'vertical' && fullHeight) ? 1 : 0}
+      value={path}
+      {...props}
+    >
+      {typeof props.children === 'string' ? <SizableText>{props.children}</SizableText> : props.children}
+    </Tabs.Tab>
+  );
+}

package/src/panels/SimpleAlertDialog/SImpleAlertDialog.stories.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { SimpleAlertDialog } from './index';
 import type { Meta } from '@storybook/react';
-import { Button } from 'tamagui';
+import { AlertDialog, Button, Switch, XStack, YStack } from 'tamagui';
 
 const meta: Meta = {
   title: 'panels/SimpleAlertDialog',
@@ -9,20 +9,15 @@ const meta: Meta = {
   parameters: { status: { type: 'beta' } },
 };
 
-// uncomment this to control the dialog using the open prop
-
-// export const main = () => {
-//   return (
-//     <SimpleAlertDialog
-//       title="Are you sure?"
-//       description="This action cannot be undone"
-//       cancel="Cancel"
-//       accept="Delete"
-//       open={true}
-//       onAccept={() => alert('Accepted')}
-//     />
-//   );
-// };
+export const ConditionalOpen = () => (
+  <SimpleAlertDialog
+    title="Are you sure?"
+    description="This action cannot be undone"
+    cancel="Cancel"
+    accept="Delete"
+    onAccept={() => alert('Accepted')}
+  />
+);
 
 export const main = () => (
   <SimpleAlertDialog
@@ -35,4 +30,34 @@ export const main = () => (
     <Button>Get Alert</Button>
   </SimpleAlertDialog>
 );
+
+export const customContent = () => (
+  <SimpleAlertDialog
+    title="Are you sure?"
+    description="This action cannot be undone"
+    cancel="Cancel"
+    accept="Yes, Delete"
+    onAccept={() => alert('accepted')}
+    customContent={DialogContent()}
+  >
+    <Button>Get Alert</Button>
+  </SimpleAlertDialog>
+);
+
+function DialogContent() {
+  return (
+    <YStack space>
+      <AlertDialog.Title>Accept Condition</AlertDialog.Title>
+      <AlertDialog.Description>you will accept out terms</AlertDialog.Description>
+      <XStack space="$3" jc="flex-end">
+        <AlertDialog.Cancel asChild>
+          <Button>no</Button>
+        </AlertDialog.Cancel>
+        <AlertDialog.Action asChild>
+          <Button theme="active">yes</Button>
+        </AlertDialog.Action>
+      </XStack>
+    </YStack>
+  );
+}
 export default meta;

package/src/panels/SimpleAlertDialog/index.tsx

@@ -7,6 +7,7 @@ import type {
   AlertDialogProps,
   AlertDialogTitleProps,
   AlertDialogTriggerProps,
+  ButtonProps,
 } from 'tamagui';
 
 export type AlterDialogSimpleProps = AlertDialogTriggerProps &
@@ -22,7 +23,7 @@ export type AlterDialogSimpleProps = AlertDialogTriggerProps &
     contentStyle?: AlertDialogContentProps;
     onOpenChange?: (open: boolean) => void;
     onAccept?: () => void;
-  };
+  } & { buttonStyle?: ButtonProps } & { customContent?: JSX.Element | undefined };
 
 export function SimpleAlertDialog({
   children,
@@ -34,6 +35,8 @@ export function SimpleAlertDialog({
   contentStyle,
   descriptionStyle,
   open,
+  buttonStyle,
+  customContent,
   ...triggerProps
 }: AlterDialogSimpleProps) {
   const [isOpen, setIsOpen] = React.useState(open);
@@ -71,18 +74,24 @@ export function SimpleAlertDialog({
           y={0}
           {...contentStyle}
         >
-          <YStack space>
-            {title && <AlertDialog.Title>{title}</AlertDialog.Title>}
-            {description && <AlertDialog.Description>{description}</AlertDialog.Description>}
-            <XStack space="$3" jc="flex-end">
-              <AlertDialog.Cancel asChild>
-                <Button>{cancel || 'cancel'}</Button>
-              </AlertDialog.Cancel>
-              <AlertDialog.Action asChild onPress={triggerProps.onAccept}>
-                <Button theme="active">{accept || 'accept'}</Button>
-              </AlertDialog.Action>
-            </XStack>
-          </YStack>
+          {customContent ? (
+            customContent
+          ) : (
+            <YStack space>
+              {title && <AlertDialog.Title>{title}</AlertDialog.Title>}
+              {description && <AlertDialog.Description>{description}</AlertDialog.Description>}
+              <XStack space="$3" jc="flex-end">
+                <AlertDialog.Cancel asChild>
+                  <Button {...buttonStyle}>{cancel || 'cancel'}</Button>
+                </AlertDialog.Cancel>
+                <AlertDialog.Action asChild onPress={triggerProps.onAccept}>
+                  <Button theme="active" {...buttonStyle}>
+                    {accept || 'accept'}
+                  </Button>
+                </AlertDialog.Action>
+              </XStack>
+            </YStack>
+          )}
         </AlertDialog.Content>
       </AlertDialog.Portal>
     </AlertDialog>

package/src/panels/SimplePopover/SimplePopover.stories.tsx

@@ -1,6 +1,6 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { SimplePopover } from './index';
-import { Text, YStack, Button } from 'tamagui';
+import { Text, YStack, Button, XStack, Switch, Input, Label } from 'tamagui';
 import type { Meta } from '@storybook/react';
 
 const meta: Meta = {
@@ -16,4 +16,82 @@ export const main = () => (
     </YStack>
   </SimplePopover>
 );
+
+export const closeOnHoverOut = () => (
+  <SimplePopover trigger={<Button>click here</Button>} closeOnHoverOut>
+    <YStack>
+      <Text>popover content will close on hoverOut</Text>
+    </YStack>
+  </SimplePopover>
+);
+
+function Open() {
+  return (
+    <SimplePopover
+      trigger={<Button>hover on it to get Popover</Button>}
+      triggerOnHover
+      arrow={false}
+      triggerStyle={{ als: 'center', ai: 'center' }}
+    >
+      <YStack>
+        {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((i) => (
+          <Text key={i}>{i}</Text>
+        ))}
+      </YStack>
+    </SimplePopover>
+  );
+}
+
+export const openOnHover = () => (
+  <XStack jc="space-around">
+    <Open />
+    <Open />
+  </XStack>
+);
+
+const OnCondition = (props) => {
+  const [open, setOpen] = useState(false);
+  return (
+    <YStack space>
+      <Label>change the switch to get popover</Label>
+      <Switch checked={props.open} onCheckedChange={setOpen} />
+      <SimplePopover open={open} onOpenChange={setOpen} trigger={<Button>Popup will open here</Button>}>
+        <Text>Conditional popover</Text>
+      </SimplePopover>
+    </YStack>
+  );
+};
+
+export const openOnChangingTheCondition = (args) => <OnCondition {...args} />;
+
+const ConditionalPopover = () => {
+  const [open, setOpen] = useState(false);
+  const [inputVal, setInputVal] = useState('');
+
+  function handleInput(val) {
+    if (val === 'show') setOpen(true);
+    else setOpen(false);
+    setInputVal(val);
+  }
+
+  return (
+    <YStack space>
+      <SimplePopover
+        open={open}
+        onOpenChange={setOpen}
+        triggerElement={
+          <YStack>
+            <Input value={inputVal} onChangeText={handleInput} placeholder="type show to get popup" />
+          </YStack>
+        }
+        arrow={true}
+      >
+        <Text>Conditional popover</Text>
+      </SimplePopover>
+    </YStack>
+  );
+};
+
+export const openOnAnyCondition = (args) => <ConditionalPopover {...args} />;
+
 export default meta;

package/src/panels/SimplePopover/index.tsx

@@ -1,21 +1,89 @@
-import type { PopoverProps, PopoverContentProps, PopoverArrowProps } from 'tamagui';
-import { Adapt, Popover } from 'tamagui';
+import type {
+  PopoverProps,
+  PopoverContentProps,
+  PopoverArrowProps,
+  YStackProps,
+  TamaguiElement,
+  StackProps,
+} from 'tamagui';
+import { Adapt, Popover, PopperAnchor, View, getState, useComposedRefs, usePopoverContext } from 'tamagui';
 import React from 'react';
 import type { ReactNode } from 'react';
+import { YStack } from 'tamagui';
 
-export type SimplePopoverProps = PopoverProps & {
+export interface PopoverCustomProps {
   contentStyle?: PopoverContentProps;
   arrowStyle?: PopoverArrowProps;
+  triggerStyle?: YStackProps;
+  triggerOnHover?: boolean;
+  closeOnHoverOut?: boolean;
+  arrow?: boolean;
+  open?: boolean;
+  setOpen?: (open: boolean) => void;
+}
+
+export interface PopoverTriggerProps {
   trigger: ReactNode;
-};
+}
+
+export interface PopoverOpen {
+  triggerElement: ReactNode;
+}
+
+export type ExclusiveTriggerProps = PopoverTriggerProps | PopoverOpen;
+
+export type SimplePopoverProps = PopoverProps & PopoverCustomProps & ExclusiveTriggerProps;
+
+export const SimplePopoverTrigger = React.forwardRef<TamaguiElement, StackProps>((props: StackProps, forwardedRef) => {
+  const context = usePopoverContext();
+  const composedTriggerRef = useComposedRefs(forwardedRef, context.triggerRef);
+
+  const trigger = (
+    <View
+      aria-haspopup="dialog"
+      aria-expanded={context.open}
+      data-state={getState(context.open)}
+      {...props}
+      ref={composedTriggerRef}
+    />
+  );
+
+  return context.hasCustomAnchor ? trigger : <PopperAnchor asChild>{trigger}</PopperAnchor>;
+});
+
+export function SimplePopover({
+  children,
+  contentStyle,
+  triggerStyle,
+  arrowStyle,
+  arrow = true,
+  triggerOnHover,
+  closeOnHoverOut,
+  ...props
+}: SimplePopoverProps) {
+  const [open, setOpen] = React.useState(false);
+  const trigger = 'trigger' in props;
 
-export function SimplePopover({ children, trigger, contentStyle, arrowStyle, ...props }: SimplePopoverProps) {
   return (
-    <Popover size="$5" allowFlip {...props}>
-      <Popover.Trigger asChild>{trigger}</Popover.Trigger>
+    <Popover size="$5" allowFlip open={open} onOpenChange={setOpen} {...props}>
+      {trigger && props.trigger && (
+        <Popover.Trigger asChild>
+          {triggerOnHover ? (
+            <YStack onHoverIn={() => setOpen(true)} onHoverOut={() => setOpen(false)} {...triggerStyle}>
+              {props.trigger}
+            </YStack>
+          ) : (
+            props.trigger
+          )}
+        </Popover.Trigger>
+      )}
+      {!trigger && 'triggerElement' in props && 'open' in props && (
+        <SimplePopoverTrigger asChild>{props.triggerElement}</SimplePopoverTrigger>
+      )}
+
       <Adapt when="sm" platform="touch">
         <Popover.Sheet modal dismissOnSnapToBottom>
-          <Popover.Sheet.Frame padding="$4">
+          <Popover.Sheet.Frame padding="$4" onMouseEnter={() => setOpen(true)}>
             <Adapt.Contents />
           </Popover.Sheet.Frame>
           <Popover.Sheet.Overlay />
@@ -25,22 +93,29 @@ export function SimplePopover({ children, trigger, contentStyle, arrowStyle, ...
         borderWidth={1}
         borderColor="$borderColor"
         enterStyle={{ x: 0, y: -10, opacity: 0 }}
-        exitStyle={{ x: 0, y: -10, opacity: 0 }}
+        exitStyle={!triggerOnHover ? { x: 0, y: -10, opacity: 0 } : undefined}
         x={0}
         y={0}
         opacity={1}
-        animation={[
-          'quick',
-          {
-            opacity: {
-              overshootClamping: true,
-            },
-          },
-        ]}
+        animation={
+          !triggerOnHover
+            ? [
+                'quick',
+                {
+                  opacity: {
+                    overshootClamping: true,
+                  },
+                },
+              ]
+            : undefined
+        }
         elevate
+        onHoverIn={triggerOnHover ? () => setOpen(true) : undefined}
+        onHoverOut={triggerOnHover || closeOnHoverOut ? () => setOpen(false) : undefined}
+        zi={9999999999}
         {...contentStyle}
       >
-        <Popover.Arrow borderWidth={1} borderColor="$borderColor" />
+        {arrow && <Popover.Arrow borderWidth={1} borderColor="$borderColor" />}
         {children}
       </Popover.Content>
     </Popover>

package/src/panels/SimpleToast/SimpleToast.stories.tsx

@@ -0,0 +1,27 @@
+import { SimpleToast } from './index';
+import React from 'react';
+import { useToastController } from '@tamagui/toast';
+import { YStack, Button } from 'tamagui';
+
+export default {
+  title: 'panels/SimpleToast',
+  component: SimpleToast,
+  parameters: {
+    status: {
+      type: 'code',
+    },
+  },
+};
+
+const Main = () => {
+  const toastState = useToastController();
+
+  return (
+    <YStack>
+      <SimpleToast />
+      <Button onPress={() => toastState.show(JSON.stringify({ title: 'Hello', message: 'World' }))}>Add Toast</Button>
+    </YStack>
+  );
+};
+
+export const Default = () => <Main />;

package/src/panels/SimpleToast/index.tsx

@@ -0,0 +1,27 @@
+import { YStack } from 'tamagui';
+import { Toast, useToastState } from '@tamagui/toast';
+import React from 'react';
+
+export function SimpleToast() {
+  const currentToast = useToastState();
+
+  if (!currentToast || currentToast.isHandledNatively) return null;
+  return (
+    <Toast
+      key={currentToast.id}
+      duration={currentToast.duration}
+      enterStyle={{ opacity: 0, scale: 0.5, y: -25 }}
+      exitStyle={{ opacity: 0, scale: 1, y: -20 }}
+      y={0}
+      opacity={1}
+      scale={1}
+      // animation="100ms"
+      viewportName={currentToast.viewportName}
+    >
+      <YStack>
+        <Toast.Title>{currentToast.title}</Toast.Title>
+        {!!currentToast.message && <Toast.Description>{currentToast.message}</Toast.Description>}
+      </YStack>
+    </Toast>
+  );
+}