@utilitywarehouse/hearth-react-native 0.1.0

package/src/components/Spinner/Spinner.stories.tsx

@@ -0,0 +1,56 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { Spinner } from '.';
+import { coloursAsArray } from '../../utils';
+import { VariantTitle } from '../../../docs/components';
+import { Box } from '../Box';
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+const meta = {
+  title: 'Stories / Spinner',
+  component: Spinner,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+    layout: 'centered',
+  },
+  // More on argTypes: https://storybook.js.org/docs/api/argtypes
+  argTypes: {
+    size: {
+      options: ['xs', 'sm', 'md', 'lg'],
+      control: 'select',
+      description: 'The size of the Spinner.',
+    },
+    color: {
+      options: coloursAsArray(),
+      control: 'select',
+      description: 'Color of the Spinner. Use the color name from the theme.',
+    },
+  },
+  // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
+  args: {
+    size: 'md',
+  },
+} satisfies Meta<typeof Spinner>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {};
+
+export const KitchenSink: Story = {
+  render: args => (
+    <Box gap="200">
+      <VariantTitle title="XS">
+        <Spinner {...args} size="xs" />
+      </VariantTitle>
+      <VariantTitle title="SM">
+        <Spinner {...args} size="sm" />
+      </VariantTitle>
+      <VariantTitle title="MD">
+        <Spinner {...args} size="md" />
+      </VariantTitle>
+      <VariantTitle title="LG">
+        <Spinner {...args} size="lg" />
+      </VariantTitle>
+    </Box>
+  ),
+};

package/src/components/Spinner/Spinner.tsx

@@ -0,0 +1,157 @@
+import { createSpinner } from '@gluestack-ui/spinner';
+import { useCallback, useEffect, useMemo } from 'react';
+import { View } from 'react-native';
+import Animated, {
+  Easing,
+  useAnimatedProps,
+  useAnimatedStyle,
+  useReducedMotion,
+  useSharedValue,
+  withRepeat,
+  withSequence,
+  withTiming,
+} from 'react-native-reanimated';
+import { Circle, G, Svg } from 'react-native-svg';
+import { StyleSheet } from 'react-native-unistyles';
+import { useTheme } from '../../hooks';
+import { ColorValue } from '../../types';
+import { getFlattenedColorValue } from '../../utils';
+import type SpinnerProps from './Spinner.props';
+
+const AnimatedSvg = Animated.createAnimatedComponent(Svg);
+const AnimatedCircle = Animated.createAnimatedComponent(Circle);
+
+const SpinnerRoot = ({ size = 'md', color, ...props }: SpinnerProps) => {
+  const { components } = useTheme();
+  const width = components.spinner[size].size;
+  const CIRCUMFERENCE = (width - 4) * Math.PI;
+  const R = CIRCUMFERENCE / (2 * Math.PI);
+  const STROKE_WIDTH = components.spinner[size].strokeWidth;
+  const HALF_CIRCLE = R + STROKE_WIDTH;
+  const DIAMETER = 2 * HALF_CIRCLE;
+  const isReducedMotion = useReducedMotion();
+
+  const progress = useSharedValue(1);
+  const rotation = useSharedValue(0);
+
+  const startAnimation = useCallback(() => {
+    if (isReducedMotion) {
+      progress.value = withTiming(0.75, { duration: 0 });
+
+      return;
+    }
+
+    progress.value = withRepeat(withTiming(0.6, { duration: 1000 }), -1, true);
+
+    progress.value = withRepeat(
+      withSequence(withTiming(0.7, { duration: 800 }), withTiming(0.1, { duration: 2000 })),
+      -1,
+      true
+    );
+
+    rotation.value = withRepeat(
+      withTiming(360, { duration: 900, easing: Easing.linear }),
+      -1,
+      false
+    );
+  }, [progress, rotation, isReducedMotion]);
+
+  useEffect(() => {
+    startAnimation();
+  }, [startAnimation]);
+
+  const animatedCircleProps = useAnimatedProps(() => {
+    return {
+      strokeDashoffset: CIRCUMFERENCE * (1 - progress.value),
+    };
+  }, [progress]);
+
+  const animatedSvgStyle = useAnimatedStyle(
+    () => ({
+      transform: [
+        {
+          rotate: `${rotation.value}deg`,
+        },
+      ],
+    }),
+    [rotation]
+  );
+
+  const { color: themeColor, colorMode } = useTheme();
+  const colorValue: ColorValue = useMemo(
+    () => getFlattenedColorValue(color, themeColor),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [color, colorMode, themeColor]
+  );
+
+  const defaultColor = colorValue || components.spinner.defaultFill;
+
+  styles.useVariants({ size });
+
+  return (
+    <View
+      {...props}
+      style={[styles.container, props.style]}
+      aria-busy
+      aria-live="polite"
+      role="status"
+    >
+      <AnimatedSvg
+        width={width}
+        height={width}
+        viewBox={`0 0 ${DIAMETER} ${DIAMETER}`}
+        style={animatedSvgStyle}
+        color={defaultColor}
+      >
+        <G origin={`${HALF_CIRCLE}, ${HALF_CIRCLE}`} rotation={-90}>
+          <AnimatedCircle
+            fill="transparent"
+            stroke="currentColor"
+            strokeWidth={STROKE_WIDTH}
+            cx="50%"
+            cy="50%"
+            r={R}
+            strokeLinecap="round"
+            animatedProps={animatedCircleProps}
+            strokeDasharray={CIRCUMFERENCE}
+          />
+        </G>
+      </AnimatedSvg>
+    </View>
+  );
+};
+
+SpinnerRoot.displayName = 'Spinner';
+
+const styles = StyleSheet.create(theme => ({
+  container: {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: theme.components.spinner.padding,
+    variants: {
+      size: {
+        xs: {
+          width: theme.components.spinner.xs.size + theme.components.spinner.padding * 2,
+          height: theme.components.spinner.xs.size + theme.components.spinner.padding * 2,
+        },
+        sm: {
+          width: theme.components.spinner.sm.size + theme.components.spinner.padding * 2,
+          height: theme.components.spinner.sm.size + theme.components.spinner.padding * 2,
+        },
+        md: {
+          width: theme.components.spinner.md.size + theme.components.spinner.padding * 2,
+          height: theme.components.spinner.md.size + theme.components.spinner.padding * 2,
+        },
+        lg: {
+          width: theme.components.spinner.lg.size + theme.components.spinner.padding * 2,
+          height: theme.components.spinner.lg.size + theme.components.spinner.padding * 2,
+        },
+      },
+    },
+  },
+}));
+
+const Spinner = createSpinner({ Root: SpinnerRoot });
+
+export default Spinner;

package/src/components/Spinner/Spinner.web.tsx

@@ -0,0 +1,149 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import React, { useCallback, useEffect, useMemo } from 'react';
+import Animated, {
+  useSharedValue,
+  withTiming,
+  useAnimatedProps,
+  Easing,
+  withSequence,
+  withRepeat,
+  useReducedMotion,
+} from 'react-native-reanimated';
+import { Circle, G, Svg } from 'react-native-svg';
+import type SpinnerProps from './Spinner.props';
+import { createSpinner } from '@gluestack-ui/spinner';
+import { StyleSheet } from 'react-native-unistyles';
+import { View } from 'react-native';
+import { useTheme } from '../../hooks';
+import { getFlattenedColorValue } from '../../utils';
+import { ColorValue } from '../../types';
+
+const AnimatedSvg = Animated.createAnimatedComponent(Svg);
+const AnimatedCircle = Animated.createAnimatedComponent(Circle);
+
+const SpinnerRoot = ({ size = 'md', color, ...props }: SpinnerProps) => {
+  const { components } = useTheme();
+  const width = components.spinner[size].size;
+  const CIRCUMFERENCE = (width - 4) * Math.PI;
+  const R = CIRCUMFERENCE / (2 * Math.PI);
+  const STROKE_WIDTH = components.spinner[size].strokeWidth;
+  const HALF_CIRCLE = R + STROKE_WIDTH;
+  const DIAMETER = 2 * HALF_CIRCLE;
+  const isReducedMotion = useReducedMotion();
+
+  const progress = useSharedValue(1);
+  const rotation = useSharedValue(0);
+
+  const startAnimation = useCallback(() => {
+    if (isReducedMotion) {
+      progress.value = withTiming(0.75, { duration: 0 });
+
+      return;
+    }
+
+    progress.value = withRepeat(withTiming(0.6, { duration: 1000 }), -1, true);
+
+    progress.value = withRepeat(
+      withSequence(withTiming(0.7, { duration: 800 }), withTiming(0.1, { duration: 2000 })),
+      -1,
+      true
+    );
+
+    rotation.value = withRepeat(
+      withTiming(360, { duration: 900, easing: Easing.linear }),
+      -1,
+      false
+    );
+  }, [progress, rotation]);
+
+  useEffect(() => {
+    startAnimation();
+  }, [startAnimation]);
+
+  const animatedCircleProps = useAnimatedProps(() => {
+    return {
+      strokeDashoffset: CIRCUMFERENCE * (1 - progress.value),
+    };
+  }, [progress]);
+
+  const animatedSvgProps = useAnimatedProps(() => {
+    return {
+      rotation: rotation.value,
+    };
+  }, [progress]);
+
+  const { color: themeColor, colorMode } = useTheme();
+  const colorValue: ColorValue = useMemo(
+    () => getFlattenedColorValue(color, themeColor),
+    [color, colorMode, themeColor]
+  );
+
+  const defaultColor = colorValue || components.spinner.defaultFill;
+
+  styles.useVariants({ size });
+
+  return (
+    <View
+      {...props}
+      style={[styles.container, props.style]}
+      aria-busy
+      aria-live="polite"
+      role="status"
+    >
+      <AnimatedSvg
+        width={width}
+        height={width}
+        viewBox={`0 0 ${DIAMETER} ${DIAMETER}`}
+        animatedProps={animatedSvgProps}
+        color={defaultColor}
+      >
+        <G origin={`${HALF_CIRCLE}, ${HALF_CIRCLE}`} rotation={-90}>
+          <AnimatedCircle
+            fill="transparent"
+            stroke="currentColor"
+            strokeWidth={STROKE_WIDTH}
+            cx="50%"
+            cy="50%"
+            r={R}
+            strokeLinecap="round"
+            animatedProps={animatedCircleProps}
+            strokeDasharray={CIRCUMFERENCE}
+          />
+        </G>
+      </AnimatedSvg>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create(theme => ({
+  container: {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: theme.components.spinner.padding,
+    variants: {
+      size: {
+        xs: {
+          width: theme.components.spinner.xs.size + theme.components.spinner.padding * 2,
+          height: theme.components.spinner.xs.size + theme.components.spinner.padding * 2,
+        },
+        sm: {
+          width: theme.components.spinner.sm.size + theme.components.spinner.padding * 2,
+          height: theme.components.spinner.sm.size + theme.components.spinner.padding * 2,
+        },
+        md: {
+          width: theme.components.spinner.md.size + theme.components.spinner.padding * 2,
+          height: theme.components.spinner.md.size + theme.components.spinner.padding * 2,
+        },
+        lg: {
+          width: theme.components.spinner.lg.size + theme.components.spinner.padding * 2,
+          height: theme.components.spinner.lg.size + theme.components.spinner.padding * 2,
+        },
+      },
+    },
+  },
+}));
+
+const Spinner = createSpinner({ Root: SpinnerRoot });
+
+export default Spinner;

package/src/components/Spinner/index.ts

@@ -0,0 +1,2 @@
+export { default as Spinner } from './Spinner';
+export type { default as SpinnerProps } from './Spinner.props';

package/src/components/Switch/Switch.docs.mdx

@@ -0,0 +1,176 @@
+import { Meta, Controls, Story, Canvas } from '@storybook/addon-docs/blocks';
+import * as Stories from './Switch.stories';
+import { Center, Switch, Flex, Label, FormField, FormFieldLabel, FormFieldLabelText } from '../../';
+import {
+  ViewFigmaButton,
+  BackToTopButton,
+  UsageWrap,
+  SwitchList,
+  SwitchExample,
+} from '../../../docs/components';
+
+<Meta title="Components / Switch" />
+
+<ViewFigmaButton url="https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components-%26-Tokens?node-id=3044-243&t=LTpZP1nQm1AOWfUF-4" />
+
+<BackToTopButton />
+
+# Switch
+
+The Switch component is used to indicate switching between two opposing options. Switches allow users
+to turn an individual option on or off. They are usually used to activate or deactivate a specific setting.
+
+- [Playground](#playground)
+- [Usage](#usage)
+- [Props](#props)
+- [Variants](#variants)
+- [Examples](#examples)
+  - [Switch with Label](#switch-with-label)
+  - [List with Switch](#list-with-switch)
+
+## Playground
+
+<Canvas of={Stories.Playground} />
+
+<Controls of={Stories.Playground} />
+
+## Usage
+
+<UsageWrap>
+  <Center>
+    <SwitchExample />
+  </Center>
+</UsageWrap>
+
+```tsx
+import { Switch } from '@utilitywarehouse/native-ui';
+
+const MyComponent = () => {
+  const [settings, setSettings] = useState(false);
+
+  const handleChange = value => setSettings(value);
+
+  return <Switch value={settings} onValueChange={handleChange} />;
+};
+```
+
+## Props
+
+| Property      | Type                       | Default    | Description                            |
+| ------------- | -------------------------- | ---------- | -------------------------------------- |
+| value         | `boolean`                  | `false`    | The value of the switch                |
+| onValueChange | `(value: boolean) => void` | -          | Callback when the switch value changes |
+| disabled      | `boolean`                  | `false`    | If true, the switch will be disabled   |
+| size          | `'small' \| 'medium'`      | `'medium'` | The size of the switch                 |
+
+## Variants
+
+<Canvas of={Stories.Variants} />
+
+## Examples
+
+### Switch with Label
+
+When the Switch is not placed in a List Item, you should use the `Label` component next to it. See
+the [`FormField` docs](/?path=/docs/native-ui-components-form-field--docs) for more information.
+
+<UsageWrap>
+  <FormField>
+    <Flex space="sm" direction="row" align="center" justify="center">
+      <SwitchExample />
+      <FormFieldLabel>
+        <FormFieldLabelText>Enable notifications</FormFieldLabelText>
+      </FormFieldLabel>
+    </Flex>
+  </FormField>
+</UsageWrap>
+
+```tsx
+import { Switch, FormField, FormFieldLabel, FormFieldLabelText } from '@utilitywarehouse/native-ui';
+
+const MyComponent = () => {
+  const [notifications, setNotifications] = useState(false);
+
+  const handleChange = value => setNotifications(value);
+
+  return (
+    <FormField>
+      <Flex space="sm" direction="row" align="center">
+        <Switch value={notifications} onValueChange={handleChange} />
+        <FormFieldLabel>
+          <FormFieldLabelText>Enable notifications</FormFieldLabelText>
+        </FormFieldLabel>
+      </Flex>
+    </FormField>
+  );
+};
+```
+
+### List with Switch
+
+You can also use the list to display a list of switches. You can achieve this by using the `Switch`
+component as the `trailingContent` of the `ListItem`. See the [`List` docs](/?path=/docs/native-ui-components-list--docs)
+for more information.
+
+<UsageWrap>
+  <SwitchList />
+</UsageWrap>
+
+```tsx
+import React, { useState } from 'react';
+import { Card, List, ListItem, ListItemIcon, Switch } from '@utilitywarehouse/native-ui';
+import {
+  BellMediumIcon,
+  LockMediumIcon,
+  LocationMediumIcon,
+  EyeMediumIcon,
+} from '@utilitywarehouse/hearth-react-native-icons';
+
+const SwitchList = () => {
+  const [notifications, setNotifications] = useState(false);
+  const [secureId, setSecureId] = useState(false);
+  const [location, setLocation] = useState(false);
+  const [darkMode, setDarkMode] = useState(false);
+
+  return (
+    <List container="subtleWhite">
+      <ListItem
+        text="Notifications"
+        helperText="Allow notifications"
+        divider
+        leadingContent={<ListItemIcon as={BellMediumIcon} />}
+        trailingContent={
+          <Switch value={notifications} onValueChange={setNotifications} size="small" />
+        }
+        onPress={() => setNotifications(!notifications)}
+      />
+      <ListItem
+        text="Secure ID"
+        helperText="Use secure ID"
+        divider
+        leadingContent={<ListItemIcon as={LockMediumIcon} />}
+        trailingContent={<Switch value={secureId} onValueChange={setSecureId} size="small" />}
+        onPress={() => setSecureId(!secureId)}
+      />
+      <ListItem
+        text="Location"
+        helperText="Allow location"
+        divider
+        leadingContent={<ListItemIcon as={LocationMediumIcon} />}
+        trailingContent={<Switch value={location} onValueChange={setLocation} size="small" />}
+        onPress={() => setLocation(!location)}
+      />
+      <ListItem
+        text="Dark mode"
+        helperText="Enable dark mode"
+        divider
+        leadingContent={<ListItemIcon as={EyeMediumIcon} />}
+        trailingContent={<Switch value={darkMode} onValueChange={setDarkMode} size="small" />}
+        onPress={() => setDarkMode(!darkMode)}
+      />
+    </List>
+  );
+};
+
+export default SwitchList;
+```

package/src/components/Switch/Switch.figma.tsx

@@ -0,0 +1,29 @@
+import { Switch } from './';
+import figma from '@figma/code-connect';
+
+/**
+ * -- This file was auto-generated by Code Connect --
+ * `props` includes a mapping from Figma properties and variants to
+ * suggested values. You should update this to match the props of your
+ * code component, and update the `example` function to return the
+ * code example you'd like to see in Figma
+ */
+
+figma.connect(
+  Switch,
+  'https://www.figma.com/design/3RY3OvLA88yZksRjOfjQJm/UW-App-UI?node-id=9551-7352&t=fDsV1m42i8hVbZo3-4',
+  {
+    props: {
+      value: figma.boolean('checked'),
+      state: figma.enum('state', {
+        default: 'default',
+      }),
+      size: figma.enum('size', {
+        'medium - 32': 'medium',
+        'small - 24': 'small',
+      }),
+      disabled: figma.boolean('disabled'),
+    },
+    example: props => <Switch {...props} />,
+  }
+);

package/src/components/Switch/Switch.props.ts

@@ -0,0 +1,10 @@
+import type { AccessibilityProps, PressableProps } from 'react-native';
+
+interface SwitchProps extends PressableProps, AccessibilityProps {
+  value: boolean;
+  onValueChange?: (value: boolean) => void;
+  disabled?: boolean;
+  size?: 'small' | 'medium';
+}
+
+export default SwitchProps;

package/src/components/Switch/Switch.stories.tsx

@@ -0,0 +1,80 @@
+import React, { useEffect } from 'react';
+import { Switch } from '.';
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { VariantTitle } from '../../../docs/components';
+import { Flex } from '../Flex';
+
+const meta = {
+  title: 'Stories / Switch',
+  component: Switch,
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    value: {
+      control: 'boolean',
+      description: 'Use this value to set the Switch value.',
+    },
+    size: {
+      control: 'select',
+      options: ['medium', 'small'],
+      description: 'Use this value to set the Switch size.',
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Use this value to disable the Switch.',
+    },
+  },
+  args: {
+    value: false,
+    size: 'medium',
+    disabled: false,
+  },
+} satisfies Meta<typeof Switch>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {
+  render: ({ value, ...args }) => {
+    const [toggled, setToggled] = React.useState(value);
+    const handleToggle = () => {
+      setToggled(prev => !prev);
+    };
+    useEffect(() => {
+      setToggled(value);
+    }, [value]);
+    return <Switch {...args} value={toggled} onValueChange={handleToggle} />;
+  },
+};
+
+export const Variants: Story = {
+  render: () => (
+    <Flex direction="column" space="sm">
+      <VariantTitle title="Off - medium">
+        <Switch value={false} />
+      </VariantTitle>
+      <VariantTitle title="On - medium">
+        <Switch value={true} />
+      </VariantTitle>
+      <VariantTitle title="Off - medium - Disabled">
+        <Switch value={false} disabled />
+      </VariantTitle>
+      <VariantTitle title="On - medium - Disabled">
+        <Switch value={true} disabled />
+      </VariantTitle>
+      <VariantTitle title="Off - small">
+        <Switch value={false} size="small" />
+      </VariantTitle>
+      <VariantTitle title="On - small">
+        <Switch value={true} size="small" />
+      </VariantTitle>
+      <VariantTitle title="Off - small - Disabled">
+        <Switch value={false} size="small" disabled />
+      </VariantTitle>
+      <VariantTitle title="On - small - Disabled">
+        <Switch value={true} size="small" disabled />
+      </VariantTitle>
+    </Flex>
+  ),
+};