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

package/stories/SwipeablePanel.stories.tsx

@@ -1,360 +0,0 @@
-import { View } from 'react-native';
-
-import { Button, ImageResponsive, NavigationTitle, SwipeablePanel, Text } from '../components';
-import { Colors } from '../configs/constants';
-
-export default {
-  title: 'Swipeable Panel',
-  component: SwipeablePanel,
-};
-
-export const Default = {
-  render: () => (
-    <>
-      <NavigationTitle onPress={() => {}} title="Title text" />
-      <SwipeablePanel offset={180}>
-        <>
-          <Text align="center" size="large">
-            Title
-          </Text>
-          <View style={{ flexDirection: 'row', alignItems: 'center', marginVertical: 25 }}>
-            <ImageResponsive
-              source={require('../assets/icon.png')}
-              style={{ height: 110, width: 110, borderColor: Colors.lightblue }}
-              avatar
-            />
-            <View style={{ height: 100, justifyContent: 'space-around', marginLeft: 10 }}>
-              <Text size="large" weight="semiBold">
-                Name
-              </Text>
-              <Text>Other useful info</Text>
-              <Text>More info</Text>
-            </View>
-          </View>
-          <Button style={{ alignSelf: 'center', marginBottom: 20 }}>
-            <Text color="white">Button text</Text>
-          </Button>
-          <Text align="center">Footer text</Text>
-        </>
-      </SwipeablePanel>
-    </>
-  ),
-};
-
-export const CloseButton = {
-  render: () => (
-    <>
-      <NavigationTitle onPress={() => {}} title="Title text" />
-      <SwipeablePanel offset={180} closeButton onClose={() => {}}>
-        <>
-          <Text align="center" size="large">
-            Title
-          </Text>
-          <View style={{ flexDirection: 'row', alignItems: 'center', marginVertical: 25 }}>
-            <ImageResponsive
-              source={require('../assets/icon.png')}
-              style={{ height: 110, width: 110, borderColor: Colors.lightblue }}
-              avatar
-            />
-            <View style={{ height: 100, justifyContent: 'space-around', marginLeft: 10 }}>
-              <Text size="large" weight="semiBold">
-                Name
-              </Text>
-              <Text>Other useful info</Text>
-              <Text>More info</Text>
-            </View>
-          </View>
-          <Button style={{ alignSelf: 'center', marginBottom: 20 }}>
-            <Text color="white">Button text</Text>
-          </Button>
-          <Text align="center">Footer text</Text>
-        </>
-      </SwipeablePanel>
-    </>
-  ),
-};
-
-export const AutoClose = {
-  render: () => (
-    <>
-      <NavigationTitle onPress={() => {}} title="Title text" />
-      <SwipeablePanel offset={180} closeAfterSeconds={15} onClose={() => {}}>
-        <>
-          <Text align="center" size="large">
-            Title
-          </Text>
-          <View style={{ flexDirection: 'row', alignItems: 'center', marginVertical: 25 }}>
-            <ImageResponsive
-              source={require('../assets/icon.png')}
-              style={{ height: 110, width: 110, borderColor: Colors.lightblue }}
-              avatar
-            />
-            <View style={{ height: 100, justifyContent: 'space-around', marginLeft: 10 }}>
-              <Text size="large" weight="semiBold">
-                Name
-              </Text>
-              <Text>Other useful info</Text>
-              <Text>More info</Text>
-            </View>
-          </View>
-          <Button style={{ alignSelf: 'center', marginBottom: 20 }}>
-            <Text color="white">Button text</Text>
-          </Button>
-          <Text align="center">Footer text</Text>
-        </>
-      </SwipeablePanel>
-    </>
-  ),
-};
-
-export const AutoCloseAndClose = {
-  render: () => (
-    <>
-      <NavigationTitle onPress={() => {}} title="Title text" />
-      <SwipeablePanel offset={180} closeAfterSeconds={15} onClose={() => {}} closeButton>
-        <>
-          <Text align="center" size="large">
-            Title
-          </Text>
-          <View style={{ flexDirection: 'row', alignItems: 'center', marginVertical: 25 }}>
-            <ImageResponsive
-              source={require('../assets/icon.png')}
-              style={{ height: 110, width: 110, borderColor: Colors.lightblue }}
-              avatar
-            />
-            <View style={{ height: 100, justifyContent: 'space-around', marginLeft: 10 }}>
-              <Text size="large" weight="semiBold">
-                Name
-              </Text>
-              <Text>Other useful info</Text>
-              <Text>More info</Text>
-            </View>
-          </View>
-          <Button style={{ alignSelf: 'center', marginBottom: 20 }}>
-            <Text color="white">Button text</Text>
-          </Button>
-          <Text align="center">Footer text</Text>
-        </>
-      </SwipeablePanel>
-    </>
-  ),
-};
-
-export const AutoMaximize = {
-  render: () => (
-    <>
-      <NavigationTitle onPress={() => {}} title="Title text" />
-      <SwipeablePanel offset={180} autoMaximize>
-        <>
-          <Text align="center" size="large">
-            Title
-          </Text>
-          <View style={{ flexDirection: 'row', alignItems: 'center', marginVertical: 25 }}>
-            <ImageResponsive
-              source={require('../assets/icon.png')}
-              style={{ height: 110, width: 110, borderColor: Colors.lightblue }}
-              avatar
-            />
-            <View style={{ height: 100, justifyContent: 'space-around', marginLeft: 10 }}>
-              <Text size="large" weight="semiBold">
-                Name
-              </Text>
-              <Text>Other useful info</Text>
-              <Text>More info</Text>
-            </View>
-          </View>
-          <Button style={{ alignSelf: 'center', marginBottom: 20 }}>
-            <Text color="white">Button text</Text>
-          </Button>
-          <Text align="center">Footer text</Text>
-        </>
-      </SwipeablePanel>
-    </>
-  ),
-};
-
-export const WithSurroundElements = {
-  render: () => (
-    <>
-      <NavigationTitle title="Title text" />
-      <SwipeablePanel offset={250}>
-        <Text>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vel egestas sem. Lorem ipsum dolor sit
-          amet, consectetur adipiscing elit. Etiam id ornare ex. Aliquam pharetra eleifend felis eu ultricies. Proin non
-          tristique turpis. Nulla et metus molestie, convallis augue nec, faucibus mi. In vitae gravida dui, vel
-          hendrerit elit. Donec nec tempor purus. Donec tempus libero vitae cursus laoreet. Sed metus arcu, accumsan
-          dapibus molestie a, iaculis sed ipsum. Cras ante quam, rhoncus eu euismod nec, bibendum at mauris.
-          {'\n'}
-          {'\n'}
-          Etiam aliquet leo sit amet mi iaculis molestie ac non lacus. Nam vitae nisl aliquam, vulputate magna sit amet,
-          ullamcorper mauris. Praesent vulputate eros eget ligula cursus, vel condimentum justo ultricies. Nunc rutrum
-          sodales sapien, at mattis enim pretium non. Vivamus lobortis libero vulputate, tempor risus quis, vestibulum
-          odio. Cras sodales placerat varius. Quisque felis lacus, auctor ac pharetra sit amet, blandit at arcu. In hac
-          habitasse platea dictumst. Ut faucibus, massa id lacinia tincidunt, justo justo pellentesque nisi, eget
-          aliquam mauris ex vel dolor. Quisque vel lectus ante. Suspendisse efficitur leo eu urna imperdiet placerat.
-          Duis vel neque sed lacus convallis aliquet. Cras vehicula purus ut tellus eleifend tempor. In est erat,
-          sollicitudin volutpat hendrerit ut, tempor a eros. Pellentesque vehicula tempor lorem consectetur varius.
-          {'\n'}
-          {'\n'}
-          Sed mauris massa, lacinia nec turpis quis, vulputate hendrerit eros. Interdum et malesuada fames ac ante ipsum
-          primis in faucibus. Nullam fringilla orci nec dui semper gravida. Ut fermentum, tellus sit amet blandit
-          suscipit, mi mauris porta est, ut efficitur velit sem vulputate sapien. Donec nisi leo, ornare ac aliquet sed,
-          tincidunt sit amet ex. Sed metus nulla, vehicula a pretium eget, lacinia at dui. Nulla at felis vel arcu
-          sagittis pretium. Nulla non dapibus arcu. Vestibulum non erat eget velit lacinia mattis. Praesent pretium
-          facilisis placerat. Suspendisse vel sem bibendum, congue sapien in, consequat ipsum. Suspendisse ac arcu
-          convallis, elementum leo et, posuere orci. Aenean sagittis dictum pellentesque.
-          {'\n'}
-          {'\n'}
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vel egestas sem. Lorem ipsum dolor sit
-          amet, consectetur adipiscing elit. Etiam id ornare ex. Aliquam pharetra eleifend felis eu ultricies. Proin non
-          tristique turpis. Nulla et metus molestie, convallis augue nec, faucibus mi. In vitae gravida dui, vel
-          hendrerit elit. Donec nec tempor purus. Donec tempus libero vitae cursus laoreet. Sed metus arcu, accumsan
-          dapibus molestie a, iaculis sed ipsum. Cras ante quam, rhoncus eu euismod nec, bibendum at mauris.
-          {'\n'}
-          {'\n'}
-          Etiam aliquet leo sit amet mi iaculis molestie ac non lacus. Nam vitae nisl aliquam, vulputate magna sit amet,
-          ullamcorper mauris. Praesent vulputate eros eget ligula cursus, vel condimentum justo ultricies. Nunc rutrum
-          sodales sapien, at mattis enim pretium non. Vivamus lobortis libero vulputate, tempor risus quis, vestibulum
-          odio. Cras sodales placerat varius. Quisque felis lacus, auctor ac pharetra sit amet, blandit at arcu. In hac
-          habitasse platea dictumst. Ut faucibus, massa id lacinia tincidunt, justo justo pellentesque nisi, eget
-          aliquam mauris ex vel dolor. Quisque vel lectus ante. Suspendisse efficitur leo eu urna imperdiet placerat.
-          Duis vel neque sed lacus convallis aliquet. Cras vehicula purus ut tellus eleifend tempor. In est erat,
-          sollicitudin volutpat hendrerit ut, tempor a eros. Pellentesque vehicula tempor lorem consectetur varius.
-          {'\n'}
-          {'\n'}
-          Sed mauris massa, lacinia nec turpis quis, vulputate hendrerit eros. Interdum et malesuada fames ac ante ipsum
-          primis in faucibus. Nullam fringilla orci nec dui semper gravida. Ut fermentum, tellus sit amet blandit
-          suscipit, mi mauris porta est, ut efficitur velit sem vulputate sapien. Donec nisi leo, ornare ac aliquet sed,
-          tincidunt sit amet ex. Sed metus nulla, vehicula a pretium eget, lacinia at dui. Nulla at felis vel arcu
-          sagittis pretium. Nulla non dapibus arcu. Vestibulum non erat eget velit lacinia mattis. Praesent pretium
-          facilisis placerat. Suspendisse vel sem bibendum, congue sapien in, consequat ipsum. Suspendisse ac arcu
-          convallis, elementum leo et, posuere orci. Aenean sagittis dictum pellentesque.
-        </Text>
-      </SwipeablePanel>
-
-      <View style={{ justifyContent: 'center', alignItems: 'center', backgroundColor: Colors.white }}>
-        <Button>
-          <Text color="white">Button</Text>
-        </Button>
-      </View>
-    </>
-  ),
-};
-
-export const Maximized = {
-  render: () => (
-    <SwipeablePanel maximized offset={130}>
-      <Text>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vel egestas sem. Lorem ipsum dolor sit
-        amet, consectetur adipiscing elit. Etiam id ornare ex. Aliquam pharetra eleifend felis eu ultricies. Proin non
-        tristique turpis. Nulla et metus molestie, convallis augue nec, faucibus mi. In vitae gravida dui, vel hendrerit
-        elit. Donec nec tempor purus. Donec tempus libero vitae cursus laoreet. Sed metus arcu, accumsan dapibus
-        molestie a, iaculis sed ipsum. Cras ante quam, rhoncus eu euismod nec, bibendum at mauris.
-        {'\n'}
-        {'\n'}
-        Etiam aliquet leo sit amet mi iaculis molestie ac non lacus. Nam vitae nisl aliquam, vulputate magna sit amet,
-        ullamcorper mauris. Praesent vulputate eros eget ligula cursus, vel condimentum justo ultricies. Nunc rutrum
-        sodales sapien, at mattis enim pretium non. Vivamus lobortis libero vulputate, tempor risus quis, vestibulum
-        odio. Cras sodales placerat varius. Quisque felis lacus, auctor ac pharetra sit amet, blandit at arcu. In hac
-        habitasse platea dictumst. Ut faucibus, massa id lacinia tincidunt, justo justo pellentesque nisi, eget aliquam
-        mauris ex vel dolor. Quisque vel lectus ante. Suspendisse efficitur leo eu urna imperdiet placerat. Duis vel
-        neque sed lacus convallis aliquet. Cras vehicula purus ut tellus eleifend tempor. In est erat, sollicitudin
-        volutpat hendrerit ut, tempor a eros. Pellentesque vehicula tempor lorem consectetur varius.
-        {'\n'}
-        {'\n'}
-        Sed mauris massa, lacinia nec turpis quis, vulputate hendrerit eros. Interdum et malesuada fames ac ante ipsum
-        primis in faucibus. Nullam fringilla orci nec dui semper gravida. Ut fermentum, tellus sit amet blandit
-        suscipit, mi mauris porta est, ut efficitur velit sem vulputate sapien. Donec nisi leo, ornare ac aliquet sed,
-        tincidunt sit amet ex. Sed metus nulla, vehicula a pretium eget, lacinia at dui. Nulla at felis vel arcu
-        sagittis pretium. Nulla non dapibus arcu. Vestibulum non erat eget velit lacinia mattis. Praesent pretium
-        facilisis placerat. Suspendisse vel sem bibendum, congue sapien in, consequat ipsum. Suspendisse ac arcu
-        convallis, elementum leo et, posuere orci. Aenean sagittis dictum pellentesque.
-        {'\n'}
-        {'\n'}
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vel egestas sem. Lorem ipsum dolor sit
-        amet, consectetur adipiscing elit. Etiam id ornare ex. Aliquam pharetra eleifend felis eu ultricies. Proin non
-        tristique turpis. Nulla et metus molestie, convallis augue nec, faucibus mi. In vitae gravida dui, vel hendrerit
-        elit. Donec nec tempor purus. Donec tempus libero vitae cursus laoreet. Sed metus arcu, accumsan dapibus
-        molestie a, iaculis sed ipsum. Cras ante quam, rhoncus eu euismod nec, bibendum at mauris.
-        {'\n'}
-        {'\n'}
-        Etiam aliquet leo sit amet mi iaculis molestie ac non lacus. Nam vitae nisl aliquam, vulputate magna sit amet,
-        ullamcorper mauris. Praesent vulputate eros eget ligula cursus, vel condimentum justo ultricies. Nunc rutrum
-        sodales sapien, at mattis enim pretium non. Vivamus lobortis libero vulputate, tempor risus quis, vestibulum
-        odio. Cras sodales placerat varius. Quisque felis lacus, auctor ac pharetra sit amet, blandit at arcu. In hac
-        habitasse platea dictumst. Ut faucibus, massa id lacinia tincidunt, justo justo pellentesque nisi, eget aliquam
-        mauris ex vel dolor. Quisque vel lectus ante. Suspendisse efficitur leo eu urna imperdiet placerat. Duis vel
-        neque sed lacus convallis aliquet. Cras vehicula purus ut tellus eleifend tempor. In est erat, sollicitudin
-        volutpat hendrerit ut, tempor a eros. Pellentesque vehicula tempor lorem consectetur varius.
-        {'\n'}
-        {'\n'}
-        Sed mauris massa, lacinia nec turpis quis, vulputate hendrerit eros. Interdum et malesuada fames ac ante ipsum
-        primis in faucibus. Nullam fringilla orci nec dui semper gravida. Ut fermentum, tellus sit amet blandit
-        suscipit, mi mauris porta est, ut efficitur velit sem vulputate sapien. Donec nisi leo, ornare ac aliquet sed,
-        tincidunt sit amet ex. Sed metus nulla, vehicula a pretium eget, lacinia at dui. Nulla at felis vel arcu
-        sagittis pretium. Nulla non dapibus arcu. Vestibulum non erat eget velit lacinia mattis. Praesent pretium
-        facilisis placerat. Suspendisse vel sem bibendum, congue sapien in, consequat ipsum. Suspendisse ac arcu
-        convallis, elementum leo et, posuere orci. Aenean sagittis dictum pellentesque.
-      </Text>
-    </SwipeablePanel>
-  ),
-};
-
-export const LockPanel = {
-  render: () => (
-    <SwipeablePanel lockPanel offset={130}>
-      <Text>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vel egestas sem. Lorem ipsum dolor sit
-        amet, consectetur adipiscing elit. Etiam id ornare ex. Aliquam pharetra eleifend felis eu ultricies. Proin non
-        tristique turpis. Nulla et metus molestie, convallis augue nec, faucibus mi. In vitae gravida dui, vel hendrerit
-        elit. Donec nec tempor purus. Donec tempus libero vitae cursus laoreet. Sed metus arcu, accumsan dapibus
-        molestie a, iaculis sed ipsum. Cras ante quam, rhoncus eu euismod nec, bibendum at mauris.
-        {'\n'}
-        {'\n'}
-        Etiam aliquet leo sit amet mi iaculis molestie ac non lacus. Nam vitae nisl aliquam, vulputate magna sit amet,
-        ullamcorper mauris. Praesent vulputate eros eget ligula cursus, vel condimentum justo ultricies. Nunc rutrum
-        sodales sapien, at mattis enim pretium non. Vivamus lobortis libero vulputate, tempor risus quis, vestibulum
-        odio. Cras sodales placerat varius. Quisque felis lacus, auctor ac pharetra sit amet, blandit at arcu. In hac
-        habitasse platea dictumst. Ut faucibus, massa id lacinia tincidunt, justo justo pellentesque nisi, eget aliquam
-        mauris ex vel dolor. Quisque vel lectus ante. Suspendisse efficitur leo eu urna imperdiet placerat. Duis vel
-        neque sed lacus convallis aliquet. Cras vehicula purus ut tellus eleifend tempor. In est erat, sollicitudin
-        volutpat hendrerit ut, tempor a eros. Pellentesque vehicula tempor lorem consectetur varius.
-        {'\n'}
-        {'\n'}
-        Sed mauris massa, lacinia nec turpis quis, vulputate hendrerit eros. Interdum et malesuada fames ac ante ipsum
-        primis in faucibus. Nullam fringilla orci nec dui semper gravida. Ut fermentum, tellus sit amet blandit
-        suscipit, mi mauris porta est, ut efficitur velit sem vulputate sapien. Donec nisi leo, ornare ac aliquet sed,
-        tincidunt sit amet ex. Sed metus nulla, vehicula a pretium eget, lacinia at dui. Nulla at felis vel arcu
-        sagittis pretium. Nulla non dapibus arcu. Vestibulum non erat eget velit lacinia mattis. Praesent pretium
-        facilisis placerat. Suspendisse vel sem bibendum, congue sapien in, consequat ipsum. Suspendisse ac arcu
-        convallis, elementum leo et, posuere orci. Aenean sagittis dictum pellentesque.
-        {'\n'}
-        {'\n'}
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vel egestas sem. Lorem ipsum dolor sit
-        amet, consectetur adipiscing elit. Etiam id ornare ex. Aliquam pharetra eleifend felis eu ultricies. Proin non
-        tristique turpis. Nulla et metus molestie, convallis augue nec, faucibus mi. In vitae gravida dui, vel hendrerit
-        elit. Donec nec tempor purus. Donec tempus libero vitae cursus laoreet. Sed metus arcu, accumsan dapibus
-        molestie a, iaculis sed ipsum. Cras ante quam, rhoncus eu euismod nec, bibendum at mauris.
-        {'\n'}
-        {'\n'}
-        Etiam aliquet leo sit amet mi iaculis molestie ac non lacus. Nam vitae nisl aliquam, vulputate magna sit amet,
-        ullamcorper mauris. Praesent vulputate eros eget ligula cursus, vel condimentum justo ultricies. Nunc rutrum
-        sodales sapien, at mattis enim pretium non. Vivamus lobortis libero vulputate, tempor risus quis, vestibulum
-        odio. Cras sodales placerat varius. Quisque felis lacus, auctor ac pharetra sit amet, blandit at arcu. In hac
-        habitasse platea dictumst. Ut faucibus, massa id lacinia tincidunt, justo justo pellentesque nisi, eget aliquam
-        mauris ex vel dolor. Quisque vel lectus ante. Suspendisse efficitur leo eu urna imperdiet placerat. Duis vel
-        neque sed lacus convallis aliquet. Cras vehicula purus ut tellus eleifend tempor. In est erat, sollicitudin
-        volutpat hendrerit ut, tempor a eros. Pellentesque vehicula tempor lorem consectetur varius.
-        {'\n'}
-        {'\n'}
-        Sed mauris massa, lacinia nec turpis quis, vulputate hendrerit eros. Interdum et malesuada fames ac ante ipsum
-        primis in faucibus. Nullam fringilla orci nec dui semper gravida. Ut fermentum, tellus sit amet blandit
-        suscipit, mi mauris porta est, ut efficitur velit sem vulputate sapien. Donec nisi leo, ornare ac aliquet sed,
-        tincidunt sit amet ex. Sed metus nulla, vehicula a pretium eget, lacinia at dui. Nulla at felis vel arcu
-        sagittis pretium. Nulla non dapibus arcu. Vestibulum non erat eget velit lacinia mattis. Praesent pretium
-        facilisis placerat. Suspendisse vel sem bibendum, congue sapien in, consequat ipsum. Suspendisse ac arcu
-        convallis, elementum leo et, posuere orci. Aenean sagittis dictum pellentesque.
-      </Text>
-    </SwipeablePanel>
-  ),
-};

package/stories/Switch.stories.tsx

@@ -1,36 +0,0 @@
-import { View } from 'react-native';
-
-import { Switch } from '../components';
-
-export default {
-  title: 'Switch',
-  component: Switch,
-};
-
-export const Size = {
-  render: () => (
-    <>
-      <Switch value onValueChange={() => {}} />
-      <View style={{ marginVertical: 30 }} />
-      <Switch value={false} onValueChange={() => {}} />
-      <View style={{ marginVertical: 30 }} />
-      <Switch value onValueChange={() => {}} size="small" />
-      <View style={{ marginVertical: 30 }} />
-      <Switch value={false} onValueChange={() => {}} size="small" />
-    </>
-  ),
-};
-
-export const Disabled = {
-  render: () => (
-    <>
-      <Switch value onValueChange={() => {}} disabled />
-      <View style={{ marginVertical: 30 }} />
-      <Switch value={false} onValueChange={() => {}} disabled />
-      <View style={{ marginVertical: 30 }} />
-      <Switch value onValueChange={() => {}} size="small" disabled />
-      <View style={{ marginVertical: 30 }} />
-      <Switch value={false} onValueChange={() => {}} size="small" disabled />
-    </>
-  ),
-};

package/stories/TakePicture.stories.tsx

@@ -1,59 +0,0 @@
-import { useState } from 'react';
-
-import { Button, TakePicture, Text } from '../components';
-
-export default {
-  title: 'Take Picture',
-  component: TakePicture,
-};
-
-const DefaultComponent = () => {
-  const [takePicture, setTakePicture] = useState<boolean>(false);
-  return (
-    <>
-      <Button onPress={() => setTakePicture(true)}>
-        <Text color="white">Take picture</Text>
-      </Button>
-
-      <TakePicture
-        visible={takePicture}
-        onClose={() => setTakePicture(false)}
-        cameraErrorMessage="No access to the camera"
-        requestPermissionsMessage="Grant access to the camera"
-        processingPictureMessage="Processing"
-        repeatPictureText="Repeat"
-        usePictureText="Use"
-      />
-    </>
-  );
-};
-
-const AvatarComponent = () => {
-  const [takePicture, setTakePicture] = useState<boolean>(false);
-  return (
-    <>
-      <Button onPress={() => setTakePicture(true)}>
-        <Text color="white">Take avatar picture</Text>
-      </Button>
-
-      <TakePicture
-        visible={takePicture}
-        onClose={() => setTakePicture(false)}
-        cameraErrorMessage="No access to the camera"
-        requestPermissionsMessage="Grant access to the camera"
-        processingPictureMessage="Processing"
-        repeatPictureText="Repeat"
-        usePictureText="Use"
-        avatar
-      />
-    </>
-  );
-};
-
-export const Default = {
-  render: DefaultComponent,
-};
-
-export const Avatar = {
-  render: AvatarComponent,
-};

package/stories/Text.stories.tsx

@@ -1,61 +0,0 @@
-import { Text } from '../components';
-
-export default {
-  title: 'Text',
-  component: Text,
-};
-
-export const Size = {
-  render: () => (
-    <>
-      <Text size="huge">This is the huge text size</Text>
-      <Text size="extra-large">This is the extra large text size</Text>
-      <Text size="large">This is the large text size</Text>
-      <Text>This is the medium text size (default)</Text>
-      <Text size="small">This is the small text size</Text>
-      <Text size="tiny">This is the tiny text size</Text>
-    </>
-  ),
-};
-
-export const Color = {
-  render: () => (
-    <>
-      <Text>This is the dark text color (default)</Text>
-      <Text color="light">This is the light text color</Text>
-      <Text color="lighter">This is the light text color</Text>
-      <Text color="white">This is the white text color</Text>
-      <Text color="midgreen">This is the mid green text color</Text>
-      <Text color="green">This is the green text color</Text>
-      <Text color="brightviolet">This is the Bright Violet text color</Text>
-      <Text color="violet">This is the Violet text color</Text>
-      <Text color="red">This is the Red text color</Text>
-      <Text color="brightblue">This is the Blue text color</Text>
-      <Text color="electricblue">This is the Electric Blue text color</Text>
-      <Text color="yellow">This is the Yellow text color</Text>
-      <Text color="darkyellow">This is the Dark Yellow text color</Text>
-      <Text color="lightgold">This is the Light Gold text color</Text>
-      <Text color="gold">This is the Gold text color</Text>
-    </>
-  ),
-};
-
-export const Weight = {
-  render: () => (
-    <>
-      <Text>This is the default (regular) text weight</Text>
-      <Text weight="semiBold">This is the semiBold text weight</Text>
-      <Text weight="bold">This is the bold text weight</Text>
-    </>
-  ),
-};
-
-export const Variant = {
-  render: () => (
-    <>
-      <Text>This is the default variant</Text>
-      <Text variant="uppercase">This is the uppercase variant</Text>
-      <Text variant="lowercase">This is the lowercase variant</Text>
-    </>
-  ),
-};

package/stories/Textarea.stories.tsx

@@ -1,48 +0,0 @@
-import { Dimensions, View } from 'react-native';
-
-import { Textarea } from '../components';
-
-const { width } = Dimensions.get('window');
-
-export default {
-  title: 'Textarea',
-  component: Textarea,
-};
-
-export const Variant = {
-  render: () => (
-    <>
-      <Textarea placeholder="Placeholder" onChange={() => {}} />
-      <Textarea placeholder="Placeholder" onChange={() => {}} variant="completed" />
-      <Textarea placeholder="Placeholder" onChange={() => {}} variant="error" />
-    </>
-  ),
-};
-
-export const Disabled = {
-  render: () => (
-    <>
-      <Textarea placeholder="Placeholder" onChange={() => {}} disabled />
-      <Textarea placeholder="Placeholder" onChange={() => {}} variant="completed" disabled />
-      <Textarea placeholder="Placeholder" onChange={() => {}} variant="error" disabled />
-    </>
-  ),
-};
-
-export const FitToContainer = {
-  render: () => (
-    <>
-      <View style={{ width }}>
-        <Textarea placeholder="Placeholder" onChange={() => {}} fitToContainer />
-      </View>
-
-      <View style={{ width: width - 100 }}>
-        <Textarea placeholder="Placeholder" onChange={() => {}} variant="completed" fitToContainer />
-      </View>
-
-      <View style={{ width: width - 180 }}>
-        <Textarea placeholder="Placeholder" onChange={() => {}} variant="error" fitToContainer />
-      </View>
-    </>
-  ),
-};

package/stories/TimeOutButton.stories.tsx

@@ -1,55 +0,0 @@
-import { useRef } from 'react';
-import { View } from 'react-native';
-
-import { Button, Text, TimeOutButton } from '../components';
-
-export default {
-  title: 'TimeOutButton',
-  component: TimeOutButton,
-};
-
-export const Default = {
-  render: () => (
-    <TimeOutButton time={3000} onPress={() => {}}>
-      <Text color="white">Button text</Text>
-    </TimeOutButton>
-  ),
-};
-
-export const Warning = {
-  render: () => (
-    <TimeOutButton warning time={3000} onPress={() => {}}>
-      <Text color="white">Button text</Text>
-    </TimeOutButton>
-  ),
-};
-
-const StopTimeComponent = () => {
-  // Replace 'any' with the actual type if available, e.g. React.RefObject<TimeOutButtonHandle>
-  const timeOutRef = useRef<any>(null);
-
-  return (
-    <>
-      <TimeOutButton time={3000} onPress={() => {}} ref={timeOutRef}>
-        <Text color="white">Button text</Text>
-      </TimeOutButton>
-
-      <View style={{ marginVertical: 50 }} />
-
-      <Button
-        variant="inverted"
-        onPress={() => {
-          if (timeOutRef.current) {
-            timeOutRef.current.onStop();
-          }
-        }}
-      >
-        <Text color="white">Stop time</Text>
-      </Button>
-    </>
-  );
-};
-
-export const StopTime = {
-  render: StopTimeComponent,
-};

package/stories/Toast.stories.tsx

@@ -1,37 +0,0 @@
-import { Button, sendMessage, Text, Toast } from '../components';
-
-export default {
-  title: 'Toast',
-  component: Toast,
-};
-
-export const Variant = {
-  render: () => (
-    <>
-      <Button
-        onPress={() =>
-          sendMessage({
-            variant: 'success',
-            message: 'Success message text',
-            description: 'Success message description',
-          })
-        }
-      >
-        <Text color="white">Success message text</Text>
-      </Button>
-      <Button
-        variant="error"
-        onPress={() =>
-          sendMessage({
-            variant: 'error',
-            message: 'Error message text',
-            description: 'Error message description',
-          })
-        }
-      >
-        <Text color="white">Error message text</Text>
-      </Button>
-      <Toast />
-    </>
-  ),
-};