@multiplatform.one/components 0.7.1 → 0.7.2

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

@@ -1,14 +1,52 @@
-import { SimpleAccordion } from '.';
+/**
+ * File: /src/organize/SimpleAccordion/SimpleAccordion.stories.tsx
+ * Project: @multiplatform.one/components
+ * File Created: 13-10-2023 12:02:11
+ * 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 { AccordionItem, SimpleAccordion } from './index';
+import { YStack, Text } from 'tamagui';
 
 export default {
   title: 'organize/SimpleAccordion',
   component: SimpleAccordion,
   parameters: {
-    status: {
-      type: 'beta',
-    },
+    status: { type: 'beta' },
   },
 };
 
-export const simpleAccordion = (args) => <SimpleAccordion {...args} />;
+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={<Text>Trigger Orange </Text>} value="orange">
+      <YStack padding="$4">
+        <Text>Orange Content</Text>
+      </YStack>
+    </AccordionItem>
+  </SimpleAccordion>
+);

package/src/organize/SimpleAccordion/index.tsx

@@ -1,6 +1,56 @@
-import { Text } from 'tamagui';
+/**
+ * File: /src/organize/SimpleAccordion/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 { AccordionContentProps, AccordionItemProps, AccordionTriggerProps } from 'ui';
+import { Accordion } from 'ui';
 import React from 'react';
 
-export function SimpleAccordion() {
-  return <Text>SimpleAccordion</Text>;
+interface SimpleAccordionProps {
+  children: React.ReactNode;
+  overflow?: 'visible' | 'hidden' | 'scroll';
+  type?: 'single' | 'multiple';
+}
+
+type SimpleAccordionItemProps = AccordionItemProps & {
+  trigger: React.ReactNode;
+  triggerStyle?: AccordionTriggerProps;
+  contentStyle?: AccordionContentProps;
+  children: React.ReactNode;
+};
+
+export function SimpleAccordion({ children, ...props }: SimpleAccordionProps) {
+  return (
+    <Accordion overflow="hidden" type="single" {...props}>
+      {children}
+    </Accordion>
+  );
+}
+
+export function AccordionItem({ trigger, triggerStyle, children, contentStyle, ...props }: SimpleAccordionItemProps) {
+  return (
+    <Accordion.Item {...props}>
+      <Accordion.Trigger flexDirection="row" justifyContent="space-between" {...triggerStyle}>
+        {trigger}
+      </Accordion.Trigger>
+      <Accordion.Content {...contentStyle}>{children}</Accordion.Content>
+    </Accordion.Item>
+  );
 }

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

@@ -0,0 +1,45 @@
+/**
+ * File: /src/organize/SimpleCarousel/Carousel.stories.tsx
+ * Project: @multiplatform.one/components
+ * File Created: 17-10-2023 14:47:51
+ * 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 { SimpleCarousel } from './index';
+import React from 'react';
+import { SimpleImage } from '../../images/SimpleImage';
+
+export default {
+  title: 'organize/SimpleCarousel',
+  component: SimpleCarousel,
+  parameters: {
+    status: {
+      type: 'beta',
+    },
+  },
+};
+
+const mail = require('../../../assets/mail.png');
+const pentagon = require('../../../assets/pentagon.svg');
+
+export const Main = () => (
+  <SimpleCarousel speed={5000} 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>
+);

package/src/organize/SimpleCarousel/index.tsx

@@ -0,0 +1,151 @@
+/**
+ * File: /src/organize/SimpleCarousel/index.tsx
+ * Project: @multiplatform.one/components
+ * File Created: 17-10-2023 14:46:38
+ * 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 { YStackProps } from 'tamagui';
+import { Stack, Text, XStack, YStack } from 'tamagui';
+import React, { useEffect, useState, useRef } from 'react';
+import { ChevronLeft, ChevronRight } from '@tamagui/lucide-icons';
+import type { IconProps } from '@tamagui/helpers-icon';
+
+type CarouselProps = YStackProps & {
+  children: React.ReactNode;
+  speed?: number;
+  showCenterIndicator?: boolean;
+  showSideArrows?: boolean;
+  defaultSlide?: number;
+  sideArrowStyle?: IconProps;
+};
+
+export function SimpleCarousel({
+  children,
+  speed = 3000,
+  showCenterIndicator = true,
+  showSideArrows = true,
+  defaultSlide,
+  sideArrowStyle,
+  ...props
+}: CarouselProps) {
+  const [currentSlide, setCurrentSlide] = useState(0);
+  const childrenCount = React.Children.count(children);
+  const carouselRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const slideInterval = setInterval(() => {
+      setCurrentSlide((prevSlide) => (prevSlide + 1) % childrenCount);
+    }, speed);
+
+    return () => {
+      clearInterval(slideInterval);
+    };
+  }, [children, speed]);
+
+  useEffect(() => {
+    if (defaultSlide !== undefined && defaultSlide <= childrenCount) {
+      setCurrentSlide((defaultSlide - 1 + childrenCount) % childrenCount);
+    }
+  }, [defaultSlide]);
+
+  function handlePressNext() {
+    setCurrentSlide((prevSlide) => (prevSlide + 1) % childrenCount);
+  }
+
+  function handlePressPrev() {
+    setCurrentSlide((prevSlide) => (prevSlide - 1 + childrenCount) % childrenCount);
+  }
+
+  function renderSideArrows() {
+    return (
+      <>
+        <YStack
+          height={carouselRef.current?.clientHeight}
+          bg="$backgroundTransparent"
+          position="absolute"
+          justifyContent="center"
+          alignItems="center"
+        >
+          <Text onPress={handlePressPrev} cur="pointer">
+            <ChevronLeft color="gray" size="$4" {...sideArrowStyle} />
+          </Text>
+        </YStack>
+        <YStack
+          height={carouselRef.current?.clientHeight}
+          bg="$backgroundTransparent"
+          position="absolute"
+          justifyContent="center"
+          alignItems="center"
+          right={0}
+        >
+          <Text onPress={handlePressNext} cur="pointer">
+            <ChevronRight color="gray" size="$4" {...sideArrowStyle} />
+          </Text>
+        </YStack>
+      </>
+    );
+  }
+
+  function renderCenterIndicator() {
+    return (
+      <YStack
+        height={carouselRef.current?.clientHeight}
+        bg="$backgroundTransparent"
+        position="absolute"
+        justifyContent="flex-end"
+        alignItems="center"
+        left={0}
+        right={0}
+      >
+        <XStack space="$2" ai="center" marginBottom={20}>
+          {Array.from({ length: childrenCount }).map((_, index) => (
+            <Stack
+              height={index === currentSlide ? 4 : 1}
+              bg="$backgroundHover"
+              width={30}
+              key={index}
+              cursor="pointer"
+              marginVertical="$2"
+              onPress={() => setCurrentSlide(index)}
+            />
+          ))}
+        </XStack>
+      </YStack>
+    );
+  }
+
+  return (
+    <YStack overflow="hidden">
+      <XStack
+        transform={[{ translateX: -currentSlide * (carouselRef.current?.clientWidth || 1) }]}
+        // TODO: transitionDuration="transform 0.5s ease"
+        width="100%"
+        animation="lazy"
+        {...props}
+        ref={carouselRef}
+      >
+        {React.Children.map(children, (child, index) => (
+          <YStack key={index} flex-flexGrow={0} flexShrink={0} flexBasis="100%">
+            {child}
+          </YStack>
+        ))}
+      </XStack>
+      {showCenterIndicator && childrenCount > 1 && renderCenterIndicator()}
+      {showSideArrows && childrenCount > 1 && renderSideArrows()}
+    </YStack>
+  );
+}

package/src/{component → organize}/SimpleInput/SimpleInput.stories.tsx

@@ -1,10 +1,31 @@
+/**
+ * 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';
 
 export default {
-  title: 'components/SimpleInput',
+  title: 'organize/SimpleInput',
   component: SimpleInput,
   parameters: { status: { type: 'beta' } },
 };

package/src/{component → organize}/SimpleInput/index.tsx

@@ -1,3 +1,24 @@
+/**
+ * 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';
@@ -29,7 +50,7 @@ interface CustomProps {
 
 type IconProps = SvgProps & BaseIconProps;
 
-export type SimpleInputProps = InputProps & CustomProps & XStackProps;
+export type SimpleInputProps = Omit<InputProps & CustomProps & XStackProps, 'ref'>;
 
 export function SimpleInput({
   value,

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 → SimpleAlertDialog.stories.tsx}

@@ -1,7 +1,7 @@
 import React from 'react';
 import { SimpleAlertDialog } from './index';
 import type { Meta } from '@storybook/react';
-import { AlertDialog, Button, Switch, XStack, YStack } from 'tamagui';
+import { AlertDialog, Button, XStack, YStack } from 'tamagui';
 
 const meta: Meta = {
   title: 'panels/SimpleAlertDialog',

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>
+);