Skip to content

Commit 771cbbe

Browse files
karthikjeeyarkarthikjeeyar
authored
Merge pull request #51 from Eswaraiahsapram/add-tekton-topology-deps-utils-etc
Add tekton & topology dependencies utils, hooks, types and components
2 parents 053ed8e + b15d825 commit 771cbbe

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

45 files changed

+3938
-89
lines changed

‎.changeset/ninety-news-boil.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
'@aonic-ui/pipelines': minor
3+
'@aonic-ui/core': minor
4+
---
5+
6+
Added tekton and topology types, utils, hooks & components

‎docs/stories/core/Status/Status.stories.tsx‎

Lines changed: 363 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,363 @@
1+
import React from 'react';
2+
import { Status } from '@aonic-ui/core/src';
3+
import type { Meta, StoryObj } from '@storybook/react';
4+
5+
const meta: Meta<typeof Status> = {
6+
title: 'Core/Status',
7+
component: Status,
8+
parameters: {
9+
docs: {
10+
description: {
11+
component:
12+
'A component for displaying status messages with appropriate icons and colors. Supports various status types including success, error, warning, pending, and running states.',
13+
},
14+
},
15+
},
16+
argTypes: {
17+
status: {
18+
control: 'select',
19+
options: [
20+
'New',
21+
'Idle',
22+
'Pending',
23+
'PipelineNotStarted',
24+
'In Progress',
25+
'Progress',
26+
'Progressing',
27+
'Installing',
28+
'InstallReady',
29+
'Replacing',
30+
'Running',
31+
'Updating',
32+
'Upgrading',
33+
'PendingInstall',
34+
'Cancelled',
35+
'Deleting',
36+
'Expired',
37+
'Not Ready',
38+
'Cancelling',
39+
'Terminating',
40+
'Superseded',
41+
'Uninstalling',
42+
'Warning',
43+
'RequiresApproval',
44+
'ImagePullBackOff',
45+
'Error',
46+
'Failed',
47+
'Failure',
48+
'CrashLoopBackOff',
49+
'ErrImagePull',
50+
'Completed',
51+
'Succeeded',
52+
'Synced',
53+
'Skipped',
54+
'Paused',
55+
'Stopped',
56+
'Unknown',
57+
null,
58+
],
59+
description: 'The status string to display',
60+
},
61+
iconOnly: {
62+
control: 'boolean',
63+
description: 'If true, only displays the icon without text',
64+
},
65+
className: {
66+
control: 'text',
67+
description: 'Additional CSS class name for the component',
68+
},
69+
displayStatusText: {
70+
control: 'text',
71+
description: 'Custom text to display instead of the status value',
72+
},
73+
dataTestId: {
74+
control: 'text',
75+
description: 'Test ID for testing purposes',
76+
},
77+
iconClassName: {
78+
control: 'text',
79+
description: 'Additional CSS class name for the icon',
80+
},
81+
},
82+
};
83+
84+
export default meta;
85+
86+
type Story = StoryObj<typeof Status>;
87+
88+
// Success States
89+
export const Success: Story = {
90+
args: {
91+
status: 'Completed',
92+
},
93+
};
94+
95+
export const Succeeded: Story = {
96+
args: {
97+
status: 'Succeeded',
98+
},
99+
};
100+
101+
export const Synced: Story = {
102+
args: {
103+
status: 'Synced',
104+
},
105+
};
106+
107+
// Error States
108+
export const Error: Story = {
109+
args: {
110+
status: 'Error',
111+
},
112+
};
113+
114+
export const Failed: Story = {
115+
args: {
116+
status: 'Failed',
117+
},
118+
};
119+
120+
export const CrashLoopBackOff: Story = {
121+
args: {
122+
status: 'CrashLoopBackOff',
123+
},
124+
};
125+
126+
// Warning States
127+
export const Warning: Story = {
128+
args: {
129+
status: 'Warning',
130+
},
131+
};
132+
133+
export const RequiresApproval: Story = {
134+
args: {
135+
status: 'RequiresApproval',
136+
},
137+
};
138+
139+
// Running States
140+
export const Running: Story = {
141+
args: {
142+
status: 'Running',
143+
},
144+
};
145+
146+
export const InProgress: Story = {
147+
args: {
148+
status: 'In Progress',
149+
},
150+
};
151+
152+
export const Installing: Story = {
153+
args: {
154+
status: 'Installing',
155+
},
156+
};
157+
158+
// Pending States
159+
export const Pending: Story = {
160+
args: {
161+
status: 'Pending',
162+
},
163+
};
164+
165+
export const New: Story = {
166+
args: {
167+
status: 'New',
168+
},
169+
};
170+
171+
export const Idle: Story = {
172+
args: {
173+
status: 'Idle',
174+
},
175+
};
176+
177+
// Cancelled States
178+
export const Cancelled: Story = {
179+
args: {
180+
status: 'Cancelled',
181+
},
182+
};
183+
184+
export const Deleting: Story = {
185+
args: {
186+
status: 'Deleting',
187+
},
188+
};
189+
190+
export const Expired: Story = {
191+
args: {
192+
status: 'Expired',
193+
},
194+
};
195+
196+
// Special States
197+
export const Skipped: Story = {
198+
args: {
199+
status: 'Skipped',
200+
},
201+
};
202+
203+
export const Paused: Story = {
204+
args: {
205+
status: 'Paused',
206+
},
207+
};
208+
209+
export const Stopped: Story = {
210+
args: {
211+
status: 'Stopped',
212+
},
213+
};
214+
215+
export const Unknown: Story = {
216+
args: {
217+
status: 'Unknown',
218+
},
219+
};
220+
221+
// Icon Only Variants
222+
export const IconOnlySuccess: Story = {
223+
args: {
224+
status: 'Completed',
225+
iconOnly: true,
226+
},
227+
};
228+
229+
export const IconOnlyError: Story = {
230+
args: {
231+
status: 'Error',
232+
iconOnly: true,
233+
},
234+
};
235+
236+
export const IconOnlyWarning: Story = {
237+
args: {
238+
status: 'Warning',
239+
iconOnly: true,
240+
},
241+
};
242+
243+
export const IconOnlyRunning: Story = {
244+
args: {
245+
status: 'Running',
246+
iconOnly: true,
247+
},
248+
};
249+
250+
export const IconOnlyPending: Story = {
251+
args: {
252+
status: 'Pending',
253+
iconOnly: true,
254+
},
255+
};
256+
257+
// Custom Display Text
258+
export const CustomDisplayText: Story = {
259+
args: {
260+
status: 'Running',
261+
displayStatusText: 'Custom Status Text',
262+
},
263+
};
264+
265+
// With Custom Styling
266+
export const WithCustomClassName: Story = {
267+
args: {
268+
status: 'Completed',
269+
className: 'custom-status-class',
270+
},
271+
};
272+
273+
export const WithCustomIconClassName: Story = {
274+
args: {
275+
status: 'Warning',
276+
iconClassName: 'custom-icon-class',
277+
},
278+
};
279+
280+
// Null/Empty Status
281+
export const NullStatus: Story = {
282+
args: {
283+
status: null,
284+
},
285+
};
286+
287+
// All Status Types Showcase
288+
export const AllStatusTypes: Story = {
289+
render: () => (
290+
<div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
291+
<h3>Success States</h3>
292+
<div style={{ display: 'flex', gap: '16px', flexWrap: 'wrap' }}>
293+
<Status status="Completed" />
294+
<Status status="Succeeded" />
295+
<Status status="Synced" />
296+
</div>
297+
298+
<h3>Error States</h3>
299+
<div style={{ display: 'flex', gap: '16px', flexWrap: 'wrap' }}>
300+
<Status status="Error" />
301+
<Status status="Failed" />
302+
<Status status="CrashLoopBackOff" />
303+
<Status status="ImagePullBackOff" />
304+
</div>
305+
306+
<h3>Warning States</h3>
307+
<div style={{ display: 'flex', gap: '16px', flexWrap: 'wrap' }}>
308+
<Status status="Warning" />
309+
<Status status="RequiresApproval" />
310+
</div>
311+
312+
<h3>Running States</h3>
313+
<div style={{ display: 'flex', gap: '16px', flexWrap: 'wrap' }}>
314+
<Status status="Running" />
315+
<Status status="In Progress" />
316+
<Status status="Installing" />
317+
<Status status="Updating" />
318+
</div>
319+
320+
<h3>Pending States</h3>
321+
<div style={{ display: 'flex', gap: '16px', flexWrap: 'wrap' }}>
322+
<Status status="Pending" />
323+
<Status status="New" />
324+
<Status status="Idle" />
325+
</div>
326+
327+
<h3>Cancelled States</h3>
328+
<div style={{ display: 'flex', gap: '16px', flexWrap: 'wrap' }}>
329+
<Status status="Cancelled" />
330+
<Status status="Deleting" />
331+
<Status status="Expired" />
332+
</div>
333+
334+
<h3>Special States</h3>
335+
<div style={{ display: 'flex', gap: '16px', flexWrap: 'wrap' }}>
336+
<Status status="Skipped" />
337+
<Status status="Paused" />
338+
<Status status="Stopped" />
339+
<Status status="Unknown" />
340+
</div>
341+
</div>
342+
),
343+
};
344+
345+
// Icon Only Showcase
346+
export const IconOnlyShowcase: Story = {
347+
render: () => (
348+
<div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
349+
<h3>Icon Only Variants</h3>
350+
<div style={{ display: 'flex', gap: '16px', flexWrap: 'wrap', alignItems: 'center' }}>
351+
<Status status="Completed" iconOnly />
352+
<Status status="Error" iconOnly />
353+
<Status status="Warning" iconOnly />
354+
<Status status="Running" iconOnly />
355+
<Status status="Pending" iconOnly />
356+
<Status status="Skipped" iconOnly />
357+
<Status status="Paused" iconOnly />
358+
<Status status="Stopped" iconOnly />
359+
<Status status="Unknown" iconOnly />
360+
</div>
361+
</div>
362+
),
363+
};

‎packages/core/Readme.md‎

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,17 @@
1-
21
# @aonic-ui/pipelines
32

43
@aonic-core UI component library provides a set of customizable and easy-to-use components for building modern web applications with React.
54

65
## Getting Started
76

8-
9-
10-
117
### Installation
128

139
```bash
1410
npm install @aonic-ui/core
1511
```
1612

17-
1813
### Usage
1914

20-
2115
```bash
2216
import { Button } from '@aonic-ui/core';
2317

0 commit comments

Comments
 (0)