Add Static CSS and Flex Component for Yorkie Homepage (#145)

* Add tokens and static css * Add Flex component * Add Docs for Button `asChild` Props
yorkie-team · Aug 6, 2024 · a03e5bf · a03e5bf
1 parent 6c852fa
commit a03e5bf
Show file tree

Hide file tree

Showing 16 changed files with 668 additions and 418 deletions.
diff --git a/apps/storybook/package.json b/apps/storybook/package.json
@@ -18,7 +18,7 @@
     "@storybook/addon-interactions": "^8.2.5",
     "@storybook/addon-links": "^8.2.5",
     "@storybook/addon-onboarding": "^8.2.5",
-    "@storybook/addon-themes": "^8.2.6",
+    "@storybook/addon-themes": "^8.2.5",
     "@storybook/blocks": "^8.2.5",
     "@storybook/react": "^8.2.5",
     "@storybook/react-vite": "^8.2.5",

diff --git a/apps/storybook/src/stories/button/Button.mdx b/apps/storybook/src/stories/button/Button.mdx
@@ -47,7 +47,7 @@ There are 3 sizes: `sm`, `md` and `lg`.
   source={{
     format: true,
     code: `
-      <div>
+      <Flex gap="200" alignItems="center">
         <Button size="sm">
           SM
         </Button>
@@ -57,7 +57,7 @@ There are 3 sizes: `sm`, `md` and `lg`.
         <Button size="lg">
           LG
         </Button>
-      </div>
+      </Flex>
     `,
   }}
 />
@@ -66,12 +66,14 @@ There are 3 sizes: `sm`, `md` and `lg`.
 
 There are 3 types: `solid`, `outline` and `link`.
 
+(The link style has not been implemented yet.)
+
 <Canvas
   of={ButtonStories.Variant}
   source={{
     format: true,
     code: `
-      <div>
+      <Flex gap="200" alignItems="center">
         <Button variant="solid">
           Solid
         </Button>
@@ -81,7 +83,7 @@ There are 3 types: `solid`, `outline` and `link`.
         <Button variant="link">
           Link
         </Button>
-      </div>
+      </Flex>
     `,
   }}
 />
@@ -95,11 +97,9 @@ By using the `disabled` prop, you can quickly and easily convey to your users th
   source={{
     format: true,
     code: `
-      <div>
         <Button disabled>
           Disabled
         </Button>
-      </div>
     `,
   }}
 />
@@ -113,11 +113,27 @@ Use the defined color codes in the system to change the background for the butto
   source={{
     format: true,
     code: `
-      <div>
         <Button colorPalette="red">
           Color Palette
         </Button>
-      </div>
+    `,
+  }}
+/>
+
+### [Renders as a link](#button-asChild)
+
+Use the `asChild` prop to render the button as a link.
+
+<Canvas
+  of={ButtonStories.AsChild}
+  source={{
+    format: true,
+    code: `
+        <Button asChild>
+          <a href="https://yorkie.dev/yorkie-ui/" target="_blank">
+            Yorkie UI
+          </a>
+        </Button>
     `,
   }}
 />
diff --git a/apps/storybook/src/stories/button/Button.stories.tsx b/apps/storybook/src/stories/button/Button.stories.tsx
@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { Button } from '@yorkie-ui/core';
+import { Button, Flex } from '@yorkie-ui/core';
 const meta = {
   title: 'COMPONENTS / Button',
   component: Button,
@@ -39,7 +39,23 @@ const meta = {
     },
     colorPalette: {
       control: { type: 'radio' },
-      options: ['accent', 'red', 'orange', 'yellow', 'green', 'blue', 'purple', 'gray', 'white', 'transparent'],
+      options: [
+        'accent',
+        'neutral',
+        'success',
+        'info',
+        'warning',
+        'danger',
+        'red',
+        'orange',
+        'yellow',
+        'green',
+        'blue',
+        'purple',
+        'gray',
+        'white',
+        'transparent',
+      ],
       description: 'Apply a predefined color palette to the button',
       table: {
         defaultValue: { summary: 'accent' },
@@ -69,7 +85,7 @@ export const Basic: Story = {
 export const Sizes: Story = {
   render: (args) => {
     return (
-      <>
+      <Flex gap="200" alignItems="center">
         <Button {...args} size="sm">
           SM
         </Button>
@@ -79,15 +95,15 @@ export const Sizes: Story = {
         <Button {...args} size="lg">
           LG
         </Button>
-      </>
+      </Flex>
     );
   },
 };
 
 export const Variant: Story = {
   render: (args) => {
     return (
-      <>
+      <Flex gap="200" alignItems="center">
         <Button {...args} variant="solid">
           Solid
         </Button>
@@ -97,7 +113,7 @@ export const Variant: Story = {
         <Button {...args} variant="link">
           Link
         </Button>
-      </>
+      </Flex>
     );
   },
 };
@@ -125,3 +141,17 @@ export const ColorPalette: Story = {
     );
   },
 };
+
+export const AsChild: Story = {
+  render: (args) => {
+    return (
+      <>
+        <Button asChild {...args}>
+          <a href="https://yorkie.dev/yorkie-ui/" target="_blank">
+            Yorkie UI
+          </a>
+        </Button>
+      </>
+    );
+  },
+};
diff --git a/apps/storybook/src/stories/flex/Flex.mdx b/apps/storybook/src/stories/flex/Flex.mdx
@@ -0,0 +1,36 @@
+# Flex
+
+import { Controls, Canvas, Meta } from '@storybook/blocks';
+import * as FlexStories from './Flex.stories';
+
+<Meta of={FlexStories} />
+
+- [Import](#import)
+- [Overview](#overview)
+- [Props](#props)
+
+## Import
+
+```jsx
+import { Flex } from 'yorkie-ui';
+```
+
+## Overview
+
+<Canvas
+  of={FlexStories.Overview}
+  source={{
+    format: true,
+    code: `
+      <Flex>
+        <Button>1</Button>
+        <Button>2</Button>
+        <Button>3</Button>
+        <Button>4</Button>
+      </Flex>`,
+  }}
+/>
+
+## Props
+
+<Controls />
diff --git a/apps/storybook/src/stories/flex/Flex.stories.tsx b/apps/storybook/src/stories/flex/Flex.stories.tsx
@@ -0,0 +1,62 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Flex, Button } from '@yorkie-ui/core';
+
+const propertyHorizontal = ['flex-start', 'flex-end', 'center', 'space-between', 'space-around', 'space-evenly'];
+const propertyVertical = ['flex-start', 'flex-end', 'center', 'baseline', 'stretch'];
+
+const meta = {
+  title: 'LAYOUT / Flex',
+  component: Flex,
+  argTypes: {
+    direction: {
+      options: ['row', 'row-reverse', 'column', 'column-reverse'],
+      control: { type: 'radio' },
+      description: 'The direction of the flex container.',
+    },
+    justifyContent: {
+      options: propertyHorizontal,
+      mapping: propertyHorizontal,
+      control: {
+        type: 'radio',
+        labels: propertyHorizontal,
+      },
+      description: 'Used to align child elements along the main axis of the container.',
+    },
+    alignItems: {
+      options: propertyVertical,
+      mapping: propertyVertical,
+      control: {
+        type: 'radio',
+        labels: propertyVertical,
+      },
+      description: 'Used to align child elements along the main axis of the container.',
+    },
+    gap: {
+      control: { type: 'number' },
+      description: 'Controlling the gutters between grid and flexbox items.',
+    },
+  },
+  args: {
+    direction: 'row',
+    gap: '0',
+    justifyContent: 'flex-start',
+    alignItems: 'stretch',
+  },
+} satisfies Meta<typeof Flex>;
+
+export default meta;
+
+type Story = StoryObj<typeof Flex>;
+
+export const Overview: Story = {
+  render: (args) => {
+    return (
+      <Flex {...args}>
+        <Button>1</Button>
+        <Button>2</Button>
+        <Button>3</Button>
+        <Button>4</Button>
+      </Flex>
+    );
+  },
+};
diff --git a/packages/core/panda.config.ts b/packages/core/panda.config.ts
@@ -21,6 +21,54 @@ export default defineConfig({
           colorPalette: ['*'],
         },
       },
+      {
+        properties: {
+          hideFrom: ['*'],
+          hideBelow: ['*'],
+        },
+      },
+      {
+        properties: {
+          display: ['none', 'inline', 'block', 'flex', 'inline-block', 'inline-flex'],
+          flex: ['*', '1', '2', '3', '4'],
+          flexDirection: ['row', 'row-reverse', 'column', 'column-reverse'],
+          flexWrap: ['nowrap', 'wrap', 'wrap-reverse'],
+          gap: ['*'],
+          justifyContent: ['flex-start', 'flex-end', 'center', 'space-between', 'space-around', 'space-evenly'],
+          alignItems: ['flex-start', 'flex-end', 'center', 'baseline', 'stretch'],
+          order: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'],
+        },
+        responsive: true,
+      },
+      {
+        properties: {
+          zIndex: ['*'],
+          position: ['relative', 'absolute', 'fixed', 'sticky', 'scroll'],
+          top: ['*'],
+          left: ['*'],
+          right: ['*'],
+          bottom: ['*'],
+        },
+        responsive: true,
+      },
+      {
+        properties: {
+          width: ['*'],
+          minWidth: ['*'],
+          height: ['*'],
+          minHeight: ['*'],
+          marginTop: ['*'],
+          marginBottom: ['*'],
+          marginLeft: ['*'],
+          marginRight: ['*'],
+          marginX: ['*'],
+          paddingTop: ['*'],
+          paddingBottom: ['*'],
+          paddingLeft: ['*'],
+          paddingRight: ['*'],
+        },
+        responsive: true,
+      },
     ],
   },
   minify: true,

diff --git a/packages/core/panda/theme/breakpoints.ts b/packages/core/panda/theme/breakpoints.ts
@@ -1,7 +1,6 @@
 export const breakpoints = {
   sm: '640px',
-  md: '768px',
-  lg: '1024px',
-  xl: '1280px',
-  '2xl': '1536px',
-}
+  md: '1024px',
+  lg: '1280px',
+  xl: '1920px',
+};