feat: alert sub components

.github/workflows/previews.yml

@@ -1,17 +1,19 @@
 name: Build Native Previews
 
 on:
-  pull_request:
-    types: [opened, synchronize, reopened]
-    paths:
-      - 'packages/native-ui/**'
-      - 'apps/native-ui-storybook/**'
+  - push
+  # pull_request:
+  #   types: [opened, synchronize, reopened]
+  #   paths:
+  #     - 'packages/native-ui/**'
+  #     - 'apps/native-ui-storybook/**'
+
 env:
   CI: true
 
 jobs:
   build-for-android:
-    runs-on: macos-13
+    runs-on: macos-14-arm64
     concurrency:
       group: preview-android-${{ github.ref }}
       cancel-in-progress: true
@@ -61,7 +63,7 @@ jobs:
           platform: 'android'
 
   build-for-ios:
-    runs-on: macos-13
+    runs-on: macos-14-arm64
     concurrency:
       group: preview-ios-${{ github.ref }}
       cancel-in-progress: true

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

@@ -1,3 +1,4 @@
+import { dirname, join } from "path";
 const path = require('path');
 /** @type{import("@storybook/react-webpack5").StorybookConfig} */
 module.exports = {
@@ -7,12 +8,13 @@ module.exports = {
     '../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")
   ],
   framework: {
-    name: '@storybook/react-webpack5',
+    name: getAbsolutePath("@storybook/react-webpack5"),
     options: {},
   },
   docs: {
@@ -27,3 +29,7 @@ module.exports = {
     return config;
   },
 };
+
+function getAbsolutePath(value: string): any {
+  return dirname(require.resolve(join(value, "package.json")));
+}

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

@@ -2,30 +2,40 @@ import React from 'react';
 import {
   Alert,
   AlertIcon,
-  AlertChevron,
   AlertText,
   AlertTitle,
+  AlertLink,
   CheckCircleIcon,
   CloseCircleIcon,
   AlertCircleIcon,
   VStack,
   Icon,
+  AlertLinkText,
+  AlertLinkChevron,
+  AlertIconButton,
 } from '@utilitywarehouse/native-ui';
 
 import {
   InformationMediumContainedIcon,
-  ChevronRight01MediumIcon,
+  ChevronRightMediumIcon,
+  ChevronRightSmallIcon,
 } from '@utilitywarehouse/react-native-icons';
 
 const AlertBasic = ({ text = 'Selection successfully moved!', ...props }: any) => {
   return (
-    <Alert {...props} si>
+    <Alert {...props}>
       <AlertIcon as={InformationMediumContainedIcon} />
-      <VStack flex={1}>
+      <VStack flex={1} gap={4}>
         <AlertTitle>Success</AlertTitle>
         <AlertText>{text}</AlertText>
+        <AlertLink>
+          <AlertLinkText>View details</AlertLinkText>
+          <AlertLinkChevron as={ChevronRightSmallIcon} />
+        </AlertLink>
       </VStack>
-      <AlertChevron as={ChevronRight01MediumIcon} />
+      <AlertIconButton>
+        <Icon as={ChevronRightMediumIcon} />
+      </AlertIconButton>
     </Alert>
   );
 };
@@ -39,7 +49,6 @@ export {
   Alert,
   AlertIcon,
   AlertText,
-  AlertChevron,
   CheckCircleIcon,
   CloseCircleIcon,
   AlertCircleIcon,

apps/native-ui-storybook/docs/colour-system/migration.mdx

@@ -8,17 +8,15 @@ This is the migration guidelines for mapping
 [legacy colour values](https://github.com/utilitywarehouse/customer-web-ui/blob/main/packages/design-tokens/src/colors.ts)
 to the new colour system values.
 
-```
-| Old value            | New value                         |
-| -------------------- | --------------------------------- |
-| colors.purple        | colorsCommon.brandPrimaryPurple   |
-| colors.cyan          | colors.cyan500                    |
-| colors.jewel         | colors.green700                   |
-| colors.maroonFlush   | colors.red600                     |
-| colors.apple         | colors.apple400                   |
-| colors.rose          | colors.rose400                    |
-| colors.codGray10     | colors.grey100                    |
-| colors.blueRibbon    | colors.cyan600                    |
-| colors.whiteOwl      | colors.grey75                     |
-| colors.lightTint     | colors.purple100                  |
-```
+| Old value          | New value                       |
+| ------------------ | ------------------------------- |
+| colors.purple      | colorsCommon.brandPrimaryPurple |
+| colors.cyan        | colors.cyan500                  |
+| colors.jewel       | colors.green700                 |
+| colors.maroonFlush | colors.red600                   |
+| colors.apple       | colors.apple400                 |
+| colors.rose        | colors.rose400                  |
+| colors.codGray10   | colors.grey100                  |
+| colors.blueRibbon  | colors.cyan600                  |
+| colors.whiteOwl    | colors.grey75                   |
+| colors.lightTint   | colors.purple100                |

packages/native-ui/src/components/custom/AlertChevron/config.json → packages/native-ui/src/components/custom/AlertIconButton/config.json

@@ -1,5 +1,5 @@
 {
   "dependencies": { "@gluestack-ui/button": "latest" },
-  "componentDependencies": ["AsForwarder"],
+  "componentDependencies": ["Button"],
   "keywords": ["components", "core", "Alert"]
 }

packages/native-ui/src/components/custom/AlertChevron/index.tsx → packages/native-ui/src/components/custom/AlertIconButton/index.tsx

@@ -1,3 +1,3 @@
 import { Root } from './styled-components';
 
-export const AlertChevron: any = Root;
+export const AlertIconButton: any = Root;

packages/native-ui/src/components/custom/AlertIconButton/styled-components/Root.tsx

@@ -0,0 +1,24 @@
+import { styled, Pressable } from '@gluestack-ui/themed';
+
+const AlertIconButton = styled(
+  Pressable,
+  {
+    width: 24,
+    height: 24,
+    display: 'flex',
+    alignContent: 'center',
+    justifyContent: 'center',
+    _icon: {
+      width: 24,
+      height: 24,
+    },
+  },
+  {
+    componentName: 'AlertIconButton',
+    descendantStyle: ['_icon'],
+    ancestorStyle: ['_iconButton'],
+  } as const
+) as React.ForwardRefExoticComponent<import('react-native').PressableProps & {}> & {
+  displayName: string;
+};
+export default AlertIconButton;

packages/native-ui/src/components/custom/AlertLink/config.json

@@ -0,0 +1,5 @@
+{
+  "dependencies": { "@gluestack-ui/button": "latest" },
+  "componentDependencies": ["Text", "Pressable", "Icon"],
+  "keywords": ["components", "core"]
+}

packages/native-ui/src/components/custom/AlertLink/index.tsx

@@ -0,0 +1,5 @@
+export {
+  Root as AlertLink,
+  Text as AlertLinkText,
+  Icon as AlertLinkChevron,
+} from './styled-components';

packages/native-ui/src/components/custom/AlertChevron/styled-components/Root.tsx → packages/native-ui/src/components/custom/AlertLink/styled-components/Icon.tsx

@@ -1,16 +1,16 @@
 import { styled, AsForwarder } from '@gluestack-ui/themed';
 
-const AlertChevron = styled(
+const AlertLinkChevron = styled(
   AsForwarder,
   {
-    width: 24,
-    height: 24,
+    width: 16,
+    height: 16,
   },
   {
-    componentName: 'AlertChevron',
+    componentName: 'AlertLinkChevron',
     descendantStyle: [],
     ancestorStyle: ['_chevron'],
   } as const
 );
 
-export default AlertChevron;
+export default AlertLinkChevron;

packages/native-ui/src/components/custom/AlertLink/styled-components/Root.tsx

@@ -0,0 +1,20 @@
+import { styled, Pressable } from '@gluestack-ui/themed';
+
+const AlertLink = styled(
+  Pressable,
+  {
+    display: 'flex',
+    alignItems: 'center',
+    flexDirection: 'row',
+    gap: 4,
+  },
+  {
+    componentName: 'AlertLink',
+    descendantStyle: ['_text', '_chevron'],
+    ancestorStyle: ['_link'],
+  } as const
+) as React.ForwardRefExoticComponent<import('react-native').PressableProps & {}> & {
+  displayName: string;
+};
+
+export default AlertLink;

packages/native-ui/src/components/custom/AlertLink/styled-components/Text.tsx

@@ -0,0 +1,18 @@
+import { styled } from '@gluestack-ui/themed';
+import { Text } from 'react-native';
+
+const AlertLinkText = styled(
+  Text,
+  {
+    fontSize: 16,
+    lineHeight: 24,
+    fontFamily: 'WorkSans-SemiBold',
+  },
+  {
+    componentName: 'AlertLinkText',
+    descendantStyle: [],
+    ancestorStyle: ['_text'],
+  } as const
+);
+
+export default AlertLinkText;

packages/native-ui/src/components/custom/AlertLink/styled-components/index.tsx

@@ -0,0 +1,3 @@
+export { default as Root } from './Root';
+export { default as Icon } from './Icon';
+export { default as Text } from './Text';

packages/native-ui/src/components/custom/index.tsx

@@ -1,3 +1,4 @@
 export * from './IconButton';
+export * from './AlertLink';
 export * from './AlertTitle';
-export * from './AlertChevron';
+export * from './AlertIconButton';

packages/native-ui/src/config/theme/Alert.ts

@@ -13,6 +13,16 @@ export const Alert = createStyle({
   _chevron: {
     alignSelf: 'center',
   },
+  _button: {
+    width: 24,
+    height: 24,
+    padding: 0,
+    _icon: {
+      width: 24,
+      height: 24,
+      minWidth: 24,
+    },
+  },
   variants: {
     colorScheme: {
       error: {
@@ -27,6 +37,11 @@ export const Alert = createStyle({
         _chevron: {
           color: '$red700',
         },
+        _button: {
+          _icon: {
+            color: '$red700',
+          },
+        },
         _dark: {
           bg: '$darkRed50',
           borderColor: '$darkRed500',

packages/native-ui/src/config/theme/AlertIcon.ts

@@ -4,4 +4,6 @@ export const AlertIcon = createStyle({
   alignSelf: 'flex-start',
   width: 24,
   height: 24,
+  minWidth: 24,
+  minHeight: 24,
 });

packages/native-ui/src/config/theme/IconButton.ts

@@ -1,7 +1,3 @@
 import { createStyle } from '@gluestack-style/react';
 
-export const IconButton = createStyle({
-  bg: '$primary500',
-  p: '$2',
-  rounded: '$full',
-});
+export const IconButton = createStyle({});