chore: storybook support for app components

libs/form-component/.storybook/main.ts

@@ -0,0 +1,11 @@
+import type { StorybookConfig } from '@storybook/react-vite';
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: ['@storybook/addon-links', '@chromatic-com/storybook', '@storybook/addon-docs'],
+  framework: {
+    name: '@storybook/react-vite',
+    options: {},
+  },
+};
+export default config;

libs/form-component/.storybook/preview.tsx

@@ -0,0 +1,20 @@
+import type { Preview } from '@storybook/react-vite';
+
+import '@digdir/designsystemet-css';
+import '@digdir/designsystemet-css/theme';
+import '../src/styles/global.css';
+
+const preview: Preview = {
+  parameters: {
+    layout: 'centered',
+  },
+  decorators: [
+    (Story) => (
+      <div data-color-scheme='light' data-size='md'>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default preview;

libs/form-component/package.json

@@ -3,29 +3,42 @@
   "packageManager": "yarn@4.12.0",
   "version": "0.1.0",
   "main": "./src/index.ts",
+  "exports": {
+    ".": "./src/index.ts",
+    "./styles/global.css": "./src/styles/global.css"
+  },
   "private": true,
   "scripts": {
     "test": "vitest",
     "test:ci": "vitest run",
     "lint": "eslint \"src/**/*.ts*\"",
-    "typecheck": "tsc --noEmit -p ./"
+    "typecheck": "tsc --noEmit -p ./",
+    "storybook": "storybook dev -p 6008",
+    "build-storybook": "storybook build"
   },
   "peerDependencies": {
     "@digdir/designsystemet-react": "^1.11.1",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },
   "devDependencies": {
+    "@chromatic-com/storybook": "^5.0.1",
+    "@digdir/designsystemet-css": "1.11.1",
     "@digdir/designsystemet-react": "1.11.1",
+    "@storybook/addon-docs": "10.2.16",
+    "@storybook/addon-links": "10.2.16",
+    "@storybook/builder-vite": "10.2.16",
+    "@storybook/react-vite": "10.2.16",
     "@testing-library/jest-dom": "6.9.1",
     "@testing-library/react": "16.3.2",
     "@testing-library/user-event": "14.6.1",
     "@types/react": "19.2.14",
     "@types/react-dom": "19.2.3",
     "@vitejs/plugin-react": "^5.0.0",
     "jsdom": "^26.1.0",
+    "storybook": "^10.2.11",
     "typescript": "5.9.3",
     "typescript-plugin-css-modules": "5.2.0",
-    "vitest": "^3.0.0"
+    "vitest": "^4.1.5"
   }
 }

libs/form-component/src/app-components/Card/Card.stories.tsx

@@ -0,0 +1,20 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { AppCard } from './index';
+
+const meta = {
+  title: 'AppComponents/Card',
+  component: AppCard,
+} satisfies Meta<typeof AppCard>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Preview: Story = {
+  args: {
+    title: <h1>heading here</h1>,
+    description: 'A short description that explains what this card is about.',
+    footer: 'Last updated 2 days ago',
+  },
+};

libs/form-component/src/styles/global.css

@@ -0,0 +1,178 @@
+@import url('https://altinncdn.no/fonts/altinn-din/altinn-din.css');
+
+:root {
+  --font-family: 'Altinn-DIN', sans-serif;
+  font-family: var(--font-family);
+  font-size: 1rem;
+  font-weight: normal;
+  line-height: 1.5;
+  text-align: left;
+  color: var(--ds-color-neutral-text-default);
+
+  /* @see altinnAppTheme.tsx */
+  --colors-primary-blueDarker: #022f51;
+  --colors-primary-blueDark: #0062ba;
+  --colors-primary-blueDarkHover: #1a72c1;
+  --colors-primary-blueMedium: #008fd6;
+  --colors-primary-blue: #1eadf7;
+  --colors-primary-blueHover: #37b7f8;
+  --colors-primary-blueLight: #cff0ff;
+  --colors-primary-blueLighter: #e3f7ff;
+  --colors-primary-green: #12aa64;
+  --colors-primary-greenHover: #45d489;
+  --colors-primary-greenLight: #d4f9e4;
+  --colors-primary-red: #d5203b;
+  --colors-primary-redLight: #f9cad3;
+  --colors-primary-purple: #3f3161;
+  --colors-primary-purpleLight: #e0daf7;
+  --colors-primary-yellow: #ffda06;
+  --colors-primary-yellowLight: #fbf6bd;
+  --colors-primary-black: #000;
+  --colors-primary-grey: #6a6a6a;
+  --colors-primary-greyMedium: #bcc7cc;
+  --colors-primary-greyLight: #efefef;
+  --colors-primary-white: #fff;
+
+  --table-input-margin: 15px;
+
+  --repeating-group-edit-surface-color: #f1fbff;
+  --repeating-group-edit-border-color: var(--ds-color-accent-border-default);
+  --repeating-group-edit-divider-color: var(--ds-color-accent-border-subtle);
+  --repeating-group-error-color: var(--ds-color-danger-surface-tinted);
+
+  --border-color-primary: var(--colors-primary-blueMedium);
+  --dashed-border-primary: 1px dashed var(--border-color-primary);
+  --solid-border-primary: 2px solid var(--border-color-primary);
+  --dotted-border-primary: 2px dotted var(--border-color-primary);
+
+  --button-margin-top: 2rem;
+  --button-gap: 0.75rem;
+}
+
+/* Workaround to avoid (PDF) postfix from Altinn designsystem */
+a[href$='.pdf']::after {
+  content: none !important;
+  display: inline !important;
+}
+
+input:checked + .slider {
+  background-color: #1eaef7;
+}
+
+input:checked + .slider:before {
+  -webkit-transform: translateX(26px);
+  -ms-transform: translateX(26px);
+  transform: translateX(26px);
+}
+
+input:focus + .slider {
+  box-shadow: 0 0 1px #1eaef7;
+}
+
+option {
+  overflow: hidden;
+  text-overflow: 'ellipsis';
+}
+
+select.disabled {
+  border: 2px solid var(--colors-primary-grey) !important;
+  color: var(--colors-primary-black);
+  background:
+    url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjhweCIgaGVpZ2h0PSI0cHgiIHZpZXdCb3g9IjAgMCA4IDQiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDQwLjIgKDMzODI2KSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT5UcmlhbmdsZTwvdGl0bGU+CiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4KICAgIDxkZWZzPjwvZGVmcz4KICAgIDxnIGlkPSJQYWdlLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxwb2x5Z29uIGlkPSJUcmlhbmdsZSIgZmlsbD0iIzAwMDAwMCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNC4wMDAwMDAsIDIuMDAwMDAwKSBzY2FsZSgxLCAtMSkgdHJhbnNsYXRlKC00LjAwMDAwMCwgLTIuMDAwMDAwKSAiIHBvaW50cz0iNCAwIDggNCAwIDQiPjwvcG9seWdvbj4KICAgIDwvZz4KPC9zdmc+)
+      no-repeat right 0.469rem center,
+    repeating-linear-gradient(
+      135deg,
+      var(--colors-primary-greyLight),
+      var(--colors-primary-greyLight) 2px,
+      var(--colors-primary-white) 3px,
+      var(--colors-primary-white) 5px
+    ) !important;
+  background-size:
+    8px 10px,
+    cover !important;
+}
+
+ol,
+ul,
+dl {
+  padding-left: 1.5rem;
+  margin-top: 0;
+}
+
+/* Workaround: The above style affects DropdownMenu from the design system */
+.ds-dropdown ul {
+  padding: 0;
+}
+
+/* Align text in table when right to left languages*/
+[dir='rtl'] td {
+  text-align: right;
+}
+
+.altinnLink {
+  --dsc-link-background--active: var(--ds-color-surface-tinted);
+  --dsc-link-color--active: var(--ds-color-text-default);
+  --dsc-link-color--hover: var(--ds-color-text-default);
+  --dsc-link-color: var(--ds-color-text-subtle);
+  --dsc-link-background--focus: var(--ds-color-focus-outer);
+  --dsc-link-color--focus: var(--ds-color-focus-inner);
+  --dsc-link-color--visited: var(--ds-link-color-visited);
+  --dsc-link-text-decoration-thickness--hover: 0.125em;
+  --dsc-link-text-decoration-thickness: 0.0625em;
+  color: var(--dsc-link-color);
+  outline: none;
+  text-decoration-line: underline;
+  text-decoration-style: solid;
+  text-decoration-thickness: var(--dsc-link-text-decoration-thickness);
+  text-underline-offset: 0.27em;
+}
+.altinnLink:hover {
+  color: var(--dsc-link-color--hover);
+  text-decoration-thickness: var(--dsc-link-text-decoration-thickness--hover);
+}
+.altinnLink:focus-visible {
+  color: var(--dsc-link-color--focus);
+  background: var(--dsc-link-background--focus);
+  outline: transparent solid 2px;
+}
+
+.altinnLink[target='_blank']::after {
+  display: inline-block;
+  width: 1.3em;
+  background-image: url('data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 36 36%27%3E%3Cstyle%3E.st0%7Bfill:%23022f51%7D.st1%7Bfill:%23fff%7D.st2,.st3,.st4%7Bfill:none;stroke:%23fff;stroke-width:2.5;stroke-miterlimit:10%7D.st3,.st4%7Bstroke-width:2%7D.st4%7Bfill:%23fff%7D.st5%7Bfill:none%7D.st5,.st6,.st7,.st8%7Bstroke:%23022f51;stroke-miterlimit:10%7D.st6%7Bstroke-width:.9636;fill:none%7D.st7,.st8%7Bfill:%23fff%7D.st8%7Bfill:%23022f51%7D.st9%7Bopacity:.3%7D.st10%7Bfill:%23ff1d25%7D.st11%7Bfill:none;stroke:%23022f51;stroke-width:8;stroke-miterlimit:10%7D.st12%7Bopacity:.5;stroke:%23ffa683;stroke-width:2%7D.st12,.st13,.st14%7Bfill:none;stroke-miterlimit:10%7D.st13%7Bopacity:.5;stroke:%23ffa683;stroke-width:1.4142%7D.st14%7Bstroke:%23022f51;stroke-width:4%7D%3C/style%3E%3Cpath class=%27st0%27 d=%27M15 11v2h8.7L12.1 24.7l1.4 1.4L25 14.6V24h2V11z%27 id=%27Layer_1%27/%3E%3C/svg%3E');
+  background-repeat: no-repeat;
+  background-size: 119% auto;
+  vertical-align: middle;
+  margin-top: -4px;
+  margin-left: -3px;
+  content: '(external link)';
+  white-space: nowrap;
+  overflow: hidden;
+  text-indent: 1.3em;
+}
+.altinnLink[target='_blank']:focus-visible::after {
+  display: inline-block;
+  width: 1.3em;
+  background-image: url('data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 36 36%27%3E%3Cstyle%3E.st0%7Bfill:%23ffffff%7D.st1%7Bfill:%23fff%7D.st2,.st3,.st4%7Bfill:none;stroke:%23fff;stroke-width:2.5;stroke-miterlimit:10%7D.st3,.st4%7Bstroke-width:2%7D.st4%7Bfill:%23fff%7D.st5%7Bfill:none%7D.st5,.st6,.st7,.st8%7Bstroke:%23022f51;stroke-miterlimit:10%7D.st6%7Bstroke-width:.9636;fill:none%7D.st7,.st8%7Bfill:%23fff%7D.st8%7Bfill:%23022f51%7D.st9%7Bopacity:.3%7D.st10%7Bfill:%23ff1d25%7D.st11%7Bfill:none;stroke:%23022f51;stroke-width:8;stroke-miterlimit:10%7D.st12%7Bopacity:.5;stroke:%23ffa683;stroke-width:2%7D.st12,.st13,.st14%7Bfill:none;stroke-miterlimit:10%7D.st13%7Bopacity:.5;stroke:%23ffa683;stroke-width:1.4142%7D.st14%7Bstroke:%23022f51;stroke-width:4%7D%3C/style%3E%3Cpath class=%27st0%27 d=%27M15 11v2h8.7L12.1 24.7l1.4 1.4L25 14.6V24h2V11z%27 id=%27Layer_1%27/%3E%3C/svg%3E');
+  background-repeat: no-repeat;
+  background-size: 119% auto;
+  vertical-align: middle;
+  margin-top: -4px;
+  margin-left: -3px;
+  content: '(external link)';
+  white-space: nowrap;
+  overflow: hidden;
+  text-indent: 1.3em;
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}

libs/form-component/tsconfig.json

@@ -20,6 +20,6 @@
     ],
     "types": ["vitest/globals", "@testing-library/jest-dom"]
   },
-  "include": ["src/**/*", "vitest.config.ts"],
+  "include": ["src/**/*", ".storybook/**/*", "vitest.config.ts"],
   "exclude": ["node_modules", "dist"]
 }

libs/form-engine/package.json

@@ -26,6 +26,6 @@
     "@vitejs/plugin-react": "^5.0.0",
     "jsdom": "^26.1.0",
     "typescript": "5.9.3",
-    "vitest": "^3.0.0"
+    "vitest": "^4.1.5"
   }
 }

src/App/frontend/monorepo-changed-paths.txt

@@ -2,6 +2,7 @@
 .github/
 .husky/
 .yarn/patches/jsdom-npm-26.1.0-3857255f02.patch
+.yarn/releases/yarn-4.12.0.cjs
 .yarnrc.yml
 LICENSE.md
 adr/001-component-library.md
@@ -62,6 +63,7 @@ src/features/validation/schemaValidation/SchemaValidation.tsx
 src/features/validation/selectors/attachmentValidations.ts
 src/features/validation/validationContext.tsx
 src/hooks/useWaitForState.ts
+src/index.css
 src/index.tsx
 src/layout/Group/SummaryGroupComponent.test.tsx
 src/layout/Group/__snapshots__/SummaryGroupComponent.test.tsx.snap

src/App/frontend/package.json

@@ -126,6 +126,7 @@
     "webpack-dev-server": "5.2.3"
   },
   "dependencies": {
+    "@app/form-component": "workspace:*",
     "@app/form-engine": "workspace:*",
     "@date-fns/tz": "1.4.1",
     "@digdir/designsystemet-css": "1.11.1",