Skip to content

Commit a6ecc48

Browse files
rebeccahongsfrebeccahongsf
committed
restructure directory and imports, add grid component
1 parent b5c04fb commit a6ecc48

Some content is hidden

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

58 files changed

+1137
-305
lines changed

‎AGENTS.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -141,7 +141,7 @@ export const Component = ({ required, optional, children, ...props }: ComponentP
141141
**Example:**
142142
```typescript
143143
import {clsx} from "clsx";
144-
import twMerge from "@lib/utils/twMerge";
144+
import twMerge from "@/utilities/utils/twMerge";
145145

146146
export const Card = ({ variant, className, children }: CardProps) => (
147147
<div className={twMerge(

‎app/page.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
import ActionLink from "@components/elements/action-link";
2-
import { H1, H2 } from "@components/elements/headers";
3-
import { Text } from "@components/elements/text";
4-
import GlobalPage from "@components/layouts/global-page";
5-
import { BgImageWrapper } from "@components/paragraphs/bg-image-section";
6-
import ThreeColumn from "@components/paragraphs/rows/three-column";
7-
import TwoColumn from "@components/paragraphs/rows/two-column";
1+
import ActionLink from "@/components/Cta/ActionLink";
2+
import { H1, H2 } from "@/components/Typography/Headers";
3+
import { Text } from "@/components/Typography/Text";
4+
import GlobalPage from "@/components/Layout/GlobalPage";
5+
import { BgImageWrapper } from "@/components/BgImageSection/BgImageSection";
6+
import ThreeColumn from "@/components/Row/ThreeColumn";
7+
import TwoColumn from "@/components/Row/TwoColumn";
88
import Image from "next/image";
99

1010
export default function Home() {

src/components/elements/accordion.tsx renamed to components/Accordion/Accordion.tsx

Lines changed: 30 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,46 @@
11
"use client";
22

3-
import {HTMLAttributes, JSX, useId} from "react";
4-
import {useBoolean} from "usehooks-ts";
3+
import { HTMLAttributes, JSX, useId } from "react";
4+
import { useBoolean } from "usehooks-ts";
55
import {
6-
H2, H3, H4, H5,
7-
} from "@components/elements/headers";
8-
import {ChevronDownIcon} from "@heroicons/react/20/solid";
9-
import {clsx} from "clsx";
10-
import twMerge from "@lib/utils/twMerge";
6+
H2, H3, H4, H5,
7+
} from "@/components/Typography/Headers";
8+
import { ChevronDownIcon } from "@heroicons/react/20/solid";
9+
import { clsx } from "clsx";
10+
import twMerge from "@/utilities/utils/twMerge";
1111

12-
export type AccordionHeaderChoice = "h2" | "h3" | "h4" | "h5"
12+
export type AccordionHeaderChoice = "h2" | "h3" | "h4" | "h5";
1313

1414
type Props = HTMLAttributes<HTMLElement> & {
1515
/**
1616
* Button clickable element or string.
1717
*/
18-
button: JSX.Element | string
18+
button: JSX.Element | string;
1919
/**
2020
* Heading level element.
2121
*/
22-
headingLevel?: AccordionHeaderChoice
22+
headingLevel?: AccordionHeaderChoice;
2323
/**
2424
* If the accordion should be visible on first render.
2525
*/
26-
initiallyVisible?: boolean
26+
initiallyVisible?: boolean;
2727
/**
2828
* Button click event if the component is controlled.
2929
*/
30-
onClick?: () => void
30+
onClick?: () => void;
3131
/**
3232
* Panel visibility state if the component is controlled.
3333
*/
34-
isVisible?: boolean
34+
isVisible?: boolean;
3535
/**
3636
* Extra attributes on the button element.
3737
*/
38-
buttonProps?: HTMLAttributes<HTMLButtonElement>
38+
buttonProps?: HTMLAttributes<HTMLButtonElement>;
3939
/**
4040
* Extra attributes on the panel element.
4141
*/
42-
panelProps?: HTMLAttributes<HTMLDivElement>
43-
}
42+
panelProps?: HTMLAttributes<HTMLDivElement>;
43+
};
4444

4545
const Accordion = ({
4646
button,
@@ -53,7 +53,8 @@ const Accordion = ({
5353
panelProps,
5454
...props
5555
}: Props) => {
56-
const {value: expanded, toggle: toggleExpanded} = useBoolean(initiallyVisible);
56+
const { value: expanded, toggle: toggleExpanded } =
57+
useBoolean(initiallyVisible);
5758
const id = useId();
5859

5960
const onButtonClick = () => {
@@ -90,23 +91,32 @@ const Accordion = ({
9091
<Heading id={`${id}-button`}>
9192
<button
9293
{...buttonProps}
93-
className={twMerge("flex w-full items-center text-left hocus-visible:underline", buttonProps?.className)}
94+
className={twMerge(
95+
"flex w-full items-center text-left hocus-visible:underline",
96+
buttonProps?.className,
97+
)}
9498
aria-expanded={isExpanded}
9599
aria-controls={`${id}-panel`}
96100
onClick={onButtonClick}
97101
>
98102
{button}
99103
<ChevronDownIcon
100104
height={30}
101-
className={twMerge("ml-auto shrink-0 duration-150", clsx({"rotate-180": isExpanded}))}
105+
className={twMerge(
106+
"ml-auto shrink-0 duration-150",
107+
clsx({ "rotate-180": isExpanded }),
108+
)}
102109
/>
103110
</button>
104111
</Heading>
105112

106113
<div
107114
{...panelProps}
108115
id={`${id}-panel`}
109-
className={twMerge(isExpanded ? "mb-20 block" : "hidden", panelProps?.className)}
116+
className={twMerge(
117+
isExpanded ? "mb-20 block" : "hidden",
118+
panelProps?.className,
119+
)}
110120
role="region"
111121
aria-labelledby={`${id}-button`}
112122
>

src/components/elements/back-to-top.tsx renamed to components/BackToTop/BackToTop.tsx

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
"use client";
22

3-
import Button from "@components/elements/button";
4-
import {ChevronUpIcon} from "@heroicons/react/20/solid";
5-
import {useBoolean, useDebounceCallback, useEventListener} from "usehooks-ts";
6-
import {useCallback} from "react";
7-
import {clsx} from "clsx";
8-
import twMerge from "@lib/utils/twMerge";
3+
import Button from "@/components/Cta/Button";
4+
import { ChevronUpIcon } from "@heroicons/react/20/solid";
5+
import { useBoolean, useDebounceCallback, useEventListener } from "usehooks-ts";
6+
import { useCallback } from "react";
7+
import { clsx } from "clsx";
8+
import twMerge from "@/utilities/utils/twMerge";
99

1010
const BackToTop = () => {
11-
const {value, setFalse, setTrue} = useBoolean(false);
11+
const { value, setFalse, setTrue } = useBoolean(false);
1212

1313
const onScroll = useCallback(() => {
1414
if (window.scrollY > 1500) setTrue();
@@ -21,9 +21,11 @@ const BackToTop = () => {
2121
scrollTo({
2222
left: 0,
2323
top: 0,
24-
behavior: window.matchMedia("(prefers-reduced-motion: reduce)")?.matches ? "instant" : "smooth",
24+
behavior: window.matchMedia("(prefers-reduced-motion: reduce)")?.matches
25+
? "instant"
26+
: "smooth",
2527
});
26-
document.getElementById("main-content")?.focus({preventScroll: true});
28+
document.getElementById("main-content")?.focus({ preventScroll: true });
2729
}, []);
2830

2931
return (

src/components/paragraphs/bg-image-section.tsx renamed to components/BgImageSection/BgImageSection.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import {
55
ColorToken,
66
getColorClasses,
77
getBgColorClasses,
8-
} from "@lib/colorTokens";
8+
} from "@/utilities/colorTokens";
99

1010
type BgImageWrapperProps = HTMLAttributes<HTMLDivElement> & {
1111
bgColor?: ColorToken;

src/components/paragraphs/card-paragraph.tsx renamed to components/CardParagraph/CardParagraph.tsx

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
import {HtmlHTMLAttributes} from "react";
2-
import {H2, H3, H4} from "@components/elements/headers";
3-
import ActionLink from "@components/elements/action-link";
4-
import Button from "@components/elements/button";
5-
import ImageCard from "@components/patterns/image-card";
6-
import {clsx} from "clsx";
1+
import { HtmlHTMLAttributes } from "react";
2+
import { H2, H3, H4 } from "@/components/Typography/Headers";
3+
import ActionLink from "@/components/Cta/ActionLink";
4+
import Button from "@/components/Cta/Button";
5+
import ImageCard from "@/components/ImageCard/ImageCard";
6+
import { clsx } from "clsx";
77

88
type Props = HtmlHTMLAttributes<HTMLDivElement> & {
99
id?: string;
@@ -67,11 +67,15 @@ const CardParagraph = ({
6767
{header}
6868
</H4>
6969
)}
70-
{headingLevel === "div" && <div className={headerClasses}>{header}</div>}
70+
{headingLevel === "div" && (
71+
<div className={headerClasses}>{header}</div>
72+
)}
7173
</>
7274
)}
7375

74-
{superHeader && <div className="order-first font-semibold">{superHeader}</div>}
76+
{superHeader && (
77+
<div className="order-first font-semibold">{superHeader}</div>
78+
)}
7579

7680
{children}
7781

src/components/elements/count-up.tsx renamed to components/CountUp/CountUp.tsx

Lines changed: 19 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,23 @@
11
"use client";
22

3-
import {useEffect, useRef, useState} from "react";
3+
import { useEffect, useRef, useState } from "react";
44
import {
5-
motion, useInView, useMotionValue, useSpring, useReducedMotion,
5+
motion,
6+
useInView,
7+
useMotionValue,
8+
useSpring,
9+
useReducedMotion,
610
} from "motion/react";
7-
import {useComponentAnimation} from "@hooks/useComponentAnimation";
11+
import { useComponentAnimation } from "@/hooks/useComponentAnimation";
812

913
type CountUpProps = {
10-
end: number | string
11-
duration?: number
12-
prefix?: string
13-
suffix?: string
14-
decimals?: number
15-
className?: string
16-
}
14+
end: number | string;
15+
duration?: number;
16+
prefix?: string;
17+
suffix?: string;
18+
decimals?: number;
19+
className?: string;
20+
};
1721

1822
const parseNumber = (value: number | string): number => {
1923
if (typeof value === "number") return value;
@@ -27,7 +31,8 @@ const formatNumber = (value: number, decimals: number): string => {
2731
if (isNaN(num)) return "0";
2832

2933
// Format with proper decimal places first
30-
const fixed = decimals > 0 ? num.toFixed(decimals) : Math.floor(num).toString();
34+
const fixed =
35+
decimals > 0 ? num.toFixed(decimals) : Math.floor(num).toString();
3136

3237
// Split into integer and decimal parts
3338
const parts = fixed.split(".");
@@ -53,7 +58,7 @@ const CountUpNumber = ({
5358
const prefersReducedMotion = useReducedMotion();
5459

5560
// Check if animations are enabled for this component
56-
const {isEnabled} = useComponentAnimation();
61+
const { isEnabled } = useComponentAnimation();
5762
const isAnimationEnabled = isEnabled("statCard");
5863

5964
// Parse string value that may contain commas
@@ -66,10 +71,10 @@ const CountUpNumber = ({
6671
bounce: 0,
6772
});
6873
const [displayValue, setDisplayValue] = useState(0);
69-
const isInView = useInView(ref, {once: true});
74+
const isInView = useInView(ref, { once: true });
7075

7176
useEffect(() => {
72-
const unsubscribe = springValue.on("change", latest => {
77+
const unsubscribe = springValue.on("change", (latest) => {
7378
setDisplayValue(parseFloat(latest.toFixed(decimals)));
7479
});
7580

src/components/elements/action-link.tsx renamed to components/Cta/ActionLink.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import { ChevronRightIcon } from "@heroicons/react/20/solid";
22
import { HtmlHTMLAttributes } from "react";
3-
import twMerge from "@lib/utils/twMerge";
3+
import twMerge from "@/utilities/utils/twMerge";
44
import Link from "next/link";
5-
import { getLinkHref } from "@components/elements/link";
6-
import { CtaVariant, getCtaClasses } from "@lib/colorTokens";
5+
import { getLinkHref } from "@/components/Cta/Link";
6+
import { CtaVariant, getCtaClasses } from "@/utilities/colorTokens";
77

88
type Props = HtmlHTMLAttributes<HTMLAnchorElement> & {
99
/**

src/components/elements/button.tsx renamed to components/Cta/Button.tsx

Lines changed: 28 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,50 @@
1-
import twMerge from "@lib/utils/twMerge";
2-
import {HtmlHTMLAttributes, MouseEventHandler} from "react";
3-
import {clsx} from "clsx";
4-
import {LinkProps} from "next/dist/client/link";
1+
import twMerge from "@/utilities/utils/twMerge";
2+
import { HtmlHTMLAttributes, MouseEventHandler } from "react";
3+
import { clsx } from "clsx";
4+
import { LinkProps } from "next/dist/client/link";
55
import Link from "next/link";
6-
import {getLinkHref} from "@components/elements/link";
6+
import { getLinkHref } from "@/components/Cta/Link";
77

8-
export type ButtonProps = HtmlHTMLAttributes<HTMLAnchorElement | HTMLButtonElement> & {
8+
export type ButtonProps = HtmlHTMLAttributes<
9+
HTMLAnchorElement | HTMLButtonElement
10+
> & {
911
/**
1012
* Link URL.
1113
*/
12-
href?: string | null
14+
href?: string | null;
1315
/**
1416
* If the element should be a <button>, default is <a>.
1517
*/
16-
buttonElem?: boolean
18+
buttonElem?: boolean;
1719
/**
1820
* Display a larger button.
1921
*/
20-
big?: boolean
22+
big?: boolean;
2123
/**
2224
* Display a secondary styled button.
2325
*/
24-
secondary?: boolean
26+
secondary?: boolean;
2527
/**
2628
* Center the button in the container.
2729
*/
28-
centered?: boolean
30+
centered?: boolean;
2931
/**
3032
* Click handler, mostly when using a button element.
3133
*/
32-
onClick?: MouseEventHandler
34+
onClick?: MouseEventHandler;
3335
/**
3436
* Next.js prefetch functionality.
3537
*/
36-
prefetch?: LinkProps["prefetch"]
38+
prefetch?: LinkProps["prefetch"];
3739
/**
3840
* Type of button: submit, reset, or button.
3941
*/
40-
type?: HTMLButtonElement["type"]
42+
type?: HTMLButtonElement["type"];
4143
/**
4244
* Disabled button element.
4345
*/
44-
disabled?: boolean
45-
}
46+
disabled?: boolean;
47+
};
4648

4749
export const Button = ({
4850
href,
@@ -69,14 +71,22 @@ export const Button = ({
6971

7072
if (!href || buttonElem) {
7173
return (
72-
<button className={twMerge(standardClasses, className)} type="button" {...props}>
74+
<button
75+
className={twMerge(standardClasses, className)}
76+
type="button"
77+
{...props}
78+
>
7379
{children}
7480
</button>
7581
);
7682
}
7783

7884
return (
79-
<Link href={getLinkHref(href)} className={twMerge(standardClasses, className)} {...props}>
85+
<Link
86+
href={getLinkHref(href)}
87+
className={twMerge(standardClasses, className)}
88+
{...props}
89+
>
8090
{children}
8191
</Link>
8292
);

0 commit comments

Comments
 (0)