feat: make Next.js 13 compatible (#442)

mitrotasios · bencarletonn · web-flow · commit ea56f9df47fc · 2023-05-12T20:04:23.000+02:00
* feat: make Next.js 13 compatible (#437) Co-authored-by: bcarleton3 <bcarleton3@bloomberg.net> * fix: AccordionList use client * fix: select items use client * fix: AccordionHeader use client; --------- Co-authored-by: Ben Carleton <bencarleton@rocketmail.com> Co-authored-by: bcarleton3 <bcarleton3@bloomberg.net>
diff --git a/package.json b/package.json
@@ -83,6 +83,7 @@
     "rollup-plugin-dts": "^4.2.1",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "^4.0.2",
+    "rollup-plugin-preserve-directives": "^0.1.0",
     "rollup-plugin-terser": "^7.0.2",
     "rollup-plugin-typescript-paths": "^1.3.1",
     "semantic-release": "^21.0.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/rollup.config.js b/rollup.config.js
@@ -8,6 +8,7 @@ import dts from "rollup-plugin-dts";
 import peerDepsExternal from "rollup-plugin-peer-deps-external";
 import { typescriptPaths } from "rollup-plugin-typescript-paths";
 import { terser } from "rollup-plugin-terser";
+import preserveDirectives from "rollup-plugin-preserve-directives";
 
 const outputOptions = {
   sourcemap: false,
@@ -37,6 +38,7 @@ export default [
       peerDepsExternal(),
       resolve(),
       commonjs(),
+      preserveDirectives(),
       terser(),
       typescript({
         tsconfig: "./tsconfig.json",
diff --git a/src/components/chart-elements/AreaChart/AreaChart.tsx b/src/components/chart-elements/AreaChart/AreaChart.tsx
@@ -1,3 +1,4 @@
+"use client";
 import React, { useState } from "react";
 import { twMerge } from "tailwind-merge";
 import {
diff --git a/src/components/chart-elements/BarChart/BarChart.tsx b/src/components/chart-elements/BarChart/BarChart.tsx
@@ -1,3 +1,4 @@
+"use client";
 import React, { useState } from "react";
 import { twMerge } from "tailwind-merge";
 
diff --git a/src/components/chart-elements/DonutChart/DonutChart.tsx b/src/components/chart-elements/DonutChart/DonutChart.tsx
@@ -1,3 +1,4 @@
+"use client";
 import React from "react";
 import { twMerge } from "tailwind-merge";
 import { Pie, PieChart as ReChartsDonutChart, ResponsiveContainer, Tooltip } from "recharts";
diff --git a/src/components/chart-elements/LineChart/LineChart.tsx b/src/components/chart-elements/LineChart/LineChart.tsx
@@ -1,3 +1,4 @@
+"use client";
 import React, { useState } from "react";
 import { twMerge } from "tailwind-merge";
 import {
diff --git a/src/components/icon-elements/Badge/Badge.tsx b/src/components/icon-elements/Badge/Badge.tsx
@@ -1,3 +1,4 @@
+"use client";
 import React from "react";
 import { twMerge } from "tailwind-merge";
 
diff --git a/src/components/icon-elements/BadgeDelta/BadgeDelta.tsx b/src/components/icon-elements/BadgeDelta/BadgeDelta.tsx
@@ -1,3 +1,4 @@
+"use client";
 import React from "react";
 import { twMerge } from "tailwind-merge";
 
diff --git a/src/components/icon-elements/Icon/Icon.tsx b/src/components/icon-elements/Icon/Icon.tsx
@@ -1,3 +1,4 @@
+"use client";
 import React from "react";
 import { twMerge } from "tailwind-merge";
 
diff --git a/src/components/input-elements/Button/Button.tsx b/src/components/input-elements/Button/Button.tsx
@@ -1,3 +1,4 @@
+"use client";
 import React from "react";
 import { twMerge } from "tailwind-merge";
 import { Transition } from "react-transition-group";
diff --git a/src/components/input-elements/DateRangePicker/DateRangePicker.tsx b/src/components/input-elements/DateRangePicker/DateRangePicker.tsx
@@ -1,3 +1,4 @@
+"use client";
 import React, { useRef, useState } from "react";
 import { twMerge } from "tailwind-merge";
 
diff --git a/src/components/input-elements/Dropdown/Dropdown.tsx b/src/components/input-elements/Dropdown/Dropdown.tsx
@@ -1,3 +1,4 @@
+"use client";
 import React, { useMemo, useRef, useState } from "react";
 import { twMerge } from "tailwind-merge";
 
diff --git a/src/components/input-elements/Dropdown/DropdownItem.tsx b/src/components/input-elements/Dropdown/DropdownItem.tsx
@@ -1,3 +1,4 @@
+"use client";
 import React, { useContext } from "react";
 import { twMerge } from "tailwind-merge";
 
diff --git a/src/components/input-elements/MultiSelectBox/MultiSelectBox.tsx b/src/components/input-elements/MultiSelectBox/MultiSelectBox.tsx
@@ -1,3 +1,4 @@
+"use client";
 import React, { useRef, useState } from "react";
 import { twMerge } from "tailwind-merge";
 
diff --git a/src/components/input-elements/MultiSelectBox/MultiSelectBoxItem.tsx b/src/components/input-elements/MultiSelectBox/MultiSelectBoxItem.tsx
@@ -1,3 +1,4 @@
+"use client";
 import React, { useContext } from "react";
 import { twMerge } from "tailwind-merge";
 import { HoveredValueContext, SelectedValueContext } from "contexts";
diff --git a/src/components/input-elements/SelectBox/SelectBox.tsx b/src/components/input-elements/SelectBox/SelectBox.tsx
@@ -1,3 +1,4 @@
+"use client";
 import React, { useEffect, useMemo, useRef, useState } from "react";
 import { twMerge } from "tailwind-merge";
 
diff --git a/src/components/input-elements/SelectBox/SelectBoxItem.tsx b/src/components/input-elements/SelectBox/SelectBoxItem.tsx
@@ -1,3 +1,4 @@
+"use client";
 import React, { useContext } from "react";
 import { twMerge } from "tailwind-merge";
 
diff --git a/src/components/input-elements/Tab/Tab.tsx b/src/components/input-elements/Tab/Tab.tsx
@@ -1,3 +1,4 @@
+"use client";
 import React, { useContext } from "react";
 import { twMerge } from "tailwind-merge";
 
diff --git a/src/components/input-elements/Tab/TabList.tsx b/src/components/input-elements/Tab/TabList.tsx
@@ -1,3 +1,4 @@
+"use client";
 import React from "react";
 import { twMerge } from "tailwind-merge";
 
diff --git a/src/components/input-elements/TextInput/TextInput.tsx b/src/components/input-elements/TextInput/TextInput.tsx
@@ -1,3 +1,4 @@
+"use client";
 import React, { useRef, useState } from "react";
 import { twMerge } from "tailwind-merge";
 
diff --git a/src/components/input-elements/Toggle/Toggle.tsx b/src/components/input-elements/Toggle/Toggle.tsx
@@ -1,3 +1,4 @@
+"use client";
 import React from "react";
 import { twMerge } from "tailwind-merge";
 
diff --git a/src/components/input-elements/Toggle/ToggleItem.tsx b/src/components/input-elements/Toggle/ToggleItem.tsx
@@ -1,3 +1,4 @@
+"use client";
 import React, { useContext } from "react";
 import { twMerge } from "tailwind-merge";
 
diff --git a/src/components/layout-elements/Accordion/Accordion.tsx b/src/components/layout-elements/Accordion/Accordion.tsx
@@ -1,3 +1,4 @@
+"use client";
 import React, { Dispatch, SetStateAction, createContext, useContext, useState } from "react";
 import { twMerge } from "tailwind-merge";
 
diff --git a/src/components/layout-elements/Accordion/AccordionHeader.tsx b/src/components/layout-elements/Accordion/AccordionHeader.tsx
@@ -1,3 +1,4 @@
+"use client";
 import React, { useContext } from "react";
 import { twMerge } from "tailwind-merge";
 
diff --git a/src/components/layout-elements/Accordion/AccordionList.tsx b/src/components/layout-elements/Accordion/AccordionList.tsx
@@ -1,3 +1,4 @@
+"use client";
 import React from "react";
 import { twMerge } from "tailwind-merge";
 
diff --git a/src/components/vis-elements/CategoryBar/CategoryBar.tsx b/src/components/vis-elements/CategoryBar/CategoryBar.tsx
@@ -1,3 +1,4 @@
+"use client";
 import React from "react";
 import { twMerge } from "tailwind-merge";
 
diff --git a/src/components/vis-elements/DeltaBar/DeltaBar.tsx b/src/components/vis-elements/DeltaBar/DeltaBar.tsx
@@ -1,3 +1,4 @@
+"use client";
 import React from "react";
 import { twMerge } from "tailwind-merge";
 
diff --git a/src/components/vis-elements/MarkerBar/MarkerBar.tsx b/src/components/vis-elements/MarkerBar/MarkerBar.tsx
@@ -1,3 +1,4 @@
+"use client";
 import React from "react";
 import { twMerge } from "tailwind-merge";
 
diff --git a/src/components/vis-elements/ProgressBar/ProgressBar.tsx b/src/components/vis-elements/ProgressBar/ProgressBar.tsx
@@ -1,3 +1,4 @@
+"use client";
 import React from "react";
 import { twMerge } from "tailwind-merge";
 
diff --git a/src/components/vis-elements/RangeBar/RangeBar.tsx b/src/components/vis-elements/RangeBar/RangeBar.tsx
@@ -1,3 +1,4 @@
+"use client";
 import React from "react";
 import { twMerge } from "tailwind-merge";
 
diff --git a/src/components/vis-elements/Tracker/Tracker.tsx b/src/components/vis-elements/Tracker/Tracker.tsx
@@ -1,3 +1,4 @@
+"use client";
 import React from "react";
 import { twMerge } from "tailwind-merge";
 

Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,4 @@`
	`1`	`+"use client";`
`1`	`2`	`import React, { useState } from "react";`
`2`	`3`	`import { twMerge } from "tailwind-merge";`
`3`	`4`	`import {`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,4 @@`
	`1`	`+"use client";`
`1`	`2`	`import React from "react";`
`2`	`3`	`import { twMerge } from "tailwind-merge";`
`3`	`4`	`import { Pie, PieChart as ReChartsDonutChart, ResponsiveContainer, Tooltip } from "recharts";`