Move all components to Astro

src/components/atoms/button.astro

@@ -0,0 +1,15 @@
+---
+export interface Props extends astroHTML.JSX.ButtonHTMLAttributes {}
+
+const props = Astro.props;
+---
+
+<button
+  type="button"
+  {...props}
+  class:list={[
+    'inline-flex items-center px-4 h-10 text-base font-medium rounded-md shadow-sm text-white bg-primary-600 hover:bg-primary-700 active:translate-y-px focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500',
+    props.class,
+  ]}
+  ><slot />
+</button>

src/components/atoms/button/button.stories.tsx

@@ -1,17 +0,0 @@
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
-
-import * as C from './button';
-
-export default {
-  title: 'Button',
-  component: C.Button,
-  argTypes: {
-    onClick: { action: 'onClick' },
-  },
-} as ComponentMeta<typeof C.Button>;
-
-export const Button: ComponentStory<typeof C.Button> = (args) => <C.Button {...args} />;
-
-Button.args = {
-  children: 'Button text',
-};

src/components/atoms/button/button.tsx

@@ -1,15 +0,0 @@
-import clsx from 'clsx';
-import type { ComponentPropsWithoutRef } from 'react';
-
-interface ButtonProps extends ComponentPropsWithoutRef<'button'> {}
-
-export const Button = ({ className, ...props }: ButtonProps) => (
-  <button
-    type="button"
-    className={clsx(
-      'inline-flex items-center px-4 h-10 text-base font-medium rounded-md shadow-sm text-white bg-primary-600 hover:bg-primary-700 active:translate-y-px focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500',
-      className
-    )}
-    {...props}
-  />
-);

src/components/atoms/button/index.ts

@@ -1 +0,0 @@
-export { Button } from './button';

src/components/atoms/labelled-value.astro

@@ -0,0 +1,13 @@
+---
+export interface Props extends astroHTML.JSX.HTMLAttributes {
+  label: string;
+  value: string;
+}
+
+const { label, value, ...props } = Astro.props;
+---
+
+<div {...props} class:list={['text-base space-x-1', props.class]}>
+  <span class="font-medium text-gray-700">{label}:</span>
+  <span class="font-normal text-gray-500">{value}</span>
+</div>

src/components/atoms/labelled-value/index.ts

@@ -1 +0,0 @@
-export { LabelledValue } from './labelled-value';

src/components/atoms/labelled-value/labelled-value.stories.tsx

@@ -1,15 +0,0 @@
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
-
-import * as C from './labelled-value';
-
-export default {
-  title: 'LabelledValue',
-  component: C.LabelledValue,
-} as ComponentMeta<typeof C.LabelledValue>;
-
-export const LabelledValue: ComponentStory<typeof C.LabelledValue> = (args) => <C.LabelledValue {...args} />;
-
-LabelledValue.args = {
-  label: 'Label',
-  children: 'Value',
-};

src/components/atoms/labelled-value/labelled-value.tsx

@@ -1,13 +0,0 @@
-import clsx from 'clsx';
-import type { ComponentPropsWithoutRef } from 'react';
-
-interface LabelledValueProps extends ComponentPropsWithoutRef<'div'> {
-  label: string;
-}
-
-export const LabelledValue = ({ label, children, className, ...props }: LabelledValueProps) => (
-  <div className={clsx('text-base space-x-1', className)} {...props}>
-    <span className="font-medium text-gray-700">{label}:</span>
-    <span className="font-normal text-gray-500">{children}</span>
-  </div>
-);

src/components/atoms/section-card.astro

@@ -0,0 +1,7 @@
+---
+export interface Props extends astroHTML.JSX.HTMLAttributes {}
+
+const props = Astro.props;
+---
+
+<div {...props} class:list={['p-8 bg-white rounded-2xl shadow-lg', props.class]}><slot /></div>

src/components/atoms/section-card/index.ts

@@ -1 +0,0 @@
-export { SectionCard } from './section-card';

src/components/atoms/section-card/section-card.stories.tsx

@@ -1,14 +0,0 @@
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
-
-import * as C from './section-card';
-
-export default {
-  title: 'SectionCard',
-  component: C.SectionCard,
-} as ComponentMeta<typeof C.SectionCard>;
-
-export const SectionCard: ComponentStory<typeof C.SectionCard> = (args) => <C.SectionCard {...args} />;
-
-SectionCard.args = {
-  children: 'Card content',
-};

src/components/atoms/section-card/section-card.tsx

@@ -1,8 +0,0 @@
-import clsx from 'clsx';
-import type { ComponentPropsWithoutRef } from 'react';
-
-interface SectionCardProps extends ComponentPropsWithoutRef<'div'> {}
-
-export const SectionCard = ({ className, ...props }: SectionCardProps) => (
-  <div className={clsx('p-8 bg-white rounded-2xl shadow-lg', className)} {...props} />
-);

src/components/atoms/typography.astro

@@ -1,6 +1,4 @@
-import clsx from 'clsx';
+---
-import type { ComponentPropsWithoutRef } from 'react';
-
 type TypographyVariant =
   | 'item-title'
   | 'item-subtitle'
@@ -12,10 +10,6 @@ type TypographyVariant =
   | 'section-subtitle'
   | 'paragraph';
 
-interface TypographyProps extends ComponentPropsWithoutRef<'div'> {
-  variant?: TypographyVariant;
-}
-
 const variantToElement = {
   'main-title': 'h1',
   'main-subtitle': 'h2',
@@ -40,8 +34,12 @@ const variantToClassName = {
   paragraph: 'text-base leading-relaxed font-normal text-gray-500',
 };
 
-export const Typography = ({ variant = 'paragraph', className, ...props }: TypographyProps) => {
+export interface Props extends Omit<astroHTML.JSX.HTMLAttributes, 'slot'> {
-  const Element = variantToElement[variant];
+  variant?: TypographyVariant;
+}
 
-  return <Element className={clsx(variantToClassName[variant], className)} {...props} />;
+const { variant = 'paragraph', ...props } = Astro.props;
-};
+const Element = variantToElement[variant];
+---
+
+<Element {...props} class:list={[variantToClassName[variant], props.class]}><slot /></Element>

src/components/atoms/typography/index.ts

@@ -1 +0,0 @@
-export { Typography } from './typography';

src/components/atoms/typography/typography.stories.tsx

@@ -1,15 +0,0 @@
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
-
-import * as C from './typography';
-
-export default {
-  title: 'Typography',
-  component: C.Typography,
-} as ComponentMeta<typeof C.Typography>;
-
-export const Typography: ComponentStory<typeof C.Typography> = (args) => <C.Typography {...args} />;
-
-Typography.args = {
-  children: 'Typography text',
-  variant: 'paragraph',
-};

src/components/sections/experience-section.astro

@@ -0,0 +1,8 @@
+---
+import SectionCard from '@/atoms/section-card.astro';
+import type { ExperienceSection } from '@/types/experience-section';
+
+export interface Props extends ExperienceSection {}
+---
+
+<SectionCard>Experience section</SectionCard>

src/components/sections/experience/experience-section.tsx

@@ -1,4 +0,0 @@
-import { SectionCard } from '@/atoms/section-card';
-import type { ExperienceSection as ExperienceSectionProps } from '@/types/experience-section';
-
-export const ExperienceSection = (props: ExperienceSectionProps) => <SectionCard>Experience section</SectionCard>;

src/components/sections/experience/index.ts

@@ -1 +0,0 @@
-export { ExperienceSection } from './experience-section';

src/components/sections/favorites-section.astro

@@ -0,0 +1,8 @@
+---
+import SectionCard from '@/atoms/section-card.astro';
+import type { FavoritesSection } from '@/types/favorites-section';
+
+export interface Props extends FavoritesSection {}
+---
+
+<SectionCard>Favorites section</SectionCard>

src/components/sections/favorites/favorites-section.tsx

@@ -1,4 +0,0 @@
-import { SectionCard } from '@/atoms/section-card';
-import type { FavoritesSection as FavoritesSectionProps } from '@/types/favorites-section';
-
-export const FavoritesSection = (props: FavoritesSectionProps) => <SectionCard>Favorites section</SectionCard>;

src/components/sections/favorites/index.ts

@@ -1 +0,0 @@
-export { FavoritesSection } from './favorites-section';

src/components/sections/main-section.astro

@@ -0,0 +1,8 @@
+---
+import SectionCard from '@/atoms/section-card.astro';
+import type { MainSection } from '@/types/main-section';
+
+export interface Props extends MainSection {}
+---
+
+<SectionCard>Main section</SectionCard>

src/components/sections/main/index.ts

@@ -1 +0,0 @@
-export { MainSection } from './main-section';

src/components/sections/main/main-section.tsx

@@ -1,4 +0,0 @@
-import { SectionCard } from '@/atoms/section-card';
-import type { MainSection as MainSectionProps } from '@/types/main-section';
-
-export const MainSection = (props: MainSectionProps) => <SectionCard>Main section</SectionCard>;

src/components/sections/portfolio-section.astro

@@ -0,0 +1,8 @@
+---
+import SectionCard from '@/atoms/section-card.astro';
+import type { PortfolioSection } from '@/types/portfolio-section';
+
+export interface Props extends PortfolioSection {}
+---
+
+<SectionCard>Portfolio section</SectionCard>

src/components/sections/portfolio/index.ts

@@ -1 +0,0 @@
-export { PortfolioSection } from './portfolio-section';

src/components/sections/portfolio/portfolio-section.tsx

@@ -1,4 +0,0 @@
-import { SectionCard } from '@/atoms/section-card';
-import type { PortfolioSection as PortfolioSectionProps } from '@/types/portfolio-section';
-
-export const PortfolioSection = (props: PortfolioSectionProps) => <SectionCard>Portfolio section</SectionCard>;

src/components/sections/skills-section.astro

@@ -0,0 +1,8 @@
+---
+import SectionCard from '@/atoms/section-card.astro';
+import type { SkillsSection } from '@/types/skills-section';
+
+export interface Props extends SkillsSection {}
+---
+
+<SectionCard>Skills section</SectionCard>

src/components/sections/skills/index.ts

@@ -1 +0,0 @@
-export { SkillsSection } from './skills-section';

src/components/sections/skills/skills-section.tsx

@@ -1,4 +0,0 @@
-import { SectionCard } from '@/atoms/section-card';
-import type { SkillsSection as SkillsSectionProps } from '@/types/skills-section';
-
-export const SkillsSection = (props: SkillsSectionProps) => <SectionCard>Skills section</SectionCard>;

src/components/sections/testimonials-section.astro

@@ -0,0 +1,8 @@
+---
+import SectionCard from '@/atoms/section-card.astro';
+import type { TestimonialsSection } from '@/types/testimonials-section';
+
+export interface Props extends TestimonialsSection {}
+---
+
+<SectionCard>Testimonials section</SectionCard>

src/components/sections/testimonials/index.ts

@@ -1 +0,0 @@
-export { TestimonialsSection } from './testimonials-section';

src/components/sections/testimonials/testimonials-section.tsx

@@ -1,4 +0,0 @@
-import { SectionCard } from '@/atoms/section-card';
-import type { TestimonialsSection as TestimonialsSectionProps } from '@/types/testimonials-section';
-
-export const TestimonialsSection = (props: TestimonialsSectionProps) => <SectionCard>Testimonials section</SectionCard>;

src/pages/index.astro

@@ -1,10 +1,10 @@
 ---
-import { ExperienceSection } from '@/sections/experience';
+import ExperienceSection from '@/sections/experience-section.astro';
-import { FavoritesSection } from '@/sections/favorites';
+import FavoritesSection from '@/sections/favorites-section.astro';
-import { MainSection } from '@/sections/main';
+import MainSection from '@/sections/main-section.astro';
-import { PortfolioSection } from '@/sections/portfolio';
+import PortfolioSection from '@/sections/portfolio-section.astro';
-import { SkillsSection } from '@/sections/skills';
+import SkillsSection from '@/sections/skills-section.astro';
-import { TestimonialsSection } from '@/sections/testimonials';
+import TestimonialsSection from '@/sections/testimonials-section.astro';
 import { data } from '../data';
 ---