(
40 | ({ icon, description, intention = 'shade', disabled, className, children, selected, ...rest }, ref) => (
41 |
60 | {icon && (
61 | svg]:h-full [&>svg]:w-full`,
64 | {
65 | shade: `[&_svg]:fill-shade-medium-default`,
66 | negative: `[&_svg]:fill-negative-medium-default`,
67 | }[intention],
68 | disabled && `[&_svg]:fill-shade-medium-disabled`,
69 | ])}
70 | >
71 | {icon}
72 |
73 | )}
74 |
75 |
76 | {children}
77 |
78 |
82 | {description}
83 |
84 |
85 | {selected && (
86 | svg]:h-full [&>svg]:w-full`,
89 | {
90 | shade: `[&_svg]:fill-shade-dark-default`,
91 | negative: `[&_svg]:fill-negative-dark-default`,
92 | }[intention],
93 | disabled && `[&_svg]:fill-shade-dark-disabled`,
94 | ])}
95 | >
96 |
97 |
98 | )}
99 |
100 | ),
101 | );
102 |
--------------------------------------------------------------------------------
/packages/for-ui/src/menu/MenuList.tsx:
--------------------------------------------------------------------------------
1 | import { ElementType, forwardRef, Ref } from 'react';
2 | import MuiMenuList, { MenuListProps as MuiMenuListProps } from '@mui/material/MenuList';
3 | import { fsx } from '../system/fsx';
4 | import { style } from './style';
5 |
6 | export type MenuListProps = MuiMenuListProps
& {
7 | /**
8 | * レンダリングするコンポーネントを指定 (例: h1, p, strong)
9 | * @default span
10 | */
11 | as?: P;
12 |
13 | ref?: Ref
;
14 | };
15 |
16 | const _MenuList =
({
17 | as,
18 | className,
19 | _ref,
20 | ...rest
21 | }: MenuListProps
& {
22 | _ref: Ref
;
23 | }) => (
24 | } className={fsx(style, className)} {...rest} />
25 | );
26 |
27 | export const MenuList = forwardRef((props, ref) => <_MenuList _ref={ref} {...props} />) as unknown as <
28 | P extends ElementType = 'ul',
29 | >(
30 | props: MenuListProps,
31 | ) => JSX.Element;
32 |
--------------------------------------------------------------------------------
/packages/for-ui/src/menu/index.tsx:
--------------------------------------------------------------------------------
1 | export * from './Menu';
2 | export * from './MenuItem';
3 | export * from './MenuList';
4 | export * from './MenuDivider';
5 |
--------------------------------------------------------------------------------
/packages/for-ui/src/menu/style.ts:
--------------------------------------------------------------------------------
1 | import { fsx } from '../system/fsx';
2 |
3 | export const style = fsx(
4 | `z-modal bg-shade-white-default shadow-more divide-shade-light-default border-shade-light-default grid w-full min-w-min grid-cols-1 divide-y rounded border px-0 py-1`,
5 | );
6 |
--------------------------------------------------------------------------------
/packages/for-ui/src/modal/Modal.stories.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { useState } from '@storybook/addons';
3 | import { Meta } from '@storybook/react/types-6-0';
4 | import { Modal } from '.';
5 | import { Button } from '../button';
6 | import { ModalContent } from './ModalContent';
7 | import { ModalFooter } from './ModalFooter';
8 | import { ModalHeader } from './ModalHeader';
9 |
10 | export default {
11 | title: 'Feedback / Modal',
12 | component: Modal,
13 | } as Meta;
14 |
15 | export const ModalDefault = (): JSX.Element => {
16 | const [showModal, setShowModal] = useState(true);
17 |
18 | const onSubmit = () => {
19 | console.error('submit');
20 | };
21 |
22 | return (
23 |
24 |
Default Modal
25 |
26 |
29 |
30 |
setShowModal(false)}>
31 | 本当に削除してよろしいですか？
32 |
33 |
34 | アカウントを無効にしてもよろしいですか？すべてのデータは完全に削除されます。このアクションは元に戻せません。
35 |
36 |
37 |
38 |
41 |
44 |
45 |
46 |
47 |
49 |
50 | {children}
51 |
52 |
{children}
;
9 | };
10 |
--------------------------------------------------------------------------------
/packages/for-ui/src/modal/ModalFooter.tsx:
--------------------------------------------------------------------------------
1 | import React, { ReactNode } from 'react';
2 |
3 | type Props = {
4 | className?: string;
5 | /** The contents of the Dialog. */
6 | children: ReactNode;
7 | };
8 |
9 | export const ModalFooter: React.FC = ({ children }) => {
10 | return {children}
;
11 | };
12 |
--------------------------------------------------------------------------------
/packages/for-ui/src/modal/ModalHeader.tsx:
--------------------------------------------------------------------------------
1 | import React, { ReactNode } from 'react';
2 | import { Text } from '../text';
3 |
4 | type Props = {
5 | /** The contents of the Dialog. */
6 | children: ReactNode | string;
7 | };
8 |
9 | export const ModalHeader: React.FC = ({ children }) => {
10 | return (
11 |
12 |
13 | {children}
14 |
15 |
16 | );
17 | };
18 |
--------------------------------------------------------------------------------
/packages/for-ui/src/modal/index.tsx:
--------------------------------------------------------------------------------
1 | export * from './Modal';
2 | export * from './ModalContent';
3 | export * from './ModalHeader';
4 | export * from './ModalFooter';
5 |
--------------------------------------------------------------------------------
/packages/for-ui/src/popper/Popper.stories.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { Meta } from '@storybook/react/types-6-0';
3 | import { Button } from '../button/Button';
4 | import { MenuItem } from '../menu';
5 | import { Text } from '../text';
6 | import { Popper } from './Popper';
7 |
8 | export default {
9 | title: 'Navigation / Popper',
10 | component: Popper,
11 | argTypes: {
12 | backgroundColor: { control: 'color' },
13 | },
14 | decorators: [
15 | // eslint-disable-next-line @typescript-eslint/no-explicit-any
16 | (Story: any) => (
17 |
18 |
19 |
20 | ),
21 | ],
22 | } as Meta;
23 |
24 | export const Base = () => {
25 | return (
26 |
27 |
28 |
29 | Popper
30 |
31 |
32 |
33 |
プロジェクト}>
34 |
35 |
こんにちは
36 |
こんにちは
37 |
こんにちは
38 |
40 |
47 |
48 |
49 | Popper
50 |
51 |
52 |
53 |
TriggerComponent={}>
54 | {({ onClick }) => (
55 |
56 |
57 |
58 |
59 |
60 | )}
61 |
62 | xxxxxxxxxxxxxxx
,
86 | children,
87 | }) => {
88 | if (loading) {
89 | return {recursiveChildren(children, empty)};
90 | }
91 | if (isValidElement(children)) {
92 | return children;
93 | }
94 | return {children};
95 | };
96 |
--------------------------------------------------------------------------------
/packages/for-ui/src/skeleton/index.tsx:
--------------------------------------------------------------------------------
1 | export * from './Skeleton';
2 |
--------------------------------------------------------------------------------
/packages/for-ui/src/snackbar/Snackbar.stories.tsx:
--------------------------------------------------------------------------------
1 | import { Fragment, useState } from 'react';
2 | import { Meta } from '@storybook/react/types-6-0';
3 | import { Button } from '../button';
4 | import { Text } from '../text';
5 | import { Snackbar, SnackbarProps } from './Snackbar';
6 | import { SnackbarProvider, useSnackbar } from './SnackbarContext';
7 |
8 | export default {
9 | title: 'Feedback / Snackbar',
10 | component: Snackbar,
11 | } as Meta;
12 |
13 | export const Playground = {
14 | args: {
15 | open: true,
16 | message: 'テスト',
17 | autoHide: true,
18 | autoHideDuration: null,
19 | },
20 | };
21 |
22 | export const Stateless = () => 開く} message="操作が完了しました" />;
23 |
24 | export const StatelessAutoHide = () => (
25 | 開く} autoHide message="操作が完了しました" />
26 | );
27 |
28 | export const Stateful = () => {
29 | const [open, setOpen] = useState(false);
30 | const openHandler = () => {
31 | setOpen(true);
32 | };
33 | const closeHandler = () => {
34 | setOpen(false);
35 | };
36 | return (
37 |
38 |
39 |
40 |
41 | );
42 | };
43 |
44 | export const StatefulAutoHide = () => {
45 | const [open, setOpen] = useState(false);
46 | const openHandler = () => {
47 | setOpen(true);
48 | };
49 | const closeHandler = () => {
50 | setOpen(false);
51 | };
52 | return (
53 |
54 |
55 |
56 |
57 | );
58 | };
59 |
60 | export const WithContext = () => {
61 | const App = () => {
62 | const { openSnackbar } = useSnackbar();
63 | return (
64 |
65 |
68 |
71 |
72 | );
73 | };
74 | return (
75 |
76 |
77 | Snackbarは1画面に1つのみ表示することを強く推奨しています。この挙動はSnackbarProviderを使うことで簡単に実現できます。
78 |
79 |
80 |
81 | );
82 | };
83 |
--------------------------------------------------------------------------------
/packages/for-ui/src/snackbar/Snackbar.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | cloneElement,
3 | forwardRef,
4 | Fragment,
5 | isValidElement,
6 | ReactElement,
7 | SyntheticEvent,
8 | useId,
9 | useState,
10 | } from 'react';
11 | import MuiSnackbar, { SnackbarProps as MuiSnackbarProps, SnackbarCloseReason } from '@mui/material/Snackbar';
12 | import MuiSnackbarContent, { SnackbarContentProps as MuiSnackbarContentProps } from '@mui/material/SnackbarContent';
13 | import { Button } from '../button';
14 | import { fsx } from '../system/fsx';
15 | import { Text } from '../text';
16 |
17 | export type SnackbarProps = MuiSnackbarProps & {
18 | /**
19 | * 自動的にSnackbarが消えるまでの時間を指定
20 | *
21 | * 指定されているときは閉じるボタンは表示されません。
22 | * 消えるまでの時間はミリ秒で指定します。_message_を読むのに十分な時間を与えるようにしてください。
23 | *
24 | * @default 5000
25 | */
26 | autoHideDuration?: MuiSnackbarProps['autoHideDuration'];
27 |
28 | /**
29 | * 自動的にSnackbarを消すかどうかを指定
30 | *
31 | * ユーザーが閉じるボタンを押す あるいは SnackbarProvider下では新しいSnackbarが開かれる ことでのみ閉じられます。
32 | */
33 | autoHide?: boolean;
34 |
35 | /**
36 | * 表示するメッセージを指定
37 | */
38 | message: MuiSnackbarProps['message'];
39 |
40 | /**
41 | * 操作の起点となるコンポーネントを指定
42 | *
43 | * ボタンを押すと即座に表示のように使うことができますが、通常はユーザーの操作と処理の完了は完全に同義ではないため、そのような場面では使用は非推奨です。
44 | */
45 | TriggerComponent?: ReactElement<{ onClick: () => void }>;
46 |
47 | className?: string;
48 | };
49 |
50 | export const Snackbar = forwardRef(
51 | (
52 | {
53 | TriggerComponent,
54 | autoHideDuration = 5000,
55 | autoHide = false,
56 | onClose,
57 | onClick,
58 | message,
59 | action,
60 | className,
61 | TransitionProps,
62 | ...rest
63 | },
64 | ref,
65 | ) => {
66 | const [open, setOpen] = useState(true);
67 | const handleClose = (e: Event | SyntheticEvent, reason: SnackbarCloseReason) => {
68 | onClose?.(e, reason);
69 | setOpen(false);
70 | };
71 | const handleOpen = () => {
72 | setOpen(true);
73 | };
74 | const Trigger =
75 | isValidElement(TriggerComponent) &&
76 | cloneElement(TriggerComponent, {
77 | onClick: handleOpen,
78 | });
79 | return (
80 |
81 | {Trigger}
82 | {
108 | onClick?.(e);
109 | autoHide && handleClose(e, 'escapeKeyDown');
110 | }}
111 | {...rest}
112 | >
113 |
114 |
115 |
116 | );
117 | },
118 | );
119 |
120 | export type SnackbarContentProps = MuiSnackbarContentProps & {
121 | autoHide?: boolean;
122 | onClose?: SnackbarProps['onClose'];
123 | message?: MuiSnackbarContentProps['message'];
124 | action?: MuiSnackbarContentProps['action'];
125 | };
126 |
127 | export const SnackbarContent = forwardRef(
128 | ({ autoHide, message, action, onClose, onClick, className, ...rest }, ref) => {
129 | const messageId = useId();
130 | return (
131 | {
142 | onClick?.(e);
143 | autoHide && onClose?.(e, 'escapeKeyDown');
144 | }}
145 | message={{message}}
146 | action={
147 | action ||
148 | (!autoHide && (
149 |
159 | ))
160 | }
161 | {...rest}
162 | />
163 | );
164 | },
165 | );
166 |
--------------------------------------------------------------------------------
/packages/for-ui/src/snackbar/SnackbarContext.tsx:
--------------------------------------------------------------------------------
1 | import { createContext, FC, ReactNode, useContext, useState } from 'react';
2 | import { Snackbar, SnackbarProps } from './Snackbar';
3 |
4 | type SnackbarContextValue = {
5 | inProvider: boolean;
6 | snackbar?: SnackbarProps;
7 | enqueue: (props: SnackbarProps) => void;
8 | };
9 |
10 | // TODO: Rewrite using `satisfies` once jest supports TypeScript v4.9
11 | const initialSnackbarContextValue: SnackbarContextValue = {
12 | inProvider: false,
13 | enqueue: () => undefined,
14 | };
15 |
16 | const SnackbarContext = createContext(initialSnackbarContextValue);
17 |
18 | // TODO: Refactor using Portal. See https://react.dev/reference/react-dom/createPortal
19 | const SnackbarView = () => {
20 | const { snackbar } = useContext(SnackbarContext);
21 | if (!snackbar) {
22 | return null;
23 | }
24 | return ;
25 | };
26 |
27 | export type SnackbarProviderProps = {
28 | children: ReactNode;
29 | };
30 |
31 | export const SnackbarProvider: FC = ({ children, ...rest }) => {
32 | const [snackbar, setSnackbar] = useState();
33 | const enqueue = (props: SnackbarProps) => {
34 | setSnackbar(props);
35 | };
36 | return (
37 |
45 | {children}
46 |
47 |
48 | );
49 | };
50 |
51 | type UseSnackbar = {
52 | inProvider: boolean;
53 | openSnackbar: (props: SnackbarProps) => void;
54 | };
55 |
56 | export const useSnackbar = (): UseSnackbar => {
57 | const { inProvider, enqueue } = useContext(SnackbarContext);
58 | return {
59 | inProvider,
60 | openSnackbar: enqueue,
61 | };
62 | };
63 |
--------------------------------------------------------------------------------
/packages/for-ui/src/snackbar/index.tsx:
--------------------------------------------------------------------------------
1 | export * from './Snackbar';
2 | export * from './SnackbarContext';
3 |
--------------------------------------------------------------------------------
/packages/for-ui/src/stepper/Step.tsx:
--------------------------------------------------------------------------------
1 | import { forwardRef } from 'react';
2 | import { MdOutlineDone } from 'react-icons/md';
3 | import MuiStep, { StepProps as MuiStepProps } from '@mui/material/Step';
4 | import { StepIconProps as MuiStepIconProps } from '@mui/material/StepIcon';
5 | import MuiStepLabel, { StepLabelProps as MuiStepLabelProps } from '@mui/material/StepLabel';
6 | import { fsx } from '../system/fsx';
7 | import { Text } from '../text';
8 |
9 | export type StepProps = MuiStepProps;
10 |
11 | export type StepLabelProps = MuiStepLabelProps;
12 |
13 | export const Step = forwardRef(({ children, active, className, ...rest }, ref) => (
14 |
15 |
24 |
25 | {children}
26 |
27 |
28 |
29 | ));
30 |
31 | const Icon = ({ completed, active, icon }: Partial) => (
32 |
40 |
44 | {completed ? : icon}
45 |
46 |
47 | );
48 |
--------------------------------------------------------------------------------
/packages/for-ui/src/stepper/Stepper.stories.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Meta, Story } from '@storybook/react/types-6-0';
3 | import { Text } from '../text';
4 | import { Step } from './Step';
5 | import { Stepper } from './Stepper';
6 |
7 | export default {
8 | title: 'Navigation / Stepper',
9 | component: Stepper,
10 | argTypes: {
11 | activeStep: { control: { min: 1 } },
12 | alternativeLabel: { control: 'boolean' },
13 | backgroundColor: { control: 'color' },
14 | },
15 | decorators: [(Story: Story) => ],
16 | } as Meta;
17 |
18 | const steps = ['First', 'Second', 'Third', 'Last'];
19 |
20 | export const LabelBottom: Story = (args) => (
21 |
22 |
23 | Stepper
24 |
25 |
26 | {steps.map((step, index) => (
27 | {step}
28 | ))}
29 |
30 |
31 | {steps.map((step, index) => (
32 | {step}
33 | ))}
34 |
35 |
36 | {steps.map((step, index) => (
37 | {step}
38 | ))}
39 |
40 |
41 | {steps.map((step, index) => (
42 | {step}
43 | ))}
44 |
45 |
46 | );
47 |
48 | export const LabelTrailing: Story = (args) => (
49 |
50 |
51 | Stepper
52 |
53 |
54 | {steps.map((step, index) => (
55 | {step}
56 | ))}
57 |
58 |
59 | {steps.map((step, index) => (
60 | {step}
61 | ))}
62 |
63 |
64 | {steps.map((step, index) => (
65 | {step}
66 | ))}
67 |
68 |
69 | {steps.map((step, index) => (
70 | {step}
71 | ))}
72 |
73 |
74 | );
75 |
--------------------------------------------------------------------------------
/packages/for-ui/src/stepper/Stepper.tsx:
--------------------------------------------------------------------------------
1 | import { forwardRef } from 'react';
2 | import { StepConnector } from '@mui/material';
3 | import MuiStepper, { StepperProps as MuiStepperProps } from '@mui/material/Stepper';
4 | import { fsx } from '../system/fsx';
5 |
6 | export type StepperProps = Omit & {
7 | /**
8 | * ラベルを表示する位置を指定
9 | *
10 | * @default 'bottom'
11 | */
12 | labelPosition?: 'bottom' | 'trailing';
13 |
14 | /**
15 | * @deprecated labelPositionを使用してください
16 | */
17 | alternativeLabel?: MuiStepperProps['alternativeLabel'];
18 |
19 | className?: string;
20 | };
21 |
22 | export const Stepper = forwardRef(
23 | ({ activeStep, alternativeLabel, labelPosition = 'bottom', children, className, ...rest }, ref) => (
24 | .MuiStepConnector-line]:border-primary-dark-default -left-2/4 right-0 top-0 flex h-6 w-full items-center px-0 [&.MuiStepConnector-alternativeLabel]:pl-3 [&.MuiStepConnector-alternativeLabel]:pr-4`,
33 | ),
34 | line: fsx(`border-shade-dark-disabled w-full border-t-2`),
35 | }}
36 | />
37 | }
38 | className={fsx(`gap-1`, className)}
39 | {...rest}
40 | >
41 | {children}
42 |
43 | ),
44 | );
45 |
--------------------------------------------------------------------------------
/packages/for-ui/src/stepper/index.tsx:
--------------------------------------------------------------------------------
1 | export * from './Stepper';
2 | export * from './Step';
3 |
--------------------------------------------------------------------------------
/packages/for-ui/src/switch/Switch.stories.tsx:
--------------------------------------------------------------------------------
1 | import React, { useCallback } from 'react';
2 | import { Controller, useForm } from 'react-hook-form';
3 | import * as yup from 'yup';
4 | import { yupResolver } from '@hookform/resolvers/yup';
5 | import { Meta } from '@storybook/react/types-6-0';
6 | import { Button } from '../button';
7 | import { fsx } from '../system/fsx';
8 | import { Text } from '../text';
9 | import { Switch } from './Switch';
10 | import { SwitchGroup } from './SwitchGroup';
11 |
12 | export default {
13 | title: 'Form / Switch',
14 | component: Switch,
15 | argTypes: {},
16 | } as Meta;
17 |
18 | export const Basic = (): JSX.Element => {
19 | const { control, handleSubmit } = useForm<{
20 | default1: boolean;
21 | default2: boolean;
22 | disable1: boolean;
23 | disable2: boolean;
24 | }>({
25 | reValidateMode: 'onChange',
26 | });
27 |
28 | const onSubmit = (data: unknown) => console.info(data);
29 |
30 | return (
31 |
73 | );
74 | };
75 |
76 | export const WithReactHookForm = () => {
77 | const schema = yup.object({
78 | autosave: yup.string().required(),
79 | });
80 | type FieldValue = yup.InferType;
81 |
82 | const { register, handleSubmit } = useForm({
83 | resolver: yupResolver(schema),
84 | });
85 | const onSubmit = (data: unknown) => {
86 | console.info(data);
87 | };
88 |
89 | return (
90 |
94 | );
95 | };
96 |
97 | export const WithSwitchGroup = () => {
98 | const allPreferences = {
99 | spring: '春',
100 | summer: '夏',
101 | autumn: '秋',
102 | winter: '冬',
103 | } as const;
104 |
105 | const schema = yup.object({
106 | preferences: yup.object(Object.fromEntries(Object.keys(allPreferences).map((k) => [k, yup.boolean()]))),
107 | });
108 |
109 | type FieldValue = yup.InferType;
110 |
111 | const {
112 | register,
113 | handleSubmit,
114 | formState: { errors },
115 | } = useForm({
116 | resolver: yupResolver(schema),
117 | });
118 | const onSubmit = useCallback((data: unknown) => {
119 | console.info(data);
120 | }, []);
121 | return (
122 |
137 | );
138 | };
139 |
140 | export const CustomLabel = () => (
141 |
144 | ラベル
145 |
146 | }
147 | />
148 | );
149 |
--------------------------------------------------------------------------------
/packages/for-ui/src/switch/Switch.tsx:
--------------------------------------------------------------------------------
1 | import { ComponentPropsWithRef, forwardRef, ReactNode } from 'react';
2 | import { fsx } from '../system/fsx';
3 | import { TextDefaultStyler } from '../system/TextDefaultStyler';
4 | import { Text } from '../text';
5 |
6 | export type SwitchProps = ComponentPropsWithRef<'input'> & {
7 | label?: ReactNode;
8 | className?: string;
9 | };
10 |
11 | export const Switch = forwardRef(({ label, disabled, className, ...rest }, ref) => (
12 |
13 |
26 | (
29 |
30 | )}
31 | />
32 |
33 | ));
34 |
--------------------------------------------------------------------------------
/packages/for-ui/src/switch/SwitchGroup.tsx:
--------------------------------------------------------------------------------
1 | import { forwardRef, ReactNode } from 'react';
2 | import FormControl from '@mui/material/FormControl';
3 | import FormGroup, { FormGroupProps } from '@mui/material/FormGroup';
4 | import { fsx } from '../system/fsx';
5 | import { TextDefaultStyler } from '../system/TextDefaultStyler';
6 | import { Text } from '../text';
7 |
8 | export type SwitchGroupProps = Omit & {
9 | name?: string;
10 | row?: boolean;
11 | required?: boolean;
12 | disabled?: boolean;
13 | label?: ReactNode;
14 | error?: boolean;
15 | helperText?: ReactNode;
16 | className?: string;
17 | children: ReactNode;
18 | };
19 |
20 | export const SwitchGroup = forwardRef(
21 | ({ required, disabled, label, error, row, helperText, className, ...rest }, ref) => {
22 | return (
23 |
30 | (
33 |
34 | {/* due to the CSS bug, legend element cannot be styled if contents not specified. But contents makes difficult to style, so wrap by Text. */}
35 |
36 | {children}
37 | {required && *}
38 |
39 |
40 | )}
41 | />
42 |
43 | (
46 |
52 | )}
53 | />
54 |
55 | );
56 | },
57 | );
58 |
--------------------------------------------------------------------------------
/packages/for-ui/src/switch/index.tsx:
--------------------------------------------------------------------------------
1 | export * from './Switch';
2 | export * from './SwitchGroup';
3 |
--------------------------------------------------------------------------------
/packages/for-ui/src/system/PropsCascader.tsx:
--------------------------------------------------------------------------------
1 | import { Children, cloneElement, FC, ForwardedRef, forwardRef, HTMLAttributes, isValidElement, ReactNode } from 'react';
2 |
3 | type PropsCascaderProps> = T & {
4 | children: ReactNode;
5 | };
6 |
7 | type PropsCascaderComponent = >(props: PropsCascaderProps) => ReturnType;
8 |
9 | export const PropsCascader: PropsCascaderComponent = forwardRef(
10 | >(
11 | { children, ...props }: PropsCascaderProps,
12 | ref: ForwardedRef,
13 | ) => {
14 | return Children.map(children, (child: ReactNode) => {
15 | if (!isValidElement(child)) {
16 | return child;
17 | }
18 | return cloneElement(child, { ...props, ...child.props, ref });
19 | });
20 | },
21 | );
22 |
--------------------------------------------------------------------------------
/packages/for-ui/src/system/TextDefaultStyler.tsx:
--------------------------------------------------------------------------------
1 | import { FC, isValidElement, ReactElement, ReactNode } from 'react';
2 |
3 | export type TextDefaultStylerProps = {
4 | /**
5 | * 適用されるラベル等を指定
6 | *
7 | * contentがstringやnumberなどReactElementではない場合にdefaultRendererを用いて描画されます。
8 | * contentがReactElementの場合はdefaultRendererを用いずにそのまま描画されます。
9 | */
10 | content: ReactNode;
11 |
12 | /**
13 | * contentがReactElementではない場合に描画に用いるコンポーネントを指定
14 | */
15 | defaultRenderer: FC<{ children: Exclude }>;
16 | };
17 |
18 | export const TextDefaultStyler: FC = ({ content, defaultRenderer: DefaultRenderer }) => {
19 | if (!content) {
20 | return null;
21 | }
22 | // TODO: To eliminate the gap, `any` is used. (ReactNode's ReactElement is ReactElement, but isValidElement's returned ReactElement is ReactElement)
23 | // eslint-disable-next-line @typescript-eslint/no-explicit-any
24 | if (isValidElement(content)) {
25 | return content;
26 | }
27 | return {content};
28 | };
29 |
--------------------------------------------------------------------------------
/packages/for-ui/src/system/componentType.ts:
--------------------------------------------------------------------------------
1 | import { ComponentPropsWithoutRef, ComponentPropsWithRef, ElementType, FC } from 'react';
2 | import { PreservedOmit } from './preservedOmit';
3 |
4 | export type Ref = ComponentPropsWithRef['ref'];
5 |
6 | export type RefProps = { ref?: Ref };
7 |
8 | export type AsProps = {
9 | /**
10 | * レンダリングするコンポーネントを指定 (例: button, a, input)
11 | */
12 | as?: As;
13 | };
14 |
15 | export type ComponentPropsWithAs = AsProps &
16 | Props &
17 | RefProps &
18 | PreservedOmit, keyof (Props & AsProps & RefProps)>;
19 |
20 | export type ElementTypeToHTMLElement = Element extends keyof HTMLElementTagNameMap
21 | ? HTMLElementTagNameMap[Element]
22 | : Element;
23 |
24 | export type Element = ReturnType;
25 |
--------------------------------------------------------------------------------
/packages/for-ui/src/system/fsx.ts:
--------------------------------------------------------------------------------
1 | // fsx merges tailwind classes and other classes along with For Design System Token.
2 | import clsx, { ClassValue } from 'clsx';
3 | import { extendTailwindMerge } from 'tailwind-merge';
4 |
5 | const twMerge = extendTailwindMerge({
6 | classGroups: {
7 | 'font-size': [
8 | {
9 | text: ['xs', 's', 'r', 'xr', 'l', 'xl'],
10 | },
11 | ],
12 | },
13 | });
14 |
15 | export const fsx = (...classes: ClassValue[]): string => twMerge(clsx(classes));
16 |
--------------------------------------------------------------------------------
/packages/for-ui/src/system/preservedOmit.ts:
--------------------------------------------------------------------------------
1 | export type PreservedOmit = {
2 | [Property in keyof T as Exclude]: T[Property];
3 | };
4 |
--------------------------------------------------------------------------------
/packages/for-ui/src/system/walkChildren.ts:
--------------------------------------------------------------------------------
1 | import { Children, isValidElement, ReactNode } from 'react';
2 |
3 | // walkChildren visits children recursively for given ReactNode root.
4 | // If given f returns true, it will stop walking at the node (no more seeking children recursively).
5 | export const walkChildren = (root: ReactNode, f: (node: ReactNode) => boolean | void): boolean => {
6 | Children.forEach(root, (node) => {
7 | if (f(node)) {
8 | return;
9 | }
10 | if (!isValidElement(node)) {
11 | return;
12 | }
13 | walkChildren(node.props.children, f);
14 | });
15 | return true;
16 | };
17 |
--------------------------------------------------------------------------------
/packages/for-ui/src/table/ColumnDef.ts:
--------------------------------------------------------------------------------
1 | export type { ColumnDef } from '@tanstack/react-table';
2 |
--------------------------------------------------------------------------------
/packages/for-ui/src/table/TableCell.tsx:
--------------------------------------------------------------------------------
1 | import { FC, forwardRef, HTMLAttributes, ReactNode } from 'react';
2 | import { MdArrowDownward, MdArrowUpward } from 'react-icons/md';
3 | import { ComponentPropsWithAs, Element, Ref } from '../system/componentType';
4 | import { fsx } from '../system/fsx';
5 | import { Text } from '../text';
6 |
7 | export type TableCellProps = ComponentPropsWithAs<
8 | {
9 | /**
10 | * @deprecated `as` propを使ってください
11 | */
12 | component?: 'th' | 'td';
13 |
14 | className?: string;
15 | },
16 | As
17 | >;
18 |
19 | type TableCellComponent = (props: TableCellProps) => Element;
20 |
21 | export const TableCell: TableCellComponent = forwardRef(
22 | ({ component = 'td', as, className, ...rest }: TableCellProps, ref?: Ref) => {
23 | const Component = as || component || 'td';
24 | return (
25 |
37 | );
38 | },
39 | );
40 |
41 | export const SortableTableCellHead: FC<
42 | TableCellProps<'th'> & {
43 | sortable: boolean;
44 | sorted: false | 'asc' | 'desc';
45 | nextSortingOrder: false | 'asc' | 'desc';
46 | children: ReactNode;
47 | disabled?: boolean;
48 | onClick?: HTMLAttributes['onClick'];
49 | }
50 | > = ({ sortable, sorted, nextSortingOrder, onClick, disabled, children, ...rest }) => (
51 |
57 | {sortable ? (
58 |
85 | ) : (
86 | {children}
87 | )}
88 |
89 | );
90 |
--------------------------------------------------------------------------------
/packages/for-ui/src/table/TablePagination.test.tsx:
--------------------------------------------------------------------------------
1 | import { describe, expect, it } from 'vitest';
2 | import { render, screen } from '@testing-library/react';
3 | import userEvent from '@testing-library/user-event';
4 | import { Pagination } from './TablePagination';
5 |
6 | describe('Pagination', () => {
7 | it('is rendered with first, last, prev, next, and current page buttons', async () => {
8 | render();
9 | expect(screen.queryByRole('button', { name: '最初のページへ移動' })).toBeInTheDocument();
10 | expect(screen.queryByRole('button', { name: '最後のページへ移動' })).toBeInTheDocument();
11 | expect(screen.queryByRole('button', { name: '前のページへ移動' })).toBeInTheDocument();
12 | expect(screen.queryByRole('button', { name: '次のページへ移動' })).toBeInTheDocument();
13 | expect(screen.queryByRole('button', { name: 'ページ1へ移動' })).toBeInTheDocument();
14 | expect(screen.queryByRole('button', { name: 'ページ100へ移動' })).toBeInTheDocument();
15 | expect(screen.queryByRole('button', { name: '現在のページ ページ50' })).toBeInTheDocument();
16 | });
17 | it('calls event handlers when first page button is clicked', async () => {
18 | const user = userEvent.setup();
19 | const onChangePage = vi.fn((page: number) => page);
20 | const onClickFirstPageButton = vi.fn();
21 | render(
22 | ,
28 | );
29 | await user.click(screen.getByRole('button', { name: '最初のページへ移動' }));
30 | expect(onChangePage).toHaveBeenCalledOnce();
31 | expect(onChangePage).toHaveLastReturnedWith(1);
32 | expect(onClickFirstPageButton).toHaveBeenCalledOnce();
33 | });
34 | it('calls event handlers when last page button is clicked', async () => {
35 | const user = userEvent.setup();
36 | const onChangePage = vi.fn((page: number) => page);
37 | const onClickLastPageButton = vi.fn();
38 | render(
39 | ,
45 | );
46 | await user.click(screen.getByRole('button', { name: '最後のページへ移動' }));
47 | expect(onChangePage).toHaveBeenCalledOnce();
48 | expect(onChangePage).toHaveLastReturnedWith(100);
49 | expect(onClickLastPageButton).toHaveBeenCalledOnce();
50 | });
51 | it('calls event handlers when previous page button is clicked', async () => {
52 | const user = userEvent.setup();
53 | const onChangePage = vi.fn((page: number) => page);
54 | const onClickPreviousPageButton = vi.fn();
55 | render(
56 | ,
62 | );
63 | await user.click(screen.getByRole('button', { name: '前のページへ移動' }));
64 | expect(onChangePage).toHaveBeenCalledOnce();
65 | expect(onChangePage).toHaveLastReturnedWith(49);
66 | expect(onClickPreviousPageButton).toHaveBeenCalledOnce();
67 | });
68 | it('calls event handlers when next page button is clicked', async () => {
69 | const user = userEvent.setup();
70 | const onChangePage = vi.fn((page: number) => page);
71 | const onClickNextPageButton = vi.fn();
72 | render(
73 | ,
79 | );
80 | await user.click(screen.getByRole('button', { name: '次のページへ移動' }));
81 | expect(onChangePage).toHaveBeenCalledOnce();
82 | expect(onChangePage).toHaveLastReturnedWith(51);
83 | expect(onClickNextPageButton).toHaveBeenCalledOnce();
84 | });
85 | });
86 |
--------------------------------------------------------------------------------
/packages/for-ui/src/table/TableScroller.tsx:
--------------------------------------------------------------------------------
1 | import { PropsWithChildren } from 'react';
2 |
3 | type Props = PropsWithChildren<{
4 | height?: number | string;
5 | }>;
6 |
7 | export const TableScroller = ({ height, ...rest }: Props) => (
8 |
14 | );
15 |
--------------------------------------------------------------------------------
/packages/for-ui/src/table/index.tsx:
--------------------------------------------------------------------------------
1 | export * from './Table';
2 | export * from './TablePagination';
3 | export * from './TableCell';
4 | export * from './TableScroller';
5 | export * from './ColumnDef';
6 |
--------------------------------------------------------------------------------
/packages/for-ui/src/tabs/Tab.stories.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Meta } from '@storybook/react/types-6-0';
3 | import { Badge } from '../badge';
4 | import { Tab, TabProps } from './Tab';
5 |
6 | export default {
7 | title: 'Navigation / Tabs / Tab',
8 | component: Tab,
9 | } as Meta;
10 |
11 | export const Playground = {
12 | args: {
13 | label: 'ラベル',
14 | badge: ,
15 | disabled: false,
16 | } satisfies TabProps,
17 | };
18 |
--------------------------------------------------------------------------------
/packages/for-ui/src/tabs/Tab.tsx:
--------------------------------------------------------------------------------
1 | import { FC, ReactElement } from 'react';
2 | import MuiTab, { TabProps as MuiTabProps } from '@mui/material/Tab';
3 | import { fsx } from '../system/fsx';
4 |
5 | export interface TabProps extends Omit {
6 | minWidth?: number;
7 | badge?: ReactElement;
8 | }
9 |
10 | export const Tab: FC = ({ minWidth, tabIndex, className, badge, ...rest }) => (
11 |
23 | );
24 |
--------------------------------------------------------------------------------
/packages/for-ui/src/tabs/TabContext.tsx:
--------------------------------------------------------------------------------
1 | import TabContext, { TabContextProps } from '@mui/lab/TabContext';
2 |
3 | export { TabContext };
4 | export type { TabContextProps };
5 |
--------------------------------------------------------------------------------
/packages/for-ui/src/tabs/TabList.tsx:
--------------------------------------------------------------------------------
1 | import { FC } from 'react';
2 | import MuiTabList, { TabListProps as MuiTabListProps } from '@mui/lab/TabList';
3 | import { fsx } from '../system/fsx';
4 | import { tabWrapperStyle } from './style';
5 |
6 | export interface TabListProps extends MuiTabListProps {
7 | noBorder?: boolean;
8 | reverse?: boolean;
9 | intention?: 'primary' | 'secondary';
10 | }
11 |
12 | export const TabList: FC = ({ intention = 'primary', className, ...rest }) => (
13 |
14 | );
15 |
--------------------------------------------------------------------------------
/packages/for-ui/src/tabs/TabPanel.tsx:
--------------------------------------------------------------------------------
1 | import { FC } from 'react';
2 | import MuiTabPanel, { TabPanelProps as MuiTabPanelProps } from '@mui/lab/TabPanel';
3 | import { fsx } from '../system/fsx';
4 |
5 | export type TabPanelProps = MuiTabPanelProps;
6 |
7 | export const TabPanel: FC = ({ className, ...rest }) => (
8 |
9 | );
10 |
--------------------------------------------------------------------------------
/packages/for-ui/src/tabs/Tabs.tsx:
--------------------------------------------------------------------------------
1 | import { FC } from 'react';
2 | import MuiTabs, { TabsProps as MuiTabsProps } from '@mui/material/Tabs';
3 | import { fsx } from '../system/fsx';
4 | import { tabWrapperStyle } from './style';
5 |
6 | export interface TabsProps extends MuiTabsProps {
7 | intention?: 'primary' | 'secondary';
8 | }
9 |
10 | export const Tabs: FC = ({ intention = 'primary', className, ...rest }) => (
11 |
12 | );
13 |
--------------------------------------------------------------------------------
/packages/for-ui/src/tabs/index.tsx:
--------------------------------------------------------------------------------
1 | export * from './Tab';
2 | export * from './TabContext';
3 | export * from './TabPanel';
4 | export * from './Tabs';
5 | export * from './TabList';
6 |
--------------------------------------------------------------------------------
/packages/for-ui/src/tabs/style.ts:
--------------------------------------------------------------------------------
1 | import { fsx } from '../system/fsx';
2 |
3 | export const tabWrapperStyle = (intention: 'primary' | 'secondary') =>
4 | fsx([
5 | `border-shade-light-default h-10 min-h-min w-full overflow-visible border-b border-solid [&_.MuiTabs-indicator]:hidden [&_.MuiTabs-scroller]:h-10`,
6 | {
7 | primary: `[&_[aria-selected=true]]:text-primary-dark-default [&_[aria-selected=true]]:border-b-primary-dark-default`,
8 | secondary: `[&_[aria-selected=true]]:text-secondary-dark-default [&_[aria-selected=true]]:border-b-secondary-dark-default`,
9 | }[intention],
10 | ]);
11 |
--------------------------------------------------------------------------------
/packages/for-ui/src/testing/rhf.tsx:
--------------------------------------------------------------------------------
1 | import { FC } from 'react';
2 | import { FieldValues, useForm, UseFormProps, UseFormRegister } from 'react-hook-form';
3 | import { act, fireEvent, screen } from '@testing-library/react';
4 |
5 | export const withRHF = ({
6 | useFormOptions,
7 | onSubmit,
8 | Component,
9 | }: {
10 | useFormOptions?: UseFormProps;
11 | onSubmit: (value: Value) => void;
12 | Component: FC<{ register: UseFormRegister }>;
13 | }): {
14 | Form: FC;
15 | submit: () => Promise;
16 | } => {
17 | return {
18 | Form: (): JSX.Element => {
19 | const { register, handleSubmit } = useForm(useFormOptions);
20 | return (
21 |
24 | );
25 | },
26 | submit: async () => {
27 | await act(async () => {
28 | fireEvent.submit(screen.getByRole('form', { name: 'form' }));
29 | });
30 | },
31 | };
32 | };
33 |
--------------------------------------------------------------------------------
/packages/for-ui/src/text/Text.stories.tsx:
--------------------------------------------------------------------------------
1 | import { Meta } from '@storybook/react/types-6-0';
2 | import { Text } from './Text';
3 |
4 | export default {
5 | title: 'General / Text',
6 | component: Text,
7 | } as Meta;
8 |
9 | export const Base = {
10 | args: {
11 | children: '「For Design System」で叶えるデザインシステムの夢。',
12 | as: 'span',
13 | },
14 | };
15 |
--------------------------------------------------------------------------------
/packages/for-ui/src/text/Text.tsx:
--------------------------------------------------------------------------------
1 | import { ElementType, FC, forwardRef, ReactNode } from 'react';
2 | import { ComponentPropsWithAs, Ref } from '../system/componentType';
3 | import { fsx } from '../system/fsx';
4 |
5 | type WithInherit = T | 'inherit';
6 |
7 | type Size = 'xs' | 's' | 'r' | 'xr' | 'l' | 'xl';
8 |
9 | type Weight = 'regular' | 'bold';
10 |
11 | type Typeface = 'sansSerif' | 'monospaced';
12 |
13 | const style = (size: WithInherit, weight: WithInherit, typeface: WithInherit): string => {
14 | return fsx(
15 | {
16 | inherit: ``,
17 | regular: `font-normal`,
18 | bold: `font-bold`,
19 | }[weight],
20 | {
21 | inherit: ``,
22 | sansSerif: `font-sans`,
23 | monospaced: `font-mono`,
24 | }[typeface],
25 | {
26 | inherit: ``,
27 | xs: `text-xs`,
28 | s: `text-s`,
29 | r: `text-r`,
30 | xr: `text-xr`,
31 | l: `text-l`,
32 | xl: `text-xl`,
33 | }[size],
34 | );
35 | };
36 |
37 | export type TextProps = ComponentPropsWithAs<
38 | {
39 | /**
40 | * テキストのサイズを指定
41 | * @default inherit
42 | */
43 | size?: WithInherit;
44 |
45 | /**
46 | * 表示するテキストのウェイトを指定
47 | * @default inherit
48 | */
49 | weight?: WithInherit;
50 |
51 | /**
52 | * 表示する書体の種別を指定
53 | * @default inherit
54 | */
55 | typeface?: WithInherit;
56 |
57 | className?: string;
58 |
59 | /**
60 | * 文字列またはstrong等のコンポーネント (HTML的にvalidになるようにしてください)
61 | */
62 | children: ReactNode;
63 | },
64 | As
65 | >;
66 |
67 | type TextComponent = (props: TextProps) => ReturnType;
68 |
69 | export const Text: TextComponent = forwardRef(
70 | (
71 | { as, size = 'inherit', weight = 'inherit', typeface = 'inherit', className, children, ...rests }: TextProps,
72 | ref: Ref,
73 | ) => {
74 | const Component = as || 'span';
75 | return (
76 |
77 | {children}
78 |
79 | );
80 | },
81 | );
82 |
--------------------------------------------------------------------------------
/packages/for-ui/src/text/index.tsx:
--------------------------------------------------------------------------------
1 | export * from './Text';
2 |
--------------------------------------------------------------------------------
/packages/for-ui/src/textArea/TextArea.stories.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { useForm } from 'react-hook-form';
3 | import * as yup from 'yup';
4 | import { yupResolver } from '@hookform/resolvers/yup';
5 | import { Meta } from '@storybook/react/types-6-0';
6 | import { Button } from '../button/Button';
7 | import { Text } from '../text';
8 | import { TextArea } from './TextArea';
9 |
10 | export default {
11 | title: 'Form / TextArea',
12 | component: TextArea,
13 | } as Meta;
14 |
15 | export const Playground = {
16 | args: {
17 | label: '',
18 | placeholder: '',
19 | },
20 | };
21 |
22 | const schema = yup.object().shape({
23 | email: yup.string().required(),
24 | password: yup.string().required(),
25 | });
26 |
27 | export const Default = (): JSX.Element => {
28 | const {
29 | register,
30 | handleSubmit,
31 | formState: { errors },
32 | } = useForm({
33 | resolver: yupResolver(schema),
34 | });
35 | const onSubmit = (data: unknown) => console.info(data);
36 |
37 | return (
38 |
3 | 
4 |