@multiplatform.one/components 0.7.0 → 0.7.2

package/src/organize/SimpleInput/index.tsx

@@ -0,0 +1,189 @@
+/**
+ * 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 type { ButtonProps, ColorTokens, InputProps, SizeTokens, ThemeTokens, XStackProps } from 'tamagui';
+import { Button, Input, XGroup, XStack } from 'tamagui';
+import { Eye, EyeOff } from '@tamagui/lucide-icons';
+import React, { useEffect } from 'react';
+import type { SvgProps } from 'react-native-svg';
+
+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;
+}
+
+type IconProps = SvgProps & BaseIconProps;
+
+export type SimpleInputProps = Omit<InputProps & CustomProps & XStackProps, 'ref'>;
+
+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]);
+
+  useEffect(() => {
+    if (!password) return;
+    if (show) {
+      setSecureTextEntry(!!false);
+      return;
+    }
+    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}
+            jc="center"
+            ai="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);
+            }}
+            jc="center"
+            ai="center"
+            padding={0}
+          />
+        )}
+        {!!iconAfter && (!password || passwordWithoutIcon) && (
+          <Button
+            icon={iconAfter}
+            {...iconStyle}
+            jc="center"
+            ai="center"
+            scaleIcon={iconBeforeScale}
+            width={iconPercentage}
+            unstyled={!(iconsAsButton || iconAfterAsButton)}
+            height="100%"
+            padding={0}
+          />
+        )}
+      </XGroup>
+    </XStack>
+  );
+}

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

@@ -0,0 +1,59 @@
+/**
+ * File: /src/organize/SimpleListItem/SimpleListItem.stories.tsx
+ * Project: @multiplatform.one/components
+ * File Created: 16-10-2023 14:55:52
+ * 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 { SimpleList, SimpleListItem } from './index';
+import { ChevronRight, Star } from '@tamagui/lucide-icons';
+import { Label, Separator, Switch, XStack, YStack } from 'tamagui';
+
+export default {
+  title: 'organize/SimpleListItem',
+  component: SimpleList,
+  parameters: {
+    status: { type: 'beta' },
+  },
+};
+
+function Main() {
+  const [orientation, setOrientation] = React.useState(true);
+  return (
+    <YStack fullscreen>
+      <XStack width={200} alignItems="center" space="$4" alignSelf="flex-start">
+        <Label paddingRight="$0" minWidth={90} justifyContent="flex-end" size="$2">
+          {orientation ? 'Horizontal' : 'Vertical'}
+        </Label>
+        <Separator minHeight={20} vertical />
+        <Switch size="$2" defaultChecked={orientation} onCheckedChange={setOrientation}>
+          <Switch.Thumb animation="quick" />
+        </Switch>
+      </XStack>
+      <SimpleList orientation={orientation ? 'horizontal' : 'vertical'}>
+        <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} />
+        <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} />
+      </SimpleList>
+    </YStack>
+  );
+}
+
+export const main = () => <Main />;

package/src/organize/SimpleListItem/index.tsx

@@ -0,0 +1,36 @@
+import type { ListItemProps, YStackProps } from 'ui';
+import { YGroup, ListItem, XGroup } from 'ui';
+import React, { useMemo } from 'react';
+
+type SimpleListProps = YStackProps & { orientation?: 'horizontal' | 'vertical' };
+type SimpleListItemProps = ListItemProps & {};
+
+const ListContext = React.createContext<SimpleListProps | null>(null);
+
+export function SimpleList({ children, orientation = 'vertical', backgroundColor, bg, ...props }: SimpleListProps) {
+  const contextValue = useMemo(() => ({ orientation, backgroundColor, bg }), [orientation, backgroundColor, bg]);
+
+  const renderView = () => {
+    if (orientation === 'horizontal') {
+      return <XGroup {...props}>{children}</XGroup>;
+    }
+    return <YGroup {...props}>{children}</YGroup>;
+  };
+  return <ListContext.Provider value={contextValue}>{renderView()}</ListContext.Provider>;
+}
+
+export function SimpleListItem({ ...props }: SimpleListItemProps) {
+  const context = React.useContext(ListContext);
+  if (!context) {
+    throw new Error('SimpleListItem must be used within a SimpleList');
+  }
+
+  function renderItem() {
+    return <ListItem hoverTheme bg={context?.backgroundColor || context?.bg} {...props} />;
+  }
+
+  if (context.orientation === 'horizontal') {
+    return <XGroup.Item>{renderItem()}</XGroup.Item>;
+  }
+  return <YGroup.Item>{renderItem()}</YGroup.Item>;
+}

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

@@ -1,3 +1,24 @@
+/**
+ * File: /src/organize/SimpleTabs/SimpleTabs.stories.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 from 'react';
 import { SimpleTabs, TabContent, TabsList, Tab } from './index';
 import { H5, SizableText } from 'tamagui';

package/src/organize/SimpleTabs/index.tsx

@@ -1,8 +1,30 @@
+/**
+ * File: /src/organize/SimpleTabs/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 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 };

package/src/organize/index.ts

@@ -0,0 +1,24 @@
+/*
+ *  File: /src/organize/index.ts
+ *  Project: @multiplatform.one/components
+ *  File Created: 20-10-2023 18:17:40
+ *  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.
+ */
+export * from './SimpleCarousel';
+export * from './SimpleAccordion';
+export * from './SimpleInput';
+export * from './SimpleTabs';

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

@@ -0,0 +1,63 @@
+import React from 'react';
+import { SimpleAlertDialog } from './index';
+import type { Meta } from '@storybook/react';
+import { AlertDialog, Button, XStack, YStack } from 'tamagui';
+
+const meta: Meta = {
+  title: 'panels/SimpleAlertDialog',
+  component: SimpleAlertDialog,
+  parameters: { status: { type: 'beta' } },
+};
+
+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
+    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 = () => (
+  <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/SimpleDialog/SimpleDialog.stories.tsx

@@ -1,8 +1,30 @@
+/**
+ * File: /src/panels/SimpleDialog/SimpleDialog.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, { useState } from 'react';
 import type { Meta } from '@storybook/react';
 import { Button, Input, Dialog, YStack } from 'tamagui';
 import { SimpleDialog } from './index';
 import { action } from '@storybook/addon-actions';
+import { Text } from 'tamagui';
 
 const meta: Meta = {
   title: 'panels/SimpleDialog',
@@ -11,7 +33,12 @@ const meta: Meta = {
 };
 
 export const main = () => (
-  <SimpleDialog onOpenChange={action('onOpenChange')} trigger={<Button>Press Me</Button>} title="Fill the details">
+  <SimpleDialog
+    onOpenChange={action('onOpenChange')}
+    trigger={<Button>Press Me</Button>}
+    title="Fill the details"
+    withoutCloseButton
+  >
     <Input placeholder="Enter your first name" />
     <Input placeholder="Enter your last name" />
     <Dialog.Close>
@@ -48,3 +75,52 @@ function OpenWithFunction() {
 export const openWithFunction = () => <OpenWithFunction />;
 
 export default meta;
+
+export const customPosition = (args) => (
+  <SimpleDialog
+    {...args}
+    trigger={<Button>open Dialog</Button>}
+    withoutCloseButton
+    portalStyle={{ jc: 'flex-start', paddingTop: 10 }}
+  >
+    <YStack width={800} height={400}>
+      <Input placeholder="search" />
+    </YStack>
+  </SimpleDialog>
+);
+
+export const rightSideDialog = (args) => (
+  <SimpleDialog
+    trigger={<Button>open side dialog</Button>}
+    asRightSideSheet
+    withoutCloseButton
+    transitionWidth={400}
+    contentStyle={{ animation: 'quick' }}
+    {...args}
+  >
+    <YStack width={400}>
+      <Text>home</Text>
+      <Text>about</Text>
+      <Text>contact</Text>
+      <Text>help</Text>
+    </YStack>
+  </SimpleDialog>
+);
+
+export const leftSideDialog = (args) => (
+  <SimpleDialog
+    trigger={<Button>open side dialog</Button>}
+    asLeftSideSheet
+    withoutCloseButton
+    transitionWidth={300}
+    contentStyle={{ animation: 'lazy' }}
+    {...args}
+  >
+    <YStack width={300}>
+      <Text>home</Text>
+      <Text>about</Text>
+      <Text>contact</Text>
+      <Text>help</Text>
+    </YStack>
+  </SimpleDialog>
+);