@utilitywarehouse/hearth-react-native 0.1.0

package/src/components/Button/Button.figma.tsx

@@ -0,0 +1,229 @@
+//
+// import { Button, ButtonIcon, ButtonText } from './';
+// import figma from '@figma/code-connect';
+
+// const props = {
+//   iconPosition: figma.boolean('Icon Left?', {
+//     true: 'left',
+//     false: figma.boolean('Icon Right?', {
+//       true: 'right',
+//       false: undefined,
+//     }),
+//   }),
+//   icon: figma.boolean('Icon Right?', {
+//     true: figma.instance('Icon Right'),
+//     false: figma.boolean('Icon Left?', {
+//       true: figma.instance('Icon Left'),
+//       false: undefined,
+//     }),
+//   }),
+//   iconRight: figma.instance('Icon Right'),
+//   iconLeft: figma.instance('Icon Left'),
+//   text: figma.string('Text'),
+//   colorScheme: figma.enum('colorScheme', {
+//     cyan: 'cyan',
+//     green: 'green',
+//     red: 'red',
+//   }),
+//   size: figma.enum('size', {
+//     'medium - 48 (default)': 'medium',
+//     'large - 56': 'large',
+//     'small - 32': 'small',
+//   }),
+//   disabled: figma.enum('state', {
+//     disabled: true,
+//   }),
+//   loading: figma.enum('state', {
+//     loading: true,
+//   }),
+//   inverted: figma.boolean('inverted'),
+// };
+
+// // Solid Button
+
+// figma.connect(
+//   Button,
+//   'https://www.figma.com/design/3RY3OvLA88yZksRjOfjQJm/UW-App-UI?node-id=7249-3682&m=dev',
+//   {
+//     props,
+//     links: [
+//       {
+//         name: 'Documentation',
+//         url: 'https://uw-native-ui.vercel.app/?path=/docs/native-ui-components-button--docs',
+//       },
+//     ],
+//     example: ({ text, inverted, disabled, loading, colorScheme, size, icon, iconPosition }) => (
+//       <Button
+//         variant="solid"
+//         onPress={() => console.log('button pressed')}
+//         colorScheme={colorScheme}
+//         size={size}
+//         inverted={inverted}
+//         disabled={disabled}
+//         loading={loading}
+//         iconPosition={iconPosition}
+//         icon={icon}
+//       >
+//         {text}
+//       </Button>
+//     ),
+//   }
+// );
+
+// figma.connect(
+//   Button,
+//   'https://www.figma.com/design/3RY3OvLA88yZksRjOfjQJm/UW-App-UI?node-id=7249-3682&m=dev',
+//   {
+//     props,
+//     links: [
+//       {
+//         name: 'Documentation',
+//         url: 'https://uw-native-ui.vercel.app/?path=/docs/native-ui-components-button--docs',
+//       },
+//     ],
+//     variant: {
+//       'Icon Right?': true,
+//       'Icon Left?': true,
+//     },
+//     example: ({ text, inverted, disabled, colorScheme, size, iconLeft, iconRight }) => (
+//       <Button
+//         variant="solid"
+//         onPress={() => console.log('button pressed')}
+//         colorScheme={colorScheme}
+//         size={size}
+//         inverted={inverted}
+//         disabled={disabled}
+//       >
+//         <ButtonIcon as={iconLeft} />
+//         <ButtonText>{text}</ButtonText>
+//         <ButtonIcon as={iconRight} />
+//       </Button>
+//     ),
+//   }
+// );
+
+// // Outline Button
+
+// figma.connect(
+//   Button,
+//   'https://www.figma.com/design/3RY3OvLA88yZksRjOfjQJm/UW-App-UI?node-id=7250-1321&m=dev',
+//   {
+//     props,
+//     links: [
+//       {
+//         name: 'Documentation',
+//         url: 'https://uw-native-ui.vercel.app/?path=/docs/native-ui-components-button--docs',
+//       },
+//     ],
+//     example: ({ text, inverted, disabled, loading, colorScheme, size, icon, iconPosition }) => (
+//       <Button
+//         variant="outline"
+//         onPress={() => console.log('button pressed')}
+//         colorScheme={colorScheme}
+//         size={size}
+//         inverted={inverted}
+//         disabled={disabled}
+//         loading={loading}
+//         iconPosition={iconPosition}
+//         icon={icon}
+//       >
+//         {text}
+//       </Button>
+//     ),
+//   }
+// );
+
+// figma.connect(
+//   Button,
+//   'https://www.figma.com/design/3RY3OvLA88yZksRjOfjQJm/UW-App-UI?node-id=7249-3682&m=dev',
+//   {
+//     props,
+//     links: [
+//       {
+//         name: 'Documentation',
+//         url: 'https://uw-native-ui.vercel.app/?path=/docs/native-ui-components-button--docs',
+//       },
+//     ],
+//     variant: {
+//       'Icon Right?': true,
+//       'Icon Left?': true,
+//     },
+//     example: ({ text, inverted, disabled, colorScheme, size, iconLeft, iconRight }) => (
+//       <Button
+//         variant="outline"
+//         onPress={() => console.log('button pressed')}
+//         colorScheme={colorScheme}
+//         size={size}
+//         inverted={inverted}
+//         disabled={disabled}
+//       >
+//         <ButtonIcon as={iconLeft} />
+//         <ButtonText>{text}</ButtonText>
+//         <ButtonIcon as={iconRight} />
+//       </Button>
+//     ),
+//   }
+// );
+
+// // Ghost button
+
+// figma.connect(
+//   Button,
+//   'https://www.figma.com/design/3RY3OvLA88yZksRjOfjQJm/UW-App-UI?node-id=7250-2103&m=dev',
+//   {
+//     props,
+//     links: [
+//       {
+//         name: 'Documentation',
+//         url: 'https://uw-native-ui.vercel.app/?path=/docs/native-ui-components-button--docs',
+//       },
+//     ],
+//     example: ({ text, inverted, disabled, loading, colorScheme, size, icon, iconPosition }) => (
+//       <Button
+//         variant="ghost"
+//         onPress={() => console.log('button pressed')}
+//         colorScheme={colorScheme}
+//         size={size}
+//         inverted={inverted}
+//         disabled={disabled}
+//         loading={loading}
+//         iconPosition={iconPosition}
+//         icon={icon}
+//       >
+//         {text}
+//       </Button>
+//     ),
+//   }
+// );
+
+// figma.connect(
+//   Button,
+//   'https://www.figma.com/design/3RY3OvLA88yZksRjOfjQJm/UW-App-UI?node-id=7249-3682&m=dev',
+//   {
+//     props,
+//     links: [
+//       {
+//         name: 'Documentation',
+//         url: 'https://uw-native-ui.vercel.app/?path=/docs/native-ui-components-button--docs',
+//       },
+//     ],
+//     variant: {
+//       'Icon Right?': true,
+//       'Icon Left?': true,
+//     },
+//     example: ({ text, inverted, disabled, colorScheme, size, iconLeft, iconRight }) => (
+//       <Button
+//         variant="ghost"
+//         onPress={() => console.log('button pressed')}
+//         colorScheme={colorScheme}
+//         size={size}
+//         inverted={inverted}
+//         disabled={disabled}
+//       >
+//         <ButtonIcon as={iconLeft} />
+//         <ButtonText>{text}</ButtonText>
+//         <ButtonIcon as={iconRight} />
+//       </Button>
+//     ),
+//   }
+// );

package/src/components/Button/Button.props.tsx

@@ -0,0 +1,84 @@
+import type { ComponentType, ReactElement, ReactNode } from 'react';
+import type { PressableProps, ViewProps } from 'react-native';
+
+export type ButtonVariants =
+  | { variant?: 'solid'; colorScheme?: 'green' | 'red'; inverted?: never }
+  | { variant?: 'outline'; colorScheme: 'green' | 'red'; inverted?: never }
+  | { variant?: 'ghost'; colorScheme: 'green' | 'red'; inverted?: never }
+  | { variant?: 'emphasis'; colorScheme?: 'yellow'; inverted?: boolean }
+  | { variant?: 'solid'; colorScheme?: 'yellow'; inverted?: boolean }
+  | { variant?: 'outline'; colorScheme: 'grey'; inverted?: boolean }
+  | { variant?: 'ghost'; colorScheme: 'grey'; inverted?: boolean };
+
+export type BaseButtonProps = Omit<PressableProps, 'children'> & {
+  /*
+   * If `true`, the button will be disabled.
+   * @default  false
+   */
+  disabled?: boolean;
+  size?: 'sm' | 'md';
+  pressed?: boolean;
+  paddingNone?: boolean;
+  children?: ViewProps['children'];
+} & ButtonVariants;
+
+export type ButtonWithoutChildrenProps = BaseButtonProps & {
+  children?: never;
+  text?: string;
+  /*
+   * The icon to display on the button.
+   * @default undefined
+   */
+  icon?: ComponentType;
+  /*
+   * The position of the icon.
+   * @default  'left'
+   */
+  iconPosition?: 'left' | 'right';
+  /*
+   * If `true`, the button will show a spinner.
+   * @default  false
+   */
+  loading?: boolean;
+};
+
+export type ButtonWithStringChildrenProps = BaseButtonProps & {
+  /*
+   * The content of the button.
+   */
+  children: string | number | null | undefined;
+  /*
+   * The icon to display on the button.
+   * @default undefined
+   */
+  icon?: ComponentType;
+  /*
+   * The position of the icon.
+   * @default  'left'
+   */
+  iconPosition?: 'left' | 'right';
+  /*
+   * If `true`, the button will show a spinner.
+   * @default  false
+   */
+  loading?: boolean;
+  text?: never;
+};
+
+type ReactNodeWithoutStringOrNumber = Exclude<ReactNode, string | number | Iterable<ReactNode>>;
+
+export type ButtonWithOtherChildernProps = BaseButtonProps & {
+  children:
+    | ReactNodeWithoutStringOrNumber
+    | ReactElement<any, React.JSXElementConstructor<any>>
+    | Iterable<ReactNodeWithoutStringOrNumber>;
+  icon?: never;
+  iconPosition?: never;
+  loading?: never;
+  text?: never;
+};
+
+export type ButtonProps =
+  | ButtonWithStringChildrenProps
+  | ButtonWithOtherChildernProps
+  | ButtonWithoutChildrenProps;

package/src/components/Button/Button.stories.tsx

@@ -0,0 +1,257 @@
+import { Button, ButtonGroup } from '.';
+import type { ButtonProps } from '.';
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { VariantTitle } from '../../../docs/components';
+import * as Icons from '@utilitywarehouse/hearth-react-native-icons';
+import { Flex } from '../Flex';
+import { Box } from '../Box';
+import { AddSmallIcon, ChevronRightSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
+import { DetailText } from '../DetailText';
+import { Platform } from 'react-native';
+
+const meta = {
+  title: 'Stories / Button',
+  component: Button,
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    text: {
+      type: 'string',
+      control: 'text',
+      description: 'The text of the button.',
+    },
+    size: {
+      options: ['sm', 'md'],
+      control: Platform.OS === 'android' ? 'radio' : 'select',
+      description: 'The size of the button.',
+    },
+    variant: {
+      options: ['emphasis', 'solid', 'outline', 'ghost'],
+      control: Platform.OS === 'android' ? 'radio' : 'select',
+      description: 'The variant of the button.',
+    },
+    colorScheme: {
+      options: ['yellow', 'red', 'green', 'grey'],
+      control: Platform.OS === 'android' ? 'radio' : 'select',
+      description: 'The color scheme of the button.',
+    },
+    disabled: {
+      type: 'boolean',
+      control: 'boolean',
+      description: 'To manually set disable to the button.',
+    },
+    inverted: {
+      type: 'boolean',
+      control: 'boolean',
+      description: 'To set the button to be inverted. (To only be used on `purple` backgrounds)',
+    },
+    icon: {
+      options: ['none', ...Object.keys(Icons).filter(icon => icon.includes('Small'))],
+      control: 'select',
+      description: 'The icon component for the button.',
+    },
+    iconPosition: {
+      options: ['left', 'right'],
+      control: 'select',
+      description: 'The position of the icon component in the button.',
+    },
+    loading: {
+      type: 'boolean',
+      control: 'boolean',
+      description: 'To show or hide the loading spinner component for the button.',
+    },
+    paddingNone: {
+      type: 'boolean',
+      control: 'boolean',
+      description: 'To remove the padding from the button.',
+    },
+    pressed: {
+      type: 'boolean',
+      control: 'boolean',
+      description: 'To set the button to be pressed.',
+    },
+  },
+  args: {
+    text: 'Press me',
+    size: 'md',
+    variant: 'solid',
+    colorScheme: 'yellow',
+    disabled: false,
+    inverted: false,
+    loading: false,
+    icon: undefined,
+    iconPosition: 'left',
+    paddingNone: false,
+    pressed: false,
+  },
+} satisfies Meta<typeof Button>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {
+  /* eslint-disable-next-line @typescript-eslint/no-unused-vars */
+  render: ({ icon: _icon, children: _, ...args }) => {
+    // @ts-expect-error - This is a playground
+    const icon = _icon === 'none' ? undefined : Icons[_icon];
+    return <Button {...args} icon={icon} />;
+  },
+};
+
+export const Variants: Story = {
+  parameters: {
+    controls: { exclude: ['variant'] },
+  },
+  /* eslint-disable-next-line @typescript-eslint/no-unused-vars */
+  render: ({ icon: _icon, children: _, ...args }) => {
+    // @ts-expect-error - This is a playground
+    const icon = _icon === 'none' ? undefined : Icons[_icon];
+    return (
+      <ButtonGroup flexDirection="column" space="md">
+        <>
+          {args.colorScheme === 'yellow' && (
+            <VariantTitle title="Emphasis" invert={args.inverted}>
+              <Button {...args} variant="emphasis" icon={icon} />
+            </VariantTitle>
+          )}
+          {args.colorScheme !== 'grey' && (
+            <VariantTitle title="Solid" invert={args.inverted}>
+              <Button {...args} variant="solid" icon={icon} />
+            </VariantTitle>
+          )}
+          {args.colorScheme !== 'yellow' && (
+            <>
+              <VariantTitle title="Outline" invert={args.inverted}>
+                {/* @ts-expect-error - story loop types don't match */}
+                <Button {...args} variant="outline" icon={icon} />
+              </VariantTitle>
+              <VariantTitle title="Ghost" invert={args.inverted}>
+                {/* @ts-expect-error - story loop types don't match */}
+                <Button {...args} variant="ghost" icon={icon} />
+              </VariantTitle>
+            </>
+          )}
+        </>
+      </ButtonGroup>
+    );
+  },
+};
+
+type ColorScheme = ButtonProps['colorScheme'];
+type Variant = ButtonProps['variant'];
+
+export const KitchenSink: Story = {
+  parameters: {
+    controls: { include: ['text', 'size', 'inverted'] },
+  },
+  render: ({ text, inverted, size }) => {
+    const schemes: Array<ColorScheme> = ['yellow', 'red', 'green', 'grey'];
+    const variants: Array<Variant> = ['emphasis', 'solid', 'outline', 'ghost'];
+    return (
+      <Flex direction="row" space="lg" wrap="wrap">
+        {schemes.map(scheme => (
+          <Flex direction="column" space="lg" key={scheme}>
+            {variants
+              .filter(variant => {
+                if (inverted) {
+                  if (scheme === 'yellow') {
+                    return variant === 'emphasis' || variant === 'solid';
+                  }
+                  if (scheme === 'grey') {
+                    return variant === 'outline' || variant === 'ghost';
+                  } else return false;
+                }
+                if (scheme === 'yellow') {
+                  return variant === 'emphasis' || variant === 'solid';
+                }
+                if (scheme === 'grey') {
+                  return variant === 'outline' || variant === 'ghost';
+                } else {
+                  return variant === 'solid' || variant === 'ghost' || variant === 'outline';
+                }
+              })
+              .map(variant => (
+                <Box key={variant} mb="100">
+                  <Box mb="100">
+                    <DetailText size="lg" color={inverted ? 'warmWhite50' : 'grey1000'}>
+                      {scheme} - {variant}
+                    </DetailText>
+                  </Box>
+                  <Flex direction="column" space="lg">
+                    <VariantTitle title="Default" invert={inverted}>
+                      {/* @ts-expect-error - story loop types don't match */}
+                      <Button
+                        text={text}
+                        variant={variant}
+                        colorScheme={scheme}
+                        size={size}
+                        inverted={inverted}
+                      />
+                    </VariantTitle>
+                    <VariantTitle title="Pressed" invert={inverted}>
+                      {/* @ts-expect-error - story loop types don't match */}
+                      <Button
+                        text={text}
+                        pressed
+                        variant={variant}
+                        colorScheme={scheme}
+                        size={size}
+                        inverted={inverted}
+                      />
+                    </VariantTitle>
+                    <VariantTitle title="Disabled" invert={inverted}>
+                      {/* @ts-expect-error - story loop types don't match */}
+                      <Button
+                        text={text}
+                        disabled
+                        variant={variant}
+                        colorScheme={scheme}
+                        size={size}
+                        inverted={inverted}
+                      />
+                    </VariantTitle>
+                    <VariantTitle title="Icon Left" invert={inverted}>
+                      {/* @ts-expect-error - story loop types don't match */}
+                      <Button
+                        text={text}
+                        icon={AddSmallIcon}
+                        variant={variant}
+                        colorScheme={scheme}
+                        size={size}
+                        inverted={inverted}
+                      />
+                    </VariantTitle>
+                    <VariantTitle title="Icon Left" invert={inverted}>
+                      {/* @ts-expect-error - story loop types don't match */}
+                      <Button
+                        text={text}
+                        icon={ChevronRightSmallIcon}
+                        iconPosition="right"
+                        variant={variant}
+                        colorScheme={scheme}
+                        size={size}
+                        inverted={inverted}
+                      />
+                    </VariantTitle>
+                    <VariantTitle title="Loading" invert={inverted}>
+                      {/* @ts-expect-error - story loop types don't match */}
+                      <Button
+                        text={text}
+                        loading
+                        variant={variant}
+                        colorScheme={scheme}
+                        disabled
+                        size={size}
+                        inverted={inverted}
+                      />
+                    </VariantTitle>
+                  </Flex>
+                </Box>
+              ))}
+          </Flex>
+        ))}
+      </Flex>
+    );
+  },
+};

package/src/components/Button/Button.tsx

@@ -0,0 +1,83 @@
+import type { ButtonProps, ButtonWithStringChildrenProps } from './Button.props';
+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';
+import { StyleSheet } from 'react-native-unistyles';
+import { View } from 'react-native';
+
+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 = ({ children, disabled = false, pressed, text, ...props }: ButtonProps) => {
+  const { disabled: groupDisabled, loading: groupLoading } = useButtonGroupContext();
+  const { loading } = props;
+  const isLoading = loading ?? groupLoading;
+  const buttonDisabled = isLoading || (disabled ?? groupDisabled);
+  styles.useVariants({ loading: isLoading });
+  if (typeof children === 'string' || typeof children === 'number' || !children) {
+    const { icon, iconPosition = 'left' } = props as ButtonWithStringChildrenProps;
+    return (
+      <ButtonComponent {...props} isDisabled={buttonDisabled} isPressed={pressed}>
+        {!!icon && !isLoading && iconPosition === 'left' ? <ButtonIcon as={icon} /> : null}
+        {isLoading ? (
+          <View style={styles.loadingWrapper}>
+            <ButtonSpinner />
+          </View>
+        ) : null}
+        <ButtonText style={styles.textLoading}>{children ?? text}</ButtonText>
+        {!!icon && !isLoading && iconPosition === 'right' ? <ButtonIcon as={icon} /> : null}
+      </ButtonComponent>
+    );
+  }
+  return (
+    <ButtonComponent {...props} isDisabled={buttonDisabled}>
+      {children}
+    </ButtonComponent>
+  );
+};
+
+const styles = StyleSheet.create(theme => ({
+  loadingWrapper: {
+    flexDirection: 'row',
+    gap: theme.components.button.gap,
+    position: 'absolute',
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  textLoading: {
+    variants: {
+      loading: {
+        true: {
+          opacity: 0,
+        },
+      },
+    },
+  },
+}));
+
+Button.displayName = 'Button';
+
+export default Button;

package/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);

package/src/components/Button/ButtonGroup.tsx

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