Components: Add <View/> component.

.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.

.changeset/tough-beds-smoke.md

@@ -0,0 +1,5 @@
+---
+'@nordcom/nordstar-view': patch
+---
+
+Add `<View/>` component.

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 (
-        <main className={styles.container}>
+        <View className={styles.container}>
             <div className={styles.title}>
                 <Heading>Nordstar</Heading>
                 <Heading level="h2">
@@ -22,6 +22,6 @@ export default async function IndexPage() {
                     <Heading level="h3">Documentation</Heading>
                 </Card>
             </div>
-        </main>
+        </View>
     );
 }

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
 

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"]
 }

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 `<Heading/>` 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

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"]
 }

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
+```

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": "[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/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"
+}

packages/components/view/postcss.config.mjs

@@ -0,0 +1,4 @@
+export default {
+    syntax: 'postcss-scss',
+    plugins: []
+};

packages/components/view/src/index.ts

@@ -0,0 +1,5 @@
+import View from './view';
+
+export type { ViewProps } from './view';
+
+export { View };

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);
+    }
+}

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<typeof View> = {
+    title: 'Components/View',
+    component: View,
+    argTypes: {}
+};
+
+const Template = (args: ViewProps) => <View {...args}>You view&apos;s content goes here!</View>;
+
+export const Standard = {
+    render: Template,
+    args: {}
+};
+
+export default story;

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(<View />);
+
+                expect(() => wrapper.unmount()).not.toThrow();
+            });
+        });
+    });
+});

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 (
+        <div className={styles.container}>
+            <main ref={ref} {...{ ...props, className: undefined }} className={classes} />
+        </div>
+    );
+});
+
+View.displayName = 'Nordstar.Layout.View';
+
+export default View;

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"]
+}

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')
+        })
+    ]
+});

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