@mbao01/common 0.0.53 → 0.0.55
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/types/components/Timeline/Timeline.d.ts +30 -0
- package/dist/types/components/Timeline/Timeline.example.d.ts +15 -0
- package/dist/types/components/Timeline/constants.d.ts +23 -0
- package/dist/types/components/Timeline/index.d.ts +1 -0
- package/dist/types/components/Timeline/types.d.ts +15 -0
- package/dist/types/index.d.ts +1 -0
- package/package.json +2 -2
- package/src/components/Timeline/Timeline.example.tsx +390 -0
- package/src/components/Timeline/Timeline.tsx +98 -0
- package/src/components/Timeline/constants.ts +214 -0
- package/src/components/Timeline/index.ts +1 -0
- package/src/components/Timeline/types.ts +32 -0
- package/src/index.ts +1 -0
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import { TimelineProps } from './types';
|
|
2
|
+
declare const Timeline: {
|
|
3
|
+
({ children, className, positions, ...props }: TimelineProps): import("react/jsx-runtime").JSX.Element;
|
|
4
|
+
displayName: string;
|
|
5
|
+
Dot: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLDivElement> & {
|
|
6
|
+
icon?: React.ReactNode;
|
|
7
|
+
} & Omit<{
|
|
8
|
+
variant?: "accent" | "error" | "info" | "neutral" | "primary" | "secondary" | "success" | "warning" | "content" | undefined;
|
|
9
|
+
status?: "default" | "success" | "active" | "failed" | "custom" | undefined;
|
|
10
|
+
fill?: boolean | undefined;
|
|
11
|
+
border?: "accent" | "error" | "info" | "neutral" | "primary" | "secondary" | "success" | "warning" | "content" | undefined;
|
|
12
|
+
}, "status"> & {
|
|
13
|
+
status?: Exclude<"default" | "success" | "active" | "failed" | "custom" | undefined, "custom">;
|
|
14
|
+
} & import('react').RefAttributes<HTMLDivElement>>;
|
|
15
|
+
Item: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLLIElement> & {
|
|
16
|
+
variant?: "accent" | "error" | "info" | "neutral" | "primary" | "secondary" | "success" | "warning" | "content" | undefined;
|
|
17
|
+
} & import('react').RefAttributes<HTMLLIElement>>;
|
|
18
|
+
Content: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLDivElement> & {
|
|
19
|
+
side?: "right" | "left" | undefined;
|
|
20
|
+
} & import('react').RefAttributes<HTMLDivElement>>;
|
|
21
|
+
Heading: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLParagraphElement> & {
|
|
22
|
+
variant?: "accent" | "error" | "info" | "neutral" | "primary" | "secondary" | "success" | "warning" | "content" | undefined;
|
|
23
|
+
size?: "xs" | "sm" | "lg" | "base" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | undefined;
|
|
24
|
+
side?: "right" | "left" | undefined;
|
|
25
|
+
} & import('react').RefAttributes<HTMLParagraphElement>>;
|
|
26
|
+
Line: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLHRElement> & {
|
|
27
|
+
variant?: "accent" | "error" | "info" | "neutral" | "primary" | "secondary" | "success" | "warning" | "content" | undefined;
|
|
28
|
+
} & import('react').RefAttributes<HTMLHRElement>>;
|
|
29
|
+
};
|
|
30
|
+
export { Timeline };
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { TimelineProps, TimelineContentProps, TimelineDotProps, TimelineHeadingProps, TimelineItemProps, TimelineLineProps } from './types';
|
|
2
|
+
type TimelineExampleProps = Partial<{
|
|
3
|
+
timeline: TimelineProps;
|
|
4
|
+
item: TimelineItemProps;
|
|
5
|
+
dot: TimelineDotProps;
|
|
6
|
+
content: TimelineContentProps;
|
|
7
|
+
heading: TimelineHeadingProps;
|
|
8
|
+
line: TimelineLineProps;
|
|
9
|
+
}>;
|
|
10
|
+
export declare const TimelineExample: ({ timeline, dot, item, content, heading, line, }: TimelineExampleProps) => import("react/jsx-runtime").JSX.Element;
|
|
11
|
+
export declare const TimelineAlternateExample: ({ timeline, dot, item, content, heading, line, }: TimelineExampleProps) => import("react/jsx-runtime").JSX.Element;
|
|
12
|
+
export declare const TimelineLeftExample: ({ timeline, dot, item, content, heading, line, }: TimelineExampleProps) => import("react/jsx-runtime").JSX.Element;
|
|
13
|
+
export declare const TimelineLabelsExample: ({ timeline, dot, item, content, heading, line, }: TimelineExampleProps) => import("react/jsx-runtime").JSX.Element;
|
|
14
|
+
export declare const TimelineRightExample: ({ timeline, dot, item, content, heading, line, }: TimelineExampleProps) => import("react/jsx-runtime").JSX.Element;
|
|
15
|
+
export {};
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
export declare const getTimelineClasses: (props?: ({
|
|
2
|
+
positions?: "center" | "right" | "left" | null | undefined;
|
|
3
|
+
} & import('class-variance-authority/types').ClassProp) | undefined) => string;
|
|
4
|
+
export declare const getTimelineItemClasses: (props?: ({
|
|
5
|
+
variant?: "accent" | "error" | "info" | "neutral" | "primary" | "secondary" | "success" | "warning" | "content" | null | undefined;
|
|
6
|
+
} & import('class-variance-authority/types').ClassProp) | undefined) => string;
|
|
7
|
+
export declare const getTimelineDotClasses: (props?: ({
|
|
8
|
+
status?: "default" | "success" | "active" | "failed" | "custom" | null | undefined;
|
|
9
|
+
border?: "accent" | "error" | "info" | "neutral" | "primary" | "secondary" | "success" | "warning" | "content" | null | undefined;
|
|
10
|
+
fill?: boolean | null | undefined;
|
|
11
|
+
variant?: "accent" | "error" | "info" | "neutral" | "primary" | "secondary" | "success" | "warning" | "content" | null | undefined;
|
|
12
|
+
} & import('class-variance-authority/types').ClassProp) | undefined) => string;
|
|
13
|
+
export declare const getTimelineContentClasses: (props?: ({
|
|
14
|
+
side?: "right" | "left" | null | undefined;
|
|
15
|
+
} & import('class-variance-authority/types').ClassProp) | undefined) => string;
|
|
16
|
+
export declare const getTimelineHeadingClasses: (props?: ({
|
|
17
|
+
side?: "right" | "left" | null | undefined;
|
|
18
|
+
variant?: "accent" | "error" | "info" | "neutral" | "primary" | "secondary" | "success" | "warning" | "content" | null | undefined;
|
|
19
|
+
size?: "xs" | "sm" | "lg" | "base" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | null | undefined;
|
|
20
|
+
} & import('class-variance-authority/types').ClassProp) | undefined) => string;
|
|
21
|
+
export declare const getTimelineLineClasses: (props?: ({
|
|
22
|
+
variant?: "accent" | "error" | "info" | "neutral" | "primary" | "secondary" | "success" | "warning" | "content" | null | undefined;
|
|
23
|
+
} & import('class-variance-authority/types').ClassProp) | undefined) => string;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { Timeline } from './Timeline';
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { HTMLAttributes } from 'react';
|
|
2
|
+
import { VariantProps } from '../../libs';
|
|
3
|
+
import { getTimelineClasses, getTimelineContentClasses, getTimelineDotClasses, getTimelineHeadingClasses, getTimelineItemClasses, getTimelineLineClasses } from './constants';
|
|
4
|
+
export type TimelineProps = HTMLAttributes<HTMLUListElement> & VariantProps<typeof getTimelineClasses>;
|
|
5
|
+
export type TimelineItemProps = HTMLAttributes<HTMLLIElement> & VariantProps<typeof getTimelineItemClasses>;
|
|
6
|
+
type DotVariants = VariantProps<typeof getTimelineDotClasses>;
|
|
7
|
+
export type TimelineDotProps = HTMLAttributes<HTMLDivElement> & {
|
|
8
|
+
icon?: React.ReactNode;
|
|
9
|
+
} & Omit<DotVariants, "status"> & {
|
|
10
|
+
status?: Exclude<DotVariants["status"], "custom">;
|
|
11
|
+
};
|
|
12
|
+
export type TimelineContentProps = HTMLAttributes<HTMLDivElement> & VariantProps<typeof getTimelineContentClasses>;
|
|
13
|
+
export type TimelineHeadingProps = HTMLAttributes<HTMLParagraphElement> & VariantProps<typeof getTimelineHeadingClasses>;
|
|
14
|
+
export type TimelineLineProps = HTMLAttributes<HTMLHRElement> & VariantProps<typeof getTimelineLineClasses>;
|
|
15
|
+
export {};
|
package/dist/types/index.d.ts
CHANGED
|
@@ -23,6 +23,7 @@ export * from './components/Sonner';
|
|
|
23
23
|
export * from './components/Table';
|
|
24
24
|
export * from './components/Tabs';
|
|
25
25
|
export * from './components/Text';
|
|
26
|
+
export * from './components/Timeline';
|
|
26
27
|
/** data input */
|
|
27
28
|
export * from './components/DatetimePicker';
|
|
28
29
|
export * from './components/FileUploader';
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mbao01/common",
|
|
3
3
|
"private": false,
|
|
4
|
-
"version": "0.0.
|
|
4
|
+
"version": "0.0.55",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"author": "Ayomide Bakare",
|
|
7
7
|
"license": "MIT",
|
|
@@ -172,5 +172,5 @@
|
|
|
172
172
|
"recharts": "^2.13.0",
|
|
173
173
|
"typescript": "^5.2.2"
|
|
174
174
|
},
|
|
175
|
-
"gitHead": "
|
|
175
|
+
"gitHead": "a1cade5cde1e079c2746a9c703f7bd5def5063f4"
|
|
176
176
|
}
|
|
@@ -0,0 +1,390 @@
|
|
|
1
|
+
import { PlusIcon } from "lucide-react";
|
|
2
|
+
import type { TimelineProps } from "./types";
|
|
3
|
+
import { Timeline } from "./Timeline";
|
|
4
|
+
import {
|
|
5
|
+
TimelineContentProps,
|
|
6
|
+
TimelineDotProps,
|
|
7
|
+
TimelineHeadingProps,
|
|
8
|
+
TimelineItemProps,
|
|
9
|
+
TimelineLineProps,
|
|
10
|
+
} from "./types";
|
|
11
|
+
|
|
12
|
+
type TimelineExampleProps = Partial<{
|
|
13
|
+
timeline: TimelineProps;
|
|
14
|
+
item: TimelineItemProps;
|
|
15
|
+
dot: TimelineDotProps;
|
|
16
|
+
content: TimelineContentProps;
|
|
17
|
+
heading: TimelineHeadingProps;
|
|
18
|
+
line: TimelineLineProps;
|
|
19
|
+
}>;
|
|
20
|
+
|
|
21
|
+
export const TimelineExample = ({
|
|
22
|
+
timeline,
|
|
23
|
+
dot,
|
|
24
|
+
item,
|
|
25
|
+
content,
|
|
26
|
+
heading,
|
|
27
|
+
line,
|
|
28
|
+
}: TimelineExampleProps) => {
|
|
29
|
+
return (
|
|
30
|
+
<Timeline {...timeline}>
|
|
31
|
+
<Timeline.Item variant="success" {...item}>
|
|
32
|
+
<Timeline.Heading variant="content" {...heading}>
|
|
33
|
+
Plan!
|
|
34
|
+
</Timeline.Heading>
|
|
35
|
+
<Timeline.Dot border="primary" status="success" variant="success" {...dot} />
|
|
36
|
+
<Timeline.Line variant="success" {...line} />
|
|
37
|
+
<Timeline.Content {...content}>
|
|
38
|
+
Before diving into coding, it is crucial to plan your software project thoroughly.
|
|
39
|
+
</Timeline.Content>
|
|
40
|
+
</Timeline.Item>
|
|
41
|
+
<Timeline.Item {...item}>
|
|
42
|
+
<Timeline.Heading {...heading}>Done!</Timeline.Heading>
|
|
43
|
+
<Timeline.Line {...line} />
|
|
44
|
+
<Timeline.Dot border="content" {...dot} />
|
|
45
|
+
</Timeline.Item>
|
|
46
|
+
<Timeline.Item {...item} variant="success">
|
|
47
|
+
<Timeline.Heading {...heading} variant="success">
|
|
48
|
+
Done!
|
|
49
|
+
</Timeline.Heading>
|
|
50
|
+
<Timeline.Dot border="success" icon={<PlusIcon />} {...dot} />
|
|
51
|
+
</Timeline.Item>
|
|
52
|
+
</Timeline>
|
|
53
|
+
);
|
|
54
|
+
};
|
|
55
|
+
|
|
56
|
+
export const TimelineAlternateExample = ({
|
|
57
|
+
timeline,
|
|
58
|
+
dot,
|
|
59
|
+
item,
|
|
60
|
+
content,
|
|
61
|
+
heading,
|
|
62
|
+
line,
|
|
63
|
+
}: TimelineExampleProps) => {
|
|
64
|
+
return (
|
|
65
|
+
<Timeline positions="center" {...timeline}>
|
|
66
|
+
<Timeline.Item variant="info" {...item}>
|
|
67
|
+
<Timeline.Heading side="left" {...heading}>
|
|
68
|
+
Plan!
|
|
69
|
+
</Timeline.Heading>
|
|
70
|
+
<Timeline.Dot border="neutral" status="success" {...dot} />
|
|
71
|
+
<Timeline.Line variant="secondary" {...line} />
|
|
72
|
+
<Timeline.Content side="left" {...content}>
|
|
73
|
+
Before diving into coding, it is crucial to plan your software project thoroughly. This
|
|
74
|
+
involves defining the project scope, setting clear objectives, and identifying the target
|
|
75
|
+
audience. Additionally, creating a timeline and allocating resources appropriately will
|
|
76
|
+
contribute to a successful development process.
|
|
77
|
+
</Timeline.Content>
|
|
78
|
+
</Timeline.Item>
|
|
79
|
+
<Timeline.Item variant="warning" {...item}>
|
|
80
|
+
<Timeline.Heading side="right" className="text-destructive" {...heading}>
|
|
81
|
+
Design
|
|
82
|
+
</Timeline.Heading>
|
|
83
|
+
<Timeline.Dot border="neutral" status="failed" variant="primary" {...dot} />
|
|
84
|
+
<Timeline.Line variant="success" {...line} />
|
|
85
|
+
<Timeline.Content>
|
|
86
|
+
Designing your software involves creating a blueprint that outlines the structure, user
|
|
87
|
+
interface, and functionality of your application. Consider user experience (UX)
|
|
88
|
+
principles, wireframing, and prototyping to ensure an intuitive and visually appealing
|
|
89
|
+
design.
|
|
90
|
+
</Timeline.Content>
|
|
91
|
+
</Timeline.Item>
|
|
92
|
+
<Timeline.Item variant="error" {...item}>
|
|
93
|
+
<Timeline.Heading side="left" {...heading}>
|
|
94
|
+
Code
|
|
95
|
+
</Timeline.Heading>
|
|
96
|
+
<Timeline.Dot border="success" status="active" variant="accent" {...dot} />
|
|
97
|
+
<Timeline.Line {...line} />
|
|
98
|
+
<Timeline.Content side="left" {...content}>
|
|
99
|
+
The coding phase involves translating your design into actual code. Choose a programming
|
|
100
|
+
language and framework that aligns with your project requirements. Follow best practices,
|
|
101
|
+
such as modular and reusable code, to enhance maintainability and scalability. Regularly
|
|
102
|
+
test your code to identify and fix any bugs or errors.
|
|
103
|
+
</Timeline.Content>
|
|
104
|
+
</Timeline.Item>
|
|
105
|
+
<Timeline.Item {...item}>
|
|
106
|
+
<Timeline.Heading {...heading}>Test</Timeline.Heading>
|
|
107
|
+
<Timeline.Dot border="info" {...dot} />
|
|
108
|
+
<Timeline.Line {...line} />
|
|
109
|
+
<Timeline.Content>
|
|
110
|
+
Thorough testing is essential to ensure the quality and reliability of your software.
|
|
111
|
+
Implement different testing methodologies, including unit testing, integration testing,
|
|
112
|
+
and user acceptance testing. This helps identify and rectify any issues before deploying
|
|
113
|
+
the software.
|
|
114
|
+
</Timeline.Content>
|
|
115
|
+
</Timeline.Item>
|
|
116
|
+
<Timeline.Item {...item}>
|
|
117
|
+
<Timeline.Heading side="left" {...heading}>
|
|
118
|
+
Deploy
|
|
119
|
+
</Timeline.Heading>
|
|
120
|
+
<Timeline.Dot border="primary" {...dot} />
|
|
121
|
+
<Timeline.Line {...line} />
|
|
122
|
+
<Timeline.Content side="left" {...content}>
|
|
123
|
+
Once your software has passed rigorous testing, it's time to deploy it. Consider the
|
|
124
|
+
deployment environment, whether it's on-premises or in the cloud. Ensure proper
|
|
125
|
+
documentation and provide clear instructions for installation and configuration.
|
|
126
|
+
</Timeline.Content>
|
|
127
|
+
</Timeline.Item>
|
|
128
|
+
<Timeline.Item {...item}>
|
|
129
|
+
<Timeline.Dot border="error" {...dot} />
|
|
130
|
+
<Timeline.Heading {...heading}>Done!</Timeline.Heading>
|
|
131
|
+
</Timeline.Item>
|
|
132
|
+
</Timeline>
|
|
133
|
+
);
|
|
134
|
+
};
|
|
135
|
+
|
|
136
|
+
export const TimelineLeftExample = ({
|
|
137
|
+
timeline,
|
|
138
|
+
dot,
|
|
139
|
+
item,
|
|
140
|
+
content,
|
|
141
|
+
heading,
|
|
142
|
+
line,
|
|
143
|
+
}: TimelineExampleProps) => {
|
|
144
|
+
return (
|
|
145
|
+
<Timeline {...timeline}>
|
|
146
|
+
<Timeline.Item variant="primary" {...item}>
|
|
147
|
+
<Timeline.Heading>Plan!</Timeline.Heading>
|
|
148
|
+
<Timeline.Dot border="info" status="success" {...dot} />
|
|
149
|
+
<Timeline.Line variant="neutral" {...line} />
|
|
150
|
+
<Timeline.Content {...content}>
|
|
151
|
+
Before diving into coding, it is crucial to plan your software project thoroughly. This
|
|
152
|
+
involves defining the project scope, setting clear objectives, and identifying the target
|
|
153
|
+
audience. Additionally, creating a timeline and allocating resources appropriately will
|
|
154
|
+
contribute to a successful development process.
|
|
155
|
+
</Timeline.Content>
|
|
156
|
+
</Timeline.Item>
|
|
157
|
+
<Timeline.Item variant="success" {...item}>
|
|
158
|
+
<Timeline.Heading side="right" className="text-destructive" {...heading}>
|
|
159
|
+
Design
|
|
160
|
+
</Timeline.Heading>
|
|
161
|
+
<Timeline.Dot border="info" fill status="failed" {...dot} />
|
|
162
|
+
<Timeline.Line variant="neutral" {...line} />
|
|
163
|
+
<Timeline.Content {...content}>
|
|
164
|
+
Designing your software involves creating a blueprint that outlines the structure, user
|
|
165
|
+
interface, and functionality of your application. Consider user experience (UX)
|
|
166
|
+
principles, wireframing, and prototyping to ensure an intuitive and visually appealing
|
|
167
|
+
design.
|
|
168
|
+
</Timeline.Content>
|
|
169
|
+
</Timeline.Item>
|
|
170
|
+
<Timeline.Item {...item}>
|
|
171
|
+
<Timeline.Heading {...heading}>Code</Timeline.Heading>
|
|
172
|
+
<Timeline.Dot border="info" fill status="active" variant="success" {...dot} />
|
|
173
|
+
<Timeline.Line {...line} />
|
|
174
|
+
<Timeline.Content {...content}>
|
|
175
|
+
The coding phase involves translating your design into actual code. Choose a programming
|
|
176
|
+
language and framework that aligns with your project requirements. Follow best practices,
|
|
177
|
+
such as modular and reusable code, to enhance maintainability and scalability. Regularly
|
|
178
|
+
test your code to identify and fix any bugs or errors.
|
|
179
|
+
</Timeline.Content>
|
|
180
|
+
</Timeline.Item>
|
|
181
|
+
<Timeline.Item {...item}>
|
|
182
|
+
<Timeline.Heading {...heading}>Test</Timeline.Heading>
|
|
183
|
+
<Timeline.Dot {...dot} />
|
|
184
|
+
<Timeline.Line {...line} />
|
|
185
|
+
<Timeline.Content {...content}>
|
|
186
|
+
Thorough testing is essential to ensure the quality and reliability of your software.
|
|
187
|
+
Implement different testing methodologies, including unit testing, integration testing,
|
|
188
|
+
and user acceptance testing. This helps identify and rectify any issues before deploying
|
|
189
|
+
the software.
|
|
190
|
+
</Timeline.Content>
|
|
191
|
+
</Timeline.Item>
|
|
192
|
+
<Timeline.Item {...item}>
|
|
193
|
+
<Timeline.Heading {...heading}>Deploy</Timeline.Heading>
|
|
194
|
+
<Timeline.Dot {...dot} />
|
|
195
|
+
<Timeline.Line {...line} />
|
|
196
|
+
<Timeline.Content {...content}>
|
|
197
|
+
Once your software has passed rigorous testing, it's time to deploy it. Consider the
|
|
198
|
+
deployment environment, whether it's on-premises or in the cloud. Ensure proper
|
|
199
|
+
documentation and provide clear instructions for installation and configuration.
|
|
200
|
+
</Timeline.Content>
|
|
201
|
+
</Timeline.Item>
|
|
202
|
+
<Timeline.Item {...item}>
|
|
203
|
+
<Timeline.Heading {...heading}>Done!</Timeline.Heading>
|
|
204
|
+
<Timeline.Dot {...dot} />
|
|
205
|
+
</Timeline.Item>
|
|
206
|
+
</Timeline>
|
|
207
|
+
);
|
|
208
|
+
};
|
|
209
|
+
|
|
210
|
+
export const TimelineLabelsExample = ({
|
|
211
|
+
timeline,
|
|
212
|
+
dot,
|
|
213
|
+
item,
|
|
214
|
+
content,
|
|
215
|
+
heading,
|
|
216
|
+
line,
|
|
217
|
+
}: TimelineExampleProps) => {
|
|
218
|
+
return (
|
|
219
|
+
<Timeline positions="center" {...timeline}>
|
|
220
|
+
<Timeline.Item variant="success" {...item}>
|
|
221
|
+
<Timeline.Heading {...heading} side="left">
|
|
222
|
+
Plan!
|
|
223
|
+
</Timeline.Heading>
|
|
224
|
+
<Timeline.Heading {...heading} side="right" variant="secondary">
|
|
225
|
+
Done (05/04/2024)
|
|
226
|
+
</Timeline.Heading>
|
|
227
|
+
<Timeline.Dot status="success" {...dot} />
|
|
228
|
+
<Timeline.Line variant="neutral" {...line} />
|
|
229
|
+
<Timeline.Content side="left" {...content}>
|
|
230
|
+
Before diving into coding, it is crucial to plan your software project thoroughly. This
|
|
231
|
+
involves defining the project scope, setting clear objectives, and identifying the target
|
|
232
|
+
audience. Additionally, creating a timeline and allocating resources appropriately will
|
|
233
|
+
contribute to a successful development process.
|
|
234
|
+
</Timeline.Content>
|
|
235
|
+
</Timeline.Item>
|
|
236
|
+
<Timeline.Item {...item}>
|
|
237
|
+
<Timeline.Heading {...heading} side="right" className="text-destructive">
|
|
238
|
+
Design
|
|
239
|
+
</Timeline.Heading>
|
|
240
|
+
<Timeline.Heading {...heading} side="left" variant="secondary">
|
|
241
|
+
Failed (05/04/2024)
|
|
242
|
+
</Timeline.Heading>
|
|
243
|
+
<Timeline.Dot status="failed" {...dot} />
|
|
244
|
+
<Timeline.Line variant="neutral" {...line} />
|
|
245
|
+
<Timeline.Content>
|
|
246
|
+
Designing your software involves creating a blueprint that outlines the structure, user
|
|
247
|
+
interface, and functionality of your application. Consider user experience (UX)
|
|
248
|
+
principles, wireframing, and prototyping to ensure an intuitive and visually appealing
|
|
249
|
+
design.
|
|
250
|
+
</Timeline.Content>
|
|
251
|
+
</Timeline.Item>
|
|
252
|
+
<Timeline.Item {...item}>
|
|
253
|
+
<Timeline.Heading {...heading} side="left">
|
|
254
|
+
Code
|
|
255
|
+
</Timeline.Heading>
|
|
256
|
+
<Timeline.Heading {...heading} side="right" variant="secondary">
|
|
257
|
+
Current step
|
|
258
|
+
</Timeline.Heading>
|
|
259
|
+
<Timeline.Dot status="active" {...dot} />
|
|
260
|
+
<Timeline.Line {...line} />
|
|
261
|
+
<Timeline.Content side="left" {...content}>
|
|
262
|
+
The coding phase involves translating your design into actual code. Choose a programming
|
|
263
|
+
language and framework that aligns with your project requirements. Follow best practices,
|
|
264
|
+
such as modular and reusable code, to enhance maintainability and scalability. Regularly
|
|
265
|
+
test your code to identify and fix any bugs or errors.
|
|
266
|
+
</Timeline.Content>
|
|
267
|
+
</Timeline.Item>
|
|
268
|
+
<Timeline.Item {...item}>
|
|
269
|
+
<Timeline.Heading {...heading}>Test</Timeline.Heading>
|
|
270
|
+
<Timeline.Heading {...heading} side="left" variant="secondary">
|
|
271
|
+
Next step
|
|
272
|
+
</Timeline.Heading>
|
|
273
|
+
<Timeline.Dot {...dot} />
|
|
274
|
+
<Timeline.Line {...line} />
|
|
275
|
+
<Timeline.Content>
|
|
276
|
+
Thorough testing is essential to ensure the quality and reliability of your software.
|
|
277
|
+
Implement different testing methodologies, including unit testing, integration testing,
|
|
278
|
+
and user acceptance testing. This helps identify and rectify any issues before deploying
|
|
279
|
+
the software.
|
|
280
|
+
</Timeline.Content>
|
|
281
|
+
</Timeline.Item>
|
|
282
|
+
<Timeline.Item {...item}>
|
|
283
|
+
<Timeline.Heading {...heading} side="left">
|
|
284
|
+
Deploy
|
|
285
|
+
</Timeline.Heading>
|
|
286
|
+
<Timeline.Heading {...heading} side="right" variant="secondary">
|
|
287
|
+
Deadline (05/10/2024)
|
|
288
|
+
</Timeline.Heading>
|
|
289
|
+
<Timeline.Dot {...dot} />
|
|
290
|
+
<Timeline.Line {...line} />
|
|
291
|
+
<Timeline.Content side="left" {...content}>
|
|
292
|
+
Once your software has passed rigorous testing, it's time to deploy it. Consider the
|
|
293
|
+
deployment environment, whether it's on-premises or in the cloud. Ensure proper
|
|
294
|
+
documentation and provide clear instructions for installation and configuration.
|
|
295
|
+
</Timeline.Content>
|
|
296
|
+
</Timeline.Item>
|
|
297
|
+
<Timeline.Item {...item}>
|
|
298
|
+
<Timeline.Dot {...dot} />
|
|
299
|
+
<Timeline.Heading {...heading}>Done!</Timeline.Heading>
|
|
300
|
+
<Timeline.Heading {...heading} side="left" variant="secondary">
|
|
301
|
+
Here everything ends
|
|
302
|
+
</Timeline.Heading>
|
|
303
|
+
</Timeline.Item>
|
|
304
|
+
</Timeline>
|
|
305
|
+
);
|
|
306
|
+
};
|
|
307
|
+
|
|
308
|
+
export const TimelineRightExample = ({
|
|
309
|
+
timeline,
|
|
310
|
+
dot,
|
|
311
|
+
item,
|
|
312
|
+
content,
|
|
313
|
+
heading,
|
|
314
|
+
line,
|
|
315
|
+
}: TimelineExampleProps) => {
|
|
316
|
+
return (
|
|
317
|
+
<Timeline positions="right" {...timeline}>
|
|
318
|
+
<Timeline.Item variant="secondary" {...item}>
|
|
319
|
+
<Timeline.Heading side="left" {...heading}>
|
|
320
|
+
Plan!
|
|
321
|
+
</Timeline.Heading>
|
|
322
|
+
<Timeline.Dot status="success" {...dot} />
|
|
323
|
+
<Timeline.Line variant="neutral" {...line} />
|
|
324
|
+
<Timeline.Content side="left" {...content}>
|
|
325
|
+
Before diving into coding, it is crucial to plan your software project thoroughly. This
|
|
326
|
+
involves defining the project scope, setting clear objectives, and identifying the target
|
|
327
|
+
audience. Additionally, creating a timeline and allocating resources appropriately will
|
|
328
|
+
contribute to a successful development process.
|
|
329
|
+
</Timeline.Content>
|
|
330
|
+
</Timeline.Item>
|
|
331
|
+
<Timeline.Item variant="secondary" {...item}>
|
|
332
|
+
<Timeline.Heading side="left" className="text-destructive" {...heading}>
|
|
333
|
+
Design
|
|
334
|
+
</Timeline.Heading>
|
|
335
|
+
<Timeline.Dot status="failed" {...dot} />
|
|
336
|
+
<Timeline.Line variant="neutral" {...line} />
|
|
337
|
+
<Timeline.Content side="left" {...content}>
|
|
338
|
+
Designing your software involves creating a blueprint that outlines the structure, user
|
|
339
|
+
interface, and functionality of your application. Consider user experience (UX)
|
|
340
|
+
principles, wireframing, and prototyping to ensure an intuitive and visually appealing
|
|
341
|
+
design.
|
|
342
|
+
</Timeline.Content>
|
|
343
|
+
</Timeline.Item>
|
|
344
|
+
<Timeline.Item variant="accent" {...item}>
|
|
345
|
+
<Timeline.Heading side="left" {...heading}>
|
|
346
|
+
Code
|
|
347
|
+
</Timeline.Heading>
|
|
348
|
+
<Timeline.Dot status="active" {...dot} />
|
|
349
|
+
<Timeline.Line {...line} />
|
|
350
|
+
<Timeline.Content side="left" {...content}>
|
|
351
|
+
The coding phase involves translating your design into actual code. Choose a programming
|
|
352
|
+
language and framework that aligns with your project requirements. Follow best practices,
|
|
353
|
+
such as modular and reusable code, to enhance maintainability and scalability. Regularly
|
|
354
|
+
test your code to identify and fix any bugs or errors.
|
|
355
|
+
</Timeline.Content>
|
|
356
|
+
</Timeline.Item>
|
|
357
|
+
<Timeline.Item {...item}>
|
|
358
|
+
<Timeline.Heading side="left" {...heading}>
|
|
359
|
+
Test
|
|
360
|
+
</Timeline.Heading>
|
|
361
|
+
<Timeline.Dot {...dot} />
|
|
362
|
+
<Timeline.Line {...line} />
|
|
363
|
+
<Timeline.Content side="left" {...content}>
|
|
364
|
+
Thorough testing is essential to ensure the quality and reliability of your software.
|
|
365
|
+
Implement different testing methodologies, including unit testing, integration testing,
|
|
366
|
+
and user acceptance testing. This helps identify and rectify any issues before deploying
|
|
367
|
+
the software.
|
|
368
|
+
</Timeline.Content>
|
|
369
|
+
</Timeline.Item>
|
|
370
|
+
<Timeline.Item {...item}>
|
|
371
|
+
<Timeline.Heading side="left" {...heading}>
|
|
372
|
+
Deploy
|
|
373
|
+
</Timeline.Heading>
|
|
374
|
+
<Timeline.Dot {...dot} />
|
|
375
|
+
<Timeline.Line {...line} />
|
|
376
|
+
<Timeline.Content side="left" {...content}>
|
|
377
|
+
Once your software has passed rigorous testing, it's time to deploy it. Consider the
|
|
378
|
+
deployment environment, whether it's on-premises or in the cloud. Ensure proper
|
|
379
|
+
documentation and provide clear instructions for installation and configuration.
|
|
380
|
+
</Timeline.Content>
|
|
381
|
+
</Timeline.Item>
|
|
382
|
+
<Timeline.Item {...item}>
|
|
383
|
+
<Timeline.Dot {...dot} />
|
|
384
|
+
<Timeline.Heading side="left" {...heading}>
|
|
385
|
+
Done!
|
|
386
|
+
</Timeline.Heading>
|
|
387
|
+
</Timeline.Item>
|
|
388
|
+
</Timeline>
|
|
389
|
+
);
|
|
390
|
+
};
|
|
@@ -0,0 +1,98 @@
|
|
|
1
|
+
import { forwardRef } from "react";
|
|
2
|
+
import { Check, Circle, X } from "lucide-react";
|
|
3
|
+
import type {
|
|
4
|
+
TimelineContentProps,
|
|
5
|
+
TimelineDotProps,
|
|
6
|
+
TimelineHeadingProps,
|
|
7
|
+
TimelineLineProps,
|
|
8
|
+
TimelineProps,
|
|
9
|
+
} from "./types";
|
|
10
|
+
import { cn } from "../../utilities";
|
|
11
|
+
import {
|
|
12
|
+
getTimelineClasses,
|
|
13
|
+
getTimelineContentClasses,
|
|
14
|
+
getTimelineDotClasses,
|
|
15
|
+
getTimelineHeadingClasses,
|
|
16
|
+
getTimelineItemClasses,
|
|
17
|
+
getTimelineLineClasses,
|
|
18
|
+
} from "./constants";
|
|
19
|
+
import { TimelineItemProps } from "./types";
|
|
20
|
+
|
|
21
|
+
const Timeline = ({ children, className, positions, ...props }: TimelineProps) => {
|
|
22
|
+
return (
|
|
23
|
+
<ul className={cn(getTimelineClasses({ positions }), className)} {...props}>
|
|
24
|
+
{children}
|
|
25
|
+
</ul>
|
|
26
|
+
);
|
|
27
|
+
};
|
|
28
|
+
Timeline.displayName = "Timeline";
|
|
29
|
+
|
|
30
|
+
const TimelineItem = forwardRef<HTMLLIElement, TimelineItemProps>(
|
|
31
|
+
({ className, variant, ...props }, ref) => (
|
|
32
|
+
<li className={cn(getTimelineItemClasses({ variant }), className)} ref={ref} {...props} />
|
|
33
|
+
)
|
|
34
|
+
);
|
|
35
|
+
TimelineItem.displayName = "TimelineItem";
|
|
36
|
+
|
|
37
|
+
const TimelineDot = forwardRef<HTMLDivElement, TimelineDotProps>(
|
|
38
|
+
({ className, fill = false, border, status, variant, icon, ...props }, ref) => (
|
|
39
|
+
<div
|
|
40
|
+
role="status"
|
|
41
|
+
className={cn(
|
|
42
|
+
getTimelineDotClasses({ fill, border, status: icon ? "custom" : status, variant }),
|
|
43
|
+
className
|
|
44
|
+
)}
|
|
45
|
+
ref={ref}
|
|
46
|
+
{...props}
|
|
47
|
+
>
|
|
48
|
+
<Circle className="size-2.5" />
|
|
49
|
+
<Check className="size-3" />
|
|
50
|
+
<X className="size-3" />
|
|
51
|
+
{icon}
|
|
52
|
+
</div>
|
|
53
|
+
)
|
|
54
|
+
);
|
|
55
|
+
TimelineDot.displayName = "TimelineDot";
|
|
56
|
+
|
|
57
|
+
const TimelineContent = forwardRef<HTMLDivElement, TimelineContentProps>(
|
|
58
|
+
({ className, side, ...props }, ref) => (
|
|
59
|
+
<div className={cn(getTimelineContentClasses({ side }), className)} ref={ref} {...props} />
|
|
60
|
+
)
|
|
61
|
+
);
|
|
62
|
+
TimelineContent.displayName = "TimelineContent";
|
|
63
|
+
|
|
64
|
+
const TimelineHeading = forwardRef<HTMLParagraphElement, TimelineHeadingProps>(
|
|
65
|
+
({ className, side, size, variant, ...props }, ref) => (
|
|
66
|
+
<p
|
|
67
|
+
role="heading"
|
|
68
|
+
aria-level={variant === "primary" ? 2 : 3}
|
|
69
|
+
className={cn(getTimelineHeadingClasses({ side, size, variant }), className)}
|
|
70
|
+
ref={ref}
|
|
71
|
+
{...props}
|
|
72
|
+
/>
|
|
73
|
+
)
|
|
74
|
+
);
|
|
75
|
+
TimelineHeading.displayName = "TimelineHeading";
|
|
76
|
+
|
|
77
|
+
const TimelineLine = forwardRef<HTMLHRElement, TimelineLineProps>(
|
|
78
|
+
({ className, variant, ...props }, ref) => {
|
|
79
|
+
return (
|
|
80
|
+
<hr
|
|
81
|
+
role="separator"
|
|
82
|
+
aria-orientation="vertical"
|
|
83
|
+
className={cn(getTimelineLineClasses({ variant }), className)}
|
|
84
|
+
ref={ref}
|
|
85
|
+
{...props}
|
|
86
|
+
/>
|
|
87
|
+
);
|
|
88
|
+
}
|
|
89
|
+
);
|
|
90
|
+
TimelineLine.displayName = "TimelineLine";
|
|
91
|
+
|
|
92
|
+
Timeline.Dot = TimelineDot;
|
|
93
|
+
Timeline.Item = TimelineItem;
|
|
94
|
+
Timeline.Content = TimelineContent;
|
|
95
|
+
Timeline.Heading = TimelineHeading;
|
|
96
|
+
Timeline.Line = TimelineLine;
|
|
97
|
+
|
|
98
|
+
export { Timeline };
|
|
@@ -0,0 +1,214 @@
|
|
|
1
|
+
import { cva } from "../../libs";
|
|
2
|
+
|
|
3
|
+
export const getTimelineClasses = cva("grid", {
|
|
4
|
+
variants: {
|
|
5
|
+
positions: {
|
|
6
|
+
left: "[&>li]:grid-cols-[0_min-content_1fr]",
|
|
7
|
+
right: "[&>li]:grid-cols-[1fr_min-content]",
|
|
8
|
+
center: "[&>li]:grid-cols-[1fr_min-content_1fr]",
|
|
9
|
+
},
|
|
10
|
+
},
|
|
11
|
+
defaultVariants: {
|
|
12
|
+
positions: "left",
|
|
13
|
+
},
|
|
14
|
+
});
|
|
15
|
+
|
|
16
|
+
export const getTimelineItemClasses = cva("grid items-center gap-x-2", {
|
|
17
|
+
variants: {
|
|
18
|
+
variant: {
|
|
19
|
+
info: "text-info",
|
|
20
|
+
error: "text-error",
|
|
21
|
+
success: "text-success",
|
|
22
|
+
warning: "text-warning",
|
|
23
|
+
primary: "text-primary",
|
|
24
|
+
secondary: "text-secondary",
|
|
25
|
+
accent: "text-accent",
|
|
26
|
+
neutral: "text-neutral",
|
|
27
|
+
content: "text-base-content",
|
|
28
|
+
},
|
|
29
|
+
},
|
|
30
|
+
});
|
|
31
|
+
|
|
32
|
+
export const getTimelineDotClasses = cva(
|
|
33
|
+
"timeline-dot col-start-2 col-end-3 row-start-1 row-end-1 flex size-4 items-center justify-center rounded-full border",
|
|
34
|
+
{
|
|
35
|
+
variants: {
|
|
36
|
+
status: {
|
|
37
|
+
default: "[&>*]:hidden",
|
|
38
|
+
active: "[&>*:not(.lucide-circle)]:hidden",
|
|
39
|
+
success: "[&>*:not(.lucide-check)]:hidden",
|
|
40
|
+
failed: "[&>*:not(.lucide-x)]:hidden",
|
|
41
|
+
custom: "[&>*:not(:nth-child(4))]:hidden [&>*:nth-child(4)]:block",
|
|
42
|
+
},
|
|
43
|
+
border: {
|
|
44
|
+
info: "border-info",
|
|
45
|
+
error: "border-error",
|
|
46
|
+
success: "border-success",
|
|
47
|
+
warning: "border-warning",
|
|
48
|
+
primary: "border-primary",
|
|
49
|
+
secondary: "border-secondary",
|
|
50
|
+
accent: "border-accent",
|
|
51
|
+
neutral: "border-neutral",
|
|
52
|
+
content: "border-base-100",
|
|
53
|
+
},
|
|
54
|
+
fill: {
|
|
55
|
+
true: "",
|
|
56
|
+
},
|
|
57
|
+
variant: {
|
|
58
|
+
info: "[&>.lucide-check]:text-info [&>.lucide-circle]:text-info [&>.lucide-circle]:fill-info [&>.lucide-x]:text-info",
|
|
59
|
+
error:
|
|
60
|
+
"[&>.lucide-check]:text-error [&>.lucide-circle]:text-error [&>.lucide-circle]:fill-error [&>.lucide-x]:text-error",
|
|
61
|
+
success:
|
|
62
|
+
"[&>.lucide-check]:text-success [&>.lucide-circle]:text-success [&>.lucide-circle]:fill-success [&>.lucide-x]:text-success",
|
|
63
|
+
warning:
|
|
64
|
+
"[&>.lucide-check]:text-warning [&>.lucide-circle]:text-warning [&>.lucide-circle]:fill-warning [&>.lucide-x]:text-warning",
|
|
65
|
+
primary:
|
|
66
|
+
"[&>.lucide-check]:text-primary [&>.lucide-circle]:text-primary [&>.lucide-circle]:fill-primary [&>.lucide-x]:text-primary",
|
|
67
|
+
secondary:
|
|
68
|
+
"[&>.lucide-check]:text-secondary [&>.lucide-circle]:text-secondary [&>.lucide-circle]:fill-secondary [&>.lucide-x]:text-secondary",
|
|
69
|
+
accent:
|
|
70
|
+
"[&>.lucide-check]:text-accent [&>.lucide-circle]:text-accent [&>.lucide-circle]:fill-accent [&>.lucide-x]:text-accent",
|
|
71
|
+
neutral:
|
|
72
|
+
"[&>.lucide-check]:text-neutral [&>.lucide-circle]:text-neutral [&>.lucide-circle]:fill-neutral [&>.lucide-x]:text-neutral",
|
|
73
|
+
content:
|
|
74
|
+
"[&>.lucide-check]:text-base-content [&>.lucide-circle]:text-base-content [&>.lucide-circle]:fill-base-content [&>.lucide-x]:text-base-content",
|
|
75
|
+
},
|
|
76
|
+
},
|
|
77
|
+
defaultVariants: {
|
|
78
|
+
status: "default",
|
|
79
|
+
},
|
|
80
|
+
compoundVariants: [
|
|
81
|
+
{
|
|
82
|
+
border: undefined,
|
|
83
|
+
className: "border-none",
|
|
84
|
+
},
|
|
85
|
+
{
|
|
86
|
+
variant: undefined,
|
|
87
|
+
className:
|
|
88
|
+
"border-current [&>.lucide-check]:text-current [&>.lucide-circle]:fill-current [&>.lucide-x]:fill-current [&>.lucide-x]:text-current",
|
|
89
|
+
},
|
|
90
|
+
{
|
|
91
|
+
fill: true,
|
|
92
|
+
variant: "info",
|
|
93
|
+
className:
|
|
94
|
+
"border-info bg-info [&>.lucide-check]:text-info-content [&>.lucide-circle]:fill-info-content [&>.lucide-x]:text-info-content",
|
|
95
|
+
},
|
|
96
|
+
{
|
|
97
|
+
fill: true,
|
|
98
|
+
variant: "error",
|
|
99
|
+
className:
|
|
100
|
+
"border-error bg-error [&>.lucide-check]:text-error-content [&>.lucide-circle]:fill-error-content [&>.lucide-x]:text-error-content",
|
|
101
|
+
},
|
|
102
|
+
{
|
|
103
|
+
fill: true,
|
|
104
|
+
variant: "success",
|
|
105
|
+
className:
|
|
106
|
+
"border-success bg-success [&>.lucide-check]:text-success-content [&>.lucide-circle]:fill-success-content [&>.lucide-x]:text-success-content",
|
|
107
|
+
},
|
|
108
|
+
{
|
|
109
|
+
fill: true,
|
|
110
|
+
variant: "warning",
|
|
111
|
+
className:
|
|
112
|
+
"border-warning bg-warning [&>.lucide-check]:text-warning-content [&>.lucide-circle]:fill-warning-content [&>.lucide-x]:text-warning-content",
|
|
113
|
+
},
|
|
114
|
+
{
|
|
115
|
+
fill: true,
|
|
116
|
+
variant: "primary",
|
|
117
|
+
className:
|
|
118
|
+
"border-primary bg-primary [&>.lucide-check]:text-primary-content [&>.lucide-circle]:fill-primary-content [&>.lucide-x]:text-primary-content",
|
|
119
|
+
},
|
|
120
|
+
{
|
|
121
|
+
fill: true,
|
|
122
|
+
variant: "secondary",
|
|
123
|
+
className:
|
|
124
|
+
"border-secondary bg-secondary [&>.lucide-check]:text-secondary-content [&>.lucide-circle]:fill-secondary-content [&>.lucide-x]:text-secondary-content",
|
|
125
|
+
},
|
|
126
|
+
{
|
|
127
|
+
fill: true,
|
|
128
|
+
variant: "accent",
|
|
129
|
+
className:
|
|
130
|
+
"border-accent bg-accent [&>.lucide-check]:text-accent-content [&>.lucide-circle]:fill-accent-content [&>.lucide-x]:text-accent-content",
|
|
131
|
+
},
|
|
132
|
+
{
|
|
133
|
+
fill: true,
|
|
134
|
+
variant: "neutral",
|
|
135
|
+
className:
|
|
136
|
+
"border-neutral bg-neutral [&>.lucide-check]:text-neutral-content [&>.lucide-circle]:fill-neutral-content [&>.lucide-x]:text-neutral-content",
|
|
137
|
+
},
|
|
138
|
+
{
|
|
139
|
+
fill: true,
|
|
140
|
+
variant: "content",
|
|
141
|
+
className:
|
|
142
|
+
"border-base-100 bg-base-100 [&>.lucide-check]:text-base-content [&>.lucide-circle]:fill-base-content [&>.lucide-x]:text-base-content",
|
|
143
|
+
},
|
|
144
|
+
],
|
|
145
|
+
}
|
|
146
|
+
);
|
|
147
|
+
|
|
148
|
+
export const getTimelineContentClasses = cva("row-start-2 row-end-2 pb-8 text-muted-foreground", {
|
|
149
|
+
variants: {
|
|
150
|
+
side: {
|
|
151
|
+
right: "col-start-3 col-end-4 mr-auto text-left",
|
|
152
|
+
left: "col-start-1 col-end-2 ml-auto text-right",
|
|
153
|
+
},
|
|
154
|
+
},
|
|
155
|
+
defaultVariants: {
|
|
156
|
+
side: "right",
|
|
157
|
+
},
|
|
158
|
+
});
|
|
159
|
+
|
|
160
|
+
export const getTimelineHeadingClasses = cva(
|
|
161
|
+
"row-start-1 row-end-1 line-clamp-1 max-w-full truncate",
|
|
162
|
+
{
|
|
163
|
+
variants: {
|
|
164
|
+
side: {
|
|
165
|
+
right: "col-start-3 col-end-4 mr-auto text-left",
|
|
166
|
+
left: "col-start-1 col-end-2 ml-auto text-right",
|
|
167
|
+
},
|
|
168
|
+
variant: {
|
|
169
|
+
info: "text-info",
|
|
170
|
+
error: "text-error",
|
|
171
|
+
success: "text-success",
|
|
172
|
+
warning: "text-warning",
|
|
173
|
+
primary: "text-primary",
|
|
174
|
+
secondary: "text-secondary",
|
|
175
|
+
accent: "text-accent",
|
|
176
|
+
neutral: "text-neutral",
|
|
177
|
+
content: "text-base-content",
|
|
178
|
+
},
|
|
179
|
+
size: {
|
|
180
|
+
xs: "text-xs",
|
|
181
|
+
sm: "text-sm",
|
|
182
|
+
base: "text-base",
|
|
183
|
+
lg: "text-lg",
|
|
184
|
+
xl: "text-xl",
|
|
185
|
+
"2xl": "text-2xl",
|
|
186
|
+
"3xl": "text-3xl",
|
|
187
|
+
"4xl": "text-4xl",
|
|
188
|
+
"5xl": "text-5xl",
|
|
189
|
+
},
|
|
190
|
+
},
|
|
191
|
+
defaultVariants: {
|
|
192
|
+
side: "right",
|
|
193
|
+
},
|
|
194
|
+
}
|
|
195
|
+
);
|
|
196
|
+
|
|
197
|
+
export const getTimelineLineClasses = cva(
|
|
198
|
+
"bg-base-300 border-none col-start-2 col-end-3 row-start-2 row-end-2 mx-auto flex h-full min-h-16 w-0.5 justify-center rounded-full",
|
|
199
|
+
{
|
|
200
|
+
variants: {
|
|
201
|
+
variant: {
|
|
202
|
+
info: "bg-info",
|
|
203
|
+
error: "bg-error",
|
|
204
|
+
success: "bg-success",
|
|
205
|
+
warning: "bg-warning",
|
|
206
|
+
primary: "bg-primary",
|
|
207
|
+
secondary: "bg-secondary",
|
|
208
|
+
accent: "bg-accent",
|
|
209
|
+
neutral: "bg-neutral",
|
|
210
|
+
content: "bg-base-content",
|
|
211
|
+
},
|
|
212
|
+
},
|
|
213
|
+
}
|
|
214
|
+
);
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { Timeline } from "./Timeline";
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import { HTMLAttributes } from "react";
|
|
2
|
+
import { type VariantProps } from "../../libs";
|
|
3
|
+
import {
|
|
4
|
+
getTimelineClasses,
|
|
5
|
+
getTimelineContentClasses,
|
|
6
|
+
getTimelineDotClasses,
|
|
7
|
+
getTimelineHeadingClasses,
|
|
8
|
+
getTimelineItemClasses,
|
|
9
|
+
getTimelineLineClasses,
|
|
10
|
+
} from "./constants";
|
|
11
|
+
|
|
12
|
+
export type TimelineProps = HTMLAttributes<HTMLUListElement> &
|
|
13
|
+
VariantProps<typeof getTimelineClasses>;
|
|
14
|
+
|
|
15
|
+
export type TimelineItemProps = HTMLAttributes<HTMLLIElement> &
|
|
16
|
+
VariantProps<typeof getTimelineItemClasses>;
|
|
17
|
+
|
|
18
|
+
type DotVariants = VariantProps<typeof getTimelineDotClasses>;
|
|
19
|
+
export type TimelineDotProps = HTMLAttributes<HTMLDivElement> & {
|
|
20
|
+
icon?: React.ReactNode;
|
|
21
|
+
} & Omit<DotVariants, "status"> & {
|
|
22
|
+
status?: Exclude<DotVariants["status"], "custom">;
|
|
23
|
+
};
|
|
24
|
+
|
|
25
|
+
export type TimelineContentProps = HTMLAttributes<HTMLDivElement> &
|
|
26
|
+
VariantProps<typeof getTimelineContentClasses>;
|
|
27
|
+
|
|
28
|
+
export type TimelineHeadingProps = HTMLAttributes<HTMLParagraphElement> &
|
|
29
|
+
VariantProps<typeof getTimelineHeadingClasses>;
|
|
30
|
+
|
|
31
|
+
export type TimelineLineProps = HTMLAttributes<HTMLHRElement> &
|
|
32
|
+
VariantProps<typeof getTimelineLineClasses>;
|
package/src/index.ts
CHANGED
|
@@ -24,6 +24,7 @@ export * from "./components/Sonner";
|
|
|
24
24
|
export * from "./components/Table";
|
|
25
25
|
export * from "./components/Tabs";
|
|
26
26
|
export * from "./components/Text";
|
|
27
|
+
export * from "./components/Timeline";
|
|
27
28
|
|
|
28
29
|
/** data input */
|
|
29
30
|
export * from "./components/DatetimePicker";
|