@nurihaus/web-design-system 1.2.16 → 1.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/badge/badge-props.d.ts +64 -0
- package/dist/components/badge/badge-type.d.ts +20 -7
- package/dist/components/badge/badge.stories.d.ts +2 -7
- package/dist/components/badge/base-badge.d.ts +1 -1
- package/dist/components/badge/icon-text-option-badge.d.ts +14 -6
- package/dist/components/badge/option-badge.d.ts +11 -5
- package/dist/components/button/base-button.d.ts +4 -4
- package/dist/components/button/button-props.d.ts +14 -0
- package/dist/components/button/button-type.d.ts +6 -12
- package/dist/components/button/button.stories.d.ts +5 -2
- package/dist/components/button/cta-button.d.ts +10 -1
- package/dist/components/check-box/base-check-box.d.ts +7 -7
- package/dist/components/check-box/check-box-props.d.ts +9 -0
- package/dist/components/check-box/check-box-type.d.ts +7 -3
- package/dist/components/check-box/check-box.d.ts +11 -8
- package/dist/components/check-box/check-box.stories.d.ts +3 -6
- package/dist/components/elements/text/text.d.ts +5 -4
- package/dist/components/modal/base-modal.d.ts +12 -0
- package/dist/components/modal/modal-type.d.ts +24 -0
- package/dist/components/modal/modal-with-double-button.d.ts +17 -0
- package/dist/components/modal/modal.stories.d.ts +9 -0
- package/dist/components/table/base-table.d.ts +3 -4
- package/dist/components/table/data-table.d.ts +4 -6
- package/dist/components/table/table-type.d.ts +6 -7
- package/dist/components/table/table.stories.d.ts +2 -2
- package/dist/components/tooltip/base-tooltip.d.ts +11 -0
- package/dist/components/tooltip/tooltip-props.d.ts +9 -0
- package/dist/components/tooltip/tooltip-type.d.ts +18 -0
- package/dist/components/tooltip/tooltip.d.ts +11 -0
- package/dist/components/tooltip/tooltip.stories.d.ts +9 -0
- package/dist/helpers/types/propsDef.d.ts +26 -0
- package/dist/helpers/utils/classNames.d.ts +1 -0
- package/dist/helpers/utils/getMergedProps.d.ts +7 -0
- package/dist/index.js +2740 -1672
- package/package.json +22 -13
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
import { colors } from '../../styles/token/colors';
|
|
2
|
+
export declare const size: readonly ["l", "m", "r", "s", "sm"];
|
|
3
|
+
export declare const iconTextBadgeProps: {
|
|
4
|
+
size: {
|
|
5
|
+
type: "className";
|
|
6
|
+
className: string;
|
|
7
|
+
values: readonly ["l", "m", "r", "s", "sm"];
|
|
8
|
+
default: "l";
|
|
9
|
+
};
|
|
10
|
+
borderColor: {
|
|
11
|
+
type: "css";
|
|
12
|
+
key: "borderColor";
|
|
13
|
+
values: (keyof typeof colors)[];
|
|
14
|
+
default: "grayD4";
|
|
15
|
+
};
|
|
16
|
+
color: {
|
|
17
|
+
type: "css";
|
|
18
|
+
key: "color";
|
|
19
|
+
values: (keyof typeof colors)[];
|
|
20
|
+
default: "black";
|
|
21
|
+
};
|
|
22
|
+
backgroundColor: {
|
|
23
|
+
type: "css";
|
|
24
|
+
key: "backgroundColor";
|
|
25
|
+
values: (keyof typeof colors)[];
|
|
26
|
+
default: "white";
|
|
27
|
+
};
|
|
28
|
+
width: {
|
|
29
|
+
type: "css";
|
|
30
|
+
key: "width";
|
|
31
|
+
default: string;
|
|
32
|
+
};
|
|
33
|
+
};
|
|
34
|
+
export declare const iconTextOptionBadgeProps: {
|
|
35
|
+
size: {
|
|
36
|
+
type: "className";
|
|
37
|
+
className: string;
|
|
38
|
+
values: readonly ["l", "m", "r", "s", "sm"];
|
|
39
|
+
default: "l";
|
|
40
|
+
};
|
|
41
|
+
borderColor: {
|
|
42
|
+
type: "css";
|
|
43
|
+
key: "borderColor";
|
|
44
|
+
values: (keyof typeof colors)[];
|
|
45
|
+
default: "grayD4";
|
|
46
|
+
};
|
|
47
|
+
color: {
|
|
48
|
+
type: "css";
|
|
49
|
+
key: "color";
|
|
50
|
+
values: (keyof typeof colors)[];
|
|
51
|
+
default: "black";
|
|
52
|
+
};
|
|
53
|
+
backgroundColor: {
|
|
54
|
+
type: "css";
|
|
55
|
+
key: "backgroundColor";
|
|
56
|
+
values: (keyof typeof colors)[];
|
|
57
|
+
default: "white";
|
|
58
|
+
};
|
|
59
|
+
width: {
|
|
60
|
+
type: "css";
|
|
61
|
+
key: "width";
|
|
62
|
+
default: string;
|
|
63
|
+
};
|
|
64
|
+
};
|
|
@@ -1,11 +1,24 @@
|
|
|
1
|
-
import { ReactNode } from
|
|
2
|
-
import { colors } from
|
|
3
|
-
export interface
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
import { colors } from '../../styles/token/colors';
|
|
3
|
+
export interface CommonBadgeProps {
|
|
4
|
+
asChild?: boolean;
|
|
5
|
+
children?: ReactNode;
|
|
6
|
+
className?: string;
|
|
7
|
+
}
|
|
8
|
+
export interface BaseBadgeProps extends React.HTMLAttributes<HTMLDivElement>, CommonBadgeProps {
|
|
9
|
+
}
|
|
10
|
+
export interface IconTextBadgeProps extends CommonBadgeProps {
|
|
4
11
|
borderColor?: keyof typeof colors;
|
|
5
12
|
textColor?: keyof typeof colors;
|
|
6
13
|
backgroundColor?: keyof typeof colors;
|
|
7
|
-
size?:
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
14
|
+
size?: 'l' | 'm' | 'r' | 's' | 'sm';
|
|
15
|
+
icon: ReactNode;
|
|
16
|
+
text: ReactNode;
|
|
17
|
+
}
|
|
18
|
+
export interface OptionBadgeProps extends CommonBadgeProps {
|
|
19
|
+
borderColor?: keyof typeof colors;
|
|
20
|
+
textColor?: keyof typeof colors;
|
|
21
|
+
backgroundColor?: keyof typeof colors;
|
|
22
|
+
size?: 'l' | 'm' | 'r' | 's' | 'sm';
|
|
23
|
+
option: ReactNode;
|
|
11
24
|
}
|
|
@@ -1,12 +1,7 @@
|
|
|
1
|
-
import { StoryObj } from
|
|
1
|
+
import { StoryObj } from '@storybook/react/*';
|
|
2
2
|
declare const meta: {
|
|
3
3
|
title: string;
|
|
4
|
-
component: (
|
|
5
|
-
option: import("react").ReactNode;
|
|
6
|
-
tooltipText?: string | import("react").ReactNode;
|
|
7
|
-
tooltipStyle?: React.CSSProperties;
|
|
8
|
-
tooltipPosition?: "bottom" | "right";
|
|
9
|
-
}) => import("react/jsx-runtime").JSX.Element;
|
|
4
|
+
component: import("react").ForwardRefExoticComponent<import("./icon-text-option-badge").IconTextOptionBadgeProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
10
5
|
};
|
|
11
6
|
export default meta;
|
|
12
7
|
type Story = StoryObj<typeof meta>;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { BaseBadgeProps } from
|
|
1
|
+
import { BaseBadgeProps } from './badge-type';
|
|
2
2
|
export declare const BaseBadge: import("react").ForwardRefExoticComponent<BaseBadgeProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
@@ -1,10 +1,18 @@
|
|
|
1
|
-
import
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
import { colors } from '../../styles/token/colors';
|
|
3
|
+
import { size } from './badge-props';
|
|
4
|
+
import { CommonBadgeProps } from './badge-type';
|
|
5
|
+
import './badge-style.css';
|
|
6
|
+
export interface IconTextOptionBadgeProps extends Pick<CommonBadgeProps, 'className'> {
|
|
7
|
+
borderColor?: keyof typeof colors;
|
|
8
|
+
color?: keyof typeof colors;
|
|
9
|
+
backgroundColor?: keyof typeof colors;
|
|
10
|
+
width?: number | string;
|
|
11
|
+
size?: (typeof size)[number];
|
|
5
12
|
icon: ReactNode;
|
|
6
13
|
text: ReactNode;
|
|
7
14
|
option: ReactNode;
|
|
8
|
-
|
|
9
|
-
}
|
|
15
|
+
style?: React.CSSProperties;
|
|
16
|
+
}
|
|
17
|
+
declare const IconTextOptionBadge: import("react").ForwardRefExoticComponent<IconTextOptionBadgeProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
10
18
|
export default IconTextOptionBadge;
|
|
@@ -1,10 +1,16 @@
|
|
|
1
|
-
import * as React from
|
|
2
|
-
import { ReactNode } from
|
|
3
|
-
import {
|
|
4
|
-
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { ReactNode } from 'react';
|
|
3
|
+
import { TooltipContentProps } from '../tooltip/tooltip-type';
|
|
4
|
+
import { BaseBadgeProps, CommonBadgeProps } from './badge-type';
|
|
5
|
+
export interface OptionBadgeProps extends Pick<CommonBadgeProps, 'className'> {
|
|
6
|
+
option: ReactNode;
|
|
7
|
+
tooltipText?: string | ReactNode;
|
|
8
|
+
tooltipPosition?: TooltipContentProps['direction'];
|
|
9
|
+
}
|
|
10
|
+
declare const OptionBadge: React.ForwardRefExoticComponent<Omit<BaseBadgeProps, "children" | "asChild"> & {
|
|
5
11
|
option: ReactNode;
|
|
6
12
|
tooltipText?: string | ReactNode;
|
|
7
13
|
tooltipStyle?: React.CSSProperties;
|
|
8
14
|
tooltipPosition?: "bottom" | "right";
|
|
9
|
-
}
|
|
15
|
+
} & React.RefAttributes<HTMLDivElement>>;
|
|
10
16
|
export default OptionBadge;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import
|
|
1
|
+
import { BaseButtonProps } from './button-type';
|
|
2
|
+
import '../../styles/token/color.css';
|
|
3
|
+
import '../../styles/token/font.css';
|
|
4
|
+
import './button-style.css';
|
|
5
5
|
declare const BaseButton: import("react").ForwardRefExoticComponent<Omit<BaseButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
|
|
6
6
|
export default BaseButton;
|
|
@@ -1,15 +1,9 @@
|
|
|
1
|
-
import { ComponentPropsWithRef, ReactNode } from
|
|
2
|
-
export interface
|
|
1
|
+
import { ComponentPropsWithRef, ReactNode } from 'react';
|
|
2
|
+
export interface CommonButtonProps {
|
|
3
|
+
loading?: boolean;
|
|
4
|
+
}
|
|
5
|
+
export interface BaseButtonProps extends ComponentPropsWithRef<'button'>, CommonButtonProps {
|
|
3
6
|
children?: React.ReactNode;
|
|
4
7
|
asChild?: boolean;
|
|
5
|
-
|
|
6
|
-
}
|
|
7
|
-
export interface CTAButtonProps extends ComponentPropsWithRef<"button"> {
|
|
8
|
-
variant?: "primary" | "secondary" | "ghost" | "white" | "warning";
|
|
9
|
-
size?: "xl" | "l" | "m" | "r" | "s";
|
|
10
|
-
disabled?: boolean;
|
|
11
|
-
loading?: boolean;
|
|
12
|
-
text: string | ReactNode;
|
|
13
|
-
leftIcon?: ReactNode;
|
|
14
|
-
rightIcon?: ReactNode;
|
|
8
|
+
loadingComponent?: ReactNode;
|
|
15
9
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { StoryObj } from
|
|
2
|
-
import { CTAButtonProps } from
|
|
1
|
+
import { StoryObj } from '@storybook/react/*';
|
|
2
|
+
import { CTAButtonProps } from './cta-button';
|
|
3
3
|
declare const meta: {
|
|
4
4
|
title: string;
|
|
5
5
|
component: (props: CTAButtonProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -8,3 +8,6 @@ export default meta;
|
|
|
8
8
|
type Story = StoryObj<typeof meta>;
|
|
9
9
|
export declare const Default: Story;
|
|
10
10
|
export declare const Primary: StoryObj<CTAButtonProps>;
|
|
11
|
+
export declare const Secondary: StoryObj<CTAButtonProps>;
|
|
12
|
+
export declare const Ghost: StoryObj<CTAButtonProps>;
|
|
13
|
+
export declare const White: StoryObj<CTAButtonProps>;
|
|
@@ -1,3 +1,12 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { ComponentPropsWithRef } from 'react';
|
|
2
|
+
import { ReactNode } from 'react';
|
|
3
|
+
import { CommonButtonProps } from './button-type';
|
|
4
|
+
export interface CTAButtonProps extends ComponentPropsWithRef<'button'>, CommonButtonProps {
|
|
5
|
+
variant?: 'primary' | 'secondary' | 'ghost' | 'white' | 'warning';
|
|
6
|
+
size?: 'xl' | 'l' | 'm' | 'r' | 's';
|
|
7
|
+
text: string | ReactNode;
|
|
8
|
+
leftIcon?: ReactNode;
|
|
9
|
+
rightIcon?: ReactNode;
|
|
10
|
+
}
|
|
2
11
|
declare const CTAButton: (props: CTAButtonProps) => import("react/jsx-runtime").JSX.Element;
|
|
3
12
|
export default CTAButton;
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import { PropsWithChildren } from
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
import
|
|
1
|
+
import { PropsWithChildren } from 'react';
|
|
2
|
+
import { CheckBoxIndicatorProps, CheckBoxLabelProps, CheckBoxRootProps } from './check-box-type';
|
|
3
|
+
import '../../styles/token/color.css';
|
|
4
|
+
import '../../styles/token/font.css';
|
|
5
|
+
import './check-box-style.css';
|
|
6
6
|
declare const CheckBoxRoot: {
|
|
7
|
-
(props: PropsWithChildren<
|
|
7
|
+
(props: PropsWithChildren<CheckBoxRootProps>): import("react/jsx-runtime").JSX.Element;
|
|
8
8
|
Label: (props: PropsWithChildren<CheckBoxLabelProps>) => import("react/jsx-runtime").JSX.Element;
|
|
9
|
-
|
|
9
|
+
Indicator: (props: PropsWithChildren<CheckBoxIndicatorProps>) => import("react/jsx-runtime").JSX.Element;
|
|
10
10
|
};
|
|
11
11
|
export default CheckBoxRoot;
|
|
@@ -1,13 +1,17 @@
|
|
|
1
|
-
|
|
2
|
-
export interface CheckBoxProps {
|
|
1
|
+
export interface CheckBoxRootProps {
|
|
3
2
|
checked?: boolean;
|
|
4
3
|
onChange?: (checked: boolean) => void;
|
|
5
4
|
id: string;
|
|
6
5
|
disabled?: boolean;
|
|
6
|
+
onClick?: (checked: boolean) => void;
|
|
7
|
+
className?: string;
|
|
7
8
|
}
|
|
8
|
-
export interface
|
|
9
|
+
export interface CheckBoxIndicatorProps {
|
|
9
10
|
asChild?: boolean;
|
|
11
|
+
className?: string;
|
|
10
12
|
}
|
|
11
13
|
export interface CheckBoxLabelProps {
|
|
12
14
|
asChild?: boolean;
|
|
15
|
+
preventChangeOnClick?: boolean;
|
|
16
|
+
className?: string;
|
|
13
17
|
}
|
|
@@ -1,10 +1,13 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
import { CheckBoxRootProps } from './check-box-type';
|
|
3
|
+
import '../../styles/token/color.css';
|
|
4
|
+
import '../../styles/token/font.css';
|
|
5
|
+
import './check-box-style.css';
|
|
6
|
+
export interface CheckBoxProps extends CheckBoxRootProps {
|
|
7
7
|
label: string | ReactNode;
|
|
8
|
-
|
|
9
|
-
|
|
8
|
+
size?: number;
|
|
9
|
+
className?: string;
|
|
10
|
+
onClick?: (checked: boolean) => void;
|
|
11
|
+
}
|
|
12
|
+
declare const CheckBox: (props: CheckBoxProps) => import("react/jsx-runtime").JSX.Element;
|
|
10
13
|
export default CheckBox;
|
|
@@ -1,11 +1,8 @@
|
|
|
1
|
-
import { StoryObj } from
|
|
2
|
-
import CheckBox from
|
|
1
|
+
import { StoryObj } from '@storybook/react/*';
|
|
2
|
+
import CheckBox from './check-box';
|
|
3
3
|
declare const meta: {
|
|
4
4
|
title: string;
|
|
5
|
-
component: (props: import("./check-box
|
|
6
|
-
label: string | import("react").ReactNode;
|
|
7
|
-
iconSize?: number;
|
|
8
|
-
}) => import("react/jsx-runtime").JSX.Element;
|
|
5
|
+
component: (props: import("./check-box").CheckBoxProps) => import("react/jsx-runtime").JSX.Element;
|
|
9
6
|
};
|
|
10
7
|
export default meta;
|
|
11
8
|
type Story = StoryObj<typeof CheckBox>;
|
|
@@ -1,6 +1,7 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import
|
|
1
|
+
import { TextProps } from './text-type';
|
|
2
|
+
import '../../../styles/reset.css';
|
|
3
|
+
import '../../../styles/token/color.css';
|
|
4
|
+
import '../../../styles/token/font.css';
|
|
5
|
+
import './text-style.css';
|
|
5
6
|
declare const Text: (props: TextProps) => import("react/jsx-runtime").JSX.Element;
|
|
6
7
|
export default Text;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { PropsWithChildren } from 'react';
|
|
2
|
+
import { ModalCloseProps, ModalContentProps, ModalRootProps, ModalSubTitleProps, ModalTitleProps, ModalTriggerProps } from './modal-type';
|
|
3
|
+
import './modal-style.css';
|
|
4
|
+
declare const ModalRoot: {
|
|
5
|
+
(props: PropsWithChildren<ModalRootProps>): import("react/jsx-runtime").JSX.Element;
|
|
6
|
+
Content: (props: PropsWithChildren<ModalContentProps>) => import("react/jsx-runtime").JSX.Element;
|
|
7
|
+
Trigger: (props: PropsWithChildren<ModalTriggerProps>) => import("react/jsx-runtime").JSX.Element;
|
|
8
|
+
Title: (props: PropsWithChildren<ModalTitleProps>) => import("react/jsx-runtime").JSX.Element;
|
|
9
|
+
SubTitle: (props: PropsWithChildren<ModalSubTitleProps>) => import("react/jsx-runtime").JSX.Element;
|
|
10
|
+
Close: (props: PropsWithChildren<ModalCloseProps>) => import("react/jsx-runtime").JSX.Element;
|
|
11
|
+
};
|
|
12
|
+
export default ModalRoot;
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
export interface ModalRootProps {
|
|
2
|
+
open?: boolean;
|
|
3
|
+
onOpenChange?: (open: boolean) => void;
|
|
4
|
+
}
|
|
5
|
+
export interface ModalContentProps {
|
|
6
|
+
asChild?: boolean;
|
|
7
|
+
className?: string;
|
|
8
|
+
}
|
|
9
|
+
export interface ModalTriggerProps {
|
|
10
|
+
asChild?: boolean;
|
|
11
|
+
className?: string;
|
|
12
|
+
}
|
|
13
|
+
export interface ModalTitleProps {
|
|
14
|
+
asChild?: boolean;
|
|
15
|
+
className?: string;
|
|
16
|
+
}
|
|
17
|
+
export interface ModalSubTitleProps {
|
|
18
|
+
asChild?: boolean;
|
|
19
|
+
className?: string;
|
|
20
|
+
}
|
|
21
|
+
export interface ModalCloseProps {
|
|
22
|
+
asChild?: boolean;
|
|
23
|
+
className?: string;
|
|
24
|
+
}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
import { CTAButtonProps } from '../button/cta-button';
|
|
3
|
+
export interface ModalWithDoubleButtonProps {
|
|
4
|
+
title?: string;
|
|
5
|
+
subTitle?: string | ReactNode;
|
|
6
|
+
titleIcon?: ReactNode;
|
|
7
|
+
content?: ReactNode;
|
|
8
|
+
showCloseIcon?: boolean;
|
|
9
|
+
showTitleLine?: boolean;
|
|
10
|
+
left: CTAButtonProps;
|
|
11
|
+
right: CTAButtonProps;
|
|
12
|
+
}
|
|
13
|
+
declare const ModalWithDoubleButton: {
|
|
14
|
+
Row: (props: ModalWithDoubleButtonProps) => import("react/jsx-runtime").JSX.Element;
|
|
15
|
+
Column: (props: ModalWithDoubleButtonProps) => import("react/jsx-runtime").JSX.Element;
|
|
16
|
+
};
|
|
17
|
+
export default ModalWithDoubleButton;
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { StoryObj } from '@storybook/react/*';
|
|
2
|
+
import ModalWithDoubleButton from './modal-with-double-button';
|
|
3
|
+
declare const meta: {
|
|
4
|
+
title: string;
|
|
5
|
+
component: (props: import("./modal-with-double-button").ModalWithDoubleButtonProps) => import("react/jsx-runtime").JSX.Element;
|
|
6
|
+
};
|
|
7
|
+
export default meta;
|
|
8
|
+
type Story = StoryObj<typeof ModalWithDoubleButton.Column>;
|
|
9
|
+
export declare const Default: Story;
|
|
@@ -1,8 +1,7 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import { TableBodyProps, TableCellProps, TableHeaderProps, TableRowProps } from "./table-type";
|
|
1
|
+
import { TableBodyProps, TableCellProps, TableHeaderProps, TableRootProps, TableRowProps } from './table-type';
|
|
2
|
+
import './table-style.css';
|
|
4
3
|
declare const TableRoot: {
|
|
5
|
-
(props:
|
|
4
|
+
(props: TableRootProps): import("react/jsx-runtime").JSX.Element;
|
|
6
5
|
Header: (props: TableHeaderProps) => import("react/jsx-runtime").JSX.Element;
|
|
7
6
|
Body: (props: TableBodyProps) => import("react/jsx-runtime").JSX.Element;
|
|
8
7
|
Row: (props: TableRowProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,19 +1,17 @@
|
|
|
1
|
-
import { ReactNode } from
|
|
2
|
-
import
|
|
3
|
-
import { TableHeaderProps } from "./table-type";
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
import './table-style.css';
|
|
4
3
|
export interface RowItem {
|
|
5
4
|
id: string;
|
|
6
5
|
value: ReactNode;
|
|
7
|
-
onClickRow?: (id: RowItem[
|
|
6
|
+
onClickRow?: (id: RowItem['id']) => void;
|
|
8
7
|
}
|
|
9
8
|
type ColumnsType<T extends readonly RowItem[]> = Array<{
|
|
10
|
-
[K in T[number][
|
|
9
|
+
[K in T[number]['id']]: {
|
|
11
10
|
value: ReactNode;
|
|
12
11
|
onClickCell?: () => void;
|
|
13
12
|
};
|
|
14
13
|
}>;
|
|
15
14
|
export interface DataTableProps<T extends readonly RowItem[]> {
|
|
16
|
-
header: TableHeaderProps;
|
|
17
15
|
rows: T;
|
|
18
16
|
columns: ColumnsType<T>;
|
|
19
17
|
fixedRowsIndex?: number;
|
|
@@ -1,15 +1,14 @@
|
|
|
1
|
-
import { ComponentPropsWithRef } from
|
|
1
|
+
import { ComponentPropsWithRef } from 'react';
|
|
2
2
|
export interface TableProps {
|
|
3
3
|
children: React.ReactNode;
|
|
4
4
|
}
|
|
5
|
-
export interface TableRootProps extends Omit<TableProps,
|
|
5
|
+
export interface TableRootProps extends Omit<TableProps, 'children'>, ComponentPropsWithRef<'table'> {
|
|
6
6
|
}
|
|
7
|
-
export interface TableHeaderProps extends Omit<TableProps,
|
|
8
|
-
justify?: "center" | "start" | "end";
|
|
7
|
+
export interface TableHeaderProps extends Omit<TableProps, 'children'>, ComponentPropsWithRef<'thead'> {
|
|
9
8
|
}
|
|
10
|
-
export interface TableRowProps extends Omit<TableProps,
|
|
9
|
+
export interface TableRowProps extends Omit<TableProps, 'children'>, ComponentPropsWithRef<'tr'> {
|
|
11
10
|
}
|
|
12
|
-
export interface TableBodyProps extends Omit<TableProps,
|
|
11
|
+
export interface TableBodyProps extends Omit<TableProps, 'children'>, ComponentPropsWithRef<'tbody'> {
|
|
13
12
|
}
|
|
14
|
-
export interface TableCellProps extends Omit<TableProps,
|
|
13
|
+
export interface TableCellProps extends Omit<TableProps, 'children'>, ComponentPropsWithRef<'td'> {
|
|
15
14
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import type { StoryObj } from
|
|
2
|
-
import { DataTableProps } from
|
|
1
|
+
import type { StoryObj } from '@storybook/react';
|
|
2
|
+
import { DataTableProps } from './data-table';
|
|
3
3
|
declare const meta: {
|
|
4
4
|
title: string;
|
|
5
5
|
component: <T extends readonly import("./data-table").RowItem[]>(props: DataTableProps<T>) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { PropsWithChildren } from 'react';
|
|
2
|
+
import { TooltipContentProps, TooltipRootProps, TooltipTriggerProps } from './tooltip-type';
|
|
3
|
+
import '../../styles/token/color.css';
|
|
4
|
+
import '../../styles/token/font.css';
|
|
5
|
+
import './tooltip-style.css';
|
|
6
|
+
declare const TooltipRoot: {
|
|
7
|
+
(props: PropsWithChildren<TooltipRootProps>): import("react/jsx-runtime").JSX.Element;
|
|
8
|
+
Trigger: (props: PropsWithChildren<TooltipTriggerProps>) => import("react/jsx-runtime").JSX.Element;
|
|
9
|
+
Content: (props: PropsWithChildren<TooltipContentProps>) => import("react/jsx-runtime").JSX.Element;
|
|
10
|
+
};
|
|
11
|
+
export default TooltipRoot;
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
export interface CommonTooltipProps {
|
|
2
|
+
children: React.ReactNode;
|
|
3
|
+
className?: string;
|
|
4
|
+
}
|
|
5
|
+
export interface TooltipRootProps {
|
|
6
|
+
defaultOpen?: boolean;
|
|
7
|
+
open?: boolean;
|
|
8
|
+
onOpenChange?: (open: boolean) => void;
|
|
9
|
+
delayDuration?: number;
|
|
10
|
+
disableHoverableContent?: boolean;
|
|
11
|
+
}
|
|
12
|
+
export interface TooltipTriggerProps extends CommonTooltipProps {
|
|
13
|
+
asChild?: boolean;
|
|
14
|
+
}
|
|
15
|
+
export interface TooltipContentProps extends CommonTooltipProps {
|
|
16
|
+
asChild?: boolean;
|
|
17
|
+
direction?: 'top' | 'bottom' | 'left' | 'right';
|
|
18
|
+
}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { TooltipRootProps } from './tooltip-type';
|
|
2
|
+
import '../../styles/token/color.css';
|
|
3
|
+
import '../../styles/token/font.css';
|
|
4
|
+
import './tooltip-style.css';
|
|
5
|
+
export interface TooltipProps extends TooltipRootProps {
|
|
6
|
+
trigger: React.ReactNode;
|
|
7
|
+
content: React.ReactNode;
|
|
8
|
+
direction?: 'top' | 'bottom' | 'left' | 'right';
|
|
9
|
+
}
|
|
10
|
+
declare const Tooltip: (props: TooltipProps) => import("react/jsx-runtime").JSX.Element;
|
|
11
|
+
export default Tooltip;
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { StoryObj } from '@storybook/react/*';
|
|
2
|
+
import Tooltip, { TooltipProps } from './tooltip';
|
|
3
|
+
declare const meta: {
|
|
4
|
+
title: string;
|
|
5
|
+
component: (props: TooltipProps) => import("react/jsx-runtime").JSX.Element;
|
|
6
|
+
};
|
|
7
|
+
export default meta;
|
|
8
|
+
type Story = StoryObj<typeof Tooltip>;
|
|
9
|
+
export declare const Default: Story;
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import { CSSProperties } from 'react';
|
|
2
|
+
export type ClassNamePropsType<T extends readonly any[] = readonly any[]> = {
|
|
3
|
+
type: 'className';
|
|
4
|
+
className: string;
|
|
5
|
+
values: T;
|
|
6
|
+
default: T[number];
|
|
7
|
+
};
|
|
8
|
+
export type CSSPropsTypeWithValues<T extends readonly any[] = readonly any[]> = {
|
|
9
|
+
type: 'css';
|
|
10
|
+
key: keyof CSSProperties;
|
|
11
|
+
values: T;
|
|
12
|
+
default: T[number];
|
|
13
|
+
};
|
|
14
|
+
export type CSSPropsTypeWithoutValues<T extends string | number> = {
|
|
15
|
+
type: 'css';
|
|
16
|
+
key: keyof CSSProperties;
|
|
17
|
+
default: T;
|
|
18
|
+
};
|
|
19
|
+
export type StylePropsType<T extends readonly any[] = readonly any[]> = {
|
|
20
|
+
type: 'style';
|
|
21
|
+
style: string;
|
|
22
|
+
key: (keyof CSSProperties)[];
|
|
23
|
+
values: T;
|
|
24
|
+
default: T[number];
|
|
25
|
+
};
|
|
26
|
+
export type PropDef<T extends readonly any[] = readonly any[]> = ClassNamePropsType<T> | CSSPropsTypeWithValues<T> | CSSPropsTypeWithoutValues<string | number> | StylePropsType<T>;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export function classNames(...args: any[]): string;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { CSSProperties } from 'react';
|
|
2
|
+
import { PropDef } from '../types/propsDef';
|
|
3
|
+
declare function getMergedProps<P extends Record<string, any>, T extends Record<string, PropDef>>(props: P, propsWithTypes: T): Omit<P, keyof T> & {
|
|
4
|
+
className?: string;
|
|
5
|
+
style?: CSSProperties;
|
|
6
|
+
};
|
|
7
|
+
export { getMergedProps };
|