From a585950b7f85932c2a5adef2b50ed1e9fc246e9b Mon Sep 17 00:00:00 2001
From: 8845musign <hiroki.yokouchi@dr-ubie.com>
Date: Fri, 19 Apr 2024 13:25:13 +0900
Subject: [PATCH 1/2] upgrade ubie-ui

Signed-off-by: 8845musign <hiroki.yokouchi@dr-ubie.com>
---
 package-lock.json | 22 +++++++++++-----------
 package.json      |  2 +-
 2 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 4248d9d..979a10d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -20,7 +20,7 @@
         "@types/react-syntax-highlighter": "^15.5.11",
         "@ubie/design-tokens": "^0.1.4",
         "@ubie/ubie-icons": "^0.6.1",
-        "@ubie/ubie-ui": "^0.0.13",
+        "@ubie/ubie-ui": "^0.0.14",
         "@unocss/reset": "^0.58.5",
         "astro": "^4.4.4",
         "astro-icon": "^1.1.0",
@@ -2145,12 +2145,12 @@
       }
     },
     "node_modules/@tanstack/react-virtual": {
-      "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/@tanstack/react-virtual/-/react-virtual-3.3.0.tgz",
-      "integrity": "sha512-QFxmTSZBniq15S0vSZ55P4ToXquMXwJypPXyX/ux7sYo6a2FX3/zWoRLLc4eIOGWTjvzqcIVNKhcuFb+OZL3aQ==",
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-virtual/-/react-virtual-3.4.0.tgz",
+      "integrity": "sha512-GZN4xn/Tg5w7gvYeVcMVCeL4pEyUhvg+Cp6KX2Z01C4FRNxIWMgIQ9ibgMarNQfo+gt0PVLcEER4A9sNv/jlow==",
       "peer": true,
       "dependencies": {
-        "@tanstack/virtual-core": "3.3.0"
+        "@tanstack/virtual-core": "3.4.0"
       },
       "funding": {
         "type": "github",
@@ -2162,9 +2162,9 @@
       }
     },
     "node_modules/@tanstack/virtual-core": {
-      "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/@tanstack/virtual-core/-/virtual-core-3.3.0.tgz",
-      "integrity": "sha512-A0004OAa1FcUkPHeeGoKgBrAgjH+uHdDPrw1L7RpkwnODYqRvoilqsHPs8cyTjMg1byZBbiNpQAq2TlFLIaQag==",
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/@tanstack/virtual-core/-/virtual-core-3.4.0.tgz",
+      "integrity": "sha512-75jXqXxqq5M5Veb9KP1STi8kA5u408uOOAefk2ftHDGCpUk3RP6zX++QqfbmHJTBiU72NQ+ghgCZVts/Wocz8Q==",
       "peer": true,
       "funding": {
         "type": "github",
@@ -2703,9 +2703,9 @@
       }
     },
     "node_modules/@ubie/ubie-ui": {
-      "version": "0.0.13",
-      "resolved": "https://registry.npmjs.org/@ubie/ubie-ui/-/ubie-ui-0.0.13.tgz",
-      "integrity": "sha512-MSZNowhCAPU0Azs7nWr8kJ7EQdtYUs2PNUE9j1/VpmYcIs1u9cdMc4SOt5X54E/uhFczE1QmNWShkZRAnxTvEQ==",
+      "version": "0.0.14",
+      "resolved": "https://registry.npmjs.org/@ubie/ubie-ui/-/ubie-ui-0.0.14.tgz",
+      "integrity": "sha512-02V8Q7T8kIjtpTu04+oVgrre4iNcr1o4AVTOScI25iYxJIobzayuyJwf61ZIqKYZCD3atBCltZ9MAcjd5jCE0g==",
       "peerDependencies": {
         "@headlessui/react": ">1.7.0",
         "@ubie/design-tokens": "^0.0.10 || ^0.1.0",
diff --git a/package.json b/package.json
index 53714d0..4b5b886 100644
--- a/package.json
+++ b/package.json
@@ -31,7 +31,7 @@
     "@types/react-syntax-highlighter": "^15.5.11",
     "@ubie/design-tokens": "^0.1.4",
     "@ubie/ubie-icons": "^0.6.1",
-    "@ubie/ubie-ui": "^0.0.13",
+    "@ubie/ubie-ui": "^0.0.14",
     "@unocss/reset": "^0.58.5",
     "astro": "^4.4.4",
     "astro-icon": "^1.1.0",

From 5561401591f49df3f56165addeb3e26b29047fda Mon Sep 17 00:00:00 2001
From: 8845musign <hiroki.yokouchi@dr-ubie.com>
Date: Fri, 19 Apr 2024 13:25:49 +0900
Subject: [PATCH 2/2] Apply Stack's direction prop deletion

Signed-off-by: 8845musign <hiroki.yokouchi@dr-ubie.com>
---
 src/components/react/ExampleSwitcher.tsx           |  6 +++---
 src/components/react/WithCode/Codes.tsx            |  6 +++---
 .../react/examples/stack/Centralized.tsx           |  6 +++---
 src/components/react/examples/text/Body.tsx        | 14 +++++++-------
 src/components/react/examples/text/Button.tsx      |  6 +++---
 src/components/react/examples/text/Color.tsx       |  6 +++---
 src/components/react/examples/text/Heading.tsx     |  6 +++---
 src/components/react/examples/text/Note.tsx        | 14 +++++++-------
 src/components/react/examples/text/Tag.tsx         |  6 +++---
 src/pages/components/stack.mdx                     |  4 +---
 10 files changed, 36 insertions(+), 38 deletions(-)

diff --git a/src/components/react/ExampleSwitcher.tsx b/src/components/react/ExampleSwitcher.tsx
index 103055c..d72f847 100644
--- a/src/components/react/ExampleSwitcher.tsx
+++ b/src/components/react/ExampleSwitcher.tsx
@@ -1,4 +1,4 @@
-import { Button, Stack } from '@ubie/ubie-ui';
+import { Button, Stack, Flex } from '@ubie/ubie-ui';
 import { useState, useMemo } from 'react';
 import Example from './Example';
 import type { Example as ExampleType } from '@utils/server';
@@ -22,7 +22,7 @@ const ExampleSwitcher: FC<Props> = ({ examples }) => {
   return (
     <>
       <Stack spacing="md" alignItems="normal">
-        <Stack direction="row" spacing="xs">
+        <Flex spacing="xs">
           {examples.map(({ name, url }) => (
             <Button
               size="small"
@@ -35,7 +35,7 @@ const ExampleSwitcher: FC<Props> = ({ examples }) => {
               {name}
             </Button>
           ))}
-        </Stack>
+        </Flex>
 
         {currentExample && <Example example={currentExample} />}
       </Stack>
diff --git a/src/components/react/WithCode/Codes.tsx b/src/components/react/WithCode/Codes.tsx
index a813335..c2d94de 100644
--- a/src/components/react/WithCode/Codes.tsx
+++ b/src/components/react/WithCode/Codes.tsx
@@ -1,4 +1,4 @@
-import { Stack } from '@ubie/ubie-ui';
+import { Flex } from '@ubie/ubie-ui';
 import { clsx } from 'clsx';
 import { useState } from 'react';
 import { Code } from '../Code.jsx';
@@ -13,7 +13,7 @@ export const Codes: FC<Types> = ({ codes }) => {
 
   return (
     <div className={styles.codesBlock}>
-      <Stack direction="row" spacing="xxs">
+      <Flex spacing="xxs">
         {codes.map(({ lang, filename }, index) => (
           <button
             key={index}
@@ -26,7 +26,7 @@ export const Codes: FC<Types> = ({ codes }) => {
             {filename || lang}
           </button>
         ))}
-      </Stack>
+      </Flex>
       {codes.map(({ lang, code }, index) => (
         <div key={index} hidden={current !== index}>
           <Code lang={lang}>{code}</Code>
diff --git a/src/components/react/examples/stack/Centralized.tsx b/src/components/react/examples/stack/Centralized.tsx
index 4af4555..68e7c88 100644
--- a/src/components/react/examples/stack/Centralized.tsx
+++ b/src/components/react/examples/stack/Centralized.tsx
@@ -1,9 +1,9 @@
-import { Stack } from '@ubie/ubie-ui';
+import { Flex } from '@ubie/ubie-ui';
 import type { FC } from 'react';
 
 const Centralized: FC = () => {
   return (
-    <Stack spacing="md" direction="row" justifyContent="center" alignItems="center">
+    <Flex spacing="md" justifyContent="center" alignItems="center">
       <span>
         Words
         <br />
@@ -17,7 +17,7 @@ const Centralized: FC = () => {
         <br />
         text
       </span>
-    </Stack>
+    </Flex>
   );
 };
 
diff --git a/src/components/react/examples/text/Body.tsx b/src/components/react/examples/text/Body.tsx
index a418d8e..48b8597 100644
--- a/src/components/react/examples/text/Body.tsx
+++ b/src/components/react/examples/text/Body.tsx
@@ -1,4 +1,4 @@
-import { Text, Stack } from '@ubie/ubie-ui';
+import { Text, Stack, Flex } from '@ubie/ubie-ui';
 import type { FC } from 'react';
 
 const Body: FC = () => {
@@ -10,7 +10,7 @@ const Body: FC = () => {
       <div>
         <dt>Default Leading</dt>
         <dd>
-          <Stack spacing="md" direction="row" alignItems="center">
+          <Flex spacing="md" alignItems="center">
             <Text type="body" size="sm">
               sm
               <br />
@@ -26,14 +26,14 @@ const Body: FC = () => {
               <br />
               {`${bodyText}`}
             </Text>
-          </Stack>
+          </Flex>
         </dd>
       </div>
 
       <div>
         <dt>Narrow Leading</dt>
         <dd>
-          <Stack spacing="md" direction="row" alignItems="center">
+          <Flex spacing="md" alignItems="center">
             <Text leading="narrow" type="body" size="sm">
               sm
               <br />
@@ -49,14 +49,14 @@ const Body: FC = () => {
               <br />
               {`${bodyText}`}
             </Text>
-          </Stack>
+          </Flex>
         </dd>
       </div>
 
       <div>
         <dt>Tight Leading</dt>
         <dd>
-          <Stack spacing="md" direction="row" alignItems="center">
+          <Flex spacing="md" alignItems="center">
             <Text leading="tight" type="body" size="sm">
               sm
               <br />
@@ -72,7 +72,7 @@ const Body: FC = () => {
               <br />
               {`${bodyText}`}
             </Text>
-          </Stack>
+          </Flex>
         </dd>
       </div>
     </Stack>
diff --git a/src/components/react/examples/text/Button.tsx b/src/components/react/examples/text/Button.tsx
index 89d939d..2e35c7b 100644
--- a/src/components/react/examples/text/Button.tsx
+++ b/src/components/react/examples/text/Button.tsx
@@ -1,11 +1,11 @@
-import { Text, Stack } from '@ubie/ubie-ui';
+import { Text, Flex } from '@ubie/ubie-ui';
 import type { FC } from 'react';
 
 const Button: FC = () => {
   const buttonText = '同意して症状から調べる';
 
   return (
-    <Stack spacing="md" direction="row" alignItems="center">
+    <Flex spacing="md" alignItems="center">
       <Text type="button" size="sm">
         sm
         <br />
@@ -21,7 +21,7 @@ const Button: FC = () => {
         <br />
         {`${buttonText}`}
       </Text>
-    </Stack>
+    </Flex>
   );
 };
 
diff --git a/src/components/react/examples/text/Color.tsx b/src/components/react/examples/text/Color.tsx
index 3494b06..4277fcc 100644
--- a/src/components/react/examples/text/Color.tsx
+++ b/src/components/react/examples/text/Color.tsx
@@ -1,8 +1,8 @@
-import { Text, Stack } from '@ubie/ubie-ui';
+import { Text, Flex } from '@ubie/ubie-ui';
 import type { FC } from 'react';
 
 const Color: FC = () => (
-  <Stack spacing="md" direction="row">
+  <Flex spacing="md">
     <Text color="main">main</Text>
     <Text color="sub">sub</Text>
     <Text color="link">link</Text>
@@ -14,7 +14,7 @@ const Color: FC = () => (
     <span style={{ background: 'black', padding: '0 0.5em' }}>
       <Text color="white">white</Text>
     </span>
-  </Stack>
+  </Flex>
 );
 
 export default Color;
diff --git a/src/components/react/examples/text/Heading.tsx b/src/components/react/examples/text/Heading.tsx
index 4f56ecb..0b63f39 100644
--- a/src/components/react/examples/text/Heading.tsx
+++ b/src/components/react/examples/text/Heading.tsx
@@ -1,11 +1,11 @@
-import { Text, Stack } from '@ubie/ubie-ui';
+import { Text, Flex } from '@ubie/ubie-ui';
 import type { FC } from 'react';
 
 const Heading: FC = () => {
   const headingText = '近くの医療機関から調べる';
 
   return (
-    <Stack spacing="md" direction="row" alignItems="center">
+    <Flex spacing="md" alignItems="center">
       <Text bold type="heading" size="xs">
         xs
         <br />
@@ -31,7 +31,7 @@ const Heading: FC = () => {
         <br />
         {`${headingText}`}
       </Text>
-    </Stack>
+    </Flex>
   );
 };
 
diff --git a/src/components/react/examples/text/Note.tsx b/src/components/react/examples/text/Note.tsx
index 3ca12ea..a4c31b8 100644
--- a/src/components/react/examples/text/Note.tsx
+++ b/src/components/react/examples/text/Note.tsx
@@ -1,4 +1,4 @@
-import { Text, Stack } from '@ubie/ubie-ui';
+import { Text, Stack, Flex } from '@ubie/ubie-ui';
 import type { FC } from 'react';
 
 const Note: FC = () => {
@@ -10,7 +10,7 @@ const Note: FC = () => {
       <div>
         <dt>Default Leading</dt>
         <dd>
-          <Stack spacing="md" direction="row" alignItems="center">
+          <Flex spacing="md" alignItems="center">
             <Text type="note" size="sm">
               sm
               <br />
@@ -26,14 +26,14 @@ const Note: FC = () => {
               <br />
               {`${noteText}`}
             </Text>
-          </Stack>
+          </Flex>
         </dd>
       </div>
 
       <div>
         <dt>Narrow Leading</dt>
         <dd>
-          <Stack spacing="md" direction="row" alignItems="center">
+          <Flex spacing="md" alignItems="center">
             <Text leading="narrow" type="note" size="sm">
               sm
               <br />
@@ -49,13 +49,13 @@ const Note: FC = () => {
               <br />
               {`${noteText}`}
             </Text>
-          </Stack>
+          </Flex>
         </dd>
       </div>
       <div>
         <dt>Tight Leading</dt>
         <dd>
-          <Stack spacing="md" direction="row" alignItems="center">
+          <Flex spacing="md" alignItems="center">
             <Text leading="tight" type="note" size="sm">
               sm
               <br />
@@ -71,7 +71,7 @@ const Note: FC = () => {
               <br />
               {`${noteText}`}
             </Text>
-          </Stack>
+          </Flex>
         </dd>
       </div>
     </Stack>
diff --git a/src/components/react/examples/text/Tag.tsx b/src/components/react/examples/text/Tag.tsx
index cad0528..2244a43 100644
--- a/src/components/react/examples/text/Tag.tsx
+++ b/src/components/react/examples/text/Tag.tsx
@@ -1,11 +1,11 @@
-import { Text, Stack } from '@ubie/ubie-ui';
+import { Text, Flex } from '@ubie/ubie-ui';
 import type { FC } from 'react';
 
 const Tag: FC = () => {
   const tagText = '循環器内科';
 
   return (
-    <Stack spacing="md" direction="row" alignItems="center">
+    <Flex spacing="md" alignItems="center">
       <Text type="tag" size="sm">
         sm
         <br />
@@ -21,7 +21,7 @@ const Tag: FC = () => {
         <br />
         {`${tagText}`}
       </Text>
-    </Stack>
+    </Flex>
   );
 };
 
diff --git a/src/pages/components/stack.mdx b/src/pages/components/stack.mdx
index ee12379..ba97856 100644
--- a/src/pages/components/stack.mdx
+++ b/src/pages/components/stack.mdx
@@ -2,7 +2,7 @@
 title: 'Stack'
 exampleKey: 'stack'
 layout: '@layouts/ComponentLayout.astro'
-description: '一方向に、一定のリズムで要素を積み上げるレイアウト'
+description: '垂直方向に、一定のリズムで要素を積み上げるレイアウト'
 thumbnail: '/assets/images/components/thumbnail-stack.svg'
 ---
 
@@ -14,10 +14,8 @@ thumbnail: '/assets/images/components/thumbnail-stack.svg'
 
 ## Usage
 
-- デフォルトでは垂直方向にStackします。水平方向にStackしたい場合は`direction='row'`を指定してください
 - Figma上で垂直/水平方向のAuto Layoutが指定されていた場合、`<Stack>`が最適です
 - 後に、子要素が増減したとしても、最小限のコード変更で対応することができます。`<Stack>`の子要素を増やすだけで済みます
-- 子要素の折り返しには対応していないため、`direction='row'`の場合は注意してください。横幅が足りなくなる可能性があります
 
 ## Accessibility