chore: standardise component docs (#406)

utilitywarehouse · Jul 10, 2024 · b8e6623 · b8e6623
1 parent bc704ca
commit b8e6623
Show file tree

Hide file tree

Showing 33 changed files with 880 additions and 674 deletions.
diff --git a/apps/native-ui-storybook/.storybook/preview.tsx b/apps/native-ui-storybook/.storybook/preview.tsx
@@ -4,12 +4,13 @@ import { Box, Center, NativeUIProvider } from '@utilitywarehouse/native-ui';
 import { PlatformContextProvider } from '../contexts/PlatformContext';
 import { useStoryContext, useArgs, useGlobals, getQueryParams } from '@storybook/preview-api';
 import '../assets/style.css';
-import StoryWrap from '../components/StoryWrap';
+import StoryWrap from '../docs/components/StoryWrap';
 import { useDarkMode, DARK_MODE_EVENT_NAME } from 'storybook-dark-mode';
 import { addons } from '@storybook/addons';
 import { UPDATE_GLOBALS } from '@storybook/core-events';
 import { DocsContainer as BaseContainer, DocsContainerProps } from '@storybook/blocks';
 import { themeDark, themeLight } from './themes';
+import { Analytics } from '@vercel/analytics/react';
 
 const lightColour: string = '#fff';
 const darkColour: string = '#1d1d1d';
@@ -24,6 +25,7 @@ export const decorators: Decorator[] = [
 
     return viewMode === 'story' ? (
       <NativeUIProvider colorMode={colorScheme}>
+        <Analytics />
         <PlatformContextProvider
           args={args}
           id={id}
@@ -93,6 +95,7 @@ export const DocsContainer: FC<PropsWithChildren<DocsContainerProps>> = ({ child
 
   return (
     <BaseContainer theme={isDark ? themeDark : themeLight} context={context}>
+      <Analytics />
       {children}
     </BaseContainer>
   );

diff --git a/apps/native-ui-storybook/components/Alert/Alert.docs.mdx b/apps/native-ui-storybook/components/Alert/Alert.docs.mdx
@@ -23,15 +23,26 @@ import {
   ChevronRightSmallIcon,
   CloseSmallIcon,
 } from '@utilitywarehouse/react-native-icons';
+import { ViewFigmaButton, BackToTopButton } from '../../docs/components';
 
 <Meta of={Stories} />
 
+<ViewFigmaButton url="https://www.figma.com/design/3RY3OvLA88yZksRjOfjQJm/UW-App-UI?node-id=1746-4235" />
+
+<BackToTopButton />
+
 # Alert
 
 The `Alert` component displays a short, important message in a way that attracts the user's attention without interrupting the user's task.
 This component should be used to flag information of high importance, whether it be an error, warning, success or information.
 The Alert offers different colour schemes, the colour scheme is mapped to an icon
 
+- [Playground](#playground)
+- [Usage](#usage)
+- [Props](#props)
+- [Variants](#variants)
+- [Advanced Usage](#advanced-usage)
+
 ## Playground
 
 <Primary />
@@ -154,5 +165,3 @@ const MyComponent = () => {
   );
 };
 ```
-
-### Figma link: [https://www.figma.com/file/3RY3OvLA88yZksRjOfjQJm/UW-App-UI?type=design&node-id=5227-8115&mode=device](https://www.figma.com/file/3RY3OvLA88yZksRjOfjQJm/UW-App-UI?type=design&node-id=5227-8115&mode=device)
diff --git a/apps/native-ui-storybook/components/Alert/Variants.tsx b/apps/native-ui-storybook/components/Alert/Variants.tsx
@@ -1,32 +1,36 @@
 import React from 'react';
 
 import { Alert, Text, VStack } from '@utilitywarehouse/native-ui';
+import { VariantTitle } from '../../docs/components';
 
 const AlertVariants = () => {
   return (
     <VStack gap={8}>
-      <Text>Info - Cyan</Text>
-      <Alert
-        colorScheme="cyan"
-        text="Unlock the power of knowledge with the following information."
-      />
-
-      <Text>Success - Green</Text>
-      <Alert
-        colorScheme="green"
-        text="Boom! You did it! Please take a moment to pat yourself on the back. You've earned it!"
-      />
-      <Text>Error - Red</Text>
-      <Alert
-        colorScheme="red"
-        text="Uh-oh! It looks like the matrix has glitched. Our team of tech ninjas are already on the
+      <VariantTitle title="Info - Cyan">
+        <Alert
+          colorScheme="cyan"
+          text="Unlock the power of knowledge with the following information."
+        />
+      </VariantTitle>
+      <VariantTitle title="Success - Green">
+        <Alert
+          colorScheme="green"
+          text="Boom! You did it! Please take a moment to pat yourself on the back. You've earned it!"
+        />
+      </VariantTitle>
+      <VariantTitle title="Error - Red">
+        <Alert
+          colorScheme="red"
+          text="Uh-oh! It looks like the matrix has glitched. Our team of tech ninjas are already on the
           case. Please hold tight while we fix the issue"
-      />
-      <Text>Warning - Gold</Text>
-      <Alert
-        colorScheme="gold"
-        text="Warning: Reading the following content may cause spontaneous outbursts of 'aha!' moments"
-      />
+        />
+      </VariantTitle>
+      <VariantTitle title="Warning - Gold">
+        <Alert
+          colorScheme="gold"
+          text="Warning: Reading the following content may cause spontaneous outbursts of 'aha!' moments"
+        />
+      </VariantTitle>
     </VStack>
   );
 };

diff --git a/...ve-ui-storybook/components/Badge/Docs.mdx → ...storybook/components/Badge/Badge.docs.mdx b/...ve-ui-storybook/components/Badge/Docs.mdx → ...storybook/components/Badge/Badge.docs.mdx
@@ -1,16 +1,22 @@
 import { Meta, Primary, Controls, Story, Canvas } from '@storybook/blocks';
 import * as BadgeStories from './Badge.stories';
 import { Badge, BadgeText, Center, NativeUIProvider } from '@utilitywarehouse/native-ui';
+import { ViewFigmaButton, BackToTopButton } from '../../docs/components';
+
+<BackToTopButton />
 
 <Meta of={BadgeStories} />
 
+<ViewFigmaButton url="https://www.figma.com/file/3RY3OvLA88yZksRjOfjQJm/UW-App-UI?type=design&node-id=2960-3929&mode=dev" />
+
 # Badge
 
-Use the `Badge` component to draw attention to another interface element or to provide additional context (such as status). Badge is a stateless component, e.g. it has no Pressed, Disabled, Active states. Badges should not be used as a mechanism for:
+Use the `Badge` component to draw attention to another interface element or to provide additional context (such as status).
 
-- Filtering content
-- Assigning a piece of content to a group (tagging)
-- Performing an action
+- [Playground](#playground)
+- [Usage](#usage)
+- [Props](#props)
+- [Variants](#variants)
 
 ## Playground
 
@@ -22,6 +28,12 @@ Use the `Badge` component to draw attention to another interface element or to p
 
 > This component should be wrapped in a `NativeUIProvider` component to ensure that the correct theme is applied.
 
+Badge is a stateless component, e.g. it has no Pressed, Disabled, Active states. Badges should not be used as a mechanism for:
+
+- Filtering content
+- Assigning a piece of content to a group (tagging)
+- Performing an action
+
 <Canvas>
   <NativeUIProvider>
     <Center>
@@ -55,4 +67,8 @@ const MyComponent = () => (
 
 For more information, see the [Gluestack Badge component documentation](https://gluestack.io/ui/docs/components/data-display/badge).
 
-## Figma link: [https://www.figma.com/file/3RY3OvLA88yZksRjOfjQJm/UW-App-UI?type=design&node-id=2960-3929&mode=dev](https://www.figma.com/file/3RY3OvLA88yZksRjOfjQJm/UW-App-UI?type=design&node-id=2960-3929&mode=dev)
+## Variants
+
+The `Badge` component has different variants to style the badge.
+
+<Canvas of={BadgeStories.Variants} />
diff --git a/apps/native-ui-storybook/components/Badge/Variants.tsx b/apps/native-ui-storybook/components/Badge/Variants.tsx
@@ -1,41 +1,66 @@
 import React from 'react';
-import { Badge, BadgeText, Box } from '@utilitywarehouse/native-ui';
+import { Badge, BadgeText, Box, HStack } from '@utilitywarehouse/native-ui';
 import { StoryFn } from '@storybook/react';
+import { VariantTitle } from '../../docs/components';
 
 const BadgeBasic: StoryFn = () => {
   return (
-    <Box gap={8}>
-      <Badge colorScheme="cyan">
-        <BadgeText>Cyan</BadgeText>
-      </Badge>
-      <Badge colorScheme="gold">
-        <BadgeText>Gold</BadgeText>
-      </Badge>
-      <Badge colorScheme="green">
-        <BadgeText>Green</BadgeText>
-      </Badge>
-      <Badge colorScheme="grey">
-        <BadgeText>Grey</BadgeText>
-      </Badge>
-      <Badge colorScheme="red">
-        <BadgeText>Red</BadgeText>
-      </Badge>
-      <Badge colorScheme="cyan" strong>
-        <BadgeText>Cyan Strong</BadgeText>
-      </Badge>
-      <Badge colorScheme="gold" strong>
-        <BadgeText>Gold Strong</BadgeText>
-      </Badge>
-      <Badge colorScheme="green" strong>
-        <BadgeText>Green Strong</BadgeText>
-      </Badge>
-      <Badge colorScheme="grey" strong>
-        <BadgeText>Grey Strong</BadgeText>
-      </Badge>
-      <Badge colorScheme="red" strong>
-        <BadgeText>Red Strong</BadgeText>
-      </Badge>
-    </Box>
+    <HStack gap={8}>
+      <Box>
+        <VariantTitle title="cyan">
+          <Badge colorScheme="cyan">
+            <BadgeText>Cyan</BadgeText>
+          </Badge>
+        </VariantTitle>
+        <VariantTitle title="gold">
+          <Badge colorScheme="gold">
+            <BadgeText>Gold</BadgeText>
+          </Badge>
+        </VariantTitle>
+        <VariantTitle title="green">
+          <Badge colorScheme="green">
+            <BadgeText>Green</BadgeText>
+          </Badge>
+        </VariantTitle>
+        <VariantTitle title="grey">
+          <Badge colorScheme="grey">
+            <BadgeText>Grey</BadgeText>
+          </Badge>
+        </VariantTitle>
+        <VariantTitle title="red">
+          <Badge colorScheme="red">
+            <BadgeText>Red</BadgeText>
+          </Badge>
+        </VariantTitle>
+      </Box>
+      <Box>
+        <VariantTitle title="cyan strong">
+          <Badge colorScheme="cyan" strong>
+            <BadgeText>Cyan Strong</BadgeText>
+          </Badge>
+        </VariantTitle>
+        <VariantTitle title="gold strong">
+          <Badge colorScheme="gold" strong>
+            <BadgeText>Gold Strong</BadgeText>
+          </Badge>
+        </VariantTitle>
+        <VariantTitle title="green strong">
+          <Badge colorScheme="green" strong>
+            <BadgeText>Green Strong</BadgeText>
+          </Badge>
+        </VariantTitle>
+        <VariantTitle title="grey strong">
+          <Badge colorScheme="grey" strong>
+            <BadgeText>Grey Strong</BadgeText>
+          </Badge>
+        </VariantTitle>
+        <VariantTitle title="red strong">
+          <Badge colorScheme="red" strong>
+            <BadgeText>Red Strong</BadgeText>
+          </Badge>
+        </VariantTitle>
+      </Box>
+    </HStack>
   );
 };
 

diff --git a/...tive-ui-storybook/components/Box/Docs.mdx → ...-ui-storybook/components/Box/Box.docs.mdx b/...tive-ui-storybook/components/Box/Docs.mdx → ...-ui-storybook/components/Box/Box.docs.mdx
diff --git a/apps/native-ui-storybook/components/Button/Button.docs.mdx b/apps/native-ui-storybook/components/Button/Button.docs.mdx
@@ -1,5 +1,5 @@
 import { Meta, Canvas, Story, Primary, Controls } from '@storybook/blocks';
-import * as ButtonStories from './Button.stories';
+import * as Stories from './Button.stories';
 import {
   ButtonGroup,
   Button,
@@ -16,16 +16,27 @@ import {
   ChevronLeft01SmallIcon,
   ChevronRight01SmallIcon,
 } from '@utilitywarehouse/react-native-icons';
-import ViewFigmaButton from '../../docs/components/ViewFigmaButton';
+import { ViewFigmaButton, BackToTopButton } from '../../docs/components';
 
-<Meta of={ButtonStories} />
+<Meta of={Stories} />
 
 <ViewFigmaButton url="https://www.figma.com/design/3RY3OvLA88yZksRjOfjQJm/UW-App-UI?node-id=15-3" />
 
+<BackToTopButton />
+
 # Button
 
 The `Button` component is used to trigger an action or event, such as submitting a form, opening a dialog, canceling an action, or performing a delete operation.
 
+- [Playground](#playground)
+- [Usage](#usage)
+- [Props](#props)
+- [Components](#components)
+  - [ButtonGroup](#buttongroup)
+  - [ButtonIcon](#buttonicon)
+  - [ButtonSpinner](#buttonspinner)
+- [Variants](#variants)
+
 ## Playground
 
 <Primary />
@@ -73,7 +84,7 @@ const MyComponent = () => {
 | `isDisabled`  | `boolean`                                        | Disables the button.                                                                              | `false`  |
 | `isPressed`   | `boolean`                                        | Changes the button to a pressed state.                                                            | `false`  |
 
-### Descendants Styling Props
+#### Descendants Styling Props
 
 Props to style the child components.
 
@@ -83,7 +94,7 @@ Props to style the child components.
 | `_icon`    | Prop to style ButtonIcon Component    |
 | `_spinner` | Prop to style ButtonSpinner Component |
 
-### Components
+## Components
 
 - [ButtonGroup](#buttongroup)
 - [ButtonIcon](#buttonicon)
@@ -197,3 +208,5 @@ const MyComponent = () => {
   );
 };
 ```
+
+<Canvas of={Stories.PlaygroundVariants} />