@holper/react-native-holper-storybook 0.6.101 → 0.7.0

package/stories/Input.stories.tsx

@@ -0,0 +1,119 @@
+import { Ionicons } from '@expo/vector-icons';
+
+import { Input } from '../components';
+import { Colors } from '../configs/constants';
+
+export default {
+  title: 'Input',
+  component: Input,
+};
+
+export const Variant = {
+  render: () => (
+    <>
+      <Input placeholder="Placeholder" />
+      <Input variant="completed" placeholder="Placeholder" />
+      <Input variant="error" placeholder="Placeholder" value="Input with error" />
+    </>
+  ),
+};
+
+export const LeftIcon = {
+  render: () => (
+    <>
+      <Input placeholder="Placeholder" leftIcon={<Ionicons name="person-outline" size={26} color={Colors.midblue} />} />
+      <Input
+        variant="completed"
+        placeholder="Placeholder"
+        leftIcon={<Ionicons name="shield-checkmark-outline" size={26} color={Colors.midblue} />}
+      />
+      <Input
+        variant="error"
+        placeholder="Placeholder"
+        value="Input with error"
+        leftIcon={<Ionicons name="power-outline" size={26} color={Colors.red} />}
+      />
+    </>
+  ),
+};
+
+export const Sizes = {
+  render: () => (
+    <>
+      <Input size="fixed" placeholder="Fixed" />
+
+      <Input size="fit" placeholder="Fit" />
+    </>
+  ),
+};
+
+export const Disabled = {
+  render: () => (
+    <>
+      <Input disabled placeholder="Placeholder" />
+      <Input disabled variant="completed" placeholder="Placeholder" />
+      <Input disabled variant="error" placeholder="Placeholder" value="Input with error" />
+    </>
+  ),
+};
+
+export const ShowLabel = {
+  render: () => (
+    <>
+      <Input showLabel label="User Name" placeholder="Enter your name" />
+      <Input showLabel label="Password" variant="completed" placeholder="Enter your password" />
+      <Input showLabel label="Error" variant="error" placeholder="Enter your input" value="Invalid input" />
+    </>
+  ),
+};
+
+export const CharacterCount = {
+  render: () => (
+    <>
+      <Input count maxLength={50} placeholder="Type here..." />
+      <Input count maxLength={30} variant="completed" placeholder="Type here..." />
+      <Input count maxLength={20} variant="error" placeholder="Type here..." value="Too many characters" />
+    </>
+  ),
+};
+
+export const RightIcon = {
+  render: () => (
+    <>
+      <Input
+        placeholder="Enter text"
+        rightIcon={<Ionicons name="checkmark-outline" size={26} color={Colors.green} />}
+      />
+      <Input
+        variant="completed"
+        placeholder="Enter text"
+        rightIcon={<Ionicons name="happy-outline" size={26} color={Colors.midblue} />}
+      />
+      <Input
+        variant="error"
+        placeholder="Enter text"
+        value="Error state"
+        rightIcon={<Ionicons name="alert-circle-outline" size={26} color={Colors.red} />}
+      />
+    </>
+  ),
+};
+
+export const CombinedFeatures = {
+  render: () => (
+    <>
+      <Input
+        showLabel
+        label="Search"
+        placeholder="Enter search term"
+        rightIcon={<Ionicons name="search-outline" size={26} color={Colors.gray} />}
+      />
+      <Input
+        count
+        maxLength={30}
+        placeholder="Type here"
+        rightIcon={<Ionicons name="send-outline" size={26} color={Colors.midblue} />}
+      />
+    </>
+  ),
+};

package/stories/InputPin.stories.tsx

@@ -0,0 +1,40 @@
+import { useState } from 'react';
+
+import { InputPin, VirtualKeyboard } from '../components';
+
+export default {
+  title: 'Input Pin',
+  component: InputPin,
+};
+
+const DefaultComponent = () => {
+  const [values, setValues] = useState<(string | number)[]>([]);
+
+  return (
+    <>
+      <InputPin values={values} />
+      <VirtualKeyboard
+        onPress={(key) => {
+          switch (key) {
+            case 'back':
+              if (values.length) {
+                setValues(values.slice(0, -1));
+              }
+              break;
+            case 'biometrics':
+              break;
+            default:
+              if (values.length < 4 && key !== null) {
+                setValues([...values, key]);
+              }
+              break;
+          }
+        }}
+      />
+    </>
+  );
+};
+
+export const Default = {
+  render: DefaultComponent,
+};

package/stories/Menu.stories.tsx

@@ -0,0 +1,53 @@
+import { Ionicons } from '@expo/vector-icons';
+
+import { Card, MenuItem } from '../components';
+import { Colors } from '../configs/constants';
+
+export default {
+  title: 'Menu',
+  component: MenuItem,
+};
+
+export const Default = {
+  render: () => (
+    <>
+      <Card>
+        <MenuItem
+          icon={<Ionicons name="list-outline" size={22} color={Colors.darkblue} />}
+          text="Menu item text"
+          onPress={() => {}}
+        />
+        <MenuItem
+          icon={<Ionicons name="card-outline" size={22} color={Colors.darkblue} />}
+          text="Menu item text"
+          onPress={() => {}}
+        />
+        <MenuItem
+          icon={<Ionicons name="location-outline" size={22} color={Colors.darkblue} />}
+          text="Menu item text"
+          onPress={() => {}}
+        />
+        <MenuItem
+          icon={<Ionicons name="lock-closed-outline" size={22} color={Colors.darkblue} />}
+          text="Menu item text"
+          last
+          onPress={() => {}}
+        />
+      </Card>
+
+      <Card>
+        <MenuItem
+          icon={<Ionicons name="headset-outline" size={22} color={Colors.darkblue} />}
+          text="Menu item text"
+          onPress={() => {}}
+        />
+        <MenuItem
+          icon={<Ionicons name="help-circle-outline" size={22} color={Colors.darkblue} />}
+          text="Menu item text"
+          onPress={() => {}}
+          last
+        />
+      </Card>
+    </>
+  ),
+};

package/stories/MenuItem.stories.tsx

@@ -0,0 +1,30 @@
+import { Ionicons } from '@expo/vector-icons';
+
+import { MenuItem } from '../components';
+import { Colors } from '../configs/constants';
+
+export default {
+  title: 'Menu Item',
+  component: MenuItem,
+};
+
+export const Default = {
+  render: () => (
+    <MenuItem
+      icon={<Ionicons name="list-outline" size={24} color={Colors.darkblue} />}
+      text="Menu item text"
+      onPress={() => {}}
+    />
+  ),
+};
+
+export const Last = {
+  render: () => (
+    <MenuItem
+      icon={<Ionicons name="list-outline" size={24} color={Colors.darkblue} />}
+      text="Menu item text"
+      last
+      onPress={() => {}}
+    />
+  ),
+};

package/stories/NavigationTitle.stories.tsx

@@ -0,0 +1,51 @@
+import { View } from 'react-native';
+
+import { ImageResponsive, NavigationTitle, Text } from '../components';
+import { Colors } from '../configs/constants';
+
+export default {
+  title: 'Navigation Title',
+  component: NavigationTitle,
+};
+
+export const Close = {
+  render: () => <NavigationTitle title="This is the title" onPress={() => {}} />,
+};
+export const Back = {
+  render: () => <NavigationTitle type="back" title="This is the title" onPress={() => {}} />,
+};
+export const UseComponentInTitle = {
+  render: () => (
+    <NavigationTitle
+      type="back"
+      title={
+        <View style={{ flexDirection: 'row', alignSelf: 'center' }}>
+          <ImageResponsive
+            avatar
+            source={require('../assets/icon.png')}
+            style={{ height: 50, width: 50, borderColor: Colors.lightblue, borderWidth: 1, marginHorizontal: 10 }}
+          />
+          <View>
+            <Text size="large" weight="semiBold">
+              This is the title
+            </Text>
+            <Text size="tiny" color="light">
+              This is the title
+            </Text>
+          </View>
+        </View>
+      }
+      onPress={() => {}}
+    />
+  ),
+};
+export const NoShadow = {
+  render: () => <NavigationTitle type="back" noShadow title="This is the title" onPress={() => {}} />,
+};
+export const ExtraLarge = {
+  render: () => <NavigationTitle type="back" xlarge title="This is the title" onPress={() => {}} />,
+};
+
+export const BlockNavigation = {
+  render: () => <NavigationTitle type="back" blockNavigation title="This is the title" onPress={() => {}} />,
+};

package/stories/Notification.stories.tsx

@@ -0,0 +1,58 @@
+import dayjs from 'dayjs';
+
+import { Notification } from '../components';
+
+export default {
+  title: 'Notification',
+  component: Notification,
+};
+
+export const Default = {
+  render: () => (
+    <Notification
+      title="Mike Lyne"
+      description="I must tell you my interview this. I must tell you my interview this"
+      avatar={{ uri: 'https://picsum.photos/id/237/300' }}
+      date={dayjs().subtract(3, 'm')}
+      onPress={() => {}}
+    />
+  ),
+};
+
+export const First = {
+  render: () => (
+    <Notification
+      first
+      title="Mike Lyne"
+      description="I must tell you my interview this"
+      avatar={{ uri: 'https://picsum.photos/id/237/300' }}
+      date={dayjs().subtract(1, 'd')}
+      onPress={() => {}}
+    />
+  ),
+};
+
+export const Active = {
+  render: () => (
+    <Notification
+      active
+      title="Mike Lyne"
+      description="I must tell you my interview this"
+      avatar={{ uri: 'https://picsum.photos/id/237/300' }}
+      date={dayjs().subtract(1, 'month')}
+      onPress={() => {}}
+    />
+  ),
+};
+
+export const NoAvatar = {
+  render: () => (
+    <Notification
+      hideAvatar
+      title="Mike Lyne"
+      description="I must tell you my interview this"
+      date={dayjs().subtract(1, 'h')}
+      onPress={() => {}}
+    />
+  ),
+};

package/stories/Select.stories.tsx

@@ -0,0 +1,270 @@
+import { useState } from 'react';
+import { Dimensions, View } from 'react-native';
+
+import { Select } from '../components';
+
+const { width } = Dimensions.get('window');
+
+export default {
+  title: 'Select',
+  component: Select,
+};
+
+const VariantComponent = () => {
+  const [value, setValue] = useState<string>('');
+  return (
+    <>
+      <Select
+        items={[
+          {
+            label: 'Spanish',
+            value: 'es',
+          },
+          {
+            label: 'English',
+            value: 'en',
+          },
+          {
+            label: 'French',
+            value: 'fr',
+          },
+          {
+            label: 'Italian',
+            value: 'it',
+          },
+        ]}
+        value={value}
+        placeholder="Select a language"
+        onValueChange={setValue}
+      />
+      <Select
+        variant="completed"
+        items={[
+          {
+            label: 'Spanish',
+            value: 'es',
+          },
+          {
+            label: 'English',
+            value: 'en',
+          },
+          {
+            label: 'French',
+            value: 'fr',
+          },
+          {
+            label: 'Italian',
+            value: 'it',
+          },
+        ]}
+        value={value}
+        placeholder="Select a language"
+        onValueChange={setValue}
+      />
+      <Select
+        variant="error"
+        items={[
+          {
+            label: 'Spanish',
+            value: 'es',
+          },
+          {
+            label: 'English',
+            value: 'en',
+          },
+          {
+            label: 'French',
+            value: 'fr',
+          },
+          {
+            label: 'Italian',
+            value: 'it',
+          },
+        ]}
+        value={value}
+        placeholder="Select a language"
+        onValueChange={setValue}
+      />
+    </>
+  );
+};
+
+const FitToContainerComponent = () => {
+  const [value, setValue] = useState<string>('');
+  return (
+    <>
+      <View style={{ width }}>
+        <Select
+          fitToContainer
+          items={[
+            {
+              label: 'Spanish',
+              value: 'es',
+            },
+            {
+              label: 'English',
+              value: 'en',
+            },
+            {
+              label: 'French',
+              value: 'fr',
+            },
+            {
+              label: 'Italian',
+              value: 'it',
+            },
+          ]}
+          value={value}
+          placeholder="Select a language"
+          onValueChange={setValue}
+        />
+      </View>
+      <View style={{ width: width - 100 }}>
+        <Select
+          fitToContainer
+          items={[
+            {
+              label: 'Spanish',
+              value: 'es',
+            },
+            {
+              label: 'English',
+              value: 'en',
+            },
+            {
+              label: 'French',
+              value: 'fr',
+            },
+            {
+              label: 'Italian',
+              value: 'it',
+            },
+          ]}
+          value={value}
+          placeholder="Select a language"
+          onValueChange={setValue}
+        />
+      </View>
+      <View style={{ width: width - 180 }}>
+        <Select
+          fitToContainer
+          items={[
+            {
+              label: 'Spanish',
+              value: 'es',
+            },
+            {
+              label: 'English',
+              value: 'en',
+            },
+            {
+              label: 'French',
+              value: 'fr',
+            },
+            {
+              label: 'Italian',
+              value: 'it',
+            },
+          ]}
+          value={value}
+          placeholder="Select a language"
+          onValueChange={setValue}
+        />
+      </View>
+    </>
+  );
+};
+
+const DisabledComponent = () => {
+  const [value, setValue] = useState<string>('');
+  return (
+    <>
+      <Select
+        disabled
+        items={[
+          {
+            label: 'Spanish',
+            value: 'es',
+          },
+          {
+            label: 'English',
+            value: 'en',
+          },
+          {
+            label: 'French',
+            value: 'fr',
+          },
+          {
+            label: 'Italian',
+            value: 'it',
+          },
+        ]}
+        value={value}
+        placeholder="Select a language"
+        onValueChange={setValue}
+      />
+      <Select
+        variant="completed"
+        disabled
+        items={[
+          {
+            label: 'Spanish',
+            value: 'es',
+          },
+          {
+            label: 'English',
+            value: 'en',
+          },
+          {
+            label: 'French',
+            value: 'fr',
+          },
+          {
+            label: 'Italian',
+            value: 'it',
+          },
+        ]}
+        value={value}
+        placeholder="Select a language"
+        onValueChange={setValue}
+      />
+      <Select
+        variant="error"
+        disabled
+        items={[
+          {
+            label: 'Spanish',
+            value: 'es',
+          },
+          {
+            label: 'English',
+            value: 'en',
+          },
+          {
+            label: 'French',
+            value: 'fr',
+          },
+          {
+            label: 'Italian',
+            value: 'it',
+          },
+        ]}
+        value={value}
+        placeholder="Select a language"
+        onValueChange={setValue}
+      />
+    </>
+  );
+};
+
+export const Variant = {
+  render: VariantComponent,
+};
+
+export const FitToContainer = {
+  render: FitToContainerComponent,
+};
+
+export const Disabled = {
+  render: DisabledComponent,
+};