Components: Add <Heading/> component.

This also fixes `scss`/`css` support and removes support for the dated
`commonjs` format that shouldn't be used by anyone anymore.

.changeset/neat-garlics-suffer.md

@@ -0,0 +1,5 @@
+---
+'@nordcom/nordstar-heading': patch
+---
+
+Add initial `<Heading/>` component.

.changeset/selfish-peaches-type.md

@@ -0,0 +1,10 @@
+---
+'@nordcom/nordstar-heading': patch
+'@nordcom/nordstar-card': patch
+'@nordcom/nordstar': patch
+---
+
+Remove `commonjs` support.
+
+While we could probably quite easily continue to support it we absolutely shouldn't.
+There is no reason what so ever to still use `commonjs` in 2023 almost 2024, like literally none.

@types/declaration.d.ts

@@ -0,0 +1,2 @@
+declare module '*.module.css';
+declare module '*.module.scss';

docs/package.json

@@ -51,6 +51,8 @@
     "homepage": "https://nordstar.nordcom.io/",
     "dependencies": {
         "@nordcom/nordstar": "*",
+        "@nordcom/nordstar-card": "*",
+        "@nordcom/nordstar-heading": "*",
         "next": "14.0.3",
         "react": "18.2.0",
         "react-dom": "18.2.0"

docs/src/app/page.module.scss

@@ -0,0 +1,18 @@
+.container {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+
+    .title {
+        max-width: 52rem;
+        display: flex;
+        flex-direction: column;
+        gap: 0.25rem;
+    }
+
+    .content {
+        display: grid;
+        grid-template-columns: 1fr 1fr 1fr;
+        gap: 1rem;
+    }
+}

docs/src/app/page.tsx

@@ -1,7 +1,22 @@
+import { Card } from '@nordcom/nordstar-card';
+import { Heading } from '@nordcom/nordstar-heading';
+import styles from './page.module.scss';
+
 export default async function IndexPage() {
     return (
-        <main>
-            <h1>nordstar</h1>
+        <main className={styles.container}>
+            <div className={styles.title}>
+                <Heading>Nordstar</Heading>
+                <Heading subheading>
+                    An opinionated component library for building human-centric user interfaces
+                </Heading>
+            </div>
+
+            <div className={styles.content}>
+                <Card></Card>
+                <Card></Card>
+                <Card></Card>
+            </div>
         </main>
     );
 }

package.json

@@ -96,6 +96,8 @@
         "jsdom": "22.1.0",
         "lint-staged": "15.1.0",
         "plop": "4.0.0",
+        "postcss": "8.4.31",
+        "postcss-scss": "4.0.9",
         "prettier": "3.1.0",
         "prettier-eslint": "16.1.2",
         "react": "18.2.0",

packages/components/card/postcss.config.js

@@ -0,0 +1,4 @@
+module.exports = {
+    syntax: 'postcss-scss',
+    plugins: [],
+}

packages/components/card/tsconfig.json

@@ -4,6 +4,6 @@
     "compilerOptions": {
         "baseUrl": "."
     },
-    "include": ["src/**/*"],
+    "include": ["src/**/*", "../../../@types/declaration.d.ts"],
     "exclude": ["src/**/*.stories.*", "src/**/*.test.*"]
 }

packages/components/card/tsup.config.ts

@@ -4,7 +4,7 @@ export default defineConfig({
     cjsInterop: true,
     clean: true,
     entry: ['src/index.ts', 'src/**/*.ts(x)?', '!src/**/*.(stories|test).ts(x)?'],
-    format: ['cjs', 'esm'],
+    format: ['esm'],
     keepNames: true,
     skipNodeModulesBundle: true,
     sourcemap: true,