diff --git a/.changeset/nine-lies-kick.md b/.changeset/nine-lies-kick.md new file mode 100644 index 00000000..8b91f085 --- /dev/null +++ b/.changeset/nine-lies-kick.md @@ -0,0 +1,9 @@ +--- +'@nordcom/nordstar-heading': patch +'@nordcom/nordstar-card': patch +'@nordcom/nordstar-view': patch +'@nordcom/nordstar': patch +'@nordcom/nordstar-system': patch +--- + +Add a few layout-related css variables. diff --git a/.changeset/tough-beds-smoke.md b/.changeset/tough-beds-smoke.md new file mode 100644 index 00000000..c462e490 --- /dev/null +++ b/.changeset/tough-beds-smoke.md @@ -0,0 +1,5 @@ +--- +'@nordcom/nordstar-view': patch +--- + +Add `` component. diff --git a/docs/src/app/page.tsx b/docs/src/app/page.tsx index 8a98ad16..5447706e 100644 --- a/docs/src/app/page.tsx +++ b/docs/src/app/page.tsx @@ -1,9 +1,9 @@ -import { Card, Heading } from '@nordcom/nordstar'; +import { Card, Heading, View } from '@nordcom/nordstar'; import styles from './page.module.scss'; export default async function IndexPage() { return ( -
+
Nordstar @@ -22,6 +22,6 @@ export default async function IndexPage() { Documentation
-
+ ); } diff --git a/package-lock.json b/package-lock.json index 7dfd4fbf..cb31983d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3996,6 +3996,10 @@ "resolved": "packages/core/system", "link": true }, + "node_modules/@nordcom/nordstar-view": { + "resolved": "packages/components/view", + "link": true + }, "node_modules/@nordcom/prettier": { "version": "0.1.1", "dev": true, @@ -23141,7 +23145,7 @@ }, "packages/components/card": { "name": "@nordcom/nordstar-card", - "version": "0.0.6", + "version": "0.0.7", "license": "MIT", "dependencies": { "@nordcom/nordstar-system": "*" @@ -23160,7 +23164,26 @@ }, "packages/components/heading": { "name": "@nordcom/nordstar-heading", - "version": "0.0.6", + "version": "0.0.7", + "license": "MIT", + "dependencies": { + "@nordcom/nordstar-system": "*" + }, + "devDependencies": { + "clean-package": "2.2.0", + "react": "18.2.0" + }, + "engines": { + "node": ">=18 <=21", + "npm": ">=8" + }, + "peerDependencies": { + "react": ">=18" + } + }, + "packages/components/view": { + "name": "@nordcom/nordstar-view", + "version": "0.0.7", "license": "MIT", "dependencies": { "@nordcom/nordstar-system": "*" @@ -23179,12 +23202,13 @@ }, "packages/core/nordstar": { "name": "@nordcom/nordstar", - "version": "0.0.6", + "version": "0.0.7", "license": "MIT", "dependencies": { "@nordcom/nordstar-card": "*", "@nordcom/nordstar-heading": "*", - "@nordcom/nordstar-system": "*" + "@nordcom/nordstar-system": "*", + "@nordcom/nordstar-view": "*" }, "devDependencies": { "clean-package": "2.2.0" @@ -23196,7 +23220,7 @@ }, "packages/core/system": { "name": "@nordcom/nordstar-system", - "version": "0.0.6", + "version": "0.0.7", "license": "MIT", "devDependencies": { "clean-package": "2.2.0", diff --git a/packages/components/card/CHANGELOG.md b/packages/components/card/CHANGELOG.md index 2b4284bd..34163d8b 100644 --- a/packages/components/card/CHANGELOG.md +++ b/packages/components/card/CHANGELOG.md @@ -37,11 +37,6 @@ - [#53](https://github.com/NordcomInc/nordstar/pull/53) [`7f132eb`](https://github.com/NordcomInc/nordstar/commit/7f132eb2dea663f0855fb731bf5952b2c72e8aa2) Thanks [@filiphsps](https://github.com/filiphsps)! - Use `scss` and css variables to handle component styling. -- [#53](https://github.com/NordcomInc/nordstar/pull/53) [`ba39c4c`](https://github.com/NordcomInc/nordstar/commit/ba39c4cd601eadae3b17bfbd93de35b54c79126b) Thanks [@filiphsps](https://github.com/filiphsps)! - 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. - - Updated dependencies [[`7f132eb`](https://github.com/NordcomInc/nordstar/commit/7f132eb2dea663f0855fb731bf5952b2c72e8aa2), [`ba39c4c`](https://github.com/NordcomInc/nordstar/commit/ba39c4cd601eadae3b17bfbd93de35b54c79126b)]: - @nordcom/nordstar@0.0.4 diff --git a/packages/components/card/tsconfig.json b/packages/components/card/tsconfig.json index 3762eeee..bf03994d 100644 --- a/packages/components/card/tsconfig.json +++ b/packages/components/card/tsconfig.json @@ -5,7 +5,7 @@ "rootDir": "./src", "outDir": "dist" }, - "exclude": ["node_modules", "dist", "src/**/*.test.*"], + "exclude": ["node_modules", "dist", "src/**/*.test.*", "src/**/*.stories.*"], "extends": "../../../tsconfig.json", "include": ["src", "index.ts", "../../../@types/declaration.d.ts"] } diff --git a/packages/components/heading/CHANGELOG.md b/packages/components/heading/CHANGELOG.md index 92a08b58..ee55cbab 100644 --- a/packages/components/heading/CHANGELOG.md +++ b/packages/components/heading/CHANGELOG.md @@ -40,10 +40,5 @@ - [#53](https://github.com/NordcomInc/nordstar/pull/53) [`ba39c4c`](https://github.com/NordcomInc/nordstar/commit/ba39c4cd601eadae3b17bfbd93de35b54c79126b) Thanks [@filiphsps](https://github.com/filiphsps)! - Add initial `` component. -- [#53](https://github.com/NordcomInc/nordstar/pull/53) [`ba39c4c`](https://github.com/NordcomInc/nordstar/commit/ba39c4cd601eadae3b17bfbd93de35b54c79126b) Thanks [@filiphsps](https://github.com/filiphsps)! - 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. - - Updated dependencies [[`7f132eb`](https://github.com/NordcomInc/nordstar/commit/7f132eb2dea663f0855fb731bf5952b2c72e8aa2), [`ba39c4c`](https://github.com/NordcomInc/nordstar/commit/ba39c4cd601eadae3b17bfbd93de35b54c79126b)]: - @nordcom/nordstar@0.0.4 diff --git a/packages/components/heading/tsconfig.json b/packages/components/heading/tsconfig.json index 3762eeee..bf03994d 100644 --- a/packages/components/heading/tsconfig.json +++ b/packages/components/heading/tsconfig.json @@ -5,7 +5,7 @@ "rootDir": "./src", "outDir": "dist" }, - "exclude": ["node_modules", "dist", "src/**/*.test.*"], + "exclude": ["node_modules", "dist", "src/**/*.test.*", "src/**/*.stories.*"], "extends": "../../../tsconfig.json", "include": ["src", "index.ts", "../../../@types/declaration.d.ts"] } diff --git a/packages/components/view/README.md b/packages/components/view/README.md new file mode 100644 index 00000000..3b0270b9 --- /dev/null +++ b/packages/components/view/README.md @@ -0,0 +1,9 @@ +# @nordcom/nordstar-view + +Display a dedicated `view` (aka `page`) in your app. + +## Installation + +```sh +npm install @nordcom/nordstar-view +``` diff --git a/packages/components/view/package.json b/packages/components/view/package.json new file mode 100644 index 00000000..c35c3c5e --- /dev/null +++ b/packages/components/view/package.json @@ -0,0 +1,80 @@ +{ + "$schema": "https://json.schemastore.org/package.json", + "name": "@nordcom/nordstar-view", + "type": "module", + "version": "0.0.7", + "description": "", + "main": "./dist/index.js", + "module": "./dist/index.js", + "types": "./dist/index.d.ts", + "exports": { + ".": { + "import": "./dist/index.js", + "types": "./dist/index.d.ts" + }, + "./view": { + "import": "./dist/view.js", + "types": "./dist/view.d.ts" + } + }, + "sideEffects": false, + "engines": { + "npm": ">=8", + "node": ">=18 <=21" + }, + "scripts": { + "build": "vite build", + "dev": "vite build --watch", + "clean": "rimraf dist .turbo", + "typecheck": "tsc --noEmit", + "prepack": "clean-package", + "postpack": "clean-package restore" + }, + "keywords": [ + "nordstar", + "nordcom", + "component", + "react", + "view", + "nordstar-view" + ], + "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/view" + }, + "license": "MIT", + "bugs": { + "url": "https://github.com/NordcomInc/nordstar/issues" + }, + "homepage": "https://nordstar.nordcom.io/docs/components/view/", + "files": [ + "dist" + ], + "publishConfig": { + "access": "public" + }, + "dependencies": { + "@nordcom/nordstar-system": "*" + }, + "peerDependencies": { + "react": ">=18" + }, + "devDependencies": { + "clean-package": "2.2.0", + "react": "18.2.0" + }, + "clean-package": "../../../clean-package.config.json" +} diff --git a/packages/components/view/postcss.config.mjs b/packages/components/view/postcss.config.mjs new file mode 100644 index 00000000..52ba5aae --- /dev/null +++ b/packages/components/view/postcss.config.mjs @@ -0,0 +1,4 @@ +export default { + syntax: 'postcss-scss', + plugins: [] +}; diff --git a/packages/components/view/src/index.ts b/packages/components/view/src/index.ts new file mode 100644 index 00000000..65c0b45b --- /dev/null +++ b/packages/components/view/src/index.ts @@ -0,0 +1,5 @@ +import View from './view'; + +export type { ViewProps } from './view'; + +export { View }; diff --git a/packages/components/view/src/view.module.scss b/packages/components/view/src/view.module.scss new file mode 100644 index 00000000..af716d0f --- /dev/null +++ b/packages/components/view/src/view.module.scss @@ -0,0 +1,12 @@ +.container { + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: center; + + .content { + width: calc(100vw - calc(var(--layout-page-spacing) * 2)); + max-width: var(--layout-page-width); + margin: var(--layout-page-spacing); + } +} diff --git a/packages/components/view/src/view.stories.tsx b/packages/components/view/src/view.stories.tsx new file mode 100644 index 00000000..8b818289 --- /dev/null +++ b/packages/components/view/src/view.stories.tsx @@ -0,0 +1,18 @@ +import type { Meta } from '@storybook/react'; +import type { ViewProps } from '../src'; +import { View } from '../src'; + +const story: Meta = { + title: 'Components/View', + component: View, + argTypes: {} +}; + +const Template = (args: ViewProps) => You view's content goes here!; + +export const Standard = { + render: Template, + args: {} +}; + +export default story; diff --git a/packages/components/view/src/view.test.tsx b/packages/components/view/src/view.test.tsx new file mode 100644 index 00000000..c40fb12d --- /dev/null +++ b/packages/components/view/src/view.test.tsx @@ -0,0 +1,17 @@ +import { describe, expect, it } from 'vitest'; + +import { View } from '../src'; +import React from 'react'; +import { render } from '@testing-library/react'; + +describe('components', () => { + describe('view', () => { + describe('View', () => { + it('should render correctly', () => { + const wrapper = render(); + + expect(() => wrapper.unmount()).not.toThrow(); + }); + }); + }); +}); diff --git a/packages/components/view/src/view.tsx b/packages/components/view/src/view.tsx new file mode 100644 index 00000000..028a4a09 --- /dev/null +++ b/packages/components/view/src/view.tsx @@ -0,0 +1,23 @@ +import { forwardRef } from '@nordcom/nordstar-system'; +import type { ReactNode } from 'react'; +import styles from './view.module.scss'; + +export type ViewProps = { + children?: ReactNode; +}; + +const View = forwardRef<'main', ViewProps>((props, ref) => { + const { className } = props; + const classes = `${styles.content}${className ? ` ${className}` : ''}`; + + // TODO: Figure out a better way to exclude props from being passed to the DOM element. + return ( +
+
+
+ ); +}); + +View.displayName = 'Nordstar.Layout.View'; + +export default View; diff --git a/packages/components/view/tsconfig.json b/packages/components/view/tsconfig.json new file mode 100644 index 00000000..bf03994d --- /dev/null +++ b/packages/components/view/tsconfig.json @@ -0,0 +1,11 @@ +{ + "$schema": "https://json.schemastore.org/tsconfig.json", + "compilerOptions": { + "baseUrl": "./", + "rootDir": "./src", + "outDir": "dist" + }, + "exclude": ["node_modules", "dist", "src/**/*.test.*", "src/**/*.stories.*"], + "extends": "../../../tsconfig.json", + "include": ["src", "index.ts", "../../../@types/declaration.d.ts"] +} diff --git a/packages/components/view/vite.config.ts b/packages/components/view/vite.config.ts new file mode 100644 index 00000000..db4939e4 --- /dev/null +++ b/packages/components/view/vite.config.ts @@ -0,0 +1,42 @@ +import react from '@vitejs/plugin-react'; +import { resolve } from 'node:path'; +import { defineConfig } from 'vite'; +import dts from 'vite-plugin-dts'; +import { libInjectCss } from 'vite-plugin-lib-inject-css'; +import tsConfigPaths from 'vite-tsconfig-paths'; + +export default defineConfig({ + root: resolve(__dirname), + build: { + target: 'esnext', + copyPublicDir: false, + emptyOutDir: true, + outDir: resolve(__dirname, 'dist'), + sourcemap: true, + lib: { + entry: ['src/index.ts', 'src/view.tsx'], + formats: ['es'] + }, + rollupOptions: { + external: ['react', 'react-dom'], + output: { + globals: { + react: 'React', + 'react-dom': 'ReactDOM' + } + } + } + }, + plugins: [ + react(), + libInjectCss(), + tsConfigPaths(), + dts({ + clearPureImport: false, + entryRoot: resolve(__dirname, 'src'), + rollupTypes: true, + insertTypesEntry: true, + tsconfigPath: resolve(__dirname, 'tsconfig.json') + }) + ] +}); diff --git a/packages/core/nordstar/CHANGELOG.md b/packages/core/nordstar/CHANGELOG.md index 68f35e47..a43482d2 100644 --- a/packages/core/nordstar/CHANGELOG.md +++ b/packages/core/nordstar/CHANGELOG.md @@ -46,11 +46,6 @@ - [#53](https://github.com/NordcomInc/nordstar/pull/53) [`7f132eb`](https://github.com/NordcomInc/nordstar/commit/7f132eb2dea663f0855fb731bf5952b2c72e8aa2) Thanks [@filiphsps](https://github.com/filiphsps)! - Use `scss` and css variables to handle component styling. -- [#53](https://github.com/NordcomInc/nordstar/pull/53) [`ba39c4c`](https://github.com/NordcomInc/nordstar/commit/ba39c4cd601eadae3b17bfbd93de35b54c79126b) Thanks [@filiphsps](https://github.com/filiphsps)! - 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. - ## 0.0.3 ### Patch Changes diff --git a/packages/core/nordstar/package.json b/packages/core/nordstar/package.json index 26c3be53..ca53b634 100644 --- a/packages/core/nordstar/package.json +++ b/packages/core/nordstar/package.json @@ -61,6 +61,7 @@ "dependencies": { "@nordcom/nordstar-card": "*", "@nordcom/nordstar-heading": "*", + "@nordcom/nordstar-view": "*", "@nordcom/nordstar-system": "*" }, "devDependencies": { diff --git a/packages/core/nordstar/src/index.ts b/packages/core/nordstar/src/index.ts index 02acbc11..d10c3045 100644 --- a/packages/core/nordstar/src/index.ts +++ b/packages/core/nordstar/src/index.ts @@ -15,8 +15,10 @@ import type { CardProps } from '@nordcom/nordstar-card'; import { Card } from '@nordcom/nordstar-card'; import type { HeadingProps } from '@nordcom/nordstar-heading'; import { Heading } from '@nordcom/nordstar-heading'; +import type { ViewProps } from '@nordcom/nordstar-view'; +import { View } from '@nordcom/nordstar-view'; -export { Card, Heading, NordstarProvider }; +export { Card, Heading, NordstarProvider, View }; export type { As, CardProps, @@ -26,5 +28,6 @@ export type { NordstarProviderProps, OmitCommonProps, PropsOf, - RightJoinProps + RightJoinProps, + ViewProps }; diff --git a/packages/core/nordstar/tsconfig.json b/packages/core/nordstar/tsconfig.json index 3762eeee..bf03994d 100644 --- a/packages/core/nordstar/tsconfig.json +++ b/packages/core/nordstar/tsconfig.json @@ -5,7 +5,7 @@ "rootDir": "./src", "outDir": "dist" }, - "exclude": ["node_modules", "dist", "src/**/*.test.*"], + "exclude": ["node_modules", "dist", "src/**/*.test.*", "src/**/*.stories.*"], "extends": "../../../tsconfig.json", "include": ["src", "index.ts", "../../../@types/declaration.d.ts"] } diff --git a/packages/core/system/src/nordstar-provider.module.scss b/packages/core/system/src/nordstar-provider.module.scss index a6793ad7..208c0f69 100644 --- a/packages/core/system/src/nordstar-provider.module.scss +++ b/packages/core/system/src/nordstar-provider.module.scss @@ -3,6 +3,9 @@ --block-border-width: 0.1rem; --block-border-radius: 0.65rem; + --layout-page-width: 1200px; + --layout-page-spacing: 1.25rem; + --color-background: #000000; --color-background-highlight: #262626; --color-foreground: #fefefe; diff --git a/packages/core/system/tsconfig.json b/packages/core/system/tsconfig.json index 3762eeee..bf03994d 100644 --- a/packages/core/system/tsconfig.json +++ b/packages/core/system/tsconfig.json @@ -5,7 +5,7 @@ "rootDir": "./src", "outDir": "dist" }, - "exclude": ["node_modules", "dist", "src/**/*.test.*"], + "exclude": ["node_modules", "dist", "src/**/*.test.*", "src/**/*.stories.*"], "extends": "../../../tsconfig.json", "include": ["src", "index.ts", "../../../@types/declaration.d.ts"] } diff --git a/plop/component/package.json.hbs b/plop/component/package.json.hbs index b9014a96..2db1a830 100644 --- a/plop/component/package.json.hbs +++ b/plop/component/package.json.hbs @@ -1,6 +1,7 @@ { "$schema": "https://json.schemastore.org/package.json", "name": "@nordcom/nordstar-{{componentName}}", + "type": "module", "version": "0.0.0", "description": "", "main": "./dist/index.js", diff --git a/plop/component/tsconfig.json.hbs b/plop/component/tsconfig.json.hbs index 3762eeee..bf03994d 100644 --- a/plop/component/tsconfig.json.hbs +++ b/plop/component/tsconfig.json.hbs @@ -5,7 +5,7 @@ "rootDir": "./src", "outDir": "dist" }, - "exclude": ["node_modules", "dist", "src/**/*.test.*"], + "exclude": ["node_modules", "dist", "src/**/*.test.*", "src/**/*.stories.*"], "extends": "../../../tsconfig.json", "include": ["src", "index.ts", "../../../@types/declaration.d.ts"] } diff --git a/plop/package/package.json.hbs b/plop/package/package.json.hbs index 7cee6cce..4b9f8e7e 100644 --- a/plop/package/package.json.hbs +++ b/plop/package/package.json.hbs @@ -1,6 +1,7 @@ { "$schema": "https://json.schemastore.org/package.json", "name": "@nordcom/nordstar-{{packageName}}", + "type": "module", "version": "0.0.0", "description": "", "main": "./dist/index.js", diff --git a/plop/package/tsconfig.json.hbs b/plop/package/tsconfig.json.hbs index 3762eeee..bf03994d 100644 --- a/plop/package/tsconfig.json.hbs +++ b/plop/package/tsconfig.json.hbs @@ -5,7 +5,7 @@ "rootDir": "./src", "outDir": "dist" }, - "exclude": ["node_modules", "dist", "src/**/*.test.*"], + "exclude": ["node_modules", "dist", "src/**/*.test.*", "src/**/*.stories.*"], "extends": "../../../tsconfig.json", "include": ["src", "index.ts", "../../../@types/declaration.d.ts"] } diff --git a/plopfile.js b/plopfile.cjs similarity index 100% rename from plopfile.js rename to plopfile.cjs