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

package/stories/Input.stories.tsx

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

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

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

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

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

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

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