From 111e956632d47c07957874de26089f4ac51c26e7 Mon Sep 17 00:00:00 2001 From: panagiotis vourtsis Date: Tue, 28 Nov 2023 09:35:03 +0200 Subject: [PATCH] feat: mdx to csf --- src/components/Tag/Tag.mdx | 78 +++++ src/components/Tag/Tag.stories.mdx | 285 ------------------ src/components/Tag/Tag.stories.tsx | 216 +++++++++++++ src/components/TextArea/TextArea.mdx | 72 +++++ ...tArea.stories.mdx => TextArea.stories.tsx} | 135 +++------ src/components/TextField/TextField.mdx | 108 +++++++ .../TextField/TextField.stories.mdx | 244 --------------- .../TextField/TextField.stories.tsx | 158 ++++++++++ ...Provider.stories.mdx => ThemeProvider.mdx} | 19 +- .../ThemeProvider/ThemeProvider.stories.tsx | 24 ++ src/components/Toast/Toast.mdx | 28 ++ .../{Toast.stories.mdx => Toast.stories.tsx} | 42 +-- src/components/Tooltip/Tooltip.mdx | 60 ++++ src/components/Tooltip/Tooltip.stories.mdx | 200 ------------ src/components/Tooltip/Tooltip.stories.tsx | 156 ++++++++++ src/components/TopAppBar/TopAppBar.mdx | 56 ++++ .../TopAppBar/TopAppBar.stories.mdx | 101 ------- .../TopAppBar/TopAppBar.stories.tsx | 80 +++++ .../TruncatedContent/TruncatedContent.mdx | 35 +++ .../TruncatedContent.stories.mdx | 66 ---- .../TruncatedContent.stories.tsx | 62 ++++ src/components/Typography/Typography.mdx | 74 +++++ ...phy.stories.mdx => Typography.stories.tsx} | 130 +++----- src/hooks/useSearchQueryParams.mdx | 26 ++ src/hooks/useSearchQueryParams.stories.mdx | 50 --- src/hooks/useSearchQueryParams.stories.tsx | 33 ++ 26 files changed, 1367 insertions(+), 1171 deletions(-) create mode 100644 src/components/Tag/Tag.mdx delete mode 100644 src/components/Tag/Tag.stories.mdx create mode 100644 src/components/Tag/Tag.stories.tsx create mode 100644 src/components/TextArea/TextArea.mdx rename src/components/TextArea/{TextArea.stories.mdx => TextArea.stories.tsx} (63%) create mode 100644 src/components/TextField/TextField.mdx delete mode 100644 src/components/TextField/TextField.stories.mdx create mode 100644 src/components/TextField/TextField.stories.tsx rename src/components/ThemeProvider/{ThemeProvider.stories.mdx => ThemeProvider.mdx} (58%) create mode 100644 src/components/Toast/Toast.mdx rename src/components/Toast/{Toast.stories.mdx => Toast.stories.tsx} (75%) create mode 100644 src/components/Tooltip/Tooltip.mdx delete mode 100644 src/components/Tooltip/Tooltip.stories.mdx create mode 100644 src/components/Tooltip/Tooltip.stories.tsx create mode 100644 src/components/TopAppBar/TopAppBar.mdx delete mode 100644 src/components/TopAppBar/TopAppBar.stories.mdx create mode 100644 src/components/TopAppBar/TopAppBar.stories.tsx create mode 100644 src/components/TruncatedContent/TruncatedContent.mdx delete mode 100644 src/components/TruncatedContent/TruncatedContent.stories.mdx create mode 100644 src/components/TruncatedContent/TruncatedContent.stories.tsx create mode 100644 src/components/Typography/Typography.mdx rename src/components/Typography/{Typography.stories.mdx => Typography.stories.tsx} (64%) create mode 100644 src/hooks/useSearchQueryParams.mdx delete mode 100644 src/hooks/useSearchQueryParams.stories.mdx create mode 100644 src/hooks/useSearchQueryParams.stories.tsx diff --git a/src/components/Tag/Tag.mdx b/src/components/Tag/Tag.mdx new file mode 100644 index 000000000..b2d820f7d --- /dev/null +++ b/src/components/Tag/Tag.mdx @@ -0,0 +1,78 @@ +import { Meta, Canvas, ArgTypes } from '@storybook/blocks'; +import Tag from './Tag'; +import SectionHeader from '../../storybook/SectionHeader'; +import * as TagStories from './Tag.stories'; + + + + + +- [Overview](#overview) +- [Props](#props) +- [Usage](#usage) +- [Variants](#variants) + +## Overview + +A universal Tag that is used to highlight system-generated metadata. + +## Props + + + +## Usage + + + + + +### Read-only Tag + +Read-only Tag comes in 5 colors: `neutral`, `blue`, `red`, `purple` and `teal`. + + + +### Read-only Tag with icon + +An leading icon can be added to the read-only Tag. + + + +### Selectable Tag + +Tag can also be selectable. To enable this functionality, provide the `onSelect` prop to the component.
+The `isSelected` prop indicates whether the Tag is selected or not. + + + +### Clearable Tag + +Tag can also be clearable. To enable this functionality, provide the `onClear` prop to the component + + + Tags cannot be selectable and clearable at the same time. If the onClear prop is provided, it + overrides the selectable functionality + + + + +### Tag sizes + +There are two Tag sizes: `normal` and `small`. + + + +### Playground + + diff --git a/src/components/Tag/Tag.stories.mdx b/src/components/Tag/Tag.stories.mdx deleted file mode 100644 index 82ced33a1..000000000 --- a/src/components/Tag/Tag.stories.mdx +++ /dev/null @@ -1,285 +0,0 @@ -import { Meta, Preview, Props, Story } from '@storybook/addon-docs'; -import { boolean, select, text, withKnobs } from '@storybook/addon-knobs'; -import Tag from './Tag'; -import Typography from '../Typography'; -import Stack from '../storyUtils/Stack'; -import { FIGMA_URL, Function } from '../../utils/common'; -import SectionHeader from '../../storybook/SectionHeader'; -import TagShowcase from '../../storybook/Showcases/TagShowcase'; -import { getIconSelectorKnob } from '../../utils/stories'; -import Overview from '../../storybook/Overview'; -import { useState } from 'react'; - - - - - -- [Overview](#overview) -- [Props](#props) -- [Usage](#usage) -- [Variants](#variants) - -## Overview - - - A universal Tag that is used to highlight system-generated metadata. - - -## Props - - - -## Usage - - - - - -### Read-only Tag - -Read-only Tag comes in 5 colors: `neutral`, `blue`, `red`, `purple` and `teal`. - - - - - Label - Label - Label - Label - Label - - - - -### Read-only Tag with icon - -An leading icon can be added to the read-only Tag. - - - - - Label - - Label - - - Label - - - Label - - - Label - - - - - -### Selectable Tag - -Tag can also be selectable. To enable this functionality, provide the `onSelect` prop to the component.
-The `isSelected` prop indicates whether the Tag is selected or not. - - - - - - {() => { - const [isSelected, setIsSelected] = useState(false); - return ( - setIsSelected((isSelected) => !isSelected)} - > - Label - - ); - }} - - - {() => { - const [isSelected, setIsSelected] = useState(true); - return ( - setIsSelected((isSelected) => !isSelected)} - > - Label - - ); - }} - - - - - -### Clearable Tag - -Tag can also be clearable. To enable this functionality, provide the `onClear` prop to the component - - - Tags cannot be selectable and clearable at the same time. If the onClear prop is provided, it - overrides the selectable functionality - - - - - - console.log('clear')}>Label - - - - -### Tag sizes - -There are two Tag sizes: `normal` and `small`. - - - - - Read-only Tag - - - Normal - Normal - Normal - Normal - Normal - - - Small - - Small - - - Small - - - Small - - - Small - - - - Selectable Tag - - - - {() => { - const [isSelected, setIsSelected] = useState(false); - return ( - setIsSelected((isSelected) => !isSelected)} - > - Normal - - ); - }} - - - {() => { - const [isSelected, setIsSelected] = useState(true); - return ( - setIsSelected((isSelected) => !isSelected)} - > - Normal - - ); - }} - - - - - {() => { - const [isSelected, setIsSelected] = useState(false); - return ( - setIsSelected((isSelected) => !isSelected)} - > - Small - - ); - }} - - - {() => { - const [isSelected, setIsSelected] = useState(true); - return ( - setIsSelected((isSelected) => !isSelected)} - > - Small - - ); - }} - - - - Clearable Tag - - - console.log('clear')}>Normal - - - console.log('clear')}> - Small - - - - - -### Playground - - - - - - - - diff --git a/src/components/Tag/Tag.stories.tsx b/src/components/Tag/Tag.stories.tsx new file mode 100644 index 000000000..e586328a7 --- /dev/null +++ b/src/components/Tag/Tag.stories.tsx @@ -0,0 +1,216 @@ +import Tag from './Tag'; + +import { FIGMA_URL, Function } from '../../utils/common'; +import Stack from 'components/storyUtils/Stack'; +import { useState } from 'react'; +import TagShowcase from '../../storybook/Showcases/TagShowcase'; +import { boolean, select, text } from '@storybook/addon-knobs'; +import Typography from '../Typography'; +import { getIconSelectorKnob } from '../../utils/stories'; + +export default { + title: 'Updated Components/Tag', + component: Tag, + parameters: { + design: [ + { + type: 'figma', + name: 'Tag', + url: `${FIGMA_URL}?node-id=3325%3A58246`, + }, + ], + chromatic: { diffThreshold: 0.3 }, + }, +}; + +export const ReadOnlyTag = { + render: () => ( + + Label + Label + Label + Label + Label + + ), + name: 'Read-only Tag', +}; + +export const ReadOnlyTagWithIcon = { + render: () => ( + + Label + + Label + + + Label + + + Label + + + Label + + + ), + name: 'Read-only Tag with icon', +}; + +export const SelectableTag = { + render: () => ( + + + {() => { + const [isSelected, setIsSelected] = useState(false); + return ( + setIsSelected((isSelected) => !isSelected)} + > + Label + + ); + }} + + + {() => { + const [isSelected, setIsSelected] = useState(true); + return ( + setIsSelected((isSelected) => !isSelected)} + > + Label + + ); + }} + + + ), + name: 'Selectable Tag', +}; + +export const ClearableTag = { + render: () => console.log('clear')}>Label, + name: 'Clearable Tag', +}; + +export const TagSizes = { + render: () => ( + <> + + Read-only Tag + + + Normal + Normal + Normal + Normal + Normal + + + Small + + Small + + + Small + + + Small + + + Small + + + + Selectable Tag + + + + {() => { + const [isSelected, setIsSelected] = useState(false); + return ( + setIsSelected((isSelected) => !isSelected)} + > + Normal + + ); + }} + + + {() => { + const [isSelected, setIsSelected] = useState(true); + return ( + setIsSelected((isSelected) => !isSelected)} + > + Normal + + ); + }} + + + + + {() => { + const [isSelected, setIsSelected] = useState(false); + return ( + setIsSelected((isSelected) => !isSelected)} + > + Small + + ); + }} + + + {() => { + const [isSelected, setIsSelected] = useState(true); + return ( + setIsSelected((isSelected) => !isSelected)} + > + Small + + ); + }} + + + + Clearable Tag + + + console.log('clear')}>Normal + + + console.log('clear')}> + Small + + + + ), + name: 'Tag sizes', +}; + +export const Playground = { + render: () => ( + + ), + name: 'Playground', +}; diff --git a/src/components/TextArea/TextArea.mdx b/src/components/TextArea/TextArea.mdx new file mode 100644 index 000000000..87c1fb5a8 --- /dev/null +++ b/src/components/TextArea/TextArea.mdx @@ -0,0 +1,72 @@ +import { Meta, Canvas, ArgTypes } from '@storybook/blocks'; +import TextArea from './TextArea'; +import SectionHeader from '../../storybook/SectionHeader'; +import * as TextAreaStories from './TextArea.stories'; +import Overview from '../../storybook/Overview'; + + + + + +- [Overview](#overview) +- [Props](#props) +- [Usage](#usage) +- [Variants](#variants) + +# Overview + +A universal TextArea component used for the case where large string of text is needed as an input. + +## Props + + + +## Usage + + + + + +### TextArea with placeholder + +TextArea with or without placeholder + + + +### TextArea with resizing option + +TextArea and how to change size with cols and rows + + + +### TextArea with counter + +TextArea with maximum characters indicated by a counter. + + + TextArea is a controlled component, so in order for the counter to work, the value prop must be + passed to the component. + + + + +### TextArea statuses + +TextArea with 3 available statuses: Normal, Error and Read-only. + + + +### Disabled TextArea + +Regular TextArea disabled with label + + + +### Playground + + diff --git a/src/components/TextArea/TextArea.stories.mdx b/src/components/TextArea/TextArea.stories.tsx similarity index 63% rename from src/components/TextArea/TextArea.stories.mdx rename to src/components/TextArea/TextArea.stories.tsx index 448db0228..f47af8270 100644 --- a/src/components/TextArea/TextArea.stories.mdx +++ b/src/components/TextArea/TextArea.stories.tsx @@ -1,15 +1,15 @@ -import { Meta, Preview, Props, Story } from '@storybook/addon-docs'; import { boolean, select, text, withKnobs, number } from '@storybook/addon-knobs'; import TextArea from './TextArea'; import Stack from '../storyUtils/Stack'; import { FIGMA_URL, Function } from '../../utils/common'; -import Overview from '../../storybook/Overview'; +import SectionHeader from '../../storybook/SectionHeader'; import { useState } from 'react'; - - - - -- [Overview](#overview) -- [Props](#props) -- [Usage](#usage) -- [Variants](#variants) - -# Overview - - - - A universal TextArea component used for the case where large string of text is needed as an - input. - - - -## Props - - - -## Usage - - - - - -### TextArea with placeholder + }, +}; -TextArea with or without placeholder - - - +export const TextAreaWithPlaceholder = { + render: () => (