@multiplatform.one/components 2.0.24 → 4.0.0

package/src/organize/SimpleInput/index.tsx

@@ -1,187 +1,46 @@
-/**
- * File: /src/organize/SimpleInput/index.tsx
- * Project: @multiplatform.one/components
- * File Created: 18-10-2023 15:23:17
- * Author: Lalit rajak
- * -----
- * BitSpur (c) Copyright 2021 - 2023
- *
- * 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, { useEffect } from 'react';
-import type { ButtonProps, ColorTokens, InputProps, SizeTokens, ThemeTokens, XStackProps } from 'tamagui';
-import type { IconProps } from '@tamagui/helpers-icon';
+import type { ButtonProps, InputProps, XStackProps } from 'tamagui';
 import { Button, Input, XGroup, XStack } from 'tamagui';
 import { Eye, EyeOff } from '@tamagui/lucide-icons';
 
-export interface BaseIconProps {
-  size?: number | SizeTokens;
-  strokeWidth?: number | SizeTokens;
-  color?: (ColorTokens | ThemeTokens | (string & {})) | null;
-  disableTheme?: boolean;
-  style?: any;
-}
-
-interface CustomProps {
-  password?: boolean;
-  iconBefore?: React.NamedExoticComponent<IconProps>;
-  iconAfter?: React.NamedExoticComponent<IconProps>;
-  iconStyle?: ButtonProps;
-  circular?: boolean;
-  iconBeforeScale?: number;
-  iconAfterScale?: number;
-  iconPasswordScale?: number;
-  iconsAsButton?: boolean;
-  iconBeforeAsButton?: boolean;
-  iconAfterAsButton?: boolean;
-  passwordWithoutIcon?: boolean;
-}
-
-export type SimpleInputProps = Omit<InputProps & CustomProps & XStackProps, 'ref'>;
+export type SimpleInputProps = InputProps & {
+  inputType?: 'EMAIL' | 'TEXT' | 'PASSWORD';
+  xStackProps?: XStackProps;
+  buttonProps?: ButtonProps;
+};
 
-export function SimpleInput({
-  value,
-  size,
-  password,
-  iconBefore,
-  iconAfter,
-  height,
-  width,
-  iconStyle,
-  circular,
-  placeholder,
-  iconAfterScale,
-  iconBeforeScale,
-  iconPasswordScale,
-  iconAfterAsButton,
-  iconBeforeAsButton,
-  iconsAsButton,
-  passwordWithoutIcon,
-  paddingHorizontal,
-  onChangeText,
-  ...props
-}: SimpleInputProps) {
-  const [show, setShow] = React.useState(false);
-  const [inputValue, setInputValue] = React.useState<string | undefined>(value ?? '');
-  const [borderWidth, setBorderWidth] = React.useState(1);
-  const [secureTextEntry, setSecureTextEntry] = React.useState(password);
-  const totalIcons = (iconBefore ? 1 : 0) + (iconAfter || (password && !passwordWithoutIcon) ? 1 : 0);
-  const inputValuePadding = iconBefore ? 0 : 24;
-  const iconPercentage = totalIcons === 1 ? '20%' : totalIcons === 2 ? '10%' : undefined;
-  const inputPercentage = iconPercentage ? '80%' : '100%';
-
-  useEffect(() => {
-    if (!inputValue) return;
-    if (onChangeText) onChangeText(inputValue);
-  }, [inputValue]);
+export function SimpleInput({ inputType = 'TEXT', xStackProps, buttonProps, ...props }: SimpleInputProps) {
+  const [hideText, setHideText] = React.useState<boolean>(
+    props?.secureTextEntry || inputType === 'PASSWORD' ? true : false,
+  );
+  const [isValidText, setIsValidText] = React.useState<boolean>(true);
 
   useEffect(() => {
-    if (!password) return;
-    if (show) {
-      setSecureTextEntry(!!false);
-      return;
+    props.secureTextEntry ? setHideText(true) : setHideText(false);
+  }, [props.secureTextEntry]);
+
+  const handleInputChange = (text: string) => {
+    if (inputType === 'EMAIL') {
+      const emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
+      if (!emailPattern.test(text)) {
+        setIsValidText(false);
+        return;
+      } else {
+        setIsValidText(true);
+      }
+    } else {
+      setIsValidText(true);
     }
-    if (!show && password) {
-      setSecureTextEntry(!!true);
-      return;
-    }
-  }, [password, show]);
-
-  function handleValueChange(text: string) {
-    setInputValue(text);
-    if (onChangeText) onChangeText(text);
-  }
+  };
 
   return (
-    <XStack>
-      <XGroup
-        {...props}
-        height={size}
-        // @ts-ignore
-        borderRadius={circular ? 9999999 : props.borderRadius || size}
-        borderWidth={borderWidth}
-        borderColor="$backgroundFocus"
-        minHeight={height || '$5'}
-        width={width || '$20'}
-      >
-        {iconBefore && (
-          <Button
-            icon={iconBefore}
-            unstyled={!(iconsAsButton || iconBeforeAsButton)}
-            {...iconStyle}
-            justifyContent="center"
-            alignItems="center"
-            scaleIcon={iconBeforeScale}
-            width={iconPercentage}
-            height="100%"
-            padding={0}
-          />
-        )}
-        <Input
-          onChangeText={handleValueChange}
-          value={inputValue}
-          {...props}
-          size={size}
-          onFocus={(e) => {
-            setBorderWidth(2);
-            props.onFocus?.(e);
-          }}
-          onBlur={(e) => {
-            setBorderWidth(1);
-            props.onBlur?.(e);
-          }}
-          height="100%"
-          placeholder={placeholder}
-          width={inputPercentage}
-          paddingLeft={inputValuePadding}
-          paddingRight={inputValuePadding}
-          unstyled
-          borderWidth={0}
-          paddingHorizontal={paddingHorizontal}
-          secureTextEntry={secureTextEntry}
-        />
-        {!!password && !passwordWithoutIcon && (
-          <Button
-            icon={show ? Eye : EyeOff}
-            scaleIcon={iconPasswordScale}
-            height="100%"
-            {...iconStyle}
-            width={iconPercentage}
-            onPress={(e) => {
-              setShow((prev) => !prev);
-              setBorderWidth(2);
-              props.onPress?.(e);
-            }}
-            justifyContent="center"
-            alignItems="center"
-            padding={0}
-          />
-        )}
-        {!!iconAfter && (!password || passwordWithoutIcon) && (
-          <Button
-            icon={iconAfter}
-            {...iconStyle}
-            justifyContent="center"
-            alignItems="center"
-            scaleIcon={iconBeforeScale}
-            width={iconPercentage}
-            unstyled={!(iconsAsButton || iconAfterAsButton)}
-            height="100%"
-            padding={0}
-          />
-        )}
-      </XGroup>
+    <XStack theme={isValidText ? 'system' : 'red'} space="$1" {...xStackProps}>
+      <Input {...props} secureTextEntry={hideText} onChangeText={handleInputChange} />
+      {inputType === 'PASSWORD' && (
+        <Button onPress={() => setHideText(!hideText)}>
+          <Button.Icon>{hideText ? <EyeOff /> : <Eye />}</Button.Icon>
+        </Button>
+      )}
     </XStack>
   );
 }

package/src/organize/SimpleListItem/SimpleListItem.stories.tsx

@@ -20,10 +20,9 @@
  */
 
 import React from 'react';
-import { SimpleList, SimpleListItem } from './index';
+import { SimpleList, SimpleListItem, SimpleListProps, SimpleListItemProps } from './index';
 import { ChevronRight, Star } from '@tamagui/lucide-icons';
 import { Label, Separator, Switch, XStack, YStack } from 'tamagui';
-
 export default {
   title: 'organize/SimpleListItem',
   component: SimpleList,
@@ -32,8 +31,15 @@ export default {
   },
 };
 
-function Main() {
-  const [orientation, setOrientation] = React.useState(true);
+function Main(args: SimpleListProps & SimpleListItemProps) {
+  const [orientation, setOrientation] = React.useState(args.orientation === 'horizontal');
+  React.useEffect(() => {
+    if (args.orientation === 'horizontal') {
+      setOrientation(true);
+    } else {
+      setOrientation(false);
+    }
+  }, [args.orientation]);
   return (
     <YStack fullscreen>
       <XStack width={200} alignItems="center" gap="$4" alignSelf="flex-start">
@@ -41,11 +47,11 @@ function Main() {
           {orientation ? 'Horizontal' : 'Vertical'}
         </Label>
         <Separator minHeight={20} vertical />
-        <Switch size="$2" defaultChecked={orientation} onCheckedChange={setOrientation}>
+        <Switch size="$2" checked={orientation} onCheckedChange={setOrientation}>
           <Switch.Thumb animation="quick" />
         </Switch>
       </XStack>
-      <SimpleList orientation={orientation ? 'horizontal' : 'vertical'}>
+      <SimpleList orientation={args.orientation}>
         <SimpleListItem title="hello" icon={Star} subTitle="how are you" iconAfter={ChevronRight} width={200} />
         <SimpleListItem title="hello" icon={Star} subTitle="how are you" iconAfter={ChevronRight} width={200} />
         <SimpleListItem title="hello" icon={Star} subTitle="how are you" iconAfter={ChevronRight} width={200} />
@@ -56,4 +62,8 @@ function Main() {
   );
 }
 
-export const main = () => <Main />;
+export const main = (args: SimpleListProps & SimpleListItemProps) => <Main {...args} />;
+
+main.args = {
+  orientation: 'horizontal',
+};

package/src/organize/SimpleListItem/index.tsx

@@ -23,8 +23,8 @@ import type { ListItemProps, YStackProps } from 'tamagui';
 import { YGroup, ListItem, XGroup } from 'tamagui';
 import React, { useMemo } from 'react';
 
-type SimpleListProps = YStackProps & { orientation?: 'horizontal' | 'vertical'; bg?: any };
-type SimpleListItemProps = ListItemProps & {};
+export type SimpleListProps = YStackProps & { orientation?: 'horizontal' | 'vertical'; bg?: any };
+export type SimpleListItemProps = ListItemProps & {};
 
 const ListContext = React.createContext<SimpleListProps | null>(null);
 

package/src/organize/SimpleTabs/SimpleTabs.stories.tsx

@@ -22,6 +22,7 @@
 import React from 'react';
 import { SimpleTabs, TabsList, TabsContent } from './index';
 import { H5, SizableText, Tabs, Separator, YStack, Switch, XStack, Text } from 'tamagui';
+import { SimpleTabsProps } from './index';
 
 export default {
   title: 'organize/SimpleTabs',
@@ -33,24 +34,28 @@ export default {
   },
 };
 
-const Main = () => {
-  const [orientation, setOrientation] = React.useState<'horizontal' | 'vertical'>('horizontal');
+export const Main = (args: SimpleTabsProps) => {
+  const [orientation, setOrientation] = React.useState(args.orientation === 'horizontal');
   const [isHorizontal, setIsHorizontal] = React.useState(true);
 
   React.useEffect(() => {
-    setOrientation(isHorizontal ? 'horizontal' : 'vertical');
-  }, [isHorizontal]);
+    if (args.orientation === 'horizontal') {
+      setOrientation(true);
+    } else {
+      setOrientation(false);
+    }
+  }, [args.orientation]);
 
   return (
     <YStack gap padding="$4">
       <XStack gap>
-        <Switch size="$3" checked={isHorizontal} onCheckedChange={setIsHorizontal}>
+        <Switch size="$3" checked={orientation} onCheckedChange={setIsHorizontal}>
           <Switch.Thumb animation="bouncy" />
         </Switch>
-        <Text>{orientation}</Text>
+        <Text>{orientation ? 'Horizontal' : 'Vertical'}</Text>
       </XStack>
-      <SimpleTabs orientation={orientation} defaultValue="home">
-        <TabsList justifyContent="space-between" orientation={orientation}>
+      <SimpleTabs orientation={orientation ? 'horizontal' : 'vertical'} defaultValue="home">
+        <TabsList justifyContent="space-between" orientation={orientation ? 'horizontal' : 'vertical'}>
           <Tabs.Tab value="home" flex={1}>
             <SizableText textAlign="center">Home</SizableText>
           </Tabs.Tab>
@@ -61,7 +66,7 @@ const Main = () => {
             <SizableText textAlign="center">Contact</SizableText>
           </Tabs.Tab>
         </TabsList>
-        <Separator vertical={orientation === 'vertical'} />
+        <Separator vertical={!orientation} />
         <TabsContent value="home">
           <H5>Home</H5>
         </TabsContent>
@@ -76,4 +81,11 @@ const Main = () => {
   );
 };
 
-export const main = () => <Main />;
+export const main = (args) => {
+  return <Main {...args} />;
+};
+
+const mainArgs = {
+  orientation: 'horizontal',
+};
+main.args = mainArgs;

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

@@ -21,32 +21,41 @@
 
 import React from 'react';
 import { SimpleAlertDialog } from './index';
-import type { Meta } from '@storybook/react';
 import { AlertDialog, Button, XStack, YStack } from 'tamagui';
+import type { AlterDialogSimpleProps } from './index';
 
-const meta: Meta = {
+export default {
   title: 'panels/SimpleAlertDialog',
   component: SimpleAlertDialog,
   parameters: { status: { type: 'beta' } },
 };
 
-export const Main = () => (
+export const main = (args) => (
   <SimpleAlertDialog
     title="Are you sure?"
     description="This action cannot be undone"
     cancel="Cancel"
     accept="Delete"
     trigger={<Button>Get Alert</Button>}
+    {...args}
   />
 );
 
-export const Custom = () => (
+const mainArgs: AlterDialogSimpleProps = {
+  title: 'Are you sure?',
+  description: 'This action cannot be undone',
+  cancel: 'Cancel',
+  accept: 'Delete',
+};
+main.args = mainArgs;
+export const Custom = (args) => (
   <SimpleAlertDialog
     title="Are you sure?"
-    description="This action cannot be undone"
     cancel="Cancel"
     accept="Yes, Delete"
     trigger={<Button>Get Alert</Button>}
+    {...mainArgs}
+    {...args}
   >
     <YStack gap width={400}>
       <AlertDialog.Title>Custom Alert</AlertDialog.Title>
@@ -63,7 +72,7 @@ export const Custom = () => (
   </SimpleAlertDialog>
 );
 
-const Open = () => {
+const Open = (args) => {
   const [open, setOpen] = React.useState(true);
   return (
     <YStack>
@@ -74,12 +83,11 @@ const Open = () => {
         accept="Yes, Delete"
         open={open}
         onOpenChange={setOpen}
+        {...args}
       />
       <Button onPress={() => setOpen((prev) => !prev)}>{open ? 'close' : 'open'}</Button>
     </YStack>
   );
 };
 
-export const OpenClose = () => <Open />;
-
-export default meta;
+export const OpenClose = (args) => <Open {...mainArgs} {...args} />;

package/src/panels/SimpleDialog/SimpleDialog.stories.tsx

@@ -25,6 +25,7 @@ import { Button, Input, Dialog, YStack } from 'tamagui';
 import { SimpleDialog } from './index';
 import { action } from '@storybook/addon-actions';
 import { Text } from 'tamagui';
+import type { SimpleDialogProps } from './index';
 
 const meta: Meta = {
   title: 'panels/SimpleDialog',
@@ -32,12 +33,13 @@ const meta: Meta = {
   parameters: { status: { type: 'beta' } },
 };
 
-export const main = () => (
+export const main = (args) => (
   <SimpleDialog
     onOpenChange={action('onOpenChange')}
     trigger={<Button>Press Me</Button>}
     title="Fill the details"
     withoutCloseButton
+    {...args}
   >
     <Input placeholder="Enter your first name" />
     <Input placeholder="Enter your last name" />
@@ -46,6 +48,12 @@ export const main = () => (
     </Dialog.Close>
   </SimpleDialog>
 );
+const mainArgs: SimpleDialogProps = {
+  // title: 'Simple Dialog Example',
+  description: 'This is a simple dialog example.',
+  withoutCloseButton: false,
+};
+main.args = mainArgs;
 
 function OpenWithFunction() {
   const [open, setOpen] = useState(false);
@@ -72,7 +80,9 @@ function OpenWithFunction() {
     </YStack>
   );
 }
-export const openWithFunction = () => <OpenWithFunction />;
+export const openWithFunction = (args) => <OpenWithFunction {...args} />;
+
+openWithFunction.args = mainArgs;
 
 export default meta;
 
@@ -84,11 +94,15 @@ export const customPosition = (args) => (
     portalStyle={{ jc: 'flex-start', paddingTop: 10 }}
   >
     <YStack width={800} height={400}>
-      <Input placeholder="search" />
+      <Input placeholder={args.search} />
     </YStack>
   </SimpleDialog>
 );
 
+customPosition.args = {
+  search: 'search',
+};
+
 export const rightSideDialog = (args) => (
   <SimpleDialog
     trigger={<Button>open side dialog</Button>}
@@ -107,6 +121,12 @@ export const rightSideDialog = (args) => (
   </SimpleDialog>
 );
 
+rightSideDialog.args = {
+  asRightSideSheet: true,
+  contentStyle: { animation: 'quick' },
+  transitionWidth: 400,
+};
+
 export const leftSideDialog = (args) => (
   <SimpleDialog
     trigger={<Button>open side dialog</Button>}
@@ -124,3 +144,9 @@ export const leftSideDialog = (args) => (
     </YStack>
   </SimpleDialog>
 );
+
+leftSideDialog.args = {
+  asLeftSideSheet: true,
+  contentStyle: { animation: 'lazy' },
+  transitionWidth: 300,
+};

package/src/panels/SimpleDialog/index.tsx

@@ -137,7 +137,9 @@ export function SimpleDialog({
           })}
           {...contentStyle}
         >
-          {title && <Dialog.Title {...titleStyle}>{title}</Dialog.Title>}
+          <Dialog.Title disabled={!title} {...titleStyle}>
+            {title}
+          </Dialog.Title>
           {description && <Dialog.Description {...descriptionStyle}>{description}</Dialog.Description>}
           {children}
           {!withoutCloseButton && (

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

@@ -21,26 +21,25 @@
 
 import React, { useState } from 'react';
 import { SimplePopover } from './index';
-import { Text, YStack, XStack, Switch, Label, Button } from 'tamagui';
-import type { Meta } from '@storybook/react';
+import { Text, YStack, XStack, Switch, Label, Button, Input, Popover } from 'tamagui';
+import type { SimplePopoverProps } from './index';
 
-const meta: Meta = {
+export default {
   title: 'panels/SimplePopover',
   component: SimplePopover,
   parameters: { status: { type: 'beta' } },
 };
+export const main = (args) => (
+  <SimplePopover trigger={<Button>Click here to get a Popover</Button>} title="Popover content" {...args}>
+    <Text>Popover content</Text>
+  </SimplePopover>
+);
 
-function Hoverable() {
+function Hoverable(args) {
   const [hoverable, setHoverable] = useState(true);
   return (
     <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>}>
+      <SimplePopover hoverable={hoverable} trigger={<Button>Click here to get a Popover</Button>} {...args}>
         <YStack>
           <Text>popover content</Text>
         </YStack>
@@ -49,6 +48,4 @@ function Hoverable() {
   );
 }
 
-export const main = () => <Hoverable />;
-
-export default meta;
+export const hoverable = (args) => <Hoverable {...args} />;

package/src/panels/SimplePopover/index.tsx

@@ -1,26 +1,5 @@
-/**
- * File: /src/panels/SimplePopover/index.tsx
- * Project: @multiplatform.one/components
- * File Created: 13-10-2023 09:40:26
- * Author: Lalit rajak
- * -----
- * BitSpur (c) Copyright 2021 - 2023
- *
- * 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 type { PopoverArrowProps, PopoverContentProps, PopoverProps, PopoverTriggerProps } from 'tamagui';
-import { Adapt, Popover } from 'tamagui';
+import { Adapt, Button, Popover } from 'tamagui';
 import React from 'react';
 import type { ReactNode } from 'react';
 
@@ -29,8 +8,6 @@ export type SimplePopoverProps = PopoverProps & {
   arrowStyle?: PopoverArrowProps;
   triggerStyle?: PopoverTriggerProps;
   arrow?: boolean;
-  open?: boolean;
-  setOpen?: (open: boolean) => void;
   trigger: ReactNode;
 };
 
@@ -43,19 +20,19 @@ export function SimplePopover({
   trigger,
   ...props
 }: SimplePopoverProps) {
-  const [open, setOpen] = React.useState(false);
-
   return (
-    <Popover size="$5" allowFlip open={open} onOpenChange={setOpen} hoverable {...props}>
+    <Popover size="$5" allowFlip {...props}>
       <Popover.Trigger asChild {...triggerStyle}>
         {trigger}
       </Popover.Trigger>
-      <Adapt when={'sm' as any} platform="touch">
+      {/* @ts-ignore */}
+      <Adapt when="sm" platform="touch">
         <Popover.Sheet modal dismissOnSnapToBottom>
           <Popover.Sheet.Frame padding="$4">
             <Adapt.Contents />
           </Popover.Sheet.Frame>
-          <Popover.Sheet.Overlay />
+
+          <Popover.Sheet.Overlay animation="lazy" enterStyle={{ opacity: 0 }} exitStyle={{ opacity: 0 }} />
         </Popover.Sheet>
       </Adapt>
       <Popover.Content

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

@@ -23,12 +23,26 @@ import React from 'react';
 import { SimpleSheet } from './index';
 import type { Meta } from '@storybook/react';
 import { YStack, Button } from 'tamagui';
+import type { SimpleSheetProps } from './index';
+import { action } from '@storybook/addon-actions';
 
 const meta: Meta = {
   title: 'panels/SimpleSheet',
   component: SimpleSheet,
   parameters: { status: { type: 'beta' } },
 };
+export const main = (args) => <SimpleSheet onSheetChange={action('onSheetChange')} {...args} />;
+const mainArgs: SimpleSheetProps = {
+  forceRemoveScrollEnabled: true,
+  modal: true,
+  open: true,
+  onOpenChange: () => {},
+  snapPoints: [0, 100],
+  dismissOnSnapToBottom: true,
+  position: 0,
+  onPositionChange: () => {},
+  zIndex: 100_000,
+};
 
 function Sheet() {
   const [open, setOpen] = React.useState(false);
@@ -43,5 +57,5 @@ function Sheet() {
   );
 }
 
-export const main = () => <Sheet />;
+// export const main = () => <Sheet />;
 export default meta;