Extract nlds tokens from package builds

apps/admin-server/src/pages/projects/[project]/settings/index.tsx

@@ -34,6 +34,7 @@ const formSchema = z.object({
     message: 'De datum moet nog niet geweest zijn!',
   }),
   cssUrl: z.string().optional(),
+  nldsUrl: z.string().optional(),
   // We don't want to restrict this URL too much
   url: z.string().regex(/^(?:([a-z0-9.:]+))?$/g, {
     message: 'De URL mag alleen kleine letters, cijfers en punten bevatten. Tip: gebruik geen https:// voor de URL'
@@ -61,16 +62,17 @@ export default function ProjectSettings() {
 
 
       return {
-      name: data?.name || '',
-      endDate: data?.config?.project?.endDate
-        ? new Date(data?.config?.project?.endDate)
-        : new Date(currentDate.getFullYear(), currentDate.getMonth() + 3),
-      cssUrl: data?.config?.project?.cssUrl || '',
-      url: data?.url || '',
-      basicAuthActive: data?.config?.basicAuth?.active || false,
-      username: data?.config?.basicAuth?.username || '',
-      password: data?.config?.basicAuth?.password || '',
-    }
+        name: data?.name || '',
+        endDate: data?.config?.project?.endDate
+          ? new Date(data?.config?.project?.endDate)
+          : new Date(currentDate.getFullYear(), currentDate.getMonth() + 3),
+        nldsUrl: data?.config?.project?.nldsUrl || '',
+        cssUrl: data?.config?.project?.cssUrl || '',
+        url: data?.url || '',
+        basicAuthActive: data?.config?.basicAuth?.active || false,
+        username: data?.config?.basicAuth?.username || '',
+        password: data?.config?.basicAuth?.password || '',
+      }
     },
     [data]
   );
@@ -107,6 +109,7 @@ export default function ProjectSettings() {
         {
           project: {
             endDate: values.endDate,
+            nldsUrl: values.nldsUrl,
             cssUrl: values.cssUrl
           },
           basicAuth: {
@@ -197,6 +200,20 @@ export default function ProjectSettings() {
                       label="Einddatum"
                       fieldInfo="Plannen indienen, reacties plaatsen of liken is na deze datum niet meer mogelijk."
                     />
+                    <FormField
+                      control={form.control}
+                      name="nldsUrl"
+                      render={({ field }) => (
+                        <FormItem className="col-span-full md:col-span-1 flex flex-col">
+                          <FormLabel>Geef de URL voor de NLDS design tokens (css bestand)</FormLabel>
+                          <FormControl>
+                            <Input placeholder="Url" {...field} />
+                          </FormControl>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+
                     <FormField
                       control={form.control}
                       name="cssUrl"
@@ -241,28 +258,28 @@ export default function ProjectSettings() {
                       />
                     ) : null}
                     <div>
-                    <FormField
+                      <FormField
                         control={form.control}
                         name="basicAuthActive"
-                        render={ function ({ field }) {
+                        render={function ({ field }) {
                           setBasicAuthActive(field.value ?? false);
-                          return(
-                          <FormItem className="col-span-full md:col-span-1 flex flex-col">
-                            <FormLabel>
-                              Wil je de website beveiligen met een gebruikersnaam en wachtwoord?
-                            </FormLabel>
-                            <Switch.Root
-                              className="block w-[50px] h-[25px] bg-stone-300 rounded-full relative focus:shadow-[0_0_0_2px] focus:shadow-black data-[state=checked]:bg-primary outline-none cursor-default mt-2"
-                              onCheckedChange={(e: boolean) => {
-                                setBasicAuthActive(!basicAuthActive)
-                                field.onChange(e);
-                              }}
-                              checked={field.value}>
-                              <Switch.Thumb className="block w-[21px] h-[21px] bg-white rounded-full transition-transform duration-100 translate-x-0.5 will-change-transform data-[state=checked]:translate-x-[27px]" />
-                            </Switch.Root>
-                        </FormItem>)
-                      }}
-                    />
+                          return (
+                            <FormItem className="col-span-full md:col-span-1 flex flex-col">
+                              <FormLabel>
+                                Wil je de website beveiligen met een gebruikersnaam en wachtwoord?
+                              </FormLabel>
+                              <Switch.Root
+                                className="block w-[50px] h-[25px] bg-stone-300 rounded-full relative focus:shadow-[0_0_0_2px] focus:shadow-black data-[state=checked]:bg-primary outline-none cursor-default mt-2"
+                                onCheckedChange={(e: boolean) => {
+                                  setBasicAuthActive(!basicAuthActive)
+                                  field.onChange(e);
+                                }}
+                                checked={field.value}>
+                                <Switch.Thumb className="block w-[21px] h-[21px] bg-white rounded-full transition-transform duration-100 translate-x-0.5 will-change-transform data-[state=checked]:translate-x-[27px]" />
+                              </Switch.Root>
+                            </FormItem>)
+                        }}
+                      />
                     </div>
                     {basicAuthActive ? (
                       <>

apps/api-server/.gitignore

@@ -6,6 +6,7 @@
 *.css
 coverage/
 /init
+package-lock.json
 
 ### Exclude project files for Jetbrains users ###
 .idea

apps/api-server/src/routes/widget/widget.js

@@ -276,6 +276,7 @@ function getWidgetJavascriptOutput(
   let css = '';
 
   const data = JSON.parse(widgetConfig)
+  const nldsCss = data.project?.nldsUrl ? `<link href="${data.project.nldsUrl}" rel="stylesheet">` : '';
   const extraCss = data.project?.cssUrl ? `<link href="${data.project.cssUrl}" rel="stylesheet">` : '';
 
   widgetSettings.js.forEach((file) => {
@@ -315,6 +316,7 @@ function getWidgetJavascriptOutput(
           document.querySelector('head').innerHTML += \`
             <style>${css}</style>
             <link href="${remixIconCss}" rel="stylesheet">
+            ${nldsCss}
             ${extraCss}
           \`;
 

apps/cms-server/modules/@apostrophecms/global/index.js

@@ -162,9 +162,9 @@ module.exports = {
         def: '#logo-image {\n  max-height: 50px;\n}',
         label: 'Extra CSS',
       },
-      customCssLink: {
+      customNldsLink: {
         type: 'string',
-        label: 'URL voor CSS imports (optioneel)',
+        label: 'URL voor NLDS import (optioneel)',
       },
       customCssLink: {
         type: 'array',
@@ -297,7 +297,7 @@ module.exports = {
       },
       css: {
         label: 'Vormgeving',
-        fields: ['cssExtras', 'customCssLink', 'favicon', 'compactMenu'],
+        fields: ['cssExtras', 'customNldsLink', 'customCssLink', 'favicon', 'compactMenu'],
       },
       login: {
         label: 'Gebruikers login',

apps/cms-server/views/partials/css.html

@@ -4,6 +4,12 @@
 </style>
 {% endif %}
 
+{% if data.global.customNldsLink %}
+  {% for link in data.global.customNldsLink %}
+    <link rel="stylesheet" href="{{ link.item }}">
+  {% endfor %}
+{% endif %}
+
 {% if data.global.customCssLink %}
   {% for link in data.global.customCssLink %}
     <link rel="stylesheet" href="{{ link.item }}">

packages/agenda/vite.config.ts

@@ -1,33 +1,11 @@
-import react from '@vitejs/plugin-react';
 import { defineConfig } from 'vite';
+import {viteSetup} from '../configs/vite-setup'
 
 // https://vitejs.dev/config/
 export default defineConfig(({ command }) => {
-  // When running in dev mode, use the React plugin
-  if (command === 'serve') {
-    return {
-      plugins: [react()],
-    };
-    // During build, use the classic runtime and build as an IIFE so we can deliver it to the browser
-  } else {
-    return {
-      plugins: [react({ jsxRuntime: 'classic' })],
-      build: {
-        lib: {
-          formats: ['iife'],
-          entry: 'src/agenda.tsx',
-          name: 'OpenstadHeadlessAgenda',
-        },
-        rollupOptions: {
-          external: ['react', 'react-dom', 'remixicon/fonts/remixicon.css'],
-          output: {
-            globals: {
-              react: 'React',
-              'react-dom': 'ReactDOM',
-            },
-          },
-        },
-      },
-    };
-  }
+
+  return viteSetup({command: command, entryName: 'agenda', name: 'OpenstadHeadlessAgenda'})
+
 });
+
+

packages/apostrophe-widgets/accordion/vite.config.ts

@@ -1,33 +1,9 @@
-import react from '@vitejs/plugin-react';
 import { defineConfig } from 'vite';
+import {viteSetup} from '../../configs/vite-setup'
 
 // https://vitejs.dev/config/
 export default defineConfig(({ command }) => {
-  // When running in dev mode, use the React plugin
-  if (command === 'serve') {
-    return {
-      plugins: [react()],
-    };
-    // During build, use the classic runtime and build as an IIFE so we can deliver it to the browser
-  } else {
-    return {
-      plugins: [react({ jsxRuntime: 'classic' })],
-      build: {
-        lib: {
-          formats: ['iife'],
-          entry: 'src/accordion.tsx',
-          name: 'ApostropheWidgetsAccordion',
-        },
-        rollupOptions: {
-          external: ['react', 'react-dom', 'remixicon/fonts/remixicon.css'],
-          output: {
-            globals: {
-              'react': 'React',
-              'react-dom': 'ReactDOM',
-            },
-          },
-        },
-      },
-    };
-  }
-});
+
+  return viteSetup({command: command, entryName: 'accordion', name: 'ApostropheWidgetsAccordion'})
+
+});

packages/apostrophe-widgets/alert-box/vite.config.ts

@@ -1,33 +1,9 @@
-import react from '@vitejs/plugin-react';
 import { defineConfig } from 'vite';
+import {viteSetup} from '../../configs/vite-setup'
 
 // https://vitejs.dev/config/
 export default defineConfig(({ command }) => {
-  // When running in dev mode, use the React plugin
-  if (command === 'serve') {
-    return {
-      plugins: [react()],
-    };
-    // During build, use the classic runtime and build as an IIFE so we can deliver it to the browser
-  } else {
-    return {
-      plugins: [react({ jsxRuntime: 'classic' })],
-      build: {
-        lib: {
-          formats: ['iife'],
-          entry: 'src/alert-box.tsx',
-          name: 'ApostropheWidgetsAlertBox',
-        },
-        rollupOptions: {
-          external: ['react', 'react-dom', 'remixicon/fonts/remixicon.css'],
-          output: {
-            globals: {
-              'react': 'React',
-              'react-dom': 'ReactDOM',
-            },
-          },
-        },
-      },
-    };
-  }
-});
+
+  return viteSetup({command: command, entryName: 'alert-box', name: 'ApostropheWidgetsAlertBox'})
+
+});

packages/apostrophe-widgets/button/vite.config.ts

@@ -1,33 +1,9 @@
-import react from '@vitejs/plugin-react';
 import { defineConfig } from 'vite';
+import {viteSetup} from '../../configs/vite-setup'
 
 // https://vitejs.dev/config/
 export default defineConfig(({ command }) => {
-  // When running in dev mode, use the React plugin
-  if (command === 'serve') {
-    return {
-      plugins: [react()],
-    };
-    // During build, use the classic runtime and build as an IIFE so we can deliver it to the browser
-  } else {
-    return {
-      plugins: [react({ jsxRuntime: 'classic' })],
-      build: {
-        lib: {
-          formats: ['iife'],
-          entry: 'src/button.tsx',
-          name: 'ApostropheWidgetsButton',
-        },
-        rollupOptions: {
-          external: ['react', 'react-dom', 'remixicon/fonts/remixicon.css'],
-          output: {
-            globals: {
-              'react': 'React',
-              'react-dom': 'ReactDOM',
-            },
-          },
-        },
-      },
-    };
-  }
-});
+
+  return viteSetup({command: command, entryName: 'button', name: 'ApostropheWidgetsButton'})
+
+});

packages/apostrophe-widgets/heading/vite.config.ts

@@ -1,33 +1,9 @@
-import react from '@vitejs/plugin-react';
 import { defineConfig } from 'vite';
+import {viteSetup} from '../../configs/vite-setup'
 
 // https://vitejs.dev/config/
 export default defineConfig(({ command }) => {
-  // When running in dev mode, use the React plugin
-  if (command === 'serve') {
-    return {
-      plugins: [react()],
-    };
-    // During build, use the classic runtime and build as an IIFE so we can deliver it to the browser
-  } else {
-    return {
-      plugins: [react({ jsxRuntime: 'classic' })],
-      build: {
-        lib: {
-          formats: ['iife'],
-          entry: 'src/heading.tsx',
-          name: 'ApostropheWidgetsHeading',
-        },
-        rollupOptions: {
-          external: ['react', 'react-dom', 'remixicon/fonts/remixicon.css'],
-          output: {
-            globals: {
-              'react': 'React',
-              'react-dom': 'ReactDOM',
-            },
-          },
-        },
-      },
-    };
-  }
-});
+
+  return viteSetup({command: command, entryName: 'heading', name: 'ApostropheWidgetsHeading'})
+
+});