Skip to content

Commit

Permalink
💄 Button : add all status and update stories
Browse files Browse the repository at this point in the history
  • Loading branch information
@clementdejoie
clementdejoie committed Jul 17, 2024
1 parent f691314 commit b641791
Show file tree
Hide file tree
Showing 2 changed files with 273 additions and 95 deletions.
205 changes: 169 additions & 36 deletions Storybook/components/Button/Button.stories.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,54 +1,187 @@
import type { Meta, StoryObj } from '@storybook/react-native';
import type { ComponentMeta, ComponentStory } from '@storybook/react-native';
import React from 'react';
import { StyleSheet, View } from 'react-native';
import { View } from 'react-native';
import { Button } from '../../../src/components/buttons/Button';

import { Button } from 'smartway-react-native-ui';
type ButtonType = typeof Button;

export default {
title: 'components/Button',
component: Button,
argTypes: {
variant: {
control: { type: 'radio' },
options: ['filled', 'outlined', 'text'],
},
size: {
control: { type: 'radio' },
options: ['s', 'm', null],
},
status: {
control: { type: 'radio' },
options: ['primary', 'default', null],
},
onPress: { action: 'clicked' },
},
decorators: [
(Story) => {
const styles = StyleSheet.create({
container: { alignItems: 'center', justifyContent: 'center', flex: 1 },
});
return (
<View style={styles.container}>
<View style={{ alignItems: 'center', justifyContent: 'center', flex: 1 }}>
<Story />
</View>
);
},
],
parameters: {
notes: `
# Button
A simple button.
} as ComponentMeta<ButtonType>;

`,
export const Default: ComponentStory<ButtonType> = (args) => {
return <Button {...args}>Button</Button>;
};
Default.argTypes = {
size: {
control: { type: 'radio' },
options: ['s', 'm'],
},
} as Meta<typeof Button>;

type Story = StoryObj<typeof Button>;

export const Default: Story = {
args: {
children: 'Button',
variant: {
control: { type: 'radio' },
options: ['filled', 'outlined', 'text'],
},
status: {
control: { type: 'radio' },
options: ['default', 'primary', 'info', 'success', 'warning', 'error', 'inherit'],
},
disabled: {
control: { type: 'boolean' },
},
onPress: { action: 'clicked' },
};

export const Catalog: ComponentStory<ButtonType> = (args) => {
return (
<View style={{ gap: 8 }}>
<View style={{ flexDirection: 'row', gap: 8 }}>
<Button {...args} variant="filled" status="default">
Button
</Button>
<Button {...args} variant="filled" status="primary">
Button
</Button>
<Button {...args} variant="filled" status="info">
Button
</Button>
<Button {...args} variant="filled" status="success">
Button
</Button>
<Button {...args} variant="filled" status="warning">
Button
</Button>
<Button {...args} variant="filled" status="error">
Button
</Button>
<Button {...args} variant="filled" status="inherit">
Button
</Button>
</View>
<View style={{ flexDirection: 'row', gap: 8 }}>
<Button {...args} variant="filled" status="default" disabled>
Button
</Button>
<Button {...args} variant="filled" status="primary" disabled>
Button
</Button>
<Button {...args} variant="filled" status="info" disabled>
Button
</Button>
<Button {...args} variant="filled" status="success" disabled>
Button
</Button>
<Button {...args} variant="filled" status="warning" disabled>
Button
</Button>
<Button {...args} variant="filled" status="error" disabled>
Button
</Button>
<Button {...args} variant="filled" status="inherit" disabled>
Button
</Button>
</View>
<View style={{ flexDirection: 'row', gap: 8 }}>
<Button {...args} variant="outlined" status="default">
Button
</Button>
<Button {...args} variant="outlined" status="primary">
Button
</Button>
<Button {...args} variant="outlined" status="info">
Button
</Button>
<Button {...args} variant="outlined" status="success">
Button
</Button>
<Button {...args} variant="outlined" status="warning">
Button
</Button>
<Button {...args} variant="outlined" status="error">
Button
</Button>
<Button {...args} variant="outlined" status="inherit">
Button
</Button>
</View>
<View style={{ flexDirection: 'row', gap: 8 }}>
<Button {...args} variant="outlined" status="default" disabled>
Button
</Button>
<Button {...args} variant="outlined" status="primary" disabled>
Button
</Button>
<Button {...args} variant="outlined" status="info" disabled>
Button
</Button>
<Button {...args} variant="outlined" status="success" disabled>
Button
</Button>
<Button {...args} variant="outlined" status="warning" disabled>
Button
</Button>
<Button {...args} variant="outlined" status="error" disabled>
Button
</Button>
<Button {...args} variant="outlined" status="inherit" disabled>
Button
</Button>
</View>
<View style={{ flexDirection: 'row', gap: 8 }}>
<Button {...args} variant="text" status="default">
Button
</Button>
<Button {...args} variant="text" status="primary">
Button
</Button>
<Button {...args} variant="text" status="info">
Button
</Button>
<Button {...args} variant="text" status="success">
Button
</Button>
<Button {...args} variant="text" status="warning">
Button
</Button>
<Button {...args} variant="text" status="error">
Button
</Button>
<Button {...args} variant="text" status="inherit">
Button
</Button>
</View>
<View style={{ flexDirection: 'row', gap: 8 }}>
<Button {...args} variant="text" status="default" disabled>
Button
</Button>
<Button {...args} variant="text" status="primary" disabled>
Button
</Button>
<Button {...args} variant="text" status="info" disabled>
Button
</Button>
<Button {...args} variant="text" status="success" disabled>
Button
</Button>
<Button {...args} variant="text" status="warning" disabled>
Button
</Button>
<Button {...args} variant="text" status="error" disabled>
Button
</Button>
<Button {...args} variant="text" status="inherit" disabled>
Button
</Button>
</View>
</View>
);
};
Default.parameters = { noSafeArea: false };
Loading

0 comments on commit b641791

Please sign in to comment.