Add Prettier and move all components to TSX

.editorconfig

@@ -0,0 +1,13 @@
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+max_line_length = 120
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false

.prettierrc.yaml

@@ -0,0 +1,4 @@
+# Specify only the rules that cannot be defined within the .editorconfig file as Prettier inherits config from there.
+# See: https://prettier.io/docs/en/configuration.html#editorconfig
+
+singleQuote: true

.vscode/settings.json

@@ -0,0 +1,10 @@
+{
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "typescript.enablePromptUseWorkspaceTsdk": true,
+  "[typescript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[typescriptreact]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  }
+}

astro.config.mjs

@@ -1,4 +1,7 @@
 import { defineConfig } from 'astro/config';
+import react from '@astrojs/react';
 
 // https://astro.build/config
-export default defineConfig({});
+export default defineConfig({
+  integrations: [react()],
+});

package.json

@@ -11,7 +11,14 @@
     "astro": "astro"
   },
   "devDependencies": {
+    "@astrojs/react": "^1.0.0",
+    "@types/react": "^18.0.17",
+    "@types/react-dom": "^18.0.6",
     "astro": "^1.0.8",
-    "sass": "^1.54.5"
+    "prettier": "^2.7.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "sass": "^1.54.5",
+    "typescript-plugin-css-modules": "^3.4.0"
   }
 }

src/components/section-card.astro

@@ -1,11 +0,0 @@
-<style>
-  .section-card {
-    padding: 32px;
-    background: var(--white);
-    border-radius: 16px;
-    box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1),
-      0px 4px 6px -4px rgba(0, 0, 0, 0.1);
-  }
-</style>
-
-<div class="section-card"><slot /></div>

src/components/section-card/index.ts

@@ -0,0 +1 @@
+export * from './section-card';

src/components/section-card/section-card.module.scss

@@ -0,0 +1,6 @@
+.sectionCard {
+  padding: 32px;
+  background: var(--white);
+  border-radius: 16px;
+  box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1), 0px 4px 6px -4px rgba(0, 0, 0, 0.1);
+}

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

@@ -0,0 +1,6 @@
+import type { ReactNode } from 'react';
+import styles from './section-card.module.scss';
+
+export const SectionCard = ({ children }: { children: ReactNode }) => (
+  <div className={styles.sectionCard}>{children}</div>
+);

src/components/typography/content.astro

@@ -1,10 +0,0 @@
-<style>
-  .content {
-    font-weight: 400;
-    font-size: 16px;
-    line-height: 28px;
-    color: var(--text-secondary);
-  }
-</style>
-
-<p class="content"><slot /></p>

src/components/typography/content/content.module.scss

@@ -0,0 +1,6 @@
+.content {
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 28px;
+  color: var(--text-secondary);
+}

src/components/typography/content/content.tsx

@@ -0,0 +1,3 @@
+import styles from './content.module.scss';
+
+export const Content = ({ children }: { children: string }) => <p className={styles.content}>{children}</p>;

src/components/typography/content/index.ts

@@ -0,0 +1 @@
+export * from './content';

src/components/typography/item-description.astro

@@ -1,10 +0,0 @@
-<style>
-  .item-decription {
-    font-weight: 400;
-    font-size: 14px;
-    line-height: 20px;
-    color: var(--text-secondary);
-  }
-</style>
-
-<p class="item-decription"><slot /></p>

src/components/typography/item-description/index.ts

@@ -0,0 +1 @@
+export * from './item-description';

src/components/typography/item-description/item-description.module.scss

@@ -0,0 +1,6 @@
+.itemDescription {
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 20px;
+  color: var(--text-secondary);
+}

src/components/typography/item-description/item-description.tsx

@@ -0,0 +1,5 @@
+import styles from './item-description.module.scss';
+
+export const ItemDescription = ({ children }: { children: string }) => (
+  <p className={styles.itemDescription}>{children}</p>
+);

src/components/typography/item-subtitle.astro

@@ -1,10 +0,0 @@
-<style>
-  .item-subtitle {
-    font-weight: 500;
-    font-size: 14px;
-    line-height: 20px;
-    color: var(--text-primary);
-  }
-</style>
-
-<p class="item-subtitle"><slot /></p>

src/components/typography/item-subtitle/index.ts

@@ -0,0 +1 @@
+export * from './item-subtitle';

src/components/typography/item-subtitle/item-subtitle.module.scss

@@ -0,0 +1,6 @@
+.itemSubtitle {
+  font-weight: 500;
+  font-size: 14px;
+  line-height: 20px;
+  color: var(--text-primary);
+}

src/components/typography/item-subtitle/item-subtitle.tsx

@@ -0,0 +1,3 @@
+import styles from './item-subtitle.module.scss';
+
+export const ItemSubtitle = ({ children }: { children: string }) => <p className={styles.itemSubtitle}>{children}</p>;

src/components/typography/item-title.astro

@@ -1,10 +0,0 @@
-<style>
-  .item-title {
-    font-weight: 800;
-    font-size: 20px;
-    line-height: 28px;
-    color: var(--text-title);
-  }
-</style>
-
-<h4 class="item-title"><slot /></h4>

src/components/typography/item-title/index.ts

@@ -0,0 +1 @@
+export * from './item-title';

src/components/typography/item-title/item-title.module.scss

@@ -0,0 +1,6 @@
+.itemTitle {
+  font-weight: 800;
+  font-size: 20px;
+  line-height: 28px;
+  color: var(--text-title);
+}

src/components/typography/item-title/item-title.tsx

@@ -0,0 +1,3 @@
+import styles from './item-Title.module.scss';
+
+export const ItemTitle = ({ children }: { children: string }) => <h4 className={styles.itemTitle}>{children}</h4>;

src/components/typography/key-value.astro

@@ -1,25 +0,0 @@
----
-const { key, value } = Astro.props;
----
-
-<style lang="scss">
-  .key-value {
-    font-size: 16px;
-    line-height: 24px;
-
-    :first-child {
-      font-weight: 500;
-      color: var(--text-primary);
-    }
-
-    :last-child {
-      font-weight: 400;
-      color: var(--text-secondary);
-    }
-  }
-</style>
-
-<div class="key-value">
-  <span>{key}:</span>
-  <span>{value}</span>
-</div>

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

@@ -0,0 +1 @@
+export * from './labelled-value';

src/components/typography/labelled-value/labelled-value.module.scss

@@ -0,0 +1,18 @@
+.labelledValue {
+  font-size: 16px;
+  line-height: 24px;
+
+  & > * + * {
+    margin-left: 4px;
+  }
+
+  :first-child {
+    font-weight: 500;
+    color: var(--text-primary);
+  }
+
+  :last-child {
+    font-weight: 400;
+    color: var(--text-secondary);
+  }
+}

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

@@ -0,0 +1,8 @@
+import styles from './labelled-value.module.scss';
+
+export const LabelledValue = ({ label, value }: { label: string; value: string }) => (
+  <div className={styles.labelledValue}>
+    <span>{label}:</span>
+    <span>{value}</span>
+  </div>
+);

src/components/typography/main-subtitle.astro

@@ -1,10 +0,0 @@
-<style>
-  .main-subtitle {
-    font-weight: 500;
-    font-size: 18px;
-    line-height: 28px;
-    color: var(--text-primary);
-  }
-</style>
-
-<h2 class="main-subtitle"><slot /></h2>

src/components/typography/main-subtitle/index.ts

@@ -0,0 +1 @@
+export * from './main-subtitle';

src/components/typography/main-subtitle/main-subtitle.module.scss

@@ -0,0 +1,6 @@
+.mainSubtitle {
+  font-weight: 500;
+  font-size: 18px;
+  line-height: 28px;
+  color: var(--text-primary);
+}

src/components/typography/main-subtitle/main-subtitle.tsx

@@ -0,0 +1,3 @@
+import styles from './main-subtitle.module.scss';
+
+export const MainSubtitle = ({ children }: { children: string }) => <h2 className={styles.mainSubtitle}>{children}</h2>;

src/components/typography/main-title.astro

@@ -1,10 +0,0 @@
-<style>
-  .main-title {
-    font-weight: 800;
-    font-size: 36px;
-    line-height: 40px;
-    color: var(--text-title);
-  }
-</style>
-
-<h1 class="main-title"><slot /></h1>

src/components/typography/main-title/index.ts

@@ -0,0 +1 @@
+export * from './main-title';

src/components/typography/main-title/main-title.module.scss

@@ -0,0 +1,6 @@
+.mainTitle {
+  font-weight: 800;
+  font-size: 36px;
+  line-height: 40px;
+  color: var(--text-title);
+}

src/components/typography/main-title/main-title.tsx

@@ -0,0 +1,3 @@
+import styles from './main-title.module.scss';
+
+export const MainTitle = ({ children }: { children: string }) => <h1 className={styles.mainTitle}>{children}</h1>;

src/components/typography/section-subtitle.astro

@@ -1,10 +0,0 @@
-<style>
-  .section-subtitle {
-    font-weight: 800;
-    font-size: 18px;
-    line-height: 28px;
-    color: var(--text-title);
-  }
-</style>
-
-<h3 class="section-subtitle"><slot /></h3>

src/components/typography/section-subtitle/index.ts

@@ -0,0 +1 @@
+export * from './section-subtitle';

src/components/typography/section-subtitle/section-subtitle.module.scss

@@ -0,0 +1,6 @@
+.sectionSubtitle {
+  font-weight: 800;
+  font-size: 18px;
+  line-height: 28px;
+  color: var(--text-title);
+}

src/components/typography/section-subtitle/section-subtitle.tsx

@@ -0,0 +1,5 @@
+import styles from './section-subtitle.module.scss';
+
+export const SectionSubtitle = ({ children }: { children: string }) => (
+  <h3 className={styles.sectionSubtitle}>{children}</h3>
+);

src/components/typography/section-title.astro

@@ -1,10 +0,0 @@
-<style>
-  .section-title {
-    font-weight: 800;
-    font-size: 36px;
-    line-height: 40px;
-    color: var(--text-title);
-  }
-</style>
-
-<h2 class="section-title"><slot /></h2>

src/components/typography/section-title/index.ts

@@ -0,0 +1 @@
+export * from './section-title';

src/components/typography/section-title/section-title.module.scss

@@ -0,0 +1,6 @@
+.sectionTitle {
+  font-weight: 800;
+  font-size: 32px;
+  line-height: 40px;
+  color: var(--text-title);
+}

src/components/typography/section-title/section-title.tsx

@@ -0,0 +1,3 @@
+import styles from './section-title.module.scss';
+
+export const SectionTitle = ({ children }: { children: string }) => <h2 className={styles.sectionTitle}>{children}</h2>;

src/pages/index.astro

@@ -1,53 +1,53 @@
 ---
-import SectionCard from "../components/section-card.astro";
+import { SectionCard } from '../components/section-card';
-import SectionTitle from "../components/typography/section-title.astro";
+import { SectionTitle } from '../components/typography/section-title';
-import SectionSubtitle from "../components/typography/section-subtitle.astro";
+import { SectionSubtitle } from '../components/typography/section-subtitle';
-import ItemTitle from "../components/typography/item-title.astro";
+import { ItemTitle } from '../components/typography/item-title';
-import ItemSubtitle from "../components/typography/item-subtitle.astro";
+import { ItemSubtitle } from '../components/typography/item-subtitle';
-import Content from "../components/typography/content.astro";
+import { Content } from '../components/typography/content';
-import ItemDescription from "../components/typography/item-description.astro";
+import { ItemDescription } from '../components/typography/item-description';
-import MainTitle from "../components/typography/main-title.astro";
+import { MainTitle } from '../components/typography/main-title';
-import KeyValue from "../components/typography/key-value.astro";
+import { LabelledValue } from '../components/typography/labelled-value';
 ---
 
 <!DOCTYPE html>
 <html lang="en">
-	<head>
+  <head>
-		<meta charset="UTF-8" />
+    <meta charset="UTF-8" />
-		<meta name="viewport" content="width=device-width" />
+    <meta name="viewport" content="width=device-width" />
-		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-		<meta name="generator" content={Astro.generator} />
+    <meta name="generator" content={Astro.generator} />
-		<title>Welcome to Astro</title>
+    <title>Welcome to Astro</title>
-	</head>
+  </head>
-	<body>
+  <body>
-		<main>
+    <main>
-			<SectionCard>
+      <SectionCard>
-				<MainTitle>Main title</MainTitle>
+        <MainTitle>Main title</MainTitle>
-				<SectionTitle>Section title</SectionTitle>
+        <SectionTitle>Section title</SectionTitle>
-				<SectionSubtitle>Section subtitle</SectionSubtitle>
+        <SectionSubtitle>Section subtitle</SectionSubtitle>
-				<ItemTitle>Item title</ItemTitle>
+        <ItemTitle>Item title</ItemTitle>
-				<ItemSubtitle>Item subtitle</ItemSubtitle>
+        <ItemSubtitle>Item subtitle</ItemSubtitle>
-				<ItemDescription>Item description</ItemDescription>
+        <ItemDescription>Item description</ItemDescription>
-				<Content>Content</Content>
+        <Content>Content</Content>
-				<KeyValue key="Phone" value="+48 604 343 212" />
+        <LabelledValue label="Phone" value="+48 604 343 212" />
-			</SectionCard>
+      </SectionCard>
-		</main>
+    </main>
-		<style>
+    <style>
-			:root {
+      :root {
-				--text-title: #111827;
+        --text-title: #111827;
-				--text-primary: #374151;
+        --text-primary: #374151;
-				--text-secondary: #6b7280;
+        --text-secondary: #6b7280;
-				--white: #fff;
+        --white: #fff;
-			}
+      }
 
-			html {
+      html {
-				font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,
+        font-family: system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
-					"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+          'Segoe UI Symbol';
-			}
+      }
 
-			body {
+      body {
-				margin: 0;
+        margin: 0;
-			}
+      }
-		</style>
+    </style>
-	</body>
+  </body>
 </html>

tsconfig.json

@@ -28,6 +28,8 @@
     // Force the usage of the indexed syntax to access fields declared using an index signature.
     "noUncheckedIndexedAccess": true,
     // Report an error when the value `undefined` is given to an optional property that doesn't specify `undefined` as a valid value.
-    "exactOptionalPropertyTypes": true
+    "exactOptionalPropertyTypes": true,
+    // Enable intellisense for imports from CSS Modules.
+    "plugins": [{ "name": "typescript-plugin-css-modules" }]
   }
 }