Skip to content

Commit dca28b8

Browse files
anuragxxdanuragxxd
authored
feat: refactor to new architecture (#401)
1 parent ba9456a commit dca28b8

File tree

415 files changed

+52811
-38563
lines changed

Some content is hidden

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

415 files changed

+52811
-38563
lines changed

‎.github/workflows/pr_evaluation.yml‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,7 @@ jobs:
7676
echo "::set-output name=version::$(node -v)"
7777
7878
- name: Get node_modules cache
79-
uses: actions/cache@v3.0.2
79+
uses: actions/cache@v4
8080
id: node_modules
8181
with:
8282
path: |
@@ -114,7 +114,7 @@ jobs:
114114
echo "::set-output name=version::$(node -v)"
115115
116116
- name: Get node_modules cache
117-
uses: actions/cache@v3.0.2
117+
uses: actions/cache@v4
118118
id: node_modules
119119
with:
120120
path: |
@@ -123,7 +123,7 @@ jobs:
123123

124124
- name: Cache Playwright
125125
id: playwright-cache
126-
uses: actions/cache@v3
126+
uses: actions/cache@v4
127127
with:
128128
path: |
129129
~/.cache/ms-playwright

‎apps/documentation/components/common/Card.tsx‎

Lines changed: 0 additions & 14 deletions
This file was deleted.

‎apps/documentation/components/common/PreviewLayout.tsx‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import React from 'react';
2+
import { EccUtilsDesignCard } from '@elixir-cloud/design/react';
3+
4+
interface PreviewLayoutProps {
5+
children: React.ReactNode;
6+
}
7+
8+
const PreviewLayout: React.FC<PreviewLayoutProps> = ({ children }) => {
9+
return <EccUtilsDesignCard className='part:shadow-inner'>{children}</EccUtilsDesignCard>;
10+
};
11+
12+
export default PreviewLayout;

‎apps/documentation/components/home/CrossPlatform.tsx‎

Lines changed: 0 additions & 18 deletions
This file was deleted.

‎apps/documentation/components/home/Customizable.tsx‎

Lines changed: 0 additions & 65 deletions
This file was deleted.

‎apps/documentation/components/home/FeaturesGrid.tsx‎

Lines changed: 111 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
import {
2+
EccUtilsDesignCard,
3+
EccUtilsDesignCardHeader,
4+
EccUtilsDesignCardTitle,
5+
EccUtilsDesignCardDescription,
6+
EccUtilsDesignCardContent,
7+
} from '@elixir-cloud/design/react';
8+
import { EarthIcon } from '@/components/icons/earth';
9+
import { ConnectIcon } from '@/components/icons/connect';
10+
import { SettingsIcon } from '@/components/icons/settings';
11+
import { BlocksIcon } from '../icons/blocks';
12+
import { GitPullRequestIcon } from '../icons/git';
13+
import { ChartColumnIncreasingIcon } from '../icons/chart';
14+
import { createRef, useRef } from 'react';
15+
16+
const features = [
17+
{
18+
icon: ConnectIcon,
19+
title: 'Framework Agnostic',
20+
description:
21+
'Web components that work seamlessly with React, Vue, Angular, vanilla HTML, or any web framework.',
22+
color: 'text-blue-600 dark:text-blue-400',
23+
},
24+
{
25+
icon: SettingsIcon,
26+
title: 'Fully Customizable',
27+
description:
28+
'Complete design control with CSS custom properties, design tokens, and shadcn/ui-inspired architecture.',
29+
color: 'text-purple-600 dark:text-purple-400',
30+
},
31+
{
32+
icon: EarthIcon,
33+
title: 'GA4GH Standards',
34+
description:
35+
'Built-in compatibility with all major GA4GH API specifications for federated cloud computing.',
36+
color: 'text-green-600 dark:text-green-400',
37+
},
38+
{
39+
icon: BlocksIcon,
40+
title: 'Provider Architecture',
41+
description:
42+
'Pluggable data layer supporting REST APIs, GraphQL endpoints, and mock providers for development.',
43+
color: 'text-orange-600 dark:text-orange-400',
44+
},
45+
{
46+
icon: GitPullRequestIcon,
47+
title: 'Open Source',
48+
description: 'ECC is open source and free to use. It is licensed under the Apache License 2.0.',
49+
color: 'text-indigo-600 dark:text-indigo-400',
50+
},
51+
{
52+
icon: ChartColumnIncreasingIcon,
53+
title: 'Production Ready',
54+
description:
55+
'Battle-tested components used in real federated cloud environments across research organizations.',
56+
color: 'text-red-600 dark:text-red-400',
57+
},
58+
];
59+
60+
interface IconHandle {
61+
startAnimation: () => void;
62+
stopAnimation: () => void;
63+
}
64+
65+
export default function FeaturesGrid() {
66+
const iconRefs = useRef(features.map(() => createRef<IconHandle>()));
67+
return (
68+
<section className='mt-24 md:mt-32 px-4 max-w-7xl mx-auto'>
69+
{/* Section Header */}
70+
<div className='text-center mb-16'>
71+
<h2 className='text-3xl md:text-4xl font-bold text-zinc-900 dark:text-zinc-100 mb-4'>
72+
Built for Modern Development
73+
</h2>
74+
<p className='text-lg text-zinc-600 dark:text-zinc-300 max-w-3xl mx-auto'>
75+
Everything you need to build robust, scalable applications for federated cloud
76+
environments.
77+
</p>
78+
</div>
79+
80+
{/* Features Grid */}
81+
<div className='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8'>
82+
{features.map((feature, index) => {
83+
const Icon = feature.icon;
84+
return (
85+
<EccUtilsDesignCard
86+
key={index}
87+
className='h-full part:h-full part:hover:shadow-lg part:transition-all part:duration-300 part:group'
88+
onMouseEnter={() => iconRefs.current[index].current?.startAnimation()}
89+
onMouseLeave={() => iconRefs.current[index].current?.stopAnimation()}
90+
>
91+
<EccUtilsDesignCardHeader className='part:flex part:flex-row part:items-start part:space-y-4'>
92+
<Icon
93+
ref={iconRefs.current[index]}
94+
className={`h-8 w-8 scale-[.8] ${feature.color}`}
95+
/>
96+
<EccUtilsDesignCardTitle className='part:text-xl part:font-semibold part:text-zinc-900 part:dark:text-zinc-100 part:mb-2'>
97+
{feature.title}
98+
</EccUtilsDesignCardTitle>
99+
</EccUtilsDesignCardHeader>
100+
<EccUtilsDesignCardContent>
101+
<EccUtilsDesignCardDescription className='part:text-zinc-600 part:dark:text-zinc-400 part:leading-relaxed'>
102+
{feature.description}
103+
</EccUtilsDesignCardDescription>
104+
</EccUtilsDesignCardContent>
105+
</EccUtilsDesignCard>
106+
);
107+
})}
108+
</div>
109+
</section>
110+
);
111+
}

‎apps/documentation/components/home/Hero.tsx‎

Lines changed: 56 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,67 @@
11
'use client';
2-
import { RiArrowRightLine } from '@remixicon/react';
3-
import { Link } from 'nextra-theme-docs';
2+
import { RiArrowRightLine, RiGithubLine } from '@remixicon/react';
3+
import { EccUtilsDesignButton } from '@elixir-cloud/design/react';
44

55
export default function Hero() {
66
return (
7-
<div className='mx-auto static mt-0 md:mt-[7rem] flex flex-col items-center'>
8-
<div className='flex flex-col items-center w-full md:w-5/6'>
9-
<h1 className='text-7xl font-extrabold bg-gradient-to-r from-sky-600 to-green-400 via-sky-400 text-transparent bg-clip-text text-center flex-col items-center gap-4 hidden md:flex'>
10-
<div>The Component Library</div>
11-
<div>for Federated Cloud Services</div>
12-
</h1>
13-
<h1 className='text-4xl mt-32 font-extrabold bg-gradient-to-r from-sky-600 to-green-400 via-sky-400 text-transparent bg-clip-text text-center block md:hidden'>
14-
The Component Library for Federated Cloud Services
7+
<div className='mx-auto static mt-12 md:mt-[6rem] flex flex-col items-center'>
8+
<div className='flex flex-col items-center w-full md:w-5/6 max-w-6xl'>
9+
{/* Main Headline */}
10+
<h1 className='text-5xl md:text-7xl font-extrabold bg-gradient-to-r from-sky-600 to-green-400 via-sky-400 text-transparent bg-clip-text text-center leading-tight'>
11+
<div className='hidden md:block'>
12+
<div>Build Federated Cloud</div>
13+
<div>Applications with Ease</div>
14+
</div>
15+
<div className='block md:hidden'>
16+
Build Federated Cloud Applications with Ease
17+
</div>
1518
</h1>
16-
<p className='mt-6 md:mt-8 text-base md:text-xl text-zinc-500 max-w-7xl text-center'>
17-
Modular, customizable, and extensible components for interacting with cloud
18-
infrastructure.
19+
20+
{/* Subtitle */}
21+
<p className='mt-6 md:mt-8 text-lg md:text-xl text-zinc-600 dark:text-zinc-300 max-w-4xl text-center leading-relaxed'>
22+
Production-ready components for GA4GH-compliant cloud services.
23+
<span className='block mt-2'>
24+
Framework-agnostic, fully customizable, and built for modern development.
25+
</span>
1926
</p>
20-
<div className='flex flex-wrap gap-4 mt-10 md:mt-12 text-sm md:text-base items-center justify-center'>
21-
<Link
22-
href='/docs/introduction'
23-
className='rounded-xl bg-sky-600 hover:bg-sky-500 !text-white py-2 px-6 transition duration-300 ease-in-out flex items-center gap-1'
24-
style={{ textDecoration: 'none' }}
27+
28+
{/* CTAs */}
29+
<div className='flex flex-col sm:flex-row gap-4 mt-10 md:mt-12 text-sm md:text-base items-center justify-center'>
30+
<EccUtilsDesignButton
31+
onClick={() => {
32+
window.location.href = '/docs/introduction';
33+
}}
34+
variant='default'
35+
className='part:bg-sky-600 part:hover:bg-sky-500 part:text-white'
2536
>
26-
Get started
27-
<RiArrowRightLine className='inline-block h-4' />
28-
</Link>
29-
<Link
30-
href='/docs/installation'
31-
className='rounded-xl dark:bg-zinc-700 dark:hover:bg-zinc-600 bg-zinc-300 hover:bg-zinc-200 dark:!text-white !text-zinc-900 py-2 px-6 transition duration-300 ease-in-out flex items-center justify-center'
32-
style={{ textDecoration: 'none' }}
37+
Get Started
38+
<RiArrowRightLine className='h-4 w-4' />
39+
</EccUtilsDesignButton>
40+
41+
<EccUtilsDesignButton
42+
onClick={() => {
43+
window.location.href = 'https://github.com/elixir-cloud-aai/cloud-components';
44+
}}
45+
variant='secondary'
3346
>
34-
Install
35-
</Link>
36-
<div className='p-0.5 rounded-xl flex items-center justify-center bg-gradient-to-r from-sky-600 to-green-400 via-sky-400'>
37-
<Link
38-
href='/docs/customization'
39-
className='rounded-xl dark:bg-zinc-700 dark:hover:bg-zinc-600 bg-zinc-300 hover:bg-zinc-200 dark:!text-white !text-zinc-900 py-1.5 px-6 transition duration-300 ease-in-out w-full'
40-
style={{ textDecoration: 'none' }}
41-
>
42-
Make your own?
43-
</Link>
47+
<RiGithubLine className='h-4 w-4' />
48+
View on GitHub
49+
</EccUtilsDesignButton>
50+
</div>
51+
52+
{/* Quick stats */}
53+
<div className='flex flex-wrap gap-6 mt-8 text-sm text-zinc-500 dark:text-zinc-400 items-center justify-center'>
54+
<div className='flex items-center gap-2'>
55+
<div className='w-2 h-2 bg-green-500 rounded-full'></div>
56+
<span>5+ GA4GH Services</span>
57+
</div>
58+
<div className='flex items-center gap-2'>
59+
<div className='w-2 h-2 bg-blue-500 rounded-full'></div>
60+
<span>25+ Components</span>
61+
</div>
62+
<div className='flex items-center gap-2'>
63+
<div className='w-2 h-2 bg-purple-500 rounded-full'></div>
64+
<span>Framework Agnostic</span>
4465
</div>
4566
</div>
4667
</div>

0 commit comments

Comments
 (0)