@team-frieeren/components 1.0.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/Accordian/Accordion.d.ts +6 -0
- package/dist/components/Accordian/Accordion.stories.d.ts +34 -0
- package/dist/components/Accordian/Accordion.type.d.ts +7 -0
- package/dist/components/BottomSheet/BottomSheet.d.ts +2 -0
- package/dist/components/BottomSheet/BottomSheet.stories.d.ts +10 -0
- package/dist/components/BottomSheet/BottomSheet.type.d.ts +26 -0
- package/dist/components/BottomSheet/index.d.ts +2 -0
- package/dist/components/Button/Button.d.ts +16 -0
- package/dist/components/Button/Button.stories.d.ts +44 -0
- package/dist/components/Button/Button.type.d.ts +17 -0
- package/dist/components/Button/index.d.ts +2 -0
- package/dist/components/Checkbox/Checkbox.d.ts +6 -0
- package/dist/components/Checkbox/Checkbox.stories.d.ts +15 -0
- package/dist/components/Checkbox/index.d.ts +2 -0
- package/dist/components/Dialog/Dialog.d.ts +2 -0
- package/dist/components/Dialog/Dialog.stories.d.ts +10 -0
- package/dist/components/Dialog/Dialog.type.d.ts +22 -0
- package/dist/components/Funnel/Funnel.d.ts +3 -0
- package/dist/components/Funnel/Funnel.stories.d.ts +31 -0
- package/dist/components/Funnel/Funnel.type.d.ts +13 -0
- package/dist/components/Funnel/index.d.ts +1 -0
- package/dist/components/Funnel/useFunnel.d.ts +9 -0
- package/dist/components/Funnel/useQueryParam.d.ts +6 -0
- package/dist/components/Input/Input.d.ts +3 -0
- package/dist/components/Input/Input.stories.d.ts +6 -0
- package/dist/components/Input/index.d.ts +2 -0
- package/dist/components/Input/input.type.d.ts +10 -0
- package/dist/components/Popover/Popover.d.ts +5 -0
- package/dist/components/Popover/Popover.stories.d.ts +36 -0
- package/dist/components/Popover/Popover.type.d.ts +7 -0
- package/dist/components/Popup/Popup.d.ts +4 -0
- package/dist/components/Popup/Popup.stories.d.ts +21 -0
- package/dist/components/Popup/Popup.type.d.ts +21 -0
- package/dist/components/Popup/index.d.ts +2 -0
- package/dist/components/RadioGroup/RadioGroup.d.ts +8 -0
- package/dist/components/RadioGroup/RadioGroup.stories.d.ts +16 -0
- package/dist/components/RadioGroup/index.d.ts +2 -0
- package/dist/components/Select/Select.d.ts +15 -0
- package/dist/components/Select/Select.stories.d.ts +13 -0
- package/dist/components/Select/Select.type.d.ts +4 -0
- package/dist/components/Select/index.d.ts +2 -0
- package/dist/components/Tabs/Tabs.d.ts +3 -0
- package/dist/components/Tabs/Tabs.stories.d.ts +38 -0
- package/dist/components/Tabs/Tabs.type.d.ts +15 -0
- package/dist/components/Tabs/TabsBase.d.ts +7 -0
- package/dist/components/Tabs/index.d.ts +1 -0
- package/dist/components/Tabs/useTabsIndicator.d.ts +10 -0
- package/dist/components/Text/Text.d.ts +2 -0
- package/dist/components/Text/Text.stories.d.ts +41 -0
- package/dist/components/Text/Text.type.d.ts +22 -0
- package/dist/components/Text/index.d.ts +2 -0
- package/dist/components/Toast/Toast.d.ts +5 -0
- package/dist/components/Toast/Toast.stories.d.ts +6 -0
- package/dist/components/Toast/Toast.type.d.ts +31 -0
- package/dist/components/Toast/ToastProvider.d.ts +3 -0
- package/dist/components/Toast/index.d.ts +2 -0
- package/dist/components/Toast/useToast.d.ts +2 -0
- package/dist/components/Toast/useToastStack.d.ts +12 -0
- package/dist/components/Toggle/Toggle.d.ts +3 -0
- package/dist/components/Toggle/Toggle.stories.d.ts +22 -0
- package/dist/components/Toggle/Toggle.type.d.ts +6 -0
- package/dist/components/Toggle/index.d.ts +1 -0
- package/dist/components/layout/Box/Box.d.ts +2 -0
- package/dist/components/layout/Box/Box.stories.d.ts +13 -0
- package/dist/components/layout/Box/Box.type.d.ts +10 -0
- package/dist/components/layout/Box/index.d.ts +2 -0
- package/dist/components/layout/Container/Container.d.ts +2 -0
- package/dist/components/layout/Container/Container.stories.d.ts +13 -0
- package/dist/components/layout/Container/Container.type.d.ts +4 -0
- package/dist/components/layout/Container/index.d.ts +2 -0
- package/dist/components/layout/Flex/Flex.d.ts +2 -0
- package/dist/components/layout/Flex/Flex.stories.d.ts +13 -0
- package/dist/components/layout/Flex/Flex.type.d.ts +10 -0
- package/dist/components/layout/Flex/index.d.ts +2 -0
- package/dist/components/layout/Grid/Grid.d.ts +2 -0
- package/dist/components/layout/Grid/Grid.stories.d.ts +13 -0
- package/dist/components/layout/Grid/Grid.type.d.ts +10 -0
- package/dist/components/layout/Grid/index.d.ts +2 -0
- package/dist/hooks/useIsMounted.d.ts +1 -0
- package/dist/hooks/useOverlay/OverlayController.d.ts +10 -0
- package/dist/hooks/useOverlay/OverlayProvider.d.ts +6 -0
- package/dist/hooks/useOverlay/index.d.ts +2 -0
- package/dist/hooks/useOverlay/types.d.ts +5 -0
- package/dist/hooks/useOverlay/useOverlay.d.ts +10 -0
- package/dist/hooks/useRouter.d.ts +3 -0
- package/dist/index.css +1896 -0
- package/dist/index.d.ts +21 -0
- package/dist/index.js +1378 -0
- package/dist/router/router.type.d.ts +26 -0
- package/dist/router/windowRouter.d.ts +12 -0
- package/dist/shared/components/SwitchCase.d.ts +7 -0
- package/dist/shared/icon/index.d.ts +1 -0
- package/dist/shared/icon/isIcon.d.ts +3 -0
- package/dist/shared/storage/LocalStorage.d.ts +14 -0
- package/dist/shared/storage/MemoryStorage.d.ts +11 -0
- package/dist/shared/storage/SessionStorage.d.ts +14 -0
- package/dist/shared/storage/index.d.ts +2 -0
- package/dist/shared/storage/storage.type.d.ts +9 -0
- package/dist/utils/generateRandomKey.d.ts +1 -0
- package/dist/utils/getSpacingStyle.d.ts +6 -0
- package/package.json +91 -0
@@ -0,0 +1,6 @@
|
|
1
|
+
import * as AccordinaProps from "./Accordion.type";
|
2
|
+
declare const Root: ({ ...props }: AccordinaProps.RootProps) => import("react/jsx-runtime").JSX.Element;
|
3
|
+
declare const Item: ({ children, ...props }: AccordinaProps.ItemProps) => import("react/jsx-runtime").JSX.Element;
|
4
|
+
declare const Trigger: ({ children, ...props }: AccordinaProps.TriggerProps) => import("react/jsx-runtime").JSX.Element;
|
5
|
+
declare const Content: ({ children, ...props }: AccordinaProps.ContentProps) => import("react/jsx-runtime").JSX.Element;
|
6
|
+
export { Root, Item, Trigger, Content };
|
@@ -0,0 +1,34 @@
|
|
1
|
+
import type { StoryObj } from "@storybook/react";
|
2
|
+
declare const meta: {
|
3
|
+
title: string;
|
4
|
+
component: ({ ...props }: import("./Accordion.type").RootProps) => import("react/jsx-runtime").JSX.Element;
|
5
|
+
parameters: {
|
6
|
+
layout: string;
|
7
|
+
};
|
8
|
+
tags: string[];
|
9
|
+
argTypes: {
|
10
|
+
type: {
|
11
|
+
control: "select";
|
12
|
+
options: string[];
|
13
|
+
description: string;
|
14
|
+
};
|
15
|
+
collapsible: {
|
16
|
+
control: "boolean";
|
17
|
+
description: string;
|
18
|
+
};
|
19
|
+
disabled: {
|
20
|
+
control: "boolean";
|
21
|
+
description: string;
|
22
|
+
};
|
23
|
+
defaultValue: {
|
24
|
+
control: "select";
|
25
|
+
options: string[];
|
26
|
+
description: string;
|
27
|
+
};
|
28
|
+
};
|
29
|
+
};
|
30
|
+
export default meta;
|
31
|
+
type Story = StoryObj<typeof meta>;
|
32
|
+
export declare const Default: Story;
|
33
|
+
export declare const Multiple: Story;
|
34
|
+
export declare const WithCallBack: Story;
|
@@ -0,0 +1,7 @@
|
|
1
|
+
import * as AccordionPropsBase from "@radix-ui/react-accordion";
|
2
|
+
import { ComponentProps } from "react";
|
3
|
+
type RootProps = ComponentProps<typeof AccordionPropsBase.Accordion>;
|
4
|
+
type ItemProps = AccordionPropsBase.AccordionItemProps;
|
5
|
+
type TriggerProps = AccordionPropsBase.AccordionTriggerProps;
|
6
|
+
type ContentProps = AccordionPropsBase.AccordionContentProps;
|
7
|
+
export { RootProps, ItemProps, TriggerProps, ContentProps };
|
@@ -0,0 +1,10 @@
|
|
1
|
+
import type { Meta, StoryObj } from "@storybook/react";
|
2
|
+
import { BottomSheet } from "./BottomSheet";
|
3
|
+
/**
|
4
|
+
* **vaul docs**
|
5
|
+
* https://vaul.emilkowal.ski/api
|
6
|
+
*/
|
7
|
+
declare const meta: Meta<typeof BottomSheet>;
|
8
|
+
export default meta;
|
9
|
+
type Story = StoryObj<typeof meta>;
|
10
|
+
export declare const BottomSheets: Story;
|
@@ -0,0 +1,26 @@
|
|
1
|
+
export declare const BottomSheetRadius: {
|
2
|
+
readonly NONE: "none";
|
3
|
+
readonly SMALL: "small";
|
4
|
+
readonly MEDIUM: "medium";
|
5
|
+
readonly LARGE: "large";
|
6
|
+
};
|
7
|
+
export declare const BottomSheetTheme: {
|
8
|
+
readonly light: "light";
|
9
|
+
readonly dark: "dark";
|
10
|
+
};
|
11
|
+
type ValueOf<T> = T[keyof T];
|
12
|
+
export type BottomSheetRadius = ValueOf<typeof BottomSheetRadius>;
|
13
|
+
export type BottomSheetTheme = ValueOf<typeof BottomSheetTheme>;
|
14
|
+
export interface BottomSheetProps {
|
15
|
+
open?: boolean;
|
16
|
+
onClose?: () => void;
|
17
|
+
locked?: boolean;
|
18
|
+
showHandle?: boolean;
|
19
|
+
handleOnly?: boolean;
|
20
|
+
zIndex?: number;
|
21
|
+
radius?: BottomSheetRadius;
|
22
|
+
theme?: BottomSheetTheme;
|
23
|
+
className?: string;
|
24
|
+
children?: React.ReactNode;
|
25
|
+
}
|
26
|
+
export {};
|
@@ -0,0 +1,16 @@
|
|
1
|
+
import React from "react";
|
2
|
+
import { ButtonDisplay, ButtonSizes, ButtonTypes } from "./Button.type";
|
3
|
+
export declare const Button: React.ForwardRefExoticComponent<{
|
4
|
+
type?: ButtonTypes;
|
5
|
+
size?: ButtonSizes;
|
6
|
+
loading?: boolean;
|
7
|
+
disabled?: boolean;
|
8
|
+
className?: string;
|
9
|
+
onClick?: React.MouseEventHandler<HTMLElement>;
|
10
|
+
display?: ButtonDisplay;
|
11
|
+
color?: string;
|
12
|
+
backgroundColor?: string;
|
13
|
+
borderColor?: string;
|
14
|
+
} & {
|
15
|
+
children?: React.ReactNode | undefined;
|
16
|
+
} & React.RefAttributes<HTMLButtonElement>>;
|
@@ -0,0 +1,44 @@
|
|
1
|
+
import type { StoryObj } from "@storybook/react";
|
2
|
+
declare const meta: {
|
3
|
+
title: string;
|
4
|
+
component: import("react").ForwardRefExoticComponent<{
|
5
|
+
type?: import("./Button.type").ButtonTypes;
|
6
|
+
size?: import("./Button.type").ButtonSizes;
|
7
|
+
loading?: boolean;
|
8
|
+
disabled?: boolean;
|
9
|
+
className?: string;
|
10
|
+
onClick?: React.MouseEventHandler<HTMLElement>;
|
11
|
+
display?: import("./Button.type").ButtonDisplay;
|
12
|
+
color?: string;
|
13
|
+
backgroundColor?: string;
|
14
|
+
borderColor?: string;
|
15
|
+
} & {
|
16
|
+
children?: import("react").ReactNode | undefined;
|
17
|
+
} & import("react").RefAttributes<HTMLButtonElement>>;
|
18
|
+
parameters: {
|
19
|
+
layout: string;
|
20
|
+
};
|
21
|
+
tags: string[];
|
22
|
+
argTypes: {
|
23
|
+
size: {
|
24
|
+
description: string;
|
25
|
+
};
|
26
|
+
display: {
|
27
|
+
description: string;
|
28
|
+
};
|
29
|
+
type: {
|
30
|
+
description: string;
|
31
|
+
};
|
32
|
+
loading: {
|
33
|
+
description: string;
|
34
|
+
};
|
35
|
+
disabled: {
|
36
|
+
description: string;
|
37
|
+
};
|
38
|
+
};
|
39
|
+
};
|
40
|
+
export default meta;
|
41
|
+
type Story = StoryObj<typeof meta>;
|
42
|
+
export declare const ButtonSNS: Story;
|
43
|
+
export declare const ButtonLarge: Story;
|
44
|
+
export declare const ButtonMedium: Story;
|
@@ -0,0 +1,17 @@
|
|
1
|
+
import { PropsWithChildren } from "react";
|
2
|
+
export type ButtonTypes = "solid-green" | "solid-red" | "solid-gray" | "outline-green" | "outline-red" | "outline-gray" | "text-none" | "base";
|
3
|
+
export type ButtonStates = "active" | "inactive" | "loading" | "pressed";
|
4
|
+
export type ButtonSizes = "lg" | "md";
|
5
|
+
export type ButtonDisplay = "inline" | "full" | "block";
|
6
|
+
export type ButtonProps = PropsWithChildren<{
|
7
|
+
type?: ButtonTypes;
|
8
|
+
size?: ButtonSizes;
|
9
|
+
loading?: boolean;
|
10
|
+
disabled?: boolean;
|
11
|
+
className?: string;
|
12
|
+
onClick?: React.MouseEventHandler<HTMLElement>;
|
13
|
+
display?: ButtonDisplay;
|
14
|
+
color?: string;
|
15
|
+
backgroundColor?: string;
|
16
|
+
borderColor?: string;
|
17
|
+
}>;
|
@@ -0,0 +1,6 @@
|
|
1
|
+
import * as CheckboxBase from "@radix-ui/react-checkbox";
|
2
|
+
declare const _default: {
|
3
|
+
Root: ({ className, ...props }: CheckboxBase.CheckboxProps) => import("react/jsx-runtime").JSX.Element;
|
4
|
+
Indicator: ({ ...props }: CheckboxBase.CheckboxIndicatorProps) => void;
|
5
|
+
};
|
6
|
+
export default _default;
|
@@ -0,0 +1,15 @@
|
|
1
|
+
import type { StoryObj } from "@storybook/react";
|
2
|
+
declare const meta: {
|
3
|
+
title: string;
|
4
|
+
component: ({ className, ...props }: import("@radix-ui/react-checkbox").CheckboxProps) => import("react/jsx-runtime").JSX.Element;
|
5
|
+
parameters: {
|
6
|
+
layout: string;
|
7
|
+
};
|
8
|
+
tags: string[];
|
9
|
+
};
|
10
|
+
export default meta;
|
11
|
+
type Story = StoryObj<typeof meta>;
|
12
|
+
export declare const Primary: Story;
|
13
|
+
export declare const Checked: Story;
|
14
|
+
export declare const Disabled: Story;
|
15
|
+
export declare const Required: Story;
|
@@ -0,0 +1,10 @@
|
|
1
|
+
import type { Meta, StoryObj } from "@storybook/react";
|
2
|
+
import { Dialog } from "./Dialog";
|
3
|
+
/**
|
4
|
+
* **radix docs**
|
5
|
+
* https://www.radix-ui.com/primitives/docs/components/dialog
|
6
|
+
*/
|
7
|
+
declare const meta: Meta<typeof Dialog>;
|
8
|
+
export default meta;
|
9
|
+
type Story = StoryObj<typeof meta>;
|
10
|
+
export declare const Primary: Story;
|
@@ -0,0 +1,22 @@
|
|
1
|
+
import * as DialogPropsBase from "@radix-ui/react-dialog";
|
2
|
+
export declare const DialogTheme: {
|
3
|
+
readonly light: "light";
|
4
|
+
readonly dark: "dark";
|
5
|
+
};
|
6
|
+
export declare const DialogRadius: {
|
7
|
+
readonly NONE: "none";
|
8
|
+
readonly SMALL: "small";
|
9
|
+
readonly MEDIUM: "medium";
|
10
|
+
readonly LARGE: "large";
|
11
|
+
};
|
12
|
+
type ValueOf<T> = T[keyof T];
|
13
|
+
export type DialogTheme = ValueOf<typeof DialogTheme>;
|
14
|
+
export type DialogRadius = ValueOf<typeof DialogRadius>;
|
15
|
+
export type DialogProps = {
|
16
|
+
locked?: boolean;
|
17
|
+
zIndex?: number;
|
18
|
+
theme?: DialogTheme;
|
19
|
+
radius?: DialogRadius;
|
20
|
+
className?: string;
|
21
|
+
} & Omit<DialogPropsBase.DialogProps, "modal">;
|
22
|
+
export {};
|
@@ -0,0 +1,3 @@
|
|
1
|
+
import { FunnelProps, NonEmptyArray, StepProps } from "./Funnel.type";
|
2
|
+
export declare const Funnel: <Steps extends NonEmptyArray<string>>({ steps, step, children }: FunnelProps<Steps>) => import("react/jsx-runtime").JSX.Element;
|
3
|
+
export declare const Step: <Steps extends NonEmptyArray<string>>({ onMounted, onUnMounted, children }: StepProps<Steps>) => import("react/jsx-runtime").JSX.Element;
|
@@ -0,0 +1,31 @@
|
|
1
|
+
import type { StoryObj } from "@storybook/react";
|
2
|
+
declare enum FUNNEL {
|
3
|
+
onBoarding = "\uC628\uBCF4\uB529",
|
4
|
+
agreement = "\uC57D\uAD00\uB3D9\uC758",
|
5
|
+
information = "\uC815\uBCF4\uC785\uB825",
|
6
|
+
registration = "\uAC00\uC785"
|
7
|
+
}
|
8
|
+
declare function FunnelWithRouter({ initialStep }: {
|
9
|
+
initialStep?: FUNNEL;
|
10
|
+
}): import("react/jsx-runtime").JSX.Element;
|
11
|
+
declare const meta: {
|
12
|
+
title: string;
|
13
|
+
component: typeof FunnelWithRouter;
|
14
|
+
parameters: {
|
15
|
+
layout: string;
|
16
|
+
};
|
17
|
+
tags: string[];
|
18
|
+
argTypes: {
|
19
|
+
initialStep: {
|
20
|
+
control: "select";
|
21
|
+
options: FUNNEL[];
|
22
|
+
description: string;
|
23
|
+
};
|
24
|
+
};
|
25
|
+
};
|
26
|
+
export default meta;
|
27
|
+
type Story = StoryObj<typeof meta>;
|
28
|
+
export declare const Primary: Story;
|
29
|
+
export declare const AgreementStep: Story;
|
30
|
+
export declare const InformationStep: Story;
|
31
|
+
export declare const RegistrationStep: Story;
|
@@ -0,0 +1,13 @@
|
|
1
|
+
import { ReactElement, ReactNode } from "react";
|
2
|
+
export type NonEmptyArray<T> = readonly [T, ...T[]];
|
3
|
+
export interface FunnelProps<Steps extends NonEmptyArray<string>> {
|
4
|
+
steps: Steps;
|
5
|
+
step: Steps[number];
|
6
|
+
children: Array<ReactElement<StepProps<Steps>>> | ReactElement<StepProps<Steps>>;
|
7
|
+
}
|
8
|
+
export interface StepProps<Steps extends NonEmptyArray<string>> {
|
9
|
+
name: Steps[number];
|
10
|
+
onMounted?: () => void;
|
11
|
+
onUnMounted?: () => void;
|
12
|
+
children: ReactNode;
|
13
|
+
}
|
@@ -0,0 +1 @@
|
|
1
|
+
export * from "./useFunnel";
|
@@ -0,0 +1,9 @@
|
|
1
|
+
import { FunnelProps, NonEmptyArray } from "./Funnel.type";
|
2
|
+
type RouteFunnelProps<Steps extends NonEmptyArray<string>> = Omit<FunnelProps<Steps>, "steps" | "step">;
|
3
|
+
export declare const useFunnel: <Steps extends NonEmptyArray<string>>(steps: Steps, options?: {
|
4
|
+
stepQueryKey?: string;
|
5
|
+
initialStep?: Steps[number];
|
6
|
+
}) => readonly [((props: RouteFunnelProps<Steps>) => import("react/jsx-runtime").JSX.Element) & {
|
7
|
+
Step: <Steps_1 extends NonEmptyArray<string>>({ onMounted, onUnMounted, children }: import("./Funnel.type").StepProps<Steps_1>) => import("react/jsx-runtime").JSX.Element;
|
8
|
+
}, (step: Steps[number]) => void];
|
9
|
+
export {};
|
@@ -0,0 +1,10 @@
|
|
1
|
+
export type InputTypes = "text" | "file";
|
2
|
+
export type InputDisplay = "line" | "box";
|
3
|
+
export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
|
4
|
+
type?: InputTypes;
|
5
|
+
display?: InputDisplay;
|
6
|
+
disabled?: boolean;
|
7
|
+
error?: boolean;
|
8
|
+
onClear?: () => void;
|
9
|
+
className?: string;
|
10
|
+
}
|
@@ -0,0 +1,5 @@
|
|
1
|
+
import * as PopoverPropsBase from "./Popover.type";
|
2
|
+
declare const Root: ({ locked, ...props }: PopoverPropsBase.RootProps) => import("react/jsx-runtime").JSX.Element;
|
3
|
+
declare const Trigger: ({ ...props }: PopoverPropsBase.TriggerProps) => import("react/jsx-runtime").JSX.Element;
|
4
|
+
declare const Content: ({ sideOffset, align, ...props }: PopoverPropsBase.ContentProps) => import("react/jsx-runtime").JSX.Element;
|
5
|
+
export { Root, Trigger, Content };
|
@@ -0,0 +1,36 @@
|
|
1
|
+
import type { StoryObj } from "@storybook/react";
|
2
|
+
/**
|
3
|
+
* **radix docs**
|
4
|
+
* https://www.radix-ui.com/primitives/docs/components/popover
|
5
|
+
*/
|
6
|
+
declare const meta: {
|
7
|
+
title: string;
|
8
|
+
component: ({ locked, ...props }: import("./Popover.type").RootProps) => import("react/jsx-runtime").JSX.Element;
|
9
|
+
parameters: {
|
10
|
+
layout: string;
|
11
|
+
};
|
12
|
+
tags: string[];
|
13
|
+
argTypes: {
|
14
|
+
locked: {
|
15
|
+
control: "boolean";
|
16
|
+
description: string;
|
17
|
+
};
|
18
|
+
open: {
|
19
|
+
control: "boolean";
|
20
|
+
description: string;
|
21
|
+
};
|
22
|
+
onOpenChange: {
|
23
|
+
control: "object";
|
24
|
+
description: string;
|
25
|
+
};
|
26
|
+
defaultOpen: {
|
27
|
+
control: "boolean";
|
28
|
+
description: string;
|
29
|
+
};
|
30
|
+
};
|
31
|
+
};
|
32
|
+
export default meta;
|
33
|
+
type Story = StoryObj<typeof meta>;
|
34
|
+
export declare const Default: Story;
|
35
|
+
export declare const DefaultOpen: Story;
|
36
|
+
export declare const WithCallBack: Story;
|
@@ -0,0 +1,7 @@
|
|
1
|
+
import * as PopverPropsBase from "@radix-ui/react-popover";
|
2
|
+
type RootProps = {
|
3
|
+
locked?: boolean;
|
4
|
+
} & Omit<PopverPropsBase.PopoverProps, "modal">;
|
5
|
+
type TriggerProps = PopverPropsBase.PopoverTriggerProps;
|
6
|
+
type ContentProps = PopverPropsBase.PopoverContentProps;
|
7
|
+
export { RootProps, TriggerProps, ContentProps };
|
@@ -0,0 +1,21 @@
|
|
1
|
+
import type { StoryObj } from "@storybook/react";
|
2
|
+
declare const meta: {
|
3
|
+
title: string;
|
4
|
+
component: import("react").FC<import("./Popup.type").PopupProps>;
|
5
|
+
parameters: {
|
6
|
+
layout: string;
|
7
|
+
};
|
8
|
+
tags: string[];
|
9
|
+
argTypes: {
|
10
|
+
buttonLayoutType: {
|
11
|
+
options: string[];
|
12
|
+
control: {
|
13
|
+
type: "radio";
|
14
|
+
};
|
15
|
+
description: string;
|
16
|
+
};
|
17
|
+
};
|
18
|
+
};
|
19
|
+
export default meta;
|
20
|
+
type Story = StoryObj<typeof meta>;
|
21
|
+
export declare const Popups: Story;
|
@@ -0,0 +1,21 @@
|
|
1
|
+
import { Dialog } from "radix-ui";
|
2
|
+
import { ReactNode } from "react";
|
3
|
+
export interface BasePopupProps extends Dialog.DialogProps {
|
4
|
+
children?: ReactNode;
|
5
|
+
className?: string;
|
6
|
+
container?: Element | DocumentFragment | null;
|
7
|
+
title?: string;
|
8
|
+
description?: string;
|
9
|
+
onClose?: React.MouseEventHandler<HTMLDivElement>;
|
10
|
+
}
|
11
|
+
interface TypeAPopupProps extends BasePopupProps {
|
12
|
+
buttonLayoutType: "typeA";
|
13
|
+
button?: React.ReactNode;
|
14
|
+
}
|
15
|
+
interface TypeBPopupProps extends BasePopupProps {
|
16
|
+
buttonLayoutType: "typeB";
|
17
|
+
leftButton?: React.ReactNode;
|
18
|
+
rightButton?: React.ReactNode;
|
19
|
+
}
|
20
|
+
export type PopupProps = TypeAPopupProps | TypeBPopupProps;
|
21
|
+
export {};
|
@@ -0,0 +1,8 @@
|
|
1
|
+
import * as RadioGroupBase from "@radix-ui/react-radio-group";
|
2
|
+
declare function Root({ className, ...props }: RadioGroupBase.RadioGroupProps): import("react/jsx-runtime").JSX.Element;
|
3
|
+
declare const _default: {
|
4
|
+
Root: typeof Root;
|
5
|
+
Item: ({ children, value, ...props }: RadioGroupBase.RadioGroupItemProps) => import("react/jsx-runtime").JSX.Element;
|
6
|
+
Indicator: ({ ...props }: RadioGroupBase.RadioGroupIndicatorProps) => import("react/jsx-runtime").JSX.Element;
|
7
|
+
};
|
8
|
+
export default _default;
|
@@ -0,0 +1,16 @@
|
|
1
|
+
import type { StoryObj } from "@storybook/react";
|
2
|
+
declare const meta: {
|
3
|
+
title: string;
|
4
|
+
component: ({ className, ...props }: import("@radix-ui/react-radio-group").RadioGroupProps) => import("react/jsx-runtime").JSX.Element;
|
5
|
+
parameters: {
|
6
|
+
layout: string;
|
7
|
+
};
|
8
|
+
tags: string[];
|
9
|
+
argTypes: {};
|
10
|
+
};
|
11
|
+
export default meta;
|
12
|
+
type Story = StoryObj<typeof meta>;
|
13
|
+
export declare const Default: Story;
|
14
|
+
export declare const Orientation: Story;
|
15
|
+
export declare const Disabled: Story;
|
16
|
+
export declare const ItemDisabled: Story;
|
@@ -0,0 +1,15 @@
|
|
1
|
+
import * as SelectBase from "@radix-ui/react-select";
|
2
|
+
import { SelectProps } from "./Select.type";
|
3
|
+
declare const _default: {
|
4
|
+
Root: ({ className, ...props }: SelectProps) => import("react/jsx-runtime").JSX.Element;
|
5
|
+
Trigger: ({ ...props }: SelectBase.SelectTriggerProps) => import("react/jsx-runtime").JSX.Element;
|
6
|
+
Portal: ({ ...props }: SelectBase.SelectPortalProps) => import("react/jsx-runtime").JSX.Element;
|
7
|
+
Content: ({ ...props }: SelectBase.SelectContentProps) => import("react/jsx-runtime").JSX.Element;
|
8
|
+
Viewport: ({ ...props }: SelectBase.SelectViewportProps) => import("react/jsx-runtime").JSX.Element;
|
9
|
+
Group: ({ ...props }: SelectBase.SelectGroupProps) => import("react/jsx-runtime").JSX.Element;
|
10
|
+
Item: ({ ...props }: SelectBase.SelectItemProps) => import("react/jsx-runtime").JSX.Element;
|
11
|
+
Label: ({ ...props }: SelectBase.SelectLabelProps) => import("react/jsx-runtime").JSX.Element;
|
12
|
+
ItemText: ({ ...props }: SelectBase.SelectItemTextProps) => import("react/jsx-runtime").JSX.Element;
|
13
|
+
Value: ({ ...props }: SelectBase.SelectValueProps) => import("react/jsx-runtime").JSX.Element;
|
14
|
+
};
|
15
|
+
export default _default;
|
@@ -0,0 +1,13 @@
|
|
1
|
+
import type { StoryObj } from "@storybook/react";
|
2
|
+
import { Select } from ".";
|
3
|
+
declare const meta: {
|
4
|
+
title: string;
|
5
|
+
component: ({ className, ...props }: import("./Select.type").SelectProps) => import("react/jsx-runtime").JSX.Element;
|
6
|
+
parameters: {
|
7
|
+
layout: string;
|
8
|
+
};
|
9
|
+
tags: string[];
|
10
|
+
};
|
11
|
+
export default meta;
|
12
|
+
type Story = StoryObj<typeof Select.Root>;
|
13
|
+
export declare const Default: Story;
|
@@ -0,0 +1,38 @@
|
|
1
|
+
import type { StoryObj } from "@storybook/react";
|
2
|
+
/**
|
3
|
+
* **radix docs**
|
4
|
+
* https://www.radix-ui.com/primitives/docs/components/tabs
|
5
|
+
*/
|
6
|
+
declare const meta: {
|
7
|
+
title: string;
|
8
|
+
component: import("react").FC<import("./Tabs.type").TabsProps>;
|
9
|
+
parameters: {
|
10
|
+
layout: string;
|
11
|
+
};
|
12
|
+
tags: string[];
|
13
|
+
argTypes: {
|
14
|
+
value: {
|
15
|
+
control: "select";
|
16
|
+
options: string[];
|
17
|
+
description: string;
|
18
|
+
};
|
19
|
+
onValueChange: {
|
20
|
+
control: "object";
|
21
|
+
description: string;
|
22
|
+
};
|
23
|
+
dir: {
|
24
|
+
control: "select";
|
25
|
+
options: string[];
|
26
|
+
description: string;
|
27
|
+
};
|
28
|
+
defaultValue: {
|
29
|
+
control: "select";
|
30
|
+
options: string[];
|
31
|
+
description: string;
|
32
|
+
};
|
33
|
+
};
|
34
|
+
};
|
35
|
+
export default meta;
|
36
|
+
type Story = StoryObj<typeof meta>;
|
37
|
+
export declare const Default: Story;
|
38
|
+
export declare function ControlledTabs(): import("react/jsx-runtime").JSX.Element;
|
@@ -0,0 +1,15 @@
|
|
1
|
+
import * as TabsBase from "@radix-ui/react-tabs";
|
2
|
+
import { ReactNode, RefObject } from "react";
|
3
|
+
interface TabItem {
|
4
|
+
value: string;
|
5
|
+
text: string;
|
6
|
+
content: ReactNode;
|
7
|
+
}
|
8
|
+
interface TabsProps extends Omit<TabsBase.TabsProps, "children"> {
|
9
|
+
width?: string;
|
10
|
+
tabItems: TabItem[];
|
11
|
+
}
|
12
|
+
interface UseTabsIndicatorProps {
|
13
|
+
listRef: RefObject<HTMLDivElement>;
|
14
|
+
}
|
15
|
+
export { TabsProps, TabItem, UseTabsIndicatorProps };
|
@@ -0,0 +1,7 @@
|
|
1
|
+
import * as TabsBase from "@radix-ui/react-tabs";
|
2
|
+
import "./Tabs.scss";
|
3
|
+
declare const Root: ({ ...props }: TabsBase.TabsProps) => import("react/jsx-runtime").JSX.Element;
|
4
|
+
declare const List: ({ ...props }: TabsBase.TabsListProps) => import("react/jsx-runtime").JSX.Element;
|
5
|
+
declare const Trigger: ({ ...props }: TabsBase.TabsTriggerProps) => import("react/jsx-runtime").JSX.Element;
|
6
|
+
declare const Content: ({ ...props }: TabsBase.TabsContentProps) => import("react/jsx-runtime").JSX.Element;
|
7
|
+
export { Root, List, Trigger, Content };
|
@@ -0,0 +1 @@
|
|
1
|
+
export { Tabs } from "./Tabs";
|
@@ -0,0 +1,10 @@
|
|
1
|
+
import { UseTabsIndicatorProps } from "./Tabs.type";
|
2
|
+
/**
|
3
|
+
* 탭 인디케이터의 위치를 계산하고 관리하는 커스텀 훅
|
4
|
+
* @param {UseTabsIndicatorProps} props - 탭 인디케이터 설정
|
5
|
+
* @returns {Object} indicatorStyle - 인디케이터의 스타일 객체
|
6
|
+
*/
|
7
|
+
declare const useTabsIndicator: ({ listRef }: UseTabsIndicatorProps) => {
|
8
|
+
indicatorStyle: import("react").CSSProperties;
|
9
|
+
};
|
10
|
+
export { useTabsIndicator };
|