@utilitywarehouse/hearth-react-native 0.34.5 → 0.35.1

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

@@ -1,132 +0,0 @@
-import figma from '@figma/code-connect';
-import { Button } from '../';
-
-const props = {
-  disabled: figma.enum('State', {
-    Disabled: true,
-  }),
-  size: figma.enum('Size', {
-    'SM-32': 'sm',
-    'MD-48': 'md',
-  }),
-  paddingNone: figma.boolean('Padding None?'),
-  colorScheme: figma.enum('Color Scheme', {
-    Affirmative: 'affirmative',
-    Destructive: 'destructive',
-    Functional: 'functional',
-    Highlight: 'highlight',
-  }),
-  loading: figma.enum('State', {
-    Loading: true,
-  }),
-  text: figma.string('Text'),
-  ghostText: figma.string('Ghost Text'),
-  iconPosition: figma.boolean('Show icon left?', {
-    true: undefined,
-    false: figma.boolean('Show icon right?', {
-      true: 'right',
-      false: undefined,
-    }),
-  }),
-  icon: figma.boolean('Show icon left?', {
-    true: figma.instance('Icon left-20'),
-    false: figma.boolean('Show icon right?', {
-      true: figma.instance('Icon right-20'),
-      false: undefined,
-    }),
-  }),
-  variant: figma.enum('Variant', {
-    Emphasis: 'emphasis',
-    Solid: 'solid',
-    Outline: 'outline',
-    Ghost: 'ghost',
-  }),
-  inverted: figma.boolean('Inverted?'),
-};
-
-figma.connect(Button, 'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=90%3A432', {
-  props,
-  variant: {
-    Variant: 'Solid',
-  },
-  example: props => (
-    <Button
-      disabled={props.disabled}
-      size={props.size}
-      variant={props.variant}
-      inverted={props.inverted}
-      paddingNone={props.paddingNone}
-      colorScheme={props.colorScheme}
-      loading={props.loading}
-      icon={props.icon}
-      iconPosition={props.iconPosition}
-    >
-      {props.text}
-    </Button>
-  ),
-});
-figma.connect(Button, 'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=90%3A432', {
-  props,
-  variant: {
-    Variant: 'Emphasis',
-  },
-  example: props => (
-    <Button
-      disabled={props.disabled}
-      size={props.size}
-      variant={props.variant}
-      inverted={props.inverted}
-      paddingNone={props.paddingNone}
-      colorScheme={props.colorScheme}
-      loading={props.loading}
-      iconPosition={props.iconPosition}
-      icon={props.icon}
-    >
-      {props.text}
-    </Button>
-  ),
-});
-
-figma.connect(Button, 'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=90%3A432', {
-  variant: {
-    Variant: 'Outline',
-  },
-  props,
-  example: props => (
-    <Button
-      disabled={props.disabled}
-      size={props.size}
-      variant={props.variant}
-      inverted={props.inverted}
-      paddingNone={props.paddingNone}
-      colorScheme={props.colorScheme}
-      loading={props.loading}
-      icon={props.icon}
-      iconPosition={props.iconPosition}
-    >
-      {props.text}
-    </Button>
-  ),
-});
-
-figma.connect(Button, 'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=90%3A432', {
-  variant: {
-    Variant: 'Ghost',
-  },
-  props,
-  example: props => (
-    <Button
-      disabled={props.disabled}
-      size={props.size}
-      variant={props.variant}
-      inverted={props.inverted}
-      paddingNone={props.paddingNone}
-      colorScheme={props.colorScheme}
-      loading={props.loading}
-      icon={props.icon}
-      iconPosition={props.iconPosition}
-    >
-      {props.ghostText}
-    </Button>
-  ),
-});

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

@@ -1,84 +0,0 @@
-import type { ComponentType, ReactElement, ReactNode } from 'react';
-import type { PressableProps, ViewProps } from 'react-native';
-
-export type ButtonVariants =
-  | { variant?: 'solid'; colorScheme?: 'affirmative' | 'destructive'; inverted?: never }
-  | { variant?: 'outline'; colorScheme: 'affirmative' | 'destructive'; inverted?: never }
-  | { variant?: 'ghost'; colorScheme: 'affirmative' | 'destructive'; inverted?: never }
-  | { variant?: 'emphasis'; colorScheme?: 'highlight'; inverted?: boolean }
-  | { variant?: 'solid'; colorScheme?: 'highlight'; inverted?: boolean }
-  | { variant?: 'outline'; colorScheme: 'functional'; inverted?: boolean }
-  | { variant?: 'ghost'; colorScheme: 'functional'; 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

@@ -1,293 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react-native';
-import * as Icons from '@utilitywarehouse/hearth-react-native-icons';
-import { AddSmallIcon, ChevronRightSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
-import { Platform } from 'react-native';
-import type { ButtonProps } from '.';
-import { Button, ButtonGroup } from '.';
-import { VariantTitle } from '../../../docs/components';
-import { Box } from '../Box';
-import { DetailText } from '../DetailText';
-import { Flex } from '../Flex';
-
-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: ['highlight', 'destructive', 'affirmative', 'functional'],
-      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: 'highlight',
-    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 }: StoryObj<typeof meta.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 }: StoryObj<typeof meta.args>) => {
-    // @ts-expect-error - This is a playground
-    const icon = _icon === 'none' ? undefined : Icons[_icon];
-    return (
-      <ButtonGroup flexDirection="column" spacing="md">
-        <>
-          {args.colorScheme === 'highlight' && (
-            <VariantTitle title="Emphasis" invert={args.inverted}>
-              <Button {...args} variant="emphasis" icon={icon} />
-            </VariantTitle>
-          )}
-          {args.colorScheme !== 'functional' && (
-            <VariantTitle title="Solid" invert={args.inverted}>
-              <Button {...args} variant="solid" icon={icon} />
-            </VariantTitle>
-          )}
-          {args.colorScheme !== 'highlight' && (
-            <>
-              <VariantTitle title="Outline" invert={args.inverted}>
-                <Button {...args} variant="outline" icon={icon} />
-              </VariantTitle>
-              <VariantTitle title="Ghost" invert={args.inverted}>
-                <Button {...args} variant="ghost" icon={icon} />
-              </VariantTitle>
-            </>
-          )}
-        </>
-      </ButtonGroup>
-    );
-  },
-};
-
-export const PaddingNone: Story = {
-  parameters: {
-    controls: {
-      include: ['text', 'size', 'inverted', 'icon', 'iconPosition'],
-    },
-  },
-  /* eslint-disable-next-line @typescript-eslint/no-unused-vars */
-  render: ({ icon: _icon, children: _, ...args }: StoryObj<typeof meta.args>) => {
-    // @ts-expect-error - This is a playground
-    const icon = _icon === 'none' ? undefined : Icons[_icon];
-
-    return (
-      <Flex direction="column" spacing="lg">
-        <VariantTitle title="Default Padding" invert={args.inverted}>
-          <Flex direction="row" align="center" spacing="none">
-            <Box backgroundColor="brand" width="100" height="100" />
-            <Button
-              {...args}
-              colorScheme="functional"
-              variant="ghost"
-              icon={icon}
-              paddingNone={false}
-            />
-            <Box backgroundColor="brand" width="100" height="100" />
-          </Flex>
-        </VariantTitle>
-        <VariantTitle title="No Padding (paddingNone)" invert={args.inverted}>
-          <Flex direction="row" align="center" spacing="none">
-            <Box backgroundColor="brand" width="100" height="100" />
-            <Button {...args} colorScheme="functional" variant="ghost" icon={icon} paddingNone />
-            <Box backgroundColor="brand" width="100" height="100" />
-          </Flex>
-        </VariantTitle>
-      </Flex>
-    );
-  },
-};
-
-type ColorScheme = ButtonProps['colorScheme'];
-type Variant = ButtonProps['variant'];
-
-export const KitchenSink: Story = {
-  parameters: {
-    controls: { include: ['text', 'size', 'inverted'] },
-  },
-  render: ({ text, inverted, size }: StoryObj<typeof meta.args>) => {
-    const schemes: Array<ColorScheme> = ['highlight', 'destructive', 'affirmative', 'functional'];
-    const variants: Array<Variant> = ['emphasis', 'solid', 'outline', 'ghost'];
-    return (
-      <Flex direction="row" spacing="lg" wrap="wrap">
-        {schemes.map(scheme => (
-          <Flex direction="column" spacing="lg" key={scheme}>
-            {variants
-              .filter(variant => {
-                if (inverted) {
-                  if (scheme === 'highlight') {
-                    return variant === 'emphasis' || variant === 'solid';
-                  }
-                  if (scheme === 'functional') {
-                    return variant === 'outline' || variant === 'ghost';
-                  } else return false;
-                }
-                if (scheme === 'highlight') {
-                  return variant === 'emphasis' || variant === 'solid';
-                }
-                if (scheme === 'functional') {
-                  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" inverted={inverted}>
-                      {scheme} - {variant}
-                    </DetailText>
-                  </Box>
-                  <Flex direction="column" spacing="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

@@ -1,83 +0,0 @@
-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

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

package/src/components/Button/ButtonGroup.tsx

@@ -1,25 +0,0 @@
-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;