From 93aa3e6c25a3fc3c7b9e31a5c6ef011737b182ad Mon Sep 17 00:00:00 2001 From: cheton Date: Sun, 19 Nov 2023 11:26:07 +0800 Subject: [PATCH] docs: update skeleton --- .../pages/components/skeleton.page.mdx | 182 ------------------ .../pages/components/skeleton/animations.js | 55 ++++++ .../pages/components/skeleton/color.js | 16 ++ .../pages/components/skeleton/index.page.mdx | 61 ++++++ .../components/skeleton/modal-skeletons.js | 44 +++++ .../components/skeleton/profile-skeletons.js | 27 +++ .../pages/components/skeleton/variants.js | 13 ++ 7 files changed, 216 insertions(+), 182 deletions(-) delete mode 100644 packages/react-docs/pages/components/skeleton.page.mdx create mode 100644 packages/react-docs/pages/components/skeleton/animations.js create mode 100644 packages/react-docs/pages/components/skeleton/color.js create mode 100644 packages/react-docs/pages/components/skeleton/index.page.mdx create mode 100644 packages/react-docs/pages/components/skeleton/modal-skeletons.js create mode 100644 packages/react-docs/pages/components/skeleton/profile-skeletons.js create mode 100644 packages/react-docs/pages/components/skeleton/variants.js diff --git a/packages/react-docs/pages/components/skeleton.page.mdx b/packages/react-docs/pages/components/skeleton.page.mdx deleted file mode 100644 index 5321e6ea42..0000000000 --- a/packages/react-docs/pages/components/skeleton.page.mdx +++ /dev/null @@ -1,182 +0,0 @@ -# Skeleton - -Display a placeholder preview of your content before the data gets loaded to reduce load-time frustration. - -## Import - -```js -import { Skeleton } from '@tonic-ui/react'; -``` - -## Usage - -The component is designed to be used when the data for your component might not be immediately available. For instance: - -```jsx disabled -{image - ? - : -} -``` - -### Variants - -The component supports 3 shape variants: -* `text` (default) represents a single line of text. -* `rectangle` and `circle` represent a rectangle and a circle respectively. - -```jsx - - - - - - -``` - -### Animations - -By default, the animation is disabled. You can enable animation by setting the `animation` prop to `wave` or `pulse`. - -```jsx noInline -const FormGroup = (props) => ( - -); - -const useSelection = (defaultValue) => { - const [value, setValue] = React.useState(defaultValue); - const changeBy = (value) => () => setValue(value); - return [value, changeBy]; -}; - -render(() => { - const [animation, changeAnimationBy] = useSelection('none'); - - return ( - <> - - - - animation - - - *:not(:first-of-type)': { - marginLeft: -1 - } - }} - > - {['none', 'pulse', 'wave'].map(value => ( - - ))} - - - - - - - - - - ); -}); -``` - -### Color - -The color of the component can be customized by changing its `backgroundColor` prop. This is especially useful when on a dark background. - -```jsx - - - -``` - -### More examples - -```jsx - - - Modal Title - - - - - - - - - - - - - - - - - - - - - - - - - - - -``` - -```jsx noInline -render(() => { - const [colorMode] = useColorMode(); - const [colorStyle] = useColorStyle({ colorMode }); - - return ( - - - - - - - - - - - - - - - - ); -}); -``` - -## Props - -### Skeleton - -| Name | Type | Default | Description | -| :--- | :--- | :------ | :---------- | -| variant | string | 'text' | The type of content that will be rendered. One of: 'text', 'rectangle', 'circle' | -| animation | string | | The animation effect. One of: 'pulse', 'wave' | -| width | number \| string | | Width of the skeleton. Useful when the skeleton is inside an inline element with no width of its own. | -| height | number \| string | | Height of the skeleton. Useful when you don't want to adopt the skeleton to a text element. | diff --git a/packages/react-docs/pages/components/skeleton/animations.js b/packages/react-docs/pages/components/skeleton/animations.js new file mode 100644 index 0000000000..e3ebdc1599 --- /dev/null +++ b/packages/react-docs/pages/components/skeleton/animations.js @@ -0,0 +1,55 @@ +import { Box, Button, ButtonGroup, Divider, Skeleton, Stack, TextLabel } from '@tonic-ui/react'; +import React from 'react'; + +const FormGroup = (props) => ( + +); + +const useSelection = (defaultValue) => { + const [value, setValue] = React.useState(defaultValue); + const changeBy = (value) => () => setValue(value); + return [value, changeBy]; +}; + +const App = () => { + const [animation, changeAnimationBy] = useSelection('none'); + + return ( + <> + + + + animation + + + *:not(:first-of-type)': { + marginLeft: -1 + } + }} + > + {['none', 'pulse', 'wave'].map(value => ( + + ))} + + + + + + + + + + ); +}; + +export default App; diff --git a/packages/react-docs/pages/components/skeleton/color.js b/packages/react-docs/pages/components/skeleton/color.js new file mode 100644 index 0000000000..a25b1c3c42 --- /dev/null +++ b/packages/react-docs/pages/components/skeleton/color.js @@ -0,0 +1,16 @@ +import { Box, Skeleton } from '@tonic-ui/react'; +import React from 'react'; + +const App = () => ( + + + +); + +export default App; diff --git a/packages/react-docs/pages/components/skeleton/index.page.mdx b/packages/react-docs/pages/components/skeleton/index.page.mdx new file mode 100644 index 0000000000..1bd431575e --- /dev/null +++ b/packages/react-docs/pages/components/skeleton/index.page.mdx @@ -0,0 +1,61 @@ +# Skeleton + +Display a placeholder preview of your content before the data gets loaded to reduce load-time frustration. + +## Import + +```js +import { Skeleton } from '@tonic-ui/react'; +``` + +## Usage + +The component is designed to be used when the data for your component might not be immediately available. For instance: + +```jsx disabled +{image + ? + : +} +``` + +### Variants + +The component supports 3 shape variants: +* `text` (default) represents a single line of text. +* `rectangle` and `circle` represent a rectangle and a circle respectively. + +{render('./variants')} + +### Animations + +By default, the animation is disabled. You can enable animation by setting the `animation` prop to `wave` or `pulse`. + +{render('./animations')} + +### Color + +The color of the component can be customized by changing its `backgroundColor` prop. This is especially useful when on a dark background. + +{render('./color')} + +### Compositions + +#### Profile + +{render('./profile-skeletons')} + +#### Modal + +{render('./modal-skeletons')} + +## Props + +### Skeleton + +| Name | Type | Default | Description | +| :--- | :--- | :------ | :---------- | +| variant | string | 'text' | The type of content that will be rendered. One of: 'text', 'rectangle', 'circle' | +| animation | string | | The animation effect. One of: 'pulse', 'wave' | +| width | number \| string | | Width of the skeleton. Useful when the skeleton is inside an inline element with no width of its own. | +| height | number \| string | | Height of the skeleton. Useful when you don't want to adopt the skeleton to a text element. | diff --git a/packages/react-docs/pages/components/skeleton/modal-skeletons.js b/packages/react-docs/pages/components/skeleton/modal-skeletons.js new file mode 100644 index 0000000000..78cf2c7c65 --- /dev/null +++ b/packages/react-docs/pages/components/skeleton/modal-skeletons.js @@ -0,0 +1,44 @@ +import { + Button, + Grid, + ModalBody, + ModalContent, + ModalHeader, + ModalFooter, + Skeleton, + Stack, +} from '@tonic-ui/react'; +import React from 'react'; + +const App = () => ( + + + Modal Title + + + + + + + + + + + + + + + + + + + + + + +); + +export default App; diff --git a/packages/react-docs/pages/components/skeleton/profile-skeletons.js b/packages/react-docs/pages/components/skeleton/profile-skeletons.js new file mode 100644 index 0000000000..d93043828a --- /dev/null +++ b/packages/react-docs/pages/components/skeleton/profile-skeletons.js @@ -0,0 +1,27 @@ +import { Box, Divider, Flex, Skeleton, Stack, useColorMode, useColorStyle } from '@tonic-ui/react'; +import React from 'react'; + +const App = () => { + const [colorMode] = useColorMode(); + const [colorStyle] = useColorStyle({ colorMode }); + + return ( + + + + + + + + + + + + + + + + ); +}; + +export default App; diff --git a/packages/react-docs/pages/components/skeleton/variants.js b/packages/react-docs/pages/components/skeleton/variants.js new file mode 100644 index 0000000000..e84645ac14 --- /dev/null +++ b/packages/react-docs/pages/components/skeleton/variants.js @@ -0,0 +1,13 @@ +import { Skeleton, Stack } from '@tonic-ui/react'; +import React from 'react'; + +const App = () => ( + + + + + + +); + +export default App;