@ks-digital/designsystem-react 0.0.1-alpha.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 KS Digital
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,49 @@
+# KS Digital Designsystem for React
+
+This library provides React components for KS Digital, designed to align closely with the components from [Designsystemet.no](https://www.designsystemet.no/komponenter).
+
+## Installation (WIP)
+
+Install the required packages using your preferred package manager:
+
+```bash
+pnpm add @ks-digital/designsystem-react @ks-digital/designsystem-themes
+```
+
+## Setup
+
+### 1. Include the Inter Font
+
+Add the Inter font to your `index.html`. This API supports the same parameters as the Google Fonts API, allowing you to customize the font weights as needed:
+
+```html
+<link
+  href="https://static.fiks.ks.no/googlefonts/googleapis/css2?family=Inter&display=swap"
+  rel="stylesheet"
+/>
+```
+
+### 2. Import Base Styles and Themes
+
+Import the base styles and the theme you want to use in your application:
+
+```javascript
+import '@ks-digital/designsystem-themes/base.css'
+import '@ks-digital/designsystem-themes/ledsagerbevis.css'
+```
+
+### 3. Use Components
+
+Import and use the components you need. You can explore the available components at [Designsystemet.no](https://www.designsystemet.no/komponenter):
+
+```javascript
+import { Button } from '@ks-digital/designsystem-react'
+
+function MyComponent() {
+  return <Button data-size="lg">My Button</Button>
+}
+```
+
+## Example
+
+A complete example setup is available in the `react-demo-app` located under the `apps` folder.

package/eslint.config.mjs

@@ -0,0 +1,12 @@
+import nx from '@nx/eslint-plugin'
+import baseConfig from '../../eslint.config.mjs'
+
+export default [
+  ...baseConfig,
+  ...nx.configs['flat/react'],
+  {
+    files: ['**/*.ts', '**/*.tsx', '**/*.js', '**/*.jsx'],
+    // Override or add rules here
+    rules: {},
+  },
+]

package/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "@ks-digital/designsystem-react",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ks-no/designsystem.git",
+    "directory": "packages/react"
+  },
+  "version": "0.0.1-alpha.0",
+  "license": "MIT",
+  "private": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "type": "module",
+  "main": "./index.js",
+  "types": "./index.d.ts",
+  "dependencies": {
+    "@digdir/designsystemet-css": "1.0.5",
+    "@digdir/designsystemet-react": "1.0.5"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  }
+}

package/project.json

@@ -0,0 +1,8 @@
+{
+  "name": "@ks-digital/designsystem-react",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "packages/react/src",
+  "projectType": "library",
+  "tags": [],
+  "targets": {}
+}

package/src/components/Alert/Alert.tsx

@@ -0,0 +1,2 @@
+import { Alert, type AlertProps } from '@digdir/designsystemet-react'
+export { Alert, AlertProps }

package/src/components/Avatar/Avatar.tsx

@@ -0,0 +1,2 @@
+import { Avatar, type AvatarProps } from '@digdir/designsystemet-react'
+export { Avatar, AvatarProps }

package/src/components/Badge/Badge.tsx

@@ -0,0 +1,2 @@
+import { Badge, type BadgeProps } from '@digdir/designsystemet-react'
+export { Badge, BadgeProps }

package/src/components/Breadcrumbs/Breadcrumbs.tsx

@@ -0,0 +1,5 @@
+import {
+  Breadcrumbs,
+  type BreadcrumbsProps,
+} from '@digdir/designsystemet-react'
+export { Breadcrumbs, BreadcrumbsProps }

package/src/components/Button/Button.tsx

@@ -0,0 +1,2 @@
+import { Button, type ButtonProps } from '@digdir/designsystemet-react'
+export { Button, ButtonProps }

package/src/components/Card/Card.tsx

@@ -0,0 +1,2 @@
+import { Card, type CardProps } from '@digdir/designsystemet-react'
+export { Card, CardProps }

package/src/components/Checkbox/Checkbox.tsx

@@ -0,0 +1,2 @@
+import { Checkbox, type CheckboxProps } from '@digdir/designsystemet-react'
+export { Checkbox, CheckboxProps }

package/src/components/Chip/Chip.tsx

@@ -0,0 +1,23 @@
+import {
+  Chip,
+  ChipButton,
+  type ChipButtonProps,
+  ChipCheckbox,
+  type ChipCheckboxProps,
+  ChipRadio,
+  type ChipRadioProps,
+  ChipRemovable,
+  type ChipRemovableProps,
+} from '@digdir/designsystemet-react'
+
+export {
+  Chip,
+  ChipButton,
+  ChipButtonProps,
+  ChipCheckbox,
+  ChipCheckboxProps,
+  ChipRadio,
+  ChipRadioProps,
+  ChipRemovable,
+  ChipRemovableProps,
+}

package/src/components/Details/Details.tsx

@@ -0,0 +1,2 @@
+import { Details, type DetailsProps } from '@digdir/designsystemet-react'
+export { Details, DetailsProps }

package/src/components/Dialog/Dialog.tsx

@@ -0,0 +1,2 @@
+import { Dialog, type DialogProps } from '@digdir/designsystemet-react'
+export { Dialog, DialogProps }

package/src/components/Divider/Divider.tsx

@@ -0,0 +1,2 @@
+import { Divider, type DividerProps } from '@digdir/designsystemet-react'
+export { Divider, DividerProps }

package/src/components/Dropdown/Dropdown.tsx

@@ -0,0 +1,2 @@
+import { Dropdown, type DropdownProps } from '@digdir/designsystemet-react'
+export { Dropdown, DropdownProps }

package/src/components/ErrorSummary/ErrorSummary.tsx

@@ -0,0 +1,5 @@
+import {
+  ErrorSummary,
+  type ErrorSummaryProps,
+} from '@digdir/designsystemet-react'
+export { ErrorSummary, ErrorSummaryProps }

package/src/components/Field/Field.tsx

@@ -0,0 +1,2 @@
+import { Field, type FieldProps } from '@digdir/designsystemet-react'
+export { Field, FieldProps }

package/src/components/Fieldset/Fieldset.tsx

@@ -0,0 +1,2 @@
+import { Fieldset, type FieldsetProps } from '@digdir/designsystemet-react'
+export { Fieldset, FieldsetProps }

package/src/components/Heading/Heading.tsx

@@ -0,0 +1,2 @@
+import { Heading, type HeadingProps } from '@digdir/designsystemet-react'
+export { Heading, HeadingProps }

package/src/components/Input/Input.tsx

@@ -0,0 +1,2 @@
+import { Input, type InputProps } from '@digdir/designsystemet-react'
+export { Input, InputProps }

package/src/components/Label/Label.tsx

@@ -0,0 +1,2 @@
+import { Label, type LabelProps } from '@digdir/designsystemet-react'
+export { Label, LabelProps }

package/src/components/Link/Link.tsx

@@ -0,0 +1,2 @@
+import { Link, type LinkProps } from '@digdir/designsystemet-react'
+export { Link, LinkProps }

package/src/components/List/List.tsx

@@ -0,0 +1,19 @@
+import {
+  List,
+  ListOrdered,
+  type ListOrderedProps,
+  ListUnordered,
+  type ListUnorderedProps,
+  ListItem,
+  type ListItemProps,
+} from '@digdir/designsystemet-react'
+
+export {
+  List,
+  ListOrdered,
+  ListOrderedProps,
+  ListUnordered,
+  ListUnorderedProps,
+  ListItem,
+  ListItemProps,
+}

package/src/components/Loaders/index.tsx

@@ -0,0 +1,2 @@
+export * from './spinner/Spinner'
+export * from './skeleton/Skeleton'

package/src/components/Loaders/skeleton/Skeleton.tsx

@@ -0,0 +1,2 @@
+import { Skeleton, type SkeletonProps } from '@digdir/designsystemet-react'
+export { Skeleton, SkeletonProps }

package/src/components/Loaders/spinner/Spinner.tsx

@@ -0,0 +1,2 @@
+import { Spinner, type SpinnerProps } from '@digdir/designsystemet-react'
+export { Spinner, SpinnerProps }

package/src/components/MultiSuggestion/MultiSuggestion.tsx

@@ -0,0 +1,33 @@
+import {
+  EXPERIMENTAL_MultiSuggestion,
+  EXPERIMENTAL_MultiSuggestionInput,
+  EXPERIMENTAL_MultiSuggestionList,
+  EXPERIMENTAL_MultiSuggestionOption,
+  EXPERIMENTAL_MultiSuggestionChips,
+  EXPERIMENTAL_MultiSuggestionEmpty,
+  EXPERIMENTAL_MultiSuggestionClear,
+  type MultiSuggestionProps,
+  type MultiSuggestionInputProps,
+  type MultiSuggestionListProps,
+  type MultiSuggestionOptionProps,
+  type MultiSuggestionChipsProps,
+  type MultiSuggestionEmptyProps,
+  type MultiSuggestionClearProps,
+} from '@digdir/designsystemet-react'
+
+export {
+  EXPERIMENTAL_MultiSuggestion,
+  EXPERIMENTAL_MultiSuggestionInput,
+  EXPERIMENTAL_MultiSuggestionList,
+  EXPERIMENTAL_MultiSuggestionOption,
+  EXPERIMENTAL_MultiSuggestionChips,
+  EXPERIMENTAL_MultiSuggestionEmpty,
+  EXPERIMENTAL_MultiSuggestionClear,
+  MultiSuggestionProps,
+  MultiSuggestionInputProps,
+  MultiSuggestionListProps,
+  MultiSuggestionOptionProps,
+  MultiSuggestionChipsProps,
+  MultiSuggestionEmptyProps,
+  MultiSuggestionClearProps,
+}

package/src/components/Pagination/Pagination.tsx

@@ -0,0 +1,2 @@
+import { Pagination, type PaginationProps } from '@digdir/designsystemet-react'
+export { Pagination, PaginationProps }

package/src/components/Paragraph/Paragraph.tsx

@@ -0,0 +1,2 @@
+import { Paragraph, type ParagraphProps } from '@digdir/designsystemet-react'
+export { Paragraph, ParagraphProps }

package/src/components/Popover/Popover.tsx

@@ -0,0 +1,2 @@
+import { Popover, type PopoverProps } from '@digdir/designsystemet-react'
+export { Popover, PopoverProps }

package/src/components/Radio/Radio.tsx

@@ -0,0 +1,2 @@
+import { Radio, type RadioProps } from '@digdir/designsystemet-react'
+export { Radio, RadioProps }

package/src/components/Search/Search.tsx

@@ -0,0 +1,2 @@
+import { Search, type SearchProps } from '@digdir/designsystemet-react'
+export { Search, SearchProps }

package/src/components/Select/Select.tsx

@@ -0,0 +1,2 @@
+import { Select, type SelectProps } from '@digdir/designsystemet-react'
+export { Select, SelectProps }

package/src/components/SkipLink/SkipLink.tsx

@@ -0,0 +1,2 @@
+import { SkipLink, type SkipLinkProps } from '@digdir/designsystemet-react'
+export { SkipLink, SkipLinkProps }

package/src/components/Suggestion/Suggestion.tsx

@@ -0,0 +1,29 @@
+import {
+  EXPERIMENTAL_Suggestion,
+  EXPERIMENTAL_SuggestionList,
+  EXPERIMENTAL_SuggestionInput,
+  EXPERIMENTAL_SuggestionEmpty,
+  EXPERIMENTAL_SuggestionOption,
+  EXPERIMENTAL_SuggestionClear,
+  type SuggestionProps,
+  type SuggestionListProps,
+  type SuggestionInputProps,
+  type SuggestionEmptyProps,
+  type SuggestionOptionProps,
+  type SuggestionClearProps,
+} from '@digdir/designsystemet-react'
+
+export {
+  EXPERIMENTAL_Suggestion,
+  EXPERIMENTAL_SuggestionList,
+  EXPERIMENTAL_SuggestionInput,
+  EXPERIMENTAL_SuggestionEmpty,
+  EXPERIMENTAL_SuggestionOption,
+  EXPERIMENTAL_SuggestionClear,
+  SuggestionProps,
+  SuggestionListProps,
+  SuggestionInputProps,
+  SuggestionEmptyProps,
+  SuggestionOptionProps,
+  SuggestionClearProps,
+}

package/src/components/Switch/Switch.tsx

@@ -0,0 +1,2 @@
+import { Switch, type SwitchProps } from '@digdir/designsystemet-react'
+export { Switch, SwitchProps }

package/src/components/Table/Table.tsx

@@ -0,0 +1,2 @@
+import { Table, type TableProps } from '@digdir/designsystemet-react'
+export { Table, TableProps }

package/src/components/Tabs/Tabs.tsx

@@ -0,0 +1,2 @@
+import { Tabs, type TabsProps } from '@digdir/designsystemet-react'
+export { Tabs, TabsProps }

package/src/components/Tag/Tag.tsx

@@ -0,0 +1,2 @@
+import { Tag, type TagProps } from '@digdir/designsystemet-react'
+export { Tag, TagProps }

package/src/components/Textarea/Textarea.tsx

@@ -0,0 +1,2 @@
+import { Textarea, type TextareaProps } from '@digdir/designsystemet-react'
+export { Textarea, TextareaProps }

package/src/components/Textfield/Textfield.tsx

@@ -0,0 +1,2 @@
+import { Textfield, type TextfieldProps } from '@digdir/designsystemet-react'
+export { Textfield, TextfieldProps }

package/src/components/ToggleGroup/ToggleGroup.tsx

@@ -0,0 +1,5 @@
+import {
+  ToggleGroup,
+  type ToggleGroupProps,
+} from '@digdir/designsystemet-react'
+export { ToggleGroup, ToggleGroupProps }

package/src/components/Tooltip/Tooltip.tsx

@@ -0,0 +1,2 @@
+import { Tooltip, type TooltipProps } from '@digdir/designsystemet-react'
+export { Tooltip, TooltipProps }

package/src/components/ValidationMessage/ValidationMessage.tsx

@@ -0,0 +1,5 @@
+import {
+  ValidationMessage,
+  type ValidationMessageProps,
+} from '@digdir/designsystemet-react'
+export { ValidationMessage, ValidationMessageProps }

package/src/index.ts

@@ -0,0 +1,42 @@
+import '@digdir/designsystemet-css'
+
+export * from './react-types.d'
+export * from './components/Alert/Alert'
+export * from './components/Avatar/Avatar'
+export * from './components/Badge/Badge'
+export * from './components/Breadcrumbs/Breadcrumbs'
+export * from './components/Button/Button'
+export * from './components/Card/Card'
+export * from './components/Checkbox/Checkbox'
+export * from './components/Chip/Chip'
+export * from './components/Details/Details'
+export * from './components/Dialog/Dialog'
+export * from './components/Divider/Divider'
+export * from './components/Dropdown/Dropdown'
+export * from './components/ErrorSummary/ErrorSummary'
+export * from './components/Field/Field'
+export * from './components/Fieldset/Fieldset'
+export * from './components/Input/Input'
+export * from './components/Link/Link'
+export * from './components/List/List'
+export * from './components/Loaders'
+export * from './components/MultiSuggestion/MultiSuggestion'
+export * from './components/Pagination/Pagination'
+export * from './components/Popover/Popover'
+export * from './components/Radio/Radio'
+export * from './components/Search/Search'
+export * from './components/Select/Select'
+export * from './components/SkipLink/SkipLink'
+export * from './components/Suggestion/Suggestion'
+export * from './components/Switch/Switch'
+export * from './components/Table/Table'
+export * from './components/Tabs/Tabs'
+export * from './components/Tag/Tag'
+export * from './components/Textarea/Textarea'
+export * from './components/Textfield/Textfield'
+export * from './components/ToggleGroup/ToggleGroup'
+export * from './components/Tooltip/Tooltip'
+export * from './components/Paragraph/Paragraph'
+export * from './components/ValidationMessage/ValidationMessage'
+export * from './components/Label/Label'
+export * from './components/Heading/Heading'

package/src/react-types.d.ts

@@ -0,0 +1,15 @@
+import type { Size } from '@digdir/designsystemet-react'
+import type { Color } from '@digdir/designsystemet-react/colors'
+
+/*
+ * Typing of data-size and data-color attributes in React components.
+ */
+declare global {
+  namespace React {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    interface HTMLAttributes<T> {
+      'data-size'?: Size | (string & {})
+      'data-color'?: Color | (string & {})
+    }
+  }
+}

package/tsconfig.json

@@ -0,0 +1,25 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "importHelpers": true,
+    "noImplicitOverride": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "jsx": "react-jsx",
+    "resolveJsonModule": true,
+    "allowSyntheticDefaultImports": true
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ]
+}

package/tsconfig.lib.json

@@ -0,0 +1,23 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "declaration": true,
+    "types": ["node", "vite/client"]
+  },
+  "include": ["src/**/*.ts"],
+  "exclude": [
+    "vite.config.ts",
+    "vite.config.mts",
+    "vitest.config.ts",
+    "vitest.config.mts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.js",
+    "src/**/*.spec.js",
+    "src/**/*.test.jsx",
+    "src/**/*.spec.jsx"
+  ]
+}

package/tsconfig.spec.json

@@ -0,0 +1,28 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "types": [
+      "vitest/globals",
+      "vitest/importMeta",
+      "vite/client",
+      "node",
+      "vitest"
+    ]
+  },
+  "include": [
+    "vite.config.ts",
+    "vite.config.mts",
+    "vitest.config.ts",
+    "vitest.config.mts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.js",
+    "src/**/*.spec.js",
+    "src/**/*.test.jsx",
+    "src/**/*.spec.jsx",
+    "src/**/*.d.ts"
+  ]
+}

package/vite.config.ts

@@ -0,0 +1,53 @@
+/// <reference types='vitest' />
+import { nxCopyAssetsPlugin } from '@nx/vite/plugins/nx-copy-assets.plugin'
+import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin'
+import react from '@vitejs/plugin-react'
+import * as path from 'path'
+import { defineConfig } from 'vite'
+import dts from 'vite-plugin-dts'
+
+export default defineConfig(() => ({
+  root: __dirname,
+  cacheDir: '../../node_modules/.vite/packages/react',
+  plugins: [
+    react(),
+    nxViteTsPaths(),
+    nxCopyAssetsPlugin(['*.md']),
+    dts({
+      entryRoot: 'src',
+      tsconfigPath: path.join(__dirname, 'tsconfig.lib.json'),
+    }),
+  ],
+  // Configuration for building your library.
+  // See: https://vitejs.dev/guide/build.html#library-mode
+  build: {
+    outDir: '../../dist/packages/react',
+    emptyOutDir: true,
+    reportCompressedSize: true,
+    commonjsOptions: {
+      transformMixedEsModules: true,
+    },
+    lib: {
+      // Could also be a dictionary or array of multiple entry points.
+      entry: 'src/index.ts',
+      name: '@ks-digital/designsystem-react',
+      fileName: 'index',
+      formats: ['es' as const],
+    },
+    rollupOptions: {
+      // External packages that should not be bundled into your library.
+      external: ['react', 'react-dom'],
+    },
+  },
+  test: {
+    watch: false,
+    globals: true,
+    environment: 'node',
+    include: ['{src,tests}/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
+    reporters: ['default'],
+    coverage: {
+      reportsDirectory: '../../coverage/packages/react',
+      provider: 'v8' as const,
+    },
+  },
+}))