@utilitywarehouse/hearth-react-native 0.34.5 → 0.35.0

package/src/components/Expandable/Expandable.stories.tsx

@@ -1,284 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react-native';
-import {
-  ChevronDownMediumIcon,
-  ChevronUpMediumIcon,
-} from '@utilitywarehouse/hearth-react-native-icons';
-import { useState } from 'react';
-import { View } from 'react-native';
-import { BodyText, Button, Card } from '../../components';
-import Expandable from './Expandable';
-
-const meta = {
-  title: 'Stories / Expandable',
-  component: Expandable,
-  parameters: {
-    // layout: 'centered',
-  },
-  argTypes: {
-    expanded: {
-      control: 'boolean',
-      description: 'Whether the content is expanded',
-    },
-    duration: {
-      control: { type: 'number', min: 100, max: 1000, step: 50 },
-      description: 'Animation duration in milliseconds',
-    },
-    accessibilityLabel: {
-      control: 'text',
-      description: 'Accessibility label for screen readers',
-    },
-  },
-  args: {
-    expanded: false,
-    duration: 300,
-  },
-} satisfies Meta<typeof Expandable>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Playground: Story = {
-  render: (args: typeof meta.args) => {
-    const [expanded, setExpanded] = useState(args.expanded ?? false);
-
-    return (
-      <>
-        <Button onPress={() => setExpanded(!expanded)} style={{ marginBottom: 16 }}>
-          {expanded ? 'Collapse' : 'Expand'}
-        </Button>
-        <Expandable {...args} expanded={expanded}>
-          <Card>
-            <BodyText>
-              This is expandable content. It animates smoothly when toggled. You can put any content
-              here, and it will expand and collapse with animation.
-            </BodyText>
-          </Card>
-        </Expandable>
-      </>
-    );
-  },
-};
-
-export const BasicExample: Story = {
-  render: () => {
-    const [expanded, setExpanded] = useState(false);
-
-    return (
-      <>
-        <Button onPress={() => setExpanded(!expanded)} style={{ marginBottom: 16 }}>
-          Toggle Content
-        </Button>
-        <Expandable expanded={expanded}>
-          <Card>
-            <BodyText>This content expands and collapses with a smooth animation.</BodyText>
-          </Card>
-        </Expandable>
-      </>
-    );
-  },
-};
-
-export const FastAnimation: Story = {
-  render: () => {
-    const [expanded, setExpanded] = useState(false);
-
-    return (
-      <>
-        <Button onPress={() => setExpanded(!expanded)} style={{ marginBottom: 16 }}>
-          Fast Toggle
-        </Button>
-        <Expandable expanded={expanded} duration={150}>
-          <Card>
-            <BodyText>This expands and collapses quickly with a 150ms duration.</BodyText>
-          </Card>
-        </Expandable>
-      </>
-    );
-  },
-};
-
-export const SlowAnimation: Story = {
-  render: () => {
-    const [expanded, setExpanded] = useState(false);
-
-    return (
-      <>
-        <Button onPress={() => setExpanded(!expanded)} style={{ marginBottom: 16 }}>
-          Slow Toggle
-        </Button>
-        <Expandable expanded={expanded} duration={600}>
-          <Card>
-            <BodyText>This expands and collapses slowly with a 600ms duration.</BodyText>
-          </Card>
-        </Expandable>
-      </>
-    );
-  },
-};
-
-export const LongContent: Story = {
-  render: () => {
-    const [expanded, setExpanded] = useState(false);
-
-    return (
-      <>
-        <Button onPress={() => setExpanded(!expanded)} style={{ marginBottom: 16 }}>
-          {expanded ? 'Hide Details' : 'Show Details'}
-        </Button>
-        <Expandable expanded={expanded}>
-          <Card>
-            <BodyText>
-              This is a longer piece of content that demonstrates how the Expandable component
-              handles larger amounts of text. The animation smoothly transitions regardless of
-              content length.
-            </BodyText>
-            <BodyText style={{ marginTop: 12 }}>
-              You can include multiple paragraphs, and the component will measure the full height
-              and animate accordingly.
-            </BodyText>
-            <BodyText style={{ marginTop: 12 }}>
-              The animation uses Reanimated for optimal performance and smooth transitions.
-            </BodyText>
-          </Card>
-        </Expandable>
-      </>
-    );
-  },
-};
-
-export const MultipleExpandables: Story = {
-  render: () => {
-    const [expanded1, setExpanded1] = useState(false);
-    const [expanded2, setExpanded2] = useState(false);
-    const [expanded3, setExpanded3] = useState(false);
-
-    return (
-      <View style={{ width: 300, gap: 16 }}>
-        <View>
-          <Button
-            onPress={() => setExpanded1(!expanded1)}
-            style={{ marginBottom: 8 }}
-            iconPosition="right"
-            icon={expanded1 ? ChevronUpMediumIcon : ChevronDownMediumIcon}
-          >
-            Section 1
-          </Button>
-          <Expandable expanded={expanded1}>
-            <Card>
-              <BodyText>Content for section 1</BodyText>
-            </Card>
-          </Expandable>
-        </View>
-
-        <View>
-          <Button
-            onPress={() => setExpanded2(!expanded2)}
-            style={{ marginBottom: 8 }}
-            iconPosition="right"
-            icon={expanded2 ? ChevronUpMediumIcon : ChevronDownMediumIcon}
-          >
-            Section 2
-          </Button>
-          <Expandable expanded={expanded2}>
-            <Card>
-              <BodyText>Content for section 2 with more detailed information.</BodyText>
-            </Card>
-          </Expandable>
-        </View>
-
-        <View>
-          <Button
-            onPress={() => setExpanded3(!expanded3)}
-            style={{ marginBottom: 8 }}
-            iconPosition="right"
-            icon={expanded3 ? ChevronUpMediumIcon : ChevronDownMediumIcon}
-          >
-            Section 3
-          </Button>
-          <Expandable expanded={expanded3}>
-            <Card>
-              <BodyText>
-                Content for section 3 with even more information that spans multiple lines.
-              </BodyText>
-            </Card>
-          </Expandable>
-        </View>
-      </View>
-    );
-  },
-};
-
-export const ControlledExample: Story = {
-  render: () => {
-    const [expanded, setExpanded] = useState(false);
-
-    return (
-      <View style={{ width: 300 }}>
-        <View style={{ flexDirection: 'row', gap: 8, marginBottom: 16 }}>
-          <Button onPress={() => setExpanded(true)} style={{ flex: 1 }}>
-            Expand
-          </Button>
-          <Button onPress={() => setExpanded(false)} style={{ flex: 1 }}>
-            Collapse
-          </Button>
-        </View>
-        <Expandable
-          expanded={expanded}
-          onExpandedChange={setExpanded}
-          accessibilityLabel="Expandable content section"
-        >
-          <Card>
-            <BodyText>
-              This is a controlled expandable with separate expand and collapse buttons.
-            </BodyText>
-          </Card>
-        </Expandable>
-      </View>
-    );
-  },
-};
-
-export const DefaultExpanded: Story = {
-  render: () => {
-    const [expanded, setExpanded] = useState(true);
-
-    return (
-      <View style={{ width: 300 }}>
-        <Button onPress={() => setExpanded(!expanded)} style={{ marginBottom: 16 }}>
-          Toggle
-        </Button>
-        <Expandable expanded={expanded}>
-          <Card>
-            <BodyText>This content starts expanded by default.</BodyText>
-          </Card>
-        </Expandable>
-      </View>
-    );
-  },
-};
-
-export const WithCallback: Story = {
-  render: () => {
-    const [expanded, setExpanded] = useState(false);
-    const [message, setMessage] = useState('Content is collapsed');
-
-    const handleExpandedChange = (newExpanded: boolean) => {
-      console.log(newExpanded);
-      setMessage(newExpanded ? 'Content is expanded' : 'Content is collapsed');
-    };
-
-    return (
-      <View style={{ width: 300 }}>
-        <BodyText style={{ marginBottom: 8 }}>{message}</BodyText>
-        <Button onPress={() => setExpanded(!expanded)} style={{ marginBottom: 16 }}>
-          Toggle
-        </Button>
-        <Expandable expanded={expanded} onExpandedChange={handleExpandedChange}>
-          <Card>
-            <BodyText>This example demonstrates the onExpandedChange callback.</BodyText>
-          </Card>
-        </Expandable>
-      </View>
-    );
-  },
-};

package/src/components/Expandable/Expandable.tsx

@@ -1,92 +0,0 @@
-import { useEffect } from 'react';
-import { View } from 'react-native';
-import Animated, {
-  useAnimatedStyle,
-  useDerivedValue,
-  useSharedValue,
-  withTiming,
-} from 'react-native-reanimated';
-import { StyleSheet } from 'react-native-unistyles';
-import { ExpandableProps } from './Expandable.props';
-
-const Expandable = ({
-  expanded = false,
-  onExpandedChange,
-  children,
-  duration = 200,
-  style,
-  accessibilityLabel,
-  testID,
-  animateOpacity = true,
-  ...props
-}: ExpandableProps) => {
-  const height = useSharedValue(0);
-  const open = useSharedValue(expanded);
-
-  // Update open value when expanded prop changes and call callback
-  useEffect(() => {
-    if (open.value !== expanded) {
-      open.value = expanded;
-      onExpandedChange?.(expanded);
-    }
-  }, [expanded, onExpandedChange, open]);
-
-  const derivedHeight = useDerivedValue(() =>
-    withTiming(height.value * Number(open.value), {
-      duration,
-    })
-  );
-
-  const derivedOpacity = useDerivedValue(() =>
-    animateOpacity
-      ? withTiming(Number(open.value), {
-          duration,
-        })
-      : 1
-  );
-
-  const heightStyle = useAnimatedStyle(() => ({
-    height: derivedHeight.value,
-  }));
-
-  const opacityStyle = useAnimatedStyle(() => ({
-    opacity: derivedOpacity.value,
-  }));
-
-  return (
-    <Animated.View
-      style={[styles.container, heightStyle, style]}
-      accessible={true}
-      accessibilityLabel={accessibilityLabel}
-      accessibilityRole="none"
-      accessibilityState={{ expanded }}
-      testID={testID}
-      {...props}
-    >
-      <Animated.View style={opacityStyle}>
-        <View
-          onLayout={e => {
-            height.value = e.nativeEvent.layout.height;
-          }}
-          style={styles.content}
-        >
-          {children}
-        </View>
-      </Animated.View>
-    </Animated.View>
-  );
-};
-
-Expandable.displayName = 'Expandable';
-
-const styles = StyleSheet.create(() => ({
-  container: {
-    overflow: 'hidden',
-  },
-  content: {
-    position: 'absolute',
-    width: '100%',
-  },
-}));
-
-export default Expandable;

package/src/components/Expandable/index.ts

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

package/src/components/ExpandableCard/ExpandableCard.figma.tsx

@@ -1,49 +0,0 @@
-import figma from '@figma/code-connect';
-import { ExpandableCard } from '../';
-import { IconContainer } from '../IconContainer';
-
-figma.connect(
-  ExpandableCard,
-  'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=7222%3A5935',
-  {
-    props: {
-      expanded: figma.boolean('Expand?'),
-      heading: figma.string('Heading'),
-      helperText: figma.string('Helper text'),
-      leadingContent: figma.boolean('Leading content?', {
-        true: figma.nestedProps('Leading content', {
-          variant: figma.enum('Variant', {
-            Icon: figma.instance('Icon-24'),
-            'Icon Container': <IconContainer icon={figma.instance('Icon-24')} />,
-          }),
-        }),
-      }),
-      disabled: figma.enum('State', {
-        Active: true,
-      }),
-      collapsable: figma.boolean('Expand?'),
-      focusable: figma.enum('State', {
-        Focus: true,
-      }),
-      content: figma.instance('Custom content'),
-      numericalValue: figma.boolean('Numerical value?', {
-        true: figma.string('Numerical value'),
-      }),
-      badge: figma.boolean('Badge?', {
-        true: figma.instance('Badge'),
-      }),
-    },
-    example: props => (
-      <ExpandableCard
-        expanded={props.expanded}
-        heading={props.heading}
-        helperText={props.helperText}
-        leadingContent={props.leadingContent?.variant}
-        numericValue={props.numericalValue}
-        badge={props.badge}
-      >
-        {props.content}
-      </ExpandableCard>
-    ),
-  }
-);

package/src/components/ExpandableCard/ExpandableCard.props.ts

@@ -1,108 +0,0 @@
-import type { ComponentType, ReactNode } from 'react';
-import type CardProps from '../Card/Card.props';
-
-interface ExpandableCardSharedProps extends Omit<CardProps, 'children'> {
-  /**
-   * Whether the card is expanded
-   */
-  expanded?: boolean;
-
-  /**
-   * Callback when expanded state changes
-   */
-  onExpandedChange?: (expanded: boolean) => void;
-
-  /**
-   * The heading text displayed in the trigger
-   */
-  expandedContent?: ReactNode;
-
-  /**
-   * Duration of the expansion animation in milliseconds
-   * @default 200
-   */
-  duration?: number;
-
-  /**
-   * Whether to animate opacity during expansion
-   * @default true
-   */
-  animateOpacity?: boolean;
-
-  /**
-   * Whether the card is disabled
-   */
-  disabled?: boolean;
-
-  /**
-   * Test ID for testing
-   */
-  testID?: string;
-
-  /**
-   * Custom children for advanced composition
-   */
-  children?: ReactNode;
-}
-
-interface ExpandableCardDefaultTriggerProps {
-  /**
-   * The heading text displayed in the trigger
-   */
-  heading?: string;
-
-  /**
-   * Optional helper text displayed below the heading
-   */
-  helperText?: string;
-
-  /**
-   * Leading icon component
-   */
-  leadingIcon?: ComponentType;
-
-  /**
-   * Leading content (icon or custom element)
-   */
-  leadingContent?: ReactNode;
-
-  /**
-   * Badge to display
-   */
-  badge?: ReactNode;
-
-  /**
-   * Badge position
-   * @default 'bottom'
-   */
-  badgePosition?: 'top' | 'bottom';
-
-  /**
-   * Numeric value to display on the right
-   */
-  numericValue?: string | number;
-
-  /**
-   * Custom trigger content that replaces the default trigger layout.
-   */
-  triggerContent?: never;
-}
-
-interface ExpandableCardCustomTriggerProps {
-  /**
-   * Custom trigger content that replaces the default trigger layout.
-   */
-  triggerContent: ReactNode;
-  heading?: never;
-  helperText?: never;
-  leadingIcon?: never;
-  leadingContent?: never;
-  badge?: never;
-  badgePosition?: never;
-  numericValue?: never;
-}
-
-type ExpandableCardProps = ExpandableCardSharedProps &
-  (ExpandableCardDefaultTriggerProps | ExpandableCardCustomTriggerProps);
-
-export default ExpandableCardProps;