From 11e6f2e0aa4c41726325e1a77114edf13724a6e1 Mon Sep 17 00:00:00 2001 From: Alican Erdurmaz Date: Fri, 31 May 2024 15:30:31 +0300 Subject: [PATCH] feat: add tailwind vite --- presets.js | 13 +++ refine-vite/plugins/_base/extend.js | 28 +++--- refine-vite/plugins/tailwindcss/meta.json | 4 + refine-vite/plugins/tailwindcss/package.json | 7 ++ .../plugins/tailwindcss/postcss.config.js | 6 ++ refine-vite/plugins/tailwindcss/src/App.css | 92 +++++++++++++++++++ .../plugins/tailwindcss/tailwind.config.js | 8 ++ refine-vite/prompt.js | 10 +- refine-vite/template/src/App.tsx | 4 +- 9 files changed, 154 insertions(+), 18 deletions(-) create mode 100644 refine-vite/plugins/tailwindcss/meta.json create mode 100644 refine-vite/plugins/tailwindcss/package.json create mode 100644 refine-vite/plugins/tailwindcss/postcss.config.js create mode 100644 refine-vite/plugins/tailwindcss/src/App.css create mode 100644 refine-vite/plugins/tailwindcss/tailwind.config.js diff --git a/presets.js b/presets.js index db7e097e..03d0d875 100644 --- a/presets.js +++ b/presets.js @@ -99,5 +99,18 @@ 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", + }, + }, ], }; diff --git a/refine-vite/plugins/_base/extend.js b/refine-vite/plugins/_base/extend.js index ce734aba..801cd7bf 100644 --- 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: ,` : ""; const template = `title: { ${textLine} ${iconLine} },`; - + base._app.refineOptions.push(template); } diff --git a/refine-vite/plugins/tailwindcss/meta.json b/refine-vite/plugins/tailwindcss/meta.json new file mode 100644 index 00000000..ab066217 --- /dev/null +++ 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 new file mode 100644 index 00000000..626811a3 --- /dev/null +++ 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 new file mode 100644 index 00000000..49c0612d --- /dev/null +++ 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 new file mode 100644 index 00000000..1022560f --- /dev/null +++ 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 new file mode 100644 index 00000000..40eda665 --- /dev/null +++ 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 index a6fbbb65..f406a737 100644 --- 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", }, @@ -215,7 +220,10 @@ module.exports = { { 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 index fd9f41ae..0ecd9562 100644 --- a/refine-vite/template/src/App.tsx +++ b/refine-vite/template/src/App.tsx @@ -96,7 +96,7 @@ function App() { key="authenticated-inner" fallback={} > - <%_ if (answers["ui-framework"] === 'no') { _%> + <%_ if (answers["ui-framework"] === 'no' || answers["ui-framework"] === 'tailwindcss') { _%> @@ -174,7 +174,7 @@ function App() { + <%_ if (answers["ui-framework"] === 'no' || answers["ui-framework"] === 'tailwindcss') { _%>