Common width-related code.

ubie-oss · Jul 12, 2024 · 3347f6c · 3347f6c
1 parent c18e213
commit 3347f6c
Show file tree

Hide file tree

Showing 4 changed files with 107 additions and 80 deletions.
diff --git a/src/components/FlexItem/FlexItem.tsx b/src/components/FlexItem/FlexItem.tsx
@@ -3,9 +3,8 @@
 import { clsx } from 'clsx';
 import { CSSProperties, forwardRef, type PropsWithChildren, type HTMLAttributes } from 'react';
 import styles from './FlexItem.module.css';
-import { MarginProps, PaddingProps } from '../../types/style';
+import { CSSWitdh, MarginProps, PaddingProps, WidthProps } from '../../types/style';
 import { marginVariables, paddingVariables } from '../../utils/style';
-import { CSSWitdh, CSSMaxWidth, CSSMinWidth } from '../../utils/types';
 
 type FlexProperty = {
   grow?: number;
@@ -21,17 +20,8 @@ type Props = {
    * @defaultValue none
    */
   flex?: 'none' | FlexProperty;
-  /**
-   * 最小幅
-   * @defaultValue auto
-   */
-  minWidth?: CSSMinWidth;
-  /**
-   * 最大幅
-   * @defaultValue none
-   */
-  maxWidth?: CSSMaxWidth;
-} & MarginProps &
+} & Omit<WidthProps, 'width'> &
+  MarginProps &
   PaddingProps &
   AllowedDivAttributes;
 

diff --git a/src/types/style.ts b/src/types/style.ts
@@ -128,3 +128,88 @@ export type RadiusProp = {
 };
 
 export type BackgroundColor = 'primary' | 'primaryDarken' | 'accent' | 'accentDarken' | 'alert' | 'gray' | 'white';
+
+export type CSSVariable = `var(--${string})`;
+
+// ref: https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis
+export type CSSLength =
+  | `${string}cap`
+  | `${string}ch`
+  | `${string}em`
+  | `${string}ex`
+  | `${string}ic`
+  | `${string}lh`
+  | `${string}rcap`
+  | `${string}rem`
+  | `${string}rex`
+  | `${string}ric`
+  | `${string}rlh`
+  | `${string}vh`
+  | `${string}vmax`
+  | `${string}vmin`
+  | `${string}vw`
+  | `${string}vb`
+  | `${string}vi`
+  | `${string}cqw`
+  | `${string}cqh`
+  | `${string}cqi`
+  | `${string}cqb`
+  | `${string}cqmin`
+  | `${string}cqmax`
+  | `${string}px`
+  | `${string}cm`
+  | `${string}mm`
+  | `${string}q`
+  | `${string}in`
+  | `${string}pc`
+  | `${string}pt`;
+
+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'
+  | CSSLengthPercentage
+  | 'min-content'
+  | 'max-content'
+  | 'fit-content'
+  | `fit-content(${CSSLengthPercentage})`
+  | CSSVariable;
+
+export type WidthProps = {
+  /**
+   * 幅を指定
+   * @defaultValue auto
+   */
+  width?: CSSWitdh;
+  /**
+   * 最小幅
+   * @defaultValue auto
+   */
+  minWidth?: CSSMinWidth;
+  /**
+   * 最大幅
+   * @defaultValue none
+   */
+  maxWidth?: CSSMaxWidth;
+};
diff --git a/src/utils/style.ts b/src/utils/style.ts
@@ -13,6 +13,9 @@ import type {
   HeadingLeading,
   TagLeading,
   TextColor,
+  CSSMinWidth,
+  CSSMaxWidth,
+  CSSWitdh,
 } from '../types/style';
 import type { CSSProperties } from 'react';
 
@@ -239,3 +242,19 @@ export const gapVariables = (spacing?: Spacing) => {
     '--gap': spacing ? `var(--size-spacing-${spacing})` : '0',
   } as CSSProperties;
 };
+
+export const widthVariables = ({
+  width = 'auto',
+  minWidth = 'auto',
+  maxWidth = 'none',
+}: {
+  width?: CSSWitdh;
+  minWidth?: CSSMinWidth;
+  maxWidth?: CSSMaxWidth;
+}) => {
+  return {
+    '--width': width,
+    '--min-width': minWidth,
+    '--max-width': maxWidth,
+  } as CSSProperties;
+};
diff --git a/src/utils/types.ts b/src/utils/types.ts
@@ -4,70 +4,3 @@ export type AllOrNone<T> = T | Partial<Record<keyof T, undefined>>;
 export type DistributiveOmit<T, TOmitted extends PropertyKey> = T extends any ? Omit<T, TOmitted> : never;
 
 export type HTMLTagname = keyof HTMLElementTagNameMap;
-
-export type CSSVariable = `var(--${string})`;
-
-// ref: https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis
-export type CSSLength =
-  | `${string}cap`
-  | `${string}ch`
-  | `${string}em`
-  | `${string}ex`
-  | `${string}ic`
-  | `${string}lh`
-  | `${string}rcap`
-  | `${string}rem`
-  | `${string}rex`
-  | `${string}ric`
-  | `${string}rlh`
-  | `${string}vh`
-  | `${string}vmax`
-  | `${string}vmin`
-  | `${string}vw`
-  | `${string}vb`
-  | `${string}vi`
-  | `${string}cqw`
-  | `${string}cqh`
-  | `${string}cqi`
-  | `${string}cqb`
-  | `${string}cqmin`
-  | `${string}cqmax`
-  | `${string}px`
-  | `${string}cm`
-  | `${string}mm`
-  | `${string}q`
-  | `${string}in`
-  | `${string}pc`
-  | `${string}pt`;
-
-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'
-  | CSSLengthPercentage
-  | 'min-content'
-  | 'max-content'
-  | 'fit-content'
-  | `fit-content(${CSSLengthPercentage})`
-  | CSSVariable;