@1d1s/design-system 0.2.33 → 0.2.34
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/AchievementBadge/AchievementBadge.d.ts +29 -0
- package/dist/components/AchievementBadge/AchievementBadge.stories.d.ts +9 -0
- package/dist/components/AchievementBadge/index.d.ts +1 -0
- package/dist/components/Banner/Banner.d.ts +36 -0
- package/dist/components/Banner/Banner.stories.d.ts +9 -0
- package/dist/components/Banner/index.d.ts +1 -0
- package/dist/components/BottomNav/BottomNav.d.ts +34 -0
- package/dist/components/BottomNav/BottomNav.stories.d.ts +7 -0
- package/dist/components/BottomNav/index.d.ts +1 -0
- package/dist/components/Button/Button.d.ts +23 -11
- package/dist/components/Button/Button.stories.d.ts +7 -7
- package/dist/components/Card/Card.d.ts +51 -0
- package/dist/components/Card/Card.stories.d.ts +8 -0
- package/dist/components/Card/index.d.ts +1 -0
- package/dist/components/Checkbox/Checkbox.d.ts +9 -4
- package/dist/components/Checkbox/Checkbox.stories.d.ts +2 -1
- package/dist/components/CircleAvatar/CircleAvatar.d.ts +30 -2
- package/dist/components/CircleAvatar/CircleAvatar.stories.d.ts +5 -0
- package/dist/components/CircularProgress/CircularProgress.d.ts +23 -16
- package/dist/components/CircularProgress/CircularProgress.stories.d.ts +5 -2
- package/dist/components/CommentRow/CommentRow.d.ts +30 -0
- package/dist/components/CommentRow/CommentRow.stories.d.ts +8 -0
- package/dist/components/CommentRow/index.d.ts +1 -0
- package/dist/components/Dropdown/Dropdown.d.ts +24 -45
- package/dist/components/Dropdown/Dropdown.stories.d.ts +8 -4
- package/dist/components/Dropdown/DropdownMenu.d.ts +29 -0
- package/dist/components/Dropdown/MultiSelect.d.ts +26 -0
- package/dist/components/Dropdown/index.d.ts +2 -0
- package/dist/components/Heatmap/Heatmap.d.ts +35 -0
- package/dist/components/Heatmap/Heatmap.stories.d.ts +8 -0
- package/dist/components/Heatmap/index.d.ts +1 -0
- package/dist/components/Icons/Home.d.ts +2 -0
- package/dist/components/Icons/LayoutGrid.d.ts +2 -0
- package/dist/components/Icons/index.d.ts +2 -0
- package/dist/components/ProgressBar/ProgressBar.d.ts +20 -3
- package/dist/components/ProgressBar/ProgressBar.stories.d.ts +1 -0
- package/dist/components/Radio/Radio.d.ts +46 -0
- package/dist/components/Radio/Radio.stories.d.ts +9 -0
- package/dist/components/Radio/index.d.ts +1 -0
- package/dist/components/SectionHeader/SectionHeader.d.ts +31 -0
- package/dist/components/SectionHeader/SectionHeader.stories.d.ts +9 -0
- package/dist/components/SectionHeader/index.d.ts +1 -0
- package/dist/components/StatCard/StatCard.d.ts +29 -0
- package/dist/components/StatCard/StatCard.stories.d.ts +9 -0
- package/dist/components/StatCard/index.d.ts +1 -0
- package/dist/components/StatusBadge/StatusBadge.d.ts +28 -0
- package/dist/components/StatusBadge/StatusBadge.stories.d.ts +8 -0
- package/dist/components/StatusBadge/index.d.ts +1 -0
- package/dist/components/Streak/StreakChip.d.ts +20 -0
- package/dist/components/Streak/StreakChip.stories.d.ts +8 -0
- package/dist/components/Streak/StreakHero.d.ts +23 -0
- package/dist/components/Streak/StreakHero.stories.d.ts +8 -0
- package/dist/components/Streak/index.d.ts +2 -1
- package/dist/components/Stripe/Stripe.d.ts +29 -0
- package/dist/components/Stripe/Stripe.stories.d.ts +9 -0
- package/dist/components/Stripe/index.d.ts +1 -0
- package/dist/components/Tabs/Tabs.d.ts +37 -0
- package/dist/components/Tabs/Tabs.stories.d.ts +9 -0
- package/dist/components/Tabs/index.d.ts +1 -0
- package/dist/components/Tag/ChallengeTag.d.ts +19 -0
- package/dist/components/Tag/ChallengeTag.stories.d.ts +8 -0
- package/dist/components/Tag/FilterChip.d.ts +25 -0
- package/dist/components/Tag/Tag.d.ts +16 -14
- package/dist/components/Tag/Tag.stories.d.ts +6 -1
- package/dist/components/Tag/index.d.ts +2 -0
- package/dist/components/Text/Text.d.ts +2 -2
- package/dist/components/TextField/TextArea.d.ts +23 -0
- package/dist/components/TextField/TextArea.stories.d.ts +10 -0
- package/dist/components/TextField/TextField.d.ts +30 -13
- package/dist/components/TextField/TextField.stories.d.ts +7 -4
- package/dist/components/TextField/index.d.ts +1 -0
- package/dist/components/Toggle/Toggle.d.ts +14 -13
- package/dist/components/Toggle/Toggle.stories.d.ts +5 -5
- package/dist/components/TopNav/TopNav.d.ts +55 -0
- package/dist/components/TopNav/TopNav.stories.d.ts +8 -0
- package/dist/components/TopNav/index.d.ts +1 -0
- package/dist/components/index.d.ts +14 -25
- package/dist/index.es.js +3053 -11804
- package/dist/index.umd.js +1 -45
- package/package.json +2 -25
- package/src/styles/animation.css +109 -35
- package/src/styles/colors.css +25 -2
- package/src/styles/globals.css +1 -3
- package/src/styles/shadow.css +11 -1
- package/src/styles/shape.css +4 -0
- package/src/styles/typography.css +31 -11
- package/dist/components/Accordion/Accordion.d.ts +0 -47
- package/dist/components/Accordion/Accordion.stories.d.ts +0 -8
- package/dist/components/Accordion/index.d.ts +0 -1
- package/dist/components/AppHeader/AppHeader.d.ts +0 -26
- package/dist/components/AppHeader/AppHeader.stories.d.ts +0 -9
- package/dist/components/AppHeader/index.d.ts +0 -1
- package/dist/components/AvatarImagePicker/AvatarImagePicker.d.ts +0 -24
- package/dist/components/AvatarImagePicker/AvatarImagePicker.stories.d.ts +0 -7
- package/dist/components/AvatarImagePicker/index.d.ts +0 -1
- package/dist/components/BannerCarousel/BannerCarousel.d.ts +0 -42
- package/dist/components/BannerCarousel/BannerCarousel.stories.d.ts +0 -10
- package/dist/components/BannerCarousel/index.d.ts +0 -1
- package/dist/components/Calendar/Calendar.d.ts +0 -4
- package/dist/components/Calendar/Calendar.stories.d.ts +0 -15
- package/dist/components/Calendar/index.d.ts +0 -1
- package/dist/components/CheckContainer/CheckContainer.d.ts +0 -17
- package/dist/components/CheckContainer/CheckContainer.stories.d.ts +0 -9
- package/dist/components/CheckContainer/index.d.ts +0 -1
- package/dist/components/CheckList/CheckList.d.ts +0 -37
- package/dist/components/CheckList/CheckList.stories.d.ts +0 -9
- package/dist/components/CheckList/index.d.ts +0 -1
- package/dist/components/CommentThread/CommentThread.d.ts +0 -31
- package/dist/components/CommentThread/CommentThread.stories.d.ts +0 -9
- package/dist/components/CommentThread/index.d.ts +0 -1
- package/dist/components/DatePicker/DatePicker.d.ts +0 -26
- package/dist/components/DatePicker/DatePicker.stories.d.ts +0 -7
- package/dist/components/DatePicker/index.d.ts +0 -1
- package/dist/components/Dialog/Dialog.d.ts +0 -13
- package/dist/components/Dialog/Dialog.stories.d.ts +0 -9
- package/dist/components/Dialog/index.d.ts +0 -1
- package/dist/components/GoalAddList/GoalAddList.d.ts +0 -16
- package/dist/components/GoalAddList/GoalAddList.stories.d.ts +0 -7
- package/dist/components/GoalAddList/index.d.ts +0 -1
- package/dist/components/ImagePicker/ImagePicker.d.ts +0 -50
- package/dist/components/ImagePicker/ImagePicker.stories.d.ts +0 -8
- package/dist/components/ImagePicker/index.d.ts +0 -1
- package/dist/components/ImagePlaceholder/ImagePlaceholder.d.ts +0 -11
- package/dist/components/ImagePlaceholder/index.d.ts +0 -1
- package/dist/components/InfoButton/InfoButton.d.ts +0 -20
- package/dist/components/InfoButton/InfoButton.stories.d.ts +0 -9
- package/dist/components/InfoButton/index.d.ts +0 -1
- package/dist/components/Layout/Layout.d.ts +0 -69
- package/dist/components/Layout/Layout.stories.d.ts +0 -7
- package/dist/components/Layout/LayoutContext.d.ts +0 -12
- package/dist/components/Layout/index.d.ts +0 -2
- package/dist/components/PageWatermark/PageWatermark.d.ts +0 -1
- package/dist/components/PageWatermark/PageWatermark.stories.d.ts +0 -6
- package/dist/components/PageWatermark/index.d.ts +0 -1
- package/dist/components/Pagination/Pagination.d.ts +0 -14
- package/dist/components/Pagination/Pagination.stories.d.ts +0 -9
- package/dist/components/Pagination/index.d.ts +0 -1
- package/dist/components/Profile/Profile.d.ts +0 -37
- package/dist/components/Profile/Profile.stories.d.ts +0 -12
- package/dist/components/Profile/index.d.ts +0 -1
- package/dist/components/RightSidebar/RightSidebar.d.ts +0 -41
- package/dist/components/RightSidebar/RightSidebar.stories.d.ts +0 -14
- package/dist/components/RightSidebar/index.d.ts +0 -1
- package/dist/components/ScheduleCalendar/ScheduleCalendar.d.ts +0 -31
- package/dist/components/ScheduleCalendar/ScheduleCalendar.stories.d.ts +0 -10
- package/dist/components/ScheduleCalendar/index.d.ts +0 -1
- package/dist/components/StatContainer/StatContainer.d.ts +0 -15
- package/dist/components/StatContainer/StatContainer.stories.d.ts +0 -7
- package/dist/components/StatContainer/index.d.ts +0 -1
- package/dist/components/StepIndicator/StepIndicator.d.ts +0 -19
- package/dist/components/StepIndicator/StepIndicator.stories.d.ts +0 -10
- package/dist/components/StepIndicator/index.d.ts +0 -1
- package/dist/components/Streak/Streak.d.ts +0 -31
- package/dist/components/Streak/Streak.stories.d.ts +0 -12
- package/dist/components/ToggleGroup/ToggleGroup.d.ts +0 -21
- package/dist/components/ToggleGroup/ToggleGroup.stories.d.ts +0 -8
- package/dist/components/ToggleGroup/index.d.ts +0 -1
- package/dist/components/Tooltip/Tooltip.d.ts +0 -7
- package/dist/components/Tooltip/Tooltip.stories.d.ts +0 -7
- package/dist/components/Tooltip/index.d.ts +0 -1
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from './CheckContainer';
|
|
@@ -1,37 +0,0 @@
|
|
|
1
|
-
import { default as React } from 'react';
|
|
2
|
-
export interface CheckListOption {
|
|
3
|
-
id: string;
|
|
4
|
-
label: React.ReactNode;
|
|
5
|
-
disabled?: boolean;
|
|
6
|
-
}
|
|
7
|
-
export interface CheckListProps {
|
|
8
|
-
/** 체크박스 옵션 목록 */
|
|
9
|
-
options: CheckListOption[];
|
|
10
|
-
/** 선택된 옵션의 ID 목록 */
|
|
11
|
-
value: string[];
|
|
12
|
-
/** 선택 변경 시 호출되는 콜백 */
|
|
13
|
-
onValueChange: (value: string[]) => void;
|
|
14
|
-
/** 추가 클래스 */
|
|
15
|
-
className?: string;
|
|
16
|
-
/** 읽기 전용 여부 (시각 변화 없이 토글만 비활성화) */
|
|
17
|
-
readOnly?: boolean;
|
|
18
|
-
/** 전체 비활성화 여부 */
|
|
19
|
-
disabled?: boolean;
|
|
20
|
-
}
|
|
21
|
-
/**
|
|
22
|
-
* CheckList
|
|
23
|
-
* 여러 개의 Checkbox를 리스트 형태로 보여주고 다중 선택을 관리하는 컴포넌트
|
|
24
|
-
*
|
|
25
|
-
* @example
|
|
26
|
-
* ```tsx
|
|
27
|
-
* <CheckList
|
|
28
|
-
* options={[
|
|
29
|
-
* { id: '1', label: '옵션 1' },
|
|
30
|
-
* { id: '2', label: '옵션 2' }
|
|
31
|
-
* ]}
|
|
32
|
-
* value={selectedIds}
|
|
33
|
-
* onValueChange={setSelectedIds}
|
|
34
|
-
* />
|
|
35
|
-
* ```
|
|
36
|
-
*/
|
|
37
|
-
export declare function CheckList({ options, value, onValueChange, className, readOnly, disabled, }: CheckListProps): React.ReactElement;
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import { Meta, StoryObj } from '@storybook/react-vite';
|
|
2
|
-
import { CheckList } from './CheckList';
|
|
3
|
-
declare const meta: Meta<typeof CheckList>;
|
|
4
|
-
export default meta;
|
|
5
|
-
type Story = StoryObj<typeof CheckList>;
|
|
6
|
-
export declare const Default: Story;
|
|
7
|
-
export declare const Empty: Story;
|
|
8
|
-
export declare const Disabled: Story;
|
|
9
|
-
export declare const ReadOnly: Story;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from './CheckList';
|
|
@@ -1,31 +0,0 @@
|
|
|
1
|
-
import { default as React } from 'react';
|
|
2
|
-
export interface CommentAuthor {
|
|
3
|
-
id: string;
|
|
4
|
-
nickname: string;
|
|
5
|
-
profileImageUrl?: string;
|
|
6
|
-
}
|
|
7
|
-
export interface CommentNode {
|
|
8
|
-
id: string;
|
|
9
|
-
content: string;
|
|
10
|
-
createdAt: string;
|
|
11
|
-
author: CommentAuthor;
|
|
12
|
-
replies?: CommentNode[];
|
|
13
|
-
isAuthor?: boolean;
|
|
14
|
-
hasMoreReplies?: boolean;
|
|
15
|
-
remainingReplyCount?: number;
|
|
16
|
-
isLoadingReplies?: boolean;
|
|
17
|
-
}
|
|
18
|
-
export interface CommentThreadProps {
|
|
19
|
-
comments: CommentNode[];
|
|
20
|
-
currentUserId?: string;
|
|
21
|
-
className?: string;
|
|
22
|
-
replyPlaceholder?: string;
|
|
23
|
-
replySubmitLabel?: string;
|
|
24
|
-
replyCancelLabel?: string;
|
|
25
|
-
loadMoreRepliesLabel?: string;
|
|
26
|
-
onDelete?(comment: CommentNode): void;
|
|
27
|
-
onReport?(comment: CommentNode): void;
|
|
28
|
-
onReplySubmit?(comment: CommentNode, content: string): void;
|
|
29
|
-
onLoadMoreReplies?(comment: CommentNode): void;
|
|
30
|
-
}
|
|
31
|
-
export declare function CommentThread({ comments, currentUserId, className, replyPlaceholder, replySubmitLabel, replyCancelLabel, loadMoreRepliesLabel, onReplySubmit, onLoadMoreReplies, onDelete, onReport, }: CommentThreadProps): React.ReactElement;
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import { Meta, StoryObj } from '@storybook/react-vite';
|
|
2
|
-
import { CommentThread } from './CommentThread';
|
|
3
|
-
declare const meta: Meta<typeof CommentThread>;
|
|
4
|
-
export default meta;
|
|
5
|
-
type Story = StoryObj<typeof CommentThread>;
|
|
6
|
-
export declare const Default: Story;
|
|
7
|
-
export declare const Empty: Story;
|
|
8
|
-
export declare const LongContent: Story;
|
|
9
|
-
export declare const ManyReplies: Story;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from './CommentThread';
|
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
import { default as React } from 'react';
|
|
2
|
-
import { DateRange } from 'react-day-picker';
|
|
3
|
-
interface BasePickerProps {
|
|
4
|
-
className?: string;
|
|
5
|
-
placeholder?: string;
|
|
6
|
-
disableClickPropagation?: boolean;
|
|
7
|
-
}
|
|
8
|
-
export interface DatePickerProps extends BasePickerProps {
|
|
9
|
-
value: Date | undefined;
|
|
10
|
-
onChange(date: Date | undefined): void;
|
|
11
|
-
}
|
|
12
|
-
export interface RangeDatePickerProps extends BasePickerProps {
|
|
13
|
-
value: DateRange | undefined;
|
|
14
|
-
onChange(range: DateRange | undefined): void;
|
|
15
|
-
}
|
|
16
|
-
/**
|
|
17
|
-
* DatePicker
|
|
18
|
-
* 단일 날짜를 선택하는 시안형 Date Picker 컴포넌트.
|
|
19
|
-
*/
|
|
20
|
-
export declare function DatePicker({ value, onChange, className, placeholder, disableClickPropagation, }: DatePickerProps): React.ReactElement;
|
|
21
|
-
/**
|
|
22
|
-
* RangeDatePicker
|
|
23
|
-
* 시작일/종료일 범위를 선택하는 시안형 Date Range Picker 컴포넌트.
|
|
24
|
-
*/
|
|
25
|
-
export declare function RangeDatePicker({ value, onChange, className, placeholder, disableClickPropagation, }: RangeDatePickerProps): React.ReactElement;
|
|
26
|
-
export {};
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
import { Meta, StoryObj } from '@storybook/react-vite';
|
|
2
|
-
import { DatePicker } from './DatePicker';
|
|
3
|
-
declare const meta: Meta<typeof DatePicker>;
|
|
4
|
-
export default meta;
|
|
5
|
-
type Story = StoryObj<typeof DatePicker>;
|
|
6
|
-
export declare const Single: Story;
|
|
7
|
-
export declare const Range: Story;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from './DatePicker';
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
import * as DialogPrimitive from "@radix-ui/react-dialog";
|
|
3
|
-
declare const Dialog: React.FC<DialogPrimitive.DialogProps>;
|
|
4
|
-
declare const DialogTrigger: React.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
|
|
5
|
-
declare const DialogPortal: React.FC<DialogPrimitive.DialogPortalProps>;
|
|
6
|
-
declare const DialogClose: React.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
|
|
7
|
-
declare function DialogOverlay({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Overlay>): React.ReactElement;
|
|
8
|
-
declare function DialogContent({ className, children, ...props }: React.ComponentProps<typeof DialogPrimitive.Content>): React.ReactElement;
|
|
9
|
-
declare function DialogHeader({ className, ...props }: React.ComponentProps<"div">): React.ReactElement;
|
|
10
|
-
declare function DialogFooter({ className, ...props }: React.ComponentProps<"div">): React.ReactElement;
|
|
11
|
-
declare function DialogTitle({ className, children, ...props }: React.ComponentProps<typeof DialogPrimitive.Title>): React.ReactElement;
|
|
12
|
-
declare function DialogDescription({ className, children, ...props }: React.ComponentProps<typeof DialogPrimitive.Description>): React.ReactElement;
|
|
13
|
-
export { Dialog, DialogTrigger, DialogPortal, DialogClose, DialogOverlay, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription, };
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import { Meta, StoryObj } from '@storybook/react-vite';
|
|
2
|
-
import { Dialog } from './Dialog';
|
|
3
|
-
declare const meta: Meta<typeof Dialog>;
|
|
4
|
-
export default meta;
|
|
5
|
-
type Story = StoryObj<typeof Dialog>;
|
|
6
|
-
export declare const Default: Story;
|
|
7
|
-
export declare const WithForm: Story;
|
|
8
|
-
export declare const Confirmation: Story;
|
|
9
|
-
export declare const SimpleAlert: Story;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { Dialog, DialogTrigger, DialogPortal, DialogClose, DialogOverlay, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription, } from './Dialog';
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
import { default as React } from 'react';
|
|
2
|
-
export interface GoalAddListProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
|
|
3
|
-
goals?: string[];
|
|
4
|
-
defaultGoals?: string[];
|
|
5
|
-
onGoalsChange?(goals: string[]): void;
|
|
6
|
-
placeholder?: string;
|
|
7
|
-
disabled?: boolean;
|
|
8
|
-
addOnBlur?: boolean;
|
|
9
|
-
inputAriaLabel?: string;
|
|
10
|
-
maxGoals?: number;
|
|
11
|
-
}
|
|
12
|
-
/**
|
|
13
|
-
* GoalAddList
|
|
14
|
-
* 목표 문자열 목록을 보여주고 하단 입력창에서 Enter로 새 목표를 추가하는 컴포넌트.
|
|
15
|
-
*/
|
|
16
|
-
export declare function GoalAddList({ goals, defaultGoals, onGoalsChange, placeholder, disabled, addOnBlur, inputAriaLabel, maxGoals, className, ...props }: GoalAddListProps): React.ReactElement;
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
import { Meta, StoryObj } from '@storybook/react-vite';
|
|
2
|
-
import { GoalAddList } from './GoalAddList';
|
|
3
|
-
declare const meta: Meta<typeof GoalAddList>;
|
|
4
|
-
export default meta;
|
|
5
|
-
type Story = StoryObj<typeof GoalAddList>;
|
|
6
|
-
export declare const Default: Story;
|
|
7
|
-
export declare const Controlled: Story;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from './GoalAddList';
|
|
@@ -1,50 +0,0 @@
|
|
|
1
|
-
import { default as React } from 'react';
|
|
2
|
-
export interface ImagePickerProps {
|
|
3
|
-
/** 현재 미리보기 이미지 URL (blob: / data: / https: 모두 가능) */
|
|
4
|
-
previewUrl?: string;
|
|
5
|
-
/** 파일 선택 시 호출되는 콜백 */
|
|
6
|
-
onSelectFile: (file: File) => void;
|
|
7
|
-
/** 선택 해제 버튼 클릭 시 호출되는 콜백 */
|
|
8
|
-
onClear?: () => void;
|
|
9
|
-
/** 이미지 미선택 시 안내 텍스트 (기본값: "썸네일 영역을 클릭해 이미지를 선택하세요.") */
|
|
10
|
-
placeholderTitle?: string;
|
|
11
|
-
/** 이미지 미선택 시 보조 안내 텍스트 (기본값: "또는 이미지를 드래그해서 놓아주세요.") */
|
|
12
|
-
placeholderSubtitle?: string;
|
|
13
|
-
/** 하단 도움말 텍스트 (기본값: "JPG, PNG, GIF 파일을 업로드할 수 있습니다.") */
|
|
14
|
-
helperText?: string;
|
|
15
|
-
/** 선택 해제 버튼 텍스트 (기본값: "선택 해제") */
|
|
16
|
-
clearLabel?: string;
|
|
17
|
-
/**
|
|
18
|
-
* 드롭존 영역의 크기·비율을 지정하는 className.
|
|
19
|
-
* 기본값: `aspect-video`
|
|
20
|
-
* @example "aspect-[4/1]", "aspect-square", "h-64"
|
|
21
|
-
*/
|
|
22
|
-
dropZoneClassName?: string;
|
|
23
|
-
/** 추가 className */
|
|
24
|
-
className?: string;
|
|
25
|
-
}
|
|
26
|
-
/**
|
|
27
|
-
* ImagePicker
|
|
28
|
-
* 일지 썸네일 이미지 선택 컴포넌트
|
|
29
|
-
*
|
|
30
|
-
* 클릭 또는 드래그 앤 드롭으로 이미지를 선택할 수 있습니다.
|
|
31
|
-
*
|
|
32
|
-
* @param previewUrl 현재 미리보기 이미지 URL
|
|
33
|
-
* @param onSelectFile 파일 선택 시 호출되는 콜백
|
|
34
|
-
* @param onClear 선택 해제 버튼 클릭 시 호출되는 콜백
|
|
35
|
-
* @param placeholderTitle 이미지 미선택 시 안내 텍스트
|
|
36
|
-
* @param placeholderSubtitle 이미지 미선택 시 보조 안내 텍스트
|
|
37
|
-
* @param helperText 하단 도움말 텍스트
|
|
38
|
-
* @param clearLabel 선택 해제 버튼 텍스트
|
|
39
|
-
* @param className 추가 className
|
|
40
|
-
*
|
|
41
|
-
* @example
|
|
42
|
-
* ```tsx
|
|
43
|
-
* <ImagePicker
|
|
44
|
-
* previewUrl={previewUrl}
|
|
45
|
-
* onSelectFile={(file) => setFile(file)}
|
|
46
|
-
* onClear={() => setFile(null)}
|
|
47
|
-
* />
|
|
48
|
-
* ```
|
|
49
|
-
*/
|
|
50
|
-
export declare function ImagePicker({ previewUrl, onSelectFile, onClear, placeholderTitle, placeholderSubtitle, helperText, clearLabel, dropZoneClassName, className, }: ImagePickerProps): React.ReactElement;
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
import { Meta, StoryObj } from '@storybook/react-vite';
|
|
2
|
-
import { ImagePicker } from './ImagePicker';
|
|
3
|
-
declare const meta: Meta<typeof ImagePicker>;
|
|
4
|
-
export default meta;
|
|
5
|
-
type Story = StoryObj<typeof ImagePicker>;
|
|
6
|
-
export declare const Default: Story;
|
|
7
|
-
export declare const WithImage: Story;
|
|
8
|
-
export declare const WithoutClear: Story;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from './ImagePicker';
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import { default as React } from 'react';
|
|
2
|
-
interface ImagePlaceholderProps {
|
|
3
|
-
className?: string;
|
|
4
|
-
logoSize?: 'sm' | 'md' | 'lg';
|
|
5
|
-
}
|
|
6
|
-
/**
|
|
7
|
-
* ImagePlaceholder
|
|
8
|
-
* 이미지가 없을 때 연한 primary 색상 배경에 로고를 보여주는 컴포넌트
|
|
9
|
-
*/
|
|
10
|
-
export declare function ImagePlaceholder({ className, logoSize, }: ImagePlaceholderProps): React.ReactElement;
|
|
11
|
-
export {};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from './ImagePlaceholder';
|
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
import { default as React } from 'react';
|
|
2
|
-
interface InfoButtonProps {
|
|
3
|
-
/** 상단 작은 글씨 */
|
|
4
|
-
mainText: string;
|
|
5
|
-
/** 상단 큰 글씨 */
|
|
6
|
-
subText: string;
|
|
7
|
-
/** 왼쪽 하단에 표시할 이미지 URL 또는 import */
|
|
8
|
-
imageSrc: string;
|
|
9
|
-
/** 이미지 대체 텍스트 */
|
|
10
|
-
imageAlt?: string;
|
|
11
|
-
/** 그라데이션 시작 색상 (CSS color) */
|
|
12
|
-
gradientFrom: string;
|
|
13
|
-
/** 그라데이션 끝 색상 (CSS color) */
|
|
14
|
-
gradientTo: string;
|
|
15
|
-
/** 추가 Tailwind 클래스 */
|
|
16
|
-
className?: string;
|
|
17
|
-
onClick?(): void;
|
|
18
|
-
}
|
|
19
|
-
export declare function InfoButton({ mainText, subText, imageSrc, imageAlt, gradientFrom, gradientTo, onClick, className, }: InfoButtonProps): React.ReactElement;
|
|
20
|
-
export {};
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import { Meta, StoryObj } from '@storybook/react-vite';
|
|
2
|
-
import { InfoButton } from './InfoButton';
|
|
3
|
-
declare const meta: Meta<typeof InfoButton>;
|
|
4
|
-
export default meta;
|
|
5
|
-
type Story = StoryObj<typeof InfoButton>;
|
|
6
|
-
export declare const Default: Story;
|
|
7
|
-
export declare const MobileGrid: Story;
|
|
8
|
-
export declare const TabletGrid: Story;
|
|
9
|
-
export declare const DesktopGrid: Story;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from './InfoButton';
|
|
@@ -1,69 +0,0 @@
|
|
|
1
|
-
import { default as React } from 'react';
|
|
2
|
-
export interface AppLayoutProps {
|
|
3
|
-
children: React.ReactNode;
|
|
4
|
-
className?: string;
|
|
5
|
-
}
|
|
6
|
-
/**
|
|
7
|
-
* AppLayout
|
|
8
|
-
* 전체 페이지의 최상위 래퍼 컴포넌트.
|
|
9
|
-
* `AppLayoutHeader`, `AppLayoutBody`와 함께 사용합니다.
|
|
10
|
-
*
|
|
11
|
-
* @example
|
|
12
|
-
* ```tsx
|
|
13
|
-
* <AppLayout>
|
|
14
|
-
* <AppLayoutHeader>
|
|
15
|
-
* <AppHeader ... />
|
|
16
|
-
* </AppLayoutHeader>
|
|
17
|
-
* <AppLayoutBody sidebar={<AppLayoutSidebar>...</AppLayoutSidebar>}>
|
|
18
|
-
* {children}
|
|
19
|
-
* </AppLayoutBody>
|
|
20
|
-
* </AppLayout>
|
|
21
|
-
* ```
|
|
22
|
-
*/
|
|
23
|
-
export declare function AppLayout({ children, className, }: AppLayoutProps): React.ReactElement;
|
|
24
|
-
export interface AppLayoutHeaderProps {
|
|
25
|
-
children: React.ReactNode;
|
|
26
|
-
className?: string;
|
|
27
|
-
}
|
|
28
|
-
/**
|
|
29
|
-
* AppLayoutHeader
|
|
30
|
-
* 화면 상단에 sticky하게 고정되는 헤더 슬롯.
|
|
31
|
-
*/
|
|
32
|
-
export declare function AppLayoutHeader({ children, className, }: AppLayoutHeaderProps): React.ReactElement;
|
|
33
|
-
export interface AppLayoutBodyProps {
|
|
34
|
-
children: React.ReactNode;
|
|
35
|
-
/** 전달 시 오른쪽에 사이드바 열 추가 (lg 이상에서만 표시) */
|
|
36
|
-
sidebar?: React.ReactNode;
|
|
37
|
-
className?: string;
|
|
38
|
-
}
|
|
39
|
-
/**
|
|
40
|
-
* AppLayoutBody
|
|
41
|
-
* 메인 콘텐츠 영역. `sidebar` prop을 전달하면 lg 이상에서 오른쪽 사이드바 열이 추가됩니다.
|
|
42
|
-
*/
|
|
43
|
-
export declare function AppLayoutBody({ children, sidebar, className, }: AppLayoutBodyProps): React.ReactElement;
|
|
44
|
-
export interface AppLayoutSidebarProps {
|
|
45
|
-
children: React.ReactNode;
|
|
46
|
-
/** sticky top 위치 — 헤더가 있으면 "top-28", 없으면 "top-6" */
|
|
47
|
-
stickyTop?: string;
|
|
48
|
-
className?: string;
|
|
49
|
-
}
|
|
50
|
-
/**
|
|
51
|
-
* AppLayoutSidebar
|
|
52
|
-
* 데스크톱(lg 이상)에서 오른쪽에 sticky하게 고정되는 사이드바 슬롯.
|
|
53
|
-
* `AppLayoutBody`의 `sidebar` prop으로 전달합니다.
|
|
54
|
-
*/
|
|
55
|
-
export declare function AppLayoutSidebar({ children, stickyTop, className, }: AppLayoutSidebarProps): React.ReactElement;
|
|
56
|
-
export interface AppLayoutOverlayProps {
|
|
57
|
-
children: React.ReactNode;
|
|
58
|
-
/** 오버레이 표시 여부 (opacity 트랜지션 적용) */
|
|
59
|
-
open: boolean;
|
|
60
|
-
className?: string;
|
|
61
|
-
}
|
|
62
|
-
/**
|
|
63
|
-
* AppLayoutOverlay
|
|
64
|
-
* 화면 우측 상단에 fixed로 표시되는 오버레이 패널.
|
|
65
|
-
* 주로 모바일에서 프로필 클릭 시 나타나는 사이드바에 사용합니다.
|
|
66
|
-
*
|
|
67
|
-
* 마운트/언마운트는 부모에서 관리하고, `open` prop으로 fade를 제어합니다.
|
|
68
|
-
*/
|
|
69
|
-
export declare function AppLayoutOverlay({ children, open, className, }: AppLayoutOverlayProps): React.ReactElement;
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import { default as React } from 'react';
|
|
2
|
-
export interface AppLayoutContextValue {
|
|
3
|
-
/** 오른쪽 사이드바가 렌더링되어 있는지 여부 */
|
|
4
|
-
hasRightSidebar: boolean;
|
|
5
|
-
/** 오른쪽 사이드바가 접혀있는지 여부 */
|
|
6
|
-
isRightSidebarCollapsed: boolean;
|
|
7
|
-
}
|
|
8
|
-
export declare function AppLayoutProvider({ value, children, }: {
|
|
9
|
-
value: AppLayoutContextValue;
|
|
10
|
-
children: React.ReactNode;
|
|
11
|
-
}): React.ReactElement;
|
|
12
|
-
export declare function useAppLayoutContext(): AppLayoutContextValue;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export declare function PageWatermark(): React.ReactElement;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from './PageWatermark';
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
export interface PaginationProps {
|
|
3
|
-
/** 현재 페이지 (1부터 시작) */
|
|
4
|
-
currentPage: number;
|
|
5
|
-
/** 총 페이지 수 */
|
|
6
|
-
totalPages: number;
|
|
7
|
-
/** 페이지 변경 핸들러 */
|
|
8
|
-
onPageChange: (page: number) => void;
|
|
9
|
-
/** 현재 페이지 양옆에 보여줄 페이지 개수 */
|
|
10
|
-
siblingCount?: number;
|
|
11
|
-
/** 추가 클래스 */
|
|
12
|
-
className?: string;
|
|
13
|
-
}
|
|
14
|
-
export declare function Pagination({ currentPage, totalPages, onPageChange, siblingCount, className, }: PaginationProps): React.ReactElement | null;
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import { Meta, StoryObj } from '@storybook/react-vite';
|
|
2
|
-
import { Pagination } from './Pagination';
|
|
3
|
-
declare const meta: Meta<typeof Pagination>;
|
|
4
|
-
export default meta;
|
|
5
|
-
type Story = StoryObj<typeof Pagination>;
|
|
6
|
-
export declare const Default: Story;
|
|
7
|
-
export declare const Short: Story;
|
|
8
|
-
export declare const ManyPages: Story;
|
|
9
|
-
export declare const MobileView: Story;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from './Pagination';
|
|
@@ -1,37 +0,0 @@
|
|
|
1
|
-
import { default as React } from 'react';
|
|
2
|
-
type ProfileSize = "sm" | "md" | "lg";
|
|
3
|
-
type ProfileLayout = "horizontal" | "vertical";
|
|
4
|
-
export interface ProfileProps {
|
|
5
|
-
/** 닉네임 */
|
|
6
|
-
nickname: string;
|
|
7
|
-
/** 프로필 이미지 URL */
|
|
8
|
-
imageUrl?: string;
|
|
9
|
-
/** 크기 (기본값: md) */
|
|
10
|
-
size?: ProfileSize;
|
|
11
|
-
/** 레이아웃 방향 (기본값: horizontal) */
|
|
12
|
-
layout?: ProfileLayout;
|
|
13
|
-
/** 닉네임 아래(vertical) 또는 옆(horizontal)에 표시되는 상태 텍스트 */
|
|
14
|
-
statusText?: string;
|
|
15
|
-
/** 클릭 핸들러 — 전달 시 버튼으로 렌더링됩니다 */
|
|
16
|
-
onClick?: () => void;
|
|
17
|
-
className?: string;
|
|
18
|
-
}
|
|
19
|
-
/**
|
|
20
|
-
* Profile
|
|
21
|
-
* 프로필 사진과 닉네임을 함께 보여주는 컴포넌트.
|
|
22
|
-
*
|
|
23
|
-
* @param nickname 닉네임
|
|
24
|
-
* @param imageUrl 프로필 이미지 URL
|
|
25
|
-
* @param size 크기: sm | md | lg (기본값: md)
|
|
26
|
-
* @param layout 방향: horizontal | vertical (기본값: horizontal)
|
|
27
|
-
* @param statusText 닉네임 옆/아래에 표시되는 상태 텍스트
|
|
28
|
-
* @param onClick 전달 시 버튼으로 렌더링
|
|
29
|
-
*
|
|
30
|
-
* @example
|
|
31
|
-
* ```tsx
|
|
32
|
-
* <Profile nickname="홍길동" imageUrl="/profile.jpg" size="md" />
|
|
33
|
-
* <Profile nickname="홍길동" statusText="온라인" layout="vertical" size="lg" onClick={() => router.push('/profile')} />
|
|
34
|
-
* ```
|
|
35
|
-
*/
|
|
36
|
-
export declare function Profile({ nickname, imageUrl, size, layout, statusText, onClick, className, }: ProfileProps): React.ReactElement;
|
|
37
|
-
export {};
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import { Meta, StoryObj } from '@storybook/react-vite';
|
|
2
|
-
import { Profile } from './Profile';
|
|
3
|
-
declare const meta: Meta<typeof Profile>;
|
|
4
|
-
export default meta;
|
|
5
|
-
type Story = StoryObj<typeof Profile>;
|
|
6
|
-
export declare const Default: Story;
|
|
7
|
-
export declare const WithStatus: Story;
|
|
8
|
-
export declare const WithImage: Story;
|
|
9
|
-
export declare const Sizes: Story;
|
|
10
|
-
export declare const Vertical: Story;
|
|
11
|
-
export declare const VerticalWithStatus: Story;
|
|
12
|
-
export declare const Clickable: Story;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from './Profile';
|
|
@@ -1,41 +0,0 @@
|
|
|
1
|
-
import { default as React } from 'react';
|
|
2
|
-
type RightSidebarProgressTone = "blue" | "green" | "orange";
|
|
3
|
-
export interface RightSidebarChallenge {
|
|
4
|
-
id: string;
|
|
5
|
-
title: string;
|
|
6
|
-
progress: number;
|
|
7
|
-
hasDeadline?: boolean;
|
|
8
|
-
tone?: RightSidebarProgressTone;
|
|
9
|
-
}
|
|
10
|
-
export interface RightSidebarProps {
|
|
11
|
-
isLoggedIn?: boolean;
|
|
12
|
-
isLoading?: boolean;
|
|
13
|
-
userName?: string;
|
|
14
|
-
userSubtitle?: string;
|
|
15
|
-
userImage?: string;
|
|
16
|
-
streakDays: number;
|
|
17
|
-
fixed?: boolean;
|
|
18
|
-
className?: string;
|
|
19
|
-
diaryButtonLabel?: string;
|
|
20
|
-
myPageButtonLabel?: string;
|
|
21
|
-
loginButtonLabel?: string;
|
|
22
|
-
loginPromptMessage?: string;
|
|
23
|
-
settingButtonLabel?: string;
|
|
24
|
-
challengeTitle?: string;
|
|
25
|
-
challenges?: RightSidebarChallenge[];
|
|
26
|
-
emptyChallengeMessage?: string;
|
|
27
|
-
joinChallengeButtonLabel?: string;
|
|
28
|
-
joinChallengeMaxUserCount?: number;
|
|
29
|
-
createChallengeButtonLabel?: string;
|
|
30
|
-
collapsible?: boolean;
|
|
31
|
-
onCollapseClick?(): void;
|
|
32
|
-
onOpenSettings?(): void;
|
|
33
|
-
onWriteDiary?(): void;
|
|
34
|
-
onGoMyPage?(): void;
|
|
35
|
-
onLogin?(): void;
|
|
36
|
-
onJoinChallenge?(): void;
|
|
37
|
-
onCreateChallenge?(): void;
|
|
38
|
-
onChallengeClick?(challenge: RightSidebarChallenge): void;
|
|
39
|
-
}
|
|
40
|
-
export declare function RightSidebar({ isLoggedIn, isLoading, userName, userSubtitle, userImage, streakDays, fixed, collapsible, className, diaryButtonLabel, myPageButtonLabel, loginButtonLabel, loginPromptMessage, settingButtonLabel, challengeTitle, challenges, emptyChallengeMessage, joinChallengeButtonLabel, joinChallengeMaxUserCount, createChallengeButtonLabel, onCollapseClick, onOpenSettings, onWriteDiary, onGoMyPage, onLogin, onJoinChallenge, onCreateChallenge, onChallengeClick, }: RightSidebarProps): React.ReactElement;
|
|
41
|
-
export {};
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
import { Meta, StoryObj } from '@storybook/react-vite';
|
|
2
|
-
import { RightSidebar } from './RightSidebar';
|
|
3
|
-
declare const meta: Meta<typeof RightSidebar>;
|
|
4
|
-
export default meta;
|
|
5
|
-
type Story = StoryObj<typeof RightSidebar>;
|
|
6
|
-
export declare const Default: Story;
|
|
7
|
-
export declare const LoggedOut: Story;
|
|
8
|
-
export declare const EmptyChallenges: Story;
|
|
9
|
-
export declare const NotCollapsible: Story;
|
|
10
|
-
export declare const Mobile: Story;
|
|
11
|
-
export declare const EmptyChallengesJoinEnabled: Story;
|
|
12
|
-
export declare const Loading: Story;
|
|
13
|
-
export declare const LoadingLoggedOut: Story;
|
|
14
|
-
export declare const LoadingToLoadedTransition: Story;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from './RightSidebar';
|
|
@@ -1,31 +0,0 @@
|
|
|
1
|
-
import { default as React } from 'react';
|
|
2
|
-
type DayTone = "default" | "strong" | "accent" | "muted";
|
|
3
|
-
type BarTone = "main" | "soft";
|
|
4
|
-
export interface ScheduleCalendarBar {
|
|
5
|
-
width?: number | string;
|
|
6
|
-
tone?: BarTone;
|
|
7
|
-
}
|
|
8
|
-
export interface ScheduleCalendarCell {
|
|
9
|
-
id?: string;
|
|
10
|
-
day?: React.ReactNode;
|
|
11
|
-
dayTone?: DayTone;
|
|
12
|
-
title?: React.ReactNode;
|
|
13
|
-
subtitle?: React.ReactNode;
|
|
14
|
-
bars?: ScheduleCalendarBar[];
|
|
15
|
-
highlighted?: boolean;
|
|
16
|
-
muted?: boolean;
|
|
17
|
-
colSpan?: number;
|
|
18
|
-
content?: React.ReactNode;
|
|
19
|
-
}
|
|
20
|
-
export interface ScheduleCalendarProps {
|
|
21
|
-
rows: ScheduleCalendarCell[][];
|
|
22
|
-
weekLabels?: string[];
|
|
23
|
-
cellMinHeight?: number;
|
|
24
|
-
className?: string;
|
|
25
|
-
}
|
|
26
|
-
/**
|
|
27
|
-
* ScheduleCalendar
|
|
28
|
-
* 주 단위 표 형태로 일정을 보여주는 커스텀 캘린더 컴포넌트.
|
|
29
|
-
*/
|
|
30
|
-
export declare function ScheduleCalendar({ rows, weekLabels, cellMinHeight, className, }: ScheduleCalendarProps): React.ReactElement;
|
|
31
|
-
export {};
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import { Meta, StoryObj } from '@storybook/react-vite';
|
|
2
|
-
import { ScheduleCalendar } from './ScheduleCalendar';
|
|
3
|
-
declare const meta: Meta<typeof ScheduleCalendar>;
|
|
4
|
-
export default meta;
|
|
5
|
-
type Story = StoryObj<typeof ScheduleCalendar>;
|
|
6
|
-
export declare const OneMonth: Story;
|
|
7
|
-
export declare const TwoWeeks: Story;
|
|
8
|
-
export declare const ThreeWeeks: Story;
|
|
9
|
-
export declare const MobileOneMonth: Story;
|
|
10
|
-
export declare const MobileTwoWeeks: Story;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from './ScheduleCalendar';
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
import { default as React } from 'react';
|
|
2
|
-
import { IconName } from '../Icons/Icon';
|
|
3
|
-
export interface StatContainerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
|
|
4
|
-
icon?: React.ReactNode;
|
|
5
|
-
iconName?: IconName;
|
|
6
|
-
title: React.ReactNode;
|
|
7
|
-
value: React.ReactNode;
|
|
8
|
-
unit: React.ReactNode;
|
|
9
|
-
iconClassName?: string;
|
|
10
|
-
}
|
|
11
|
-
/**
|
|
12
|
-
* StatContainer
|
|
13
|
-
* 아이콘, 제목, 데이터, 단위를 표시하는 정보 카드 컴포넌트
|
|
14
|
-
*/
|
|
15
|
-
export declare function StatContainer({ icon, iconName, title, value, unit, className, iconClassName, ...props }: StatContainerProps): React.ReactElement;
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
import { Meta, StoryObj } from '@storybook/react-vite';
|
|
2
|
-
import { StatContainer } from './StatContainer';
|
|
3
|
-
declare const meta: Meta<typeof StatContainer>;
|
|
4
|
-
export default meta;
|
|
5
|
-
type Story = StoryObj<typeof StatContainer>;
|
|
6
|
-
export declare const Default: Story;
|
|
7
|
-
export declare const DashboardGrid: Story;
|