feat/fix(dropdown): use tailwind classes instead of @floating-ui/dom #77 #83

.github/ISSUE_TEMPLATE/bug_report.yaml

@@ -1,6 +1,6 @@
 name: '🐞 Bug Report'
 description: Report a bug
-title: '[Bug] '
+title: '[Bug] {SCOPE} - '
 labels: 'Type: bug'
 assignees: MGREMY
 

.github/ISSUE_TEMPLATE/feature_request.yaml

@@ -1,6 +1,6 @@
 name: '🚀 Feature Request'
 description: Suggest a feature
-title: '[Feature] '
+title: '[Feature] {SCOPE} - '
 labels: 'Type: enhancement'
 assignees: MGREMY
 

.github/workflows/release.yml

@@ -34,7 +34,7 @@ jobs:
         uses: ./.github/actions/setup
 
       - name: Release new version 🛠
-        run: pnpm lib:release -- --ci --verbose --skip-nx-cache --dryRyn=${{ github.event.inputs.dryRun }}
+        run: pnpm lib:release -- --ci --verbose --skip-nx-cache --dryRun=${{ github.event.inputs.dryRun }}
         env:
           GH_TOKEN: ${{ secrets.SEMANTIC_RELEASE_TOKEN }}
           NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

.husky/commit-msg

@@ -0,0 +1 @@
+npx --no -- commitlint --edit $1

.husky/pre-commit

@@ -1,4 +1 @@
-#!/usr/bin/env sh
-. "$(dirname -- "$0")/_/husky.sh"
-
-pnpm all:lint
+pnpm dlx lint-staged --concurrent false --relative

apps/docs/docs/components/accordion/_always-open.component.html

@@ -2,69 +2,75 @@
   <flowbite-accordion-panel [isOpen]="true">
     <flowbite-accordion-title>What is Flowbite ?</flowbite-accordion-title>
     <flowbite-accordion-content>
-      <p class="text-base font-normal text-gray-600 dark:text-gray-400">
-        Flowbite is an open-source library of interactive components built on top of Tailwind CSS
-        including buttons, dropdowns, modals, navbars, and more.
-      </p>
-      <p class="text-base font-normal text-gray-600 dark:text-gray-400">
-        Check out this guide to learn how to
-        <a
-          class="text-base font-medium underline text-gray-600 dark:text-gray-400 decoration-primary-600 dark:decoration-primary-500"
-          href="https://flowbite.com/docs/getting-started/introduction/">
-          Get started
-        </a>
-        and start developing websites even faster with components on top of Tailwind CSS.
-      </p>
+      <span class="p-5">
+        <p class="text-base font-normal text-gray-600 dark:text-gray-400">
+          Flowbite is an open-source library of interactive components built on top of Tailwind CSS
+          including buttons, dropdowns, modals, navbars, and more.
+        </p>
+        <p class="text-base font-normal text-gray-600 dark:text-gray-400">
+          Check out this guide to learn how to
+          <a
+            class="text-base font-medium underline text-gray-600 dark:text-gray-400 decoration-primary-600 dark:decoration-primary-500"
+            href="https://flowbite.com/docs/getting-started/introduction/">
+            Get started
+          </a>
+          and start developing websites even faster with components on top of Tailwind CSS.
+        </p>
+      </span>
     </flowbite-accordion-content>
   </flowbite-accordion-panel>
   <flowbite-accordion-panel>
     <flowbite-accordion-title>Is there a Figma file available ?</flowbite-accordion-title>
     <flowbite-accordion-content>
-      <p class="text-base font-normal text-gray-600 dark:text-gray-400">
-        Flowbite is first conceptualized and designed using the Figma software so everything you see
-        in the library has a design equivalent in our Figma file.
-      </p>
-      <p class="text-base font-normal text-gray-600 dark:text-gray-400">
-        Check out the
-        <a href="https://flowbite.com/figma/">Figma design system</a>
-        based on the utility classes from Tailwind CSS and components from Flowbite.
-      </p>
+      <span class="p-5">
+        <p class="text-base font-normal text-gray-600 dark:text-gray-400">
+          Flowbite is first conceptualized and designed using the Figma software so everything you
+          see in the library has a design equivalent in our Figma file.
+        </p>
+        <p class="text-base font-normal text-gray-600 dark:text-gray-400">
+          Check out the
+          <a href="https://flowbite.com/figma/">Figma design system</a>
+          based on the utility classes from Tailwind CSS and components from Flowbite.
+        </p>
+      </span>
     </flowbite-accordion-content>
   </flowbite-accordion-panel>
   <flowbite-accordion-panel>
     <flowbite-accordion-title>
       What are the differences between Flowbite and Tailwind UI ?
     </flowbite-accordion-title>
     <flowbite-accordion-content>
-      <p class="text-base font-normal text-gray-600 dark:text-gray-400">
-        The main difference is that the core components from Flowbite are open source under the MIT
-        license, whereas Tailwind UI is a paid product. Another difference is that Flowbite relies
-        on smaller and standalone components, whereas Tailwind UI offers sections of pages.
-      </p>
-      <p class="text-base font-normal text-gray-600 dark:text-gray-400">
-        However, we actually recommend using both Flowbite, Flowbite Pro, and even Tailwind UI as
-        there is no technical reason stopping you from using the best of two worlds.
-      </p>
-      <p class="text-base font-normal text-gray-600 dark:text-gray-400">
-        Learn more about these technologies :
-      </p>
-      <ul class="text-base font-normal text-gray-600 dark:text-gray-400 list-disc list-inside">
-        <li>
-          <a
-            class="text-base font-medium underline text-gray-600 dark:text-gray-400 decoration-primary-600 dark:decoration-primary-500"
-            href="https://flowbite.com/pro/">
-            Flowbite Pro
-          </a>
-        </li>
-        <li>
-          <a
-            class="text-base font-medium underline text-gray-600 dark:text-gray-400 decoration-primary-600 dark:decoration-primary-500"
-            href="https://tailwindui.com/"
-            rel="nofollow">
-            Tailwind UI
-          </a>
-        </li>
-      </ul>
+      <span class="p-5">
+        <p class="text-base font-normal text-gray-600 dark:text-gray-400">
+          The main difference is that the core components from Flowbite are open source under the
+          MIT license, whereas Tailwind UI is a paid product. Another difference is that Flowbite
+          relies on smaller and standalone components, whereas Tailwind UI offers sections of pages.
+        </p>
+        <p class="text-base font-normal text-gray-600 dark:text-gray-400">
+          However, we actually recommend using both Flowbite, Flowbite Pro, and even Tailwind UI as
+          there is no technical reason stopping you from using the best of two worlds.
+        </p>
+        <p class="text-base font-normal text-gray-600 dark:text-gray-400">
+          Learn more about these technologies :
+        </p>
+        <ul class="text-base font-normal text-gray-600 dark:text-gray-400 list-disc list-inside">
+          <li>
+            <a
+              class="text-base font-medium underline text-gray-600 dark:text-gray-400 decoration-primary-600 dark:decoration-primary-500"
+              href="https://flowbite.com/pro/">
+              Flowbite Pro
+            </a>
+          </li>
+          <li>
+            <a
+              class="text-base font-medium underline text-gray-600 dark:text-gray-400 decoration-primary-600 dark:decoration-primary-500"
+              href="https://tailwindui.com/"
+              rel="nofollow">
+              Tailwind UI
+            </a>
+          </li>
+        </ul>
+      </span>
     </flowbite-accordion-content>
   </flowbite-accordion-panel>
 </flowbite-accordion>

apps/docs/docs/components/accordion/_color-option.component.html

@@ -2,69 +2,75 @@
   <flowbite-accordion-panel [isOpen]="true">
     <flowbite-accordion-title>What is Flowbite ?</flowbite-accordion-title>
     <flowbite-accordion-content>
-      <p class="text-base font-normal text-gray-600 dark:text-gray-400">
-        Flowbite is an open-source library of interactive components built on top of Tailwind CSS
-        including buttons, dropdowns, modals, navbars, and more.
-      </p>
-      <p class="text-base font-normal text-gray-600 dark:text-gray-400">
-        Check out this guide to learn how to
-        <a
-          class="text-base font-medium underline text-gray-600 dark:text-gray-400 decoration-primary-600 dark:decoration-primary-500"
-          href="https://flowbite.com/docs/getting-started/introduction/">
-          Get started
-        </a>
-        and start developing websites even faster with components on top of Tailwind CSS.
-      </p>
+      <span class="p-5">
+        <p class="text-base font-normal text-gray-600 dark:text-gray-400">
+          Flowbite is an open-source library of interactive components built on top of Tailwind CSS
+          including buttons, dropdowns, modals, navbars, and more.
+        </p>
+        <p class="text-base font-normal text-gray-600 dark:text-gray-400">
+          Check out this guide to learn how to
+          <a
+            class="text-base font-medium underline text-gray-600 dark:text-gray-400 decoration-primary-600 dark:decoration-primary-500"
+            href="https://flowbite.com/docs/getting-started/introduction/">
+            Get started
+          </a>
+          and start developing websites even faster with components on top of Tailwind CSS.
+        </p>
+      </span>
     </flowbite-accordion-content>
   </flowbite-accordion-panel>
   <flowbite-accordion-panel>
     <flowbite-accordion-title>Is there a Figma file available ?</flowbite-accordion-title>
     <flowbite-accordion-content>
-      <p class="text-base font-normal text-gray-600 dark:text-gray-400">
-        Flowbite is first conceptualized and designed using the Figma software so everything you see
-        in the library has a design equivalent in our Figma file.
-      </p>
-      <p class="text-base font-normal text-gray-600 dark:text-gray-400">
-        Check out the
-        <a href="https://flowbite.com/figma/">Figma design system</a>
-        based on the utility classes from Tailwind CSS and components from Flowbite.
-      </p>
+      <span class="p-5">
+        <p class="text-base font-normal text-gray-600 dark:text-gray-400">
+          Flowbite is first conceptualized and designed using the Figma software so everything you
+          see in the library has a design equivalent in our Figma file.
+        </p>
+        <p class="text-base font-normal text-gray-600 dark:text-gray-400">
+          Check out the
+          <a href="https://flowbite.com/figma/">Figma design system</a>
+          based on the utility classes from Tailwind CSS and components from Flowbite.
+        </p>
+      </span>
     </flowbite-accordion-content>
   </flowbite-accordion-panel>
   <flowbite-accordion-panel>
     <flowbite-accordion-title>
       What are the differences between Flowbite and Tailwind UI ?
     </flowbite-accordion-title>
     <flowbite-accordion-content>
-      <p class="text-base font-normal text-gray-600 dark:text-gray-400">
-        The main difference is that the core components from Flowbite are open source under the MIT
-        license, whereas Tailwind UI is a paid product. Another difference is that Flowbite relies
-        on smaller and standalone components, whereas Tailwind UI offers sections of pages.
-      </p>
-      <p class="text-base font-normal text-gray-600 dark:text-gray-400">
-        However, we actually recommend using both Flowbite, Flowbite Pro, and even Tailwind UI as
-        there is no technical reason stopping you from using the best of two worlds.
-      </p>
-      <p class="text-base font-normal text-gray-600 dark:text-gray-400">
-        Learn more about these technologies :
-      </p>
-      <ul class="text-base font-normal text-gray-600 dark:text-gray-400 list-disc list-inside">
-        <li>
-          <a
-            class="text-base font-medium underline text-gray-600 dark:text-gray-400 decoration-primary-600 dark:decoration-primary-500"
-            href="https://flowbite.com/pro/">
-            Flowbite Pro
-          </a>
-        </li>
-        <li>
-          <a
-            class="text-base font-medium underline text-gray-600 dark:text-gray-400 decoration-primary-600 dark:decoration-primary-500"
-            href="https://tailwindui.com/"
-            rel="nofollow">
-            Tailwind UI
-          </a>
-        </li>
-      </ul>
+      <span class="p-5">
+        <p class="text-base font-normal text-gray-600 dark:text-gray-400">
+          The main difference is that the core components from Flowbite are open source under the
+          MIT license, whereas Tailwind UI is a paid product. Another difference is that Flowbite
+          relies on smaller and standalone components, whereas Tailwind UI offers sections of pages.
+        </p>
+        <p class="text-base font-normal text-gray-600 dark:text-gray-400">
+          However, we actually recommend using both Flowbite, Flowbite Pro, and even Tailwind UI as
+          there is no technical reason stopping you from using the best of two worlds.
+        </p>
+        <p class="text-base font-normal text-gray-600 dark:text-gray-400">
+          Learn more about these technologies :
+        </p>
+        <ul class="text-base font-normal text-gray-600 dark:text-gray-400 list-disc list-inside">
+          <li>
+            <a
+              class="text-base font-medium underline text-gray-600 dark:text-gray-400 decoration-primary-600 dark:decoration-primary-500"
+              href="https://flowbite.com/pro/">
+              Flowbite Pro
+            </a>
+          </li>
+          <li>
+            <a
+              class="text-base font-medium underline text-gray-600 dark:text-gray-400 decoration-primary-600 dark:decoration-primary-500"
+              href="https://tailwindui.com/"
+              rel="nofollow">
+              Tailwind UI
+            </a>
+          </li>
+        </ul>
+      </span>
     </flowbite-accordion-content>
   </flowbite-accordion-panel>
 </flowbite-accordion>