@utilitywarehouse/hearth-react-native 0.34.5 → 0.35.0

package/docs/components/BackToTopButton.tsx

@@ -1,58 +0,0 @@
-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="functional"
-        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

@@ -1,30 +0,0 @@
-import { IconContainer, List, ListItem } from '../../src';
-
-import { ElectricityMediumIcon, GasMediumIcon } from '@utilitywarehouse/hearth-react-native-icons';
-
-const BadgeList = () => {
-  return (
-    <List>
-      <ListItem
-        heading="Electricity"
-        helperText="Last reading 23/03/24"
-        onPress={() => console.log('pressed')}
-        leadingContent={
-          <IconContainer icon={ElectricityMediumIcon} size="md" variant="emphasis" color="energy" />
-        }
-        badge={{ text: 'Text' }}
-      />
-      <ListItem
-        heading="Gas"
-        helperText="Last reading 23/03/24"
-        onPress={() => console.log('pressed')}
-        leadingContent={
-          <IconContainer icon={GasMediumIcon} size="md" variant="emphasis" color="energy" />
-        }
-        badge={{ text: 'Smart Meter' }}
-      />
-    </List>
-  );
-};
-
-export default BadgeList;

package/docs/components/DocComponentWrap.tsx

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

package/docs/components/InputShadowExample.tsx

@@ -1,19 +0,0 @@
-import { SearchMediumIcon } from '@utilitywarehouse/hearth-react-native-icons';
-import { StyleSheet } from 'react-native-unistyles';
-import { Box, Input } from '../../src';
-
-const InputShadowExample = () => {
-  return (
-    <Box padding="md">
-      <Input placeholder="Input with shadow" style={styles.input} leadingIcon={SearchMediumIcon} />
-    </Box>
-  );
-};
-
-const styles = StyleSheet.create(theme => ({
-  input: {
-    boxShadow: theme.helpers.shadow.functional,
-  },
-}));
-
-export default InputShadowExample;

package/docs/components/NextPrevPage.tsx

@@ -1,54 +0,0 @@
-import { ChevronLeftSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
-import { StyleSheet, View } from 'react-native';
-import { StorybookLink } from '@utilitywarehouse/hearth-storybook-utils';
-import { Card, CardPressHandler, Heading, Link } from '../../src';
-
-type NextPrevPageProps = {
-  nextLink?: string;
-  nextTitle?: string;
-  prevLink?: string;
-  prevTitle?: string;
-};
-
-const NextPrevPage: React.FC<NextPrevPageProps> = ({
-  nextLink,
-  nextTitle,
-  prevLink,
-  prevTitle,
-}) => (
-  <div className="sb-unstyled">
-    <View style={styles.container}>
-      {!!prevLink && (
-        <Card gap="100" alignItems="flex-start">
-          {!!prevTitle && <Heading size="sm">{prevTitle}</Heading>}
-          <CardPressHandler>
-            <StorybookLink as={Link} to={prevLink} iconPosition="left" icon={ChevronLeftSmallIcon}>
-              Prev Page
-            </StorybookLink>
-          </CardPressHandler>
-        </Card>
-      )}
-      <div />
-      {!!nextLink && (
-        <Card gap="100" alignItems="flex-start">
-          {!!nextTitle && <Heading size="sm">{nextTitle}</Heading>}
-          <CardPressHandler>
-            <StorybookLink as={Link} to={nextLink}>
-              Next Page
-            </StorybookLink>
-          </CardPressHandler>
-        </Card>
-      )}
-    </View>
-  </div>
-);
-
-const styles = StyleSheet.create({
-  container: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    marginTop: 24,
-  },
-});
-
-export default NextPrevPage;

package/docs/components/SwitchExample.tsx

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

package/docs/components/SwitchList.tsx

@@ -1,52 +0,0 @@
-import {
-  BellMediumIcon,
-  EyeMediumIcon,
-  LocationMediumIcon,
-  LockMediumIcon,
-} from '@utilitywarehouse/hearth-react-native-icons';
-import { useState } from 'react';
-import { List, ListItem, ListItemIcon, Switch } from '../../src';
-
-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
-        heading="Notifications"
-        helperText="Allow notifications"
-        leadingContent={<ListItemIcon as={BellMediumIcon} />}
-        trailingContent={
-          <Switch value={notifications} onValueChange={setNotifications} size="small" />
-        }
-        onPress={() => setNotifications(!notifications)}
-      />
-      <ListItem
-        heading="Secure ID"
-        helperText="Use secure ID"
-        leadingContent={<ListItemIcon as={LockMediumIcon} />}
-        trailingContent={<Switch value={secureId} onValueChange={setSecureId} size="small" />}
-        onPress={() => setSecureId(!secureId)}
-      />
-      <ListItem
-        heading="Location"
-        helperText="Allow location"
-        leadingContent={<ListItemIcon as={LocationMediumIcon} />}
-        trailingContent={<Switch value={location} onValueChange={setLocation} size="small" />}
-        onPress={() => setLocation(!location)}
-      />
-      <ListItem
-        heading="Dark mode"
-        helperText="Enable dark mode"
-        leadingContent={<ListItemIcon as={EyeMediumIcon} />}
-        trailingContent={<Switch value={darkMode} onValueChange={setDarkMode} size="small" />}
-        onPress={() => setDarkMode(!darkMode)}
-      />
-    </List>
-  );
-};
-
-export default SwitchList;

package/docs/components/UsageWrap.tsx

@@ -1,21 +0,0 @@
-import { FC, PropsWithChildren } from 'react';
-import { BottomSheetModalProvider, Box } from '../../src';
-
-const UsageWrap: FC<PropsWithChildren> = ({ children }) => (
-  <div className="sb-unstyled">
-    <Box
-      mt="300"
-      p="200"
-      bg="primary"
-      borderRadius="md"
-      borderWidth="1"
-      borderColor="subtle"
-      width="100%"
-      position="relative"
-    >
-      <BottomSheetModalProvider>{children}</BottomSheetModalProvider>
-    </Box>
-  </div>
-);
-
-export default UsageWrap;

package/docs/components/VariantTitle.tsx

@@ -1,40 +0,0 @@
-import { ViewProps } from 'react-native';
-import { StyleSheet } from 'react-native-unistyles';
-import { Box, DetailText } from '../../src';
-
-const VariantTitle = ({
-  title,
-  upperCase = true,
-  invert = false,
-  children,
-}: {
-  title: string;
-  upperCase?: boolean;
-  invert?: boolean;
-  children: ViewProps['children'];
-}) => {
-  styles.useVariants({ invert });
-  return (
-    <Box gap="100" w="full">
-      <DetailText textTransform={upperCase ? 'uppercase' : 'none'} size="sm" style={styles.text}>
-        {title}
-      </DetailText>
-      {children}
-    </Box>
-  );
-};
-
-const styles = StyleSheet.create(theme => ({
-  text: {
-    color: theme.color.text.secondary,
-    variants: {
-      invert: {
-        true: {
-          color: theme.color.warmWhite[50],
-        },
-      },
-    },
-  },
-}));
-
-export default VariantTitle;

package/docs/components/ViewFigmaButton.tsx

@@ -1,43 +0,0 @@
-import { ChevronRightSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
-import { Button, ButtonIcon, ButtonText, createIcon } from '../../src';
-
-import { Platform } from 'react-native';
-import { Path, Svg } from 'react-native-svg';
-
-interface Props {
-  url: string;
-}
-
-const FigmaIcon = createIcon({
-  Root: Svg,
-  viewBox: '0 0 24 24',
-  path: (
-    <Path d="M15.852 8.981h-4.588V0h4.588c2.476 0 4.49 2.014 4.49 4.49s-2.014 4.491-4.49 4.491zM12.735 7.51h3.117c1.665 0 3.019-1.355 3.019-3.019s-1.355-3.019-3.019-3.019h-3.117V7.51zm0 1.471H8.148c-2.476 0-4.49-2.014-4.49-4.49S5.672 0 8.148 0h4.588v8.981zm-4.587-7.51c-1.665 0-3.019 1.355-3.019 3.019s1.354 3.02 3.019 3.02h3.117V1.471H8.148zm4.587 15.019H8.148c-2.476 0-4.49-2.014-4.49-4.49s2.014-4.49 4.49-4.49h4.588v8.98zM8.148 8.981c-1.665 0-3.019 1.355-3.019 3.019s1.355 3.019 3.019 3.019h3.117V8.981H8.148zM8.172 24c-2.489 0-4.515-2.014-4.515-4.49s2.014-4.49 4.49-4.49h4.588v4.441c0 2.503-2.047 4.539-4.563 4.539zm-.024-7.51a3.023 3.023 0 0 0-3.019 3.019c0 1.665 1.365 3.019 3.044 3.019 1.705 0 3.093-1.376 3.093-3.068v-2.97H8.148zm7.704 0h-.098c-2.476 0-4.49-2.014-4.49-4.49s2.014-4.49 4.49-4.49h.098c2.476 0 4.49 2.014 4.49 4.49s-2.014 4.49-4.49 4.49zm-.097-7.509c-1.665 0-3.019 1.355-3.019 3.019s1.355 3.019 3.019 3.019h.098c1.665 0 3.019-1.355 3.019-3.019s-1.355-3.019-3.019-3.019h-.098z" />
-  ),
-});
-
-const ViewFigmaButton: React.FC<Props> = ({ url }) => (
-  <div className="sb-unstyled">
-    <Button
-      variant="ghost"
-      colorScheme="functional"
-      size="sm"
-      style={{
-        zIndex: 1,
-        marginTop: 8,
-        ...(Platform.OS === 'web'
-          ? {
-              float: 'right',
-            }
-          : {}),
-      }}
-      onPress={() => window.open(url)}
-    >
-      <ButtonIcon as={FigmaIcon} height={16} />
-      <ButtonText>View in Figma</ButtonText>
-      <ButtonIcon as={ChevronRightSmallIcon} />
-    </Button>
-  </div>
-);
-
-export default ViewFigmaButton;

package/docs/components/ViewWrap.tsx

@@ -1,32 +0,0 @@
-import { Dimensions, Platform, View, ViewProps } from 'react-native';
-import { UnistylesRuntime } from '../../src/core';
-
-const ViewWrap = ({ children }: { children: ViewProps['children'] }) => (
-  <View
-    style={{
-      width: Platform.OS === 'web' ? '100%' : Dimensions.get('window').width,
-      height:
-        Platform.OS === 'web'
-          ? '100%'
-          : Dimensions.get('window').height -
-            UnistylesRuntime.insets.top -
-            UnistylesRuntime.insets.bottom -
-            33,
-
-      position: 'absolute',
-      top: 0,
-      left: 0,
-      right: 0,
-      bottom: 0,
-      flex: 1,
-      marginVertical: Platform.OS === 'web' ? 0 : -8,
-      justifyContent: 'center',
-      alignItems: 'center',
-      padding: 16,
-    }}
-  >
-    {children}
-  </View>
-);
-
-export default ViewWrap;

package/docs/components/index.ts

@@ -1,13 +0,0 @@
-export { StorybookLink } from '@utilitywarehouse/hearth-storybook-utils';
-export { default as AdvancedInputExample } from './AdvancedInputExample';
-export { default as BackToTopButton } from './BackToTopButton';
-export { default as BadgeList } from './BadgeList';
-export { default as DocComponentWrap } from './DocComponentWrap';
-export { default as InputShadowExample } from './InputShadowExample';
-export { default as NextPrevPage } from './NextPrevPage';
-export { default as SwitchExample } from './SwitchExample';
-export { default as SwitchList } from './SwitchList';
-export { default as UsageWrap } from './UsageWrap';
-export { default as VariantTitle } from './VariantTitle';
-export { default as ViewFigmaButton } from './ViewFigmaButton';
-export { default as ViewWrap } from './ViewWrap';

package/docs/heplers/addReactNativePrefix.ts

@@ -1,8 +0,0 @@
-const addReactNativePrefix = (url: string) => {
-  if (!url.startsWith('/?path=/docs/')) return url;
-  return url.replace(/(\/\?path=\/docs\/)([^/]+)/, (full, prefix, slug) => {
-    if (slug.startsWith('react-native_')) return full; // already prefixed
-    return `${prefix}react-native_${slug}`;
-  });
-};
-export default addReactNativePrefix;

package/docs/heplers/index.ts

@@ -1 +0,0 @@
-export { default as addReactNativePrefix } from './addReactNativePrefix';