@multiplatform.one/components 2.0.23 → 3.0.0

package/src/organize/SimpleAccordion/SimpleAccordion.stories.tsx

@@ -32,36 +32,32 @@ export default {
   },
 };
 
-export const main = (args) => (
-  <SimpleAccordion {...args}>
-    <AccordionItem trigger={() => <Text>Trigger Apple </Text>} value="apple">
-      <YStack padding="$4">
-        <Text> Apple Content</Text>
-      </YStack>
-    </AccordionItem>
-    <AccordionItem trigger={() => <Text>Trigger Banana </Text>} value="banana">
-      <YStack padding="$4">
-        <Text>Banana Content</Text>
-      </YStack>
-    </AccordionItem>
-    <AccordionItem
-      trigger={(open) => (
-        <XStack>
-          <YStack animation="quick" rotate={open ? '90deg' : '0deg'}>
-            <ChevronRight />
-          </YStack>
-          <H5 color="$color10">Folders</H5>
-        </XStack>
-      )}
-      value="orange"
-    >
-      <YStack padding="$4">
-        <Text>Orange Content</Text>
-      </YStack>
-    </AccordionItem>
-    <Accordion.Item value="pipe">
-      <Accordion.Trigger flexDirection="row" justifyContent="space-between">
-        {({ open }) => (
+export const main = (args) => {
+  return <SimpleAccordion {...args}>{args.children}</SimpleAccordion>;
+};
+
+const mainArgs = {
+  defaultValue: [],
+  onValueChange: (value) => console.log('Expanded items:', value),
+  collapsible: true,
+  disabled: false,
+  overflow: 'visible',
+  type: 'multiple',
+
+  children: (
+    <SimpleAccordion>
+      <AccordionItem trigger={() => <Text>Trigger Apple </Text>} value="apple">
+        <YStack padding="$4">
+          <Text> Apple Content</Text>
+        </YStack>
+      </AccordionItem>
+      <AccordionItem trigger={() => <Text>Trigger Banana </Text>} value="banana">
+        <YStack padding="$4">
+          <Text>Banana Content</Text>
+        </YStack>
+      </AccordionItem>
+      <AccordionItem
+        trigger={(open) => (
           <XStack>
             <YStack animation="quick" rotate={open ? '90deg' : '0deg'}>
               <ChevronRight />
@@ -69,12 +65,30 @@ export const main = (args) => (
             <H5 color="$color10">Folders</H5>
           </XStack>
         )}
-      </Accordion.Trigger>
-      <Accordion.Content>
+        value="orange"
+      >
         <YStack padding="$4">
           <Text>Orange Content</Text>
         </YStack>
-      </Accordion.Content>
-    </Accordion.Item>
-  </SimpleAccordion>
-);
+      </AccordionItem>
+      <Accordion.Item value="pipe">
+        <Accordion.Trigger flexDirection="row" justifyContent="space-between">
+          {({ open }) => (
+            <XStack>
+              <YStack animation="quick" rotate={open ? '90deg' : '0deg'}>
+                <ChevronRight />
+              </YStack>
+              <H5 color="$color10">Folders</H5>
+            </XStack>
+          )}
+        </Accordion.Trigger>
+        <Accordion.Content>
+          <YStack padding="$4">
+            <Text>Orange Content</Text>
+          </YStack>
+        </Accordion.Content>
+      </Accordion.Item>
+    </SimpleAccordion>
+  ),
+};
+main.args = mainArgs;

package/src/organize/SimpleCarousel/Carousel.stories.tsx

@@ -18,7 +18,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { SimpleCarousel } from './index';
+import { SimpleCarousel, CarouselProps } from './index';
 import React from 'react';
 import { SimpleImage } from '../../images/SimpleImage';
 
@@ -35,11 +35,17 @@ export default {
 const mail = require('../../../assets/mail.png');
 const pentagon = require('../../../assets/pentagon.svg');
 
-export const Main = () => (
-  <SimpleCarousel speed={5000} defaultSlide={4}>
+export const Main = (args: CarouselProps) => (
+  <SimpleCarousel speed={args.speed} {...args} defaultSlide={4}>
     <SimpleImage src={mail} height={300} resizeMode="cover" />
     <SimpleImage src={pentagon} height={300} resizeMode="cover" />
     <SimpleImage src={mail} height={300} resizeMode="cover" />
     <SimpleImage src={pentagon} height={300} resizeMode="cover" />
   </SimpleCarousel>
 );
+
+Main.args = {
+  speed: 3000,
+  showCenterIndicator: true,
+  showSideArrows: true,
+};

package/src/organize/SimpleCarousel/index.tsx

@@ -24,7 +24,7 @@ import React, { useEffect, useState, useRef } from 'react';
 import { ChevronLeft, ChevronRight } from '@tamagui/lucide-icons';
 import type { IconProps } from '@tamagui/helpers-icon';
 
-type CarouselProps = YStackProps & {
+export type CarouselProps = YStackProps & {
   children: React.ReactNode;
   speed?: number;
   showCenterIndicator?: boolean;

package/src/organize/SimpleInput/SimpleInput.stories.tsx

@@ -1,47 +1,35 @@
-/**
- * File: /src/organize/SimpleInput/SimpleInput.stories.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 React from 'react';
-import { SimpleInput } from '.';
-import { YStack } from 'tamagui';
-import { Key, Eye } from '@tamagui/lucide-icons';
+import { SimpleInput, SimpleInputProps } from '.';
+import type { Meta } from '@storybook/react';
 
-export default {
+const meta: Meta = {
   title: 'organize/SimpleInput',
   component: SimpleInput,
   parameters: { status: { type: 'beta' } },
+  argTypes: {
+    inputType: {
+      control: {},
+    },
+  },
+};
+
+export const main = (args: SimpleInputProps) => <SimpleInput {...args} />;
+
+const mainArgs: SimpleInputProps = {
+  inputType: 'TEXT',
 };
 
-export const password = () => (
-  <YStack justifyContent="center" alignItems="center">
-    <SimpleInput password size="$3" iconAfter={Key} passwordWithoutIcon />
-  </YStack>
-);
+main.args = mainArgs;
+
+export const passwordInputType = (args: SimpleInputProps) => <SimpleInput {...args} />;
 
-export const iconBefore = () => <SimpleInput password width={800} height={50} iconBefore={Key} />;
+const passwordInputTypeArgs: SimpleInputProps = {
+  inputType: 'PASSWORD',
+  secureTextEntry: true,
+};
 
-export const iconAfter = () => (
-  <SimpleInput width={250} height={50} iconAfter={Eye} placeholder="icon after input box" />
-);
+passwordInputType.args = passwordInputTypeArgs;
 
-export const circular = () => <SimpleInput placeholder="icon after input box" circular password />;
+main.args = mainArgs;
 
-export const passwordWithoutIcon = () => <SimpleInput password passwordWithoutIcon />;
+export default meta;

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} />;