GitHub compo links (#1076)

* feat: add links to GitHub pages

* feat: add links to GitHub pages

* feat: update props and references

* chore: update depadencies

* chore: lib-helpes

.github/workflows/playwright-and-lint.yaml

@@ -13,7 +13,7 @@ jobs:
     name: 'Playwright and Lint'
     runs-on: ubuntu-latest
     container:
-      image: mcr.microsoft.com/playwright:v1.37.1-focal
+      image: mcr.microsoft.com/playwright:v1.38.0-focal
     steps:
       - uses: actions/checkout@v3
       - uses: pnpm/action-setup@v2

src/app.postcss

@@ -1,55 +0,0 @@
-/* Write your global styles here, in PostCSS syntax */
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-pre {
-  background-color: rgb(242, 242, 242);
-  white-space: pre-wrap;
-  width: 100%;
-}
-
-@layer base {
-  html {
-    -webkit-text-size-adjust: 100%;
-    font-family:
-      Inter,
-      ui-sans-serif,
-      system-ui,
-      -apple-system,
-      Segoe UI,
-      Roboto,
-      Helvetica Neue,
-      Arial,
-      Noto Sans,
-      sans-serif,
-      Apple Color Emoji,
-      Segoe UI Emoji,
-      Segoe UI Symbol,
-      Noto Color Emoji;
-    line-height: 1.5;
-    -moz-tab-size: 4;
-    tab-size: 4;
-  }
-
-  /* Do not change these. Changing this affect components as well */
-  main p {
-    @apply text-gray-900 dark:text-white;
-  }
-
-  .related-components,
-  .references {
-    @apply w-full flex flex-wrap;
-  }
-
-  .related-components p,
-  .references p {
-    @apply w-full md:w-1/2 lg:w-1/3;
-  }
-
-  main p > code,
-  main ul > li > code,
-  main ol > li > code {
-    @apply px-1 font-mono text-sm text-blue-600 break-all dark:text-blue-400 whitespace-nowrap;
-  }
-}

src/lib/avatar/Placeholder.svelte

@@ -33,4 +33,6 @@
 [Go to docs](https://flowbite-svelte.com/)
 ## Props
 @prop export let rounded: boolean = false;
+@prop export let border: boolean = false;
+@prop export let size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md';
 -->

src/lib/forms/MultiSelect.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import Badge from '$lib/badges/Badge.svelte';
+  import Badge from '$lib/badge/Badge.svelte';
   import { twMerge } from 'tailwind-merge';
   import type { FormSizeType, SelectOptionType } from '../types';
   import CloseButton from '$lib/utils/CloseButton.svelte';

src/lib/index.js

@@ -3,40 +3,40 @@ export { default as Accordion } from './accordion/Accordion.svelte';
 export { default as AccordionItem } from './accordion/AccordionItem.svelte';
 
 // Alerts
-export { default as Alert } from './alerts/Alert.svelte';
+export { default as Alert } from './alert/Alert.svelte';
 
 // Avatar
 export { default as Avatar } from './avatar/Avatar.svelte';
 
 // Badges
-export { default as Badge } from './badges/Badge.svelte';
+export { default as Badge } from './badge/Badge.svelte';
 
 // Banner
 export { default as Banner } from './banner/Banner.svelte';
 
 // Bottom navigation
-export { default as BottomNav } from './bottom-nav/BottomNav.svelte';
-export { default as BottomNavItem } from './bottom-nav/BottomNavItem.svelte';
-export { default as BottomNavHeader } from './bottom-nav/BottomNavHeader.svelte';
-export { default as BottomNavHeaderItem } from './bottom-nav/BottomNavHeaderItem.svelte';
+export { default as BottomNav } from './bottom-navigation/BottomNav.svelte';
+export { default as BottomNavItem } from './bottom-navigation/BottomNavItem.svelte';
+export { default as BottomNavHeader } from './bottom-navigation/BottomNavHeader.svelte';
+export { default as BottomNavHeaderItem } from './bottom-navigation/BottomNavHeaderItem.svelte';
 
 // Breadcrumbs
-export { default as Breadcrumb } from './breadcrumbs/Breadcrumb.svelte';
-export { default as BreadcrumbItem } from './breadcrumbs/BreadcrumbItem.svelte';
+export { default as Breadcrumb } from './breadcrumb/Breadcrumb.svelte';
+export { default as BreadcrumbItem } from './breadcrumb/BreadcrumbItem.svelte';
 
 // Buttons
 export { default as Button } from './buttons/Button.svelte';
 export { default as GradientButton } from './buttons/GradientButton.svelte';
 
 // Buttongroups
-export { default as ButtonGroup } from './buttongroups/ButtonGroup.svelte';
+export { default as ButtonGroup } from './button-group/ButtonGroup.svelte';
 
 // Cards
 export { default as Card } from './cards/Card.svelte';
 
 // Carousels
-export { default as Carousel } from './carousels/Carousel.svelte';
-export { default as Thumbnails } from './carousels/Thumbnails.svelte';
+export { default as Carousel } from './carousel/Carousel.svelte';
+export { default as Thumbnails } from './carousel/Thumbnails.svelte';
 
 // Charts
 export { default as Chart } from './charts/Chart.svelte';
@@ -48,16 +48,16 @@ export { default as DarkMode } from './darkmode/DarkMode.svelte';
 export { default as Datepicker } from './datepicker/Datepicker.svelte';
 
 // DeviceMockup
-export { default as DeviceMockup } from './device-mockup/DeviceMockup.svelte';
+export { default as DeviceMockup } from './device-mockups/DeviceMockup.svelte';
 
 // Drawer
 export { default as Drawer } from './drawer/Drawer.svelte';
 
 // Dropdown
-export { default as Dropdown } from './dropdowns/Dropdown.svelte';
-export { default as DropdownDivider } from './dropdowns/DropdownDivider.svelte';
-export { default as DropdownHeader } from './dropdowns/DropdownHeader.svelte';
-export { default as DropdownItem } from './dropdowns/DropdownItem.svelte';
+export { default as Dropdown } from './dropdown/Dropdown.svelte';
+export { default as DropdownDivider } from './dropdown/DropdownDivider.svelte';
+export { default as DropdownHeader } from './dropdown/DropdownHeader.svelte';
+export { default as DropdownItem } from './dropdown/DropdownItem.svelte';
 
 // Footers
 export { default as Footer } from './footer/Footer.svelte';
@@ -106,10 +106,10 @@ export { default as ListgroupItem } from './list-group/ListgroupItem.svelte';
 export { default as Marquee } from './marquee/Marquee.svelte';
 
 // Modals
-export { default as Modal } from './modals/Modal.svelte';
+export { default as Modal } from './modal/Modal.svelte';
 
 // MegaMenu
-export { default as MegaMenu } from './megamenu/MegaMenu.svelte';
+export { default as MegaMenu } from './mega-menu/MegaMenu.svelte';
 
 // Navbar
 export { default as Navbar } from './navbar/Navbar.svelte';
@@ -119,34 +119,34 @@ export { default as NavLi } from './navbar/NavLi.svelte';
 export { default as NavUl } from './navbar/NavUl.svelte';
 
 // Pagination
-export { default as Pagination } from './paginations/Pagination.svelte';
-export { default as PaginationItem } from './paginations/PaginationItem.svelte';
+export { default as Pagination } from './pagination/Pagination.svelte';
+export { default as PaginationItem } from './pagination/PaginationItem.svelte';
 
 // Popover
 export { default as Popover } from './popover/Popover.svelte';
 
 // Progressbar
-export { default as Progressbar } from './progressbars/Progressbar.svelte';
+export { default as Progressbar } from './progress/Progressbar.svelte';
 
 // Rating
-export { default as Rating } from './ratings/Rating.svelte';
-export { default as AdvancedRating } from './ratings/AdvancedRating.svelte';
-export { default as ScoreRating } from './ratings/ScoreRating.svelte';
-export { default as RatingComment } from './ratings/RatingComment.svelte';
-export { default as Review } from './ratings/Review.svelte';
-export { default as Star } from './ratings/Star.svelte';
-export { default as Heart } from './ratings/Heart.svelte';
-export { default as Thumbup } from './ratings/Thumbup.svelte';
+export { default as Rating } from './rating/Rating.svelte';
+export { default as AdvancedRating } from './rating/AdvancedRating.svelte';
+export { default as ScoreRating } from './rating/ScoreRating.svelte';
+export { default as RatingComment } from './rating/RatingComment.svelte';
+export { default as Review } from './rating/Review.svelte';
+export { default as Star } from './rating/Star.svelte';
+export { default as Heart } from './rating/Heart.svelte';
+export { default as Thumbup } from './rating/Thumbup.svelte';
 
 // Sidebar
-export { default as Sidebar } from './sidebars/Sidebar.svelte';
-export { default as SidebarItem } from './sidebars/SidebarItem.svelte';
-export { default as SidebarBrand } from './sidebars/SidebarBrand.svelte';
-export { default as SidebarCta } from './sidebars/SidebarCta.svelte';
-export { default as SidebarDropdownItem } from './sidebars/SidebarDropdownItem.svelte';
-export { default as SidebarDropdownWrapper } from './sidebars/SidebarDropdownWrapper.svelte';
-export { default as SidebarGroup } from './sidebars/SidebarGroup.svelte';
-export { default as SidebarWrapper } from './sidebars/SidebarWrapper.svelte';
+export { default as Sidebar } from './sidebar/Sidebar.svelte';
+export { default as SidebarItem } from './sidebar/SidebarItem.svelte';
+export { default as SidebarBrand } from './sidebar/SidebarBrand.svelte';
+export { default as SidebarCta } from './sidebar/SidebarCta.svelte';
+export { default as SidebarDropdownItem } from './sidebar/SidebarDropdownItem.svelte';
+export { default as SidebarDropdownWrapper } from './sidebar/SidebarDropdownWrapper.svelte';
+export { default as SidebarGroup } from './sidebar/SidebarGroup.svelte';
+export { default as SidebarWrapper } from './sidebar/SidebarWrapper.svelte';
 
 // Skeleton
 export { default as CardPlaceholder } from './skeleton/CardPlaceholder.svelte';
@@ -163,19 +163,19 @@ export { default as SpeedDial } from './speed-dial/SpeedDial.svelte';
 export { default as SpeedDialButton } from './speed-dial/SpeedDialButton.svelte';
 
 // Spin
-export { default as Spinner } from './spinners/Spinner.svelte';
+export { default as Spinner } from './spinner/Spinner.svelte';
 
 // Steps
 export { default as StepIndicator } from './steps/StepIndicator.svelte';
 
 // Tables
-export { default as Table } from './tables/Table.svelte';
-export { default as TableBody } from './tables/TableBody.svelte';
-export { default as TableBodyCell } from './tables/TableBodyCell.svelte';
-export { default as TableBodyRow } from './tables/TableBodyRow.svelte';
-export { default as TableHead } from './tables/TableHead.svelte';
-export { default as TableHeadCell } from './tables/TableHeadCell.svelte';
-export { default as TableSearch } from './tables/TableSearch.svelte';
+export { default as Table } from './table/Table.svelte';
+export { default as TableBody } from './table/TableBody.svelte';
+export { default as TableBodyCell } from './table/TableBodyCell.svelte';
+export { default as TableBodyRow } from './table/TableBodyRow.svelte';
+export { default as TableHead } from './table/TableHead.svelte';
+export { default as TableHeadCell } from './table/TableHeadCell.svelte';
+export { default as TableSearch } from './table/TableSearch.svelte';
 
 // Tabs
 export { default as TabItem } from './tabs/TabItem.svelte';
@@ -193,15 +193,15 @@ export { default as TimelineItemHorizontal } from './timeline/TimelineItemHorizo
 export { default as TimelineItemVertical } from './timeline/TimelineItemVertical.svelte';
 
 // Toast
-export { default as Toast } from './toasts/Toast.svelte';
+export { default as Toast } from './toast/Toast.svelte';
 
 // Toolbar
 export { default as Toolbar } from './toolbar/Toolbar.svelte';
 export { default as ToolbarButton } from './toolbar/ToolbarButton.svelte';
 export { default as ToolbarGroup } from './toolbar/ToolbarGroup.svelte';
 
 // Tooltips
-export { default as Tooltip } from './tooltips/Tooltip.svelte';
+export { default as Tooltip } from './tooltip/Tooltip.svelte';
 
 // Typography
 export { default as A } from './typography/A.svelte';

src/lib/marquee/Marquee.svelte

@@ -19,7 +19,7 @@
 
   onMount(() => {
     intervalId = setInterval(() => {
-      if (Math.abs(offset) >= marquee.offsetWidth) {
+      if (marquee && Math.abs(offset) >= marquee.offsetWidth) {
         offset = 0;
       } else {
         if (isHovering) offset -= hoverSpeed;

src/lib/progressbars/Progressbar.svelte → src/lib/progress/Progressbar.svelte

@@ -58,7 +58,7 @@
 ## Props
 @prop export let progress: string | number = '45';
 @prop export let precision: number = 0
-@prop export let tweenDuration: number = 400;
+  export let tweenDuration: number = 400;
 @prop export let animate: boolean = false;
 @prop export let size: string = 'h-2.5';
 @prop export let labelInside: boolean = false;

src/lib/speed-dial/SpeedDialButton.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import Button from '$lib/buttons/Button.svelte';
-  import Tooltip from '$lib/tooltips/Tooltip.svelte';
+  import Tooltip from '$lib/tooltip/Tooltip.svelte';
   import type { Placement } from '@floating-ui/dom';
   import { twMerge } from 'tailwind-merge';
   import { getContext } from 'svelte';

src/routes/+layout.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { page } from '$app/stores';
   import { DarkMode, Navbar, NavBrand, NavHamburger, NavLi, NavUl } from '$lib';
-  import Tooltip from '$lib/tooltips/Tooltip.svelte';
+  import Tooltip from '$lib/tooltip/Tooltip.svelte';
   import { onMount, setContext } from 'svelte';
   import { writable, type Writable } from 'svelte/store';
   import '../app.css';

src/routes/component-data/MultiSelect.json

@@ -1 +1 @@
-{"name":"MultiSelect","slots":[],"events":[],"props":[["items","SelectOptionType[]","[]"],["value","(string | number)[]","[]"],["size","FormSizeType","'md'"],["dropdownClass","string","''"]]}
+{"name":"MultiSelect","slots":[],"events":[],"props":[["items","SelectOptionType<any>[]","[]"],["value","(string | number)[]","[]"],["size","FormSizeType","'md'"],["dropdownClass","string","''"]]}

src/routes/component-data/Placeholder.json

@@ -1 +1 @@
-{"name":"Placeholder","slots":[],"events":[],"props":[["rounded","boolean","false"]]}
+{"name":"Placeholder","slots":[],"events":[],"props":[["rounded","boolean","false"],["border","boolean","false"],["size","'xs' | 'sm' | 'md' | 'lg' | 'xl'","'md'"]]}

src/routes/component-data/Progressbar.json

@@ -1 +1 @@
-{"name":"Progressbar","slots":[],"events":[],"props":[["progress","string | number","'45'"],["precision","number","0"],["tweenDuration","number","400"],["animate","boolean","false"],["size","string","'h-2.5'"],["labelInside","boolean","false"],["labelOutside","string","''"],["easing","EasingFunction","cubicOut"],["color","'primary' | 'blue' | 'gray' | 'red' | 'green' | 'yellow' | 'purple' | 'indigo'","'primary'"],["labelInsideClass","string","'text-primary-100 text-xs font-medium text-center p-0.5 leading-none rounded-full'"],["divClass","string","'w-full bg-gray-200 rounded-full dark:bg-gray-700'"]]}
+{"name":"Progressbar","slots":[],"events":[],"props":[["progress","string | number","'45'"],["precision","number","0"],["tweenDuration","number","400"],["animate","boolean","false"],["size","string","'h-2.5'"],["labelInside","boolean","false"],["labelOutside","string","''"],["easing","EasingFunction","cubicOut"],["color","'primary' | 'blue' | 'gray' | 'red' | 'green' | 'yellow' | 'purple' | 'indigo'","'primary'"],["labelInsideClass","string","'text-primary-100 text-xs font-medium text-center p-0.5 leading-none rounded-full'"],["divClass","string","'w-full bg-gray-200 rounded-full dark:bg-gray-700'"],["tweenDuration","number","400"]]}

src/routes/component-data/Select.json

@@ -1 +1 @@
-{"name":"Select","slots":[],"events":["on:change","on:contextmenu","on:input"],"props":[["items","SelectOptionType[]","[]"],["value","any","undefined"],["placeholder","string","'Choose option ...'"],["underline","boolean","false"],["size","'sm' | 'md' | 'lg'","'md'"],["defaultClass","string","'text-gray-900 bg-gray-50 border border-gray-300 rounded-lg focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500'"],["underlineClass","string","'text-gray-500 bg-transparent border-0 border-b-2 border-gray-200 appearance-none dark:text-gray-400 dark:border-gray-700 focus:outline-none focus:ring-0 focus:border-gray-200 peer'"]]}
+{"name":"Select","slots":[],"events":["on:change","on:contextmenu","on:input"],"props":[["items","SelectOptionType<any>[]","[]"],["value","any","undefined"],["placeholder","string","'Choose option ...'"],["underline","boolean","false"],["size","'sm' | 'md' | 'lg'","'md'"],["defaultClass","string","'text-gray-900 bg-gray-50 border border-gray-300 rounded-lg focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500'"],["underlineClass","string","'text-gray-500 bg-transparent border-0 border-b-2 border-gray-200 appearance-none dark:text-gray-400 dark:border-gray-700 focus:outline-none focus:ring-0 focus:border-gray-200 peer'"]]}

src/routes/docs/+layout.svelte

@@ -2,7 +2,7 @@
   import { page } from '$app/stores';
   import { afterNavigate } from '$app/navigation';
   import { Sidebar, SidebarGroup, SidebarItem, SidebarWrapper } from '$lib';
-  import SidebarDropdownWrapper from '$lib/sidebars/SidebarDropdownWrapper.svelte';
+  import SidebarDropdownWrapper from '$lib/sidebar/SidebarDropdownWrapper.svelte';
   import { getContext } from 'svelte';
   import type { Writable } from 'svelte/store';
   import type { PageData } from '../$types';

src/routes/docs/components/accordion.md

@@ -8,9 +8,9 @@ description: Use the accordion component to show hidden information based on the
 ---
 
 <script>
-  import { TableProp, TableDefaultRow, CompoAttributesViewer} from '../../utils'
+  import { CompoAttributesViewer, GitHubCompoLinks, toKebabCase } from '../../utils'
   import { P, A } from '$lib'; 
-  const components = 'Accordion, AccordionItem'
+  const dirName = toKebabCase(component_title)
 </script>
 
 The accordion component is a collection of vertically collapsing header and body elements that can be used to show and hide information based on the Tailwind CSS utility classes and JavaScript from Flowbite.
@@ -308,8 +308,11 @@ The component has the following props, type, and default values. See [types page
 
 - Use the `class` prop to overwrite `defaultClass`.
 
-<CompoAttributesViewer {components}/>
+<CompoAttributesViewer {dirName} />
 
 ## References
 
 - [Flowbite Accordion](https://flowbite.com/docs/components/accordion/)
+
+<GitHubCompoLinks />
+

src/routes/docs/components/alert.md

@@ -8,8 +8,8 @@ description: Show contextual information to your users using alert elements base
 ---
 
 <script>
-  import { TableProp, TableDefaultRow, CompoAttributesViewer, DocBadgeList } from '../../utils'
-  const components = 'Alert, Frame'
+  import { CompoAttributesViewer, DocBadgeList, GitHubCompoLinks, toKebabCase } from '../../utils'
+  const dirName = toKebabCase(component_title)
 </script>
 
 The alert component can be used to provide information to your users such as success or error messages, but also highlighted information complementing the normal flow of paragraphs and headers on a page. Flowbite also includes dismissable alerts which can be hidden by the users by clicking on the close icon.
@@ -335,8 +335,10 @@ Use the `close` event with `dismissable` prop.
 
 The component has the following props, type, and default values. See [types page](/docs/pages/typescript) for type information.
 
-<CompoAttributesViewer {components}/>
+<CompoAttributesViewer {dirName}/>
 
 ## References
 
 - [Flowbite Alerts](https://flowbite.com/docs/components/alerts/)
+
+<GitHubCompoLinks />