refactor: Button component styling

.github/workflows/previews.yml

@@ -110,6 +110,7 @@ jobs:
         with:
           name: ${{ github.event.pull_request.base.sha }}-env-android
           path: ./apps/native-ui-storybook/.env.android
+          include-hidden-files: true
           overwrite: true
 
       - name: See env output
@@ -217,6 +218,7 @@ jobs:
         with:
           name: ${{ github.event.pull_request.base.sha }}-env-ios
           path: ./apps/native-ui-storybook/.env.ios
+          include-hidden-files: true
           overwrite: true
 
       - name: 🚀 Upload updated bundle to Appetize

apps/native-ui-storybook/components/Button/Button.docs.mdx

@@ -34,6 +34,10 @@ The `Button` component is used to trigger an action or event, such as submitting
 - [Variants](#variants)
 - [Advanced Usage](#advanced-usage)
 - [Components](#components)
+  - [`ButtonGroup`](#buttongroup)
+  - [`ButtonIcon`](#buttonicon)
+  - [`ButtonText`](#buttontext)
+  - [`ButtonSpinner`](#buttonspinner)
 
 ## Playground
 
@@ -175,8 +179,9 @@ const MyComponent = () => {
 | Property        | Type                                                     | Description                                                    | Default |
 | --------------- | -------------------------------------------------------- | -------------------------------------------------------------- | ------- |
 | `flexDirection` | `'row' \| 'column' \| 'row-reverse' \| 'column-reverse'` | Set the direction of Button group to vertical or horizontal    | 'row'   |
-| `isDisabled`    | `boolean`                                                | When true, this will disable all the buttons in a ButtonGroup. | `false` |
-| `isAttached`    | `boolean`                                                | When attached, all buttons will be attached to each other.     | `false` |
+| `disabled`      | `boolean`                                                | When true, this will disable all the buttons in a ButtonGroup. | `false` |
+| `loading`       | `boolean`                                                | When true, this will show a loading spinner in all buttons.    | `false` |
+| `attached`      | `boolean`                                                | When attached, all buttons will be attached to each other.     | `false` |
 | `reversed`      | `boolean`                                                | To reverse the order of components.                            | `false` |
 | `space`         | `string`                                                 | It sets the space between different buttons.                   | 'md'    |
 

packages/native-ui/package.json

@@ -24,7 +24,9 @@
     "@gluestack-style/legend-motion-animation-driver": "^1.0.3",
     "@gluestack-style/react": "1.0.57",
     "@gluestack-ui/alert": "^0.1.15",
+    "@gluestack-ui/button": "^1.0.7",
     "@gluestack-ui/icon": "^0.1.22",
+    "@gluestack-ui/spinner": "^0.1.14",
     "@gluestack-ui/themed": "1.1.40",
     "@utilitywarehouse/colour-system": "workspace:^",
     "@utilitywarehouse/react-native-icons": "1.6.0",
@@ -52,6 +54,7 @@
     "react-dom": ">=16",
     "react-native": ">=0.72",
     "react-native-reanimated": "3.x",
+    "react-native-unistyles": ">=2.9.0",
     "react-native-svg": ">=13.4.0",
     "react-native-web": ">=0.19"
   },

packages/native-ui/src/components/Alert/Alert.context.ts

@@ -1,13 +1,5 @@
 import { createContext, useContext } from 'react';
 import type { AlertProps } from './Alert.props';
-// import { createAlert } from '@gluestack-ui/alert';
-// import { View, Text } from 'react-native';
-
-// export const AccessibleAlert = createAlert({
-//   Root: View,
-//   Text,
-//   Icon: View,
-// });
 
 export const AlertContext = createContext<{
   colorScheme?: AlertProps['colorScheme'];

packages/native-ui/src/components/Button/Button.context.ts

@@ -0,0 +1,13 @@
+import { createContext, useContext } from 'react';
+import type { ButtonProps } from './Button.props';
+
+export const ButtonContext = createContext<{
+  colorScheme?: ButtonProps['colorScheme'];
+  variant?: ButtonProps['variant'];
+  size?: ButtonProps['size'];
+  inverted?: ButtonProps['inverted'];
+  disabled?: ButtonProps['disabled'];
+  active?: boolean;
+}>({});
+
+export const useButtonContext = () => useContext(ButtonContext);

packages/native-ui/src/components/Button/Button.props.tsx

@@ -1,12 +1,20 @@
-import type { Button } from '@gluestack-ui/themed';
-import type { ComponentProps, ReactNode, ComponentType, ReactElement } from 'react';
+import type { ReactNode, ComponentType, ReactElement } from 'react';
+import type { PressableProps } from 'react-native';
 
-interface BaseButtonProps extends Omit<ComponentProps<typeof Button>, 'children'> {
+export interface BaseButtonProps extends Omit<PressableProps, 'children'> {
   /*
    * If `true`, the button will be disabled.
    * @default  false
    */
   disabled?: boolean;
+  /*
+   * @deprecated Use `disabled` instead.
+   */
+  isDisabled?: boolean;
+  colorScheme?: 'cyan' | 'red' | 'green' | 'grey' | 'gold';
+  size?: 'small' | 'medium' | 'large';
+  inverted?: boolean;
+  variant?: 'solid' | 'outline' | 'ghost';
 }
 
 export interface ButtonWithStringChildrenProps extends BaseButtonProps {

packages/native-ui/src/components/Button/Button.tsx

@@ -1,27 +1,54 @@
 import React from 'react';
-import { Button as GSButton } from '@gluestack-ui/themed';
 import type { ButtonProps, ButtonWithStringChildrenProps } from './Button.props';
-import { ButtonText } from './ButtonText';
-import { ButtonSpinner } from './ButtonSpinner';
-import { ButtonIcon } from './ButtonIcon';
+import ButtonTextComponent from './ButtonText';
+import ButtonSpinnerComponent from './ButtonSpinner';
+import ButtonIconComponent from './ButtonIcon';
+import { createButton } from '@gluestack-ui/button';
+
+import ButtonRoot from './ButtonRoot';
+import ButtonGroupRoot from './ButtonGroupRoot';
+import { useButtonGroupContext } from './ButtonGroup.context';
+
+const ButtonComponent = createButton({
+  Root: ButtonRoot,
+  Group: ButtonGroupRoot,
+  Icon: ButtonIconComponent,
+  Spinner: ButtonSpinnerComponent,
+  Text: ButtonTextComponent,
+});
+
+export const ButtonText = ButtonComponent.Text;
+export const ButtonSpinner = ButtonComponent.Spinner;
+export const ButtonIcon = ButtonComponent.Icon;
+export const ButtonGroupComponent = ButtonComponent.Group;
+
+ButtonText.displayName = 'ButtonText';
+ButtonSpinner.displayName = 'ButtonSpinner';
+ButtonIcon.displayName = 'ButtonIcon';
 
 const Button: React.FC<ButtonProps> = ({ children, disabled, isDisabled, ...props }) => {
+  const { disabled: groupDisabled, loading: groupLoading } = useButtonGroupContext();
+  const { loading } = props;
+  const isLoading = loading ?? groupLoading;
+  const buttonDisabled = isLoading || (disabled ?? groupDisabled ?? isDisabled);
   if (typeof children === 'string' || typeof children === 'number') {
-    const { icon, loading, iconPosition = 'left' } = props as ButtonWithStringChildrenProps;
+    const { icon, iconPosition = 'left' } = props as ButtonWithStringChildrenProps;
     return (
-      <GSButton {...props} isDisabled={loading || (disabled ?? isDisabled)}>
-        {!!icon && !loading && iconPosition === 'left' ? <ButtonIcon as={icon} /> : null}
-        {loading ? <ButtonSpinner /> : null}
+      <ButtonComponent {...props} isDisabled={buttonDisabled}>
+        {!!icon && !isLoading && iconPosition === 'left' ? <ButtonIcon as={icon} /> : null}
+        {isLoading ? <ButtonSpinner /> : null}
         <ButtonText>{children}</ButtonText>
-        {!!icon && !loading && iconPosition === 'right' ? <ButtonIcon as={icon} /> : null}
-      </GSButton>
+        {!!icon && !isLoading && iconPosition === 'right' ? <ButtonIcon as={icon} /> : null}
+      </ButtonComponent>
     );
   }
   return (
-    <GSButton {...props} isDisabled={disabled ?? isDisabled}>
+    <ButtonComponent {...props} isDisabled={buttonDisabled}>
       {children}
-    </GSButton>
+    </ButtonComponent>
   );
 };
 
+Button.displayName = 'Button';
+
 export default Button;

packages/native-ui/src/components/Button/ButtonGroup.context.ts

@@ -0,0 +1,5 @@
+import { createContext, useContext } from 'react';
+
+export const ButtonGroupContext = createContext<{ disabled?: boolean; loading?: boolean }>({});
+
+export const useButtonGroupContext = () => useContext(ButtonGroupContext);

packages/native-ui/src/components/Button/ButtonGroup.tsx

@@ -0,0 +1,21 @@
+import React, { ComponentProps, FC, useMemo } from 'react';
+import { ButtonGroupComponent } from './Button';
+import { ButtonGroupContext } from './ButtonGroup.context';
+
+const ButtonGroup: FC<
+  Omit<ComponentProps<typeof ButtonGroupComponent>, 'isDisabled' | 'isAttached' | 'isReversed'> & {
+    disabled?: boolean;
+    loading?: boolean;
+  }
+> = ({ children, disabled, loading, ...props }) => {
+  const value = useMemo(() => ({ disabled, loading }), [disabled, loading]);
+  return (
+    <ButtonGroupContext.Provider value={value}>
+      <ButtonGroupComponent {...props}>{children}</ButtonGroupComponent>
+    </ButtonGroupContext.Provider>
+  );
+};
+
+ButtonGroup.displayName = 'ButtonGroup';
+
+export default ButtonGroup;

packages/native-ui/src/components/Button/ButtonGroupRoot.tsx

@@ -0,0 +1,87 @@
+import React, { FC } from 'react';
+import { type StyleProp, Text, type ViewStyle, type ViewProps } from 'react-native';
+import { createStyleSheet, type UnistylesValues, useStyles } from 'react-native-unistyles';
+
+const ButtonGroupRoot: FC<
+  ViewProps & {
+    flexDirection?: ViewStyle['flexDirection'];
+    reversed?: boolean;
+    attached?: boolean;
+    space?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl';
+  }
+> = ({
+  children,
+  attached = false,
+  flexDirection = 'row',
+  reversed = false,
+  space = 'md',
+  ...props
+}) => {
+  let direction = flexDirection;
+  if (reversed) {
+    if (flexDirection === 'row') direction = 'row-reverse';
+    if (flexDirection === 'column') direction = 'column-reverse';
+    if (flexDirection === 'row-reverse') direction = 'row';
+    if (flexDirection === 'column-reverse') direction = 'column';
+  }
+  const { styles } = useStyles(stylesheet, {
+    attached,
+    space,
+  });
+  return (
+    <Text
+      {...props}
+      style={[styles.text, styles.extraStyles(direction) as StyleProp<ViewStyle>, props.style]}
+    >
+      {children}
+    </Text>
+  );
+};
+
+const stylesheet = createStyleSheet(({ space }) => ({
+  text: {
+    display: 'flex',
+    variants: {
+      space: {
+        xs: {
+          gap: space['1'],
+        },
+        sm: {
+          gap: space['2'],
+        },
+        md: {
+          gap: space['3'],
+        },
+        lg: {
+          gap: space['4'],
+        },
+        xl: {
+          gap: space['5'],
+        },
+        '2xl': {
+          gap: space['6'],
+        },
+        '3xl': {
+          gap: space['7'],
+        },
+        '4xl': {
+          gap: space['8'],
+        },
+      },
+      attached: {
+        true: {
+          gap: 0,
+        },
+      },
+    },
+  },
+  extraStyles: (flexDirection: ViewStyle['flexDirection']) => {
+    const extraStyles: UnistylesValues = {
+      flexDirection,
+    };
+
+    return extraStyles;
+  },
+}));
+
+export default ButtonGroupRoot;

packages/native-ui/src/components/Button/ButtonIcon.tsx

@@ -0,0 +1,89 @@
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
+import React, { ComponentProps, ComponentType, FC } from 'react';
+import { Platform, type StyleProp, type ViewStyle } from 'react-native';
+import { useButtonContext } from './Button.context';
+import { createStyleSheet, type UnistylesValues, useStyles } from 'react-native-unistyles';
+import type { BaseButtonProps } from './Button.props';
+import { Icon } from '../Icon';
+
+const ButtonIcon: FC<ComponentProps<typeof Icon> & { as?: ComponentType }> = ({
+  children,
+  ...props
+}) => {
+  const { colorScheme, variant, inverted, disabled } = useButtonContext();
+  const { styles } = useStyles(stylesheet);
+  return (
+    <Icon
+      {...props}
+      style={
+        Platform.OS === 'web'
+          ? (styles.extraStyles(colorScheme, variant, inverted, disabled) as StyleProp<ViewStyle>)
+          : [
+              styles.extraStyles(colorScheme, variant, inverted, disabled) as StyleProp<ViewStyle>,
+              props.style,
+            ]
+      }
+    >
+      {children}
+    </Icon>
+  );
+};
+
+const stylesheet = createStyleSheet(({ colorMode, colors }) => ({
+  extraStyles: (
+    colorScheme: BaseButtonProps['colorScheme'],
+    variant: BaseButtonProps['variant'],
+    inverted: BaseButtonProps['inverted'],
+    disabled: BaseButtonProps['disabled']
+  ) => {
+    const extraStyles: UnistylesValues = {};
+    const light = colorMode === 'light';
+    if (!colorScheme) return extraStyles;
+
+    if (variant === 'solid') {
+      extraStyles.color = light
+        ? colors[colorScheme === 'cyan' ? 'cyan1000' : 'white']
+        : colors[`${colorScheme}50`];
+      if (disabled) {
+        extraStyles.color = light ? colors[`${colorScheme}300`] : colors.grey400;
+      }
+      if (inverted && light && disabled) {
+        extraStyles.color = colors[`${colorScheme}100`];
+      }
+    }
+    if (variant === 'outline') {
+      extraStyles.color = light
+        ? // @ts-expect-error - TS doesn't like the dynamic key here
+          colors[`${colorScheme}${colorScheme === 'cyan' ? 1000 : 900}`]
+        : colors[`${colorScheme}900`];
+      if (disabled) {
+        extraStyles.color = light ? colors[`${colorScheme}300`] : colors.grey400;
+      }
+      if (inverted && light) {
+        extraStyles.color = colors[`${colorScheme}100`];
+      }
+      if (inverted && light && disabled && light) {
+        extraStyles.color = colors[`${colorScheme}600`];
+      }
+    }
+
+    if (variant === 'ghost') {
+      extraStyles.color = light
+        ? colors[`${colorScheme}${['red', 'cyan'].includes(colorScheme) ? 600 : 700}`]
+        : colors[`${colorScheme}600`];
+      if (disabled) {
+        extraStyles.color = light ? colors[`${colorScheme}300`] : colors.grey400;
+      }
+      if (inverted && light) {
+        extraStyles.color = colors[`${colorScheme}400`];
+      }
+      if (inverted && light && disabled) {
+        extraStyles.color = colors[`${colorScheme}600`];
+      }
+    }
+
+    return extraStyles;
+  },
+}));
+
+export default ButtonIcon;