@utilitywarehouse/hearth-react-native 0.1.0

package/docs/components/AllComponents.web.tsx

@@ -0,0 +1,442 @@
+import React, { useCallback, useEffect, useRef } from 'react';
+
+import {
+  BroadbandMediumIcon,
+  ChevronRightMediumIcon,
+  ElectricityMediumIcon,
+  InsuranceMediumIcon,
+  MobileMediumIcon,
+} from '@utilitywarehouse/hearth-react-native-icons';
+import { Pressable, ScrollView, View, ViewProps } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import {
+  Accordion,
+  AccordionItem,
+  Alert,
+  Badge,
+  BodyText,
+  BottomSheet,
+  BottomSheetModalProvider,
+  BottomSheetView,
+  Box,
+  Button,
+  Card,
+  Center,
+  Checkbox,
+  DetailText,
+  Divider,
+  Flex,
+  FormField,
+  Grid,
+  Heading,
+  Icon,
+  IconButton,
+  InlineLink,
+  Input,
+  LI,
+  Link,
+  List,
+  ListItem,
+  OL,
+  Radio,
+  RadioCard,
+  RadioCardGroup,
+  RadioGroup,
+  Select,
+  Skeleton,
+  Spinner,
+  Switch,
+  Textarea,
+  ToggleButtonCard,
+  ToggleButtonCardGroup,
+  UL,
+  useColorMode,
+} from '../../src';
+
+const ComponentWrapper = ({
+  name,
+  link,
+  children,
+}: {
+  name: string;
+  link: string;
+  children?: ViewProps['children'];
+}) => {
+  const navigate = () => {
+    if (window.top) {
+      window.top.location.href = link;
+    }
+  };
+  return (
+    <View style={styles.component}>
+      <View style={styles.componentWrap}>{children}</View>
+      <Pressable style={styles.textWrap} onPress={navigate}>
+        <BodyText style={styles.text} weight="semibold">
+          {name}
+        </BodyText>
+      </Pressable>
+    </View>
+  );
+};
+
+const AllComponents: React.FC = () => {
+  const [selectValue, setSelectValue] = React.useState('1');
+  const [toggleButtonValue, setToggleButtonValue] = React.useState('');
+  const bottomSheetRef = useRef<BottomSheet>(null);
+  const handleOpenPress = useCallback(() => {
+    bottomSheetRef.current?.expand();
+  }, []);
+  useEffect(() => {
+    if (bottomSheetRef.current) {
+      setTimeout(() => {
+        bottomSheetRef.current?.expand();
+      }, 300);
+    }
+  }, [bottomSheetRef]);
+  const [switchEnabled, setSwitchEnabled] = React.useState(false);
+  const toggleSwitch = () => setSwitchEnabled(!switchEnabled);
+  const [colorMode] = useColorMode();
+  const isDark = colorMode === 'dark';
+  return (
+    <div className="sb-unstyled">
+      <ScrollView contentContainerStyle={styles.container}>
+        <Flex direction="row" wrap="wrap" space="md">
+          <ComponentWrapper name="Accordion" link="/?path=/docs/components-accordion--docs">
+            <Center flex={1} p="200">
+              <Accordion type="single">
+                <AccordionItem title="Accordion Item 1">
+                  <BodyText>Accordion Item 1 Content</BodyText>
+                </AccordionItem>
+                <AccordionItem title="Accordion Item 2">
+                  <BodyText>Accordion Item 2 Content</BodyText>
+                </AccordionItem>
+              </Accordion>
+            </Center>
+          </ComponentWrapper>
+          <ComponentWrapper name="Alert" link="/?path=/docs/components-alert--docs">
+            <Center flex={1}>
+              <Alert text="This is an alert" />
+            </Center>
+          </ComponentWrapper>
+          <ComponentWrapper name="Badge" link="/?path=/docs/components-badge--docs">
+            <Center gap="200" flex={1}>
+              <View>
+                <Badge>This is a badge</Badge>
+              </View>
+              <View>
+                <Badge colorScheme="red">This is a red badge</Badge>
+              </View>
+            </Center>
+          </ComponentWrapper>
+          <ComponentWrapper name="Body Text" link="/?path=/docs/typography-body-text--docs">
+            <Center flex={1}>
+              <BodyText>This is some Body Text</BodyText>
+            </Center>
+          </ComponentWrapper>
+          <ComponentWrapper name="Bottom Sheet" link="/?path=/docs/components-bottom-sheet--docs">
+            <Center flex={1}>
+              <Button onPress={handleOpenPress}>Open Bottom Sheet</Button>
+              <BottomSheet ref={bottomSheetRef} index={1}>
+                <BottomSheetView>
+                  <Box gap="200">
+                    <BodyText>This is a bottom sheet with content.</BodyText>
+                    <Button onPress={() => bottomSheetRef.current?.close()}>
+                      Close Bottom Sheet
+                    </Button>
+                  </Box>
+                </BottomSheetView>
+              </BottomSheet>
+            </Center>
+          </ComponentWrapper>
+          <ComponentWrapper name="Box" link="/?path=/docs/primitives-box--docs">
+            <Center flex={1}>
+              <Box backgroundColor="grey900" padding="300" width={200} height={100}>
+                <BodyText color={isDark ? 'grey100' : 'white'} weight="semibold">
+                  This is a Box
+                </BodyText>
+              </Box>
+            </Center>
+          </ComponentWrapper>
+          <ComponentWrapper name="Button" link="/?path=/docs/components-button--docs">
+            <Center flex={1}>
+              <Button colorScheme="yellow" variant="emphasis" onPress={() => null}>
+                Press me
+              </Button>
+            </Center>
+          </ComponentWrapper>
+          <ComponentWrapper name="Card" link="/?path=/docs/components-card--docs">
+            <Center flex={1}>
+              <Card colorScheme="white">
+                <Heading>I am a card</Heading>
+                <BodyText>And do card stuff.</BodyText>
+              </Card>
+            </Center>
+          </ComponentWrapper>
+          <ComponentWrapper name="Center" link="/?path=/docs/primitives-center--docs">
+            <Center flex={1}>
+              <Center backgroundColor="red400" padding="300" width={200} height={100}>
+                <BodyText color={isDark ? 'grey1000' : 'white'} weight="semibold">
+                  I am in the Center
+                </BodyText>
+              </Center>
+            </Center>
+          </ComponentWrapper>
+
+          <ComponentWrapper name="Checkbox" link="/?path=/docs/forms-checkbox--docs">
+            <Center flex={1}>
+              <View>
+                <Checkbox label="I'm a Checkbox" value="" />
+              </View>
+            </Center>
+          </ComponentWrapper>
+          <ComponentWrapper name="Detail Text" link="/?path=/docs/typography-detail-text--docs">
+            <Center flex={1}>
+              <DetailText>This is some Detail Text</DetailText>
+            </Center>
+          </ComponentWrapper>
+          <ComponentWrapper name="Divider" link="/?path=/docs/components-divider--docs">
+            <Center flex={1} p="300">
+              <BodyText>This text is divided</BodyText>
+              <Divider space="sm" />
+              <BodyText>From this text</BodyText>
+            </Center>
+          </ComponentWrapper>
+
+          <ComponentWrapper name="Flex" link="/?path=/docs/primitives-flex--docs">
+            <Center flex={1}>
+              <Flex direction="row" space="md">
+                <Box w={40} h={40} bg="blue300" />
+                <Box w={40} h={40} bg="blue400" />
+                <Box w={40} h={40} bg="blue500" />
+                <Box w={40} h={40} bg="blue600" />
+              </Flex>
+            </Center>
+          </ComponentWrapper>
+          <ComponentWrapper name="Form Field" link="/?path=/docs/forms-form-field--docs">
+            <Center flex={1}>
+              <FormField
+                validationStatus="invalid"
+                label="This is a form field"
+                validText="Valid form field text"
+                invalidText="And an invalid error message"
+              >
+                <Input onChange={() => console.log('###')} placeholder="" />
+              </FormField>
+            </Center>
+          </ComponentWrapper>
+          <ComponentWrapper name="Grid" link="/?path=/docs/primitives-grid--docs">
+            <Center flex={1}>
+              <Box width={100}>
+                <Grid columns={2} space="md">
+                  <Box w={40} h={40} bg="blue300" />
+                  <Box w={40} h={40} bg="blue400" />
+                  <Box w={40} h={40} bg="blue500" />
+                  <Box w={40} h={40} bg="blue600" />
+                </Grid>
+              </Box>
+            </Center>
+          </ComponentWrapper>
+          <ComponentWrapper name="Heading" link="/?path=/docs/typography-heading--docs">
+            <Center flex={1}>
+              <Heading>This is a Heading</Heading>
+            </Center>
+          </ComponentWrapper>
+          <ComponentWrapper name="Icon Button" link="/?path=/docs/components-iconbutton--docs">
+            <Center flex={1}>
+              <IconButton icon={ChevronRightMediumIcon} size="md" onPress={() => null} />
+            </Center>
+          </ComponentWrapper>
+          <ComponentWrapper name="Icons" link="/?path=/docs/components-icons--docs">
+            <Center flex={1}>
+              <Flex direction="row" space="lg">
+                <Icon as={ElectricityMediumIcon} color="energyBlue700" />
+                <Icon as={MobileMediumIcon} color="mobileRose700" />
+                <Icon as={BroadbandMediumIcon} color="broadbandGreen700" />
+                <Icon as={InsuranceMediumIcon} color="insuranceOrange700" />
+              </Flex>
+            </Center>
+          </ComponentWrapper>
+          <ComponentWrapper
+            name="Inline Link"
+            link="/?path=/docs/utility-components-inline-link--docs"
+          >
+            <Center flex={1}>
+              <InlineLink href="https://www.utilitywarehouse.co.uk" target="_blank">
+                This is an inline link
+              </InlineLink>
+            </Center>
+          </ComponentWrapper>
+          <ComponentWrapper name="Input" link="/?path=/docs/forms-input--docs">
+            <Center flex={1}>
+              <Input placeholder="This is an input" />
+            </Center>
+          </ComponentWrapper>
+          <ComponentWrapper name="Link" link="/?path=/docs/components-link--docs">
+            <Center flex={1}>
+              <Link href="https://www.utilitywarehouse.co.uk" target="_blank">
+                This is a link
+              </Link>
+            </Center>
+          </ComponentWrapper>
+          <ComponentWrapper name="List" link="/?path=/docs/components-list--docs">
+            <Center flex={1} p="300">
+              <List>
+                <ListItem text="List Item 1" divider onPress={() => console.log('item pressed')} />
+                <ListItem text="List Item 2" onPress={() => console.log('item pressed')} />
+              </List>
+            </Center>
+          </ComponentWrapper>
+          <ComponentWrapper
+            name="Ordered List"
+            link="/?path=/docs/utility-components-ul-ol-lists--docs"
+          >
+            <Center flex={1}>
+              <OL>
+                <LI>
+                  <BodyText>List Item 1</BodyText>
+                </LI>
+                <LI>
+                  <BodyText>List Item 2</BodyText>
+                </LI>
+              </OL>
+            </Center>
+          </ComponentWrapper>
+          <ComponentWrapper name="Radio" link="/?path=/docs/forms-radio--docs">
+            <Center flex={1}>
+              <RadioGroup>
+                <Radio label="I'm a Radio" value="1" />
+                <Radio label="Me too" value="2" />
+              </RadioGroup>
+            </Center>
+          </ComponentWrapper>
+          <ComponentWrapper name="Radio Card" link="/?path=/docs/components-radio-card--docs">
+            <Center flex={1}>
+              <RadioCardGroup aria-label="Select Tariff" nativeID="RadioCard-group">
+                <RadioCard
+                  value="fixed"
+                  aria-label="Debit Card Payment"
+                  label="I'm a Radio Card"
+                ></RadioCard>
+              </RadioCardGroup>
+            </Center>
+          </ComponentWrapper>
+          <ComponentWrapper name="Select" link="/?path=/docs/forms-select--docs">
+            <Center flex={1}>
+              <BottomSheetModalProvider>
+                <Select
+                  label="Choose an option"
+                  placeholder="Select an option"
+                  options={[
+                    { label: 'Option 1', value: '1' },
+                    { label: 'Option 2', value: '2' },
+                    { label: 'Option 3', value: '3' },
+                  ]}
+                  value={selectValue}
+                  onValueChange={setSelectValue}
+                />
+              </BottomSheetModalProvider>
+            </Center>
+          </ComponentWrapper>
+          <ComponentWrapper name="Skeleton" link="/?path=/docs/components-skeleton--docs">
+            <Center flex={1}>
+              <Flex direction="row" space="sm">
+                <Skeleton width={30} height={30} />
+                <Flex space="sm">
+                  <Skeleton width={120} height={15} />
+                  <Skeleton width={100} height={15} />
+                </Flex>
+              </Flex>
+            </Center>
+          </ComponentWrapper>
+          <ComponentWrapper name="Spinner" link="/?path=/docs/components-spinner--docs">
+            <Center flex={1}>
+              <Spinner size="lg" />
+            </Center>
+          </ComponentWrapper>
+          <ComponentWrapper name="Switch" link="/?path=/docs/components-switch--docs">
+            <Center flex={1}>
+              <Switch value={switchEnabled} onValueChange={toggleSwitch} />
+            </Center>
+          </ComponentWrapper>
+
+          <ComponentWrapper name="Textarea" link="/?path=/docs/forms-textarea--docs">
+            <Center flex={1}>
+              <Textarea numberOfLines={3} placeholder="This is a textarea" />
+            </Center>
+          </ComponentWrapper>
+          <ComponentWrapper
+            name="Toggle Button Card"
+            link="/?path=/docs/components-toggle-button-card--docs"
+          >
+            <Center flex={1}>
+              <ToggleButtonCardGroup
+                aria-label="Select Tariff"
+                value={toggleButtonValue}
+                onChange={setToggleButtonValue}
+                nativeID="ToggleButtonCard-group"
+              >
+                <ToggleButtonCard value="1" label="Toggle me" gap="200">
+                  <BodyText size="md">I'm a toggle button card</BodyText>
+                </ToggleButtonCard>
+              </ToggleButtonCardGroup>
+            </Center>
+          </ComponentWrapper>
+
+          <ComponentWrapper
+            name="Unorderd List"
+            link="/?path=/docs/utility-components-ul-ol-lists--docs"
+          >
+            <Center flex={1}>
+              <UL>
+                <LI>
+                  <BodyText>List Item 1</BodyText>
+                </LI>
+                <LI>
+                  <BodyText>List Item 2</BodyText>
+                </LI>
+              </UL>
+            </Center>
+          </ComponentWrapper>
+        </Flex>
+      </ScrollView>
+    </div>
+  );
+};
+
+const styles = StyleSheet.create(theme => ({
+  container: {
+    gap: theme.space['2'],
+  },
+  component: {
+    borderColor: theme.color.warmWhite[300],
+    borderWidth: theme.borderWidth['1'],
+    borderRadius: theme.borderRadius['lg'],
+    overflow: 'hidden',
+    flexGrow: 1,
+    height: 200,
+    flexBasis: {
+      xs: '100%',
+      md: 300,
+    },
+  },
+  componentWrap: {
+    padding: theme.space['4'],
+    flexGrow: 1,
+    flex: 1,
+  },
+  text: {},
+  textWrap: {
+    borderTopColor: theme.color.warmWhite[300],
+    borderTopWidth: theme.borderWidth['1'],
+    paddingHorizontal: theme.space['200'],
+    paddingVertical: theme.space['100'],
+    backgroundColor: theme.color.warmWhite[100],
+    _web: {
+      _hover: {
+        backgroundColor: theme.color.warmWhite[200],
+      },
+    },
+  },
+}));
+
+export default AllComponents;

package/docs/components/BackToTopButton.tsx

@@ -0,0 +1,58 @@
+import { ChevronUpSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
+import { useState } from 'react';
+import { Platform } from 'react-native';
+import { Button, ButtonIcon, ButtonText } from '../../src';
+
+const ScrollButton = () => {
+  const [visible, setVisible] = useState(false);
+
+  const toggleVisible = () => {
+    const scrolled = document.documentElement.scrollTop;
+    if (scrolled > 300) {
+      setVisible(true);
+    } else if (scrolled <= 300) {
+      setVisible(false);
+    }
+  };
+
+  const scrollToTop = () => {
+    window.scrollTo({
+      top: 0,
+      behavior: 'smooth',
+    });
+  };
+
+  window.addEventListener('scroll', toggleVisible);
+
+  return (
+    <div className="sb-unstyled">
+      <Button
+        onPress={scrollToTop}
+        variant="ghost"
+        colorScheme="grey"
+        size="sm"
+        // @ts-expect-error - This is a playground
+        style={{
+          display: visible ? 'flex' : 'none',
+          maxWidth: 160,
+          ...(Platform.OS === 'web'
+            ? {
+                position: 'fixed',
+                width: '100%',
+                right: 16,
+                bottom: 40,
+                height: 20,
+                zIndex: 99,
+                cursor: 'pointer',
+              }
+            : {}),
+        }}
+      >
+        <ButtonIcon as={ChevronUpSmallIcon} />
+        <ButtonText>Back to top</ButtonText>
+      </Button>
+    </div>
+  );
+};
+
+export default ScrollButton;

package/docs/components/BadgeList.tsx

@@ -0,0 +1,66 @@
+import {
+  List,
+  ListItem,
+  ListItemIcon,
+  ListItemLeadingContent,
+  ListItemHelperText,
+  ListItemText,
+  ListItemTrailingContent,
+  ListItemTrailingIcon,
+  ListItemContent,
+  Badge,
+  BadgeText,
+  Flex,
+  Box,
+} from '../../src';
+
+import {
+  ChevronRightMediumIcon,
+  ElectricityMediumIcon,
+  GasMediumIcon,
+} from '@utilitywarehouse/hearth-react-native-icons';
+
+const BadgeList = () => {
+  return (
+    <List>
+      <ListItem onPress={() => console.log('pressed')} divider>
+        <ListItemLeadingContent>
+          <Box padding="300" borderRadius="lg" bg="energyBlue300">
+            <ListItemIcon as={ElectricityMediumIcon} color="energyBlue600" />
+          </Box>
+        </ListItemLeadingContent>
+        <ListItemContent>
+          <ListItemText>Electricity</ListItemText>
+          <Badge colorScheme="blue">
+            <BadgeText>Text</BadgeText>
+          </Badge>
+          <ListItemHelperText>Last reading 23/03/24</ListItemHelperText>
+        </ListItemContent>
+        <ListItemTrailingContent>
+          <ListItemTrailingIcon as={ChevronRightMediumIcon} />
+        </ListItemTrailingContent>
+      </ListItem>
+      <ListItem onPress={() => console.log('pressed')} divider={false}>
+        <ListItemLeadingContent>
+          <Box padding="300" borderRadius="lg" bg="energyBlue300">
+            <ListItemIcon as={GasMediumIcon} color="energyBlue600" />
+          </Box>
+        </ListItemLeadingContent>
+        <ListItemContent>
+          <Flex direction="row" style={{ justifyContent: 'space-between' }}>
+            <ListItemText>Gas</ListItemText>
+            <Badge colorScheme="green">
+              <BadgeText>Smart meter</BadgeText>
+            </Badge>
+          </Flex>
+          <ListItemHelperText>Last reading 23/03/24</ListItemHelperText>
+        </ListItemContent>
+        <ListItemTrailingContent>
+          <ListItemTrailingIcon as={ChevronRightMediumIcon} />
+        </ListItemTrailingContent>
+      </ListItem>
+    </List>
+  );
+};
+
+export default BadgeList;

package/docs/components/DocComponentWrap.tsx

@@ -0,0 +1,7 @@
+import React, { FC, PropsWithChildren } from 'react';
+
+const DocComponentWrap: FC<PropsWithChildren> = ({ children }) => (
+  <div className="sb-unstyled">{children}</div>
+);
+
+export default DocComponentWrap;

package/docs/components/NextPrevPage.tsx

@@ -0,0 +1,62 @@
+import { View, StyleSheet } from 'react-native';
+import { Card, CardAction, Heading, Link } from '../../src';
+import { ChevronLeftSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
+
+type NextPrevPageProps = {
+  nextLink?: string;
+  nextTitle?: string;
+  prevLink?: string;
+  prevTitle?: string;
+};
+
+const NextPrevPage: React.FC<NextPrevPageProps> = ({
+  nextLink,
+  nextTitle,
+  prevLink,
+  prevTitle,
+}) => {
+  const openLink = (link: string) => {
+    if (window.top) {
+      window.top.location.href = link;
+    }
+  };
+  return (
+    <div className="sb-unstyled">
+      <View style={styles.container}>
+        {!!prevLink && (
+          <Card gap="100">
+            {!!prevTitle && <Heading size="sm">{prevTitle}</Heading>}
+            <CardAction>
+              <Link
+                onPress={() => openLink(prevLink)}
+                iconPosition="left"
+                icon={ChevronLeftSmallIcon}
+              >
+                Prev Page
+              </Link>
+            </CardAction>
+          </Card>
+        )}
+        <div />
+        {!!nextLink && (
+          <Card gap="100">
+            {!!nextTitle && <Heading size="sm">{nextTitle}</Heading>}
+            <CardAction>
+              <Link onPress={() => openLink(nextLink)}>Next Page</Link>
+            </CardAction>
+          </Card>
+        )}
+      </View>
+    </div>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    marginTop: 24,
+  },
+});
+
+export default NextPrevPage;

package/docs/components/SwitchExample.tsx

@@ -0,0 +1,13 @@
+import { FC, useState } from 'react';
+import { Switch } from '../../src';
+
+const SwitchExample: FC<{ value: boolean; disabled: boolean; size: 'small' | 'medium' }> = ({
+  value,
+  disabled,
+  size,
+}) => {
+  const [checked, setChecked] = useState(value);
+  return <Switch value={checked} onValueChange={setChecked} disabled={disabled} size={size} />;
+};
+
+export default SwitchExample;