studio/cunningham
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

♻️(react) migrate to Storybook 7

Browse Source 
This new release comes with breaking changes for stories and mdx docs.
This commit is contained in:
Nathan Vasse
2023-05-12 16:03:16 +02:00
committed by NathanVss
parent e7fc782b1c
commit 77721c3b6d
24 changed files with 2639 additions and 4187 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
packages/react/src/components/Forms/Input/index.stories.mdx
View File

@@ -24,15 +24,15 @@ Cunningham provides a versatile Input component that you can use in your forms.
You can use the following props to change the state of the Input component by using the `state` props.
<Canvas withSource="open">
<Canvas sourceState="shown">
<Story id="components-forms-input--default"/>
</Canvas>
<Canvas withSource="open">
<Canvas sourceState="shown">
<Story id="components-forms-input--success"/>
</Canvas>
<Canvas withSource="open">
<Canvas sourceState="shown">
<Story id="components-forms-input--error"/>
</Canvas>
@@ -40,7 +40,7 @@ You can use the following props to change the state of the Input component by us
As a regular input, you can disable it by using the `disabled` props.
<Canvas withSource="open">
<Canvas sourceState="shown">
<Story id="components-forms-input--disabled-empty"/>
<Story id="components-forms-input--disabled-filled"/>
</Canvas>
@@ -49,13 +49,13 @@ As a regular input, you can disable it by using the `disabled` props.
You can define an icon that will appear on the left side of the input by using the `icon` props.
<Canvas withSource="open">
<Canvas sourceState="shown">
<Story id="components-forms-input--icon"/>
</Canvas>
You can also independently add an icon on the right side by using the `rightIcon` props.
<Canvas withSource="open">
<Canvas sourceState="shown">
<Story id="components-forms-input--icon-right"/>
</Canvas>
@@ -63,13 +63,13 @@ You can also independently add an icon on the right side by using the `rightIcon
You can define a text that will appear below the input by using the `text` props.
<Canvas withSource="open">
<Canvas sourceState="shown">
<Story id="components-forms-input--with-text"/>
</Canvas>
You can also independently add a text on the right side by using the `rightText` props.
<Canvas withSource="open">
<Canvas sourceState="shown">
<Story id="components-forms-input--with-both-texts"/>
</Canvas>
@@ -77,7 +77,7 @@ You can also independently add a text on the right side by using the `rightText`
By default, the input has a default width, like all inputs. But you can force it to take the full width of its container by using the `fullWidth` props.
<Canvas withSource="open">
<Canvas sourceState="shown">
<Story id="components-forms-input--full-width"/>
</Canvas>
@@ -86,7 +86,7 @@ By default, the input has a default width, like all inputs. But you can force it
You can display a counter of the number of characters entered in the input by using the `charsCounter` props. Please bare
in mind to also define `charCounterMax`.
<Canvas withSource="open">
<Canvas sourceState="shown">
<Story id="components-forms-input--char-counter"/>
</Canvas>
@@ -95,7 +95,7 @@ in mind to also define `charCounterMax`.
Like a native input, you can use the Input component in a controlled or non controlled way. You can see the example below
using the component in a controlled way.
<Canvas withSource="open">
<Canvas sourceState="shown">
<Story id="components-forms-input--controlled"/>
</Canvas>
@@ -103,7 +103,7 @@ using the component in a controlled way.
You can use the `ref` props to get a reference to the input element. The ref to the native input is nested inside the `input` attribute.
<Canvas withSource="open">
<Canvas sourceState="shown">
<Story id="components-forms-input--with-ref"/>
</Canvas>

187
packages/react/src/components/Forms/Input/index.stories.tsx
View File

@@ -1,4 +1,4 @@
import { ComponentMeta, ComponentStory } from "@storybook/react";
import { Meta } from "@storybook/react";
import React, { useRef } from "react";
import { Input, InputRefType } from ":/components/Forms/Input/index";
import { Button } from ":/components/Button";
@@ -6,121 +6,134 @@ import { Button } from ":/components/Button";
export default {
title: "Components/Forms/Input",
component: Input,
} as ComponentMeta<typeof Input>;
} as Meta<typeof Input>;
const Template: ComponentStory<typeof Input> = (args) => <Input {...args} />;
export const Default = Template.bind({});
Default.args = {
defaultValue: "Hello world",
label: "Your name",
export const Default = {
args: {
defaultValue: "Hello world",
label: "Your name",
},
};
export const Success = Template.bind({});
Success.args = {
defaultValue: "Hello world",
label: "Your name",
state: "success",
icon: <span className="material-icons">person</span>,
text: "This is an optional success message",
export const Success = {
args: {
defaultValue: "Hello world",
label: "Your name",
state: "success",
icon: <span className="material-icons">person</span>,
text: "This is an optional success message",
},
};
export const Error = Template.bind({});
Error.args = {
defaultValue: "Hello world",
label: "Your name",
state: "error",
icon: <span className="material-icons">person</span>,
text: "This is an optional error message",
export const Error = {
args: {
defaultValue: "Hello world",
label: "Your name",
state: "error",
icon: <span className="material-icons">person</span>,
text: "This is an optional error message",
},
};
export const DisabledEmpty = Template.bind({});
DisabledEmpty.args = {
label: "Your name",
icon: <span className="material-icons">person</span>,
disabled: true,
export const DisabledEmpty = {
args: {
label: "Your name",
icon: <span className="material-icons">person</span>,
disabled: true,
},
};
export const DisabledFilled = Template.bind({});
DisabledFilled.args = {
label: "Your name",
defaultValue: "John Doe",
icon: <span className="material-icons">person</span>,
disabled: true,
export const DisabledFilled = {
args: {
label: "Your name",
defaultValue: "John Doe",
icon: <span className="material-icons">person</span>,
disabled: true,
},
};
export const Empty = Template.bind({});
Empty.args = {
label: "Your email",
export const Empty = {
args: {
label: "Your email",
},
};
export const Icon = Template.bind({});
Icon.args = {
label: "Account balance",
icon: <span className="material-icons">attach_money</span>,
defaultValue: "1000",
export const Icon = {
args: {
label: "Account balance",
icon: <span className="material-icons">attach_money</span>,
defaultValue: "1000",
},
};
export const IconRight = Template.bind({});
IconRight.args = {
label: "Account balance",
rightIcon: <span className="material-icons">attach_money</span>,
defaultValue: "1000",
export const IconRight = {
args: {
label: "Account balance",
rightIcon: <span className="material-icons">attach_money</span>,
defaultValue: "1000",
},
};
export const IconBoth = Template.bind({});
IconBoth.args = {
label: "Not a recommended use",
icon: <span className="material-icons">attach_money</span>,
rightIcon: <span className="material-icons">attach_money</span>,
defaultValue: "Is isn't recommended to use both icons",
export const IconBoth = {
args: {
label: "Not a recommended use",
icon: <span className="material-icons">attach_money</span>,
rightIcon: <span className="material-icons">attach_money</span>,
defaultValue: "Is isn't recommended to use both icons",
},
};
export const OverflowingText = Template.bind({});
OverflowingText.args = {
label: "Your name",
icon: <span className="material-icons">attach_money</span>,
defaultValue: "John Dave Mike Smith Doe Junior Senior Yoda Skywalker",
export const OverflowingText = {
args: {
label: "Your name",
icon: <span className="material-icons">attach_money</span>,
defaultValue: "John Dave Mike Smith Doe Junior Senior Yoda Skywalker",
},
};
export const WithText = Template.bind({});
WithText.args = {
defaultValue: "Hello world",
label: "Your name",
text: "This is a text, you can display anything you want here like warnings, informations or errors.",
export const WithText = {
args: {
defaultValue: "Hello world",
label: "Your name",
text: "This is a text, you can display anything you want here like warnings, informations or errors.",
},
};
export const WithTextRight = Template.bind({});
WithTextRight.args = {
defaultValue: "Hello world",
label: "Your name",
rightText: "0/300",
export const WithTextRight = {
args: {
defaultValue: "Hello world",
label: "Your name",
rightText: "0/300",
},
};
export const WithBothTexts = Template.bind({});
WithBothTexts.args = {
defaultValue: "Hello world",
label: "Your name",
text: "This is a text, you can display anything you want here like warnings, informations or errors.",
rightText: "0/300",
export const WithBothTexts = {
args: {
defaultValue: "Hello world",
label: "Your name",
text: "This is a text, you can display anything you want here like warnings, informations or errors.",
rightText: "0/300",
},
};
export const FullWidth = Template.bind({});
FullWidth.args = {
defaultValue: "Hello world",
label: "Your name",
fullWidth: true,
text: "This is a text, you can display anything you want here like warnings, informations or errors.",
rightText: "0/300",
export const FullWidth = {
args: {
defaultValue: "Hello world",
label: "Your name",
fullWidth: true,
text: "This is a text, you can display anything you want here like warnings, informations or errors.",
rightText: "0/300",
},
};
export const CharCounter = Template.bind({});
CharCounter.args = {
defaultValue: "CEO",
label: "Job title",
text: "This is a text, you can display anything you want here like warnings, informations or errors.",
charCounter: true,
charCounterMax: 30,
export const CharCounter = {
args: {
defaultValue: "CEO",
label: "Job title",
text: "This is a text, you can display anything you want here like warnings, informations or errors.",
charCounter: true,
charCounterMax: 30,
},
};
export const Controlled = () => {