ilia/portfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: storybook font rendering and shared fonts module #1

Merged
ilia merged 74 commits from feat/portfolio-setup into main 2026-05-18 18:45:22 +00:00
Conversation 0 Commits 74 Files Changed 132
+1201 -1153
73 changed files with 1201 additions and 1153 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 1d333fd945 - Show all commits
.storybook/preview.ts
-21
View File
@@ -1,21 +0,0 @@
import type { Preview } from '@storybook/nextjs-vite'
import '../app/globals.css'
const preview: Preview = {
parameters: {
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/i,
},
},
a11y: {
// 'todo' - show a11y violations in the test UI only
// 'error' - fail CI on a11y violations
// 'off' - skip a11y checks entirely
test: 'todo',
},
},
}
export default preview
app/layout.tsx
+6 -8
View File
@@ -1,11 +1,11 @@
import type { Metadata } from 'next'
import { fraunces, publicSans } from '$shared/lib'
import './globals.css'
import type { Metadata } from 'next';
import { fraunces, publicSans } from '$shared/lib';
import './globals.css';
export const metadata: Metadata = {
title: 'Portfolio',
description: 'Portfolio',
}
};
/**
* Root layout — injects font CSS variables used by theme.css
@@ -13,9 +13,7 @@ export const metadata: Metadata = {
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<body className={`${fraunces.variable} ${publicSans.variable}`}>
{children}
</body>
<body className={`${fraunces.variable} ${publicSans.variable}`}>{children}</body>
</html>
)
);
}
app/page.tsx
+7 -20
View File
@@ -1,36 +1,29 @@
import Image from "next/image";
import Image from 'next/image';
export default function Home() {
return (
<div className="flex flex-col flex-1 items-center justify-center bg-zinc-50 font-sans dark:bg-black">
<main className="flex flex-1 w-full max-w-3xl flex-col items-center justify-between py-32 px-16 bg-white dark:bg-black sm:items-start">
<Image
className="dark:invert"
src="/next.svg"
alt="Next.js logo"
width={100}
height={20}
priority
/>
<Image className="dark:invert" src="/next.svg" alt="Next.js logo" width={100} height={20} priority />
<div className="flex flex-col items-center gap-6 text-center sm:items-start sm:text-left">
<h1 className="max-w-xs text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50">
To get started, edit the page.tsx file.
</h1>
<p className="max-w-md text-lg leading-8 text-zinc-600 dark:text-zinc-400">
Looking for a starting point or more instructions? Head over to{" "}
Looking for a starting point or more instructions? Head over to{' '}
<a
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
className="font-medium text-zinc-950 dark:text-zinc-50"
>
Templates
</a>{" "}
or the{" "}
</a>{' '}
or the{' '}
<a
href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
className="font-medium text-zinc-950 dark:text-zinc-50"
>
Learning
</a>{" "}
</a>{' '}
center.
</p>
</div>
@@ -41,13 +34,7 @@ export default function Home() {
target="_blank"
rel="noopener noreferrer"
>
<Image
className="dark:invert"
src="/vercel.svg"
alt="Vercel logomark"
width={16}
height={16}
/>
<Image className="dark:invert" src="/vercel.svg" alt="Vercel logomark" width={16} height={16} />
Deploy Now
</a>
<a
src/entities/Section/index.ts
+2
View File
@@ -0,0 +1,2 @@
export * from './model/types';
export * from './ui';
src/entities/Section/model/types.ts
+23
View File
@@ -0,0 +1,23 @@
import type { BaseRecord } from '$shared/api';
/**
* PocketBase collection for site sections and routing.
*/
export type SectionRecord = BaseRecord & {
/**
* URL-friendly identifier used for routing
*/
slug: string;
/**
* Display name of the section
*/
title: string;
/**
* Visual numbering prefix (e.g., "01")
*/
number: string;
/**
* Sorting weight for section order
*/
order: number;
};
src/shared/ui/SectionAccordion/ui/SectionAccordion.stories.tsx → src/entities/Section/ui/SectionAccordion/SectionAccordion.stories.tsx
View File
src/shared/ui/SectionAccordion/ui/SectionAccordion.test.tsx → src/entities/Section/ui/SectionAccordion/SectionAccordion.test.tsx
View File
src/shared/ui/SectionAccordion/ui/SectionAccordion.tsx → src/entities/Section/ui/SectionAccordion/SectionAccordion.tsx
View File
src/entities/Section/ui/SectionAccordion/index.ts
+1
View File
@@ -0,0 +1 @@
export * from './SectionAccordion'
src/entities/Section/ui/index.ts
+1
View File
@@ -0,0 +1 @@
export * from './SectionAccordion'
src/entities/experience/index.ts
+1 -1
View File
@@ -1 +1 @@
export { ExperienceCard } from './ui/ExperienceCard'
export { ExperienceCard } from './ui/ExperienceCard';
src/entities/experience/ui/ExperienceCard.stories.tsx
+11 -13
View File
@@ -1,5 +1,5 @@
import type { Meta, StoryObj } from '@storybook/nextjs-vite'
import { ExperienceCard } from './ExperienceCard'
import type { Meta, StoryObj } from '@storybook/nextjs-vite';
import { ExperienceCard } from './ExperienceCard';
const meta: Meta<typeof ExperienceCard> = {
title: 'Entities/ExperienceCard',
@@ -11,30 +11,28 @@ const meta: Meta<typeof ExperienceCard> = {
</div>
),
],
}
};
export default meta
export default meta;
type Story = StoryObj<typeof ExperienceCard>
type Story = StoryObj<typeof ExperienceCard>;
const baseArgs = {
title: 'Senior Frontend Engineer',
company: 'Acme Corp',
period: '2021 – 2024',
description: 'Led frontend development for the core product, established design system practices, and mentored junior engineers across two distributed teams.',
}
description:
'Led frontend development for the core product, established design system practices, and mentored junior engineers across two distributed teams.',
};
export const Default: Story = {
args: baseArgs,
}
};
export const SlateBackground: Story = {
render: () => (
<div className="bg-slate-indigo p-8 max-w-2xl">
<ExperienceCard
{...baseArgs}
className="border-ochre-clay"
/>
<ExperienceCard {...baseArgs} className="border-ochre-clay" />
</div>
),
}
};
src/entities/experience/ui/ExperienceCard.test.tsx
+42 -42
View File
@@ -1,72 +1,72 @@
import { describe, it, expect } from 'vitest'
import { render, screen } from '@testing-library/react'
import { ExperienceCard } from './ExperienceCard'
import { describe, it, expect } from 'vitest';
import { render, screen } from '@testing-library/react';
import { ExperienceCard } from './ExperienceCard';
const DEFAULT_PROPS = {
title: 'Senior Developer',
company: 'Acme Corp',
period: '2021 – 2024',
description: 'Built scalable frontend systems.',
}
};
describe('ExperienceCard', () => {
describe('rendering', () => {
it('renders the job title', () => {
render(<ExperienceCard {...DEFAULT_PROPS} />)
expect(screen.getByText('Senior Developer')).toBeInTheDocument()
})
render(<ExperienceCard {...DEFAULT_PROPS} />);
expect(screen.getByText('Senior Developer')).toBeInTheDocument();
});
it('renders the company name', () => {
render(<ExperienceCard {...DEFAULT_PROPS} />)
expect(screen.getByText('Acme Corp')).toBeInTheDocument()
})
render(<ExperienceCard {...DEFAULT_PROPS} />);
expect(screen.getByText('Acme Corp')).toBeInTheDocument();
});
it('renders the period badge', () => {
render(<ExperienceCard {...DEFAULT_PROPS} />)
expect(screen.getByText('2021 – 2024')).toBeInTheDocument()
})
render(<ExperienceCard {...DEFAULT_PROPS} />);
expect(screen.getByText('2021 – 2024')).toBeInTheDocument();
});
it('renders the description', () => {
render(<ExperienceCard {...DEFAULT_PROPS} />)
expect(screen.getByText('Built scalable frontend systems.')).toBeInTheDocument()
})
})
render(<ExperienceCard {...DEFAULT_PROPS} />);
expect(screen.getByText('Built scalable frontend systems.')).toBeInTheDocument();
});
});
describe('structure', () => {
it('title is rendered as an h4', () => {
render(<ExperienceCard {...DEFAULT_PROPS} />)
expect(screen.getByRole('heading', { level: 4 })).toHaveTextContent('Senior Developer')
})
render(<ExperienceCard {...DEFAULT_PROPS} />);
expect(screen.getByRole('heading', { level: 4 })).toHaveTextContent('Senior Developer');
});
it('period badge has brutal-border, bg-carbon-black, text-ochre-clay, text-sm', () => {
render(<ExperienceCard {...DEFAULT_PROPS} />)
const badge = screen.getByText('2021 – 2024')
expect(badge).toHaveClass('brutal-border', 'bg-carbon-black', 'text-ochre-clay', 'text-sm')
})
render(<ExperienceCard {...DEFAULT_PROPS} />);
const badge = screen.getByText('2021 – 2024');
expect(badge).toHaveClass('brutal-border', 'bg-carbon-black', 'text-ochre-clay', 'text-sm');
});
it('company paragraph has opacity-80', () => {
render(<ExperienceCard {...DEFAULT_PROPS} />)
const company = screen.getByText('Acme Corp')
expect(company.tagName).toBe('P')
expect(company).toHaveClass('opacity-80')
})
render(<ExperienceCard {...DEFAULT_PROPS} />);
const company = screen.getByText('Acme Corp');
expect(company.tagName).toBe('P');
expect(company).toHaveClass('opacity-80');
});
it('description paragraph has text-base and max-w-[700px]', () => {
render(<ExperienceCard {...DEFAULT_PROPS} />)
const desc = screen.getByText('Built scalable frontend systems.')
expect(desc).toHaveClass('text-base', 'max-w-[700px]')
})
render(<ExperienceCard {...DEFAULT_PROPS} />);
const desc = screen.getByText('Built scalable frontend systems.');
expect(desc).toHaveClass('text-base', 'max-w-[700px]');
});
it('card has brutal-border class (from Card component)', () => {
const { container } = render(<ExperienceCard {...DEFAULT_PROPS} />)
expect(container.firstChild).toHaveClass('brutal-border')
})
})
const { container } = render(<ExperienceCard {...DEFAULT_PROPS} />);
expect(container.firstChild).toHaveClass('brutal-border');
});
});
describe('className passthrough', () => {
it('forwards className to the card', () => {
const { container } = render(<ExperienceCard {...DEFAULT_PROPS} className="custom-class" />)
expect(container.firstChild).toHaveClass('custom-class')
})
})
})
const { container } = render(<ExperienceCard {...DEFAULT_PROPS} className="custom-class" />);
expect(container.firstChild).toHaveClass('custom-class');
});
});
});
src/entities/experience/ui/ExperienceCard.tsx
+9 -11
View File
@@ -1,27 +1,27 @@
import { Card } from '$shared/ui'
import { Card } from '$shared/ui';
type Props = {
/**
* Job title
*/
title: string
title: string;
/**
* Company name
*/
company: string
company: string;
/**
* Employment period (e.g. "2021 – 2024")
*/
period: string
period: string;
/**
* Description of responsibilities and achievements
*/
description: string
description: string;
/**
* Additional CSS classes forwarded to the card
*/
className?: string
}
className?: string;
};
/**
* Work experience card with title, company, period, and description.
@@ -34,11 +34,9 @@ export function ExperienceCard({ title, company, period, description, className
<h4>{title}</h4>
<p className="text-base opacity-80">{company}</p>
</div>
<span className="brutal-border px-4 py-2 bg-carbon-black text-ochre-clay text-sm self-start">
{period}
</span>
<span className="brutal-border px-4 py-2 bg-carbon-black text-ochre-clay text-sm self-start">{period}</span>
</div>
<p className="text-base max-w-[700px]">{description}</p>
</Card>
)
);
}
src/entities/index.ts
+2 -2
View File
@@ -1,2 +1,2 @@
export * from './project'
export * from './experience'
export * from './project';
export * from './experience';
src/entities/project/index.ts
+3 -3
View File
@@ -1,3 +1,3 @@
export { ProjectMetadata } from './ui/ProjectMetadata'
export { ProjectCard } from './ui/ProjectCard'
export { DetailedProjectCard } from './ui/DetailedProjectCard'
export { ProjectMetadata } from './ui/ProjectMetadata';
export { ProjectCard } from './ui/ProjectCard';
export { DetailedProjectCard } from './ui/DetailedProjectCard';
src/entities/project/ui/DetailedProjectCard.stories.tsx
+10 -9
View File
@@ -1,5 +1,5 @@
import type { Meta, StoryObj } from '@storybook/nextjs-vite'
import { DetailedProjectCard } from './DetailedProjectCard'
import type { Meta, StoryObj } from '@storybook/nextjs-vite';
import { DetailedProjectCard } from './DetailedProjectCard';
const meta: Meta<typeof DetailedProjectCard> = {
title: 'Entities/DetailedProjectCard',
@@ -11,32 +11,33 @@ const meta: Meta<typeof DetailedProjectCard> = {
</div>
),
],
}
};
export default meta
export default meta;
type Story = StoryObj<typeof DetailedProjectCard>
type Story = StoryObj<typeof DetailedProjectCard>;
const baseArgs = {
title: 'Design System',
year: '2024',
role: 'Lead Frontend Engineer',
stack: ['React', 'TypeScript', 'Tailwind CSS', 'Storybook'],
description: 'A comprehensive design system built for a large-scale SaaS product, covering components, tokens, and documentation.',
description:
'A comprehensive design system built for a large-scale SaaS product, covering components, tokens, and documentation.',
details: [
'Established token system covering color, spacing, and typography.',
'Built 40+ accessible components with full test coverage.',
'Integrated Storybook for visual regression testing and documentation.',
],
}
};
export const Default: Story = {
args: baseArgs,
}
};
export const WithImage: Story = {
args: {
...baseArgs,
imageUrl: 'https://placehold.co/800x450/3B4A59/D9B48F?text=Project',
},
}
};
src/entities/project/ui/DetailedProjectCard.test.tsx
+55 -55
View File
@@ -1,6 +1,6 @@
import { describe, it, expect } from 'vitest'
import { render, screen } from '@testing-library/react'
import { DetailedProjectCard } from './DetailedProjectCard'
import { describe, it, expect } from 'vitest';
import { render, screen } from '@testing-library/react';
import { DetailedProjectCard } from './DetailedProjectCard';
const DEFAULT_PROPS = {
title: 'Big Project',
@@ -9,83 +9,83 @@ const DEFAULT_PROPS = {
stack: ['Vue', 'Go'],
description: 'A detailed project description',
details: ['First detail point', 'Second detail point'],
}
};
describe('DetailedProjectCard', () => {
describe('rendering', () => {
it('renders the project title', () => {
render(<DetailedProjectCard {...DEFAULT_PROPS} />)
expect(screen.getByText('Big Project')).toBeInTheDocument()
})
render(<DetailedProjectCard {...DEFAULT_PROPS} />);
expect(screen.getByText('Big Project')).toBeInTheDocument();
});
it('renders the description', () => {
render(<DetailedProjectCard {...DEFAULT_PROPS} />)
expect(screen.getByText('A detailed project description')).toBeInTheDocument()
})
render(<DetailedProjectCard {...DEFAULT_PROPS} />);
expect(screen.getByText('A detailed project description')).toBeInTheDocument();
});
it('renders each detail item', () => {
render(<DetailedProjectCard {...DEFAULT_PROPS} />)
expect(screen.getByText('First detail point')).toBeInTheDocument()
expect(screen.getByText('Second detail point')).toBeInTheDocument()
})
render(<DetailedProjectCard {...DEFAULT_PROPS} />);
expect(screen.getByText('First detail point')).toBeInTheDocument();
expect(screen.getByText('Second detail point')).toBeInTheDocument();
});
it('renders ProjectMetadata with year, role, and stack', () => {
render(<DetailedProjectCard {...DEFAULT_PROPS} />)
expect(screen.getByText('2023')).toBeInTheDocument()
expect(screen.getByText('Lead Dev')).toBeInTheDocument()
expect(screen.getByText('Vue')).toBeInTheDocument()
expect(screen.getByText('Go')).toBeInTheDocument()
})
})
render(<DetailedProjectCard {...DEFAULT_PROPS} />);
expect(screen.getByText('2023')).toBeInTheDocument();
expect(screen.getByText('Lead Dev')).toBeInTheDocument();
expect(screen.getByText('Vue')).toBeInTheDocument();
expect(screen.getByText('Go')).toBeInTheDocument();
});
});
describe('structure', () => {
it('outer grid has grid-cols-1 and lg:grid-cols-12', () => {
const { container } = render(<DetailedProjectCard {...DEFAULT_PROPS} />)
expect(container.firstChild).toHaveClass('grid', 'grid-cols-1', 'lg:grid-cols-12')
})
const { container } = render(<DetailedProjectCard {...DEFAULT_PROPS} />);
expect(container.firstChild).toHaveClass('grid', 'grid-cols-1', 'lg:grid-cols-12');
});
it('title is rendered as an h3', () => {
render(<DetailedProjectCard {...DEFAULT_PROPS} />)
expect(screen.getByRole('heading', { level: 3 })).toHaveTextContent('Big Project')
})
render(<DetailedProjectCard {...DEFAULT_PROPS} />);
expect(screen.getByRole('heading', { level: 3 })).toHaveTextContent('Big Project');
});
it('detail items are rendered as <p> tags with text-base', () => {
render(<DetailedProjectCard {...DEFAULT_PROPS} />)
const detail = screen.getByText('First detail point')
expect(detail.tagName).toBe('P')
expect(detail).toHaveClass('text-base')
})
render(<DetailedProjectCard {...DEFAULT_PROPS} />);
const detail = screen.getByText('First detail point');
expect(detail.tagName).toBe('P');
expect(detail).toHaveClass('text-base');
});
it('details list has brutal-border-top and pt-6', () => {
render(<DetailedProjectCard {...DEFAULT_PROPS} />)
const detail = screen.getByText('First detail point')
const detailList = detail.parentElement
expect(detailList).toHaveClass('brutal-border-top', 'pt-6')
})
render(<DetailedProjectCard {...DEFAULT_PROPS} />);
const detail = screen.getByText('First detail point');
const detailList = detail.parentElement;
expect(detailList).toHaveClass('brutal-border-top', 'pt-6');
});
it('description has text-lg and mb-6', () => {
render(<DetailedProjectCard {...DEFAULT_PROPS} />)
const desc = screen.getByText('A detailed project description')
expect(desc).toHaveClass('text-lg', 'mb-6')
})
})
render(<DetailedProjectCard {...DEFAULT_PROPS} />);
const desc = screen.getByText('A detailed project description');
expect(desc).toHaveClass('text-lg', 'mb-6');
});
});
describe('conditional image rendering', () => {
it('does not render image when imageUrl is absent', () => {
const { container } = render(<DetailedProjectCard {...DEFAULT_PROPS} />)
expect(container.querySelector('img')).toBeNull()
})
const { container } = render(<DetailedProjectCard {...DEFAULT_PROPS} />);
expect(container.querySelector('img')).toBeNull();
});
it('renders image when imageUrl is provided', () => {
render(<DetailedProjectCard {...DEFAULT_PROPS} imageUrl="/detail.jpg" />)
const img = screen.getByRole('img')
expect(img).toHaveAttribute('src', '/detail.jpg')
})
render(<DetailedProjectCard {...DEFAULT_PROPS} imageUrl="/detail.jpg" />);
const img = screen.getByRole('img');
expect(img).toHaveAttribute('src', '/detail.jpg');
});
it('image wrapper has aspect-video and brutal-border when imageUrl is provided', () => {
const { container } = render(<DetailedProjectCard {...DEFAULT_PROPS} imageUrl="/detail.jpg" />)
const imgWrapper = container.querySelector('img')!.parentElement
expect(imgWrapper).toHaveClass('aspect-video', 'brutal-border')
})
})
})
const { container } = render(<DetailedProjectCard {...DEFAULT_PROPS} imageUrl="/detail.jpg" />);
const imgWrapper = container.querySelector('img')!.parentElement;
expect(imgWrapper).toHaveClass('aspect-video', 'brutal-border');
});
});
});
src/entities/project/ui/DetailedProjectCard.tsx
+16 -22
View File
@@ -1,54 +1,46 @@
import { Card } from '$shared/ui'
import { ProjectMetadata } from './ProjectMetadata'
import { Card } from '$shared/ui';
import { ProjectMetadata } from './ProjectMetadata';
type Props = {
/**
* Project name
*/
title: string
title: string;
/**
* Year the project was completed
*/
year: string
year: string;
/**
* Developer role on the project
*/
role: string
role: string;
/**
* Technology stack list
*/
stack: string[]
stack: string[];
/**
* Project description paragraph
*/
description: string
description: string;
/**
* Bullet-style detail points listed below the description
*/
details: string[]
details: string[];
/**
* Optional hero image URL
*/
imageUrl?: string
imageUrl?: string;
/**
* Reverse layout (reserved for future use)
* @default false
*/
reverse?: boolean
}
reverse?: boolean;
};
/**
* Full-width detailed project card with metadata sidebar.
*/
export function DetailedProjectCard({
title,
year,
role,
stack,
description,
details,
imageUrl,
}: Props) {
export function DetailedProjectCard({ title, year, role, stack, description, details, imageUrl }: Props) {
return (
<div className="grid grid-cols-1 lg:grid-cols-12 gap-8 mb-16">
<div className="lg:col-span-2 order-2 lg:order-1">
@@ -68,11 +60,13 @@ export function DetailedProjectCard({
<div className="max-w-[700px] space-y-4 brutal-border-top pt-6">
{details.map((detail, index) => (
<p key={index} className="text-base">{detail}</p>
<p key={index} className="text-base">
{detail}
</p>
))}
</div>
</Card>
</div>
</div>
)
);
}
src/entities/project/ui/ProjectCard.stories.tsx
+7 -7
View File
@@ -1,5 +1,5 @@
import type { Meta, StoryObj } from '@storybook/nextjs-vite'
import { ProjectCard } from './ProjectCard'
import type { Meta, StoryObj } from '@storybook/nextjs-vite';
import { ProjectCard } from './ProjectCard';
const meta: Meta<typeof ProjectCard> = {
title: 'Entities/ProjectCard',
@@ -11,11 +11,11 @@ const meta: Meta<typeof ProjectCard> = {
</div>
),
],
}
};
export default meta
export default meta;
type Story = StoryObj<typeof ProjectCard>
type Story = StoryObj<typeof ProjectCard>;
export const Default: Story = {
args: {
@@ -24,7 +24,7 @@ export const Default: Story = {
description: 'A brutalist portfolio site built with Next.js and Tailwind CSS.',
tags: ['React', 'TypeScript', 'Next.js'],
},
}
};
export const WithImage: Story = {
args: {
@@ -34,4 +34,4 @@ export const WithImage: Story = {
tags: ['React', 'TypeScript', 'Next.js'],
imageUrl: 'https://placehold.co/800x450/3B4A59/D9B48F?text=Project',
},
}
};
src/entities/project/ui/ProjectCard.test.tsx
+54 -47
View File
@@ -1,79 +1,86 @@
import { describe, it, expect } from 'vitest'
import { render, screen } from '@testing-library/react'
import { ProjectCard } from './ProjectCard'
import { describe, it, expect } from 'vitest';
import { render, screen } from '@testing-library/react';
import { ProjectCard } from './ProjectCard';
const DEFAULT_PROPS = {
title: 'My Project',
year: '2024',
description: 'A cool project description',
tags: ['React', 'Node'],
}
};
describe('ProjectCard', () => {
describe('rendering', () => {
it('renders the project title', () => {
render(<ProjectCard {...DEFAULT_PROPS} />)
expect(screen.getByText('My Project')).toBeInTheDocument()
})
render(<ProjectCard {...DEFAULT_PROPS} />);
expect(screen.getByText('My Project')).toBeInTheDocument();
});
it('renders the year badge', () => {
render(<ProjectCard {...DEFAULT_PROPS} />)
expect(screen.getByText('2024')).toBeInTheDocument()
})
render(<ProjectCard {...DEFAULT_PROPS} />);
expect(screen.getByText('2024')).toBeInTheDocument();
});
it('renders the description', () => {
render(<ProjectCard {...DEFAULT_PROPS} />)
expect(screen.getByText('A cool project description')).toBeInTheDocument()
})
render(<ProjectCard {...DEFAULT_PROPS} />);
expect(screen.getByText('A cool project description')).toBeInTheDocument();
});
it('renders each tag', () => {
render(<ProjectCard {...DEFAULT_PROPS} />)
expect(screen.getByText('React')).toBeInTheDocument()
expect(screen.getByText('Node')).toBeInTheDocument()
})
render(<ProjectCard {...DEFAULT_PROPS} />);
expect(screen.getByText('React')).toBeInTheDocument();
expect(screen.getByText('Node')).toBeInTheDocument();
});
it('renders the View Project button', () => {
render(<ProjectCard {...DEFAULT_PROPS} />)
expect(screen.getByRole('button', { name: /view project/i })).toBeInTheDocument()
})
})
render(<ProjectCard {...DEFAULT_PROPS} />);
expect(screen.getByRole('button', { name: /view project/i })).toBeInTheDocument();
});
});
describe('structure', () => {
it('card has hover transition classes', () => {
const { container } = render(<ProjectCard {...DEFAULT_PROPS} />)
const card = container.firstChild as HTMLElement
expect(card).toHaveClass('group', 'transition-all', 'duration-300')
})
const { container } = render(<ProjectCard {...DEFAULT_PROPS} />);
const card = container.firstChild as HTMLElement;
expect(card).toHaveClass('group', 'transition-all', 'duration-300');
});
it('year badge has correct classes', () => {
render(<ProjectCard {...DEFAULT_PROPS} />)
const yearBadge = screen.getByText('2024')
expect(yearBadge).toHaveClass('brutal-border', 'bg-carbon-black', 'text-ochre-clay', 'text-sm')
})
render(<ProjectCard {...DEFAULT_PROPS} />);
const yearBadge = screen.getByText('2024');
expect(yearBadge).toHaveClass('brutal-border', 'bg-carbon-black', 'text-ochre-clay', 'text-sm');
});
it('tags have correct classes', () => {
render(<ProjectCard {...DEFAULT_PROPS} />)
const tag = screen.getByText('React')
expect(tag).toHaveClass('brutal-border', 'bg-white', 'text-carbon-black', 'text-sm', 'uppercase', 'tracking-wide')
})
})
render(<ProjectCard {...DEFAULT_PROPS} />);
const tag = screen.getByText('React');
expect(tag).toHaveClass(
'brutal-border',
'bg-white',
'text-carbon-black',
'text-sm',
'uppercase',
'tracking-wide',
);
});
});
describe('conditional image rendering', () => {
it('does not render image when imageUrl is absent', () => {
const { container } = render(<ProjectCard {...DEFAULT_PROPS} />)
expect(container.querySelector('img')).toBeNull()
})
const { container } = render(<ProjectCard {...DEFAULT_PROPS} />);
expect(container.querySelector('img')).toBeNull();
});
it('renders image when imageUrl is provided', () => {
render(<ProjectCard {...DEFAULT_PROPS} imageUrl="/project.jpg" />)
const img = screen.getByRole('img')
expect(img).toHaveAttribute('src', '/project.jpg')
})
render(<ProjectCard {...DEFAULT_PROPS} imageUrl="/project.jpg" />);
const img = screen.getByRole('img');
expect(img).toHaveAttribute('src', '/project.jpg');
});
it('image wrapper has aspect-video and overflow-hidden when imageUrl is provided', () => {
const { container } = render(<ProjectCard {...DEFAULT_PROPS} imageUrl="/project.jpg" />)
const imgWrapper = container.querySelector('img')!.parentElement
expect(imgWrapper).toHaveClass('aspect-video', 'overflow-hidden', 'brutal-border')
})
})
})
const { container } = render(<ProjectCard {...DEFAULT_PROPS} imageUrl="/project.jpg" />);
const imgWrapper = container.querySelector('img')!.parentElement;
expect(imgWrapper).toHaveClass('aspect-video', 'overflow-hidden', 'brutal-border');
});
});
});
src/entities/project/ui/ProjectCard.tsx
+12 -10
View File
@@ -1,28 +1,28 @@
import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter, Button } from '$shared/ui'
import { cn } from '$shared/lib'
import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter, Button } from '$shared/ui';
import { cn } from '$shared/lib';
type Props = {
/**
* Project name
*/
title: string
title: string;
/**
* Year the project was completed
*/
year: string
year: string;
/**
* Short project description
*/
description: string
description: string;
/**
* Technology or category tags
*/
tags: string[]
tags: string[];
/**
* Optional preview image URL
*/
imageUrl?: string
}
imageUrl?: string;
};
/**
* Compact project card for grid/list display.
@@ -61,8 +61,10 @@ export function ProjectCard({ title, year, description, tags, imageUrl }: Props)
</CardContent>
<CardFooter>
<Button variant="primary" className="w-full">View Project</Button>
<Button variant="primary" className="w-full">
View Project
</Button>
</CardFooter>
</Card>
)
);
}
src/entities/project/ui/ProjectMetadata.stories.tsx
+6 -6
View File
@@ -1,5 +1,5 @@
import type { Meta, StoryObj } from '@storybook/nextjs-vite'
import { ProjectMetadata } from './ProjectMetadata'
import type { Meta, StoryObj } from '@storybook/nextjs-vite';
import { ProjectMetadata } from './ProjectMetadata';
const meta: Meta<typeof ProjectMetadata> = {
title: 'Entities/ProjectMetadata',
@@ -11,11 +11,11 @@ const meta: Meta<typeof ProjectMetadata> = {
</div>
),
],
}
};
export default meta
export default meta;
type Story = StoryObj<typeof ProjectMetadata>
type Story = StoryObj<typeof ProjectMetadata>;
export const Default: Story = {
args: {
@@ -23,4 +23,4 @@ export const Default: Story = {
role: 'Lead Frontend Engineer',
stack: ['React', 'TypeScript', 'Next.js', 'Tailwind'],
},
}
};
src/entities/project/ui/ProjectMetadata.test.tsx
+59 -59
View File
@@ -1,96 +1,96 @@
import { describe, it, expect } from 'vitest'
import { render, screen } from '@testing-library/react'
import { ProjectMetadata } from './ProjectMetadata'
import { describe, it, expect } from 'vitest';
import { render, screen } from '@testing-library/react';
import { ProjectMetadata } from './ProjectMetadata';
const DEFAULT_PROPS = {
year: '2024',
role: 'Frontend Engineer',
stack: ['React', 'TypeScript', 'Tailwind'],
}
};
describe('ProjectMetadata', () => {
describe('rendering', () => {
it('renders the year value', () => {
render(<ProjectMetadata {...DEFAULT_PROPS} />)
expect(screen.getByText('2024')).toBeInTheDocument()
})
render(<ProjectMetadata {...DEFAULT_PROPS} />);
expect(screen.getByText('2024')).toBeInTheDocument();
});
it('renders the YEAR label', () => {
render(<ProjectMetadata {...DEFAULT_PROPS} />)
expect(screen.getByText('YEAR')).toBeInTheDocument()
})
render(<ProjectMetadata {...DEFAULT_PROPS} />);
expect(screen.getByText('YEAR')).toBeInTheDocument();
});
it('renders the role value', () => {
render(<ProjectMetadata {...DEFAULT_PROPS} />)
expect(screen.getByText('Frontend Engineer')).toBeInTheDocument()
})
render(<ProjectMetadata {...DEFAULT_PROPS} />);
expect(screen.getByText('Frontend Engineer')).toBeInTheDocument();
});
it('renders the ROLE label', () => {
render(<ProjectMetadata {...DEFAULT_PROPS} />)
expect(screen.getByText('ROLE')).toBeInTheDocument()
})
render(<ProjectMetadata {...DEFAULT_PROPS} />);
expect(screen.getByText('ROLE')).toBeInTheDocument();
});
it('renders the STACK label', () => {
render(<ProjectMetadata {...DEFAULT_PROPS} />)
expect(screen.getByText('STACK')).toBeInTheDocument()
})
render(<ProjectMetadata {...DEFAULT_PROPS} />);
expect(screen.getByText('STACK')).toBeInTheDocument();
});
it('renders each stack technology', () => {
render(<ProjectMetadata {...DEFAULT_PROPS} />)
expect(screen.getByText('React')).toBeInTheDocument()
expect(screen.getByText('TypeScript')).toBeInTheDocument()
expect(screen.getByText('Tailwind')).toBeInTheDocument()
})
})
render(<ProjectMetadata {...DEFAULT_PROPS} />);
expect(screen.getByText('React')).toBeInTheDocument();
expect(screen.getByText('TypeScript')).toBeInTheDocument();
expect(screen.getByText('Tailwind')).toBeInTheDocument();
});
});
describe('structure', () => {
it('outer div has space-y-6', () => {
const { container } = render(<ProjectMetadata {...DEFAULT_PROPS} />)
expect(container.firstChild).toHaveClass('space-y-6')
})
const { container } = render(<ProjectMetadata {...DEFAULT_PROPS} />);
expect(container.firstChild).toHaveClass('space-y-6');
});
it('year section has no brutal-border-top (first section)', () => {
const { container } = render(<ProjectMetadata {...DEFAULT_PROPS} />)
const sections = container.firstChild!.childNodes
expect(sections[0]).not.toHaveClass('brutal-border-top')
})
const { container } = render(<ProjectMetadata {...DEFAULT_PROPS} />);
const sections = container.firstChild!.childNodes;
expect(sections[0]).not.toHaveClass('brutal-border-top');
});
it('role section has brutal-border-top and pt-6', () => {
const { container } = render(<ProjectMetadata {...DEFAULT_PROPS} />)
const sections = container.firstChild!.childNodes
expect(sections[1]).toHaveClass('brutal-border-top', 'pt-6')
})
const { container } = render(<ProjectMetadata {...DEFAULT_PROPS} />);
const sections = container.firstChild!.childNodes;
expect(sections[1]).toHaveClass('brutal-border-top', 'pt-6');
});
it('stack section has brutal-border-top and pt-6', () => {
const { container } = render(<ProjectMetadata {...DEFAULT_PROPS} />)
const sections = container.firstChild!.childNodes
expect(sections[2]).toHaveClass('brutal-border-top', 'pt-6')
})
const { container } = render(<ProjectMetadata {...DEFAULT_PROPS} />);
const sections = container.firstChild!.childNodes;
expect(sections[2]).toHaveClass('brutal-border-top', 'pt-6');
});
it('label has text-xs uppercase tracking-wider opacity-60', () => {
render(<ProjectMetadata {...DEFAULT_PROPS} />)
const yearLabel = screen.getByText('YEAR')
expect(yearLabel).toHaveClass('text-xs', 'uppercase', 'tracking-wider', 'opacity-60')
})
render(<ProjectMetadata {...DEFAULT_PROPS} />);
const yearLabel = screen.getByText('YEAR');
expect(yearLabel).toHaveClass('text-xs', 'uppercase', 'tracking-wider', 'opacity-60');
});
it('year value has text-base font-bold', () => {
render(<ProjectMetadata {...DEFAULT_PROPS} />)
const yearValue = screen.getByText('2024')
expect(yearValue).toHaveClass('text-base', 'font-bold')
})
render(<ProjectMetadata {...DEFAULT_PROPS} />);
const yearValue = screen.getByText('2024');
expect(yearValue).toHaveClass('text-base', 'font-bold');
});
it('each stack tech is rendered as a <p> with text-sm', () => {
render(<ProjectMetadata {...DEFAULT_PROPS} />)
const techEl = screen.getByText('React')
expect(techEl.tagName).toBe('P')
expect(techEl).toHaveClass('text-sm')
})
})
render(<ProjectMetadata {...DEFAULT_PROPS} />);
const techEl = screen.getByText('React');
expect(techEl.tagName).toBe('P');
expect(techEl).toHaveClass('text-sm');
});
});
describe('className passthrough', () => {
it('merges custom className onto outer div', () => {
const { container } = render(<ProjectMetadata {...DEFAULT_PROPS} className="my-custom" />)
expect(container.firstChild).toHaveClass('my-custom')
})
})
})
const { container } = render(<ProjectMetadata {...DEFAULT_PROPS} className="my-custom" />);
expect(container.firstChild).toHaveClass('my-custom');
});
});
});
src/entities/project/ui/ProjectMetadata.tsx
+10 -8
View File
@@ -1,23 +1,23 @@
import { cn } from '$shared/lib'
import { cn } from '$shared/lib';
type Props = {
/**
* Project year
*/
year: string
year: string;
/**
* Developer role on the project
*/
role: string
role: string;
/**
* Technology stack list
*/
stack: string[]
stack: string[];
/**
* Additional CSS classes
*/
className?: string
}
className?: string;
};
/**
* Sidebar metadata display for a project: year, role, and stack.
@@ -36,9 +36,11 @@ export function ProjectMetadata({ year, role, stack, className }: Props) {
<div className="brutal-border-top pt-6">
<p className="text-xs uppercase tracking-wider opacity-60">STACK</p>
{stack.map((tech) => (
<p key={tech} className="text-sm">{tech}</p>
<p key={tech} className="text-sm">
{tech}
</p>
))}
</div>
</div>
)
);
}
src/shared/api/client.ts
+20 -26
View File
@@ -1,9 +1,9 @@
import type { ListResponse } from './types'
import type { ListResponse } from './types';
/**
* Native fetch wrapper for PocketBase API requests.
*/
const PB_URL = process.env.NEXT_PUBLIC_PB_URL || 'http://127.0.0.1:8090'
const PB_URL = process.env.NEXT_PUBLIC_PB_URL || 'http://127.0.0.1:8090';
/**
* Options for PocketBase collection fetching.
@@ -12,61 +12,55 @@ export type PBFetchOptions = {
/**
* Sorting criteria (e.g., "-created,order")
*/
sort?: string
sort?: string;
/**
* Filter query string
*/
filter?: string
filter?: string;
/**
* Fields to expand (e.g., "stack")
*/
expand?: string
expand?: string;
/**
* Cache revalidation time in seconds
* @default 3600
*/
revalidate?: number
}
revalidate?: number;
};
/**
* Fetch a list of records from a PocketBase collection.
*/
export async function getCollection<T>(
collection: string,
options: PBFetchOptions = {}
): Promise<ListResponse<T>> {
const { sort, filter, expand, revalidate = 3600 } = options
export async function getCollection<T>(collection: string, options: PBFetchOptions = {}): Promise<ListResponse<T>> {
const { sort, filter, expand, revalidate = 3600 } = options;
const params = new URLSearchParams()
if (sort) params.set('sort', sort)
if (filter) params.set('filter', filter)
if (expand) params.set('expand', expand)
const params = new URLSearchParams();
if (sort) params.set('sort', sort);
if (filter) params.set('filter', filter);
if (expand) params.set('expand', expand);
const url = `${PB_URL}/api/collections/${collection}/records?${params.toString()}`
const url = `${PB_URL}/api/collections/${collection}/records?${params.toString()}`;
const res = await fetch(url, {
next: { revalidate },
})
});
if (!res.ok) {
throw new Error(`Failed to fetch collection: ${collection}`)
throw new Error(`Failed to fetch collection: ${collection}`);
}
return res.json()
return res.json();
}
/**
* Fetch a single record from a PocketBase collection by ID or filter.
*/
export async function getFirstRecord<T>(
collection: string,
options: PBFetchOptions = {}
): Promise<T | null> {
export async function getFirstRecord<T>(collection: string, options: PBFetchOptions = {}): Promise<T | null> {
const data = await getCollection<T>(collection, {
...options,
// PocketBase convention for "first" or "singleton" patterns
filter: options.filter,
})
});
return data.items[0] || null
return data.items[0] || null;
}
src/shared/api/index.ts
+2 -2
View File
@@ -1,2 +1,2 @@
export * from './types'
export * from './client'
export * from './types';
export * from './client';
src/shared/api/types.ts
+37 -58
View File
@@ -5,60 +5,39 @@ export type BaseRecord = {
/**
* Unique record ID
*/
id: string
id: string;
/**
* ID of the collection this record belongs to
*/
collectionId: string
collectionId: string;
/**
* Name of the collection this record belongs to
*/
collectionName: string
collectionName: string;
/**
* Record creation timestamp (ISO 8601)
*/
created: string
created: string;
/**
* Record last update timestamp (ISO 8601)
*/
updated: string
}
updated: string;
};
/**
* PocketBase collection for site sections and routing.
*/
export type SectionRecord = BaseRecord & {
/**
* URL-friendly identifier used for routing
* PocketBase collection for simple text blocks (Intro, Bio).
*/
slug: string
/**
* Display name of the section
*/
title: string
/**
* Visual numbering prefix (e.g., "01")
*/
number: string
/**
* Sorting weight for section order
*/
order: number
}
export type PageContentRecord = BaseRecord & {
/**
* PocketBase collection for simple text blocks (Intro, Bio).
*/
export type PageContentRecord = BaseRecord & {
/**
* Slug corresponding to the parent section
*/
slug: string
slug: string;
/**
* HTML or Markdown content string
*/
content: string
}
content: string;
};
/**
* PocketBase collection for technology skills.
@@ -67,16 +46,16 @@ export type SkillRecord = BaseRecord & {
/**
* Name of the technology or tool
*/
name: string
name: string;
/**
* Grouping category (e.g., 'Frontend', 'Backend')
*/
category: 'Frontend' | 'Backend' | 'Tools' | 'Design' | string
category: 'Frontend' | 'Backend' | 'Tools' | 'Design' | string;
/**
* Sorting weight within the category
*/
order: number
}
order: number;
};
/**
* PocketBase collection for work experience history.
@@ -85,28 +64,28 @@ export type ExperienceRecord = BaseRecord & {
/**
* Name of the organization
*/
company: string
company: string;
/**
* Professional title held
*/
role: string
role: string;
/**
* Start date of the tenure
*/
start_date: string
start_date: string;
/**
* End date of the tenure, or null if currently employed
*/
end_date: string | null
end_date: string | null;
/**
* Rich text description of responsibilities and achievements
*/
description: string
description: string;
/**
* Sorting weight for chronological display
*/
order: number
}
order: number;
};
/**
* PocketBase collection for portfolio projects.
@@ -115,36 +94,36 @@ export type ProjectRecord = BaseRecord & {
/**
* Full title of the project
*/
title: string
title: string;
/**
* Completion or duration year (e.g., "2024")
*/
year: string
year: string;
/**
* Role performed on the project
*/
role: string
role: string;
/**
* Short summary of the project
*/
description: string
description: string;
/**
* List of specific feature or achievement points
*/
details: string[]
details: string[];
/**
* List of SkillRecord IDs used in the project
*/
stack: string[]
stack: string[];
/**
* Primary thumbnail or hero image filename
*/
image: string
image: string;
/**
* Sorting weight for the project list
*/
order: number
}
order: number;
};
/**
* Generic response for a list of PocketBase records.
@@ -153,21 +132,21 @@ export type ListResponse<T> = {
/**
* Current page index
*/
page: number
page: number;
/**
* Number of items per page
*/
perPage: number
perPage: number;
/**
* Total number of items across all pages
*/
totalItems: number
totalItems: number;
/**
* Total number of pages available
*/
totalPages: number
totalPages: number;
/**
* Array of records for the current page
*/
items: T[]
}
items: T[];
};
src/shared/index.ts
+3 -3
View File
@@ -1,3 +1,3 @@
export * from './ui'
export * from './lib'
export * from './api'
export * from './ui';
export * from './lib';
export * from './api';
src/shared/lib/cn.test.ts
+21 -21
View File
@@ -1,40 +1,40 @@
import { describe, it, expect } from 'vitest'
import { cn } from './cn'
import { describe, it, expect } from 'vitest';
import { cn } from './cn';
describe('cn', () => {
describe('basic merging', () => {
it('returns single class unchanged', () => {
expect(cn('foo')).toBe('foo')
})
expect(cn('foo')).toBe('foo');
});
it('joins multiple classes', () => {
expect(cn('foo', 'bar')).toBe('foo bar')
})
})
expect(cn('foo', 'bar')).toBe('foo bar');
});
});
describe('conditional classes', () => {
it('includes truthy conditional', () => {
expect(cn('foo', true && 'bar')).toBe('foo bar')
})
expect(cn('foo', true && 'bar')).toBe('foo bar');
});
it('excludes falsy conditional', () => {
expect(cn('foo', false && 'bar')).toBe('foo')
})
})
expect(cn('foo', false && 'bar')).toBe('foo');
});
});
describe('object syntax', () => {
it('includes classes with truthy object values', () => {
expect(cn({ foo: true, bar: false })).toBe('foo')
})
})
expect(cn({ foo: true, bar: false })).toBe('foo');
});
});
describe('tailwind conflict resolution', () => {
it('last padding wins', () => {
expect(cn('px-2', 'px-4')).toBe('px-4')
})
expect(cn('px-2', 'px-4')).toBe('px-4');
});
it('last text color wins', () => {
expect(cn('text-red-500', 'text-blue-500')).toBe('text-blue-500')
})
})
})
expect(cn('text-red-500', 'text-blue-500')).toBe('text-blue-500');
});
});
});
src/shared/lib/cn.ts
+3 -3
View File
@@ -1,9 +1,9 @@
import { clsx, type ClassValue } from 'clsx'
import { twMerge } from 'tailwind-merge'
import { clsx, type ClassValue } from 'clsx';
import { twMerge } from 'tailwind-merge';
/**
* Merges Tailwind classes, resolving conflicts in favor of the last value.
*/
export function cn(...inputs: ClassValue[]): string {
return twMerge(clsx(inputs))
return twMerge(clsx(inputs));
}
src/shared/lib/fonts.ts
+3 -3
View File
@@ -1,4 +1,4 @@
import { Fraunces, Public_Sans } from 'next/font/google'
import { Fraunces, Public_Sans } from 'next/font/google';
/**
* Heading font — variable axes for brutalist variation settings
@@ -7,7 +7,7 @@ export const fraunces = Fraunces({
subsets: ['latin'],
variable: '--font-fraunces',
axes: ['opsz', 'SOFT', 'WONK'],
})
});
/**
* Body font
@@ -15,4 +15,4 @@ export const fraunces = Fraunces({
export const publicSans = Public_Sans({
subsets: ['latin'],
variable: '--font-public-sans',
})
});
src/shared/lib/index.ts
+3 -3
View File
@@ -1,3 +1,3 @@
export { cn } from './cn'
export type { ClassValue } from 'clsx'
export * from './fonts'
export { cn } from './cn';
export type { ClassValue } from 'clsx';
export * from './fonts';
src/shared/styles/theme.css
+66 -25
View File
@@ -2,7 +2,7 @@
/* === TYPOGRAPHY SCALE (Augmented Fourth 1.414) === */
--font-size: 16px;
--text-xs: 0.707rem;
--text-sm: 0.840rem;
--text-sm: 0.84rem;
--text-base: 1rem;
--text-lg: 1.414rem;
--text-xl: 2rem;
@@ -29,9 +29,9 @@
--fraunces-soft: 0;
/* === COLOR PALETTE === */
--ochre-clay: #D9B48F;
--slate-indigo: #3B4A59;
--burnt-oxide: #A64B35;
--ochre-clay: #d9b48f;
--slate-indigo: #3b4a59;
--burnt-oxide: #a64b35;
--carbon-black: #121212;
/* === SEMANTIC COLORS === */
@@ -126,31 +126,48 @@
/* Paper grain texture */
body::before {
content: '';
content: "";
position: fixed;
inset: 0;
background-image:
repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.02) 2px, rgba(0,0,0,0.02) 4px),
repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(0,0,0,0.02) 2px, rgba(0,0,0,0.02) 4px);
repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0, 0, 0, 0.02) 2px, rgba(0, 0, 0, 0.02) 4px),
repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(0, 0, 0, 0.02) 2px, rgba(0, 0, 0, 0.02) 4px);
opacity: 0.4;
display: block;
pointer-events: none;
z-index: 1;
}
h1, h2, h3, h4, h5, h6 {
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--font-heading);
font-weight: var(--font-weight-heading);
line-height: var(--line-height-tight);
font-variation-settings: 'WONK' var(--fraunces-wonk), 'SOFT' var(--fraunces-soft);
font-variation-settings:
"WONK" var(--fraunces-wonk),
"SOFT" var(--fraunces-soft);
color: var(--carbon-black);
}
h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }
h5 { font-size: var(--text-lg); }
h1 {
font-size: var(--text-4xl);
}
h2 {
font-size: var(--text-3xl);
}
h3 {
font-size: var(--text-2xl);
}
h4 {
font-size: var(--text-xl);
}
h5 {
font-size: var(--text-lg);
}
p {
font-family: var(--font-body);
@@ -180,18 +197,42 @@
}
/* Brutalist utility classes */
.brutal-shadow { box-shadow: var(--shadow-brutal); }
.brutal-shadow-sm { box-shadow: var(--shadow-brutal-sm); }
.brutal-shadow-lg { box-shadow: var(--shadow-brutal-lg); }
.brutal-border { border: var(--border-width) solid var(--carbon-black); }
.brutal-border-top { border-top: var(--border-width) solid var(--carbon-black); }
.brutal-border-bottom { border-bottom: var(--border-width) solid var(--carbon-black); }
.brutal-border-left { border-left: var(--border-width) solid var(--carbon-black); }
.brutal-border-right { border-right: var(--border-width) solid var(--carbon-black); }
.brutal-shadow {
box-shadow: var(--shadow-brutal);
}
.brutal-shadow-sm {
box-shadow: var(--shadow-brutal-sm);
}
.brutal-shadow-lg {
box-shadow: var(--shadow-brutal-lg);
}
.brutal-border {
border: var(--border-width) solid var(--carbon-black);
}
.brutal-border-top {
border-top: var(--border-width) solid var(--carbon-black);
}
.brutal-border-bottom {
border-bottom: var(--border-width) solid var(--carbon-black);
}
.brutal-border-left {
border-left: var(--border-width) solid var(--carbon-black);
}
.brutal-border-right {
border-right: var(--border-width) solid var(--carbon-black);
}
/* Animations */
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.animate-fadeIn {
animation: fadeIn 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.animate-fadeIn { animation: fadeIn 0.5s cubic-bezier(0.4, 0, 0.2, 1); }
src/shared/ui/Badge/index.ts
+2 -2
View File
@@ -1,2 +1,2 @@
export { Badge } from './ui/Badge'
export type { BadgeVariant } from './ui/Badge'
export { Badge } from './ui/Badge';
export type { BadgeVariant } from './ui/Badge';
src/shared/ui/Badge/ui/Badge.stories.tsx
+6 -6
View File
@@ -1,14 +1,14 @@
import type { Meta, StoryObj } from '@storybook/nextjs-vite'
import { Badge } from './Badge'
import type { Meta, StoryObj } from '@storybook/nextjs-vite';
import { Badge } from './Badge';
const meta: Meta<typeof Badge> = {
title: 'Shared/Badge',
component: Badge,
}
};
export default meta
export default meta;
type Story = StoryObj<typeof Badge>
type Story = StoryObj<typeof Badge>;
export const AllVariants: Story = {
render: () => (
@@ -19,4 +19,4 @@ export const AllVariants: Story = {
<Badge variant="outline">Outline</Badge>
</div>
),
}
};
src/shared/ui/Badge/ui/Badge.test.tsx
+32 -32
View File
@@ -1,52 +1,52 @@
import { describe, it, expect } from 'vitest'
import { render, screen } from '@testing-library/react'
import { Badge } from './Badge'
import { describe, it, expect } from 'vitest';
import { render, screen } from '@testing-library/react';
import { Badge } from './Badge';
describe('Badge', () => {
describe('rendering', () => {
it('renders children', () => {
render(<Badge>React</Badge>)
expect(screen.getByText('React')).toBeInTheDocument()
})
render(<Badge>React</Badge>);
expect(screen.getByText('React')).toBeInTheDocument();
});
it('renders as inline span', () => {
render(<Badge>Tag</Badge>)
expect(screen.getByText('Tag').tagName).toBe('SPAN')
})
})
render(<Badge>Tag</Badge>);
expect(screen.getByText('Tag').tagName).toBe('SPAN');
});
});
describe('variants', () => {
it('applies default variant classes', () => {
render(<Badge variant="default">Tag</Badge>)
const el = screen.getByText('Tag')
expect(el).toHaveClass('bg-carbon-black', 'text-ochre-clay')
})
render(<Badge variant="default">Tag</Badge>);
const el = screen.getByText('Tag');
expect(el).toHaveClass('bg-carbon-black', 'text-ochre-clay');
});
it('applies primary variant classes', () => {
render(<Badge variant="primary">Tag</Badge>)
expect(screen.getByText('Tag')).toHaveClass('bg-burnt-oxide')
})
render(<Badge variant="primary">Tag</Badge>);
expect(screen.getByText('Tag')).toHaveClass('bg-burnt-oxide');
});
it('applies secondary variant classes', () => {
render(<Badge variant="secondary">Tag</Badge>)
expect(screen.getByText('Tag')).toHaveClass('bg-slate-indigo')
})
render(<Badge variant="secondary">Tag</Badge>);
expect(screen.getByText('Tag')).toHaveClass('bg-slate-indigo');
});
it('applies outline variant classes', () => {
render(<Badge variant="outline">Tag</Badge>)
expect(screen.getByText('Tag')).toHaveClass('bg-transparent')
})
render(<Badge variant="outline">Tag</Badge>);
expect(screen.getByText('Tag')).toHaveClass('bg-transparent');
});
it('defaults to default variant when unspecified', () => {
render(<Badge>Tag</Badge>)
expect(screen.getByText('Tag')).toHaveClass('bg-carbon-black')
})
})
render(<Badge>Tag</Badge>);
expect(screen.getByText('Tag')).toHaveClass('bg-carbon-black');
});
});
describe('className passthrough', () => {
it('merges custom className', () => {
render(<Badge className="mt-4">Tag</Badge>)
expect(screen.getByText('Tag')).toHaveClass('mt-4')
})
})
})
render(<Badge className="mt-4">Tag</Badge>);
expect(screen.getByText('Tag')).toHaveClass('mt-4');
});
});
});
src/shared/ui/Badge/ui/Badge.tsx
+11 -11
View File
@@ -1,30 +1,30 @@
import type { ReactNode } from 'react'
import { cn } from '$shared/lib'
import type { ReactNode } from 'react';
import { cn } from '$shared/lib';
export type BadgeVariant = 'default' | 'primary' | 'secondary' | 'outline'
export type BadgeVariant = 'default' | 'primary' | 'secondary' | 'outline';
interface Props {
/**
* Badge content
*/
children: ReactNode
children: ReactNode;
/**
* Visual variant
* @default 'default'
*/
variant?: BadgeVariant
variant?: BadgeVariant;
/**
* Additional CSS classes
*/
className?: string
className?: string;
}
const VARIANTS: Record<BadgeVariant, string> = {
default: 'brutal-border bg-carbon-black text-ochre-clay',
primary: 'brutal-border bg-burnt-oxide text-ochre-clay',
default: 'brutal-border bg-carbon-black text-ochre-clay',
primary: 'brutal-border bg-burnt-oxide text-ochre-clay',
secondary: 'brutal-border bg-slate-indigo text-ochre-clay',
outline: 'brutal-border bg-transparent text-carbon-black',
}
outline: 'brutal-border bg-transparent text-carbon-black',
};
/**
* Small label for categorization or status.
@@ -34,5 +34,5 @@ export function Badge({ children, variant = 'default', className }: Props) {
<span className={cn('inline-block px-3 py-1 text-xs uppercase tracking-wider', VARIANTS[variant], className)}>
{children}
</span>
)
);
}
src/shared/ui/Button/index.ts
+2 -2
View File
@@ -1,2 +1,2 @@
export { Button } from './ui/Button'
export type { ButtonVariant, ButtonSize } from './ui/Button'
export { Button } from './ui/Button';
export type { ButtonVariant, ButtonSize } from './ui/Button';
src/shared/ui/Button/ui/Button.stories.tsx
+29 -15
View File
@@ -1,35 +1,49 @@
import type { Meta, StoryObj } from '@storybook/nextjs-vite'
import { Button } from './Button'
import type { Meta, StoryObj } from '@storybook/nextjs-vite';
import { Button } from './Button';
const meta: Meta<typeof Button> = {
title: 'Shared/Button',
component: Button,
}
};
export default meta
export default meta;
type Story = StoryObj<typeof Button>
type Story = StoryObj<typeof Button>;
export const AllVariants: Story = {
render: () => (
<div className="flex gap-4 flex-wrap p-8 bg-ochre-clay">
<Button variant="primary" size="md">Primary</Button>
<Button variant="secondary" size="md">Secondary</Button>
<Button variant="outline" size="md">Outline</Button>
<Button variant="ghost" size="md">Ghost</Button>
<Button variant="primary" size="md">
Primary
</Button>
<Button variant="secondary" size="md">
Secondary
</Button>
<Button variant="outline" size="md">
Outline
</Button>
<Button variant="ghost" size="md">
Ghost
</Button>
</div>
),
}
};
export const Sizes: Story = {
render: () => (
<div className="flex gap-4 items-center flex-wrap p-8 bg-ochre-clay">
<Button variant="primary" size="sm">Small</Button>
<Button variant="primary" size="md">Medium</Button>
<Button variant="primary" size="lg">Large</Button>
<Button variant="primary" size="sm">
Small
</Button>
<Button variant="primary" size="md">
Medium
</Button>
<Button variant="primary" size="lg">
Large
</Button>
</div>
),
}
};
export const Disabled: Story = {
args: {
@@ -44,4 +58,4 @@ export const Disabled: Story = {
</div>
),
],
}
};
src/shared/ui/Button/ui/Button.test.tsx
+48 -48
View File
@@ -1,67 +1,67 @@
import { describe, it, expect, vi } from 'vitest'
import { render, screen } from '@testing-library/react'
import userEvent from '@testing-library/user-event'
import { Button } from './Button'
import { describe, it, expect, vi } from 'vitest';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { Button } from './Button';
describe('Button', () => {
describe('rendering', () => {
it('renders children', () => {
render(<Button>Click me</Button>)
expect(screen.getByRole('button', { name: 'Click me' })).toBeInTheDocument()
})
render(<Button>Click me</Button>);
expect(screen.getByRole('button', { name: 'Click me' })).toBeInTheDocument();
});
it('renders as button element', () => {
render(<Button>Click</Button>)
expect(screen.getByRole('button')).toBeInTheDocument()
})
})
render(<Button>Click</Button>);
expect(screen.getByRole('button')).toBeInTheDocument();
});
});
describe('variants', () => {
it('applies primary variant by default', () => {
render(<Button>Go</Button>)
expect(screen.getByRole('button')).toHaveClass('bg-burnt-oxide')
})
render(<Button>Go</Button>);
expect(screen.getByRole('button')).toHaveClass('bg-burnt-oxide');
});
it('applies secondary variant', () => {
render(<Button variant="secondary">Go</Button>)
expect(screen.getByRole('button')).toHaveClass('bg-slate-indigo')
})
render(<Button variant="secondary">Go</Button>);
expect(screen.getByRole('button')).toHaveClass('bg-slate-indigo');
});
it('applies outline variant', () => {
render(<Button variant="outline">Go</Button>)
expect(screen.getByRole('button')).toHaveClass('bg-transparent')
})
render(<Button variant="outline">Go</Button>);
expect(screen.getByRole('button')).toHaveClass('bg-transparent');
});
it('applies ghost variant', () => {
render(<Button variant="ghost">Go</Button>)
expect(screen.getByRole('button')).toHaveClass('bg-ochre-clay')
})
})
render(<Button variant="ghost">Go</Button>);
expect(screen.getByRole('button')).toHaveClass('bg-ochre-clay');
});
});
describe('sizes', () => {
it('applies md size by default', () => {
render(<Button>Go</Button>)
expect(screen.getByRole('button')).toHaveClass('px-6', 'py-3')
})
render(<Button>Go</Button>);
expect(screen.getByRole('button')).toHaveClass('px-6', 'py-3');
});
it('applies sm size', () => {
render(<Button size="sm">Go</Button>)
expect(screen.getByRole('button')).toHaveClass('px-4', 'py-2')
})
render(<Button size="sm">Go</Button>);
expect(screen.getByRole('button')).toHaveClass('px-4', 'py-2');
});
it('applies lg size', () => {
render(<Button size="lg">Go</Button>)
expect(screen.getByRole('button')).toHaveClass('px-8', 'py-4')
})
})
render(<Button size="lg">Go</Button>);
expect(screen.getByRole('button')).toHaveClass('px-8', 'py-4');
});
});
describe('interactions', () => {
it('calls onClick when clicked', async () => {
const onClick = vi.fn()
render(<Button onClick={onClick}>Go</Button>)
await userEvent.click(screen.getByRole('button'))
expect(onClick).toHaveBeenCalledOnce()
})
const onClick = vi.fn();
render(<Button onClick={onClick}>Go</Button>);
await userEvent.click(screen.getByRole('button'));
expect(onClick).toHaveBeenCalledOnce();
});
it('is disabled when disabled prop is set', () => {
render(<Button disabled>Go</Button>)
expect(screen.getByRole('button')).toBeDisabled()
})
})
render(<Button disabled>Go</Button>);
expect(screen.getByRole('button')).toBeDisabled();
});
});
describe('className passthrough', () => {
it('merges custom className', () => {
render(<Button className="w-full">Go</Button>)
expect(screen.getByRole('button')).toHaveClass('w-full')
})
})
})
render(<Button className="w-full">Go</Button>);
expect(screen.getByRole('button')).toHaveClass('w-full');
});
});
});
src/shared/ui/Button/ui/Button.tsx
+15 -14
View File
@@ -1,40 +1,41 @@
import type { ButtonHTMLAttributes, ReactNode } from 'react'
import { cn } from '$shared/lib'
import type { ButtonHTMLAttributes, ReactNode } from 'react';
import { cn } from '$shared/lib';
export type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost'
export type ButtonSize = 'sm' | 'md' | 'lg'
export type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost';
export type ButtonSize = 'sm' | 'md' | 'lg';
interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
/**
* Visual variant
* @default 'primary'
*/
variant?: ButtonVariant
variant?: ButtonVariant;
/**
* Size preset
* @default 'md'
*/
size?: ButtonSize
size?: ButtonSize;
/**
* Button content
*/
children: ReactNode
children: ReactNode;
}
const VARIANTS: Record<ButtonVariant, string> = {
primary: 'bg-burnt-oxide text-ochre-clay',
primary: 'bg-burnt-oxide text-ochre-clay',
secondary: 'bg-slate-indigo text-ochre-clay',
outline: 'bg-transparent text-carbon-black border-carbon-black',
ghost: 'bg-ochre-clay text-carbon-black border-carbon-black',
}
outline: 'bg-transparent text-carbon-black border-carbon-black',
ghost: 'bg-ochre-clay text-carbon-black border-carbon-black',
};
const SIZES: Record<ButtonSize, string> = {
sm: 'px-4 py-2 text-sm',
md: 'px-6 py-3 text-base',
lg: 'px-8 py-4 text-lg',
}
};
const BASE = 'brutal-border brutal-shadow transition-all duration-200 hover:translate-x-[2px] hover:translate-y-[2px] hover:shadow-[6px_6px_0_var(--carbon-black)] active:translate-x-[4px] active:translate-y-[4px] active:shadow-[4px_4px_0_var(--carbon-black)] uppercase tracking-wider'
const BASE =
'brutal-border brutal-shadow transition-all duration-200 hover:translate-x-[2px] hover:translate-y-[2px] hover:shadow-[6px_6px_0_var(--carbon-black)] active:translate-x-[4px] active:translate-y-[4px] active:shadow-[4px_4px_0_var(--carbon-black)] uppercase tracking-wider';
/**
* Brutalist button with variants and sizes.
@@ -44,5 +45,5 @@ export function Button({ variant = 'primary', size = 'md', className, children,
<button className={cn(BASE, VARIANTS[variant], SIZES[size], className)} {...props}>
{children}
</button>
)
);
}
src/shared/ui/Card/index.ts
+2 -2
View File
@@ -1,2 +1,2 @@
export { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from './ui/Card'
export type { CardBackground } from './ui/Card'
export { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from './ui/Card';
export type { CardBackground } from './ui/Card';
src/shared/ui/Card/ui/Card.stories.tsx
+9 -11
View File
@@ -1,14 +1,14 @@
import type { Meta, StoryObj } from '@storybook/nextjs-vite'
import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from './Card'
import type { Meta, StoryObj } from '@storybook/nextjs-vite';
import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from './Card';
const meta: Meta<typeof Card> = {
title: 'Shared/Card',
component: Card,
}
};
export default meta
export default meta;
type Story = StoryObj<typeof Card>
type Story = StoryObj<typeof Card>;
export const AllBackgrounds: Story = {
render: () => (
@@ -36,19 +36,17 @@ export const AllBackgrounds: Story = {
</Card>
</div>
),
}
};
export const NoPadding: Story = {
render: () => (
<div className="p-8 bg-ochre-clay">
<Card noPadding className="w-64 overflow-hidden">
<div className="h-40 bg-slate-indigo flex items-center justify-center text-ochre-clay">
Image placeholder
</div>
<div className="h-40 bg-slate-indigo flex items-center justify-center text-ochre-clay">Image placeholder</div>
</Card>
</div>
),
}
};
export const FullComposition: Story = {
render: () => (
@@ -67,4 +65,4 @@ export const FullComposition: Story = {
</Card>
</div>
),
}
};
src/shared/ui/Card/ui/Card.test.tsx
+55 -55
View File
@@ -1,79 +1,79 @@
import { describe, it, expect } from 'vitest'
import { render, screen } from '@testing-library/react'
import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from './Card'
import { describe, it, expect } from 'vitest';
import { render, screen } from '@testing-library/react';
import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from './Card';
describe('Card', () => {
describe('rendering', () => {
it('renders children', () => {
render(<Card>Content</Card>)
expect(screen.getByText('Content')).toBeInTheDocument()
})
render(<Card>Content</Card>);
expect(screen.getByText('Content')).toBeInTheDocument();
});
it('has brutal-border and brutal-shadow classes', () => {
const { container } = render(<Card>Content</Card>)
expect(container.firstChild).toHaveClass('brutal-border', 'brutal-shadow')
})
})
const { container } = render(<Card>Content</Card>);
expect(container.firstChild).toHaveClass('brutal-border', 'brutal-shadow');
});
});
describe('background variants', () => {
it('defaults to ochre background', () => {
const { container } = render(<Card>Content</Card>)
expect(container.firstChild).toHaveClass('bg-ochre-clay')
})
const { container } = render(<Card>Content</Card>);
expect(container.firstChild).toHaveClass('bg-ochre-clay');
});
it('applies slate background', () => {
const { container } = render(<Card background="slate">Content</Card>)
expect(container.firstChild).toHaveClass('bg-slate-indigo')
})
const { container } = render(<Card background="slate">Content</Card>);
expect(container.firstChild).toHaveClass('bg-slate-indigo');
});
it('applies white background', () => {
const { container } = render(<Card background="white">Content</Card>)
expect(container.firstChild).toHaveClass('bg-white')
})
})
const { container } = render(<Card background="white">Content</Card>);
expect(container.firstChild).toHaveClass('bg-white');
});
});
describe('padding', () => {
it('has default padding', () => {
const { container } = render(<Card>Content</Card>)
expect(container.firstChild).toHaveClass('p-6')
})
const { container } = render(<Card>Content</Card>);
expect(container.firstChild).toHaveClass('p-6');
});
it('removes padding when noPadding is true', () => {
const { container } = render(<Card noPadding>Content</Card>)
expect(container.firstChild).not.toHaveClass('p-6')
})
})
const { container } = render(<Card noPadding>Content</Card>);
expect(container.firstChild).not.toHaveClass('p-6');
});
});
describe('className passthrough', () => {
it('merges custom className', () => {
const { container } = render(<Card className="group">Content</Card>)
expect(container.firstChild).toHaveClass('group')
})
})
})
const { container } = render(<Card className="group">Content</Card>);
expect(container.firstChild).toHaveClass('group');
});
});
});
describe('CardHeader', () => {
it('renders children with bottom margin', () => {
render(<CardHeader>Header</CardHeader>)
expect(screen.getByText('Header')).toHaveClass('mb-4')
})
})
render(<CardHeader>Header</CardHeader>);
expect(screen.getByText('Header')).toHaveClass('mb-4');
});
});
describe('CardTitle', () => {
it('renders children as h3', () => {
render(<CardTitle>Title</CardTitle>)
expect(screen.getByRole('heading', { level: 3 })).toHaveTextContent('Title')
})
})
render(<CardTitle>Title</CardTitle>);
expect(screen.getByRole('heading', { level: 3 })).toHaveTextContent('Title');
});
});
describe('CardDescription', () => {
it('renders children as paragraph with opacity', () => {
render(<CardDescription>Desc</CardDescription>)
const el = screen.getByText('Desc')
expect(el.tagName).toBe('P')
expect(el).toHaveClass('opacity-80')
})
})
render(<CardDescription>Desc</CardDescription>);
const el = screen.getByText('Desc');
expect(el.tagName).toBe('P');
expect(el).toHaveClass('opacity-80');
});
});
describe('CardContent', () => {
it('renders children in a div', () => {
render(<CardContent>Body</CardContent>)
expect(screen.getByText('Body')).toBeInTheDocument()
})
})
render(<CardContent>Body</CardContent>);
expect(screen.getByText('Body')).toBeInTheDocument();
});
});
describe('CardFooter', () => {
it('renders children with top border', () => {
render(<CardFooter>Footer</CardFooter>)
const el = screen.getByText('Footer')
expect(el).toHaveClass('brutal-border-top', 'mt-6', 'pt-6')
})
})
render(<CardFooter>Footer</CardFooter>);
const el = screen.getByText('Footer');
expect(el).toHaveClass('brutal-border-top', 'mt-6', 'pt-6');
});
});
src/shared/ui/Card/ui/Card.tsx
+16 -16
View File
@@ -1,34 +1,34 @@
import type { ReactNode } from 'react'
import { cn } from '$shared/lib'
import type { ReactNode } from 'react';
import { cn } from '$shared/lib';
export type CardBackground = 'ochre' | 'slate' | 'white'
export type CardBackground = 'ochre' | 'slate' | 'white';
interface CardProps {
/**
* Card content
*/
children: ReactNode
children: ReactNode;
/**
* Additional CSS classes
*/
className?: string
className?: string;
/**
* Background color preset
* @default 'ochre'
*/
background?: CardBackground
background?: CardBackground;
/**
* Remove default padding
* @default false
*/
noPadding?: boolean
noPadding?: boolean;
}
const BG: Record<CardBackground, string> = {
ochre: 'bg-ochre-clay',
slate: 'bg-slate-indigo text-ochre-clay',
white: 'bg-white',
}
};
/**
* Brutalist card container with background and padding variants.
@@ -38,51 +38,51 @@ export function Card({ children, className, background = 'ochre', noPadding = fa
<div className={cn('brutal-border brutal-shadow', BG[background], !noPadding && 'p-6 md:p-8', className)}>
{children}
</div>
)
);
}
interface SlotProps {
/**
* Slot content
*/
children: ReactNode
children: ReactNode;
/**
* Additional CSS classes
*/
className?: string
className?: string;
}
/**
* Card header wrapper — adds bottom margin.
*/
export function CardHeader({ children, className }: SlotProps) {
return <div className={cn('mb-4', className)}>{children}</div>
return <div className={cn('mb-4', className)}>{children}</div>;
}
/**
* Card title — renders as h3.
*/
export function CardTitle({ children, className }: SlotProps) {
return <h3 className={className}>{children}</h3>
return <h3 className={className}>{children}</h3>;
}
/**
* Card description — muted paragraph below the title.
*/
export function CardDescription({ children, className }: SlotProps) {
return <p className={cn('mt-2 opacity-80', className)}>{children}</p>
return <p className={cn('mt-2 opacity-80', className)}>{children}</p>;
}
/**
* Card body content area.
*/
export function CardContent({ children, className }: SlotProps) {
return <div className={className}>{children}</div>
return <div className={className}>{children}</div>;
}
/**
* Card footer — separated by a brutal border-top.
*/
export function CardFooter({ children, className }: SlotProps) {
return <div className={cn('mt-6 pt-6 brutal-border-top', className)}>{children}</div>
return <div className={cn('mt-6 pt-6 brutal-border-top', className)}>{children}</div>;
}
src/shared/ui/Input/index.ts
+1 -1
View File
@@ -1 +1 @@
export { Input, Textarea } from './ui/Input'
export { Input, Textarea } from './ui/Input';
src/shared/ui/Input/ui/Input.stories.tsx
+11 -11
View File
@@ -1,5 +1,5 @@
import type { Meta, StoryObj } from '@storybook/nextjs-vite'
import { Input, Textarea } from './Input'
import type { Meta, StoryObj } from '@storybook/nextjs-vite';
import { Input, Textarea } from './Input';
const meta: Meta<typeof Input> = {
title: 'Shared/Input',
@@ -11,35 +11,35 @@ const meta: Meta<typeof Input> = {
</div>
),
],
}
};
export default meta
export default meta;
type Story = StoryObj<typeof Input>
type Story = StoryObj<typeof Input>;
export const Default: Story = {
args: {},
}
};
export const WithLabel: Story = {
args: {
label: 'Email address',
},
}
};
export const WithError: Story = {
args: {
label: 'Email',
error: 'This field is required',
},
}
};
export const WithPlaceholder: Story = {
args: {
placeholder: 'Enter your email',
type: 'email',
},
}
};
export const TextareaStory: Story = {
name: 'Textarea',
@@ -48,7 +48,7 @@ export const TextareaStory: Story = {
<Textarea label="Message" rows={4} />
</div>
),
}
};
export const TextareaWithError: Story = {
render: () => (
@@ -56,4 +56,4 @@ export const TextareaWithError: Story = {
<Textarea label="Message" error="Too short" rows={4} />
</div>
),
}
};
src/shared/ui/Input/ui/Input.test.tsx
+80 -80
View File
@@ -1,110 +1,110 @@
import { describe, it, expect } from 'vitest'
import { render, screen } from '@testing-library/react'
import { Input, Textarea } from './Input'
import { describe, it, expect } from 'vitest';
import { render, screen } from '@testing-library/react';
import { Input, Textarea } from './Input';
describe('Input', () => {
describe('rendering', () => {
it('renders an input element', () => {
render(<Input />)
expect(screen.getByRole('textbox')).toBeInTheDocument()
})
render(<Input />);
expect(screen.getByRole('textbox')).toBeInTheDocument();
});
it('renders label when provided', () => {
render(<Input label="Email" />)
expect(screen.getByText('Email')).toBeInTheDocument()
})
render(<Input label="Email" />);
expect(screen.getByText('Email')).toBeInTheDocument();
});
it('does not render label when omitted', () => {
const { container } = render(<Input />)
expect(container.querySelector('label')).toBeNull()
})
const { container } = render(<Input />);
expect(container.querySelector('label')).toBeNull();
});
it('renders error message when provided', () => {
render(<Input error="Required" />)
expect(screen.getByText('Required')).toBeInTheDocument()
})
render(<Input error="Required" />);
expect(screen.getByText('Required')).toBeInTheDocument();
});
it('does not render error when omitted', () => {
render(<Input />)
expect(screen.queryByText('Required')).toBeNull()
})
})
render(<Input />);
expect(screen.queryByText('Required')).toBeNull();
});
});
describe('accessibility', () => {
it('label is associated with input via htmlFor/id', () => {
render(<Input label="Email" />)
expect(screen.getByLabelText('Email')).toBeInTheDocument()
})
render(<Input label="Email" />);
expect(screen.getByLabelText('Email')).toBeInTheDocument();
});
it('error span is referenced by aria-describedby', () => {
render(<Input error="Required" />)
const input = screen.getByRole('textbox')
const errorId = input.getAttribute('aria-describedby')
expect(errorId).toBeTruthy()
expect(document.getElementById(errorId!)).toHaveTextContent('Required')
})
render(<Input error="Required" />);
const input = screen.getByRole('textbox');
const errorId = input.getAttribute('aria-describedby');
expect(errorId).toBeTruthy();
expect(document.getElementById(errorId!)).toHaveTextContent('Required');
});
it('no aria-describedby when no error', () => {
render(<Input />)
expect(screen.getByRole('textbox')).not.toHaveAttribute('aria-describedby')
})
render(<Input />);
expect(screen.getByRole('textbox')).not.toHaveAttribute('aria-describedby');
});
it('uses provided id prop', () => {
render(<Input id="my-input" label="Email" />)
expect(screen.getByLabelText('Email')).toHaveAttribute('id', 'my-input')
})
})
render(<Input id="my-input" label="Email" />);
expect(screen.getByLabelText('Email')).toHaveAttribute('id', 'my-input');
});
});
describe('styling', () => {
it('has brutal-border class', () => {
render(<Input />)
expect(screen.getByRole('textbox')).toHaveClass('brutal-border')
})
render(<Input />);
expect(screen.getByRole('textbox')).toHaveClass('brutal-border');
});
it('applies custom className', () => {
render(<Input className="w-full" />)
expect(screen.getByRole('textbox')).toHaveClass('w-full')
})
})
render(<Input className="w-full" />);
expect(screen.getByRole('textbox')).toHaveClass('w-full');
});
});
describe('forwarded props', () => {
it('passes placeholder to input', () => {
render(<Input placeholder="Enter email" />)
expect(screen.getByPlaceholderText('Enter email')).toBeInTheDocument()
})
render(<Input placeholder="Enter email" />);
expect(screen.getByPlaceholderText('Enter email')).toBeInTheDocument();
});
it('passes type to input', () => {
render(<Input type="email" />)
expect(screen.getByRole('textbox')).toHaveAttribute('type', 'email')
})
})
})
render(<Input type="email" />);
expect(screen.getByRole('textbox')).toHaveAttribute('type', 'email');
});
});
});
describe('Textarea', () => {
describe('rendering', () => {
it('renders a textarea element', () => {
render(<Textarea />)
expect(screen.getByRole('textbox')).toBeInTheDocument()
})
render(<Textarea />);
expect(screen.getByRole('textbox')).toBeInTheDocument();
});
it('renders label when provided', () => {
render(<Textarea label="Message" />)
expect(screen.getByText('Message')).toBeInTheDocument()
})
render(<Textarea label="Message" />);
expect(screen.getByText('Message')).toBeInTheDocument();
});
it('renders error when provided', () => {
render(<Textarea error="Too short" />)
expect(screen.getByText('Too short')).toBeInTheDocument()
})
render(<Textarea error="Too short" />);
expect(screen.getByText('Too short')).toBeInTheDocument();
});
it('defaults to 4 rows', () => {
render(<Textarea />)
expect(screen.getByRole('textbox')).toHaveAttribute('rows', '4')
})
render(<Textarea />);
expect(screen.getByRole('textbox')).toHaveAttribute('rows', '4');
});
it('accepts custom rows', () => {
render(<Textarea rows={8} />)
expect(screen.getByRole('textbox')).toHaveAttribute('rows', '8')
})
})
render(<Textarea rows={8} />);
expect(screen.getByRole('textbox')).toHaveAttribute('rows', '8');
});
});
describe('accessibility', () => {
it('label is associated with textarea via htmlFor/id', () => {
render(<Textarea label="Message" />)
expect(screen.getByLabelText('Message')).toBeInTheDocument()
})
render(<Textarea label="Message" />);
expect(screen.getByLabelText('Message')).toBeInTheDocument();
});
it('error span is referenced by aria-describedby', () => {
render(<Textarea error="Too short" />)
const textarea = screen.getByRole('textbox')
const errorId = textarea.getAttribute('aria-describedby')
expect(errorId).toBeTruthy()
expect(document.getElementById(errorId!)).toHaveTextContent('Too short')
})
render(<Textarea error="Too short" />);
const textarea = screen.getByRole('textbox');
const errorId = textarea.getAttribute('aria-describedby');
expect(errorId).toBeTruthy();
expect(document.getElementById(errorId!)).toHaveTextContent('Too short');
});
it('no aria-describedby when no error', () => {
render(<Textarea />)
expect(screen.getByRole('textbox')).not.toHaveAttribute('aria-describedby')
})
})
})
render(<Textarea />);
expect(screen.getByRole('textbox')).not.toHaveAttribute('aria-describedby');
});
});
});
src/shared/ui/Input/ui/Input.tsx
+37 -20
View File
@@ -1,68 +1,81 @@
import { useId, type InputHTMLAttributes, type TextareaHTMLAttributes } from 'react'
import { cn } from '$shared/lib'
import { useId, type InputHTMLAttributes, type TextareaHTMLAttributes } from 'react';
import { cn } from '$shared/lib';
interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
/**
* Visible label rendered above the input
*/
label?: string
label?: string;
/**
* Validation error shown below the input
*/
error?: string
error?: string;
}
const INPUT_BASE = 'brutal-border bg-white px-4 py-3 text-carbon-black focus:outline-none focus:ring-2 focus:ring-burnt-oxide focus:ring-offset-2 focus:ring-offset-ochre-clay transition-all'
const INPUT_BASE =
'brutal-border bg-white px-4 py-3 text-carbon-black focus:outline-none focus:ring-2 focus:ring-burnt-oxide focus:ring-offset-2 focus:ring-offset-ochre-clay transition-all';
/**
* Text input with optional label and error state.
*/
export function Input({ label, error, className, id, ...props }: InputProps) {
const generatedId = useId()
const inputId = id ?? generatedId
const errorId = `${inputId}-error`
const generatedId = useId();
const inputId = id ?? generatedId;
const errorId = `${inputId}-error`;
return (
<div className="flex flex-col gap-2">
{label && <label htmlFor={inputId} className="text-carbon-black">{label}</label>}
{label && (
<label htmlFor={inputId} className="text-carbon-black">
{label}
</label>
)}
<input
id={inputId}
className={cn(INPUT_BASE, className)}
aria-describedby={error ? errorId : undefined}
{...props}
/>
{error && <span id={errorId} className="text-sm text-burnt-oxide">{error}</span>}
{error && (
<span id={errorId} className="text-sm text-burnt-oxide">
{error}
</span>
)}
</div>
)
);
}
interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
/**
* Visible label rendered above the textarea
*/
label?: string
label?: string;
/**
* Validation error shown below the textarea
*/
error?: string
error?: string;
/**
* Number of visible rows
* @default 4
*/
rows?: number
rows?: number;
}
/**
* Multiline textarea with optional label and error state.
*/
export function Textarea({ label, error, rows = 4, className, id, ...props }: TextareaProps) {
const generatedId = useId()
const textareaId = id ?? generatedId
const errorId = `${textareaId}-error`
const generatedId = useId();
const textareaId = id ?? generatedId;
const errorId = `${textareaId}-error`;
return (
<div className="flex flex-col gap-2">
{label && <label htmlFor={textareaId} className="text-carbon-black">{label}</label>}
{label && (
<label htmlFor={textareaId} className="text-carbon-black">
{label}
</label>
)}
<textarea
id={textareaId}
rows={rows}
@@ -70,7 +83,11 @@ export function Textarea({ label, error, rows = 4, className, id, ...props }: Te
aria-describedby={error ? errorId : undefined}
{...props}
/>
{error && <span id={errorId} className="text-sm text-burnt-oxide">{error}</span>}
{error && (
<span id={errorId} className="text-sm text-burnt-oxide">
{error}
</span>
)}
</div>
)
);
}
src/shared/ui/Section/index.ts
+2 -2
View File
@@ -1,2 +1,2 @@
export { Section, Container } from './ui/Section'
export type { SectionBackground, ContainerSize } from './ui/Section'
export { Section, Container } from './ui/Section';
export type { SectionBackground, ContainerSize } from './ui/Section';
src/shared/ui/Section/ui/Section.stories.tsx
+23 -11
View File
@@ -1,14 +1,14 @@
import type { Meta, StoryObj } from '@storybook/nextjs-vite'
import { Section, Container } from './Section'
import type { Meta, StoryObj } from '@storybook/nextjs-vite';
import { Section, Container } from './Section';
const meta: Meta<typeof Section> = {
title: 'Shared/Section',
component: Section,
}
};
export default meta
export default meta;
type Story = StoryObj<typeof Section>
type Story = StoryObj<typeof Section>;
export const AllBackgrounds: Story = {
render: () => (
@@ -16,32 +16,44 @@ export const AllBackgrounds: Story = {
<Section background="ochre" className="py-12">
<Container>
<h2>Ochre Section</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua.
</p>
</Container>
</Section>
<Section background="slate" className="py-12">
<Container>
<h2>Slate Section</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua.
</p>
</Container>
</Section>
<Section background="white" className="py-12">
<Container>
<h2>White Section</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua.
</p>
</Container>
</Section>
</div>
),
}
};
export const Bordered: Story = {
render: () => (
<Section background="ochre" bordered className="py-12">
<Container>
<h2>Bordered Section</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua.
</p>
</Container>
</Section>
),
}
};
src/shared/ui/Section/ui/Section.test.tsx
+70 -62
View File
@@ -1,95 +1,103 @@
import { describe, it, expect } from 'vitest'
import { render, screen } from '@testing-library/react'
import { Section, Container } from './Section'
import { describe, it, expect } from 'vitest';
import { render, screen } from '@testing-library/react';
import { Section, Container } from './Section';
describe('Section', () => {
describe('rendering', () => {
it('renders a section element', () => {
const { container } = render(<Section>content</Section>)
expect(container.querySelector('section')).toBeInTheDocument()
})
const { container } = render(<Section>content</Section>);
expect(container.querySelector('section')).toBeInTheDocument();
});
it('renders children', () => {
render(<Section><span>hello</span></Section>)
expect(screen.getByText('hello')).toBeInTheDocument()
})
})
render(
<Section>
<span>hello</span>
</Section>,
);
expect(screen.getByText('hello')).toBeInTheDocument();
});
});
describe('background variants', () => {
it('defaults to ochre background', () => {
const { container } = render(<Section>x</Section>)
expect(container.querySelector('section')).toHaveClass('bg-ochre-clay', 'text-carbon-black')
})
const { container } = render(<Section>x</Section>);
expect(container.querySelector('section')).toHaveClass('bg-ochre-clay', 'text-carbon-black');
});
it('applies slate background', () => {
const { container } = render(<Section background="slate">x</Section>)
expect(container.querySelector('section')).toHaveClass('bg-slate-indigo', 'text-ochre-clay')
})
const { container } = render(<Section background="slate">x</Section>);
expect(container.querySelector('section')).toHaveClass('bg-slate-indigo', 'text-ochre-clay');
});
it('applies white background', () => {
const { container } = render(<Section background="white">x</Section>)
expect(container.querySelector('section')).toHaveClass('bg-white', 'text-carbon-black')
})
})
const { container } = render(<Section background="white">x</Section>);
expect(container.querySelector('section')).toHaveClass('bg-white', 'text-carbon-black');
});
});
describe('bordered', () => {
it('no border classes by default', () => {
const { container } = render(<Section>x</Section>)
const el = container.querySelector('section')!
expect(el).not.toHaveClass('brutal-border-top')
expect(el).not.toHaveClass('brutal-border-bottom')
})
const { container } = render(<Section>x</Section>);
const el = container.querySelector('section')!;
expect(el).not.toHaveClass('brutal-border-top');
expect(el).not.toHaveClass('brutal-border-bottom');
});
it('adds top and bottom borders when bordered=true', () => {
const { container } = render(<Section bordered>x</Section>)
const el = container.querySelector('section')!
expect(el).toHaveClass('brutal-border-top')
expect(el).toHaveClass('brutal-border-bottom')
})
})
const { container } = render(<Section bordered>x</Section>);
const el = container.querySelector('section')!;
expect(el).toHaveClass('brutal-border-top');
expect(el).toHaveClass('brutal-border-bottom');
});
});
describe('className', () => {
it('applies custom className', () => {
const { container } = render(<Section className="py-16">x</Section>)
expect(container.querySelector('section')).toHaveClass('py-16')
})
})
})
const { container } = render(<Section className="py-16">x</Section>);
expect(container.querySelector('section')).toHaveClass('py-16');
});
});
});
describe('Container', () => {
describe('rendering', () => {
it('renders a div with children', () => {
render(<Container><span>inner</span></Container>)
expect(screen.getByText('inner')).toBeInTheDocument()
})
})
render(
<Container>
<span>inner</span>
</Container>,
);
expect(screen.getByText('inner')).toBeInTheDocument();
});
});
describe('size variants', () => {
it('defaults to max-w-7xl', () => {
const { container } = render(<Container>x</Container>)
expect(container.firstChild).toHaveClass('max-w-7xl')
})
const { container } = render(<Container>x</Container>);
expect(container.firstChild).toHaveClass('max-w-7xl');
});
it('wide applies max-w-[1920px]', () => {
const { container } = render(<Container size="wide">x</Container>)
expect(container.firstChild).toHaveClass('max-w-[1920px]')
})
const { container } = render(<Container size="wide">x</Container>);
expect(container.firstChild).toHaveClass('max-w-[1920px]');
});
it('ultra-wide applies max-w-[2560px]', () => {
const { container } = render(<Container size="ultra-wide">x</Container>)
expect(container.firstChild).toHaveClass('max-w-[2560px]')
})
})
const { container } = render(<Container size="ultra-wide">x</Container>);
expect(container.firstChild).toHaveClass('max-w-[2560px]');
});
});
describe('layout', () => {
it('centers content horizontally', () => {
const { container } = render(<Container>x</Container>)
expect(container.firstChild).toHaveClass('mx-auto')
})
const { container } = render(<Container>x</Container>);
expect(container.firstChild).toHaveClass('mx-auto');
});
it('applies horizontal padding', () => {
const { container } = render(<Container>x</Container>)
expect(container.firstChild).toHaveClass('px-6')
})
})
const { container } = render(<Container>x</Container>);
expect(container.firstChild).toHaveClass('px-6');
});
});
describe('className', () => {
it('applies custom className', () => {
const { container } = render(<Container className="my-custom">x</Container>)
expect(container.firstChild).toHaveClass('my-custom')
})
})
})
const { container } = render(<Container className="my-custom">x</Container>);
expect(container.firstChild).toHaveClass('my-custom');
});
});
});
src/shared/ui/Section/ui/Section.tsx
+18 -28
View File
@@ -1,82 +1,72 @@
import type { ReactNode } from 'react'
import { cn } from '$shared/lib'
import type { ReactNode } from 'react';
import { cn } from '$shared/lib';
export type SectionBackground = 'ochre' | 'slate' | 'white'
export type ContainerSize = 'default' | 'wide' | 'ultra-wide'
export type SectionBackground = 'ochre' | 'slate' | 'white';
export type ContainerSize = 'default' | 'wide' | 'ultra-wide';
interface SectionProps {
/**
* Section content
*/
children: ReactNode
children: ReactNode;
/**
* Background color variant
* @default 'ochre'
*/
background?: SectionBackground
background?: SectionBackground;
/**
* Adds top and bottom brutal borders
* @default false
*/
bordered?: boolean
bordered?: boolean;
/**
* CSS classes
*/
className?: string
className?: string;
}
const BACKGROUNDS: Record<SectionBackground, string> = {
ochre: 'bg-ochre-clay text-carbon-black',
slate: 'bg-slate-indigo text-ochre-clay',
white: 'bg-white text-carbon-black',
}
};
/**
* Full-width page section with background and optional borders.
*/
export function Section({ children, background = 'ochre', bordered = false, className }: SectionProps) {
return (
<section
className={cn(
BACKGROUNDS[background],
bordered && 'brutal-border-top brutal-border-bottom',
className,
)}
>
<section className={cn(BACKGROUNDS[background], bordered && 'brutal-border-top brutal-border-bottom', className)}>
{children}
</section>
)
);
}
interface ContainerProps {
/**
* Container content
*/
children: ReactNode
children: ReactNode;
/**
* Max-width constraint
* @default 'default'
*/
size?: ContainerSize
size?: ContainerSize;
/**
* CSS classes
*/
className?: string
className?: string;
}
const SIZES: Record<ContainerSize, string> = {
'default': 'max-w-7xl',
'wide': 'max-w-[1920px]',
default: 'max-w-7xl',
wide: 'max-w-[1920px]',
'ultra-wide': 'max-w-[2560px]',
}
};
/**
* Centered content container with responsive horizontal padding.
*/
export function Container({ children, size = 'default', className }: ContainerProps) {
return (
<div className={cn(SIZES[size], 'mx-auto px-6 md:px-12 lg:px-16', className)}>
{children}
</div>
)
return <div className={cn(SIZES[size], 'mx-auto px-6 md:px-12 lg:px-16', className)}>{children}</div>;
}
src/shared/ui/SectionAccordion/index.ts
-1
View File
@@ -1 +0,0 @@
export { SectionAccordion } from './ui/SectionAccordion'
src/shared/ui/TechStack/index.ts
+1 -1
View File
@@ -1 +1 @@
export { TechStackBrick, TechStackGrid } from './ui/TechStack'
export { TechStackBrick, TechStackGrid } from './ui/TechStack';
src/shared/ui/TechStack/ui/TechStack.stories.tsx
+7 -7
View File
@@ -1,5 +1,5 @@
import type { Meta, StoryObj } from '@storybook/nextjs-vite'
import { TechStackGrid, TechStackBrick } from './TechStack'
import type { Meta, StoryObj } from '@storybook/nextjs-vite';
import { TechStackGrid, TechStackBrick } from './TechStack';
const meta: Meta<typeof TechStackGrid> = {
title: 'Shared/TechStack',
@@ -11,11 +11,11 @@ const meta: Meta<typeof TechStackGrid> = {
</div>
),
],
}
};
export default meta
export default meta;
type Story = StoryObj<typeof TechStackGrid>
type Story = StoryObj<typeof TechStackGrid>;
export const Grid: Story = {
args: {
@@ -34,7 +34,7 @@ export const Grid: Story = {
'Rust',
],
},
}
};
export const SingleBrick: Story = {
render: () => (
@@ -42,4 +42,4 @@ export const SingleBrick: Story = {
<TechStackBrick name="TypeScript" />
</div>
),
}
};
src/shared/ui/TechStack/ui/TechStack.test.tsx
+42 -42
View File
@@ -1,62 +1,62 @@
import { describe, it, expect } from 'vitest'
import { render, screen } from '@testing-library/react'
import { TechStackBrick, TechStackGrid } from './TechStack'
import { describe, it, expect } from 'vitest';
import { render, screen } from '@testing-library/react';
import { TechStackBrick, TechStackGrid } from './TechStack';
describe('TechStackBrick', () => {
describe('rendering', () => {
it('renders the technology name', () => {
render(<TechStackBrick name="TypeScript" />)
expect(screen.getByText('TypeScript')).toBeInTheDocument()
})
})
render(<TechStackBrick name="TypeScript" />);
expect(screen.getByText('TypeScript')).toBeInTheDocument();
});
});
describe('styling', () => {
it('has brutal-border class', () => {
const { container } = render(<TechStackBrick name="React" />)
expect(container.firstChild).toHaveClass('brutal-border')
})
const { container } = render(<TechStackBrick name="React" />);
expect(container.firstChild).toHaveClass('brutal-border');
});
it('has brutal-shadow class', () => {
const { container } = render(<TechStackBrick name="React" />)
expect(container.firstChild).toHaveClass('brutal-shadow')
})
const { container } = render(<TechStackBrick name="React" />);
expect(container.firstChild).toHaveClass('brutal-shadow');
});
it('name span has uppercase and tracking-wide', () => {
render(<TechStackBrick name="Go" />)
const span = screen.getByText('Go')
expect(span).toHaveClass('uppercase', 'tracking-wide')
})
render(<TechStackBrick name="Go" />);
const span = screen.getByText('Go');
expect(span).toHaveClass('uppercase', 'tracking-wide');
});
it('applies custom className', () => {
const { container } = render(<TechStackBrick name="Go" className="w-full" />)
expect(container.firstChild).toHaveClass('w-full')
})
})
})
const { container } = render(<TechStackBrick name="Go" className="w-full" />);
expect(container.firstChild).toHaveClass('w-full');
});
});
});
describe('TechStackGrid', () => {
describe('rendering', () => {
it('renders all skill names', () => {
render(<TechStackGrid skills={['React', 'TypeScript', 'Go']} />)
expect(screen.getByText('React')).toBeInTheDocument()
expect(screen.getByText('TypeScript')).toBeInTheDocument()
expect(screen.getByText('Go')).toBeInTheDocument()
})
render(<TechStackGrid skills={['React', 'TypeScript', 'Go']} />);
expect(screen.getByText('React')).toBeInTheDocument();
expect(screen.getByText('TypeScript')).toBeInTheDocument();
expect(screen.getByText('Go')).toBeInTheDocument();
});
it('renders correct number of bricks', () => {
const { container } = render(<TechStackGrid skills={['A', 'B', 'C']} />)
expect(container.firstChild!.childNodes).toHaveLength(3)
})
const { container } = render(<TechStackGrid skills={['A', 'B', 'C']} />);
expect(container.firstChild!.childNodes).toHaveLength(3);
});
it('renders empty grid with no skills', () => {
const { container } = render(<TechStackGrid skills={[]} />)
expect(container.firstChild!.childNodes).toHaveLength(0)
})
})
const { container } = render(<TechStackGrid skills={[]} />);
expect(container.firstChild!.childNodes).toHaveLength(0);
});
});
describe('layout', () => {
it('has grid class', () => {
const { container } = render(<TechStackGrid skills={['A']} />)
expect(container.firstChild).toHaveClass('grid')
})
const { container } = render(<TechStackGrid skills={['A']} />);
expect(container.firstChild).toHaveClass('grid');
});
it('applies custom className', () => {
const { container } = render(<TechStackGrid skills={[]} className="my-custom" />)
expect(container.firstChild).toHaveClass('my-custom')
})
})
})
const { container } = render(<TechStackGrid skills={[]} className="my-custom" />);
expect(container.firstChild).toHaveClass('my-custom');
});
});
});
src/shared/ui/TechStack/ui/TechStack.tsx
+8 -11
View File
@@ -1,14 +1,14 @@
import { cn } from '$shared/lib'
import { cn } from '$shared/lib';
interface TechStackBrickProps {
/**
* Technology name displayed in the brick
*/
name: string
name: string;
/**
* CSS classes
*/
className?: string
className?: string;
}
/**
@@ -25,18 +25,18 @@ export function TechStackBrick({ name, className }: TechStackBrickProps) {
>
<span className="text-sm uppercase tracking-wide">{name}</span>
</div>
)
);
}
interface TechStackGridProps {
/**
* List of technology names to render as bricks
*/
skills: string[]
skills: string[];
/**
* CSS classes
*/
className?: string
className?: string;
}
/**
@@ -45,14 +45,11 @@ interface TechStackGridProps {
export function TechStackGrid({ skills, className }: TechStackGridProps) {
return (
<div
className={cn(
'grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-4',
className,
)}
className={cn('grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-4', className)}
>
{skills.map((skill, index) => (
<TechStackBrick key={index} name={skill} />
))}
</div>
)
);
}
src/shared/ui/index.ts
+11 -11
View File
@@ -1,17 +1,17 @@
export { Badge } from './Badge'
export type { BadgeVariant } from './Badge'
export { Badge } from './Badge';
export type { BadgeVariant } from './Badge';
export { Button } from './Button'
export type { ButtonVariant, ButtonSize } from './Button'
export { Button } from './Button';
export type { ButtonVariant, ButtonSize } from './Button';
export { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from './Card'
export type { CardBackground } from './Card'
export { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from './Card';
export type { CardBackground } from './Card';
export { Input, Textarea } from './Input'
export { Input, Textarea } from './Input';
export { Section, Container } from './Section'
export type { SectionBackground, ContainerSize } from './Section'
export { Section, Container } from './Section';
export type { SectionBackground, ContainerSize } from './Section';
export { SectionAccordion } from './SectionAccordion'
export { SectionAccordion } from './SectionAccordion';
export { TechStackBrick, TechStackGrid } from './TechStack'
export { TechStackBrick, TechStackGrid } from './TechStack';
src/test/setup.ts
+1 -1
View File
@@ -1 +1 @@
import '@testing-library/jest-dom'
import '@testing-library/jest-dom';
src/widgets/Navigation/index.ts
+4 -4
View File
@@ -1,4 +1,4 @@
export { MobileNav } from './ui/MobileNav'
export { SidebarNav } from './ui/SidebarNav'
export { UtilityBar } from './ui/UtilityBar'
export type { NavItem } from './model/types'
export { MobileNav } from './ui/MobileNav';
export { SidebarNav } from './ui/SidebarNav';
export { UtilityBar } from './ui/UtilityBar';
export type { NavItem } from './model/types';
src/widgets/Navigation/model/types.ts
+4 -4
View File
@@ -2,13 +2,13 @@ export type NavItem = {
/**
* Section HTML id for anchor scrolling
*/
id: string
id: string;
/**
* Display label
*/
label: string
label: string;
/**
* Display number prefix (e.g. "01")
*/
number: string
}
number: string;
};
src/widgets/Navigation/ui/MobileNav.stories.tsx
+6 -6
View File
@@ -1,5 +1,5 @@
import type { Meta, StoryObj } from '@storybook/nextjs-vite'
import { MobileNav } from './MobileNav'
import type { Meta, StoryObj } from '@storybook/nextjs-vite';
import { MobileNav } from './MobileNav';
// MobileNav is lg:hidden — it renders only on mobile viewports.
// Use the viewport toolbar in Storybook to switch to a mobile size to see it.
@@ -11,11 +11,11 @@ const meta: Meta<typeof MobileNav> = {
defaultViewport: 'mobile1',
},
},
}
};
export default meta
export default meta;
type Story = StoryObj<typeof MobileNav>
type Story = StoryObj<typeof MobileNav>;
export const Default: Story = {
args: {
@@ -25,4 +25,4 @@ export const Default: Story = {
{ id: 'contact', label: 'Contact', number: '03' },
],
},
}
};
src/widgets/Navigation/ui/MobileNav.test.tsx
+31 -31
View File
@@ -1,46 +1,46 @@
import { describe, it, expect, vi } from 'vitest'
import { render, screen } from '@testing-library/react'
import userEvent from '@testing-library/user-event'
import { MobileNav } from './MobileNav'
import type { NavItem } from '../model/types'
import { describe, it, expect, vi } from 'vitest';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { MobileNav } from './MobileNav';
import type { NavItem } from '../model/types';
const ITEMS: NavItem[] = [{ id: 'about', label: 'About', number: '01' }]
const ITEMS: NavItem[] = [{ id: 'about', label: 'About', number: '01' }];
describe('MobileNav', () => {
describe('rendering', () => {
it('renders title "allmy.work"', () => {
render(<MobileNav items={ITEMS} />)
expect(screen.getByText('allmy.work')).toBeInTheDocument()
})
render(<MobileNav items={ITEMS} />);
expect(screen.getByText('allmy.work')).toBeInTheDocument();
});
it('renders toggle button with text "Menu" initially', () => {
render(<MobileNav items={ITEMS} />)
expect(screen.getByRole('button', { name: 'Menu' })).toBeInTheDocument()
})
render(<MobileNav items={ITEMS} />);
expect(screen.getByRole('button', { name: 'Menu' })).toBeInTheDocument();
});
it('menu items are hidden initially', () => {
render(<MobileNav items={ITEMS} />)
expect(screen.queryByRole('button', { name: /about/i })).not.toBeInTheDocument()
})
})
render(<MobileNav items={ITEMS} />);
expect(screen.queryByRole('button', { name: /about/i })).not.toBeInTheDocument();
});
});
describe('interactions', () => {
it('click toggle shows item buttons and changes label to "Close"', async () => {
render(<MobileNav items={ITEMS} />)
await userEvent.click(screen.getByRole('button', { name: 'Menu' }))
expect(screen.getByRole('button', { name: 'Close' })).toBeInTheDocument()
expect(screen.getByText('About')).toBeInTheDocument()
})
render(<MobileNav items={ITEMS} />);
await userEvent.click(screen.getByRole('button', { name: 'Menu' }));
expect(screen.getByRole('button', { name: 'Close' })).toBeInTheDocument();
expect(screen.getByText('About')).toBeInTheDocument();
});
it('click item button closes the menu', async () => {
render(<MobileNav items={ITEMS} />)
await userEvent.click(screen.getByRole('button', { name: 'Menu' }))
render(<MobileNav items={ITEMS} />);
await userEvent.click(screen.getByRole('button', { name: 'Menu' }));
// item button label contains number + label text; find by accessible name fragment
const itemBtn = screen.getAllByRole('button').find(b => b.textContent?.includes('About'))
expect(itemBtn).toBeDefined()
await userEvent.click(itemBtn!)
expect(screen.queryByText('Close')).not.toBeInTheDocument()
expect(screen.getByRole('button', { name: 'Menu' })).toBeInTheDocument()
})
})
})
const itemBtn = screen.getAllByRole('button').find((b) => b.textContent?.includes('About'));
expect(itemBtn).toBeDefined();
await userEvent.click(itemBtn!);
expect(screen.queryByText('Close')).not.toBeInTheDocument();
expect(screen.getByRole('button', { name: 'Menu' })).toBeInTheDocument();
});
});
});
src/widgets/Navigation/ui/MobileNav.tsx
+13 -13
View File
@@ -1,32 +1,32 @@
'use client'
'use client';
import { useState } from 'react'
import { cn } from '$shared/lib'
import type { NavItem } from '../model/types'
import { useState } from 'react';
import { cn } from '$shared/lib';
import type { NavItem } from '../model/types';
interface Props {
/**
* Navigation items to render
*/
items: NavItem[]
items: NavItem[];
}
/**
* Mobile navigation overlay, hidden on lg+ screens.
*/
export function MobileNav({ items }: Props) {
const [isOpen, setIsOpen] = useState(false)
const [isOpen, setIsOpen] = useState(false);
/**
* Scrolls to the section by id with a 100px offset, then closes the menu.
*/
function scrollToSection(id: string) {
const el = document.getElementById(id)
const el = document.getElementById(id);
if (el) {
const top = el.getBoundingClientRect().top + window.scrollY - 100
window.scrollTo({ top, behavior: 'smooth' })
const top = el.getBoundingClientRect().top + window.scrollY - 100;
window.scrollTo({ top, behavior: 'smooth' });
}
setIsOpen(false)
setIsOpen(false);
}
return (
@@ -34,7 +34,7 @@ export function MobileNav({ items }: Props) {
<div className="px-6 py-4 flex items-center justify-between">
<h4>allmy.work</h4>
<button
onClick={() => setIsOpen(prev => !prev)}
onClick={() => setIsOpen((prev) => !prev)}
className="brutal-border px-4 py-2 bg-carbon-black text-ochre-clay"
>
{isOpen ? 'Close' : 'Menu'}
@@ -42,7 +42,7 @@ export function MobileNav({ items }: Props) {
</div>
{isOpen && (
<div className="px-6 py-6 brutal-border-top space-y-2 max-h-[80vh] overflow-y-auto">
{items.map(item => (
{items.map((item) => (
<button
key={item.id}
onClick={() => scrollToSection(item.id)}
@@ -62,5 +62,5 @@ export function MobileNav({ items }: Props) {
</div>
)}
</div>
)
);
}
src/widgets/Navigation/ui/SidebarNav.stories.tsx
+6 -6
View File
@@ -1,5 +1,5 @@
import type { Meta, StoryObj } from '@storybook/nextjs-vite'
import { SidebarNav } from './SidebarNav'
import type { Meta, StoryObj } from '@storybook/nextjs-vite';
import { SidebarNav } from './SidebarNav';
// SidebarNav is hidden lg:block — it renders only on desktop viewports.
// Use the viewport toolbar in Storybook to switch to a desktop size to see it.
@@ -12,11 +12,11 @@ const meta: Meta<typeof SidebarNav> = {
defaultViewport: 'desktop',
},
},
}
};
export default meta
export default meta;
type Story = StoryObj<typeof SidebarNav>
type Story = StoryObj<typeof SidebarNav>;
export const Default: Story = {
args: {
@@ -26,4 +26,4 @@ export const Default: Story = {
{ id: 'contact', label: 'Contact', number: '03' },
],
},
}
};
src/widgets/Navigation/ui/SidebarNav.test.tsx
+35 -35
View File
@@ -1,12 +1,12 @@
import { describe, it, expect, vi, beforeEach } from 'vitest'
import { render, screen } from '@testing-library/react'
import { SidebarNav } from './SidebarNav'
import type { NavItem } from '../model/types'
import { describe, it, expect, vi, beforeEach } from 'vitest';
import { render, screen } from '@testing-library/react';
import { SidebarNav } from './SidebarNav';
import type { NavItem } from '../model/types';
const ITEMS: NavItem[] = [
{ id: 'bio', label: 'Bio', number: '01' },
{ id: 'work', label: 'Work', number: '02' },
]
];
beforeEach(() => {
global.IntersectionObserver = vi.fn(function () {
@@ -14,49 +14,49 @@ beforeEach(() => {
observe: vi.fn(),
disconnect: vi.fn(),
unobserve: vi.fn(),
}
}) as unknown as typeof IntersectionObserver
})
};
}) as unknown as typeof IntersectionObserver;
});
describe('SidebarNav', () => {
describe('rendering', () => {
it('renders a nav element', () => {
render(<SidebarNav items={ITEMS} />)
expect(screen.getByRole('navigation')).toBeInTheDocument()
})
render(<SidebarNav items={ITEMS} />);
expect(screen.getByRole('navigation')).toBeInTheDocument();
});
it('renders "Index" heading', () => {
render(<SidebarNav items={ITEMS} />)
expect(screen.getByText('Index')).toBeInTheDocument()
})
render(<SidebarNav items={ITEMS} />);
expect(screen.getByText('Index')).toBeInTheDocument();
});
it('renders "Digital Monograph" subtitle', () => {
render(<SidebarNav items={ITEMS} />)
expect(screen.getByText('Digital Monograph')).toBeInTheDocument()
})
render(<SidebarNav items={ITEMS} />);
expect(screen.getByText('Digital Monograph')).toBeInTheDocument();
});
it('renders each item label and number', () => {
render(<SidebarNav items={ITEMS} />)
expect(screen.getByText('Bio')).toBeInTheDocument()
expect(screen.getByText('01')).toBeInTheDocument()
expect(screen.getByText('Work')).toBeInTheDocument()
expect(screen.getByText('02')).toBeInTheDocument()
})
render(<SidebarNav items={ITEMS} />);
expect(screen.getByText('Bio')).toBeInTheDocument();
expect(screen.getByText('01')).toBeInTheDocument();
expect(screen.getByText('Work')).toBeInTheDocument();
expect(screen.getByText('02')).toBeInTheDocument();
});
it('renders "Quick Links" section', () => {
render(<SidebarNav items={ITEMS} />)
expect(screen.getByText('Quick Links')).toBeInTheDocument()
})
render(<SidebarNav items={ITEMS} />);
expect(screen.getByText('Quick Links')).toBeInTheDocument();
});
it('renders Email quick link', () => {
render(<SidebarNav items={ITEMS} />)
expect(screen.getByRole('link', { name: 'Email' })).toBeInTheDocument()
})
render(<SidebarNav items={ITEMS} />);
expect(screen.getByRole('link', { name: 'Email' })).toBeInTheDocument();
});
it('renders a button for each item', () => {
render(<SidebarNav items={ITEMS} />)
const buttons = screen.getAllByRole('button')
expect(buttons.length).toBeGreaterThanOrEqual(ITEMS.length)
})
})
})
render(<SidebarNav items={ITEMS} />);
const buttons = screen.getAllByRole('button');
expect(buttons.length).toBeGreaterThanOrEqual(ITEMS.length);
});
});
});
src/widgets/Navigation/ui/SidebarNav.tsx
+36 -28
View File
@@ -1,50 +1,50 @@
'use client'
'use client';
import { useState, useEffect } from 'react'
import { cn } from '$shared/lib'
import type { NavItem } from '../model/types'
import { useState, useEffect } from 'react';
import { cn } from '$shared/lib';
import type { NavItem } from '../model/types';
interface Props {
/**
* Navigation items to render
*/
items: NavItem[]
items: NavItem[];
}
/**
* Fixed sidebar navigation, visible on lg+ screens.
*/
export function SidebarNav({ items }: Props) {
const [activeSection, setActiveSection] = useState('bio')
const [activeSection, setActiveSection] = useState('bio');
useEffect(() => {
const observer = new IntersectionObserver(
entries => {
entries.forEach(entry => {
(entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
setActiveSection(entry.target.id)
setActiveSection(entry.target.id);
}
})
});
},
{ rootMargin: '-20% 0px -70% 0px', threshold: 0 },
)
);
items.forEach(item => {
const el = document.getElementById(item.id)
if (el) observer.observe(el)
})
items.forEach((item) => {
const el = document.getElementById(item.id);
if (el) observer.observe(el);
});
return () => observer.disconnect()
}, [items])
return () => observer.disconnect();
}, [items]);
/**
* Scrolls to the section by id with a 40px offset.
*/
function scrollToSection(id: string) {
const el = document.getElementById(id)
const el = document.getElementById(id);
if (el) {
const top = el.getBoundingClientRect().top + window.scrollY - 40
window.scrollTo({ top, behavior: 'smooth' })
const top = el.getBoundingClientRect().top + window.scrollY - 40;
window.scrollTo({ top, behavior: 'smooth' });
}
}
@@ -58,8 +58,8 @@ export function SidebarNav({ items }: Props) {
</div>
</div>
{items.map(item => {
const isActive = activeSection === item.id
{items.map((item) => {
const isActive = activeSection === item.id;
return (
<button
key={item.id}
@@ -76,19 +76,27 @@ export function SidebarNav({ items }: Props) {
<span className="font-heading text-xl font-black">{item.label}</span>
</div>
</button>
)
);
})}
<div className="mt-12 pt-12 brutal-border-top">
<p className="text-sm uppercase tracking-wider mb-4 opacity-60">Quick Links</p>
<div className="space-y-3">
<a href="mailto:hello@allmy.work" className="block">Email</a>
<a href="https://linkedin.com" className="block">LinkedIn</a>
<a href="https://instagram.com" className="block">Instagram</a>
<a href="https://are.na" className="block">Are.na</a>
<a href="mailto:hello@allmy.work" className="block">
Email
</a>
<a href="https://linkedin.com" className="block">
LinkedIn
</a>
<a href="https://instagram.com" className="block">
Instagram
</a>
<a href="https://are.na" className="block">
Are.na
</a>
</div>
</div>
</div>
</nav>
)
);
}
src/widgets/Navigation/ui/UtilityBar.stories.tsx
+6 -6
View File
@@ -1,5 +1,5 @@
import type { Meta, StoryObj } from '@storybook/nextjs-vite'
import { UtilityBar } from './UtilityBar'
import type { Meta, StoryObj } from '@storybook/nextjs-vite';
import { UtilityBar } from './UtilityBar';
const meta: Meta<typeof UtilityBar> = {
title: 'Widgets/UtilityBar',
@@ -11,10 +11,10 @@ const meta: Meta<typeof UtilityBar> = {
</div>
),
],
}
};
export default meta
export default meta;
type Story = StoryObj<typeof UtilityBar>
type Story = StoryObj<typeof UtilityBar>;
export const Default: Story = {}
export const Default: Story = {};
src/widgets/Navigation/ui/UtilityBar.test.tsx
+20 -20
View File
@@ -1,30 +1,30 @@
import { describe, it, expect } from 'vitest'
import { render, screen } from '@testing-library/react'
import { UtilityBar } from './UtilityBar'
import { describe, it, expect } from 'vitest';
import { render, screen } from '@testing-library/react';
import { UtilityBar } from './UtilityBar';
describe('UtilityBar', () => {
describe('rendering', () => {
it('renders "Contact" label', () => {
render(<UtilityBar />)
expect(screen.getByText('Contact')).toBeInTheDocument()
})
render(<UtilityBar />);
expect(screen.getByText('Contact')).toBeInTheDocument();
});
it('renders email link with correct href', () => {
render(<UtilityBar />)
const link = screen.getByRole('link', { name: 'hello@allmy.work' })
expect(link).toBeInTheDocument()
expect(link).toHaveAttribute('href', 'mailto:hello@allmy.work')
})
render(<UtilityBar />);
const link = screen.getByRole('link', { name: 'hello@allmy.work' });
expect(link).toBeInTheDocument();
expect(link).toHaveAttribute('href', 'mailto:hello@allmy.work');
});
it('renders "Download CV" button', () => {
render(<UtilityBar />)
expect(screen.getByRole('button', { name: /download cv/i })).toBeInTheDocument()
})
render(<UtilityBar />);
expect(screen.getByRole('button', { name: /download cv/i })).toBeInTheDocument();
});
it('Download CV button has primary variant class', () => {
render(<UtilityBar />)
const btn = screen.getByRole('button', { name: /download cv/i })
expect(btn).toHaveClass('bg-burnt-oxide')
})
})
})
render(<UtilityBar />);
const btn = screen.getByRole('button', { name: /download cv/i });
expect(btn).toHaveClass('bg-burnt-oxide');
});
});
});
src/widgets/Navigation/ui/UtilityBar.tsx
+5 -8
View File
@@ -1,6 +1,6 @@
'use client'
'use client';
import { Button } from '$shared/ui'
import { Button } from '$shared/ui';
/**
* Fixed bottom utility bar with contact info and CV download.
@@ -10,7 +10,7 @@ export function UtilityBar() {
* Handles CV download action.
*/
function handleDownloadCV() {
console.log('Downloading CV...')
console.log('Downloading CV...');
}
return (
@@ -18,10 +18,7 @@ export function UtilityBar() {
<div className="max-w-[2560px] mx-auto px-6 md:px-12 lg:px-16 py-4 flex items-center justify-between">
<div className="flex items-center gap-4">
<span className="text-sm uppercase tracking-wider">Contact</span>
<a
href="mailto:hello@allmy.work"
className="text-base hover:text-burnt-oxide transition-colors"
>
<a href="mailto:hello@allmy.work" className="text-base hover:text-burnt-oxide transition-colors">
hello@allmy.work
</a>
</div>
@@ -30,5 +27,5 @@ export function UtilityBar() {
</Button>
</div>
</div>
)
);
}
src/widgets/index.ts
+1 -1
View File
@@ -1 +1 @@
export * from './Navigation'
export * from './Navigation';