feat: add Link React npm package (#2608)

.changeset/link-react.md

@@ -0,0 +1,5 @@
+---
+"@utrecht/link-react": major
+---
+
+Create npm package for the Link React component.

packages/component-library-react/package.json

@@ -110,7 +110,7 @@
     "@utrecht/img-css": "workspace:*",
     "@utrecht/index-char-nav-css": "workspace:*",
     "@utrecht/link-button-css": "workspace:*",
-    "@utrecht/link-css": "workspace:*",
+    "@utrecht/link-react": "workspace:*",
     "@utrecht/link-list-css": "workspace:*",
     "@utrecht/link-social-css": "workspace:*",
     "@utrecht/list-social-css": "workspace:*",

packages/component-library-react/src/BreadcrumbNav.tsx

@@ -3,10 +3,10 @@
  * Copyright (c) 2021 Robbert Broersma
  */
 
+import { Link as UtrechtLink } from '@utrecht/link-react';
 import clsx from 'clsx';
 import { ComponentType, ForwardedRef, forwardRef, HTMLAttributes, PropsWithChildren, ReactNode, useId } from 'react';
 import { Heading } from './Heading';
-import { Link as UtrechtLink } from './Link';
 
 export interface BreadcrumbNavProps extends HTMLAttributes<HTMLElement> {
   appearance?: string;

packages/component-library-react/src/LinkList.tsx

@@ -3,10 +3,10 @@
  * Copyright (c) 2023 Gemeente Utrecht
  */
 
+import type { LinkProps } from '@utrecht/link-react';
+import { Link } from '@utrecht/link-react';
 import clsx from 'clsx';
 import { ForwardedRef, forwardRef, HTMLAttributes, PropsWithChildren, ReactNode } from 'react';
-import type { LinkProps } from './Link';
-import { Link } from './Link';
 
 export interface LinkListLinkProps extends LinkProps {
   icon?: ReactNode;

packages/component-library-react/src/NavList.tsx

@@ -1,7 +1,7 @@
+import type { LinkProps } from '@utrecht/link-react';
+import { Link } from '@utrecht/link-react';
 import clsx from 'clsx';
 import { ForwardedRef, forwardRef, HTMLAttributes, PropsWithChildren } from 'react';
-import type { LinkProps } from './Link';
-import { Link } from './Link';
 import type { LinkButtonProps } from './LinkButton';
 import { LinkButton } from './LinkButton';
 

packages/component-library-react/src/TableOfContents.tsx

@@ -3,9 +3,9 @@
  * Copyright (c) 2022 Robbert Broersma
  */
 
+import { Link, LinkProps } from '@utrecht/link-react';
 import { clsx } from 'clsx';
 import { HTMLAttributes, LiHTMLAttributes, type PropsWithChildren } from 'react';
-import { Link, LinkProps } from './Link';
 
 export type TableOfContentsProps = HTMLAttributes<HTMLElement>;
 

packages/component-library-react/src/css-module/index.ts

@@ -106,8 +106,8 @@ export { IndexCharNav } from './IndexCharNav';
 export type { IndexCharNavProps } from '../IndexCharNav';
 export type { ImageProps } from '../Image';
 export { Image } from './Image';
-export type { LinkProps } from '../Link';
-export { Link } from './Link';
+export type { LinkProps } from '@utrecht/link-react/dist/css';
+export { Link } from '@utrecht/link-react/dist/css';
 export type { LinkButtonProps } from '../LinkButton';
 export { LinkButton } from './LinkButton';
 export type { LinkSocialProps } from '../LinkSocial';

packages/component-library-react/src/index.ts

@@ -113,8 +113,8 @@ export { IndexCharNav } from './IndexCharNav';
 export type { IndexCharNavProps } from './IndexCharNav';
 export type { ImageProps } from './Image';
 export { Image } from './Image';
-export type { LinkProps } from './Link';
-export { Link } from './Link';
+export type { LinkProps } from '@utrecht/link-react';
+export { Link } from '@utrecht/link-react';
 export type { LinkButtonProps } from './LinkButton';
 export { LinkButton } from './LinkButton';
 export type { LinkSocialProps } from './LinkSocial';

packages/components-react/link-react/.eslintrc.json

@@ -0,0 +1,8 @@
+{
+  "env": {
+    "jest/globals": true
+  },
+  "rules": {
+    "react/react-in-jsx-scope": "off"
+  }
+}

packages/components-react/link-react/babel.config.cjs

@@ -0,0 +1,12 @@
+module.exports = {
+  presets: [
+    '@babel/preset-env',
+    [
+      '@babel/preset-react',
+      {
+        runtime: 'automatic',
+      },
+    ],
+    '@babel/preset-typescript',
+  ],
+};

packages/components-react/link-react/jest.config.mjs

@@ -0,0 +1,8 @@
+export default {
+  moduleDirectories: ['node_modules', '<rootDir>/'],
+  testEnvironment: 'jest-environment-jsdom',
+  testPathIgnorePatterns: ['/dist/'],
+  moduleNameMapper: {
+    '^@utrecht/(.*)$': '<rootDir>/../$1/src/',
+  },
+};

packages/components-react/link-react/package.json

@@ -0,0 +1,68 @@
+{
+  "name": "@utrecht/link-react",
+  "version": "0.0.0",
+  "author": "Community for NL Design System",
+  "description": "Link component for the Municipality of Utrecht based on the NL Design System architecture",
+  "license": "EUPL-1.2",
+  "main": "./dist/index.cjs.js",
+  "module": "./dist/index.esm.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist/",
+    "src/"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "clean": "rimraf dist *.tsbuildinfo .rollup.cache coverage",
+    "build": "rollup --config ./rollup.config.mjs",
+    "test": "mkdir -p pages && jest --coverage --verbose",
+    "typecheck": "tsc --noEmit"
+  },
+  "devDependencies": {
+    "@babel/plugin-transform-runtime": "7.24.7",
+    "@babel/preset-env": "7.24.7",
+    "@babel/preset-react": "7.24.7",
+    "@babel/preset-typescript": "7.24.7",
+    "@rollup/plugin-babel": "6.0.4",
+    "@rollup/plugin-commonjs": "26.0.1",
+    "@rollup/plugin-json": "6.1.0",
+    "@rollup/plugin-node-resolve": "15.2.3",
+    "@rollup/plugin-typescript": "12.1.0",
+    "@testing-library/dom": "8.20.1",
+    "@testing-library/jest-dom": "6.5.0",
+    "@testing-library/react": "16.0.1",
+    "@testing-library/user-event": "14.5.1",
+    "@types/jest": "29.5.13",
+    "@types/react": "18.3.3",
+    "@types/testing-library__jest-dom": "5.14.9",
+    "@utrecht/link-css": "workspace:*",
+    "jest": "29.7.0",
+    "jest-environment-jsdom": "29.7.0",
+    "react": "18.3.1",
+    "rollup": "4.23.0",
+    "rollup-plugin-filesize": "10.0.0",
+    "rollup-plugin-node-externals": "7.1.2",
+    "rollup-plugin-peer-deps-external": "2.2.4",
+    "rollup-plugin-postcss": "4.0.2",
+    "typescript": "5.6.2"
+  },
+  "keywords": [
+    "nl-design-system"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git+ssh",
+    "url": "[email protected]:nl-design-system/utrecht.git",
+    "directory": "packages/components-react/link-react"
+  },
+  "peerDependencies": {
+    "@babel/runtime": "*",
+    "react": "18",
+    "react-dom": "18"
+  },
+  "dependencies": {
+    "clsx": "2.1.1"
+  }
+}

packages/components-react/link-react/rollup.config.mjs

@@ -0,0 +1,87 @@
+import babel from '@rollup/plugin-babel';
+import commonjs from '@rollup/plugin-commonjs';
+import json from '@rollup/plugin-json';
+import resolve from '@rollup/plugin-node-resolve';
+import typescript from '@rollup/plugin-typescript';
+import { readFileSync } from 'fs';
+import filesize from 'rollup-plugin-filesize';
+import nodeExternal from 'rollup-plugin-node-externals';
+import peerDepsExternal from 'rollup-plugin-peer-deps-external';
+import postcss from 'rollup-plugin-postcss';
+
+const packagePath = new URL('./package.json', import.meta.url).pathname;
+const packageJson = JSON.parse(readFileSync(packagePath, 'utf8'));
+
+/**
+ * @type {import('rollup').RollupOptions}
+ */
+export default [
+  {
+    input: './src/index.tsx',
+    output: [
+      {
+        file: packageJson.main,
+        format: 'cjs',
+        sourcemap: true,
+      },
+      {
+        file: packageJson.module,
+        format: 'es',
+        sourcemap: true,
+      },
+    ],
+    plugins: [
+      peerDepsExternal(),
+      commonjs(),
+      nodeExternal(),
+      resolve({ browser: true }),
+      json(),
+      typescript({ tsconfig: './tsconfig.build.json' }),
+      babel({
+        presets: ['@babel/preset-react'],
+        babelHelpers: 'runtime',
+        exclude: ['node_modules/**', 'dist/**'],
+        extensions: ['.ts', '.tsx'],
+        inputSourceMap: true,
+        plugins: ['@babel/plugin-transform-runtime'],
+      }),
+      filesize(),
+    ],
+  },
+  {
+    input: './src/css.tsx',
+    output: [
+      {
+        file: './dist/css.js',
+        format: 'cjs',
+        sourcemap: true,
+      },
+      {
+        file: './dist/css.mjs',
+        format: 'es',
+        sourcemap: true,
+      },
+    ],
+    plugins: [
+      peerDepsExternal(),
+      commonjs(),
+      nodeExternal(),
+      resolve({ browser: true }),
+      json(),
+      postcss({
+        extensions: ['.css', '.scss'],
+        minimize: true,
+      }),
+      typescript({ tsconfig: './tsconfig.build.json' }),
+      babel({
+        presets: ['@babel/preset-react'],
+        babelHelpers: 'runtime',
+        exclude: ['node_modules/**', 'dist/**'],
+        extensions: ['.ts', '.tsx'],
+        inputSourceMap: true,
+        plugins: ['@babel/plugin-transform-runtime'],
+      }),
+      filesize(),
+    ],
+  },
+];

packages/components-react/link-react/src/css.tsx

@@ -0,0 +1,9 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2020-2025 Frameless B.V.
+ * Copyright (c) 2021-2025 Gemeente Utrecht
+ */
+
+import '@utrecht/link-css/src/index.scss';
+
+export * from './index';

packages/component-library-react/src/Link.test.tsx → packages/components-react/link-react/src/index.test.tsx

@@ -1,6 +1,6 @@
 import { render, screen } from '@testing-library/react';
 import { createRef } from 'react';
-import { Link } from './Link';
+import { Link } from './index';
 import '@testing-library/jest-dom';
 
 describe('Link', () => {

packages/components-react/link-react/tsconfig.build.json

@@ -0,0 +1,6 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "composite": true
+  }
+}

packages/components-react/link-react/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "../tsconfig.base.json",
+  "include": ["src/**/*.ts", "src/**/*.tsx"],
+  "exclude": ["node_modules", "**/*.test.ts", "**/*.test.tsx"],
+  "compilerOptions": {
+    "outDir": "dist",
+    "rootDir": "src"
+  }
+}

packages/components-react/link-react/tsconfig.test.json

@@ -0,0 +1,8 @@
+{
+  "extends": "./tsconfig.json",
+  "include": ["src/**/*.ts", "src/**/*.tsx"],
+  "exclude": ["node_modules", "dist"],
+  "compilerOptions": {
+    "noEmit": true
+  }
+}

packages/storybook-pdf/src/Link.stories.tsx

@@ -1,7 +1,7 @@
 /* @license CC0-1.0 */
 
 import { Meta, StoryObj } from '@storybook/react';
-import { Link } from '@utrecht/component-library-react/src/Link';
+import { Link } from '@utrecht/component-library-react';
 import readme from '@utrecht/link-css/README.md?raw';
 import pdfDocs from '@utrecht/link-css/docs/technology-pdf.nl.md?raw';
 import { mergeMarkdown } from '@utrecht/storybook-helpers/src/markdown';