From 00c0434fe61d25d47e40bc0ac6f76c51f56262a9 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Mon, 27 May 2024 15:25:09 +0300
Subject: [PATCH] Add PrimeFlex doc

---
 assets/menu/menu.json                   |  6 ++-
 doc/guides/primeflex/MigrationDoc.vue   | 43 ++++++++++++++++++++
 doc/guides/primeflex/OverviewDoc.vue    |  9 +++++
 doc/guides/primeflex/PluginDoc.vue      |  9 +++++
 doc/guides/primeflex/TailwindCSSDoc.vue |  9 +++++
 pages/guides/primeflex/index.vue        | 52 +++++++++++++++++++++++++
 6 files changed, 126 insertions(+), 2 deletions(-)
 create mode 100644 doc/guides/primeflex/MigrationDoc.vue
 create mode 100644 doc/guides/primeflex/OverviewDoc.vue
 create mode 100644 doc/guides/primeflex/PluginDoc.vue
 create mode 100644 doc/guides/primeflex/TailwindCSSDoc.vue
 create mode 100644 pages/guides/primeflex/index.vue

diff --git a/assets/menu/menu.json b/assets/menu/menu.json
index ed460f5d1..743f46870 100644
--- a/assets/menu/menu.json
+++ b/assets/menu/menu.json
@@ -538,12 +538,14 @@
                 },
                 {
                     "name": "Migration to V4",
-                    "icon": "pi pi-sync",
                     "to": "/guides/migration/v4"
                 },
+                {
+                    "name": "PrimeFlex",
+                    "to": "/guides/primeflex"
+                },
                 {
                     "name": "PrimeTV",
-                    "icon": "pi pi-youtube",
                     "href": "https://www.youtube.com/channel/UCTgmp69aBOlLnPEqlUyetWw"
                 }
             ]
diff --git a/doc/guides/primeflex/MigrationDoc.vue b/doc/guides/primeflex/MigrationDoc.vue
new file mode 100644
index 000000000..f9103c7be
--- /dev/null
+++ b/doc/guides/primeflex/MigrationDoc.vue
@@ -0,0 +1,43 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            The <a href="https://www.npmjs.com/package/primeclt" target="_blank" rel="noopener noreferrer">primeclt</a> is a command line utility by PrimeTek to assist project setup and migration. The <i>pf2tw</i> command is created for smooth
+            migration between PrimeFlex to Tailwind CSS. As a prequisite, the <i>tailwindcss-primeui</i> is required to provide the matching classes that do not exist in core Tailwind CSS such as semantic colors and animations.
+        </p>
+        <p>Install PrimeCLT.</p>
+        <DocSectionCode :code="code1" hideToggleCode importCode hideStackBlitz />
+        <p>Run the <i>pf2wt</i> in a directory that contains files to be migrated.</p>
+        <DocSectionCode :code="code2" hideToggleCode importCode hideStackBlitz />
+        <p>There are a couple of minor limitations that are not migrated. PrimeVue v3 is not supported as the plugin is compatible with PrimeVue v4 only. In addition, following classes are not migrated as they have no counterparts.</p>
+        <ul class="leading-loose">
+            <li>formgrid</li>
+            <li>formgroup</li>
+            <li>formgroup-inline</li>
+            <li>col</li>
+            <li>col-fixed</li>
+            <li>field</li>
+            <li>field-checkbox</li>
+            <li>field-radiobutton</li>
+            <li>reset</li>
+        </ul>
+    </DocSectionText>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code1: {
+                basic: `
+npm install -g primeclt
+`
+            },
+            code2: {
+                basic: `
+prime pf2tw
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/guides/primeflex/OverviewDoc.vue b/doc/guides/primeflex/OverviewDoc.vue
new file mode 100644
index 000000000..a3b7d8d99
--- /dev/null
+++ b/doc/guides/primeflex/OverviewDoc.vue
@@ -0,0 +1,9 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            <a href="https://primeflex.org">PrimeFlex</a> is designed to be a lightweight CSS utility to accompany Prime UI libraries. As part of our product roadmap planning at PrimeTek, the team has decided to avoid the maintenance of a CSS library
+            and utilize the resources on improving the UI libraries instead. Community feedback has been essential in this decision as well since majority of the applications have their own CSS utilities whether it is Tailwind, Bootstrap or an
+            in-house one, as a result adding PrimeFlex to a project was causing overlapping functionality.
+        </p>
+    </DocSectionText>
+</template>
diff --git a/doc/guides/primeflex/PluginDoc.vue b/doc/guides/primeflex/PluginDoc.vue
new file mode 100644
index 000000000..8f623a993
--- /dev/null
+++ b/doc/guides/primeflex/PluginDoc.vue
@@ -0,0 +1,9 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            The <a href="https://www.npmjs.com/package/tailwindcss-primeui" target="_blank" rel="noopener noreferrer">tailwindcss-primeui</a> is an official plugin by PrimeTek to provide first class integration between a Prime UI library like
+            PrimeVue and Tailwind CSS. In styled mode, the semantic colors such as primary and surfaces are provided as Tailwind utilities e.g. <i>bg-primary</i>, <i>text-surface-500</i>, <i>text-muted-color</i>.
+        </p>
+        <p>View the <NuxtLink to="/tailwind/">Tailwind</NuxtLink> section for more details about the installation and the features.</p>
+    </DocSectionText>
+</template>
diff --git a/doc/guides/primeflex/TailwindCSSDoc.vue b/doc/guides/primeflex/TailwindCSSDoc.vue
new file mode 100644
index 000000000..dd2a4c147
--- /dev/null
+++ b/doc/guides/primeflex/TailwindCSSDoc.vue
@@ -0,0 +1,9 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            Tailwind CSS in particular is a popular choice, we have even build <a href="https://tailwind.primevue.org">Tailwind CSS presets</a> for the unstyled mode to be able to use the utility classes to style the PrimeVue components. During this
+            work, we've realized that the value added by PrimeFlex such as providing the PrimeVue theming as utility classes can be implemented as a Tailwind plugin. As part of PrimeVue v4, a tailwind-primeui plugin has been created for the seamless
+            integration, the website templating demos have been migrated from PrimeFlex to Tailwind and a converter tool called <i>pf2tw</i> has been created. In summary, PrimeTek officially suggests Tailwind CSS as the replacement for PrimeFlex.
+        </p>
+    </DocSectionText>
+</template>
diff --git a/pages/guides/primeflex/index.vue b/pages/guides/primeflex/index.vue
new file mode 100644
index 000000000..87a12bb4b
--- /dev/null
+++ b/pages/guides/primeflex/index.vue
@@ -0,0 +1,52 @@
+<template>
+    <Head>
+        <Title>PrimeFlex - PrimeVue</Title>
+        <Meta name="description" content="Moving from PrimeFlex to Tailwind CSS." />
+    </Head>
+    <div class="doc">
+        <div class="doc-main">
+            <div class="doc-intro">
+                <h1>Introduction</h1>
+                <p>Moving from PrimeFlex to Tailwind CSS.</p>
+            </div>
+            <DocSections :docs="docs" />
+        </div>
+        <DocSectionNav :docs="docs" />
+    </div>
+</template>
+
+<script>
+import MigrationDoc from '@/doc/guides/primeflex/MigrationDoc.vue';
+import OverviewDoc from '@/doc/guides/primeflex/OverviewDoc.vue';
+import PluginDoc from '@/doc/guides/primeflex/PluginDoc.vue';
+import TailwindCSSDoc from '@/doc/guides/primeflex/TailwindCSSDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'overview',
+                    label: 'Overview',
+                    component: OverviewDoc
+                },
+                {
+                    id: 'tailwindcss',
+                    label: 'Tailwind CSS',
+                    component: TailwindCSSDoc
+                },
+                {
+                    id: 'plugin',
+                    label: 'Plugin',
+                    component: PluginDoc
+                },
+                {
+                    id: 'migration',
+                    label: 'Migration',
+                    component: MigrationDoc
+                }
+            ]
+        };
+    }
+};
+</script>