Merge branch 'main' into add-spacing-alias-to-flex

package.json

@@ -5,6 +5,7 @@
   "types": "dist/index.d.ts",
   "files": [
     "README.md",
+    "props.json",
     "dist"
   ],
   "exports": {
@@ -30,6 +31,7 @@
   },
   "scripts": {
     "build": "tsup",
+    "postbuild": "npm run extract-component-props",
     "test": "run-p test:*",
     "test:unit": "vitest run",
     "test:unit:watch": "vitest watch",
@@ -48,7 +50,8 @@
     "prestorybook": "npm run build",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
-    "prepublishOnly": "npm run build"
+    "prepublishOnly": "npm run build",
+    "extract-component-props": "react-docgen 'src/components/**/*.tsx' --ignore 'src/components/**/*spec.tsx' --ignore 'src/components/**/*stories.tsx' -o ./dist/props.json"
   },
   "repository": {
     "type": "git",
@@ -122,6 +125,7 @@
   },
   "homepage": "https://github.com/ubie-oss/ubie-ui#readme",
   "dependencies": {
+    "@react-docgen/cli": "^2.0.4",
     "debounce": "^2.1.1"
   }
 }

src/components/ActionHalfModal/ActionHalfModal.tsx

@@ -52,12 +52,10 @@ type BaseProps = {
   open?: boolean;
   /**
    * openを無視してモーダルを開いたままにするかどうか。アニメーションライブラリとの連携で、ActionHalfModal自身が開閉に関与しない場合に使用
-   * @default false
    */
   isStatic?: boolean;
   /**
    * モーダルをフルスクリーンで表示するかどうか
-   * @default false
    */
   fullscreen?: boolean;
   /**

src/components/ActionModal/ActionModal.tsx

@@ -65,7 +65,6 @@ type BaseProps = {
   open?: boolean;
   /**
    * openを無視してモーダルを開いたままにするかどうか。アニメーションライブラリとの連携で、ActionHalfModal自身が開閉に関与しない場合に使用
-   * @default false
    */
   isStatic?: boolean;
   /**

src/components/Box/Box.tsx

@@ -69,7 +69,6 @@ type BaseProps = {
   textNoWrap?: boolean;
   /**
    * inline-blockとして扱う
-   * @default false
    */
   inline?: boolean;
 } & PaddingProps &

src/components/Button/ButtonTypes.ts

@@ -28,12 +28,11 @@ export type BaseProps = {
    */
   size?: 'large' | 'medium' | 'small';
   /**
-   * 横幅を100%占有するかどうか
-   * @default false
+   * 横幅を100%占有する
    */
   block?: boolean;
   /**
-   * Fixedアイコンa
+   * Fixedアイコン
    */
   fixedIcon?: 'default' | ReactElement | IconName;
   /**

src/components/Center/Center.tsx

@@ -26,12 +26,10 @@ type Props = {
   as?: HTMLTagname | ReactElement<ComponentType<typeof Box>>;
   /**
    * 内包するテキストを中央に配置。設定は継承され、子孫要素にも影響します
-   * @default false
    */
   textCenter?: boolean;
   /**
    * 子要素を中央に配置。孫要素には影響しません
-   * @default false
    */
   childrenCenter?: boolean;
   /**

src/components/CheckboxCard/CheckboxCard.tsx

@@ -7,8 +7,7 @@ import { Icon } from '../Icon/Icon';
 
 type Props = InputHTMLAttributes<HTMLInputElement> & {
   /**
-   * 横幅を100%占有するかどうか
-   * @default false
+   * 横幅を100%占有する
    */
   block?: boolean;
 };

src/components/Color/Color.tsx

@@ -11,7 +11,7 @@ type Props = {
    */
   color?: TextColor;
   /**
-   * ネイティブ要素の`id`属性。ページで固有のIDを指定
+   * ネイティブ要素のid属性。ページで固有のIDを指定
    */
   id?: string;
 } & CustomDataAttributeProps;

src/components/Divider/Divider.tsx

@@ -11,6 +11,7 @@ type AllowedHRAttributes = Omit<HTMLAttributes<HTMLHRElement>, 'className'>;
 type Props = {
   /**
    * ボーダーの種類
+   * @default gray
    */
   border?: 'gray' | 'primary';
 } & WidthProps &

src/components/Flex/Flex.tsx

@@ -4,14 +4,12 @@ import clsx from 'clsx';
 import { isValidElement, cloneElement, useMemo } from 'react';
 import styles from './Flex.module.css';
 import { CustomDataAttributeProps } from '../../types/attributes'; // 追加したインポート
-import { Spacing, AlignItems, JustifyContent, FlexDirection, WidthProps } from '../../types/style';
-import { paddingVariables, marginVariables, gapVariables, widthVariables } from '../../utils/style';
+import { AlignItems, CSSWitdh, FlexDirection, 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, PropsWithChildren, ReactElement, ComponentType, ReactNode } from 'react';
-
-type Width = WidthProps['width'];
+import type { MarginProps, PaddingProps } from '../../types/style';
+import type { ComponentType, FC, PropsWithChildren, ReactElement, ReactNode } from 'react';
 
 type Props = {
   /**
@@ -35,8 +33,7 @@ type Props = {
    */
   justifyContent?: JustifyContent;
   /**
-   * 折り返しの有無
-   * @default false
+   * 子要素の折り返しを許可
    */
   wrap?: boolean;
   /**
@@ -47,10 +44,9 @@ type Props = {
    * 幅を指定。fullは後方互換のために残している
    * デフォルト<Flex>は横幅いっぱいを専有する。しかし例えば、フレックスコンテナの子要素として配置した場合、横幅が自身の子に合わせて小さくなる。これが不都合の場合に100%とする
    */
-  width?: 'full' | Width;
+  width?: 'full' | CSSWitdh;
   /**
    * inline-flexとして扱う
-   * @default false
    */
   inline?: boolean;
 } & (

src/components/MessageHalfModal/MessageHalfModal.tsx

@@ -21,7 +21,6 @@ type BaseProps = {
    * ヘッダーに表示する見出しテキスト
    */
   header?: string;
-
   /**
    * 閉じるボタンのラベル
    * @default 閉じる
@@ -43,13 +42,11 @@ type BaseProps = {
    */
   open?: boolean;
   /**
-   * openを無視してモーダルを開いたままにするかどうか。アニメーションライブラリとの連携で、ActionHalfModal自身が開閉に関与しない場合に使用
-   * @default false
+   * openを無視してモーダルを開いたままにするか。アニメーションライブラリとの連携で、ActionHalfModal自身が開閉に関与しない場合に使用
    */
   isStatic?: boolean;
   /**
-   * モーダルをフルスクリーンで表示するかどうか
-   * @default false
+   * モーダルをフルスクリーンで表示する
    */
   fullscreen?: boolean;
   /**

src/components/MessageModal/MessageModal.tsx

@@ -32,8 +32,7 @@ type Props = {
    */
   overlayOpacity?: Opacity;
   /**
-   * 画面を占有する高さで固定するかどうか
-   * @default false
+   * 画面を占有する高さで固定する
    */
   fixedHeight?: boolean;
   /**
@@ -42,8 +41,7 @@ type Props = {
    */
   open?: boolean;
   /**
-   * openを無視してモーダルを開いたままにするかどうか。アニメーションライブラリとの連携で、ActionHalfModal自身が開閉に関与しない場合に使用
-   * @default false
+   * openを無視してモーダルを開いたままにする。アニメーションライブラリとの連携で、ActionHalfModal自身が開閉に関与しない場合に使用
    */
   isStatic?: boolean;
   /**

src/components/Pre/Pre.tsx

@@ -14,7 +14,6 @@ type Props = {
   whiteSpace?: 'pre' | 'pre-wrap' | 'pre-line' | 'break-spaces';
   /**
    * inline-blockとして扱う
-   * @default false
    */
   inline?: boolean;
 } & AllowedSpanAttributes;

src/components/RadioCard/RadioCard.tsx

@@ -20,8 +20,7 @@ type Props = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'name' | 'value'
      */
     children: React.InputHTMLAttributes<HTMLInputElement>['children'];
     /**
-     * 横幅を100%占有するかどうか
-     * @default false
+     * 横幅を100%占有する
      */
     block?: boolean;
   };

src/components/Select/Select.tsx

@@ -17,8 +17,7 @@ type Props = CustomDataAttributeProps & {
    */
   isInvalid?: boolean;
   /**
-   * フィールドを無効化するかどうか
-   * @default false
+   * フィールドを無効化する
    */
   disabled?: boolean;
   /**

src/components/Text/Text.tsx

@@ -30,8 +30,7 @@ type BaseProps = {
    */
   children: ReactNode;
   /**
-   * 太字とするかどうか
-   * @default false
+   * 太字とする
    */
   bold?: boolean;
   /**

src/components/TextArea/TextArea.tsx

@@ -8,13 +8,11 @@ import type { TextareaHTMLAttributes } from 'react';
 
 type Props = {
   /**
-   * 有効でない入力を保持しているかどうか
-   * @default false
+   * 値が不正であることを示す
    */
   isInvalid?: boolean;
   /**
-   * フィールドを無効化するかどうか
-   * @default false
+   * フィールドを無効化する
    */
   disabled?: boolean;
 } & TextareaHTMLAttributes<HTMLTextAreaElement> &

src/components/Toggle/Toggle.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import clsx from 'clsx';
-import { InputHTMLAttributes, forwardRef, useRef, useState } from 'react';
+import { forwardRef, InputHTMLAttributes, useRef, useState } from 'react';
 import styles from './Toggle.module.css';
 import { CustomDataAttributeProps } from '../../types/attributes';
 
@@ -11,20 +11,15 @@ type Props = {
    */
   checked?: boolean;
   /**
-   * 初期状態が選択状態かどうか
-   * @default false
+   * 初期状態で選択状態とする
    */
   defaultChecked?: boolean;
-  /**
-   * 値が変化した場合のコールバック
-   */
-  onChange?: InputHTMLAttributes<HTMLInputElement>['onChange'];
   /**
    * 無効状態かどうか
    * @default false
    */
   disabled?: boolean;
-} & Omit<InputHTMLAttributes<HTMLInputElement>, 'children' | 'onChange'> &
+} & Omit<InputHTMLAttributes<HTMLInputElement>, 'children'> &
   CustomDataAttributeProps;
 
 export const Toggle = forwardRef<HTMLInputElement, Props>(

src/types/style.ts

@@ -165,33 +165,25 @@ export type CSSPercentage = `${string}%`;
 export type CSSLengthPercentage = CSSLength | CSSPercentage;
 
 export type CSSWitdh =
-  | CSSLength
-  | CSSPercentage
   | 'auto'
-  | 'fit-content'
-  | `fit-content(${CSSLengthPercentage})`
-  | 'min-content'
-  | 'max-content'
-  | CSSVariable;
-
-export type CSSMaxWidth =
-  | 'none'
   | CSSLengthPercentage
   | 'min-content'
   | 'max-content'
   | 'fit-content'
   | `fit-content(${CSSLengthPercentage})`
   | CSSVariable;
 
-export type CSSMinWidth =
-  | 'auto'
+export type CSSMaxWidth =
+  | 'none'
   | CSSLengthPercentage
   | 'min-content'
   | 'max-content'
   | 'fit-content'
   | `fit-content(${CSSLengthPercentage})`
   | CSSVariable;
 
+export type CSSMinWidth = CSSWitdh;
+
 export type WidthProps = {
   /**
    * 幅を指定