@multiplatform.one/components 1.0.1 → 1.0.2

package/src/organize/SimpleTabs/index.tsx

@@ -19,100 +19,67 @@
  * limitations under the License.
  */
 
-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 React from 'react';
+import type { TabsProps, TabsContentProps, TabsListProps } 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 };
+export type SimpleTabsProps = TabsProps;
 
-interface SimpleTabsContextProps extends PropsWithChildren {
-  orientation: 'horizontal' | 'vertical' | undefined;
-  width: SizeTokens | ThemeValueFallback | undefined;
+export function SimpleTabs({ ...props }: SimpleTabsProps) {
+  if (props.orientation === 'vertical') return <VerticalTabs {...props} />;
+  return <HorizontalTabs {...props} />;
 }
 
-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]);
-
+function HorizontalTabs({ children, ...props }: SimpleTabsProps) {
   return (
-    // TODO: Fix this type
-    <SimpleTabsContext.Provider value={contextValue as any}>
-      <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>
+    <Tabs
+      flexDirection="column"
+      width={400}
+      height={150}
+      borderRadius="$4"
+      borderWidth="$0.25"
+      overflow="hidden"
+      borderColor="$borderColor"
+      {...props}
+      orientation="horizontal"
+    >
+      {children}
+    </Tabs>
   );
 }
 
-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]);
-
+function VerticalTabs({ children, ...props }: SimpleTabsProps) {
   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>
+    <Tabs
+      flexDirection="row"
+      width={400}
+      borderRadius="$4"
+      borderWidth="$0.25"
+      overflow="hidden"
+      borderColor="$borderColor"
+      {...props}
+      orientation="vertical"
+    >
+      {children}
+    </Tabs>
   );
 }
 
-export function TabContent({ route, ...props }: ContentProps) {
+export function TabsContent(props: TabsContentProps) {
   return (
     <Tabs.Content
       backgroundColor="$background"
-      key={route}
+      key="tab3"
       padding="$2"
+      alignItems="center"
+      justifyContent="center"
       flex={1}
       borderColor="$background"
       borderRadius="$2"
       borderTopLeftRadius={0}
       borderTopRightRadius={0}
       borderWidth="$2"
-      value={route}
       {...props}
     >
       {props.children}
@@ -120,22 +87,15 @@ export function TabContent({ route, ...props }: ContentProps) {
   );
 }
 
-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;
-
+export function TabsList(props: TabsListProps) {
   return (
-    <Tabs.Tab
-      key={path}
-      f={orientation === 'horizontal' || (orientation === 'vertical' && fullHeight) ? 1 : 0}
-      value={path}
+    <Tabs.List
+      separator={<Separator vertical={props.orientation === 'horizontal'} />}
+      disablePassBorderRadius={props.orientation === 'horizontal' ? 'bottom' : 'end'}
+      aria-label="Manage your account"
       {...props}
     >
-      {typeof props.children === 'string' ? <SizableText>{props.children}</SizableText> : props.children}
-    </Tabs.Tab>
+      {props.children}
+    </Tabs.List>
   );
 }

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

@@ -1,3 +1,24 @@
+/**
+ * File: /src/panels/SimpleAlertDialog/SimpleAlertDialog.stories.tsx
+ * Project: @multiplatform.one/components
+ * File Created: 25-01-2024 09:49:47
+ * Author: Lalit rajak
+ * -----
+ * BitSpur (c) Copyright 2021 - 2024
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
 import React from 'react';
 import { SimpleAlertDialog } from './index';
 import type { Meta } from '@storybook/react';
@@ -9,55 +30,37 @@ const meta: Meta = {
   parameters: { status: { type: 'beta' } },
 };
 
-export const ConditionalOpen = () => (
+export const Main = () => (
   <SimpleAlertDialog
     title="Are you sure?"
     description="This action cannot be undone"
     cancel="Cancel"
     accept="Delete"
-    onAccept={() => alert('Accepted')}
+    trigger={<Button>Get Alert</Button>}
   />
 );
 
-export const main = () => (
-  <SimpleAlertDialog
-    title="Are you sure?"
-    description="This action cannot be undone"
-    cancel="Cancel"
-    accept="Yes, Delete"
-    onAccept={() => alert('accepted')}
-  >
-    <Button>Get Alert</Button>
-  </SimpleAlertDialog>
-);
-
-export const customContent = () => (
+export const Custom = () => (
   <SimpleAlertDialog
     title="Are you sure?"
     description="This action cannot be undone"
     cancel="Cancel"
     accept="Yes, Delete"
-    onAccept={() => alert('accepted')}
-    customContent={DialogContent()}
+    trigger={<Button>Get Alert</Button>}
   >
-    <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">
+    <YStack gap width={400}>
+      <AlertDialog.Title>Custom Alert</AlertDialog.Title>
+      <AlertDialog.Description>this is a custom alert</AlertDialog.Description>
+      <XStack gap="$3" jc="flex-end">
         <AlertDialog.Cancel asChild>
-          <Button>no</Button>
+          <Button>cancel</Button>
         </AlertDialog.Cancel>
         <AlertDialog.Action asChild>
-          <Button theme="active">yes</Button>
+          <Button theme="active">ok</Button>
         </AlertDialog.Action>
       </XStack>
     </YStack>
-  );
-}
+  </SimpleAlertDialog>
+);
+
 export default meta;

package/src/panels/SimpleAlertDialog/index.tsx

@@ -1,3 +1,24 @@
+/**
+ * File: /src/panels/SimpleAlertDialog/index.tsx
+ * Project: @multiplatform.one/components
+ * File Created: 25-01-2024 09:49:47
+ * Author: Lalit rajak
+ * -----
+ * BitSpur (c) Copyright 2021 - 2024
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
 import React from 'react';
 import type { ReactNode } from 'react';
 import { AlertDialog, Button, XStack, YStack } from 'tamagui';
@@ -8,6 +29,7 @@ import type {
   AlertDialogTitleProps,
   AlertDialogTriggerProps,
   ButtonProps,
+  AlertDialogActionProps,
 } from 'tamagui';
 
 export type AlterDialogSimpleProps = AlertDialogTriggerProps &
@@ -22,8 +44,8 @@ export type AlterDialogSimpleProps = AlertDialogTriggerProps &
     descriptionStyle?: AlertDialogDescriptionProps;
     contentStyle?: AlertDialogContentProps;
     onOpenChange?: (open: boolean) => void;
-    onAccept?: () => void;
-  } & { buttonStyle?: ButtonProps } & { customContent?: JSX.Element | undefined };
+    actionStyle?: AlertDialogActionProps;
+  } & { buttonStyle?: ButtonProps } & { trigger: JSX.Element | undefined };
 
 export function SimpleAlertDialog({
   children,
@@ -36,22 +58,13 @@ export function SimpleAlertDialog({
   descriptionStyle,
   open,
   buttonStyle,
-  customContent,
-  ...triggerProps
+  trigger,
+  actionStyle,
+  ...props
 }: AlterDialogSimpleProps) {
-  const [isOpen, setIsOpen] = React.useState(open);
-
   return (
-    <AlertDialog
-      native
-      {...triggerProps}
-      open={isOpen}
-      onOpenChange={(e) => {
-        if (triggerProps.onOpenChange) triggerProps.onOpenChange(e);
-        else setIsOpen(!isOpen);
-      }}
-    >
-      {typeof open === 'undefined' ? <AlertDialog.Trigger asChild>{children}</AlertDialog.Trigger> : null}
+    <AlertDialog native {...props}>
+      <AlertDialog.Trigger asChild>{trigger}</AlertDialog.Trigger>
       <AlertDialog.Portal>
         <AlertDialog.Overlay key="overlay" animation="quick" o={0.5} enterStyle={{ o: 0 }} exitStyle={{ o: 0 }} />
         <AlertDialog.Content
@@ -74,17 +87,17 @@ export function SimpleAlertDialog({
           y={0}
           {...contentStyle}
         >
-          {customContent ? (
-            customContent
+          {children ? (
+            children
           ) : (
-            <YStack space>
-              {title && <AlertDialog.Title>{title}</AlertDialog.Title>}
-              {description && <AlertDialog.Description>{description}</AlertDialog.Description>}
-              <XStack space="$3" jc="flex-end">
+            <YStack gap>
+              {title && <AlertDialog.Title {...titleStyle}>{title}</AlertDialog.Title>}
+              {description && <AlertDialog.Description {...descriptionStyle}>{description}</AlertDialog.Description>}
+              <XStack gap="$3" jc="flex-end">
                 <AlertDialog.Cancel asChild>
                   <Button {...buttonStyle}>{cancel || 'cancel'}</Button>
                 </AlertDialog.Cancel>
-                <AlertDialog.Action asChild onPress={triggerProps.onAccept}>
+                <AlertDialog.Action asChild {...actionStyle}>
                   <Button theme="active" {...buttonStyle}>
                     {accept || 'accept'}
                   </Button>

package/src/panels/SimpleDialog/index.tsx

@@ -86,7 +86,7 @@ export function SimpleDialog({
       {trigger && <Dialog.Trigger asChild>{trigger}</Dialog.Trigger>}
       <Adapt when="sm" platform="touch">
         <Sheet zIndex={200000} modal dismissOnSnapToBottom>
-          <Sheet.Frame padding="$4" space>
+          <Sheet.Frame padding="$4" gap>
             <Adapt.Contents />
           </Sheet.Frame>
           <Sheet.Overlay />
@@ -119,7 +119,7 @@ export function SimpleDialog({
           ]}
           enterStyle={{ x: 0, y: -150, opacity: 0, scale: 0.4 }}
           exitStyle={{ x: 0, y: -150, opacity: 0, scale: 0.4 }}
-          space
+          gap
           {...(asRightSideSheet && {
             enterStyle: { x: transitionWidth || 200, opacity: 0 },
             exitStyle: { x: transitionWidth || 200, opacity: 0 },
@@ -142,8 +142,8 @@ export function SimpleDialog({
           {children}
           {!withoutCloseButton && (
             <Unspaced>
-              <Dialog.Close asChild space>
-                <Button pos="absolute" t="$3" r="$3" size="$2" circular space icon={X} />
+              <Dialog.Close asChild gap>
+                <Button pos="absolute" t="$3" r="$3" size="$2" circular gap icon={X} />
               </Dialog.Close>
             </Unspaced>
           )}

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

@@ -30,60 +30,25 @@ const meta: Meta = {
   parameters: { status: { type: 'beta' } },
 };
 
-export const main = () => (
-  <SimplePopover trigger={<Button>Click here to get a Popover</Button>}>
-    <YStack>
-      <Text>popover content</Text>
-    </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' }}
-      closeOnHoverOut
-    >
-      <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);
+function Hoverable() {
+  const [hoverable, setHoverable] = useState(true);
   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>
+    <YStack>
+      <XStack gap padding="$4" alignItems="center">
+        <Label>Hoverable</Label>
+        <Switch size="$3" checked={hoverable} onCheckedChange={setHoverable}>
+          <Switch.Thumb animation="bouncy" />
+        </Switch>
+      </XStack>
+      <SimplePopover hoverable={hoverable} trigger={<Button>Click here to get a Popover</Button>}>
+        <YStack>
+          <Text>popover content</Text>
+        </YStack>
       </SimplePopover>
     </YStack>
   );
-};
+}
 
-export const openOnChangingTheCondition = (args) => <OnCondition {...args} />;
+export const main = () => <Hoverable />;
 
 export default meta;

package/src/panels/SimplePopover/index.tsx

@@ -28,8 +28,6 @@ export type SimplePopoverProps = PopoverProps & {
   contentStyle?: PopoverContentProps;
   arrowStyle?: PopoverArrowProps;
   triggerStyle?: PopoverTriggerProps;
-  triggerOnHover?: boolean;
-  closeOnHoverOut?: boolean;
   arrow?: boolean;
   open?: boolean;
   setOpen?: (open: boolean) => void;
@@ -42,35 +40,19 @@ export function SimplePopover({
   triggerStyle,
   arrowStyle,
   arrow = true,
-  triggerOnHover,
-  closeOnHoverOut,
   trigger,
   ...props
 }: SimplePopoverProps) {
   const [open, setOpen] = React.useState(false);
 
-  function handleHoverIn(e) {
-    if (!triggerOnHover) return;
-    setOpen(true);
-    if (contentStyle?.onHoverIn) contentStyle?.onHoverIn(e);
-    if (triggerStyle?.onHoverIn) triggerStyle.onHoverIn(e);
-  }
-
-  function handleHoverOut(e) {
-    if (!closeOnHoverOut) return;
-    setOpen(false);
-    if (contentStyle?.onHoverOut) contentStyle.onHoverOut(e);
-    if (triggerStyle?.onHoverOut) triggerStyle.onHoverOut(e);
-  }
-
   return (
-    <Popover size="$5" allowFlip open={open} onOpenChange={setOpen} {...props}>
-      <Popover.Trigger asChild {...triggerStyle} onHoverIn={handleHoverIn} onHoverOut={handleHoverOut}>
+    <Popover size="$5" allowFlip open={open} onOpenChange={setOpen} hoverable {...props}>
+      <Popover.Trigger asChild {...triggerStyle}>
         {trigger}
       </Popover.Trigger>
       <Adapt when="sm" platform="touch">
         <Popover.Sheet modal dismissOnSnapToBottom>
-          <Popover.Sheet.Frame padding="$4" onMouseEnter={() => setOpen(true)}>
+          <Popover.Sheet.Frame padding="$4">
             <Adapt.Contents />
           </Popover.Sheet.Frame>
           <Popover.Sheet.Overlay />
@@ -79,28 +61,18 @@ export function SimplePopover({
       <Popover.Content
         borderWidth={1}
         borderColor="$borderColor"
-        enterStyle={{ x: 0, y: -10, opacity: 0 }}
-        exitStyle={!triggerOnHover ? { x: 0, y: -10, opacity: 0 } : undefined}
-        x={0}
-        y={0}
-        opacity={1}
-        animation={
-          !triggerOnHover
-            ? [
-                'quick',
-                {
-                  opacity: {
-                    overshootClamping: true,
-                  },
-                },
-              ]
-            : undefined
-        }
+        enterStyle={{ y: -10, opacity: 0 }}
+        exitStyle={{ y: -10, opacity: 0 }}
         elevate
-        zi={9999999999}
+        animation={[
+          'quick',
+          {
+            opacity: {
+              overshootClamping: true,
+            },
+          },
+        ]}
         {...contentStyle}
-        onHoverIn={handleHoverIn}
-        onHoverOut={handleHoverOut}
       >
         {arrow && <Popover.Arrow borderWidth={1} borderColor="$borderColor" {...arrowStyle} />}
         {children}

package/src/panels/SimpleSheet/SimpleSheet.stories.tsx

@@ -1,14 +1,47 @@
+/**
+ * File: /src/panels/SimpleSheet/SimpleSheet.stories.tsx
+ * Project: @multiplatform.one/components
+ * File Created: 25-01-2024 09:49:47
+ * Author: Lalit rajak
+ * -----
+ * BitSpur (c) Copyright 2021 - 2024
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
 import React from 'react';
-// import { Text } from 'tamagui';
 import { SimpleSheet } from './index';
 import type { Meta } from '@storybook/react';
+import { YStack, Button } from 'tamagui';
 
 const meta: Meta = {
-  // export default {
   title: 'panels/SimpleSheet',
   component: SimpleSheet,
   parameters: { status: { type: 'beta' } },
 };
 
-export const main = () => <SimpleSheet modal>Click to test simpleSHeet</SimpleSheet>;
+function Sheet() {
+  const [open, setOpen] = React.useState(false);
+
+  return (
+    <YStack padding="$4" fullscreen>
+      <Button onPress={() => setOpen(true)}>open</Button>
+      <SimpleSheet open={open} onOpenChange={setOpen} modal>
+        Sheet Content
+      </SimpleSheet>
+    </YStack>
+  );
+}
+
+export const main = () => <Sheet />;
 export default meta;