@utilitywarehouse/hearth-react-native 0.34.5 → 0.35.0

package/src/components/Rating/RatingStarFilled.tsx

@@ -1,27 +0,0 @@
-import { Path, Svg } from 'react-native-svg';
-import { useTheme } from '../../hooks';
-
-type RatingStarProps = {
-  width?: number;
-  height?: number;
-};
-
-const STAR_PATH =
-  'M16 1C16.0831 1 16.1883 1.02107 16.3262 1.09766C16.3896 1.13286 16.4424 1.183 16.4902 1.28711H16.4912L20.1777 9.8916L20.4141 10.4424L21.0117 10.4941L30.5107 11.3096C30.7062 11.3326 30.8 11.3864 30.8467 11.4238C30.915 11.4787 30.9492 11.5325 30.9707 11.6035C31.0029 11.71 31.0094 11.8192 30.9844 11.9463V11.9482C30.98 11.9702 30.9618 12.0389 30.832 12.1514L23.6338 18.2939L23.1689 18.6904L23.3096 19.2852L25.458 28.3926H25.459C25.4832 28.5045 25.4775 28.5714 25.4658 28.6133L25.4531 28.6475C25.4155 28.7291 25.3682 28.7951 25.3076 28.8516L25.2432 28.9043C25.172 28.9558 25.0868 28.9907 24.96 28.999C24.8763 29.0045 24.793 28.9887 24.6865 28.9229L24.6787 28.918L24.6699 28.9131L16.5088 24.0898L16 23.7891L15.4912 24.0898L7.33008 28.9131L7.32129 28.918L7.31348 28.9229C7.20704 28.9887 7.12371 29.0045 7.04004 28.999C6.94495 28.9928 6.87333 28.9713 6.81348 28.9395L6.75684 28.9043C6.68716 28.8537 6.63221 28.7954 6.58789 28.7236L6.54688 28.6475C6.53436 28.6202 6.51869 28.5743 6.52539 28.4902L6.54102 28.3926L8.69043 19.2852L8.83105 18.6904L8.36621 18.2939L1.16699 12.1514C1.03725 12.0389 1.01999 11.9702 1.01563 11.9482V11.9463L1.00195 11.8545C0.994777 11.765 1.00514 11.6834 1.0293 11.6035C1.05077 11.5325 1.08501 11.4787 1.15332 11.4238C1.19992 11.3864 1.2935 11.3327 1.48828 11.3096L10.9883 10.4941L11.5859 10.4424L11.8223 9.8916L15.5088 1.28711C15.5567 1.18274 15.6103 1.1329 15.6738 1.09766C15.8117 1.02107 15.9169 1 16 1Z';
-
-const RatingStarFilled = ({ width = 32, height = 30 }: RatingStarProps) => {
-  const theme = useTheme();
-
-  return (
-    <Svg width={width} height={height} viewBox="0 0 32 30" preserveAspectRatio="none">
-      <Path
-        d={STAR_PATH}
-        strokeWidth={2}
-        fill={theme.color.surface.highlight.default}
-        stroke={theme.color.border.strong}
-      />
-    </Svg>
-  );
-};
-
-export default RatingStarFilled;

package/src/components/Rating/index.ts

@@ -1,2 +0,0 @@
-export { default as Rating } from './Rating';
-export type { RatingLabels, RatingProps, RatingValue, RatingVariant } from './Rating.props';

package/src/components/Roundel/Roundel.figma.tsx

@@ -1,17 +0,0 @@
-import figma from '@figma/code-connect';
-import { Roundel } from '..';
-
-figma.connect(
-  Roundel,
-  'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=6414%3A8697&m=dev',
-  {
-    props: {
-      variant: figma.enum('Variant', {
-        Success: 'success',
-        Pending: 'pending',
-        Error: 'error',
-      }),
-    },
-    example: props => <Roundel variant={props.variant} />,
-  }
-);

package/src/components/Roundel/Roundel.props.ts

@@ -1,8 +0,0 @@
-import type { ViewProps } from 'react-native';
-
-export interface RoundelProps extends Omit<ViewProps, 'children'> {
-  /** Visual variant for the roundel status. */
-  variant?: 'success' | 'pending' | 'error';
-}
-
-export default RoundelProps;

package/src/components/Roundel/Roundel.stories.tsx

@@ -1,49 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react-native';
-import { ComponentProps } from 'react';
-import { VariantTitle } from '../../../docs/components';
-import { Flex } from '../Flex';
-import { Roundel } from './';
-
-const meta: Meta<typeof Roundel> = {
-  title: 'Stories / Roundel',
-  component: Roundel,
-  parameters: {
-    layout: 'centered',
-  },
-  argTypes: {
-    variant: {
-      control: 'radio',
-      options: ['success', 'pending', 'error'],
-    },
-  },
-  args: {
-    variant: 'success',
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Playground: Story = {
-  render: (args: ComponentProps<typeof Roundel>) => <Roundel {...args} />,
-};
-
-export const Variants: Story = {
-  parameters: {
-    controls: { exclude: ['variant'] },
-  },
-  render: () => (
-    <Flex direction="column" spacing="md" alignItems="center">
-      <VariantTitle title="Success">
-        <Roundel variant="success" />
-      </VariantTitle>
-      <VariantTitle title="Pending">
-        <Roundel variant="pending" />
-      </VariantTitle>
-      <VariantTitle title="Error">
-        <Roundel variant="error" />
-      </VariantTitle>
-    </Flex>
-  ),
-};

package/src/components/Roundel/Roundel.tsx

@@ -1,51 +0,0 @@
-import { CloseSmallIcon, TickSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
-import { View } from 'react-native';
-import { StyleSheet } from 'react-native-unistyles';
-import { Icon } from '../Icon';
-import type RoundelProps from './Roundel.props';
-
-const Roundel = ({ variant = 'success', style, ...props }: RoundelProps) => {
-  styles.useVariants({ variant });
-
-  const icon =
-    variant === 'error' ? CloseSmallIcon : variant === 'success' ? TickSmallIcon : undefined;
-
-  return (
-    <View {...props} style={[styles.container, style]}>
-      {icon ? <Icon as={icon} size="sm" /> : null}
-    </View>
-  );
-};
-
-Roundel.displayName = 'Roundel';
-
-const styles = StyleSheet.create(theme => ({
-  container: {
-    width: theme.space[300],
-    height: theme.space[300],
-    borderRadius: theme.components.parts.roundel.borderRadius,
-    alignItems: 'center',
-    justifyContent: 'center',
-    overflow: 'hidden',
-    backgroundColor: 'transparent',
-    borderWidth: 0,
-    borderStyle: 'solid',
-    variants: {
-      variant: {
-        success: {
-          backgroundColor: theme.color.feedback.positive.surface.default,
-        },
-        error: {
-          backgroundColor: theme.color.feedback.danger.surface.default,
-        },
-        pending: {
-          borderWidth: theme.components.parts.roundel.pending.borderWidth,
-          borderStyle: 'dashed',
-          borderColor: theme.color.border.strong,
-        },
-      },
-    },
-  },
-}));
-
-export default Roundel;

package/src/components/Roundel/index.ts

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

package/src/components/SectionHeader/SectionHeader.figma.tsx

@@ -1,37 +0,0 @@
-import figma from '@figma/code-connect';
-import { SectionHeader } from '../';
-
-figma.connect(
-  SectionHeader,
-  'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=9092%3A3352',
-  {
-    props: {
-      trailingContent: figma.boolean('Trailing content?', {
-        true: figma.nestedProps('Trailing content', {
-          content: figma.children('Link'),
-        }),
-      }),
-      helperText: figma.boolean('Helper text?', {
-        true: figma.string('Helper text'),
-      }),
-      heading: figma.string('Heading'),
-      badge: figma.boolean('Badge?', {
-        true: figma.children('Badge'),
-      }),
-      invalidText: figma.enum('State', {
-        Invalid: figma.nestedProps('Validation Text', {
-          text: figma.string('Text'),
-        }),
-      }),
-    },
-    example: props => (
-      <SectionHeader
-        heading={props.heading}
-        helperText={props.helperText}
-        badge={props.badge}
-        trailingContent={props.trailingContent?.content}
-        invalidText={props.invalidText?.text}
-      />
-    ),
-  }
-);

package/src/components/SectionHeader/SectionHeader.props.ts

@@ -1,29 +0,0 @@
-import { Ref } from 'react';
-import type { View, ViewProps } from 'react-native';
-import BadgeProps from '../Badge/Badge.props';
-
-interface SectionHeaderBaseProps extends Omit<ViewProps, 'children'> {
-  ref?: Ref<View>;
-}
-
-export interface SectionHeaderWithChildren extends SectionHeaderBaseProps {
-  children: ViewProps['children'];
-  heading?: never;
-  helperText?: never;
-  trailingContent?: never;
-  badge?: never;
-  invalidText?: never;
-}
-
-export interface SectionHeaderWithoutChildren extends SectionHeaderBaseProps {
-  children?: never;
-  heading: string;
-  helperText?: string;
-  trailingContent?: React.ReactNode;
-  badge?: BadgeProps;
-  invalidText?: string;
-}
-
-type SectionHeaderProps = SectionHeaderWithChildren | SectionHeaderWithoutChildren;
-
-export default SectionHeaderProps;

package/src/components/SectionHeader/SectionHeader.stories.tsx

@@ -1,86 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react-vite';
-import { SettingsMediumIcon } from '@utilitywarehouse/hearth-react-native-icons';
-import { VariantTitle } from '../../../docs/components';
-import { Flex } from '../Flex';
-import { Link } from '../Link';
-import SectionHeader from './SectionHeader';
-
-const meta = {
-  title: 'Stories / SectionHeader',
-  component: SectionHeader,
-  argTypes: {
-    heading: {
-      control: 'text',
-      description: 'The heading text to be displayed.',
-    },
-    helperText: {
-      control: 'text',
-      description: 'The heading supporting text to be displayed.',
-    },
-  },
-  args: {
-    heading: 'This is the section heading',
-    helperText: 'Helper text',
-  },
-} satisfies Meta<typeof SectionHeader>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Playground: Story = {
-  render: () => {
-    return <SectionHeader heading="This is the section heading" helperText="Helper text" />;
-  },
-};
-
-export const KitchenSink: Story = {
-  parameters: {
-    controls: { include: [] },
-  },
-  render: () => {
-    return (
-      <Flex spacing="xl" direction="column" style={{ width: '100%' }}>
-        <VariantTitle title="Default SectionHeader with helper text and link">
-          <SectionHeader
-            heading="Heading"
-            helperText="Helper text"
-            trailingContent={<Link>See more</Link>}
-          />
-        </VariantTitle>
-        <VariantTitle title="SectionHeader with icon on the left of the link ">
-          <SectionHeader
-            heading="Heading"
-            helperText="Helper text"
-            trailingContent={
-              <Link icon={SettingsMediumIcon} iconPosition="left">
-                Settings
-              </Link>
-            }
-          />
-        </VariantTitle>
-        <VariantTitle title="SectionHeader with no icon">
-          <SectionHeader
-            heading="Heading"
-            helperText="Helper text"
-            trailingContent={<Link showIcon={false}>Call to action</Link>}
-          />
-        </VariantTitle>
-        <VariantTitle title="SectionHeader with badge">
-          <SectionHeader
-            heading="Heading"
-            helperText="Helper text"
-            badge={{ text: "I'm a badge" }}
-          />
-        </VariantTitle>
-        <VariantTitle title="SectionHeader with badge and link">
-          <SectionHeader
-            heading="Heading"
-            helperText="Helper text"
-            trailingContent={<Link>Show more</Link>}
-            badge={{ text: 'New' }}
-          />
-        </VariantTitle>
-      </Flex>
-    );
-  },
-};

package/src/components/SectionHeader/SectionHeader.tsx

@@ -1,61 +0,0 @@
-import { ErrorCircleSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
-import { View } from 'react-native';
-import { StyleSheet } from 'react-native-unistyles';
-import { Badge } from '../Badge';
-import { Helper } from '../Helper';
-import SectionHeaderProps from './SectionHeader.props';
-import SectionHeaderTitle from './SectionHeaderHeading';
-import SectionHeaderHelperText from './SectionHeaderHelperText';
-import SectionHeaderTextContent from './SectionHeaderTextContent';
-import SectionHeaderTrailingContent from './SectionHeaderTrailingContent';
-
-const SectionHeader = ({
-  heading,
-  helperText,
-  children,
-  style,
-  trailingContent,
-  badge,
-  invalidText,
-  ...props
-}: SectionHeaderProps) => {
-  return (
-    <View {...props} style={[styles.container, style]}>
-      {children ? (
-        children
-      ) : (
-        <>
-          <SectionHeaderTextContent>
-            <SectionHeaderTitle>{heading}</SectionHeaderTitle>
-            {!!helperText && <SectionHeaderHelperText>{helperText}</SectionHeaderHelperText>}
-            {!!invalidText && (
-              <Helper
-                validationStatus="invalid"
-                showIcon
-                icon={ErrorCircleSmallIcon}
-                text={invalidText || ''}
-              />
-            )}
-          </SectionHeaderTextContent>
-          {!!badge && <Badge {...badge} />}
-          {!!trailingContent && (
-            <SectionHeaderTrailingContent>{trailingContent}</SectionHeaderTrailingContent>
-          )}
-        </>
-      )}
-    </View>
-  );
-};
-
-SectionHeader.displayName = 'SectionHeader';
-
-const styles = StyleSheet.create(theme => ({
-  container: {
-    flexDirection: 'row',
-    gap: theme.components.sectionHeader.gap,
-    alignItems: 'flex-start',
-    width: '100%',
-  },
-}));
-
-export default SectionHeader;

package/src/components/SectionHeader/SectionHeaderHeading.tsx

@@ -1,14 +0,0 @@
-import { Heading } from '../Heading';
-import HeadingProps from '../Heading/Heading.props';
-
-const SectionHeaderHeading = ({ children, ...props }: HeadingProps) => {
-  return (
-    <Heading size="md" {...props}>
-      {children}
-    </Heading>
-  );
-};
-
-SectionHeaderHeading.displayName = 'SectionHeaderHeading';
-
-export default SectionHeaderHeading;

package/src/components/SectionHeader/SectionHeaderHelperText.tsx

@@ -1,21 +0,0 @@
-import { StyleSheet } from 'react-native-unistyles';
-import { BodyText } from '../BodyText';
-import TextProps from '../BodyText/BodyText.props';
-
-const SectionHeaderHelperText = ({ children, ...props }: TextProps) => {
-  return (
-    <BodyText size="md" {...props} style={[styles.helperText, props.style]}>
-      {children}
-    </BodyText>
-  );
-};
-
-SectionHeaderHelperText.displayName = 'SectionHeaderHelperText';
-
-const styles = StyleSheet.create(theme => ({
-  helperText: {
-    color: theme.color.text.secondary,
-  },
-}));
-
-export default SectionHeaderHelperText;

package/src/components/SectionHeader/SectionHeaderTextContent.tsx

@@ -1,21 +0,0 @@
-import { View, type ViewProps } from 'react-native';
-import { StyleSheet } from 'react-native-unistyles';
-
-const SectionHeaderTextContent = ({ children, ...props }: ViewProps) => {
-  return (
-    <View {...props} style={[styles.container, props.style]}>
-      {children}
-    </View>
-  );
-};
-
-SectionHeaderTextContent.displayName = 'SectionHeaderTextContent';
-
-const styles = StyleSheet.create(theme => ({
-  container: {
-    gap: theme.components.sectionHeader.textContent.gap,
-    flex: 1,
-  },
-}));
-
-export default SectionHeaderTextContent;

package/src/components/SectionHeader/SectionHeaderTrailingContent.tsx

@@ -1,20 +0,0 @@
-import { View, type ViewProps } from 'react-native';
-import { StyleSheet } from 'react-native-unistyles';
-
-const SectionHeaderTrailingContent = ({ children, ...props }: ViewProps) => {
-  return (
-    <View {...props} style={[styles.container, props.style]}>
-      {children}
-    </View>
-  );
-};
-
-SectionHeaderTrailingContent.displayName = 'SectionHeaderTrailingContent';
-
-const styles = StyleSheet.create({
-  container: {
-    alignSelf: 'flex-start',
-  },
-});
-
-export default SectionHeaderTrailingContent;

package/src/components/SectionHeader/index.ts

@@ -1,5 +0,0 @@
-export { default as SectionHeader } from './SectionHeader';
-export { default as SectionHeaderHeading } from './SectionHeaderHeading';
-export { default as SectionHeaderHelperText } from './SectionHeaderHelperText';
-export { default as SectionHeaderTextContent } from './SectionHeaderTextContent';
-export { default as SectionHeaderTrailingContent } from './SectionHeaderTrailingContent';

package/src/components/SegmentedControl/SegmentedControl.context.ts

@@ -1,22 +0,0 @@
-import { createContext, useContext } from 'react';
-
-export type SegmentedControlContextValue = {
-  value?: string;
-  select: (value: string) => void;
-  disabled?: boolean;
-  size: 'sm' | 'md';
-  registerOptionLayout: (
-    value: string,
-    layout: { x: number; y: number; width: number; height: number }
-  ) => void;
-};
-
-export const SegmentedControlContext = createContext<SegmentedControlContextValue | null>(null);
-
-export const useSegmentedControlContext = () => {
-  const context = useContext(SegmentedControlContext);
-  if (!context) {
-    throw new Error('SegmentedControlOption must be used within SegmentedControl');
-  }
-  return context;
-};

package/src/components/SegmentedControl/SegmentedControl.figma.tsx

@@ -1,39 +0,0 @@
-import figma from '@figma/code-connect';
-import { SegmentedControl, SegmentedControlOption } from '../';
-
-figma.connect(
-  SegmentedControl,
-  'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=6185-1021&m=dev',
-  {
-    props: {
-      size: figma.enum('Size', {
-        'SM-32': 'sm',
-        'MD-48': 'md',
-      }),
-      options: figma.children('Option'),
-    },
-    example: props => (
-      <SegmentedControl defaultValue="option-1" size={props.size}>
-        {props.options}
-      </SegmentedControl>
-    ),
-  }
-);
-
-figma.connect(
-  SegmentedControlOption,
-  'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=4340-1252&m=dev',
-  {
-    props: {
-      label: figma.string('Label'),
-      icon: figma.boolean('Icon?', {
-        true: figma.instance('Icon-20'),
-      }),
-    },
-    example: props => (
-      <SegmentedControlOption value={'option'} icon={props.icon}>
-        {props.label}
-      </SegmentedControlOption>
-    ),
-  }
-);

package/src/components/SegmentedControl/SegmentedControl.props.ts

@@ -1,20 +0,0 @@
-import type { ReactNode } from 'react';
-import type { ViewProps } from 'react-native';
-import type { FlexLayoutProps } from '../../types';
-
-export interface SegmentedControlProps extends ViewProps, FlexLayoutProps {
-  /** Controlled selected option value. */
-  value?: string;
-  /** Initial selected option value for uncontrolled mode. */
-  defaultValue?: string;
-  /** Called when selected option changes. */
-  onValueChange?: (value: string) => void;
-  /** Size variant. */
-  size?: 'sm' | 'md';
-  /** Disables all options in the control. */
-  disabled?: boolean;
-  /** SegmentedControlOption children. */
-  children: ReactNode;
-}
-
-export default SegmentedControlProps;

package/src/components/SegmentedControl/SegmentedControl.stories.tsx

@@ -1,98 +0,0 @@
-import {
-  BroadbandSmallIcon,
-  ElectricitySmallIcon,
-  MobileSmallIcon,
-} from '@utilitywarehouse/hearth-react-native-icons';
-import { useState } from 'react';
-import { BodyText, Flex, SegmentedControl, SegmentedControlOption } from '../';
-
-const meta = {
-  title: 'Stories / Segmented Control',
-  component: SegmentedControl,
-  parameters: {
-    layout: 'centered',
-  },
-  args: {
-    size: 'sm',
-    disabled: false,
-  },
-  argTypes: {
-    size: {
-      control: 'radio',
-      options: ['sm', 'md'],
-    },
-    disabled: {
-      control: 'boolean',
-    },
-  },
-};
-
-export default meta;
-
-export const Playground = {
-  render: (args: { size?: 'sm' | 'md'; disabled?: boolean }) => (
-    <SegmentedControl defaultValue="day" {...args}>
-      <SegmentedControlOption value="day">Day</SegmentedControlOption>
-      <SegmentedControlOption value="week">Week</SegmentedControlOption>
-      <SegmentedControlOption value="month">Month</SegmentedControlOption>
-    </SegmentedControl>
-  ),
-};
-
-export const Sizes = {
-  render: () => (
-    <Flex spacing="sm" align="center">
-      <SegmentedControl defaultValue="one" size="sm">
-        <SegmentedControlOption value="one">Label</SegmentedControlOption>
-        <SegmentedControlOption value="two">Label</SegmentedControlOption>
-        <SegmentedControlOption value="three">Label</SegmentedControlOption>
-      </SegmentedControl>
-      <SegmentedControl defaultValue="one" size="md">
-        <SegmentedControlOption value="one">Label</SegmentedControlOption>
-        <SegmentedControlOption value="two">Label</SegmentedControlOption>
-        <SegmentedControlOption value="three">Label</SegmentedControlOption>
-      </SegmentedControl>
-    </Flex>
-  ),
-};
-
-export const Controlled = {
-  render: () => {
-    const [value, setValue] = useState('annual');
-    return (
-      <Flex spacing="sm" align="center">
-        <SegmentedControl value={value} onValueChange={setValue}>
-          <SegmentedControlOption value="monthly">Monthly</SegmentedControlOption>
-          <SegmentedControlOption value="annual">Annual</SegmentedControlOption>
-        </SegmentedControl>
-        <BodyText size="sm">Selected: {value}</BodyText>
-      </Flex>
-    );
-  },
-};
-
-export const Disabled = {
-  render: () => (
-    <SegmentedControl defaultValue="left" disabled>
-      <SegmentedControlOption value="left">Left</SegmentedControlOption>
-      <SegmentedControlOption value="center">Center</SegmentedControlOption>
-      <SegmentedControlOption value="right">Right</SegmentedControlOption>
-    </SegmentedControl>
-  ),
-};
-
-export const WithIcons = {
-  render: () => (
-    <SegmentedControl defaultValue="energy" size="md">
-      <SegmentedControlOption value="energy" icon={ElectricitySmallIcon}>
-        Energy
-      </SegmentedControlOption>
-      <SegmentedControlOption value="broadband" icon={BroadbandSmallIcon}>
-        Broadband
-      </SegmentedControlOption>
-      <SegmentedControlOption value="mobile" icon={MobileSmallIcon}>
-        Mobile
-      </SegmentedControlOption>
-    </SegmentedControl>
-  ),
-};