fix material-tailwind backward compatibility

mahmoudmoravej · Apr 26, 2024 · 38e4272 · 38e4272
1 parent 56c985f
commit 38e4272
Show file tree

Hide file tree

Showing 27 changed files with 70 additions and 29 deletions.
diff --git a/app/components/ActivityForm.tsx b/app/components/ActivityForm.tsx
@@ -1,6 +1,6 @@
 import { Form } from "@remix-run/react";
 
-import { default as material } from "@material-tailwind/react";
+import * as material from "@material-tailwind/react";
 const { Button, Typography, Textarea } = material;
 
 import { BoltIcon } from "@heroicons/react/24/solid";

diff --git a/app/components/AssignMissedActivitiesButton/AssignMissedActivitiesButton.tsx b/app/components/AssignMissedActivitiesButton/AssignMissedActivitiesButton.tsx
@@ -1,7 +1,7 @@
 import { useAssignActivitiesMutation } from "@app-types/graphql";
 import { BoltIcon } from "@heroicons/react/24/solid";
 
-import { default as material } from "@material-tailwind/react";
+import * as material from "@material-tailwind/react";
 const { Tooltip, IconButton, Spinner, Button } = material;
 
 import { useState } from "react";

diff --git a/app/components/CycleForm.tsx b/app/components/CycleForm.tsx
@@ -1,6 +1,6 @@
 import { Form, Link } from "@remix-run/react";
 
-import { default as material } from "@material-tailwind/react";
+import * as material from "@material-tailwind/react";
 const { Input, Button, Typography, Card, CardBody, CardFooter, Textarea } =
   material;
 

diff --git a/app/components/DatePickerInput.tsx b/app/components/DatePickerInput.tsx
@@ -1,7 +1,7 @@
 // https://www.material-tailwind.com/docs/react/plugins/date-picker
 
 import { ChevronLeftIcon, ChevronRightIcon } from "@heroicons/react/24/solid";
-import { default as material } from "@material-tailwind/react";
+import * as material from "@material-tailwind/react";
 const { Popover, PopoverHandler, Input, PopoverContent } = material;
 
 import { DayPicker } from "react-day-picker";

diff --git a/app/components/IndividualForm.tsx b/app/components/IndividualForm.tsx
@@ -1,6 +1,6 @@
 import { Form, Link } from "@remix-run/react";
 
-import { default as material } from "@material-tailwind/react";
+import * as material from "@material-tailwind/react";
 const {
   Input,
   Button,

diff --git a/app/components/OrganizationForm.tsx b/app/components/OrganizationForm.tsx
@@ -1,6 +1,6 @@
 import { Form } from "@remix-run/react";
 
-import { default as material } from "@material-tailwind/react";
+import * as material from "@material-tailwind/react";
 const { Radio } = material;
 
 import { OrganizationUpdate } from "@app-types/graphql";

diff --git a/app/components/VisionForm.tsx b/app/components/VisionForm.tsx
@@ -1,5 +1,5 @@
 import { Form } from "@remix-run/react";
-import { default as material } from "@material-tailwind/react";
+import * as material from "@material-tailwind/react";
 const { Input, Button, Typography, Textarea, Select, Option, Switch } =
   material;
 

diff --git a/app/routes/_auth.signin.($id).tsx b/app/routes/_auth.signin.($id).tsx
@@ -1,6 +1,6 @@
 import { Form, useLoaderData } from "@remix-run/react";
 
-import { default as material } from "@material-tailwind/react";
+import * as material from "@material-tailwind/react";
 const { Alert, Button, Typography } = material;
 
 import { Link } from "react-router-dom";

diff --git a/app/routes/_auth.signup.($id).tsx b/app/routes/_auth.signup.($id).tsx
@@ -1,6 +1,6 @@
 import { Form, useLoaderData } from "@remix-run/react";
 
-import { default as material } from "@material-tailwind/react";
+import * as material from "@material-tailwind/react";
 const { Alert, Button, Typography } = material;
 
 import { Link } from "react-router-dom";

diff --git a/app/routes/_dashboard.activities.$id.edit/route.tsx b/app/routes/_dashboard.activities.$id.edit/route.tsx
@@ -1,7 +1,7 @@
 import { useParams } from "@remix-run/react";
 import { useEffect, useState } from "react";
 
-import { default as material } from "@material-tailwind/react";
+import * as material from "@material-tailwind/react";
 const { Card, Typography } = material;
 
 import {

diff --git a/app/routes/_dashboard.cycles.$id.edit/route.tsx b/app/routes/_dashboard.cycles.$id.edit/route.tsx
@@ -1,7 +1,7 @@
 import { useParams } from "@remix-run/react";
 import { useEffect, useState } from "react";
 
-import { default as material } from "@material-tailwind/react";
+import * as material from "@material-tailwind/react";
 const { Card, Typography } = material;
 
 import {

diff --git a/app/routes/_dashboard.cycles._index/route.tsx b/app/routes/_dashboard.cycles._index/route.tsx
@@ -2,7 +2,7 @@ import { useCyclesQuery } from "@app-types/graphql";
 import { MagnifyingGlassIcon } from "@heroicons/react/24/outline";
 import { UserPlusIcon } from "@heroicons/react/24/solid";
 
-import { default as material } from "@material-tailwind/react";
+import * as material from "@material-tailwind/react";
 const {
   Card,
   CardHeader,

diff --git a/app/routes/_dashboard.cycles.new/route.tsx b/app/routes/_dashboard.cycles.new/route.tsx
@@ -1,6 +1,6 @@
 import { useNavigate } from "@remix-run/react";
 import { useState } from "react";
-import { default as material } from "@material-tailwind/react";
+import * as material from "@material-tailwind/react";
 const { Card, Typography } = material;
 
 import { useCreateCycleMutation } from "@app-types/graphql";

diff --git a/app/routes/_dashboard.individuals.$id.edit/route.tsx b/app/routes/_dashboard.individuals.$id.edit/route.tsx
@@ -1,7 +1,7 @@
 import { useParams } from "@remix-run/react";
 import { useEffect, useState } from "react";
 
-import { default as material } from "@material-tailwind/react";
+import * as material from "@material-tailwind/react";
 const { Card, Typography } = material;
 
 import {

diff --git a/app/routes/_dashboard.individuals.($id).new/route.tsx b/app/routes/_dashboard.individuals.($id).new/route.tsx
@@ -1,7 +1,7 @@
 import { useNavigate, useParams } from "@remix-run/react";
 import { useState } from "react";
 
-import { default as material } from "@material-tailwind/react";
+import * as material from "@material-tailwind/react";
 const { Card, Typography } = material;
 
 import {

diff --git a/app/routes/_dashboard.individuals._index.($id)/route.tsx b/app/routes/_dashboard.individuals._index.($id)/route.tsx
@@ -6,7 +6,7 @@ import {
   HomeIcon,
   SignalIcon,
 } from "@heroicons/react/24/solid";
-import { default as material } from "@material-tailwind/react";
+import * as material from "@material-tailwind/react";
 const {
   Card,
   CardHeader,

diff --git a/app/routes/_dashboard.organizations.$id.edit/route.tsx b/app/routes/_dashboard.organizations.$id.edit/route.tsx
@@ -1,7 +1,7 @@
 import { useParams } from "@remix-run/react";
 import { useEffect, useState } from "react";
 
-import { default as material } from "@material-tailwind/react";
+import * as material from "@material-tailwind/react";
 const { Card, Typography } = material;
 
 import {

diff --git a/app/routes/_dashboard.visions.$id.edit/route.tsx b/app/routes/_dashboard.visions.$id.edit/route.tsx
@@ -1,7 +1,7 @@
 import { useParams } from "@remix-run/react";
 import { useEffect, useState } from "react";
 
-import { default as material } from "@material-tailwind/react";
+import * as material from "@material-tailwind/react";
 const { Card, Typography } = material;
 
 import {

diff --git a/app/routes/_dashboard.visions._index/components/FetchContentButton/FetchContentButton.tsx b/app/routes/_dashboard.visions._index/components/FetchContentButton/FetchContentButton.tsx
@@ -1,7 +1,7 @@
 import { useAnalyzeActivityWithMinimumResultMutation } from "@app-types/graphql";
 import { BoltIcon } from "@heroicons/react/24/solid";
 
-import { default as material } from "@material-tailwind/react";
+import * as material from "@material-tailwind/react";
 
 const { Tooltip, IconButton, Spinner } = material;
 import { useState } from "react";

diff --git a/app/routes/_dashboard.visions._index/route.tsx b/app/routes/_dashboard.visions._index/route.tsx
@@ -3,7 +3,7 @@ import {
   ArrowTopRightOnSquareIcon,
   DocumentChartBarIcon,
 } from "@heroicons/react/24/solid";
-import { default as material } from "@material-tailwind/react";
+import * as material from "@material-tailwind/react";
 
 const {
   Card,

diff --git a/app/routes/_dashboard.visions.new/route.tsx b/app/routes/_dashboard.visions.new/route.tsx
@@ -1,6 +1,6 @@
 import { useNavigate, useParams } from "@remix-run/react";
 import { useState } from "react";
-import { default as material } from "@material-tailwind/react";
+import * as material from "@material-tailwind/react";
 import {
   useCreateVisionMutation,
   useGetVisionTypesAndCyclesQuery,

diff --git a/app/routes/_site._index.tsx b/app/routes/_site._index.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 
-import { default as material } from "@material-tailwind/react";
+import * as material from "@material-tailwind/react";
 const {
   Card,
   CardBody,

diff --git a/app/widgets/cards/feature-card.tsx b/app/widgets/cards/feature-card.tsx
@@ -1,9 +1,11 @@
 import PropTypes from "prop-types";
 
-import material from "@material-tailwind/react";
-const { Card, CardBody, Typography, IconButton } = material;
-
-console.log("!!!", Card);
+import {
+  Card,
+  CardBody,
+  Typography,
+  IconButton,
+} from "@material-tailwind/react";
 
 export function FeatureCard({
   color,

diff --git a/app/widgets/cards/team-card.tsx b/app/widgets/cards/team-card.tsx
@@ -1,6 +1,6 @@
 import PropTypes from "prop-types";
 
-import { default as material } from "@material-tailwind/react";
+import * as material from "@material-tailwind/react";
 const { Card, Avatar, Typography } = material;
 
 export function TeamCard({

diff --git a/package.json b/package.json
@@ -36,7 +36,8 @@
     "react-day-picker": "^8.10.0",
     "react-dom": "^18.2.0",
     "remix-auth": "^3.6.0",
-    "remix-auth-google": "^2.0.0"
+    "remix-auth-google": "^2.0.0",
+    "vite-plugin-cjs-interop": "^2.1.0"
   },
   "devDependencies": {
     "@graphql-codegen/cli": "5.0.2",

diff --git a/vite.config.ts b/vite.config.ts
@@ -2,11 +2,19 @@ import { vitePlugin as remix } from "@remix-run/dev";
 import { defineConfig } from "vite";
 import tsconfigPaths from "vite-tsconfig-paths";
 import { installGlobals } from "@remix-run/node";
+import { cjsInterop } from "vite-plugin-cjs-interop";
 
 installGlobals();
 
 const viteConfig = defineConfig({
-  plugins: [remix(), tsconfigPaths()],
+  plugins: [
+    cjsInterop({
+      // List of CJS dependencies that require interop
+      dependencies: ["@material-tailwind/react"],
+    }),
+    remix(),
+    tsconfigPaths(),
+  ],
   server: {
     port: 4000,
   },

diff --git a/yarn.lock b/yarn.lock
@@ -3247,6 +3247,11 @@ accepts@~1.3.5, accepts@~1.3.8:
     mime-types "~2.1.34"
     negotiator "0.6.3"
 
+acorn-import-assertions@^1.9.0:
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/acorn-import-assertions/-/acorn-import-assertions-1.9.0.tgz#507276249d684797c84e0734ef84860334cfb1ac"
+  integrity sha512-cmMwop9x+8KFhxvKrKfPYmN6/pKTYYHBqLa0DfvVZcKMJWNyWLnaqND7dx/qn66R7ewM1UX5XMaDVP5wlVTaVA==
+
 acorn-jsx@^5.0.0, acorn-jsx@^5.3.2:
   version "5.3.2"
   resolved "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz"
@@ -6760,6 +6765,13 @@ magic-string@^0.30.5:
   dependencies:
     "@jridgewell/sourcemap-codec" "^1.4.15"
 
+magic-string@^0.30.8:
+  version "0.30.10"
+  resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.30.10.tgz#123d9c41a0cb5640c892b041d4cfb3bd0aa4b39e"
+  integrity sha512-iIRwTIf0QKV3UAnYK4PU8uiEc4SRh5jX0mwpIwETPpHdhVM4f53RSwS/vXvN1JhGX+Cs7B8qIq3d6AH49O5fAQ==
+  dependencies:
+    "@jridgewell/sourcemap-codec" "^1.4.15"
+
 map-cache@^0.2.0:
   version "0.2.2"
   resolved "https://registry.npmjs.org/map-cache/-/map-cache-0.2.2.tgz"
@@ -7296,6 +7308,13 @@ minimatch@^9.0.0, minimatch@^9.0.1:
   dependencies:
     brace-expansion "^2.0.1"
 
+minimatch@^9.0.3:
+  version "9.0.4"
+  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-9.0.4.tgz#8e49c731d1749cbec05050ee5145147b32496a51"
+  integrity sha512-KqWh+VchfxcMNRAJjj2tnsSJdNbHsVgnkBhTNrW7AjVo6OvLtxw8zfT9oLw1JSohlFzJ8jCoTgaoXvJ+kHt6fw==
+  dependencies:
+    brace-expansion "^2.0.1"
+
 minimist@^1.2.0, minimist@^1.2.6, minimist@~1.2.5:
   version "1.2.8"
   resolved "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz"
@@ -9894,6 +9913,17 @@ vite-node@^0.28.5:
     source-map-support "^0.5.21"
     vite "^3.0.0 || ^4.0.0"
 
+vite-plugin-cjs-interop@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/vite-plugin-cjs-interop/-/vite-plugin-cjs-interop-2.1.0.tgz#4b34c588ebb034483ebf623639598011f4799190"
+  integrity sha512-qp+54VPRKiiuqKZ4tToiEZz5d5uiZf33PrXOfyH5SInlVsYz4b6YoZMNxCrx+vKdAQVsZu03vDJK71Ri5oKMqg==
+  dependencies:
+    acorn "^8.11.3"
+    acorn-import-assertions "^1.9.0"
+    estree-walker "^3.0.3"
+    magic-string "^0.30.8"
+    minimatch "^9.0.3"
+
 vite-tsconfig-paths@^4.3.2:
   version "4.3.2"
   resolved "https://registry.yarnpkg.com/vite-tsconfig-paths/-/vite-tsconfig-paths-4.3.2.tgz#321f02e4b736a90ff62f9086467faf4e2da857a9"