Skip to content

Commit 0d4d59d

Browse files
grv-saini-20grv-saini-20
committed
feat: table and checkbox added,flowbite-added
1 parent f78ec4e commit 0d4d59d

File tree

17 files changed

+1085
-379
lines changed

17 files changed

+1085
-379
lines changed

‎infrastructure/control-panel/package.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,9 @@
4646
"@hugeicons/svelte": "^1.0.2",
4747
"@inlang/paraglide-js": "^2.0.0",
4848
"clsx": "^2.1.1",
49+
"flowbite": "^3.1.2",
50+
"flowbite-svelte": "^1.10.7",
51+
"flowbite-svelte-icons": "^2.2.1",
4952
"tailwind-merge": "^3.0.2"
5053
}
5154
}

‎infrastructure/control-panel/src/app.css‎

Lines changed: 23 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,37 @@
11
@import 'tailwindcss';
22

33
@font-face {
4-
font-family: "Archivo";
5-
src: url("/fonts/Archivo-VariableFont_wdth,wght.ttf") format("truetype");
6-
font-weight: 100 900;
7-
font-style: normal;
4+
font-family: 'Archivo';
5+
src: url('/fonts/Archivo-VariableFont_wdth,wght.ttf') format('truetype');
6+
font-weight: 100 900;
7+
font-style: normal;
88
}
99

1010
@layer base {
11-
/* Typography */
12-
h1 {
13-
@apply text-[90px]/[1.5] text-black font-semibold;
14-
}
11+
/* Typography */
12+
h1 {
13+
@apply text-[90px]/[1.5] font-semibold text-black;
14+
}
1515

16-
h2 {
17-
@apply text-6xl/[1.5] text-black font-semibold;
18-
}
16+
h2 {
17+
@apply text-6xl/[1.5] font-semibold text-black;
18+
}
1919

20-
h3 {
21-
@apply text-3xl/[1.5] text-black font-semibold;
22-
}
20+
h3 {
21+
@apply text-3xl/[1.5] font-semibold text-black;
22+
}
2323

24-
h4 {
25-
@apply text-xl/[1.5] text-black font-semibold;
26-
}
24+
h4 {
25+
@apply text-xl/[1.5] font-semibold text-black;
26+
}
2727

28-
p {
29-
@apply text-base/[1.5] text-black font-normal;
30-
}
28+
p {
29+
@apply text-base/[1.5] font-normal text-black;
30+
}
3131

32-
.small {
33-
@apply text-xs/[1.5] text-black font-normal;
34-
}
32+
.small {
33+
@apply text-xs/[1.5] font-normal text-black;
34+
}
3535
}
3636

3737
@theme {

‎infrastructure/control-panel/src/lib/ui/Button/Button.stories.snippet.svelte‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,24 @@
11
<script context="module">
2-
import { ArrowRight01Icon, SettingsIcon } from "@hugeicons/core-free-icons";
3-
import { HugeiconsIcon } from "@hugeicons/svelte";
2+
import { ArrowRight01Icon, SettingsIcon } from '@hugeicons/core-free-icons';
3+
import { HugeiconsIcon } from '@hugeicons/svelte';
44
5-
export { ButtonText, ButtonNavText, ButtonNavSettings };
5+
export { ButtonText, ButtonNavText, ButtonNavSettings };
66
</script>
77

88
{#snippet ButtonText()}
9-
Button
9+
Button
1010
{/snippet}
1111

1212
{#snippet ButtonNavText()}
13-
Nav Button
13+
Nav Button
1414
{/snippet}
1515

1616
{#snippet ButtonNavSettings()}
17-
<div class="flex items-center gap-2">
18-
<div class="p-3 bg-gray max-w-max rounded-full object-cover flex items-center" >
19-
<HugeiconsIcon icon={SettingsIcon} size={30} color="var(--color-black-500)" />
20-
</div>
21-
<h1>Settings</h1>
22-
</div>
23-
<HugeiconsIcon size={30} color="var(--color-black-500)" icon={ArrowRight01Icon} />
24-
{/snippet}
17+
<div class="flex items-center gap-2">
18+
<div class="bg-gray flex max-w-max items-center rounded-full object-cover p-3">
19+
<HugeiconsIcon icon={SettingsIcon} size={30} color="var(--color-black-500)" />
20+
</div>
21+
<p>Settings</p>
22+
</div>
23+
<HugeiconsIcon size={30} color="var(--color-black-500)" icon={ArrowRight01Icon} />
24+
{/snippet}

‎infrastructure/control-panel/src/lib/ui/Button/ButtonAction.stories.ts‎

Lines changed: 22 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,43 @@
1-
import type { ComponentProps } from "svelte";
2-
import { ButtonText } from "./Button.stories.snippet.svelte";
3-
import ButtonAction from "./ButtonAction.svelte";
1+
import type { ComponentProps } from 'svelte';
2+
import { ButtonText } from './Button.stories.snippet.svelte';
3+
import ButtonAction from './ButtonAction.svelte';
44

55
export default {
6-
title: "UI/ButtonAction",
7-
component: ButtonAction,
8-
tags: ["autodocs"],
9-
render: (args: {
10-
Component: ButtonAction;
11-
props: ComponentProps<typeof ButtonAction>;
12-
}) => ({
13-
Component: ButtonAction,
14-
props: args,
15-
}),
6+
title: 'UI/ButtonAction',
7+
component: ButtonAction,
8+
tags: ['autodocs'],
9+
render: (args: { Component: ButtonAction; props: ComponentProps<typeof ButtonAction> }) => ({
10+
Component: ButtonAction,
11+
props: args
12+
})
1613
};
1714

1815
export const Solid = {
19-
args: { variant: "solid", children: ButtonText },
16+
args: { variant: 'solid', children: ButtonText }
2017
};
2118

2219
export const Soft = {
23-
args: { variant: "soft", children: ButtonText },
20+
args: { variant: 'soft', children: ButtonText }
2421
};
2522

2623
export const Danger = {
27-
args: { variant: "danger", children: ButtonText },
24+
args: { variant: 'danger', children: ButtonText }
2825
};
2926

3027
export const DangerSoft = {
31-
args: { variant: "danger-soft", children: ButtonText },
28+
args: { variant: 'danger-soft', children: ButtonText }
3229
};
3330

3431
export const Loading = {
35-
args: { isLoading: true, children: ButtonText },
32+
args: { isLoading: true, children: ButtonText }
3633
};
3734

3835
export const BlockingClick = {
39-
args: {
40-
blockingClick: true,
41-
children: ButtonText,
42-
callback: async () => {
43-
await new Promise((resolve) => setTimeout(resolve, 2000));
44-
},
45-
},
36+
args: {
37+
blockingClick: true,
38+
children: ButtonText,
39+
callback: async () => {
40+
await new Promise((resolve) => setTimeout(resolve, 2000));
41+
}
42+
}
4643
};

‎infrastructure/control-panel/src/lib/ui/Button/ButtonAction.svelte‎

Lines changed: 89 additions & 92 deletions
Original file line numberDiff line numberDiff line change
@@ -1,109 +1,106 @@
11
<script lang="ts">
2-
import { cn } from "$lib/utils";
3-
import type { HTMLButtonAttributes } from "svelte/elements";
2+
import { cn } from '$lib/utils';
3+
import type { HTMLButtonAttributes } from 'svelte/elements';
44
5-
interface IButtonProps extends HTMLButtonAttributes {
6-
variant?: "solid" | "soft" | "danger" | "danger-soft" | "white";
7-
isLoading?: boolean;
8-
callback?: () => Promise<void> | void;
9-
blockingClick?: boolean;
10-
type?: "button" | "submit" | "reset";
11-
size?: "sm" | "md";
12-
}
5+
interface IButtonProps extends HTMLButtonAttributes {
6+
variant?: 'solid' | 'soft' | 'danger' | 'danger-soft' | 'white';
7+
isLoading?: boolean;
8+
callback?: () => Promise<void> | void;
9+
blockingClick?: boolean;
10+
type?: 'button' | 'submit' | 'reset';
11+
size?: 'sm' | 'md';
12+
}
1313
14-
const {
15-
variant = "solid",
16-
isLoading,
17-
callback,
18-
onclick,
19-
blockingClick,
20-
type = "button",
21-
size = "md",
22-
children = undefined,
23-
...restProps
24-
}: IButtonProps = $props();
14+
const {
15+
variant = 'solid',
16+
isLoading,
17+
callback,
18+
onclick,
19+
blockingClick,
20+
type = 'button',
21+
size = 'md',
22+
children = undefined,
23+
...restProps
24+
}: IButtonProps = $props();
2525
26-
let isSubmitting = $state(false);
27-
const disabled = $derived(restProps.disabled || isLoading || isSubmitting);
26+
let isSubmitting = $state(false);
27+
const disabled = $derived(restProps.disabled || isLoading || isSubmitting);
2828
29-
const handleClick = async () => {
30-
if (typeof callback !== "function") return;
29+
const handleClick = async () => {
30+
if (typeof callback !== 'function') return;
3131
32-
if (blockingClick) isSubmitting = true;
33-
try {
34-
await callback();
35-
} catch (error) {
36-
console.error("Error in button callback:", error);
37-
} finally {
38-
isSubmitting = false;
39-
}
40-
};
32+
if (blockingClick) isSubmitting = true;
33+
try {
34+
await callback();
35+
} catch (error) {
36+
console.error('Error in button callback:', error);
37+
} finally {
38+
isSubmitting = false;
39+
}
40+
};
4141
42-
const variantClasses = {
43-
solid: { background: "bg-primary-500", text: "text-white" },
44-
soft: { background: "bg-primary-100", text: "text-primary-500" },
45-
danger: { background: "bg-danger-500", text: "text-white" },
46-
"danger-soft": { background: "bg-danger-100", text: "text-danger-500" },
47-
white: { background: "bg-white", text: "text-black" },
48-
};
42+
const variantClasses = {
43+
solid: { background: 'bg-primary-500', text: 'text-white' },
44+
soft: { background: 'bg-primary-100', text: 'text-primary-500' },
45+
danger: { background: 'bg-danger-500', text: 'text-white' },
46+
'danger-soft': { background: 'bg-danger-100', text: 'text-danger-500' },
47+
white: { background: 'bg-white', text: 'text-black' }
48+
};
4949
50-
const disabledVariantClasses = {
51-
solid: { background: "bg-primary-300", text: "text-white" },
52-
soft: { background: "bg-primary-100", text: "text-primary-300" },
53-
danger: { background: "bg-danger-400", text: "text-white" },
54-
"danger-soft": { background: "bg-danger-100", text: "text-danger-400" },
55-
white: { background: "bg-black-100", text: "text-black-700" },
56-
};
50+
const disabledVariantClasses = {
51+
solid: { background: 'bg-primary-300', text: 'text-white' },
52+
soft: { background: 'bg-primary-100', text: 'text-primary-300' },
53+
danger: { background: 'bg-danger-400', text: 'text-white' },
54+
'danger-soft': { background: 'bg-danger-100', text: 'text-danger-400' },
55+
white: { background: 'bg-black-100', text: 'text-black-700' }
56+
};
5757
58-
const sizeVariant = {
59-
sm: "px-4 py-1.5 text-base h-11",
60-
md: "px-8 py-2.5 text-xl h-14",
61-
};
58+
const sizeVariant = {
59+
sm: 'px-4 py-1.5 text-base h-11',
60+
md: 'px-8 py-2.5 text-xl h-14'
61+
};
6262
63-
const classes = $derived({
64-
common: cn(
65-
"cursor-pointer w-min flex items-center justify-center rounded-full font-semibold duration-100",
66-
sizeVariant[size],
67-
),
68-
background: disabled
69-
? disabledVariantClasses[variant].background ||
70-
variantClasses[variant].background
71-
: variantClasses[variant].background,
72-
text: disabled
73-
? disabledVariantClasses[variant].text || variantClasses[variant].text
74-
: variantClasses[variant].text,
75-
disabled: "cursor-not-allowed",
76-
});
63+
const classes = $derived({
64+
common: cn(
65+
'cursor-pointer w-min flex items-center justify-center rounded-full font-semibold duration-100',
66+
sizeVariant[size]
67+
),
68+
background: disabled
69+
? disabledVariantClasses[variant].background || variantClasses[variant].background
70+
: variantClasses[variant].background,
71+
text: disabled
72+
? disabledVariantClasses[variant].text || variantClasses[variant].text
73+
: variantClasses[variant].text,
74+
disabled: 'cursor-not-allowed'
75+
});
7776
</script>
7877

7978
<button
80-
{...restProps}
81-
class={cn(
82-
[
83-
classes.common,
84-
classes.background,
85-
classes.text,
86-
disabled && classes.disabled,
87-
restProps.class,
88-
].join(" ")
89-
)}
90-
{disabled}
91-
onclick={handleClick}
92-
{type}
79+
{...restProps}
80+
class={cn(
81+
[
82+
classes.common,
83+
classes.background,
84+
classes.text,
85+
disabled && classes.disabled,
86+
restProps.class
87+
].join(' ')
88+
)}
89+
{disabled}
90+
onclick={handleClick}
91+
{type}
9392
>
94-
<div class="relative flex items-center justify-center">
95-
<div
96-
class="flex items-center justify-center duration-100"
97-
class:blur-xs={isLoading || isSubmitting}
98-
>
99-
{@render children?.()}
100-
</div>
101-
{#if isLoading || isSubmitting}
102-
<div
103-
class="loading loading-spinner absolute loading-xl text-white"
104-
></div>
105-
{/if}
106-
</div>
93+
<div class="relative flex items-center justify-center">
94+
<div
95+
class="flex items-center justify-center duration-100"
96+
class:blur-xs={isLoading || isSubmitting}
97+
>
98+
{@render children?.()}
99+
</div>
100+
{#if isLoading || isSubmitting}
101+
<div class="loading loading-spinner loading-xl absolute text-white"></div>
102+
{/if}
103+
</div>
107104
</button>
108105

109106
<!--

0 commit comments

Comments
 (0)