@utilitywarehouse/hearth-react-native 0.1.0

package/docs/components/SwitchList.tsx

@@ -0,0 +1,56 @@
+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
+        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/docs/components/UsageWrap.tsx

@@ -0,0 +1,24 @@
+import { FC, PropsWithChildren } from 'react';
+import { BottomSheetModalProvider, Box, useColorMode } from '../../src';
+
+const UsageWrap: FC<PropsWithChildren> = ({ children }) => {
+  const [colorMode] = useColorMode();
+  return (
+    <div className="sb-unstyled">
+      <Box
+        mt="300"
+        p="200"
+        bg={colorMode === 'dark' ? 'background' : 'white'}
+        borderRadius="md"
+        borderWidth="1"
+        borderColor="grey1000"
+        width="100%"
+        position="relative"
+      >
+        <BottomSheetModalProvider>{children}</BottomSheetModalProvider>
+      </Box>
+    </div>
+  );
+};
+
+export default UsageWrap;

package/docs/components/VariantTitle.tsx

@@ -0,0 +1,30 @@
+import { ViewProps } from 'react-native';
+import { Box, DetailText, useColorMode } from '../../src';
+
+const VariantTitle = ({
+  title,
+  upperCase = true,
+  invert = false,
+  children,
+}: {
+  title: string;
+  upperCase?: boolean;
+  invert?: boolean;
+  children: ViewProps['children'];
+}) => {
+  const [colorMode] = useColorMode();
+  return (
+    <Box gap="100" w="full">
+      <DetailText
+        textTransform={upperCase ? 'uppercase' : 'none'}
+        size="sm"
+        color={invert ? 'warmWhite50' : colorMode === 'light' ? 'grey600' : 'grey200'}
+      >
+        {title}
+      </DetailText>
+      {children}
+    </Box>
+  );
+};
+
+export default VariantTitle;

package/docs/components/ViewFigmaButton.tsx

@@ -0,0 +1,43 @@
+import { Button, ButtonIcon, ButtonText, createIcon } from '../../src';
+import { ChevronRightSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
+
+import { Platform } from 'react-native';
+import { Svg, Path } 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="grey"
+      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/index.ts

@@ -0,0 +1,11 @@
+export { default as VariantTitle } from './VariantTitle';
+export { default as UsageWrap } from './UsageWrap';
+export { default as BackToTopButton } from './BackToTopButton';
+export { default as ViewFigmaButton } from './ViewFigmaButton';
+export { default as DocComponentWrap } from './DocComponentWrap';
+export { default as BadgeList } from './BadgeList';
+export { default as AdvancedInputExample } from './AdvancedInputExample';
+export { default as SwitchExample } from './SwitchExample';
+export { default as SwitchList } from './SwitchList';
+export { default as AdvancedRadioExample } from './AdvancedRadioExample';
+export { default as NextPrevPage } from './NextPrevPage';

package/docs/getting-started.mdx

@@ -0,0 +1,50 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+import { BackToTopButton, NextPrevPage } from './components';
+
+<Meta title="Getting Started" />
+<BackToTopButton />
+
+# Getting Started
+
+You can just start using the components from the `@utilitywarehouse/hearth-react-native` package.
+
+```tsx
+import { Box, Alert, Text } from '@utilitywarehouse/hearth-react-native';
+
+const App: React.FC = () => (
+  <Box>
+    <Alert variant="info" text="Welcome to Hearth React Native!" />
+    <Text>Start building your app with Hearth React Native components.</Text>
+  </Box>
+);
+```
+
+### Dark Mode
+
+By default the light colour mode is enabled. If you want to enable dark mode, you can
+use the `useColorMode` hook to toggle between light and dark modes.
+
+```tsx
+import { useColorMode, Box, Alert, Text, Button } from '@utilitywarehouse/hearth-react-native';
+
+const App: React.FC = () => {
+  const [colorMode, setColorMode] = useColorMode();
+
+  return (
+    <Box>
+      <Alert variant="info" text="Welcome to Hearth React Native!" />
+      <Text>Start building your app with Hearth React Native components.</Text>
+      <Button onPress={() => setColorMode(colorMode === 'light' ? 'dark' : 'light')}>
+        Toggle Color Mode
+      </Button>
+    </Box>
+  );
+};
+```
+
+<NextPrevPage
+  prevLink="/?path=/docs/introduction--docs"
+  prevTitle="Introduction"
+  nextLink="/?path=/docs/styling--docs"
+  nextTitle="Styling"
+/>