Card: Add component stub to test tooling and workflows.

While you might be able to use the component by directly importing it,
it will only wrap your content in a `section` html element and not
actually provide any styling or functionality. :^)

.changeset/short-pears-agree.md

@@ -0,0 +1,7 @@
+---
+'@nordcom/nordstar-card': patch
+---
+
+Add `<Card/>` component stub to test if the current release workflow is correctly setup.
+
+While you should be able to actually use the component, it will only wrap your content in a `section` html element.

.vscode/settings.json

@@ -34,11 +34,12 @@
         "editor.wordWrap": "off",
         "workbench.editor.restoreViewState": false
     },
-    "cSpell.words": ["Brandly", "Nordcom", "nordstar"],
+    "cSpell.words": ["Brandly", "Filiph", "Nordcom", "nordstar", "Sandström", "Siitam", "typecheck"],
     "markdown.extension.list.indentationSize": "inherit",
     "markdown.extension.toc.levels": "2..6",
     "markdown.extension.toc.omittedFromToc": {
         "CONTRIBUTING.md": ["## Table of Contents"]
     },
-    "markdown.extension.toc.slugifyMode": "github"
+    "markdown.extension.toc.slugifyMode": "github",
+    "markdownlint.ignore": ["**/.changeset/**.md"]
 }

package.json

@@ -29,7 +29,7 @@
         "typecheck": "turbo typecheck",
         "lint": "concurrently --raw npm:lint:*",
         "lint:docs": "eslint ./docs/**/*.{ts,tsx} --no-error-on-unmatched-pattern",
-        "lint:packages": "eslint ./packages/**/**/*.{ts,tsx}",
+        "lint:packages": "eslint ./packages/**/src/**/*.{ts,tsx}",
         "test": "concurrently --raw npm:test:*",
         "test:docs": "",
         "test:packages": "vitest run --coverage --passWithNoTests",

packages/components/card/README.md

@@ -0,0 +1,9 @@
+# @nordcom/nordstar-card
+
+The description of this component: `<Card/>` is a consistent looking container for content.
+
+## Installation
+
+```sh
+npm install @nordcom/nordstar-card
+```

packages/components/card/package.json

@@ -0,0 +1,68 @@
+{
+    "$schema": "https://json.schemastore.org/package.json",
+    "name": "@nordcom/nordstar-card",
+    "version": "0.0.1",
+    "description": "",
+    "main": "src/index.ts",
+    "sideEffects": false,
+    "engines": {
+        "npm": ">=8",
+        "node": ">=18 <=21"
+    },
+    "scripts": {
+        "build": "tsup --dts",
+        "build:fast": "tsup",
+        "dev": "npm run build:fast -- --watch",
+        "clean": "rimraf dist .turbo",
+        "typecheck": "tsc --noEmit",
+        "prepack": "clean-package",
+        "postpack": "clean-package restore"
+    },
+    "keywords": [
+        "nordstar",
+        "nordcom",
+        "component",
+        "react",
+        "card",
+        "nordstar-card"
+    ],
+    "author": {
+        "name": "Nordcom Group Inc.",
+        "email": "[email protected]",
+        "url": "https://nordcom.io/"
+    },
+    "contributors": [
+        {
+            "name": "Filiph Siitam Sandström",
+            "email": "[email protected]",
+            "url": "https://github.com/filiphsps/"
+        }
+    ],
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/NordcomInc/nordstar.git",
+        "directory": "packages/components/card"
+    },
+    "license": "MIT",
+    "bugs": {
+        "url": "https://github.com/NordcomInc/nordstar/issues"
+    },
+    "homepage": "https://nordstar.nordcom.io/docs/components/card/",
+    "files": [
+        "dist"
+    ],
+    "publishConfig": {
+        "access": "public"
+    },
+    "dependencies": {
+        "@nordcom/nordstar": "*"
+    },
+    "peerDependencies": {
+        "react": ">=18"
+    },
+    "devDependencies": {
+        "clean-package": "2.2.0",
+        "react": "18.2.0"
+    },
+    "clean-package": "../../../clean-package.config.json"
+}

packages/components/card/src/card.stories.tsx

@@ -0,0 +1,22 @@
+import { Card } from '../src';
+import type { CardProps } from '../src';
+import type { Meta } from '@storybook/react';
+
+const story: Meta<typeof Card> = {
+    title: 'Components/Card',
+    component: Card,
+    argTypes: {}
+};
+
+const Template = (args: CardProps) => (
+    <Card {...args}>
+        <p>Content inside of the card</p>
+    </Card>
+);
+
+export const Default = {
+    render: Template,
+    args: {}
+};
+
+export default story;

packages/components/card/src/card.test.tsx

@@ -0,0 +1,14 @@
+import { describe, expect, it } from 'vitest';
+
+import { Card } from '../src';
+import { render } from '@testing-library/react';
+
+describe('components', () => {
+    describe('Card', () => {
+        it('should render correctly', () => {
+            const wrapper = render(<Card />);
+
+            expect(() => wrapper.unmount()).not.toThrow();
+        });
+    });
+});

packages/components/card/src/card.tsx

@@ -0,0 +1,13 @@
+import type { HTMLProps, ReactNode } from 'react';
+
+export type CardProps = {
+    children?: ReactNode;
+} & HTMLProps<HTMLDivElement>;
+
+const Card = (props: CardProps) => {
+    const { children } = props;
+
+    return <section {...props}>{children}</section>;
+};
+
+export default Card;

packages/components/card/src/index.ts

@@ -0,0 +1,5 @@
+import Card from './card';
+
+export type { CardProps } from './card';
+
+export { Card };

packages/components/card/tsconfig.json

@@ -0,0 +1,9 @@
+{
+    "$schema": "https://json.schemastore.org/tsconfig.json",
+    "extends": "../../../tsconfig.json",
+    "compilerOptions": {
+        "baseUrl": "."
+    },
+    "include": ["src/**/*"],
+    "exclude": ["src/**/*.stories.*", "src/**/*.test.*"]
+}

packages/components/card/tsup.config.ts

@@ -0,0 +1,13 @@
+import { defineConfig } from 'tsup';
+
+export default defineConfig({
+    cjsInterop: true,
+    clean: true,
+    entry: ['src/index.ts', 'src/**/*.ts(x)?', '!src/**/*.(stories|test).ts(x)?'],
+    format: ['cjs', 'esm'],
+    keepNames: true,
+    skipNodeModulesBundle: true,
+    sourcemap: true,
+    target: 'esnext',
+    tsconfig: 'tsconfig.json'
+});

packages/core/nordstar/package.json

@@ -38,8 +38,8 @@
         "access": "public"
     },
     "scripts": {
-        "build": "tsup src --dts",
-        "build:fast": "tsup src",
+        "build": "tsup --dts",
+        "build:fast": "tsup",
         "dev": "npm run build:fast -- --watch",
         "clean": "rimraf dist .turbo",
         "typecheck": "tsc --noEmit",

packages/core/nordstar/tsup.config.ts

@@ -1,8 +1,13 @@
 import { defineConfig } from 'tsup';
 
 export default defineConfig({
+    cjsInterop: true,
     clean: true,
+    entry: ['src/index.ts', 'src/**/*.ts(x)?', '!src/**/*.(stories|test).ts(x)?'],
+    format: ['cjs', 'esm'],
+    keepNames: true,
+    skipNodeModulesBundle: true,
+    sourcemap: true,
     target: 'esnext',
-    entry: ['src/index.ts', '!src/scripts'],
-    format: ['cjs', 'esm']
+    tsconfig: 'tsconfig.json'
 });

packages/storybook/.storybook/main.js

@@ -2,7 +2,7 @@ import { dirname, join } from 'node:path';
 module.exports = {
     stories: [
         './readme.stories.mdx',
-        '../../components/**/*.stories.@(js|jsx|ts|tsx)'
+        '../../components/**/*.stories.{ts,tsx}'
     ],
     staticDirs: ['../public'],
     addons: [

plop/component/package.json.hbs

@@ -1,17 +1,17 @@
 {
     "$schema": "https://json.schemastore.org/package.json",
     "name": "@nordcom/nordstar-{{componentName}}",
-    "version": "0.0.1",
-    "description": "{{description}}",
+    "version": "0.0.0",
+    "description": "",
     "main": "src/index.ts",
     "sideEffects": false,
     "engines": {
         "npm": ">=8",
         "node": ">=18 <=21"
     },
     "scripts": {
-        "build": "tsup src --dts",
-        "build:fast": "tsup src",
+        "build": "tsup --dts",
+        "build:fast": "tsup",
         "dev": "npm run build:fast -- --watch",
         "clean": "rimraf dist .turbo",
         "typecheck": "tsc --noEmit",

plop/component/src/{{componentName}}.stories.tsx.hbs

@@ -1,16 +1,18 @@
-import type { Meta } from '@storybook/react';
-import type { {{capitalize componentName}}Props } from '../src';
 import { {{capitalize componentName}} } from '../src';
+import type { {{capitalize componentName}}Props } from '../src';
+import type { Meta } from '@storybook/react';
 
-export default {
+const story: Meta<typeof {{capitalize componentName}}> = {
     title: 'Components/{{capitalize componentName}}',
     component: {{capitalize componentName}},
     argTypes: {}
-} as Meta<typeof {{capitalize componentName}}>;
+};
 
 const Template = (args: {{capitalize componentName}}Props) => <{{capitalize componentName}} {...args} />;
 
-export const Default = {
+export const Standard = {
     render: Template,
     args: {}
 };
+
+export default story;

plop/component/tsconfig.json.hbs

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

plop/component/tsup.config.ts.hbs

@@ -1,8 +1,13 @@
 import { defineConfig } from 'tsup';
 
 export default defineConfig({
+    cjsInterop: true,
     clean: true,
+    entry: ['src/index.ts', 'src/**/*.ts(x)?', '!src/**/*.(stories|test).ts(x)?'],
+    format: ['cjs', 'esm'],
+    keepNames: true,
+    skipNodeModulesBundle: true,
+    sourcemap: true,
     target: 'esnext',
-    entry: ['src/index.ts', '!src/scripts'],
-    format: ['cjs', 'esm']
+    tsconfig: 'tsconfig.json'
 });

plop/package/package.json.hbs

@@ -1,17 +1,17 @@
 {
     "$schema": "https://json.schemastore.org/package.json",
     "name": "@nordcom/nordstar-{{packageName}}",
-    "version": "0.0.1",
-    "description": "{{description}}",
+    "version": "0.0.0",
+    "description": "",
     "main": "src/index.ts",
     "sideEffects": false,
     "engines": {
         "npm": ">=8",
         "node": ">=18 <=21"
     },
     "scripts": {
-        "build": "tsup src --dts",
-        "build:fast": "tsup src",
+        "build": "tsup --dts",
+        "build:fast": "tsup",
         "dev": "npm run build:fast -- --watch",
         "clean": "rimraf dist .turbo",
         "typecheck": "tsc --noEmit",

plop/package/tsup.config.ts.hbs

@@ -1,8 +1,13 @@
 import { defineConfig } from 'tsup';
 
 export default defineConfig({
+    cjsInterop: true,
     clean: true,
+    entry: ['src/index.ts', 'src/**/*.ts(x)?', '!src/**/*.(stories|test).ts(x)?'],
+    format: ['cjs', 'esm'],
+    keepNames: true,
+    skipNodeModulesBundle: true,
+    sourcemap: true,
     target: 'esnext',
-    entry: ['src/index.ts', '!src/scripts'],
-    format: ['cjs', 'esm']
+    tsconfig: 'tsconfig.json'
 });