Storybook: Update to v8.

NordcomInc · Mar 15, 2024 · b912188 · b912188
1 parent aec9889
commit b912188
Showing 34 changed files with 179 additions and 214 deletions.
diff --git a/.gitattributes b/.gitattributes
@@ -1,2 +1,2 @@
-*.lockb binary diff=lockb
 * text=auto eol=lf
+*.lockb binary diff=lockb
diff --git a/.husky/pre-commit b/.husky/pre-commit
@@ -1,4 +1,4 @@
 #!/usr/bin/env sh
 . "$(dirname "$0")/_/husky.sh"
 
-npx lint-staged --allow-empty
+bunx lint-staged --allow-empty
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -42,6 +42,7 @@
         "Brandly",
         "compat",
         "Filiph",
+        "lockb",
         "Nordcom",
         "nordstar",
         "postbuild",

diff --git a/bun.lockb b/bun.lockb
diff --git a/docs/package.json b/docs/package.json
@@ -14,9 +14,9 @@
     "scripts": {
         "build": "next build",
         "dev": "next dev",
-        "clean": "rimraf -g dist coverage .turbo .next .tsbuildinfo",
+        "clean": "rimraf -g dist coverage storybook-static .turbo .next .tsbuildinfo *.log",
         "start": "next start -p $PORT",
-        "lint": "concurrently -i --raw bun:lint:*",
+        "lint": "concurrently -i bun:lint:*",
         "lint:next": "next lint",
         "lint:prettier": "prettier src/**/*.* --check"
     },

diff --git a/package.json b/package.json
@@ -6,7 +6,6 @@
     "description": "An opinionated component library for building human-centric user interfaces.",
     "private": true,
     "main": "index.js",
-    "packageManager": "[email protected]",
     "engines": {
         "node": ">=18 <=21"
     },
@@ -19,7 +18,7 @@
     ],
     "scripts": {
         "prepare": "husky install",
-        "dev": "concurrently -i --raw bun:dev:*",
+        "dev": "concurrently -i bun:dev:*",
         "dev:docs": "turbo dev --filter=@nordcom/nordstar-docs",
         "dev:storybook": "turbo dev --filter=@nordcom/nordstar-storybook",
         "build": "turbo build",
@@ -28,14 +27,14 @@
         "build:storybook": "turbo build --filter=@nordcom/nordstar-storybook",
         "typecheck": "turbo typecheck",
         "lint": "eslint **/*.{ts,tsx}",
-        "fix:lint": "eslint **/*.{ts,tsx}",
+        "fix": "concurrently -i bun:fix:*",
+        "fix:lint": "eslint **/*.{ts,tsx} --fix",
         "prettier": "prettier **/src/**/*.* --write",
-        "fix:prettier": "prettier **/src/**/*.* --fix",
-        "fix": "concurrently -i --raw bun:fix:*",
-        "test": "concurrently --raw bun:test:*",
+        "fix:prettier": "prettier **/src/**/*.* --write",
+        "test": "concurrently -i bun:test:*",
         "test:packages": "vitest run --coverage --passWithNoTests",
-        "clean": "concurrently --raw bun:clean:*",
-        "clean:repo": "rimraf -g dist coverage .turbo .next .tsbuildinfo",
+        "clean": "concurrently -i bun:clean:*",
+        "clean:repo": "rimraf -g dist coverage storybook-static .turbo .next .tsbuildinfo *.log",
         "clean:packages": "turbo clean --filter=!@nordcom/nordstar-docs --filter=!@nordcom/nordstar-storybook",
         "clean:docs": "turbo clean --filter=@nordcom/nordstar-docs",
         "clean:storybook": "turbo clean --filter=@nordcom/nordstar-storybook",
@@ -77,14 +76,13 @@
         "@changesets/cli": "2.27.1",
         "@changesets/types": "6.0.0",
         "@nordcom/prettier": "0.1.1",
-        "@storybook/react": "7.6.17",
         "@testing-library/dom": "9.3.4",
         "@testing-library/jest-dom": "6.4.2",
         "@testing-library/react": "14.2.1",
         "@testing-library/user-event": "14.5.2",
-        "@types/node": "20.10.3",
-        "@types/react": "18.2.66",
+        "@types/node": "20.11.27",
         "@types/react-dom": "18.2.22",
+        "@types/react": "18.2.66",
         "@typescript-eslint/eslint-plugin": "7.2.0",
         "@typescript-eslint/parser": "7.2.0",
         "@vitejs/plugin-react-swc": "3.6.0",
@@ -112,7 +110,6 @@
         "react-dom": "18.2.0",
         "rimraf": "5.0.5",
         "sass": "1.72.0",
-        "strip-ansi": "7.1.0",
         "turbo": "1.12.5",
         "typescript": "5.4.2",
         "vite": "5.1.6",
@@ -122,6 +119,7 @@
         "vitest": "1.3.1"
     },
     "overrides": {
-        "@typescript-eslint/typescript-estree": "7.2.0"
+        "@typescript-eslint/typescript-estree": "7.2.0",
+        "esbuild": "0.20.2"
     }
 }
diff --git a/packages/components/accented/package.json b/packages/components/accented/package.json
@@ -45,7 +45,7 @@
     "scripts": {
         "build": "tsc && vite build",
         "dev": "vite build --watch",
-        "clean": "rimraf -g dist coverage .turbo .next .tsbuildinfo",
+        "clean": "rimraf -g dist coverage storybook-static .turbo .next .tsbuildinfo *.log",
         "typecheck": "tsc --noEmit"
     },
     "keywords": [

diff --git a/packages/components/accented/src/accented.stories.tsx b/packages/components/accented/src/accented.stories.tsx
@@ -1,6 +1,6 @@
-import type { Meta } from '@storybook/react';
-import type { AccentedProps } from '../src';
-import { Accented } from '../src';
+import type { AccentedProps } from '@nordcom/nordstar-accented';
+import { Accented } from '@nordcom/nordstar-accented';
+import type { Meta, StoryObj } from '@storybook/react';
 
 const story: Meta<typeof Accented> = {
     title: 'System/Typography/Accented',
@@ -12,24 +12,18 @@ const story: Meta<typeof Accented> = {
     }
 };
 
+export default story;
+type Story = StoryObj<typeof Accented>;
+
 const Template = (args: AccentedProps) => (
     <p>
         This text is using the regular body color <Accented {...args}>while this is accented</Accented>, neat.
     </p>
 );
 
-export const Primary = {
+export const Standard: Story = {
     render: Template,
     args: {
         secondary: false
     }
 };
-
-export const Secondary = {
-    render: Template,
-    args: {
-        secondary: true
-    }
-};
-
-export default story;
diff --git a/packages/components/button/package.json b/packages/components/button/package.json
@@ -42,7 +42,7 @@
     "scripts": {
         "build": "tsc && vite build",
         "dev": "vite build --watch",
-        "clean": "rimraf -g dist coverage .turbo .next .tsbuildinfo",
+        "clean": "rimraf -g dist coverage storybook-static .turbo .next .tsbuildinfo *.log",
         "typecheck": "tsc --noEmit"
     },
     "keywords": [

diff --git a/packages/components/button/src/button.stories.tsx b/packages/components/button/src/button.stories.tsx
@@ -1,7 +1,6 @@
+import type { ButtonProps } from '@nordcom/nordstar-button';
+import { Button } from '@nordcom/nordstar-button';
 import type { Meta, StoryObj } from '@storybook/react';
-import React from 'react';
-import type { ButtonProps } from '../src';
-import { Button } from '../src';
 
 const story: Meta<typeof Button> = {
     title: 'System/Components/Button',

diff --git a/packages/components/card/package.json b/packages/components/card/package.json
@@ -42,7 +42,7 @@
     "scripts": {
         "build": "tsc && vite build",
         "dev": "vite build --watch",
-        "clean": "rimraf -g dist coverage .turbo .next .tsbuildinfo",
+        "clean": "rimraf -g dist coverage storybook-static .turbo .next .tsbuildinfo *.log",
         "typecheck": "tsc --noEmit"
     },
     "keywords": [

diff --git a/packages/components/card/src/card.stories.tsx b/packages/components/card/src/card.stories.tsx
@@ -1,7 +1,6 @@
-import { Card } from '../src';
-
+import type { CardProps } from '@nordcom/nordstar-card';
+import { Card } from '@nordcom/nordstar-card';
 import type { Meta, StoryObj } from '@storybook/react';
-import type { CardProps } from '../src';
 
 const story: Meta<typeof Card> = {
     title: 'System/Components/Card',
@@ -59,7 +58,8 @@ export const Solid: Story = {
     render: Template,
     args: {
         variant: 'solid',
-        color: 'primary'
+        color: 'primary',
+        borderless: false
     }
 };
 

diff --git a/packages/components/header/package.json b/packages/components/header/package.json
@@ -41,7 +41,7 @@
     "scripts": {
         "build": "tsc && vite build",
         "dev": "vite build --watch",
-        "clean": "rimraf -g dist coverage .turbo .next .tsbuildinfo",
+        "clean": "rimraf -g dist coverage storybook-static .turbo .next .tsbuildinfo *.log",
         "typecheck": "tsc --noEmit"
     },
     "keywords": [

diff --git a/packages/components/header/src/header.stories.tsx b/packages/components/header/src/header.stories.tsx
@@ -1,14 +1,16 @@
-import type { Meta } from '@storybook/react';
-import React from 'react';
-import type { HeaderProps } from '../src';
-import { Header } from '../src';
+import type { HeaderProps } from '@nordcom/nordstar-header';
+import { Header } from '@nordcom/nordstar-header';
+import type { Meta, StoryObj } from '@storybook/react';
 
 const story: Meta<typeof Header> = {
     title: 'System/Layout/Header',
     component: Header,
     argTypes: {}
 };
 
+export default story;
+type Story = StoryObj<typeof Header>;
+
 const Template = ({ title, ...args }: HeaderProps & { title: string }) => (
     <>
         {[
@@ -24,11 +26,9 @@ const Template = ({ title, ...args }: HeaderProps & { title: string }) => (
     </>
 );
 
-export const Default = {
-    render: Template,
+export const Standard: Story = {
+    render: Template as any,
     args: {
         title: 'Nordstar'
     }
 };
-
-export default story;
diff --git a/packages/components/heading/package.json b/packages/components/heading/package.json
@@ -42,7 +42,7 @@
     "scripts": {
         "build": "tsc && vite build",
         "dev": "vite build --watch",
-        "clean": "rimraf -g dist coverage .turbo .next .tsbuildinfo",
+        "clean": "rimraf -g dist coverage storybook-static .turbo .next .tsbuildinfo *.log",
         "typecheck": "tsc --noEmit"
     },
     "keywords": [

diff --git a/packages/components/heading/src/heading.stories.tsx b/packages/components/heading/src/heading.stories.tsx
@@ -1,47 +1,41 @@
-import type { Meta } from '@storybook/react';
-import React from 'react';
-import type { HeadingProps } from '../src';
-import { Heading } from '../src';
+import type { HeadingProps } from '@nordcom/nordstar-heading';
+import { Heading } from '@nordcom/nordstar-heading';
+import type { Meta, StoryObj } from '@storybook/react';
 
 const story: Meta<typeof Heading> = {
     title: 'System/Typography/Heading',
     component: Heading,
     argTypes: {
         level: {
             options: ['h1', 'h2', 'h3', 'h4'],
-            control: { type: 'radio' }
+            control: { type: 'inline-radio' }
         }
     }
 };
 
-const Template = (args: HeadingProps) => <Heading {...args}>A compelling page-title</Heading>;
-
-export const h1 = {
-    render: Template,
-    args: {
-        level: 'h1'
-    }
-};
-
-export const h2 = {
-    render: Template,
-    args: {
-        level: 'h2'
-    }
-};
+export default story;
+type Story = StoryObj<typeof Heading>;
 
-export const h3 = {
-    render: Template,
-    args: {
-        level: 'h3'
-    }
-};
+const Template = (args: HeadingProps) => (
+    <>
+        {[
+            <Heading key="h1" level="h1" {...args}>
+                1. A bold expressive heading
+            </Heading>,
+            <Heading key="h2" level="h2" {...args}>
+                2. Subheading used to provide context
+            </Heading>,
+            <Heading key="h3" level="h3" {...args}>
+                3. Heading used for section headers
+            </Heading>,
+            <Heading key="h4" level="h4" {...args}>
+                4. Heading used for subsection headers
+            </Heading>
+        ]}
+    </>
+);
 
-export const h4 = {
+export const Standard: Story = {
     render: Template,
-    args: {
-        level: 'h4'
-    }
+    args: {}
 };
-
-export default story;
diff --git a/packages/components/input/package.json b/packages/components/input/package.json
@@ -41,7 +41,7 @@
     "scripts": {
         "build": "tsc && vite build",
         "dev": "vite build --watch",
-        "clean": "rimraf -g dist coverage .turbo .next .tsbuildinfo",
+        "clean": "rimraf -g dist coverage storybook-static .turbo .next .tsbuildinfo *.log",
         "typecheck": "tsc --noEmit"
     },
     "keywords": [

diff --git a/packages/components/input/src/input.module.scss b/packages/components/input/src/input.module.scss
@@ -16,10 +16,10 @@
         150ms ease-in-out border-color,
         150ms ease-in-out color;
     border-radius: var(--border-radius);
+    border-style: solid;
 
     &:is([data-variant='outline'], :not([data-variant])) {
         border-width: var(--border-width-small);
-        border-style: solid;
 
         &:not(:is([data-color='primary'], [data-color='secondary'])) {
             &[data-color='default'] {
@@ -82,6 +82,26 @@
         }
     }
 
+    &:is([data-variant='solid'], :not([data-variant])) {
+        --background: var(--color-foreground);
+        --foreground: var(--color-background);
+
+        &[data-color='primary'] {
+            --background: var(--color-accent-primary);
+            --foreground: var(--color-accent-primary-foreground);
+        }
+        &[data-color='secondary'] {
+            --background: var(--color-accent-secondary);
+            --foreground: var(--color-accent-secondary-foreground);
+        }
+
+        border-width: var(--border-width-small);
+        border-color: var(--background);
+
+        color: var(--foreground);
+        background: var(--background);
+    }
+
     .label {
         font-size: 0.65em;
         font-weight: 700;