Components renaming (#225)

* refactor: eslint config adjusted for better diff's

* refactor: stricter linting
 + dependencies updated

* refactoring: paragraph component
 - component
 - docs

* refactoring: heading component
 - component
 - docs

* Update docs/components/heading.md

Co-authored-by: Ilya Artamonov <ilya.sosidka@gmail.com>

* refactoring: link component
 - component
 - docs

* refactoring: image component
 - component
 - docs

* refactoring: alert component
 - component
 - docs

* refactoring: avatar component
 - component
 - docs

* refactoring: removed unnecessary code
    - component names come from the file name

* refactoring: breadcrumb component
 - component
 - docs

* refactoring: accordion component
 - component
 - docs

* refactoring: buttom component
 - component
 - docs

* refactoring: badge component
 - component
 - docs

* refactoring: card component
 - component
 - docs

* refactoring: order of components in docs updated

* refactoring: unnecessary semicolons removed

* refactoring: button group component
 - component
 - docs

* refactoring: carousel component
 - component
 - docs

* refactoring: dropdown component
 - component
 - docs

* refactoring: footer component
 - component
 - docs

* refactoring:list-group component
 - component
 - docs

* refactoring: modal component
 - component
 - docs

* refactoring: navbar component
 - component
 - docs

* refactoring: pagination component
 - component
 - docs

* refactoring: progress component
 - component
 - docs

* refactoring: rating component
 - component
 - docs

* refactoring: spinner component
 - component
 - docs

* refactoring: table component
 - component
 - docs

* refactoring: tabs component
 - component
 - docs

* feat: Updated pagination examples

* lint: Lister fixes

* feat: Sidebar component and some fixes

* feat: Input component

* feat: Some fixes

* feat: Some fixes

* chore: update deps

* refactor: removed old Modal component

* refactor: radio component and some fixes

* fix: fixed path error

* refactor: Range component

* refactoring: timeline component
 - component
 - docs

* refactor: Select component

* refactoring: toast component
 - component
 - docs

* refactoring: tooltip component
 - component
 - docs

* refactoring: sidebar component
 - component
 - docs

* refactoring: input component
 - component
 - docs

* refactoring: fileInput component
 - component
 - docs

* refactoring: select component
 - component
 - docs

* refactoring: textarea component
 - component
 - docs

* refactoring: checkbox component
 - component
 - docs

* refactoring: radio component
 - component
 - docs

* refactoring: toggle component
 - component
 - docs

* refactoring: range component
 - component
 - docs

* local configs linted

* documentation quick start updated

* flowbite-themable refactored to fit new linters and style guide

* random linter fixes

* refactoring: toast-provider component
 - component
 - docs

* final linter fixes

* lint: Linter fixes

* fix: Fixed types

* fix: Fixed card component

* docs: Updated card examples

* fix: Fixed tabs

* refactor: Heading component refactoring

* Fwb rename - few fixes after component review (#237)

* fix: button documentation

* fix: model type in range examples

* chore: Toast marked as WIP

---------

Co-authored-by: Sqrcz <naorniakowski@slashlab.pl>
Co-authored-by: Sqrcz <naorniakowski@gmail.com>

docs/components/toastProvider/examples/FwbToastProviderExample.vue

@@ -0,0 +1,40 @@
+<template>
+  <fwb-toast-provider :transition="transition">
+    <label
+      for="countries"
+      class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-400"
+    >Select transition</label>
+    <select
+      id="countries"
+      v-model="transition"
+      class="mb-2 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+    >
+      <option value="slide-left">
+        Slide left
+      </option>
+      <option value="slide-right">
+        Slide right
+      </option>
+      <option value="slide-top">
+        Slide top
+      </option>
+      <option value="slide-bottom">
+        Slide bottom
+      </option>
+      <option value="fade">
+        Fade
+      </option>
+    </select>
+    <div class="vp-raw flex align-center gap-2 flex-wrap flex-col">
+      <fwb-toast-provider-example-child />
+    </div>
+  </fwb-toast-provider>
+</template>
+
+<script setup>
+import { FwbToastProvider } from '../../../../src/index'
+import FwbToastProviderExampleChild from './FwbToastProviderExampleChild.vue'
+import { ref } from 'vue'
+
+const transition = ref('slide-left')
+</script>

docs/components/toastProvider/examples/FwbToastProviderExampleChild.vue

@@ -1,28 +1,57 @@
 <template>
   <div class="flex flex-col gap-2">
-    <label for="ms" class="block text-sm font-medium text-gray-900 dark:text-gray-400">Duration(ms)</label>
+    <label
+      for="ms"
+      class="block text-sm font-medium text-gray-900 dark:text-gray-400"
+    >Duration(ms)</label>
     <input
+      id="ms"
       v-model.number="ms"
       type="number"
-      id="ms"
       class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
       placeholder="John"
       required
-    />
+    >
     <div class="flex gap-2">
-      <Button @click="() => add('success')" color="green">success</Button>
-      <Button @click="() => add('warning')" color="yellow">warning</Button>
-      <Button @click="() => add('danger')" color="red">danger</Button>
-      <Button @click="() => add('update')" color="purple">update</Button>
+      <fwb-button
+        color="green"
+        @click="() => add('success')"
+      >
+        success
+      </fwb-button>
+      <fwb-button
+        color="yellow"
+        @click="() => add('warning')"
+      >
+        warning
+      </fwb-button>
+      <fwb-button
+        color="red"
+        @click="() => add('danger')"
+      >
+        danger
+      </fwb-button>
+      <fwb-button
+        color="purple"
+        @click="() => add('update')"
+      >
+        update
+      </fwb-button>
     </div>
     <div class="flex">
-      <Button @click="remove" color="alternative">pop</Button>
+      <fwb-button
+        color="alternative"
+        @click="remove"
+      >
+        pop
+      </fwb-button>
     </div>
   </div>
 </template>
+
 <script setup>
 import { ref, shallowRef } from 'vue'
-import { Button, useToast } from '../../../../src/index'
+import { FwbButton, useToast } from '../../../../src/index'
 import UpdateToast from './UpdateToast.vue'
 
 const ms = ref(5000)

docs/components/toastProvider/examples/ToastProviderExample.vue

@@ -1,22 +0,0 @@
-<template>
-  <toast-provider :transition="transition">
-    <label for="countries" class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-400">Select transition</label>
-    <select v-model="transition" id="countries" class="mb-2 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
-      <option value="slide-left">Slide left</option>
-      <option value="slide-right">Slide right</option>
-      <option value="slide-top">Slide top</option>
-      <option value="slide-bottom">Slide bottom</option>
-      <option value="fade">Fade</option>
-    </select>
-    <div class="vp-raw flex align-center gap-2 flex-wrap flex-col">
-      <toast-provider-example-child />
-    </div>
-  </toast-provider>
-</template>
-<script setup>
-import { ToastProvider } from '../../../../src/index'
-import ToastProviderExampleChild from './ToastProviderExampleChild.vue'
-import { ref } from 'vue'
-
-const transition = ref('slide-left')
-</script>

docs/components/toastProvider/examples/UpdateToast.vue

@@ -1,25 +1,45 @@
 <template>
   <flowbite-themable theme="blue">
-    <toast @close="$emit('close')" v-bind="$attrs">
+    <fwb-toast
+      v-bind="$attrs"
+      @close="$emit('close')"
+    >
       <template #icon>
-        <svg aria-hidden="true" class="w-5 h-5" fill="#ffff" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-          <path fill-rule="evenodd"
-                d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z"
-                clip-rule="evenodd"></path>
+        <svg
+          aria-hidden="true"
+          class="w-5 h-5"
+          fill="#ffff"
+          viewBox="0 0 20 20"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            fill-rule="evenodd"
+            d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z"
+            clip-rule="evenodd"
+          />
         </svg>
       </template>
       <span class="mb-1 text-sm font-semibold text-gray-900 dark:text-white">Update available</span>
       <div class="mb-2 text-sm font-normal">
-        <slot/>
+        <slot />
       </div>
       <div class="grid grid-cols-2 gap-2">
-        <Button size="xs">Update</Button>
-        <Button size="xs" :color="'alternative'">Not now</Button>
+        <fwb-button size="xs">
+          Update
+        </fwb-button>
+        <fwb-button
+          size="xs"
+          :color="'alternative'"
+        >
+          Not now
+        </fwb-button>
       </div>
-    </toast>
+    </fwb-toast>
   </flowbite-themable>
 </template>
+
 <script setup>
-import { Toast, Button, FlowbiteThemable } from '../../../../src/index'
+import { FlowbiteThemable, FwbButton, FwbToast } from '../../../../src/index'
+
 defineEmits(['close'])
 </script>