feat(ui): create new shared ui package

- [x] create Navigation components

.eslintrc.js

@@ -51,7 +51,7 @@ module.exports = {
       },
     },
     {
-      extends: ['plugin:react/recommended', 'eslint-config-prettier', './.eslintrc.js.json'],
+      extends: ['plugin:react/recommended', 'eslint-config-prettier', './.eslintrc.js.json', './.eslintrc.react.json'],
       files: ['*.ts', '*.tsx'],
       parser: '@typescript-eslint/parser',
       parserOptions: {
@@ -63,6 +63,7 @@ module.exports = {
           './apps/vth-dashboard/tsconfig.json',
           './apps/vth-dashboard/src/admin/tsconfig.json',
           './packages/catalogi-data/tsconfig.json',
+          './packages/ui/tsconfig.json',
           './packages/upl/tsconfig.json',
           './packages/samenwerkende-catalogi/tsconfig.json',
           './packages/strapi-plugin-uniform-product-name/tsconfig.json',

.gitignore

@@ -115,6 +115,7 @@ exports
 build
 .strapi-updater.json
 dist/*
+tsconfig.tsbuildinfo
 ############################
 # samenwerkende-catalogi
 ############################

Dockerfile.dev

@@ -20,6 +20,7 @@ COPY ./packages/samenwerkende-catalogi/package.json packages/samenwerkende-catal
 COPY ./packages/strapi-plugin-gemeente-select/package.json packages/strapi-plugin-gemeente-select/package.json
 COPY ./packages/strapi-plugin-scheme-select/package.json packages/strapi-plugin-scheme-select/package.json
 COPY ./packages/strapi-tiptap-editor/package.json packages/strapi-tiptap-editor/package.json
+COPY ./packages/ui/package.json packages/ui/package.json
 COPY ./packages/upl/package.json packages/upl/package.json
 COPY ./packages/strapi-plugin-uniform-product-name/package.json packages/strapi-plugin-uniform-product-name/package.json
 
@@ -39,6 +40,7 @@ COPY . /opt/app/
 RUN  npm run build --workspace @frameless/upl && \
     npm run build --workspace @frameless/strapi-plugin-uniform-product-name && \
     npm run build --workspace @frameless/strapi-tiptap-editor && \
+    npm run build --workspace @frameless/ui && \
     npm run build --workspace @frameless/catalogi-data && \
     npm run build --workspace @frameless/samenwerkende-catalogi
 

packages/ui/global.d.ts

@@ -0,0 +1,6 @@
+declare module 'rollup-plugin-peer-deps-external';
+
+declare module '*.scss' {
+  const content: Record<string, string>;
+  export default content;
+}

packages/ui/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "@frameless/ui",
+  "version": "0.0.0-semantically-released",
+  "description": "A shared ui library",
+  "main": "./dist/index.cjs.js",
+  "module": "./dist/index.esm.js",
+  "types": "./dist/src/index.d.ts",
+  "private": true,
+  "files": [
+    "dist/"
+  ],
+  "keywords": [],
+  "repository": {
+    "type": "git+ssh",
+    "url": "git@github.com:frameless/strapi.git"
+  },
+  "publishConfig": {
+    "registry": "https://npm.pkg.github.com/"
+  },
+  "author": {
+    "name": "@frameless"
+  },
+  "engines": {
+    "node": "18.x.x"
+  },
+  "license": "MIT",
+  "peerDependencies": {
+    "@utrecht/component-library-react": ">=1.0.0-alpha.365",
+    "@utrecht/web-component-library-react": ">=1.0.0-alpha.555",
+    "react": "^17 || ^18",
+    "react-dom": "^17 || ^18"
+  },
+  "scripts": {
+    "prebuild": "yarn clean",
+    "build": "rollup --config rollup.config.ts --configPlugin typescript --bundleConfigAsCjs",
+    "watch": "rollup --config rollup.config.ts --configPlugin typescript -w --bundleConfigAsCjs",
+    "clean": "rimraf dist .rollup.cache"
+  },
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "25.0.4",
+    "@rollup/plugin-json": "6.0.0",
+    "@rollup/plugin-node-resolve": "15.2.1",
+    "@rollup/plugin-typescript": "11.1.3",
+    "@types/react-dom": "18.2.7",
+    "@utrecht/component-library-react": "1.0.0-alpha.365",
+    "@utrecht/web-component-library-react": "1.0.0-alpha.555",
+    "autoprefixer": "10.4.15",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "rollup": "3.29.2",
+    "rollup-plugin-copy": "3.5.0",
+    "rollup-plugin-peer-deps-external": "2.2.4",
+    "rollup-plugin-postcss": "4.0.2",
+    "rollup-plugin-scss": "4.0.0",
+    "rollup-plugin-terser": "7.0.2",
+    "rollup-plugin-typescript2": "0.35.0"
+  },
+  "dependencies": {
+    "focus-trap-react": "10.2.1"
+  }
+}

packages/ui/rollup.config.ts

@@ -0,0 +1,65 @@
+import commonjs from '@rollup/plugin-commonjs';
+import json from '@rollup/plugin-json';
+import { nodeResolve } from '@rollup/plugin-node-resolve';
+import { readFileSync } from 'fs';
+import { RollupOptions } from 'rollup';
+import copy from 'rollup-plugin-copy';
+import peerDepsExternal from 'rollup-plugin-peer-deps-external';
+import postcss from 'rollup-plugin-postcss';
+import scss from 'rollup-plugin-scss';
+import { terser } from 'rollup-plugin-terser';
+import typescript from 'rollup-plugin-typescript2';
+
+const packageJson = JSON.parse(readFileSync(new URL('./package.json', import.meta.url), 'utf8'));
+
+export const outputGlobals = {
+  react: 'React',
+  'react-dom': 'ReactDOM',
+};
+
+const config: RollupOptions = {
+  input: 'src/index.ts', // Entry point to your library
+  output: [
+    {
+      file: packageJson.main,
+      format: 'cjs', // CommonJS format
+      exports: 'auto', // Automatic exports for CommonJS
+      globals: outputGlobals, // Global variables exposed to the browser
+    },
+    {
+      file: packageJson.module,
+      format: 'esm', // ES Module format
+      globals: outputGlobals,
+    },
+  ],
+  plugins: [
+    typescript({
+      tsconfig: 'tsconfig.json',
+    }),
+    nodeResolve(),
+    commonjs(),
+    terser(), // Minify the output
+    peerDepsExternal(), // Treat peer dependencies as externals
+    copy({
+      targets: [{ src: 'src/types/*.d.ts', dest: 'dist/types' }], // Copy type declarations to the dist folder
+    }),
+    scss({
+      // Specify the output file where the bundled CSS will be written
+      output: 'dist/bundle.css',
+      fileName: 'bundle.css',
+    }),
+    postcss({
+      // Include any PostCSS plugins and their configurations here
+      plugins: [require('autoprefixer')],
+      extract: 'dist/bundle.css', // Specify the output CSS file
+      minimize: true, // Minify the CSS
+      modules: true,
+      autoModules: true,
+      use: ['sass'],
+    }),
+    json(),
+  ],
+  external: ['react', 'react-dom'],
+};
+
+export default config;

packages/ui/src/components/Drawer/index.module.scss

@@ -0,0 +1,10 @@
+.utrecht-drawer {
+  background-color: rgb(0 0 0 / 25%);
+  display: block;
+  inset-block-end: 0;
+  inset-block-start: 0;
+  inset-inline-end: 0;
+  inset-inline-start: 0;
+  position: absolute;
+  z-index: 1000;
+}

packages/ui/src/components/Drawer/index.tsx

@@ -0,0 +1,45 @@
+import classnames from 'classnames/bind';
+import FocusTrap from 'focus-trap-react';
+import { ForwardedRef, forwardRef, HTMLAttributes, PropsWithChildren } from 'react';
+import styles from './index.module.scss';
+interface DrawerProps extends HTMLAttributes<HTMLDivElement> {
+  onDrawerClose: () => void;
+  open: boolean;
+  initialFocus?: string | false;
+}
+
+const css = classnames.bind(styles);
+
+export const Drawer = forwardRef(
+  (
+    { children, open, initialFocus = false, ...restProps }: PropsWithChildren<DrawerProps>,
+    ref: ForwardedRef<HTMLDivElement>,
+  ) => {
+    const focusTrapOptions = {
+      checkCanFocusTrap: (trapContainers: Element[]) => {
+        const results = trapContainers.map((trapContainer) => {
+          return new Promise<void>((resolve) => {
+            const interval = setInterval(() => {
+              if (getComputedStyle(trapContainer).opacity !== '0') {
+                resolve();
+                clearInterval(interval);
+              }
+            }, 10);
+          });
+        });
+        // Return a promise that resolves when all the trap containers are able to receive focus
+        return Promise.all(results);
+      },
+      initialFocus,
+    } as any;
+    return (
+      <FocusTrap active={open} focusTrapOptions={focusTrapOptions}>
+        <div className={css('utrecht-drawer', restProps.className)} ref={ref} {...restProps}>
+          {children}
+        </div>
+      </FocusTrap>
+    );
+  },
+);
+
+Drawer.displayName = 'Drawer';

packages/ui/src/components/Navigation/NavigationIcon/index.tsx

@@ -0,0 +1,42 @@
+import { forwardRef } from 'react';
+
+interface NavigationIconProps {
+  name: string;
+  ariaHidden?: boolean;
+}
+
+export const NavigationIcon = forwardRef<SVGSVGElement, NavigationIconProps>(
+  ({ name, ariaHidden = true, ...restProps }, ref) => (
+    <svg
+      className="utrecht-topnav__icon"
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden={ariaHidden}
+      ref={ref}
+      {...restProps}
+    >
+      {name === 'hamburger' && (
+        <g>
+          <line x1="3" y1="12" x2="21" y2="12" />
+          <line x1="3" y1="6" x2="21" y2="6" />
+          <line x1="3" y1="18" x2="21" y2="18" />
+        </g>
+      )}
+      {name === 'close' && (
+        <g>
+          <line x1="18" y1="6" x2="6" y2="18" />
+          <line x1="6" y1="6" x2="18" y2="18" />
+        </g>
+      )}
+    </svg>
+  ),
+);
+
+NavigationIcon.displayName = 'NavigationIcon';

packages/ui/src/components/Navigation/NavigationItem/index.module.scss

@@ -0,0 +1,25 @@
+.utrecht-navigation__item {
+  flex: 1 1 auto;
+  padding-block-end: var(--utrecht-navigation-item-padding-block-end);
+  padding-block-start: var(--utrecht-navigation-item-padding-block-start);
+  padding-inline-end: var(--utrecht-navigation-item-padding-inline-end);
+  padding-inline-start: var(--utrecht-navigation-item-padding-inline-start);
+}
+
+.utrecht-navigation__item--mobile {
+  --utrecht-navigation-item-padding-block-start: var(--utrecht-navigation-item-mobile-padding-block-start);
+  --utrecht-navigation-item-padding-block-end: var(--utrecht-navigation-item-mobile-padding-block-end);
+  --utrecht-navigation-item-padding-inline-start: var(--utrecht-navigation-item-mobile-padding-inline-start);
+  --utrecht-navigation-item-padding-inline-end: var(--utrecht-navigation-item-mobile-padding-inline-end);
+
+  align-items: center;
+  display: flex;
+  justify-content: center;
+}
+
+.utrecht-navigation__item-icon::before {
+  color: var(--utrecht-navigation-item-icon-color);
+  content: "•";
+  font-size: inherit;
+  margin-inline-end: var(--utrecht-navigation-item-icon-margin-inline-end);
+}

packages/ui/src/components/Navigation/NavigationItem/index.tsx

@@ -0,0 +1,25 @@
+import classnames from 'classnames/bind';
+import { ForwardedRef, forwardRef, LiHTMLAttributes, PropsWithChildren } from 'react';
+import styles from './index.module.scss';
+
+const css = classnames.bind(styles);
+
+interface NavigationItemProps extends LiHTMLAttributes<HTMLLIElement> {
+  mobile?: boolean;
+}
+export const NavigationItem = forwardRef(
+  ({ children, mobile, ...restProps }: PropsWithChildren<NavigationItemProps>, ref: ForwardedRef<HTMLLIElement>) => (
+    <li
+      className={css('utrecht-navigation__item', {
+        'utrecht-navigation__item--mobile': mobile,
+        'utrecht-navigation__item-icon': mobile,
+      })}
+      ref={ref}
+      {...restProps}
+    >
+      {children}
+    </li>
+  ),
+);
+
+NavigationItem.displayName = 'NavigationItem';

packages/ui/src/components/Navigation/NavigationLink/index.module.scss

@@ -0,0 +1,58 @@
+.utrecht-navigation__link {
+  --utrecht-link-text-decoration: none;
+  --utrecht-link-active-color: var(--utrecht-navigation-link-active-color);
+  --utrecht-link-hover-text-decoration-thickness: var(--utrecht-navigation-link-hover-decoration-thickness);
+  --utrecht-link-hover-color: var(--utrecht-navigation-link-hover-color);
+  --utrecht-link-color: var(--utrecht-navigation-link-color);
+  --utrecht-link-focus-text-decoration-thickness: var(--utrecht-navigation-link-focus-declaration-thickness);
+  --utrecht-link-visited-color: var(--utrecht-navigation-link-color);
+
+  background-color: var(--utrecht-navigation-link-background-color);
+  border-inline-end-color: var(--utrecht-navigation-link-border-color);
+  border-inline-end-style: solid;
+  border-inline-end-width: var(--utrecht-navigation-link-border-inline-end-width);
+  display: flex;
+  font-weight: var(--utrecht-navigation-link-font-weight);
+  justify-content: var(--utrecht-navigation-link-justify-content);
+  padding-block-end: var(--utrecht-navigation-link-padding-block-end);
+  padding-block-start: var(--utrecht-navigation-link-padding-block-start);
+  padding-inline-end: var(--utrecht-navigation-link-padding-inline-end);
+  padding-inline-start: var(--utrecht-navigation-link-padding-inline-start);
+  text-align: var(--utrecht-navigation-link-text-align);
+}
+
+.utrecht-navigation__link:hover {
+  --utrecht-navigation-link-background-color: var(--utrecht-navigation-link-hover-background-color);
+}
+
+.utrecht-navigation__link:focus {
+  --utrecht-link-focus-color: var(--utrecht-navigation-link-focus-color);
+  --utrecht-link-focus-background-color: var(--utrecht-color-yellow-80);
+}
+
+.utrecht-navigation__link:active:focus {
+  color: var(--utrecht-navigation-link-active-focus-color);
+}
+
+.utrecht-navigation__link--mobile {
+  --utrecht-navigation-link-padding-inline-start: var(--utrecht-navigation-link-mobile-padding-inline-start);
+  --utrecht-navigation-link-padding-inline-end: var(--utrecht-navigation-link-mobile-padding-inline-end);
+  --utrecht-navigation-link-padding-block-start: var(--utrecht-navigation-link-mobile-padding-block-start);
+  --utrecht-navigation-link-padding-block-end: var(--utrecht-navigation-link-mobile-padding-block-end);
+  --utrecht-navigation-link-border-inline-end-width: 0;
+  --utrecht-navigation-link-border-color: transparent;
+  --utrecht-navigation-link-background-color: var(--utrecht-navigation-link-mobile-background-color);
+  --utrecht-navigation-link-color: var(--utrecht-navigation-link-mobile-color);
+  --utrecht-navigation-link-justify-content: var(--utrecht-navigation-link-mobile-justify-content);
+
+  flex: 1 1 auto;
+  transition-duration: var(--utrecht-navigation-link-mobile-transition-duration);
+  transition-property: font-weight;
+  transition-timing-function: var(--utrecht-navigation-link-mobile-transition-timing-function);
+}
+
+.utrecht-navigation__link--mobile:hover {
+  --utrecht-navigation-link-background-color: var(--utrecht-navigation-link-mobile-hover-background-color);
+  --utrecht-link-hover-color: var(--utrecht-navigation-link-mobile-hover-color);
+  --utrecht-navigation-link-font-weight: var(--utrecht-navigation-mobile-hover-link-font-weight);
+}