feat: add tailwind vite

pankod · May 31, 2024 · 23ddc56 · 23ddc56
1 parent 208f02f
commit 23ddc56
Show file tree

Hide file tree

Showing 15 changed files with 174 additions and 25 deletions.
diff --git a/presets.js b/presets.js
@@ -99,5 +99,30 @@ module.exports = {
                 "headless-example": "no",
             },
         },
+        {
+            name: "refine-vite-tailwind",
+            type: "refine-vite",
+            answers: {
+                "ui-framework": "tailwindcss",
+                "router-provider": "react-router-v6",
+                "data-provider": "data-provider-custom-json-rest",
+                "auth-provider": "none",
+                "antd-example": "no",
+                "mui-example": "no",
+                "headless-example": "no",
+            },
+        },
+        {
+            name: "refine-nextjs-tailwind",
+            type: "refine-nextjs",
+            answers: {
+                "ui-framework": "tailwindcss",
+                "data-provider": "data-provider-custom-json-rest",
+                "auth-provider": "none",
+                "antd-example": "no",
+                "mui-example": "no",
+                "headless-example": "no",
+            },
+        },
     ],
 };
diff --git a/refine-vite/plugins/_base/extend.js b/refine-vite/plugins/_base/extend.js
@@ -28,6 +28,8 @@ module.exports = {
     extend(answers) {
         const uiFramework = answers["ui-framework"];
         const dataProvider = answers["data-provider"];
+        const isHeadless =
+            uiFramework === "no" || uiFramework === "tailwindcss";
 
         switch (uiFramework) {
             case "antd":
@@ -102,7 +104,7 @@ module.exports = {
         ];
 
         // update for headless
-        if (uiFramework === "no") {
+        if (isHeadless) {
             base._app.authPageProps = [
                 `
                 renderContent={(content) => (
@@ -160,16 +162,13 @@ module.exports = {
             base.selectedSvg = svgFromAnswers;
         }
 
-        if (
-            answers["ui-framework"] !== "no" &&
-            (answers["title"] || answers["svg"])
-        ) {
+        if (!isHeadless && (answers["title"] || answers["svg"])) {
             base._app.localImport.push(
                 'import { AppIcon } from "./components/app-icon";',
             );
         }
 
-        if (answers["ui-framework"] === "no") {
+        if (isHeadless) {
             base._app.localImport.push(
                 `import { Layout } from "./components/layout";`,
             );
@@ -200,7 +199,7 @@ module.exports = {
         } else if (dataProvider === "data-provider-supabase") {
             base.blogPostCategoryIdFormField = `"categoryId"`;
         } else {
-            if (uiFramework === "mui" || uiFramework === "no") {
+            if (uiFramework === "mui" || isHeadless) {
                 base.blogPostCategoryIdFormField = `"category.id"`;
             } else {
                 base.blogPostCategoryIdFormField = `["category", "id"]`;
@@ -209,7 +208,7 @@ module.exports = {
 
         // ## blogPostCategoryTableField
         if (base.isGraphQL) {
-            if (uiFramework === "no") {
+            if (isHeadless) {
                 base.blogPostCategoryTableField = `"category.title"`;
             }
             if (uiFramework === "antd") {
@@ -240,7 +239,7 @@ module.exports = {
                 { value: "rejected", label: "Rejected" },
             ]);
         }
-        if (uiFramework === "no" || uiFramework === "mui") {
+        if (isHeadless || uiFramework === "mui") {
             base.blogPostStatusOptions = JSON.parse(base.blogPostStatusOptions);
         }
 
@@ -252,17 +251,16 @@ module.exports = {
         }
 
         // ## Refine options.title
-        if (
-            answers["ui-framework"] !== "no" &&
-            (answers["title"] || answers["svg"])
-        ) {
+        if (!isHeadless && (answers["title"] || answers["svg"])) {
             if (!base._app.refineOptions) {
                 base._app.refineOptions = [];
             }
-            const textLine = answers["title"] ? `text: "${answers["title"]}",` : "";
+            const textLine = answers["title"]
+                ? `text: "${answers["title"]}",`
+                : "";
             const iconLine = answers["svg"] ? `icon: <AppIcon />,` : "";
             const template = `title: { ${textLine} ${iconLine} },`;
-            
+
             base._app.refineOptions.push(template);
         }
 

diff --git a/refine-vite/plugins/auth-provider-auth0/src/pages/login.tsx b/refine-vite/plugins/auth-provider-auth0/src/pages/login.tsx
@@ -95,7 +95,7 @@ export const Login: React.FC = () => {
         );
     <%_ } _%>
 
-    <%_ if (answers["ui-framework"] === "no") { _%>
+    <%_ if (answers["ui-framework"] === "no" || answers["ui-framework"] === "tailwindcss") { _%>
         return(
             <div
                 style={{

diff --git a/refine-vite/plugins/auth-provider-custom/src/pages/forgotPassword/index.tsx b/refine-vite/plugins/auth-provider-custom/src/pages/forgotPassword/index.tsx
@@ -1,4 +1,4 @@
-<%_ if (answers[`ui-framework`] === "no") { _%>
+<%_ if (answers["ui-framework"] === "no" || answers["ui-framework"] === "tailwindcss") { _%>
     import { AuthPage } from "@refinedev/core";
 <%_ } _%>
 <%_ if (answers["ui-framework"] === 'antd') { _%>

diff --git a/refine-vite/plugins/auth-provider-custom/src/pages/login/index.tsx b/refine-vite/plugins/auth-provider-custom/src/pages/login/index.tsx
@@ -1,4 +1,4 @@
-<%_ if (answers[`ui-framework`] === "no") { _%>
+<%_ if (answers["ui-framework"] === "no" || answers["ui-framework"] === "tailwindcss") { _%>
     import { AuthPage } from "@refinedev/core";
 <%_ } _%>
 <%_ if (answers["ui-framework"] === 'antd') { _%>

diff --git a/refine-vite/plugins/auth-provider-custom/src/pages/register/index.tsx b/refine-vite/plugins/auth-provider-custom/src/pages/register/index.tsx
@@ -1,4 +1,4 @@
-<%_ if (answers[`ui-framework`] === "no") { _%>
+<%_ if (answers["ui-framework"] === "no" || answers["ui-framework"] === "tailwindcss") { _%>
     import { AuthPage } from "@refinedev/core";
 <%_ } _%>
 <%_ if (answers["ui-framework"] === 'antd') { _%>

diff --git a/refine-vite/plugins/auth-provider-google/src/pages/login.tsx b/refine-vite/plugins/auth-provider-google/src/pages/login.tsx
@@ -129,7 +129,7 @@ export const Login: React.FC = () => {
         );
     <%_ } _%>
 
-    <%_ if (answers["ui-framework"] === "no") { _%>
+    <%_ if (answers["ui-framework"] === "no" || answers["ui-framework"] === "tailwindcss") { _%>
         return(
             <div
                 style={{

diff --git a/refine-vite/plugins/auth-provider-keycloak/src/pages/login.tsx b/refine-vite/plugins/auth-provider-keycloak/src/pages/login.tsx
@@ -94,7 +94,7 @@ export const Login: React.FC = () => {
         );
     <%_ } _%>
 
-    <%_ if (answers["ui-framework"] === "no") { _%>
+    <%_ if (answers["ui-framework"] === "no" || answers["ui-framework"] === "tailwindcss") { _%>
         return(
             <div
                 style={{

diff --git a/refine-vite/plugins/tailwindcss/meta.json b/refine-vite/plugins/tailwindcss/meta.json
@@ -0,0 +1,4 @@
+{
+  "name": "Tailwind CSS",
+  "url": "https://refine.dev/docs/guides-concepts/general-concepts/#headless-concept"
+}
diff --git a/refine-vite/plugins/tailwindcss/package.json b/refine-vite/plugins/tailwindcss/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "tailwindcss": "^3.4.3",
+    "postcss": "^8.4.38",
+    "autoprefixer": "^10.4.19"
+  }
+}
diff --git a/refine-vite/plugins/tailwindcss/postcss.config.js b/refine-vite/plugins/tailwindcss/postcss.config.js
@@ -0,0 +1,6 @@
+export default {
+    plugins: {
+        tailwindcss: {},
+        autoprefixer: {},
+    },
+};
diff --git a/refine-vite/plugins/tailwindcss/src/App.css b/refine-vite/plugins/tailwindcss/src/App.css
@@ -0,0 +1,92 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+body {
+    margin: 0px;
+}
+
+table {
+    border-spacing: 0;
+    border: 1px solid black;
+}
+
+table th,
+td {
+    margin: 0;
+    padding: 0.5rem;
+    border-bottom: 1px solid black;
+    border-right: 1px solid black;
+}
+
+table tr:last-child td {
+    border-bottom: 0;
+}
+
+table th,
+td {
+    margin: 0;
+    padding: 0.5rem;
+    border-bottom: 1px solid black;
+    border-right: 1px solid black;
+}
+
+table th:last-child,
+td:last-child {
+    border-right: 0;
+}
+
+.layout {
+    display: flex;
+    gap: 16px;
+}
+
+@media screen and (max-width: 751px) {
+    .layout {
+        display: block;
+    }
+}
+
+.layout .content {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+}
+
+.breadcrumb {
+    display: flex;
+    gap: 24px;
+    list-style-type: "/  ";
+    padding: 8px 16px;
+    border-bottom: 1px solid lightgray;
+}
+
+.breadcrumb a {
+    color: blue;
+    text-decoration: none;
+}
+
+.menu {
+    flex-shrink: 0;
+    padding: 8px 16px;
+    border-right: 1px solid lightgray;
+}
+
+.menu a {
+    color: black;
+}
+
+.menu .active {
+    font-weight: bold;
+}
+
+@media screen and (max-width: 751px) {
+    .menu {
+        border-right: none;
+        border-bottom: 1px solid lightgray;
+    }
+}
+
+.menu ul {
+    padding-left: 16px;
+}
diff --git a/refine-vite/plugins/tailwindcss/tailwind.config.js b/refine-vite/plugins/tailwindcss/tailwind.config.js
@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+    content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
+    theme: {
+        extend: {},
+    },
+    plugins: [],
+};
diff --git a/refine-vite/prompt.js b/refine-vite/prompt.js
@@ -75,6 +75,11 @@ module.exports = {
                     name: "mui",
                     hint: "Installs Material UI package.",
                 },
+                {
+                    message: "Tailwind CSS",
+                    name: "tailwindcss",
+                    hint: "Installs Tailwind CSS package.",
+                },
             ],
             default: "no",
         },
@@ -207,15 +212,19 @@ module.exports = {
             when: function (answers) {
                 return (
                     typeof answers["svg"] === "undefined" ||
-                    answers["ui-framework"] === "no"
+                    answers["ui-framework"] === "no" ||
+                    answers["ui-framework"] === "tailwindcss"
                 );
             },
             pattern: ["src/components/app-icon/index.tsx"],
         },
         {
             plugin: ["_base"],
             when: function (answers) {
-                return answers["ui-framework"] !== "no";
+                return (
+                    answers["ui-framework"] !== "no" &&
+                    answers["ui-framework"] !== "tailwindcss"
+                );
             },
             pattern: [
                 "src/components/breadcrumb/index.tsx",

diff --git a/refine-vite/template/src/App.tsx b/refine-vite/template/src/App.tsx
@@ -96,7 +96,7 @@ function App() {
                                     key="authenticated-inner"
                                     fallback={<CatchAllNavigate to="/login" />}
                                 >
-                                    <%_ if (answers["ui-framework"] === 'no') { _%>
+                                    <%_ if (answers["ui-framework"] === "no" || answers["ui-framework"] === "tailwindcss") { _%>
                                         <Layout>
                                             <Outlet />
                                         </Layout>
@@ -174,7 +174,7 @@ function App() {
                     <Routes>
                         <Route
                             element={(
-                                <%_ if (answers["ui-framework"] === 'no') { _%>
+                                <%_ if (answers["ui-framework"] === "no" || answers["ui-framework"] === "tailwindcss") { _%>
                                     <Layout>
                                         <Outlet />
                                     </Layout>