Skip to content

Commit 6b79a92

Browse files
brionmariobrionmario
committed
chore: fix eslint issues
1 parent ccf8a47 commit 6b79a92

File tree

8 files changed

+229
-121
lines changed

8 files changed

+229
-121
lines changed

‎apps/www/.eslintrc.cjs‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,5 +56,13 @@ module.exports = {
5656
],
5757
},
5858
],
59+
// This is needed to allow the use of `@` alias in the import paths.
60+
// TODO: Add this in the shared config.
61+
'import/resolver': {
62+
typescript: {
63+
alwaysTryTypes: true,
64+
project: [path.resolve(__dirname, 'tsconfig.json')],
65+
},
66+
},
5967
},
6068
};

‎apps/www/app/layout.tsx‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -23,16 +23,15 @@
2323
*/
2424

2525
import type {Metadata} from 'next';
26-
import {Space_Grotesk} from 'next/font/google';
27-
import {Inter} from 'next/font/google';
28-
import './globals.scss';
29-
import './custom.scss';
26+
import {Space_Grotesk, Inter} from 'next/font/google';
3027
import {ReactElement} from 'react';
3128
import {NextFont} from 'next/dist/compiled/@next/font';
3229
import ThemeProvider from '@/components/ThemeProvider';
30+
import './globals.scss';
31+
import './custom.scss';
3332

3433
const spaceGrotesk: NextFont = Space_Grotesk({subsets: ['latin'], weight: ['400', '500']});
35-
const inter = Inter({subsets: ['latin']});
34+
const inter: NextFont = Inter({subsets: ['latin']});
3635

3736
export const metadata: Metadata = {
3837
title: 'Create Next App',

‎apps/www/app/page.tsx‎

Lines changed: 19 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,11 @@ import Hero from '@/components/Hero';
2727
import {ReactElement} from 'react';
2828
import Footer from '@/components/Footer';
2929

30-
const navItems = [
30+
const navItems: {
31+
name: string;
32+
route: string;
33+
title: string;
34+
}[] = [
3135
{
3236
name: 'upcoming',
3337
route: '/',
@@ -40,18 +44,19 @@ const navItems = [
4044
},
4145
];
4246

43-
export const Home = (): ReactElement => (
44-
<div dir="ltr">
45-
<NavBar items={[]} />
46-
<div className="mx-auto flex">
47-
<div className="overflow-x-hidden w-full">
48-
<main className="relative">
49-
<Hero />
50-
</main>
47+
// eslint-disable-next-line react/function-component-definition
48+
export default function Home(): ReactElement {
49+
return (
50+
<div dir="ltr">
51+
<NavBar items={[]} />
52+
<div className="mx-auto flex">
53+
<div className="overflow-x-hidden w-full">
54+
<main className="relative">
55+
<Hero />
56+
</main>
57+
</div>
5158
</div>
59+
<Footer />
5260
</div>
53-
<Footer />
54-
</div>
55-
);
56-
57-
export default Home;
61+
);
62+
}

‎apps/www/components/Hero.tsx‎

Lines changed: 72 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -22,8 +22,12 @@
2222
* SOFTWARE.
2323
*/
2424

25+
'use client';
26+
2527
import {ForwardedRef, forwardRef, ForwardRefExoticComponent, HTMLAttributes, RefAttributes} from 'react';
2628
import {CalendarDays, Clock, ExternalLink, MapPin} from 'lucide-react';
29+
import {useRouter} from 'next/navigation';
30+
import {AppRouterInstance} from 'next/dist/shared/lib/app-router-context.shared-runtime';
2731
import {cn} from '@/lib/utils';
2832
import {TestableComponent} from '@/types/dom';
2933
import NelumKuluna from '@/icons/NelumKuluna';
@@ -37,67 +41,80 @@ export type HeroProps = HTMLAttributes<HTMLDivElement> & TestableComponent;
3741
const Hero: ForwardRefExoticComponent<HeroProps & RefAttributes<HTMLDivElement>> = forwardRef<
3842
HTMLDivElement,
3943
HeroProps
40-
>(({className, ...rest}: HeroProps, ref: ForwardedRef<HTMLDivElement>) => (
41-
<div className={cn('hero', className)} ref={ref} {...rest}>
42-
<div
43-
className={cn(
44-
'w-auto pb-16 pt-[40px] md:pb-24 lg:pb-32 md:pt-16 lg:pt-25 flex justify-between gap-8 items-center flex-col relative z-0',
45-
className,
46-
)}
47-
>
48-
<div className="z-50 flex flex-col items-center justify-center gap-5 px-6 text-center lg:gap-6">
49-
<h1 className="hero__title font-good-brush tracking-[-0.04em] leading-none text-[40px] md:text-5xl lg:text-[12em] max-w-lg md:max-w-xl lg:max-w-4xl text-center text-white">
50-
JavaScript Colombo
51-
</h1>
52-
<h3 className="flex gap-2 flex-wrap justify-center items-center font-space-grotesk leading-snug dark:text-[#FFFFFFB2] text-[#00000080] text-[20px] lg:text-xl max-w-md md:max-w-xl lg:max-w-[640px] text-center">
53-
Let&apos;s meetup in Colombo, grab a <span className="underlined">coffee</span>
54-
<CoffeeBeans height={28} width={28} /> and talk{' '}
55-
<span>
56-
<code className="font-mono">`</code>
57-
<span className="font-bold">JavaScript</span>
58-
<code className="font-mono">`</code>
59-
</span>
60-
</h3>
61-
<div className="mt-8 text-left border border-1 px-8 py-6 rounded-md">
62-
<h4 className="text-lg font-bold text-primary mb-2">🔔 Next session</h4>
63-
<p className="text-md text-primary flex items-center gap-1">
64-
<span className="flex items-center gap-1">
65-
<CalendarDays /> Nov 6th 2024
66-
</span>
67-
,{' '}
68-
<span className="flex items-center gap-1">
69-
<Clock />
70-
6:00 PM Eastern
71-
</span>{' '}
72-
at{' '}
73-
<span className="flex items-center gap-1">
74-
<MapPin className="text-[red]" />
75-
WSO2, Colombo 4, Sri Lanka
44+
>(({className, ...rest}: HeroProps, ref: ForwardedRef<HTMLDivElement>) => {
45+
const router: AppRouterInstance = useRouter();
46+
47+
const handleRegisterClick = (): void => {
48+
const orgName: string | undefined = process.env.NEXT_PUBLIC_ASGARDEO_CLIENT_APP_ORG || '';
49+
const clientId: string | undefined = process.env.NEXT_PUBLIC_ASGARDEO_CLIENT_APP_ID || '';
50+
const appName: string | undefined = process.env.NEXT_PUBLIC_ASGARDEO_CLIENT_APP_NAME || '';
51+
52+
const url: string = `https://accounts.asgardeo.io/t/${orgName}/accountrecoveryendpoint/register.do?client_id=${clientId}&sp=${appName}`;
53+
router.push(url);
54+
};
55+
56+
return (
57+
<div className={cn('hero', className)} ref={ref} {...rest}>
58+
<div
59+
className={cn(
60+
'w-auto pb-16 pt-[40px] md:pb-24 lg:pb-32 md:pt-16 lg:pt-25 flex justify-between gap-8 items-center flex-col relative z-0',
61+
className,
62+
)}
63+
>
64+
<div className="z-50 flex flex-col items-center justify-center gap-5 px-6 text-center lg:gap-6">
65+
<h1 className="hero__title font-good-brush tracking-[-0.04em] leading-none text-[40px] md:text-5xl lg:text-[12em] max-w-lg md:max-w-xl lg:max-w-4xl text-center text-white">
66+
JavaScript Colombo
67+
</h1>
68+
<h3 className="flex gap-2 flex-wrap justify-center items-center font-space-grotesk leading-snug dark:text-[#FFFFFFB2] text-[#00000080] text-[20px] lg:text-xl max-w-md md:max-w-xl lg:max-w-[640px] text-center">
69+
Let&apos;s meetup in Colombo, grab a <span className="underlined">coffee</span>
70+
<CoffeeBeans height={28} width={28} /> and talk{' '}
71+
<span>
72+
<code className="font-mono">`</code>
73+
<span className="font-bold">JavaScript</span>
74+
<code className="font-mono">`</code>
7675
</span>
77-
</p>
78-
</div>
79-
<div className="flex items-center gap-10 mt-10">
80-
<RegisterButton className="w-60">
81-
<FlipWords words={['Register', 'RSVP ✨']} className="text-inverse font-bold" />
82-
</RegisterButton>
83-
<div className="flex items-center gap-10">
84-
<div className="h-12 w-px bg-gray-400" />
85-
<span className="flex items-center">
86-
check us out on{' '}
87-
<span className="flex items-center underlined cursor-pointer group">
88-
<Meetup height={30} width={100} />
89-
<ExternalLink className="text-secondary opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
76+
</h3>
77+
<div className="mt-8 text-left border border-1 px-8 py-6 rounded-md">
78+
<h4 className="text-lg font-bold text-primary mb-2">🔔 Next session</h4>
79+
<p className="text-md text-primary flex items-center gap-1">
80+
<span className="flex items-center gap-1">
81+
<CalendarDays /> Nov 6th 2024
9082
</span>
91-
</span>
83+
,{' '}
84+
<span className="flex items-center gap-1">
85+
<Clock />
86+
6:00 PM Eastern
87+
</span>{' '}
88+
at{' '}
89+
<span className="flex items-center gap-1">
90+
<MapPin className="text-[red]" />
91+
WSO2, Colombo 4, Sri Lanka
92+
</span>
93+
</p>
94+
</div>
95+
<div className="flex items-center gap-10 mt-10">
96+
<RegisterButton className="w-60" onClick={handleRegisterClick}>
97+
<FlipWords words={['Register', 'RSVP ✨']} className="text-inverse font-bold" />
98+
</RegisterButton>
99+
<div className="flex items-center gap-10">
100+
<div className="h-12 w-px bg-gray-400" />
101+
<span className="flex items-center">
102+
check us out on{' '}
103+
<span className="flex items-center underlined cursor-pointer group">
104+
<Meetup height={30} width={100} />
105+
<ExternalLink className="text-secondary opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
106+
</span>
107+
</span>
108+
</div>
92109
</div>
93-
</div>
94110

95-
<div className="nelum-kuluna-mask absolute right-[-125px] top-[50px]">
96-
<NelumKuluna />
111+
<div className="nelum-kuluna-mask absolute right-[-125px] top-[50px]">
112+
<NelumKuluna />
113+
</div>
97114
</div>
98115
</div>
99116
</div>
100-
</div>
101-
));
117+
);
118+
});
102119

103120
export default Hero;

‎apps/www/components/NavBar.tsx‎

Lines changed: 5 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -82,8 +82,8 @@ const NavBar: FC<NavBarProps> = ({items}: NavBarProps): ReactElement => {
8282
const transition: Transition = shouldReduceMotion ? {duration: 0} : {};
8383

8484
const handleScroll = (): void => {
85-
const isScrolled = window.scrollY > 0;
86-
const navBar = document.getElementById('navbar'); // Add an ID to your navbar element
85+
const isScrolled: boolean = window.scrollY > 0;
86+
const navBar: HTMLElement | null = document.getElementById('navbar');
8787

8888
if (navBar) {
8989
if (isScrolled) {
@@ -108,14 +108,7 @@ const NavBar: FC<NavBarProps> = ({items}: NavBarProps): ReactElement => {
108108
<nav className="mx-auto flex h-[var(--js-cmb-navbar-height)] max-w-[90rem] items-center justify-between gap-2 pl-[max(env(safe-area-inset-left),1.5rem)] pr-[max(env(safe-area-inset-right),1.5rem)]">
109109
<div className="flex justify-center gap-4 align-middle">
110110
<Link href="/" passHref className="hover:opacity-75">
111-
<Logo
112-
className="navbar__logo"
113-
data-testid="navbar-logo"
114-
alt="Site logo"
115-
height={80}
116-
width={200}
117-
// className={styles.desktopLogo}
118-
/>
111+
<Logo className="navbar__logo" data-testid="navbar-logo" alt="Site logo" height={80} width={200} />
119112
</Link>
120113
</div>
121114

@@ -124,7 +117,7 @@ const NavBar: FC<NavBarProps> = ({items}: NavBarProps): ReactElement => {
124117
{items.map((item: NavBarItem) => (
125118
<NavLink
126119
key={item.route}
127-
href={item.route}
120+
href={item.route as string}
128121
title={item.title as string}
129122
data-testid={`navbar-item-${item.title}`}
130123
>
@@ -202,7 +195,7 @@ const NavBar: FC<NavBarProps> = ({items}: NavBarProps): ReactElement => {
202195
{items.map((item: NavBarItem) => (
203196
<MobileNavLink
204197
key={item.route}
205-
href={item.route}
198+
href={item.route as string}
206199
title={item.title as string}
207200
onClick={toggleMobileMenu}
208201
data-testid={`navbar-item-${item.title}`}

‎apps/www/components/NavLink.tsx‎

Lines changed: 13 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -35,19 +35,14 @@ import {
3535
import Link from 'next/link';
3636
import {useRouter} from 'next/navigation';
3737
import type {TestableComponent} from '@/types/dom';
38-
import type {PolymorphicComponent, PolymorphicRef} from '@/types/component';
3938
import {AppRouterInstance} from 'next/dist/shared/lib/app-router-context.shared-runtime';
4039
import {cn} from '@/lib/utils';
41-
42-
/**
43-
* Type definition for the polymorphic `NavLink` component that represents a navigation link.
44-
*/
45-
type PolymorphicNavLinkComponent = <T extends ElementType = 'a'>(props: NavLinkProps<T>) => ReactElement | null;
40+
import {usePathname} from 'next/navigation';
4641

4742
/**
4843
* The `NavLinkProps` interface represents the props accepted by the `NavLink` component.
4944
*/
50-
export type NavLinkProps<T extends ElementType> = PolymorphicComponent<T> &
45+
export type NavLinkProps = HTMLAttributes<HTMLLIElement> &
5146
TestableComponent & {
5247
/**
5348
* The URL the link points to.
@@ -70,25 +65,14 @@ export type NavLinkProps<T extends ElementType> = PolymorphicComponent<T> &
7065
* @param props - Props for the component.
7166
* @returns NavLink as a React component.
7267
*/
73-
const NavLink: PolymorphicNavLinkComponent = forwardRef(
74-
<T extends ElementType>(
75-
{as, href, title, className, key, ...rest}: NavLinkProps<T>,
76-
ref: PolymorphicRef<T>,
77-
): ReactElement => {
78-
const router: AppRouterInstance = useRouter();
79-
const isSelected: boolean = router.pathname === href;
80-
81-
const Element: T | ElementType = as || 'li';
68+
const NavLink: ForwardRefExoticComponent<NavLinkProps & RefAttributes<HTMLLIElement>> = forwardRef(
69+
({href, title, className, ...rest}: NavLinkProps, ref: ForwardedRef<HTMLLIElement>): ReactElement => {
70+
const pathname: string = usePathname();
71+
const isSelected: boolean = pathname === href;
8272

8373
return (
84-
<Element
85-
ref={ref}
86-
key={key}
87-
className={cn('px-5 py-2 flex items-center font-sans', className)}
88-
href={href}
89-
{...rest}
90-
>
91-
<Link href={href} {...rest} legacyBehavior>
74+
<li ref={ref} className={cn('px-5 py-2 flex items-center font-sans', className)} {...rest}>
75+
<Link href={href} legacyBehavior>
9276
{/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
9377
<a
9478
className={cn(
@@ -102,7 +86,7 @@ const NavLink: PolymorphicNavLinkComponent = forwardRef(
10286
{title}
10387
</a>
10488
</Link>
105-
</Element>
89+
</li>
10690
);
10791
},
10892
);
@@ -134,25 +118,20 @@ export type MobileNavLinkProps = HTMLAttributes<HTMLLIElement> &
134118
* @returns MobileNavLink as a React component.
135119
*/
136120
export const MobileNavLink: ForwardRefExoticComponent<MobileNavLinkProps & RefAttributes<HTMLLIElement>> = forwardRef(
137-
(
138-
{href, title, className, key, onClick, ...rest}: MobileNavLinkProps,
139-
ref: ForwardedRef<HTMLLIElement>,
140-
): ReactElement => {
141-
const router: AppRouterInstance = useRouter();
142-
const isSelected: boolean = router.pathname === href;
121+
({href, title, className, onClick, ...rest}: MobileNavLinkProps, ref: ForwardedRef<HTMLLIElement>): ReactElement => {
122+
const pathname: string = usePathname();
123+
const isSelected: boolean = pathname === href;
143124

144125
return (
145126
<li
146127
ref={ref}
147-
key={key}
148128
className={cn(
149129
'm-5 rounded-md border border-gray-200 hover:border-transparent bg-gray-100 dark:border-neutral-800 hover:dark:border-transparent dark:bg-background-surface hover:shadow-lg focus-ring hover:cursor-pointer text-primary font-sans',
150130
className,
151131
)}
152-
href={href}
153132
{...rest}
154133
>
155-
<Link href={href} {...rest} legacyBehavior>
134+
<Link href={href} legacyBehavior>
156135
{/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
157136
<a
158137
className={cn(

‎apps/www/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,7 @@
4949
"@types/react-dom": "^18.3.1",
5050
"eslint": "^8.57.0",
5151
"eslint-config-next": "15.0.0-rc.0",
52+
"eslint-import-resolver-typescript": "^3.6.3",
5253
"postcss": "^8.4.47",
5354
"prettier": "^3.3.3",
5455
"sass": "^1.80.4",

0 commit comments

Comments
 (0)