feat: Add basic SSR support and peerDependecies to react 18.2.0 (#864)

Co-authored-by: Marianne Røsvik <[email protected]> Co-authored-by: Michael Marszalek <[email protected]> Co-authored-by: Tomas Engebretsen <[email protected]> Co-authored-by: Magnus Revheim Martinsen <[email protected]> Co-authored-by: Michael Marszalek <[email protected]>
digdir · Sep 29, 2023 · d512ee2 · d512ee2
1 parent d94a16c
commit d512ee2
Show file tree

Hide file tree

Showing 12 changed files with 75 additions and 66 deletions.
diff --git a/packages/react/package.json b/packages/react/package.json
@@ -15,8 +15,8 @@
     "clean": "rimraf dist"
   },
   "peerDependencies": {
-    "react": ">=16.8",
-    "react-dom": ">=16.8"
+    "react": ">=18.2.0",
+    "react-dom": ">=18.2.0"
   },
   "publishConfig": {
     "access": "public"

diff --git a/packages/react/rollup-terser.mjs b/packages/react/rollup-terser.mjs
@@ -8,29 +8,29 @@ simpler plugin that invokes Terser without Jest workers.
 import { minify } from 'terser';
 
 function terser(terserOptions = {}) {
-    return {
-        name: 'terser',
+  return {
+    name: 'terser',
 
-        async renderChunk(code, _chunk, outputOptions) {
-            const defaultOptions = {
-                sourceMap: !!outputOptions.sourcemap,
-            };
+    async renderChunk(code, _chunk, outputOptions) {
+      const defaultOptions = {
+        sourceMap: !!outputOptions.sourcemap,
+      };
 
-            // eslint-disable-next-line default-case
-            switch (outputOptions.format) {
-                case 'es':
-                case 'esm':
-                    defaultOptions.module = true;
-                    break;
-                case 'cjs':
-                    defaultOptions.toplevel = true;
-                    break;
-            }
+      // eslint-disable-next-line default-case
+      switch (outputOptions.format) {
+        case 'es':
+        case 'esm':
+          defaultOptions.module = true;
+          break;
+        case 'cjs':
+          defaultOptions.toplevel = true;
+          break;
+      }
 
-            const effectiveTerserOptions = { ...defaultOptions, ...terserOptions };
-            return await minify(code, effectiveTerserOptions);
-        },
-    };
+      const effectiveTerserOptions = { ...defaultOptions, ...terserOptions };
+      return await minify(code, effectiveTerserOptions);
+    },
+  };
 }
 
-export default terser;
+export default terser;
diff --git a/packages/react/rollup.config.js b/packages/react/rollup.config.js
@@ -21,10 +21,12 @@ export default [
       {
         file: packageJson.main,
         format: 'cjs',
+        banner: "'use client';",
       },
       {
         file: packageJson.module,
         format: 'esm',
+        banner: "'use client';",
       },
     ],
     external: [
@@ -44,13 +46,19 @@ export default [
       typescript({ tsconfig: './tsconfig.build.json' }),
       svgr({ exportType: 'named' }),
       postcss(),
-      terser(),
+      terser({
+        compress: {
+          // Needed until https://github.com/terser/terser/issues/1320 is fixed
+          directives: false,
+        },
+      }),
       image(),
     ],
   },
   {
     input: 'dist/types/index.d.ts',
     output: [{ file: 'dist/index.d.ts', format: 'esm' }],
+
     plugins: [dts()],
     external: [/@altinn\/figma-design-tokens/, /\.css$/],
   },

diff --git a/packages/react/src/components/Accordion/Accordion.tsx b/packages/react/src/components/Accordion/Accordion.tsx
@@ -13,19 +13,20 @@ export type AccordionProps = {
   children: React.ReactNode;
 } & HTMLAttributes<HTMLDivElement>;
 
-export const Accordion = forwardRef<HTMLDivElement, AccordionProps>(
-  ({ border = false, color = 'neutral', className, ...rest }, ref) => (
-    <div
-      {...rest}
-      className={cn(
-        classes.accordion,
-        classes[color],
-        {
-          [classes.border]: border,
-        },
-        className,
-      )}
-      ref={ref}
-    />
-  ),
-);
+export const Accordion = forwardRef<
+  HTMLDivElement,
+  AccordionProps & { children: React.ReactNode }
+>(({ border = false, color = 'neutral', className, ...rest }, ref) => (
+  <div
+    {...rest}
+    className={cn(
+      classes.accordion,
+      classes[color],
+      {
+        [classes.border]: border,
+      },
+      className,
+    )}
+    ref={ref}
+  />
+));
diff --git a/packages/react/src/components/Accordion/index.ts b/packages/react/src/components/Accordion/index.ts
@@ -29,4 +29,4 @@ export type {
   AccordionHeaderProps,
   AccordionItemProps,
 };
-export { Accordion };
+export { Accordion, AccordionItem, AccordionContent, AccordionHeader };
diff --git a/packages/react/src/components/Chip/index.ts b/packages/react/src/components/Chip/index.ts
@@ -1,8 +1,8 @@
-import { Group } from './Group';
+import { Group as ChipGroup } from './Group';
 import type { ChipGroupProps } from './Group';
-import { RemovableChip } from './Removable';
+import { RemovableChip as ChipRemovable } from './Removable';
 import type { RemovableChipProps } from './Removable';
-import { ToggleChip } from './Toggle';
+import { ToggleChip as ChipToggle } from './Toggle';
 import type { ToggleChipProps } from './Toggle/';
 
 type ChipComponent = {
@@ -14,20 +14,20 @@ type ChipComponent = {
    *    <Chip.Removable>Tekst</Chip.Removable>
    * </Chip.Group>
    */
-  Group: typeof Group;
-  Removable: typeof RemovableChip;
-  Toggle: typeof ToggleChip;
+  Group: typeof ChipGroup;
+  Removable: typeof ChipRemovable;
+  Toggle: typeof ChipToggle;
 };
 
 const Chip: ChipComponent = {
-  Group: Group,
-  Removable: RemovableChip,
-  Toggle: ToggleChip,
+  Group: ChipGroup,
+  Removable: ChipRemovable,
+  Toggle: ChipToggle,
 };
 
 Chip.Group.displayName = 'Chip.Group';
 Chip.Removable.displayName = 'Chip.Removable';
 Chip.Toggle.displayName = 'Chip.Toggle';
 
 export type { RemovableChipProps, ToggleChipProps, ChipGroupProps };
-export { Chip };
+export { Chip, ChipGroup, ChipRemovable, ChipToggle };
diff --git a/packages/react/src/components/ToggleGroup/index.ts b/packages/react/src/components/ToggleGroup/index.ts
@@ -14,4 +14,4 @@ ToggleGroup.Item = ToggleGroupItem;
 
 ToggleGroup.Item.displayName = 'ToggleGroup.Item';
 
-export { ToggleGroup };
+export { ToggleGroup, ToggleGroupItem };
diff --git a/packages/react/src/components/form/Checkbox/index.ts b/packages/react/src/components/form/Checkbox/index.ts
@@ -26,4 +26,4 @@ Checkbox.Group.displayName = 'Checkbox.Group';
 
 export type { CheckboxProps, CheckboxGroupProps };
 
-export { Checkbox };
+export { Checkbox, CheckboxGroup };
diff --git a/packages/react/src/components/form/Radio/index.ts b/packages/react/src/components/form/Radio/index.ts
@@ -24,4 +24,4 @@ Radio.Group.displayName = 'Radio.Group';
 
 export type { RadioProps, RadioGroupProps };
 
-export { Radio };
+export { Radio, RadioGroup };
diff --git a/storefront/pages/god-praksis/tilgjengelighet/forsta-synsnedsettelse.mdx b/storefront/pages/god-praksis/tilgjengelighet/forsta-synsnedsettelse.mdx
@@ -24,8 +24,8 @@ Brønnøysundregistrene har med hjelp fra Blindeforbundet, undersøkt hvordan me
 <ResponsiveIframe
   src='https://player.vimeo.com/video/713674977?h=31aae91dc0'
   title='Video from Brregs vimeo accounting showing people with reduced vision use digital products'
-  frameborder='0'
+  frameBorder='0'
   allow='autoplay; fullscreen; picture-in-picture'
-  allowfullscreen
+  allowFullScreen
   aspectRatio='16-9'
 ></ResponsiveIframe>
diff --git a/storefront/pages/grunnleggende/for-designere/kom-i-gang.mdx b/storefront/pages/grunnleggende/for-designere/kom-i-gang.mdx
@@ -48,9 +48,9 @@ Alle komponenter kommer med ulike varianter og egenskaper. I Button-komponenten
 <ResponsiveIframe
   src='/img/button-variant-properties.mp4'
   title='Skjermopptak av Figma som viser hvordan bytte mellom ulike varianter av en knapp.'
-  frameborder='0'
+  frameBorder='0'
   allow='autoplay; fullscreen; picture-in-picture'
-  allowfullscreen
+  allowFullScreen
   aspectRatio='16-9'
 ></ResponsiveIframe>
 
@@ -65,9 +65,9 @@ Alle tokens er i sync med [Figma variabler](https://docs.tokens.studio/variables
 <ResponsiveIframe
   src='/img/brand-variables.mp4'
   title='Skjermopptak av Figma som viser hvordan man kan bytte mellom ulike brands i Figma'
-  frameborder='0'
+  frameBorder='0'
   allow='autoplay; fullscreen; picture-in-picture'
-  allowfullscreen
+  allowFullScreen
   aspectRatio='16-9'
 ></ResponsiveIframe>
 
@@ -78,9 +78,9 @@ For admingrensesnitt eller ekspertverktøy kan compact-mode benyttes. Tekststør
 <ResponsiveIframe
   src='/img/density2.mp4'
   title='Skjermopptak av Figma som viser hvordan man kan bytte mellom normal og kompakt i Figma'
-  frameborder='0'
+  frameBorder='0'
   allow='autoplay; fullscreen; picture-in-picture'
-  allowfullscreen
+  allowFullScreen
   aspectRatio='16-9'
 ></ResponsiveIframe>
 
@@ -93,9 +93,9 @@ Les mer om [typografi](/grunnleggende/designelementer/typografi).
 <ResponsiveIframe
   src='/img/fluid-text-size.mp4'
   title='Skjermopptak av Figma som viser hvordan størrelse og avstand på tekst blir mindre i en mindre viewport'
-  frameborder='0'
+  frameBorder='0'
   allow='autoplay; fullscreen; picture-in-picture'
-  allowfullscreen
+  allowFullScreen
   aspectRatio='16-9'
 ></ResponsiveIframe>
 

diff --git a/yarn.lock b/yarn.lock
@@ -3925,8 +3925,8 @@ __metadata:
     "@navikt/aksel-icons": ^3.2.4
     react-number-format: 5.2.2
   peerDependencies:
-    react: ">=16.8"
-    react-dom: ">=16.8"
+    react: ">=18.2.0"
+    react-dom: ">=18.2.0"
   languageName: unknown
   linkType: soft
Original file line number	Diff line number	Diff line change
Expand Up		@@ -14,4 +14,4 @@ ToggleGroup.Item = ToggleGroupItem;

		ToggleGroup.Item.displayName = 'ToggleGroup.Item';

		export { ToggleGroup };
		export { ToggleGroup, ToggleGroupItem };
Original file line number	Diff line number	Diff line change
Expand Up		@@ -26,4 +26,4 @@ Checkbox.Group.displayName = 'Checkbox.Group';

		export type { CheckboxProps, CheckboxGroupProps };

		export { Checkbox };
		export { Checkbox, CheckboxGroup };
Original file line number	Diff line number	Diff line change
Expand Up		@@ -24,4 +24,4 @@ Radio.Group.displayName = 'Radio.Group';

		export type { RadioProps, RadioGroupProps };

		export { Radio };
		export { Radio, RadioGroup };