chore(native-ui): add carousel to all compoents and update docs

[skip-native]
utilitywarehouse · Nov 28, 2024 · 2bfc482 · 2bfc482
1 parent 36c69f5
commit 2bfc482
Show file tree

Hide file tree

Showing 2 changed files with 137 additions and 13 deletions.
diff --git a/apps/native-ui-storybook/components/lab/Carousel/Carousel.docs.mdx b/apps/native-ui-storybook/components/lab/Carousel/Carousel.docs.mdx
@@ -14,6 +14,8 @@ import { BackToTopButton, DocComponentWrap } from '../../../docs/components';
 The carousel is a component for presenting information in a manner for customers to scroll through. This is typically when you have multiple banners, or CTA's, etc, although there are many other functional use cases.
 
 - [Usage](#usage)
+  - [Basic Usage](#basic-usage)
+  - [Carousel with Pagination](#carousel-with-pagination)
 - [Props](#props)
 
 <DocComponentWrap>
@@ -30,15 +32,39 @@ The carousel is a component for presenting information in a manner for customers
 
 ## Usage
 
-> The `Carousel` component is to be used for presenting scrollable data
+- The `Carousel` component is to be used for presenting scrollable data
+- The `Carousel` scrolls horizontally only
+- Most `Carousel` behaviour is predefined for a standardised behaviour and experience across apps
+- Some props can be modified to offer customised behaviour
 
-> The carousel scrolls horizontally only
+## Basic Usage
 
-> Most carousel behaviour is predefined for a standardised behaviour and experience across apps
-
-> Some props can be modified to offer customised behaviour
-
-A basic carousel implementation:
+<Canvas>
+  <Center flex={1}>
+    <Carousel
+      data={[
+        {
+          key: 1,
+          title: "I'm a Carousel item",
+        },
+        {
+          key: 2,
+          title: "I'm another Carousel item",
+        },
+        {
+          key: 3,
+          title: "I'm a third Carousel item",
+        },
+      ]}
+      renderItem={({ item }) => (
+        <Box p="$2" aspectRatio={1.6} backgroundColor="$purple500">
+          <Text color="$white">{item.title}</Text>
+        </Box>
+      )}
+      width={300}
+    />
+  </Center>
+</Canvas>
 
 ```jsx
 import { Text } from '@utilitywarehouse/native-ui';
@@ -49,6 +75,71 @@ const MyComponent = () => {
     theme: { colors, radii, space },
   } = useStyles();
 
+  return (
+    <Carousel
+      data={[
+        {
+          key: 1,
+          title: "I'm a Carousel item",
+        },
+        {
+          key: 2,
+          title: "I'm another Carousel item",
+        },
+        {
+          key: 3,
+          title: "I'm a third Carousel item",
+        },
+      ]}
+      renderItem={({ item }) => (
+        <Box p="$2" aspectRatio={1.6} backgroundColor="$purple500">
+          <Text color="$white">{item.title}</Text>
+        </Box>
+      )}
+      width={300}
+    />
+  );
+};
+```
+
+### Carousel with Pagination
+
+The `CarouselPagination` component is to be used in conjunction with the `Carousel` component
+
+<Canvas>
+  <Center flex={1}>
+    <Carousel
+      data={[
+        {
+          key: 1,
+          title: "I'm a Carousel item",
+        },
+        {
+          key: 2,
+          title: "I'm another Carousel item",
+        },
+        {
+          key: 3,
+          title: "I'm a third Carousel item",
+        },
+      ]}
+      renderItem={({ item }) => (
+        <Center p="$2" aspectRatio={1.6} backgroundColor="$cyan500">
+          <Text color="$white">{item.title}</Text>
+        </Center>
+      )}
+      width={300}
+    >
+      <CarouselPagination style={{ marginVertical: 16 }} />
+    </Carousel>
+  </Center>
+</Canvas>
+
+```tsx
+import { Text } from '@utilitywarehouse/native-ui';
+import { Box, Carousel, CarouselPagination } from '@utilitywarehouse/native-ui/lab';
+
+const MyComponent = () => {
   return (
     <Carousel
       data={[
@@ -66,12 +157,14 @@ const MyComponent = () => {
         },
       ]}
       renderItem={({ item }) => (
-        <Box style={{ aspectRatio: 1.6, backgroundColor: 'purple' }}>
+        <Center p="$2" aspectRatio={1.6} backgroundColor="$cyan500">
           <Text>{item.title}</Text>
-        </Box>
-        )}
+        </Center>
+      )}
       width={300}
-    />
+    >
+      <CarouselPagination style={{ marginVertical: 16 }} />
+    </Carousel>
   );
 };
 ```
@@ -95,4 +188,4 @@ The Carousel component accepts some props from the React Native `FlatList` compo
 | style?                 | StyleProp                               | -       | Style applied to the carousel container                                                                                        |
 | width                  | number                                  | -       | Carousel viewport width                                                                                                        |
 
-For more information about any of the above props from the `FlatList` component, see the React Native FlatList [documentation](https://reactnative.dev/docs/flatlist).
+For more information about any of the above props from the `FlatList` component, see the React Native FlatList [documentation](https://reactnative.dev/docs/flatlist).
diff --git a/apps/native-ui-storybook/docs/components/AllComponents.web.tsx b/apps/native-ui-storybook/docs/components/AllComponents.web.tsx
@@ -27,7 +27,7 @@ import {
   Card,
   Switch,
 } from '@utilitywarehouse/native-ui';
-import { Actionsheet, Box } from '@utilitywarehouse/native-ui/lab';
+import { Actionsheet, Box, Carousel, CarouselPagination } from '@utilitywarehouse/native-ui/lab';
 import {
   ElectricityMediumIcon,
   MobileMediumIcon,
@@ -114,6 +114,37 @@ const AllComponents: React.FC = () => {
               </Card>
             </Center>
           </ComponentWrapper>
+          <ComponentWrapper
+            name="Carousel (Lab)"
+            link="/?path=/docs/native-ui-components-card--docs"
+          >
+            <Center flex={1}>
+              <Carousel
+                data={[
+                  {
+                    key: 1,
+                    title: "I'm a Carousel item",
+                  },
+                  {
+                    key: 2,
+                    title: "I'm another Carousel item",
+                  },
+                  {
+                    key: 3,
+                    title: "I'm a third Carousel item",
+                  },
+                ]}
+                renderItem={({ item }) => (
+                  <Box p="$2" aspectRatio={1.6} backgroundColor="$purple500">
+                    <Text color="$white">{item.title}</Text>
+                  </Box>
+                )}
+                width={150}
+              >
+                <CarouselPagination style={{ marginTop: 16 }} />
+              </Carousel>
+            </Center>
+          </ComponentWrapper>
           <ComponentWrapper name="Center" link="/?path=/docs/native-ui-components-center--docs">
             <Center flex={1}>
               <Center backgroundColor="$grey900" padding="$4" width={200} height={100}>