@utilitywarehouse/hearth-react-native 0.1.0

package/src/components/IconButton/IconButton.props.ts

@@ -0,0 +1,26 @@
+import type { ComponentType } from 'react';
+import type { PressableProps } from 'react-native';
+import { ViewProps } from 'react-native-svg/lib/typescript/fabric/utils';
+import { ButtonVariants } from '../Button/Button.props';
+
+export type IconButtonProps = {
+  /*
+   * If `true`, the button will be disabled.
+   * @default  false
+   */
+  disabled?: boolean;
+  size?: 'sm' | 'md';
+  pressed?: boolean;
+  /*
+   * The icon to display on the button.
+   * @default undefined
+   */
+  icon: ComponentType;
+  /*
+   * If `true`, the button will show a spinner.
+   * @default  false
+   */
+  loading?: boolean;
+  children?: ViewProps['children'];
+} & Omit<PressableProps, 'children'> &
+  ButtonVariants;

package/src/components/IconButton/IconButton.stories.tsx

@@ -0,0 +1,215 @@
+import React, { ComponentType } from 'react';
+import { IconButton, IconButtonProps } from '.';
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { VariantTitle } from '../../../docs/components';
+import * as Icons from '@utilitywarehouse/hearth-react-native-icons';
+import { Box } from '../Box';
+import { ButtonGroup } from '../Button';
+import { Flex } from '../Flex';
+import { DetailText } from '../DetailText';
+
+const meta = {
+  title: 'Stories / IconButton',
+  component: IconButton,
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    size: {
+      options: ['sm', 'md'],
+      control: 'select',
+      description: 'The size of the button.',
+    },
+    variant: {
+      options: ['emphasis', 'solid', 'outline', 'ghost'],
+      control: 'select',
+      description: 'The variant of the button.',
+    },
+    colorScheme: {
+      options: ['yellow', 'red', 'green', 'grey'],
+      control: '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.',
+    },
+    loading: {
+      type: 'boolean',
+      control: 'boolean',
+      description: 'To show or hide the loading spinner component for the button.',
+    },
+    pressed: {
+      type: 'boolean',
+      control: 'boolean',
+      description: 'To set the button to be pressed.',
+    },
+  },
+  args: {
+    size: 'md',
+    variant: 'solid',
+    colorScheme: 'yellow',
+    icon: 'AddMediumIcon' as unknown as ComponentType,
+    loading: false,
+    disabled: false,
+    inverted: false,
+    pressed: false,
+  },
+} satisfies Meta<typeof IconButton>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {
+  render: ({ icon: _icon, ...args }) => {
+    // @ts-expect-error - This is a playground
+    const icon = _icon === 'none' ? undefined : Icons[_icon];
+    return <IconButton {...args} icon={icon} />;
+  },
+};
+
+export const Variants: Story = {
+  parameters: {
+    controls: { exclude: ['variant'] },
+  },
+  render: ({ icon: _icon, ...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}>
+              <IconButton {...args} variant="emphasis" icon={icon} />
+            </VariantTitle>
+          )}
+          {args.colorScheme !== 'grey' && (
+            <VariantTitle title="Solid" invert={args.inverted}>
+              <IconButton {...args} variant="solid" icon={icon} />
+            </VariantTitle>
+          )}
+          {args.colorScheme !== 'yellow' && (
+            <>
+              <VariantTitle title="Outline" invert={args.inverted}>
+                {/* @ts-expect-error - story loop types don't match */}
+                <IconButton {...args} variant="outline" icon={icon} />
+              </VariantTitle>
+              <VariantTitle title="Ghost" invert={args.inverted}>
+                {/* @ts-expect-error - story loop types don't match */}
+                <IconButton {...args} variant="ghost" icon={icon} />
+              </VariantTitle>
+            </>
+          )}
+        </>
+      </ButtonGroup>
+    );
+  },
+};
+
+type ColorScheme = IconButtonProps['colorScheme'];
+type Variant = IconButtonProps['variant'];
+
+export const KitchenSink: Story = {
+  parameters: {
+    controls: { include: ['icon'] },
+  },
+  render: ({ icon: _icon, inverted, size }) => {
+    // @ts-expect-error - This is a playground
+    const icon = _icon === 'none' ? undefined : Icons[_icon];
+    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 */}
+                      <IconButton
+                        variant={variant}
+                        colorScheme={scheme}
+                        size={size}
+                        inverted={inverted}
+                        icon={icon}
+                      />
+                    </VariantTitle>
+                    <VariantTitle title="Pressed" invert={inverted}>
+                      {/* @ts-expect-error - story loop types don't match */}
+                      <IconButton
+                        pressed
+                        variant={variant}
+                        colorScheme={scheme}
+                        size={size}
+                        inverted={inverted}
+                        icon={icon}
+                      />
+                    </VariantTitle>
+                    <VariantTitle title="Disabled" invert={inverted}>
+                      {/* @ts-expect-error - story loop types don't match */}
+                      <IconButton
+                        disabled
+                        variant={variant}
+                        colorScheme={scheme}
+                        size={size}
+                        inverted={inverted}
+                        icon={icon}
+                      />
+                    </VariantTitle>
+                    <VariantTitle title="Loading" invert={inverted}>
+                      {/* @ts-expect-error - story loop types don't match */}
+                      <IconButton
+                        loading
+                        variant={variant}
+                        colorScheme={scheme}
+                        disabled
+                        size={size}
+                        inverted={inverted}
+                        icon={icon}
+                      />
+                    </VariantTitle>
+                  </Flex>
+                </Box>
+              ))}
+          </Flex>
+        ))}
+      </Flex>
+    );
+  },
+};

package/src/components/IconButton/IconButton.tsx

@@ -0,0 +1,37 @@
+import { createButton } from '@gluestack-ui/button';
+import { IconButtonProps } from './IconButton.props';
+import IconButtonRootComponent from './IconButtonRoot';
+import IconButtonIconComponent from './IconButtonIcon';
+import IconButtonSpinerComponent from './IconButtonSpinner';
+import { useButtonGroupContext } from '../Button/ButtonGroup.context';
+
+const IconButtonComponent = createButton({
+  Root: IconButtonRootComponent,
+  Icon: IconButtonIconComponent,
+  Group: () => null,
+  Text: () => null,
+  Spinner: IconButtonSpinerComponent,
+});
+
+const IconButtonSpinner = IconButtonComponent.Spinner;
+const IconButtonIcon = IconButtonComponent.Icon;
+
+IconButtonSpinner.displayName = 'IconButtonSpinner';
+IconButtonIcon.displayName = 'IconButtonIcon';
+
+const IconButton = ({ icon, disabled = false, pressed, ...props }: IconButtonProps) => {
+  const { disabled: groupDisabled, loading: groupLoading } = useButtonGroupContext();
+  const { loading } = props;
+  const isLoading = loading ?? groupLoading;
+  const buttonDisabled = isLoading || (disabled ?? groupDisabled);
+
+  return (
+    <IconButtonComponent {...props} icon={icon} isDisabled={buttonDisabled} isPressed={pressed}>
+      {loading ? <IconButtonSpinner /> : <IconButtonIcon as={icon} />}
+    </IconButtonComponent>
+  );
+};
+
+IconButton.displayName = 'IconButton';
+
+export default IconButton;

package/src/components/IconButton/IconButtonIcon.tsx

@@ -0,0 +1,155 @@
+import { Platform, StyleProp, ViewStyle } from 'react-native';
+import { useIconButtonContext } from './IconButton.context';
+import { StyleSheet } from 'react-native-unistyles';
+import { Icon } from '../Icon';
+import IconProps from '../Icon/Icon.props';
+
+const IconButtonIcon = (props: IconProps) => {
+  const { colorScheme, variant, inverted, disabled, size } = useIconButtonContext();
+  styles.useVariants({
+    colorScheme,
+    variant,
+    inverted,
+    disabled,
+    size,
+  });
+  return (
+    <Icon
+      {...props}
+      style={
+        Platform.OS === 'web'
+          ? StyleSheet.compose(styles.icon as StyleProp<ViewStyle>, props.style)
+          : [styles.icon as ViewStyle, props.style]
+      }
+    >
+      {props.children}
+    </Icon>
+  );
+};
+
+IconButtonIcon.displayName = 'IconButtonIcon';
+
+const styles = StyleSheet.create(theme => ({
+  icon: {
+    variants: {
+      variant: {
+        emphasis: {},
+        solid: {},
+        outline: {},
+        ghost: {},
+      },
+      colorScheme: {
+        yellow: {},
+        red: {},
+        green: {},
+        grey: {},
+      },
+      inverted: {
+        true: {},
+      },
+      disabled: {
+        true: {},
+      },
+      size: {
+        sm: {
+          width: 20,
+          height: 20,
+        },
+        md: {
+          width: 24,
+          height: 24,
+        },
+      },
+    },
+    compoundVariants: [
+      {
+        variant: 'emphasis',
+        colorScheme: 'yellow',
+        styles: {
+          color: theme.components.button.emphasis.yellow.foregroundColor,
+        },
+      },
+      {
+        variant: 'solid',
+        colorScheme: 'yellow',
+        styles: {
+          color: theme.components.button.solid.yellow.foregroundColor,
+        },
+      },
+      {
+        variant: 'solid',
+        colorScheme: 'red',
+        styles: {
+          color: theme.components.button.solid.red.foregroundColor,
+        },
+      },
+      {
+        variant: 'solid',
+        colorScheme: 'green',
+        styles: {
+          color: theme.components.button.solid.green.foregroundColor,
+        },
+      },
+      {
+        variant: 'outline',
+        colorScheme: 'red',
+        styles: {
+          color: theme.components.button.outline.red.foregroundColor,
+        },
+      },
+      {
+        variant: 'outline',
+        colorScheme: 'green',
+        styles: {
+          color: theme.components.button.outline.green.foregroundColor,
+        },
+      },
+      {
+        variant: 'outline',
+        colorScheme: 'grey',
+        styles: {
+          color: theme.components.button.outline.grey.foregroundColor,
+        },
+      },
+      {
+        variant: 'outline',
+        colorScheme: 'grey',
+        inverted: true,
+        styles: {
+          color: theme.components.button.outline.grey.inverted.foregroundColor,
+        },
+      },
+      {
+        variant: 'ghost',
+        colorScheme: 'red',
+        styles: {
+          color: theme.components.button.ghost.red.foregroundColor,
+        },
+      },
+      {
+        variant: 'ghost',
+        colorScheme: 'green',
+        styles: {
+          color: theme.components.button.ghost.green.foregroundColor,
+        },
+      },
+      {
+        variant: 'ghost',
+        colorScheme: 'grey',
+        styles: {
+          color: theme.components.button.outline.grey.foregroundColor,
+        },
+      },
+      {
+        variant: 'ghost',
+        colorScheme: 'grey',
+        inverted: true,
+        styles: {
+          color: theme.components.button.outline.grey.inverted.foregroundColor,
+        },
+      },
+    ],
+  },
+}));
+
+export default IconButtonIcon;