docs: update skeleton

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) => (
+  <Box mb="4x" {...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 (
+    <>
+      <FormGroup>
+        <Box mb="2x">
+          <TextLabel>
+            animation
+          </TextLabel>
+        </Box>
+        <ButtonGroup
+          variant="secondary"
+          css={{
+            '> *:not(:first-of-type)': {
+              marginLeft: -1
+            }
+          }}
+        >
+          {['none', 'pulse', 'wave'].map(value => (
+            <Button
+              key={value}
+              selected={value === animation}
+              onClick={changeAnimationBy(value)}
+              minWidth="15x"
+            >
+              {value}
+            </Button>
+          ))}
+        </ButtonGroup>
+      </FormGroup>
+      <Divider my="4x" />
+      <Stack direction="column" spacing="4x">
+        <Skeleton animation={animation} width={160} />
+        <Skeleton animation={animation} width={240} />
+        <Skeleton animation={animation} width={240} />
+      </Stack>
+    </>
+  );
+};
+
+export default App;

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 = () => (
+  <Box display="inline-block" backgroundColor="gray:100" p="6x">
+    <Skeleton
+      variant="rectangle"
+      width={240}
+      height={120}
+      backgroundColor="gray:90"
+      animation="pulse"
+    />
+  </Box>
+);
+
+export default App;

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
+  ? <Image src={image} width={240} height={180} />
+  : <Skeleton variant="rectangle" width={240} height={120} />
+}
+```
+
+### 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. |

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 = () => (
+  <ModalContent width="max(320px, 50%)">
+    <ModalHeader>
+      Modal Title
+    </ModalHeader>
+    <ModalBody>
+      <Stack direction="column" spacing="10x">
+        <Stack direction="column" spacing="4x">
+          <Skeleton animation="pulse" width="80%" />
+          <Skeleton animation="pulse" />
+          <Skeleton animation="pulse" />
+        </Stack>
+        <Stack direction="column" spacing="4x">
+          <Skeleton animation="pulse" width="80%" />
+          <Skeleton animation="pulse" />
+          <Skeleton animation="pulse" />
+        </Stack>
+      </Stack>
+    </ModalBody>
+    <ModalFooter>
+      <Grid
+        templateColumns="1fr 1fr"
+        columnGap="2x"
+      >
+        <Button disabled>OK</Button>
+        <Button disabled>Cancel</Button>
+      </Grid>
+    </ModalFooter>
+  </ModalContent>
+);
+
+export default App;

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 (
+    <Stack direction="column" width="max(320px, 50%)" backgroundColor={colorStyle.background.secondary}>
+      <Flex alignItems="center" columnGap="5x" p="4x">
+        <Flex flex="none">
+          <Skeleton variant="circle" animation="wave" width={40} height={40} />
+        </Flex>
+        <Stack direction="column" spacing="4x" flex="auto">
+          <Skeleton variant="text" animation="wave" />
+          <Skeleton variant="text" animation="wave" />
+        </Stack>
+      </Flex>
+      <Divider />
+      <Box p="4x">
+        <Skeleton variant="rectangle" animation="wave" height={160} />
+      </Box>
+    </Stack>
+  );
+};
+
+export default App;