Skip to content

Commit

Permalink
✨ Storybook - add date field to storybook
Browse files Browse the repository at this point in the history
  • Loading branch information
JosselinTILLAY committed Dec 15, 2023
1 parent 9d3058f commit 5e890b7
Show file tree
Hide file tree
Showing 2 changed files with 36 additions and 0 deletions.
1 change: 1 addition & 0 deletions Storybook/.ondevice/storybook.requires.js
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,7 @@ const getStories = () => {
"./components/BottomSheet/BottomSheet.stories.tsx": require("../components/BottomSheet/BottomSheet.stories.tsx"),
"./components/Button/Button.stories.tsx": require("../components/Button/Button.stories.tsx"),
"./components/Card/Card.stories.tsx": require("../components/Card/Card.stories.tsx"),
"./components/DatePicker/DateField.stories.tsx": require("../components/DatePicker/DateField.stories.tsx"),
"./components/Dialog/Dialog.stories.tsx": require("../components/Dialog/Dialog.stories.tsx"),
"./components/Divider/Divider.stories.tsx": require("../components/Divider/Divider.stories.tsx"),
"./components/DropDown/DropDown.stories.tsx": require("../components/DropDown/DropDown.stories.tsx"),
Expand Down
35 changes: 35 additions & 0 deletions Storybook/components/DatePicker/DateField.stories.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
import React, { useState } from 'react';
import { ComponentMeta } from '@storybook/react';
import { StyleSheet, View } from 'react-native';
import { DateField } from '../../../src';
import { DateFieldProps } from '../../../src/components/datePicker/DateField';

export default {
title: 'components/DateField',
component: DateField,
argTypes: {
placeholder: { control: { type: 'text' }, defaultValue: '01' },
hasError: { control: { type: 'boolean' }, defaultValue: false },
},
decorators: [
(Story) => {
const styles = StyleSheet.create({
container: {
alignItems: 'center',
justifyContent: 'center',
flex: 1,
},
});
return (
<View style={styles.container}>
<Story />
</View>
);
},
],
} as ComponentMeta<typeof DateField>;

export const Default = (args: DateFieldProps) => {
const [value, setValue] = useState('');
return <DateField value={value} {...args} onChangeText={setValue} />;
};

0 comments on commit 5e890b7

Please sign in to comment.