feat: Alert component

.github/workflows/previews.yml

@@ -20,7 +20,9 @@ jobs:
         uses: pnpm/action-setup@v2
         with:
           version: 8
-      - uses: actions/checkout@v3
+
+      - name: 🏗 Checkout code
+        uses: actions/checkout@v3
 
       - name: 🏗 Setup Node
         uses: actions/setup-node@v2
@@ -44,7 +46,7 @@ jobs:
           token: ${{ secrets.EXPO_TOKEN }}
 
       - name: 📦 Install dependencies
-        run: pnpm install
+        run: pnpm install --frozen-lockfile
         env:
           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
 
@@ -61,7 +63,7 @@ jobs:
           platform: 'android'
 
   build-for-ios:
-    runs-on: macos-13
+    runs-on: macos-13-xlarge
     concurrency:
       group: preview-ios-${{ github.ref }}
       cancel-in-progress: true
@@ -70,7 +72,9 @@ jobs:
         uses: pnpm/action-setup@v2
         with:
           version: 8
-      - uses: actions/checkout@v3
+
+      - name: 🏗 Checkout code
+        uses: actions/checkout@v3
 
       - name: 🏗 Setup Node
         uses: actions/setup-node@v2
@@ -91,7 +95,7 @@ jobs:
           token: ${{ secrets.EXPO_TOKEN }}
 
       - name: 📦 Install dependencies
-        run: pnpm install
+        run: pnpm install --frozen-lockfile
         env:
           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
       - name: 🚀 Build iOS app

apps/native-ui-storybook/.storybook/addons/devices/register.tsx

@@ -1,7 +1,6 @@
-import { addons, types, useGlobals } from '@storybook/addons';
+import { addons, types } from '@storybook/addons';
 import React from 'react';
 
-import { Icons, IconButton } from '@storybook/components';
 import { ADDON_ID } from './constants';
 import PlatformSelector from './components/PlatformSelector';
 

apps/native-ui-storybook/.storybook/main.ts

@@ -1,29 +1,37 @@
-const path = require('path');
+import { dirname, join } from 'path';
 /** @type{import("@storybook/react-webpack5").StorybookConfig} */
 module.exports = {
   stories: [
     '../docs/**/*.mdx',
+    '../components/**/*.mdx',
     '../components/**/*.stories.mdx',
     '../components/**/*.stories.@(js|jsx|ts|tsx)',
   ],
   addons: [
-    '@storybook/addon-links',
-    '@storybook/addon-essentials',
-    '@storybook/addon-react-native-web',
+    getAbsolutePath('@storybook/addon-links'),
+    getAbsolutePath('@storybook/addon-essentials'),
+    getAbsolutePath('@storybook/addon-react-native-web'),
+    getAbsolutePath('@storybook/addon-mdx-gfm'),
+    getAbsolutePath('storybook-dark-mode'),
   ],
   framework: {
-    name: '@storybook/react-webpack5',
+    name: getAbsolutePath('@storybook/react-webpack5'),
     options: {},
   },
   docs: {
-    autodocs: true,
+    autodocs: 'tag',
   },
   webpackFinal: async config => {
     config.resolve.alias = {
       ...config.resolve.alias,
       '@utilitywarehouse/react-native-icons': '@utilitywarehouse/react-icons',
+      '@utilitywarehouse/native-ui': getAbsolutePath('@utilitywarehouse/native-ui'),
     };
 
     return config;
   },
 };
+
+function getAbsolutePath(value: string): any {
+  return dirname(require.resolve(join(value, 'package.json')));
+}

apps/native-ui-storybook/.storybook/preview-head.html

@@ -0,0 +1,5 @@
+<style>
+  #appetize-iframe {
+    padding: 20px;
+  }
+</style>

apps/native-ui-storybook/.storybook/preview.tsx

@@ -1,48 +1,119 @@
 import type { Preview, Decorator } from '@storybook/react';
-import React, { useEffect, useState } from 'react';
-import { Center, NativeUIProvider, config } from '@utilitywarehouse/native-ui';
+import React, { FC, PropsWithChildren, useEffect, useState } from 'react';
+import { Box, Center, NativeUIProvider, config } from '@utilitywarehouse/native-ui';
 import { PlatformContextProvider } from '../contexts/PlatformContext';
-import { useStoryContext, useArgs, useGlobals } from '@storybook/preview-api';
+import { useStoryContext, useArgs, useGlobals, getQueryParams } from '@storybook/preview-api';
 import '../assets/style.css';
 import StoryWrap from '../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 { themes } from '@storybook/theming';
+import { DocsContainer as BaseContainer, DocsContainerProps } from '@storybook/blocks';
 
 const lightColour: string = '#fff';
 const darkColour: string = '#1d1d1d';
 
 export const decorators: Decorator[] = [
   Story => {
     const [globals] = useGlobals();
-    const background = globals.backgrounds?.value;
-    const isLight = !background || background === 'transparent' || background === lightColour;
     const [args] = useArgs();
+    const colorScheme = useDarkMode() ? 'dark' : 'light';
     const { id, viewMode } = useStoryContext();
-    const [theme, setTheme] = useState<'light' | 'dark'>(isLight ? 'light' : 'dark');
+    const device = globals.device;
 
-    useEffect(() => {
-      setTheme(isLight ? 'light' : 'dark');
-    }, [background]);
-
-    return (
-      <NativeUIProvider colorMode={theme} config={config}>
+    return viewMode === 'story' ? (
+      <NativeUIProvider colorMode={colorScheme} config={config}>
         <PlatformContextProvider
           args={args}
           id={id}
           viewMode={viewMode}
-          colourMode={theme}
+          colourMode={colorScheme}
           platform={globals.device}
         >
-          <Center>{viewMode === 'story' ? <StoryWrap>{<Story />}</StoryWrap> : <Story />}</Center>
+          <Box
+            sx={{
+              bg: colorScheme === 'light' ? lightColour : darkColour,
+              p: device !== 'web' ? 0 : 20,
+              position: 'absolute',
+              top: 0,
+              left: 0,
+              _web: {
+                width: '100vw',
+                height: '100vh',
+                zIndex: device !== 'web' ? -1 : 0,
+              },
+            }}
+          >
+            <Center>
+              <StoryWrap>
+                <Story />
+              </StoryWrap>
+            </Center>
+          </Box>
         </PlatformContextProvider>
       </NativeUIProvider>
+    ) : (
+      <NativeUIProvider colorMode={colorScheme} config={config}>
+        <Center padding={20} bg={colorScheme === 'light' ? lightColour : darkColour}>
+          <Story />
+        </Center>
+      </NativeUIProvider>
     );
   },
 ];
 
+let channel = addons.getChannel();
+
+const storyListener = darkMode => {
+  const { viewMode } = getQueryParams();
+  if (viewMode === 'story') {
+    channel.emit(UPDATE_GLOBALS, {
+      globals: {
+        theme: darkMode ? 'dark' : 'light',
+        backgrounds: darkMode
+          ? { name: 'dark', value: darkColour }
+          : { name: 'light', value: lightColour },
+      },
+    });
+  }
+};
+
+function setupBackgroundListener() {
+  channel.removeListener(DARK_MODE_EVENT_NAME, storyListener);
+  channel.addListener(DARK_MODE_EVENT_NAME, storyListener);
+}
+
+setupBackgroundListener();
+
+export const DocsContainer: FC<PropsWithChildren<DocsContainerProps>> = ({ children, context }) => {
+  const [isDark, setDark] = useState(false);
+
+  useEffect(() => {
+    channel.on(DARK_MODE_EVENT_NAME, setDark);
+    return () => channel.off(DARK_MODE_EVENT_NAME, setDark);
+  }, [channel]);
+
+  return (
+    <BaseContainer theme={isDark ? themes.dark : themes.light} context={context}>
+      {children}
+    </BaseContainer>
+  );
+};
+
 const preview: Preview = {
   globals: {
     device: 'web',
   },
   parameters: {
+    docs: {
+      container: DocsContainer,
+    },
+    layout: 'fullscreen',
+    darkMode: {
+      current: 'light',
+      stylePreview: true,
+    },
     options: {
       storySort: {
         order: [
@@ -61,6 +132,7 @@ const preview: Preview = {
       },
     },
     backgrounds: {
+      // disable: true,
       default: 'light',
       values: [
         {

apps/native-ui-storybook/assets/style.css

@@ -26,7 +26,7 @@
 
 @font-face {
   font-display: swap;
-  font-family: 'WorkSans-Bold';
+  font-family: 'WorkSans-SemiBold';
   font-style: normal;
   font-weight: 600;
   src: url('../../../node_modules/@utilitywarehouse/fontsource/files/work-sans-600-normal.woff2')

apps/native-ui-storybook/components/Alert/Alert.stories.tsx

@@ -0,0 +1,12 @@
+import { Meta } from '@storybook/react';
+import Alert from './Alert';
+import Variants from './Variants';
+
+const AlertMeta: Meta<typeof Alert> = {
+  title: 'components/Alert',
+  component: Alert,
+};
+
+export default AlertMeta;
+
+export { Alert as Playground, Variants };

apps/native-ui-storybook/components/Alert/Alert.tsx

@@ -0,0 +1,81 @@
+import React, { useEffect } from 'react';
+import { Alert, AlertIcon, AlertText, VStack, Icon } from '@utilitywarehouse/native-ui';
+import { Meta } from '@storybook/react';
+import { useArgs } from '@storybook/preview-api';
+
+const AlertBasic = ({ link, onPressIconButton, onClose, ...props }: any) => {
+  const [args, setArgs] = useArgs();
+  const handlePressLink = () => {
+    alert('Link Pressed!');
+  };
+
+  const handlePressIconButton = () => {
+    alert('Icon Button Pressed!');
+  };
+
+  const handleClose = () => {
+    alert('Alert Dismissed!');
+  };
+
+  useEffect(() => {
+    if (onPressIconButton && link) {
+      setArgs({ ...args, link: undefined });
+    }
+  }, [link, onPressIconButton]);
+
+  return (
+    <Alert
+      link={link}
+      onPressLink={link ? handlePressLink : undefined}
+      onPressIconButton={onPressIconButton ? handlePressIconButton : undefined}
+      onClose={onClose ? handleClose : undefined}
+      {...props}
+    />
+  );
+};
+
+AlertBasic.argTypes = {
+  colorScheme: {
+    control: 'select',
+    options: ['info', 'success', 'warning', 'error'],
+    description: 'Use this valie to change the alert type and colour scheme.',
+    defaultValue: 'info',
+  },
+  title: {
+    control: 'text',
+    description: 'Use this value to set the alert title.',
+  },
+  text: {
+    control: 'text',
+    description: 'Use this value to set the alert text.',
+  },
+  link: {
+    control: 'text',
+    description:
+      'Use this value to set the alert link text. Use along with the `onPressLink` prop.',
+  },
+  onClose: {
+    control: 'boolean',
+    description: 'Use this handle the on close event. (Use a function to handle the event.)',
+  },
+  onPressIconButton: {
+    control: 'boolean',
+    description: 'Use this handle Icon Button press. (Use a function to handle the event.)',
+  },
+} as Meta<typeof Alert>['argTypes'];
+
+AlertBasic.args = {
+  colorScheme: 'info',
+  title: 'Information',
+  text: 'Unlock the power of knowledge with the following information.',
+  link: 'Learn more',
+  onClose: false,
+  onPressIconButton: false,
+};
+
+AlertBasic.description =
+  'This is a basic Alert component example. Alerts are used to communicate a state that affects a system, feature or page';
+
+export default AlertBasic;
+
+export { Alert, AlertIcon, AlertText, Icon, VStack };