Merge pull request #138 from 8845musign/add-gap-alias-to-stack

Add gap alias prop to Stack Component

src/components/Box/Box.tsx

@@ -3,25 +3,25 @@
 import clsx from 'clsx';
 import styles from './Box.module.css';
 import {
-  paddingVariables,
-  marginVariables,
-  radiusVariables,
+  colorVariable,
   cssFontSizeToken,
   cssLeadingToken,
-  colorVariable,
+  marginVariables,
+  paddingVariables,
+  radiusVariables,
   widthVariables,
 } from '../../utils/style';
 import { HTMLTagname } from '../../utils/types';
 import type { CustomDataAttributeProps } from '../../types/attributes';
 import type {
-  PaddingProps,
-  MarginProps,
-  RadiusProp,
   BackgroundColor,
-  TextType,
-  TextColor,
   BodyFontSize,
   BodyLeading,
+  MarginProps,
+  PaddingProps,
+  RadiusProp,
+  TextColor,
+  TextType,
   WidthProps,
 } from '../../types/style';
 import type { CSSProperties, FC, ReactNode } from 'react';
@@ -48,7 +48,7 @@ type BaseProps = {
   border?: 'gray' | 'grayThick' | 'primary' | 'primaryThick';
   /**
    * 幅を指定。fullは後方互換のため残している
-   * @defaultValue 'autp'
+   * @default 'auto'
    */
   width?: 'full' | Width;
   /**

src/components/FlexItem/FlexItem.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { clsx } from 'clsx';
-import { CSSProperties, forwardRef, type PropsWithChildren, type HTMLAttributes } from 'react';
+import { CSSProperties, forwardRef, type HTMLAttributes, type PropsWithChildren } from 'react';
 import styles from './FlexItem.module.css';
 import { CSSWitdh, MarginProps, PaddingProps, WidthProps } from '../../types/style';
 import { marginVariables, paddingVariables } from '../../utils/style';
@@ -17,7 +17,7 @@ type AllowedDivAttributes = Omit<HTMLAttributes<HTMLDivElement>, 'className'>;
 type Props = {
   /**
    * flexの値を指定。 growなどを指定したい場合はオブジェクトで指定
-   * @defaultValue none
+   * @default none
    */
   flex?: 'none' | FlexProperty;
 } & Omit<WidthProps, 'width'> &

src/components/Stack/Stack.tsx

@@ -1,27 +1,22 @@
 'use client';
 
 import { clsx } from 'clsx';
-import { isValidElement, cloneElement } from 'react';
+import { cloneElement, isValidElement, useMemo } from 'react';
 import styles from './Stack.module.css';
 import { CustomDataAttributeProps } from '../../types/attributes'; // 追加したインポート
-import { Spacing, AlignItems, JustifyContent, WidthProps } from '../../types/style';
-import { paddingVariables, marginVariables, gapVariables, widthVariables } from '../../utils/style';
+import { AlignItems, JustifyContent, Spacing, WidthProps } from '../../types/style';
+import { gapVariables, marginVariables, paddingVariables, widthVariables } from '../../utils/style';
 import { HTMLTagname } from '../../utils/types';
 import { Box } from '../Box/Box';
-import type { PaddingProps, MarginProps } from '../../types/style';
-import type { FC, ReactNode, ComponentType, ReactElement } from 'react';
+import type { MarginProps, PaddingProps } from '../../types/style';
+import type { ComponentType, FC, ReactElement, ReactNode } from 'react';
 
 type Props = {
   /**
    * レンダリングされるコンポーネントまたはHTML要素
    * @default div
    */
   as?: HTMLTagname | ReactElement<ComponentType<typeof Box>>;
-  /**
-   * 子要素の間隔。指定しない場合は0
-   * xxs=4px, xs=8px, sm=12px, md=16px, lg=24px, xl=40px, xxl=64px
-   */
-  spacing?: Spacing;
   /**
    * 水平方向における子要素のレイアウトを定める。
    * @default stretch
@@ -41,7 +36,29 @@ type Props = {
    * 子要素
    */
   children: ReactNode;
-} & MarginProps &
+} & (
+  | {
+      /**
+       * 子要素の間隔。指定しない場合は0
+       * xxs=4px, xs=8px, sm=12px, md=16px, lg=24px, xl=40px, xxl=64px
+       */
+      spacing: Spacing;
+      gap?: never;
+    }
+  | {
+      /**
+       * spacingのエイリアス（どちらかしか指定できません）
+       * xxs=4px, xs=8px, sm=12px, md=16px, lg=24px, xl=40px, xxl=64px
+       */
+      gap: Spacing;
+      spacing?: never;
+    }
+  | {
+      gap?: never;
+      spacing?: never;
+    }
+) &
+  MarginProps &
   PaddingProps &
   WidthProps &
   CustomDataAttributeProps;
@@ -55,6 +72,7 @@ export const Stack: FC<Props> = ({
   children,
   className,
   spacing,
+  gap,
   alignItems = 'stretch',
   justifyContent = 'flex-start',
   p,
@@ -85,13 +103,23 @@ export const Stack: FC<Props> = ({
     }
   };
 
+  const _spacing = useMemo(() => {
+    if (gap != null) {
+      return gap;
+    } else if (spacing != null) {
+      return spacing;
+    } else {
+      return undefined;
+    }
+  }, [gap, spacing]);
+
   return createElement(
     {
       className: clsx(className, styles.stack),
       style: {
         alignItems: `${alignItems}`,
         justifyContent: `${justifyContent}`,
-        ...gapVariables(spacing),
+        ...gapVariables(_spacing),
         ...paddingVariables({
           p,
           px,

src/stories/Stack.stories.tsx

@@ -1,5 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { Stack, Box } from '..';
+import { Box, Stack } from '..';
 import { Spacing } from '../types/style';
 
 export default {
@@ -140,3 +140,25 @@ export const Width: Story = {
   ),
   args: defaultArgs,
 };
+
+export const Gap: Story = {
+  render: () => (
+    <Stack spacing="md">
+      <p style={{ margin: 0 }}>Text</p>
+      <p style={{ margin: 0 }}>Text</p>
+      <p style={{ margin: 0 }}>Text</p>
+      <p style={{ margin: 0 }}>Text</p>
+    </Stack>
+  ),
+};
+
+export const NoSpacing: Story = {
+  render: () => (
+    <Stack>
+      <p style={{ margin: 0 }}>Text</p>
+      <p style={{ margin: 0 }}>Text</p>
+      <p style={{ margin: 0 }}>Text</p>
+      <p style={{ margin: 0 }}>Text</p>
+    </Stack>
+  ),
+};

src/types/style.ts

@@ -195,17 +195,17 @@ export type CSSMinWidth =
 export type WidthProps = {
   /**
    * 幅を指定
-   * @defaultValue auto
+   * @default auto
    */
   width?: CSSWitdh;
   /**
    * 最小幅
-   * @defaultValue auto
+   * @default auto
    */
   minWidth?: CSSMinWidth;
   /**
    * 最大幅
-   * @defaultValue none
+   * @default none
    */
   maxWidth?: CSSMaxWidth;
 };