Skip to content

Commit b6d9b20

Browse files
coodosgrv-saini-20Sahil2004
authored
feat: setup control-panel project, added-colors same as eid-wallet (#257)
* feat: setup control-panel project, added-colors same as eid-wallet * fix: paraglide removed * feat: twmerge, clsx, button in ui added * feat: huge icons added * fix: storybook * feat: table and checkbox added,flowbite-added * feat: table added on page * fix: checkbox * fix: row hover color * fix: table design * feat: live-data-animation * fix: z-index * fix: opacity * fix: dot animation * feat: added Logs component. * feat: added logs component to page. * feat: added button and heading * fix: animation play pause * fix: format * fix: format * feat: added a monitoring page * feat: data flow with svelte flow library * feat: no need to add ssr = false because await import is there * fix: set positions * fix: labels position and two way data flow * fix: labels * feat: modal added * fix: text * feat: added voult button * feat: added voult button * feat: added voult button shadow * fix: added logic to add new vaults * feat: added header at the top of the table * fix: format and lint * fix: search values binded * feat: added icons * feat: added icons * feat: added icons * fix: check --------- Co-authored-by: gourav <[email protected]> Co-authored-by: Sahil Garg <[email protected]> Co-authored-by: Merul Dhiman <[email protected]>
1 parent dfca2d9 commit b6d9b20

39 files changed

+2155
-26149
lines changed

‎infrastructure/control-panel/.storybook/main.ts‎

Lines changed: 12 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,20 @@
11
import type { StorybookConfig } from '@storybook/sveltekit';
22

3-
import { join, dirname } from "path"
3+
import { join, dirname } from 'path';
44

55
/**
6-
* This function is used to resolve the absolute path of a package.
7-
* It is needed in projects that use Yarn PnP or are set up within a monorepo.
8-
*/
6+
* This function is used to resolve the absolute path of a package.
7+
* It is needed in projects that use Yarn PnP or are set up within a monorepo.
8+
*/
99
function getAbsolutePath(value: string): any {
10-
return dirname(require.resolve(join(value, 'package.json')))
10+
return dirname(require.resolve(join(value, 'package.json')));
1111
}
1212
const config: StorybookConfig = {
13-
"stories": [
14-
"../src/**/*.mdx",
15-
"../src/**/*.stories.@(js|ts|svelte)"
16-
],
17-
"addons": [
18-
getAbsolutePath('@storybook/addon-svelte-csf')
19-
],
20-
"framework": {
21-
"name": getAbsolutePath('@storybook/sveltekit'),
22-
"options": {}
23-
}
13+
stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|ts|svelte)'],
14+
addons: [getAbsolutePath('@storybook/addon-svelte-csf')],
15+
framework: {
16+
name: getAbsolutePath('@storybook/sveltekit'),
17+
options: {}
18+
}
2419
};
25-
export default config;
20+
export default config;

‎infrastructure/control-panel/.storybook/preview.ts‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
1-
import type { Preview } from '@storybook/sveltekit'
2-
import "../src/app.css";
1+
import type { Preview } from '@storybook/sveltekit';
2+
import '../src/app.css';
33

44
const preview: Preview = {
5-
parameters: {
6-
controls: {
7-
matchers: {
8-
color: /(background|color)$/i,
9-
date: /Date$/i,
10-
},
11-
},
12-
},
5+
parameters: {
6+
controls: {
7+
matchers: {
8+
color: /(background|color)$/i,
9+
date: /Date$/i
10+
}
11+
}
12+
}
1313
};
1414

15-
export default preview;
15+
export default preview;

‎infrastructure/control-panel/package.json‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,14 @@
4242
"vite": "^7.0.4"
4343
},
4444
"dependencies": {
45-
"@inlang/paraglide-js": "^2.0.0"
45+
"@hugeicons/core-free-icons": "^1.0.13",
46+
"@hugeicons/svelte": "^1.0.2",
47+
"@inlang/paraglide-js": "^2.0.0",
48+
"@xyflow/svelte": "^1.2.2",
49+
"clsx": "^2.1.1",
50+
"flowbite": "^3.1.2",
51+
"flowbite-svelte": "^1.10.7",
52+
"flowbite-svelte-icons": "^2.2.1",
53+
"tailwind-merge": "^3.0.2"
4654
}
4755
}

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

Lines changed: 67 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,71 @@
11
@import 'tailwindcss';
22

3+
@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;
8+
}
9+
10+
@layer base {
11+
/* Typography */
12+
h1 {
13+
@apply text-[90px]/[1.5] font-semibold text-black;
14+
}
15+
16+
h2 {
17+
@apply text-6xl/[1.5] font-semibold text-black;
18+
}
19+
20+
h3 {
21+
@apply text-3xl/[1.5] font-semibold text-black;
22+
}
23+
24+
h4 {
25+
@apply text-xl/[1.5] font-semibold text-black;
26+
}
27+
28+
p {
29+
@apply text-base/[1.5] font-normal text-black;
30+
}
31+
32+
.small {
33+
@apply text-xs/[1.5] font-normal text-black;
34+
}
35+
}
336

437
@theme {
5-
/* Custom theme */
6-
--color-primary: #8e52ff;
7-
--color-primary-100: #e8dcff;
8-
--color-primary-200: #d2baff;
9-
--color-primary-300: #bb97ff;
10-
--color-primary-400: #a575ff;
11-
--color-primary-500: #8e52ff;
12-
13-
--color-secondary: #73efd5;
14-
--color-secondary-100: #e3fcf7;
15-
--color-secondary-200: #c7f9ee;
16-
--color-secondary-300: #abf6e6;
17-
--color-secondary-400: #8ff2dd;
18-
--color-secondary-500: #73efd5;
19-
20-
--color-white: #ffffff;
21-
--color-gray: #f5f5f5;
22-
23-
--color-black: #1f1f1f;
24-
--color-black-100: #d2d2d2;
25-
--color-black-300: #a5a5a5;
26-
--color-black-500: #797979;
27-
--color-black-700: #4c4c4c;
28-
--color-black-900: #1f1f1f;
29-
30-
--color-danger: #ff5255;
31-
--color-danger-100: #ffdcdd;
32-
--color-danger-200: #ffb1a7;
33-
--color-danger-300: #ff968e;
34-
--color-danger-400: #ff7b77;
35-
--color-danger-500: #ff5255;
36-
}
38+
/* Custom theme */
39+
--color-primary: #8e52ff;
40+
--color-primary-100: #e8dcff;
41+
--color-primary-200: #d2baff;
42+
--color-primary-300: #bb97ff;
43+
--color-primary-400: #a575ff;
44+
--color-primary-500: #8e52ff;
45+
46+
--color-secondary: #73efd5;
47+
--color-secondary-100: #e3fcf7;
48+
--color-secondary-200: #c7f9ee;
49+
--color-secondary-300: #abf6e6;
50+
--color-secondary-400: #8ff2dd;
51+
--color-secondary-500: #73efd5;
52+
53+
--color-white: #ffffff;
54+
--color-gray: #f5f5f5;
55+
56+
--color-black: #1f1f1f;
57+
--color-black-100: #d2d2d2;
58+
--color-black-300: #a5a5a5;
59+
--color-black-500: #797979;
60+
--color-black-700: #4c4c4c;
61+
--color-black-900: #1f1f1f;
62+
63+
--color-danger: #ff5255;
64+
--color-danger-100: #ffdcdd;
65+
--color-danger-200: #ffb1a7;
66+
--color-danger-300: #ff968e;
67+
--color-danger-400: #ff7b77;
68+
--color-danger-500: #ff5255;
69+
70+
--color-green: #0fb340;
71+
}

‎infrastructure/control-panel/src/lib/fragments/LiveDataFlow/LiveDataFlow.stories.ts‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import type { ComponentProps } from 'svelte';
2+
import { LiveDataFlow } from '..';
3+
4+
export default {
5+
title: 'UI/LiveDataFlow',
6+
component: LiveDataFlow,
7+
tags: ['autodocs'],
8+
render: (args: { Component: LiveDataFlow; props: ComponentProps<typeof LiveDataFlow> }) => ({
9+
Component: LiveDataFlow,
10+
props: args
11+
})
12+
};
13+
14+
export const Default = {
15+
args: {
16+
events: [
17+
{ id: 1, from: 'alice', to: 'pictique' },
18+
{ id: 2, from: 'pictique', to: 'bob' }
19+
]
20+
}
21+
};

‎infrastructure/control-panel/src/lib/fragments/LiveDataFlow/LiveDataFlow.svelte‎

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
<script lang="ts">
2+
import { Database01FreeIcons, PauseFreeIcons, PlayFreeIcons } from '@hugeicons/core-free-icons';
3+
import { HugeiconsIcon } from '@hugeicons/svelte';
4+
5+
interface IEvent {
6+
id: string;
7+
from: string;
8+
to: string;
9+
imageSrc?: string;
10+
vaultName?: string;
11+
}
12+
13+
interface IDataFlowProps {
14+
events: IEvent[];
15+
}
16+
17+
let { events }: IDataFlowProps = $props();
18+
let isPaused = $state(false);
19+
</script>
20+
21+
<article class="bg-gray flex h-[80vh] w-full flex-col items-center rounded-md px-16 py-6">
22+
<div class="mb-20.5 flex w-full items-center justify-between">
23+
<h4 class="text-xl">Live Monitoring</h4>
24+
<button
25+
onclick={() => (isPaused = !isPaused)}
26+
class="font-geist text-black-700 flex items-center gap-2 rounded-4xl border border-[#e5e5e5] bg-white px-4 py-3 text-base font-medium"
27+
>
28+
{#if isPaused}
29+
<HugeiconsIcon icon={PlayFreeIcons} size="24px" />
30+
{:else}
31+
<HugeiconsIcon icon={PauseFreeIcons} size="24px" />
32+
{/if}
33+
{isPaused ? 'Resume Live Feed' : 'Pause Live Feed'}
34+
</button>
35+
</div>
36+
<div class="relative z-10 flex w-full items-center justify-between">
37+
<!-- svelte-ignore element_invalid_self_closing_tag -->
38+
<div
39+
class="border-s-green border-b-green border-e-green absolute start-[50%] top-[55%] z-[-1] h-[175px] w-[88%] translate-x-[-50%] rounded-md border border-t-transparent bg-transparent"
40+
>
41+
<div
42+
class="dot bg-green absolute start-[-1px] top-0 h-2.5 w-2.5 rounded-full"
43+
style="--dot-animation-state: {isPaused ? 'paused' : 'running'}"
44+
/>
45+
</div>
46+
47+
<div
48+
class="flex flex-col items-center justify-center gap-2 rounded-md border border-black/10 bg-white p-3"
49+
>
50+
<HugeiconsIcon icon={Database01FreeIcons} />
51+
<div class="text-sm font-semibold">{events[0].from}</div>
52+
<div class="text-xs text-gray-500">{events[0].vaultName}</div>
53+
</div>
54+
55+
<div
56+
class="absolute start-[50%] top-[200px] translate-x-[-50%] rounded-md bg-white p-3 text-center shadow"
57+
>
58+
<img src="/" alt="Icon" />
59+
<div class="text-xs text-gray-700">{events[1].from}</div>
60+
</div>
61+
62+
<div
63+
class="border-green flex flex-col items-center justify-center gap-2 rounded-md border bg-white p-3"
64+
>
65+
<HugeiconsIcon icon={Database01FreeIcons} />
66+
<div class="text-sm font-semibold">{events[2].from}</div>
67+
<div class="text-xs text-gray-500">{events[2].vaultName}</div>
68+
</div>
69+
</div>
70+
</article>
71+
72+
<style>
73+
.dot {
74+
offset-path: rect(0px 100% 175px 0px round 0%);
75+
offset-distance: 0%;
76+
offset-rotate: auto;
77+
animation: move 10s linear infinite;
78+
animation-play-state: var(--dot-animation-state, running);
79+
}
80+
81+
@keyframes move {
82+
0% {
83+
offset-distance: 100%;
84+
opacity: 1;
85+
}
86+
50% {
87+
opacity: 1;
88+
}
89+
55% {
90+
opacity: 0.4;
91+
}
92+
60% {
93+
opacity: 0;
94+
}
95+
100% {
96+
offset-distance: 0%;
97+
opacity: 0;
98+
}
99+
}
100+
</style>

‎infrastructure/control-panel/src/lib/fragments/Logs/Logs.stories.ts‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import type { ComponentProps } from 'svelte';
2+
import Logs from './Logs.svelte';
3+
4+
export default {
5+
title: 'UI/Logs',
6+
component: Logs,
7+
tags: ['autodocs'],
8+
render: (args: { Component: Logs; props: ComponentProps<typeof Logs> }) => ({
9+
Component: Logs,
10+
props: args
11+
})
12+
};
13+
14+
export const Default = {
15+
args: {
16+
events: [
17+
{
18+
timestamp: new Date(),
19+
action: 'upload',
20+
message: 'msg_123',
21+
to: 'alice.vault.dev'
22+
},
23+
{
24+
timestamp: new Date(),
25+
action: 'fetch',
26+
message: 'msg_124',
27+
from: 'bob.vault.dev'
28+
},
29+
{
30+
timestamp: new Date(),
31+
action: 'webhook',
32+
to: 'Alice',
33+
from: 'Pic'
34+
}
35+
]
36+
}
37+
};

0 commit comments

Comments
 (0)