From f451734df962f22bfea1e5370a6a252ad68dc4fb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Filiph=20Siitam=20Sandstr=C3=B6m?= Date: Sun, 5 Nov 2023 05:20:49 +0100 Subject: [PATCH] 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 | 7 ++ .vscode/settings.json | 5 +- package-lock.json | 22 ++++++ package.json | 2 +- packages/components/card/README.md | 9 +++ packages/components/card/package.json | 68 +++++++++++++++++++ packages/components/card/src/card.stories.tsx | 22 ++++++ packages/components/card/src/card.test.tsx | 14 ++++ packages/components/card/src/card.tsx | 13 ++++ packages/components/card/src/index.ts | 5 ++ packages/components/card/tsconfig.json | 9 +++ packages/components/card/tsup.config.ts | 13 ++++ packages/core/nordstar/package.json | 4 +- packages/core/nordstar/tsup.config.ts | 9 ++- packages/storybook/.storybook/main.js | 2 +- plop/component/package.json.hbs | 8 +-- .../src/{{componentName}}.stories.tsx.hbs | 12 ++-- plop/component/tsconfig.json.hbs | 3 +- plop/component/tsup.config.ts.hbs | 9 ++- plop/package/package.json.hbs | 8 +-- plop/package/tsup.config.ts.hbs | 9 ++- 21 files changed, 227 insertions(+), 26 deletions(-) create mode 100644 .changeset/short-pears-agree.md create mode 100644 packages/components/card/README.md create mode 100644 packages/components/card/package.json create mode 100644 packages/components/card/src/card.stories.tsx create mode 100644 packages/components/card/src/card.test.tsx create mode 100644 packages/components/card/src/card.tsx create mode 100644 packages/components/card/src/index.ts create mode 100644 packages/components/card/tsconfig.json create mode 100644 packages/components/card/tsup.config.ts diff --git a/.changeset/short-pears-agree.md b/.changeset/short-pears-agree.md new file mode 100644 index 00000000..83aa5c1f --- /dev/null +++ b/.changeset/short-pears-agree.md @@ -0,0 +1,7 @@ +--- +'@nordcom/nordstar-card': patch +--- + +Add `` 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. diff --git a/.vscode/settings.json b/.vscode/settings.json index a3b71573..1f14c5cf 100644 --- a/.vscode/settings.json +++ b/.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"] } diff --git a/package-lock.json b/package-lock.json index 872e44c2..3a7ce621 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3563,6 +3563,10 @@ "resolved": "packages/core/nordstar", "link": true }, + "node_modules/@nordcom/nordstar-card": { + "resolved": "packages/components/card", + "link": true + }, "node_modules/@nordcom/nordstar-docs": { "resolved": "docs", "link": true @@ -22315,6 +22319,24 @@ "url": "https://github.com/sponsors/wooorm" } }, + "packages/components/card": { + "version": "0.0.1", + "license": "MIT", + "dependencies": { + "@nordcom/nordstar": "*" + }, + "devDependencies": { + "clean-package": "2.2.0", + "react": "18.2.0" + }, + "engines": { + "node": ">=18 <=21", + "npm": ">=8" + }, + "peerDependencies": { + "react": ">=18" + } + }, "packages/core/nordstar": { "name": "@nordcom/nordstar", "version": "0.0.2", diff --git a/package.json b/package.json index 8729caf1..edc6408d 100644 --- a/package.json +++ b/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", diff --git a/packages/components/card/README.md b/packages/components/card/README.md new file mode 100644 index 00000000..49bd1067 --- /dev/null +++ b/packages/components/card/README.md @@ -0,0 +1,9 @@ +# @nordcom/nordstar-card + +The description of this component: `` is a consistent looking container for content. + +## Installation + +```sh +npm install @nordcom/nordstar-card +``` diff --git a/packages/components/card/package.json b/packages/components/card/package.json new file mode 100644 index 00000000..ce4abfba --- /dev/null +++ b/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": "opensource@nordcom.io", + "url": "https://nordcom.io/" + }, + "contributors": [ + { + "name": "Filiph Siitam Sandström", + "email": "filiph@nordcom.io", + "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" +} diff --git a/packages/components/card/src/card.stories.tsx b/packages/components/card/src/card.stories.tsx new file mode 100644 index 00000000..cbeae810 --- /dev/null +++ b/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 = { + title: 'Components/Card', + component: Card, + argTypes: {} +}; + +const Template = (args: CardProps) => ( + +

Content inside of the card

+ +); + +export const Default = { + render: Template, + args: {} +}; + +export default story; diff --git a/packages/components/card/src/card.test.tsx b/packages/components/card/src/card.test.tsx new file mode 100644 index 00000000..df90acec --- /dev/null +++ b/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(); + + expect(() => wrapper.unmount()).not.toThrow(); + }); + }); +}); diff --git a/packages/components/card/src/card.tsx b/packages/components/card/src/card.tsx new file mode 100644 index 00000000..256255b5 --- /dev/null +++ b/packages/components/card/src/card.tsx @@ -0,0 +1,13 @@ +import type { HTMLProps, ReactNode } from 'react'; + +export type CardProps = { + children?: ReactNode; +} & HTMLProps; + +const Card = (props: CardProps) => { + const { children } = props; + + return
{children}
; +}; + +export default Card; diff --git a/packages/components/card/src/index.ts b/packages/components/card/src/index.ts new file mode 100644 index 00000000..403ff29c --- /dev/null +++ b/packages/components/card/src/index.ts @@ -0,0 +1,5 @@ +import Card from './card'; + +export type { CardProps } from './card'; + +export { Card }; diff --git a/packages/components/card/tsconfig.json b/packages/components/card/tsconfig.json new file mode 100644 index 00000000..0c124075 --- /dev/null +++ b/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.*"] +} diff --git a/packages/components/card/tsup.config.ts b/packages/components/card/tsup.config.ts new file mode 100644 index 00000000..81116cb5 --- /dev/null +++ b/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' +}); diff --git a/packages/core/nordstar/package.json b/packages/core/nordstar/package.json index 3df0c2f7..fcb54912 100644 --- a/packages/core/nordstar/package.json +++ b/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", diff --git a/packages/core/nordstar/tsup.config.ts b/packages/core/nordstar/tsup.config.ts index 0e52345c..81116cb5 100644 --- a/packages/core/nordstar/tsup.config.ts +++ b/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' }); diff --git a/packages/storybook/.storybook/main.js b/packages/storybook/.storybook/main.js index ea8852f7..a0328af9 100644 --- a/packages/storybook/.storybook/main.js +++ b/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: [ diff --git a/plop/component/package.json.hbs b/plop/component/package.json.hbs index 85490873..e5c4f6d9 100644 --- a/plop/component/package.json.hbs +++ b/plop/component/package.json.hbs @@ -1,8 +1,8 @@ { "$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": { @@ -10,8 +10,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", diff --git a/plop/component/src/{{componentName}}.stories.tsx.hbs b/plop/component/src/{{componentName}}.stories.tsx.hbs index 4da2aeda..939d8abe 100644 --- a/plop/component/src/{{componentName}}.stories.tsx.hbs +++ b/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 = { title: 'Components/{{capitalize componentName}}', component: {{capitalize componentName}}, argTypes: {} -} as Meta; +}; const Template = (args: {{capitalize componentName}}Props) => <{{capitalize componentName}} {...args} />; -export const Default = { +export const Standard = { render: Template, args: {} }; + +export default story; diff --git a/plop/component/tsconfig.json.hbs b/plop/component/tsconfig.json.hbs index 08e7a283..0c124075 100644 --- a/plop/component/tsconfig.json.hbs +++ b/plop/component/tsconfig.json.hbs @@ -4,5 +4,6 @@ "compilerOptions": { "baseUrl": "." }, - "include": ["src", "index.ts"] + "include": ["src/**/*"], + "exclude": ["src/**/*.stories.*", "src/**/*.test.*"] } diff --git a/plop/component/tsup.config.ts.hbs b/plop/component/tsup.config.ts.hbs index 0e52345c..81116cb5 100644 --- a/plop/component/tsup.config.ts.hbs +++ b/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' }); diff --git a/plop/package/package.json.hbs b/plop/package/package.json.hbs index e5a9954a..1a9ecbe9 100644 --- a/plop/package/package.json.hbs +++ b/plop/package/package.json.hbs @@ -1,8 +1,8 @@ { "$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": { @@ -10,8 +10,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", diff --git a/plop/package/tsup.config.ts.hbs b/plop/package/tsup.config.ts.hbs index 0e52345c..81116cb5 100644 --- a/plop/package/tsup.config.ts.hbs +++ b/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' });