@julseb-lib/react 0.1.5 → 0.1.6

package/public/images/logo-fajny-css-white.svg

@@ -1,37 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 1000 167.3" style="enable-background:new 0 0 1000 167.3;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:#FFFFFF;}
-</style>
-<g>
-	<g>
-		<path class="st0" d="M0,135.2V1.7h93V29H34.3v24.6h54.9v27.3H34.3v54.3H0z"/>
-		<path class="st0" d="M201.1,135.2l-11.9-27.6h-59.1l-11.9,27.6h-35L145.4,1.7H173l62.5,133.5H201.1z M141.2,81.4H178l-18.4-42.8
-			L141.2,81.4z"/>
-		<path class="st0" d="M234.6,109.4l15.5-0.9c4.7-0.3,8-1.4,10-3.4c2-2,3-5.2,3-9.7V1.7h35v93.1c0,13-3.5,22.9-10.4,29.8
-			c-6.9,6.9-17.5,10.8-31.6,11.6l-19.5,0.9L234.6,109.4z"/>
-		<path class="st0" d="M408.9,1.7h32.6v133.5h-25.7l-61-76.3v76.3h-32.4V1.7h25.4L408.9,78V1.7z"/>
-		<path class="st0" d="M589,1.7l-56.4,74v59.4h-34.8V75.7l-56-74h39.2L515,48.1l34.5-46.4H589z"/>
-		<path class="st0" d="M671.4,128.4c-10.3-5.7-18.2-13.7-23.7-24c-5.5-10.3-8.2-22.3-8.2-36c0-13.6,2.8-25.6,8.2-35.9
-			c5.5-10.3,13.4-18.3,23.7-24C681.7,2.8,693.8,0,707.7,0c8.7,0,17.1,1.3,25.3,4c8.1,2.7,14.8,6.2,20,10.6l-10.8,24.6
-			c-11-7.7-22.2-11.5-33.7-11.5c-10.9,0-19.2,3.4-24.9,10.2c-5.7,6.8-8.6,17-8.6,30.5s2.9,23.7,8.6,30.6c5.7,6.9,14,10.3,24.9,10.3
-			c11.5,0,22.7-3.8,33.7-11.5l10.8,24.6c-5.2,4.4-11.8,8-20,10.6c-8.1,2.7-16.6,4-25.3,4C693.8,136.9,681.7,134,671.4,128.4z"/>
-		<path class="st0" d="M787,132.9c-9.7-2.7-17.6-6.2-23.7-10.6l10.8-24.6c6.4,4,13.3,7.1,20.6,9.3c7.3,2.1,14.7,3.2,22.1,3.2
-			c7.6,0,13.4-1,17.3-3.1c4-2.1,6-5,6-8.8c0-3.4-1.8-6.2-5.4-8.3c-3.6-2.1-10.4-4.3-20.5-6.4c-12.5-2.7-22.3-5.8-29.3-9.5
-			c-7.1-3.7-12-8-14.9-12.9c-2.8-4.9-4.3-11-4.3-18.2c0-8.2,2.3-15.6,6.9-22.1c4.6-6.5,11.1-11.6,19.5-15.3c8.4-3.7,18-5.6,28.9-5.6
-			c9.6,0,18.9,1.4,27.9,4.1c9,2.7,16.1,6.2,21.1,10.5l-10.6,24.6c-12.1-8.3-24.9-12.5-38.2-12.5c-6.4,0-11.6,1.2-15.5,3.7
-			c-3.9,2.5-5.9,5.7-5.9,9.8c0,2.4,0.7,4.4,2.1,5.9c1.4,1.5,4,3,7.8,4.4c3.8,1.5,9.4,2.9,16.8,4.5c12.1,2.7,21.6,5.8,28.6,9.6
-			s11.9,8,14.8,13s4.4,10.8,4.4,17.6c0,13.1-5,23.4-15.1,30.8c-10.1,7.4-24.3,11.1-42.6,11.1C806.6,136.9,796.7,135.6,787,132.9z"/>
-		<path class="st0" d="M912.7,132.9c-9.7-2.7-17.6-6.2-23.7-10.6l10.8-24.6c6.4,4,13.3,7.1,20.6,9.3c7.3,2.1,14.7,3.2,22.1,3.2
-			c7.6,0,13.4-1,17.3-3.1c4-2.1,6-5,6-8.8c0-3.4-1.8-6.2-5.4-8.3c-3.6-2.1-10.4-4.3-20.5-6.4c-12.5-2.7-22.3-5.8-29.3-9.5
-			c-7.1-3.7-12-8-14.9-12.9c-2.8-4.9-4.3-11-4.3-18.2c0-8.2,2.3-15.6,6.9-22.1c4.6-6.5,11.1-11.6,19.5-15.3c8.4-3.7,18-5.6,28.9-5.6
-			c9.6,0,18.9,1.4,27.9,4.1c9,2.7,16.1,6.2,21.1,10.5l-10.6,24.6c-12.1-8.3-24.9-12.5-38.2-12.5c-6.4,0-11.6,1.2-15.5,3.7
-			c-3.9,2.5-5.9,5.7-5.9,9.8c0,2.4,0.7,4.4,2.1,5.9c1.4,1.5,4,3,7.8,4.4c3.8,1.5,9.4,2.9,16.8,4.5c12.1,2.7,21.6,5.8,28.6,9.6
-			s11.9,8,14.8,13s4.4,10.8,4.4,17.6c0,13.1-5,23.4-15.1,30.8c-10.1,7.4-24.3,11.1-42.6,11.1C932.3,136.9,922.4,135.6,912.7,132.9z"
-			/>
-	</g>
-	<rect x="640" y="157.3" class="st0" width="359.7" height="10"/>
-</g>
-</svg>

package/public/images/logo-fajny-css.svg

@@ -1,35 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 24.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 1000 167.3" style="enable-background:new 0 0 1000 167.3;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:#1B4568;}
-	.st1{fill:#266DD3;}
-</style>
-<g>
-	<path class="st0" d="M0,135.2V1.7h93V29H34.3v24.6h54.9v27.3H34.3v54.3H0z"/>
-	<path class="st0" d="M201.1,135.2l-11.9-27.6h-59.1l-11.9,27.6h-35L145.4,1.7H173l62.5,133.5H201.1z M141.2,81.4H178l-18.4-42.8
-		L141.2,81.4z"/>
-	<path class="st0" d="M234.6,109.4l15.5-0.9c4.7-0.3,8-1.4,10-3.4s3-5.2,3-9.7V1.7h35v93.1c0,13-3.5,22.9-10.4,29.8
-		s-17.5,10.8-31.6,11.6l-19.5,0.9L234.6,109.4z"/>
-	<path class="st0" d="M408.9,1.7h32.6v133.5h-25.7l-61-76.3v76.3h-32.4V1.7h25.4L408.9,78V1.7z"/>
-	<path class="st0" d="M589,1.7l-56.4,74v59.4h-34.8V75.7l-56-74H481l34,46.4l34.5-46.4C549.5,1.7,589,1.7,589,1.7z"/>
-	<path class="st0" d="M671.4,128.4c-10.3-5.7-18.2-13.7-23.7-24s-8.2-22.3-8.2-36c0-13.6,2.8-25.6,8.2-35.9
-		c5.5-10.3,13.4-18.3,23.7-24C681.7,2.8,693.8,0,707.7,0c8.7,0,17.1,1.3,25.3,4c8.1,2.7,14.8,6.2,20,10.6l-10.8,24.6
-		c-11-7.7-22.2-11.5-33.7-11.5c-10.9,0-19.2,3.4-24.9,10.2s-8.6,17-8.6,30.5s2.9,23.7,8.6,30.6c5.7,6.9,14,10.3,24.9,10.3
-		c11.5,0,22.7-3.8,33.7-11.5l10.8,24.6c-5.2,4.4-11.8,8-20,10.6c-8.1,2.7-16.6,4-25.3,4C693.8,136.9,681.7,134,671.4,128.4z"/>
-	<path class="st0" d="M787,132.9c-9.7-2.7-17.6-6.2-23.7-10.6l10.8-24.6c6.4,4,13.3,7.1,20.6,9.3c7.3,2.1,14.7,3.2,22.1,3.2
-		c7.6,0,13.4-1,17.3-3.1c4-2.1,6-5,6-8.8c0-3.4-1.8-6.2-5.4-8.3c-3.6-2.1-10.4-4.3-20.5-6.4c-12.5-2.7-22.3-5.8-29.3-9.5
-		c-7.1-3.7-12-8-14.9-12.9c-2.8-4.9-4.3-11-4.3-18.2c0-8.2,2.3-15.6,6.9-22.1c4.6-6.5,11.1-11.6,19.5-15.3S810.1,0,821,0
-		c9.6,0,18.9,1.4,27.9,4.1S865,10.3,870,14.6l-10.6,24.6c-12.1-8.3-24.9-12.5-38.2-12.5c-6.4,0-11.6,1.2-15.5,3.7s-5.9,5.7-5.9,9.8
-		c0,2.4,0.7,4.4,2.1,5.9c1.4,1.5,4,3,7.8,4.4c3.8,1.5,9.4,2.9,16.8,4.5c12.1,2.7,21.6,5.8,28.6,9.6c7,3.8,11.9,8,14.8,13
-		s4.4,10.8,4.4,17.6c0,13.1-5,23.4-15.1,30.8s-24.3,11.1-42.6,11.1C806.6,136.9,796.7,135.6,787,132.9z"/>
-	<path class="st0" d="M912.7,132.9c-9.7-2.7-17.6-6.2-23.7-10.6l10.8-24.6c6.4,4,13.3,7.1,20.6,9.3c7.3,2.1,14.7,3.2,22.1,3.2
-		c7.6,0,13.4-1,17.3-3.1c4-2.1,6-5,6-8.8c0-3.4-1.8-6.2-5.4-8.3c-3.6-2.1-10.4-4.3-20.5-6.4c-12.5-2.7-22.3-5.8-29.3-9.5
-		c-7.1-3.7-12-8-14.9-12.9c-2.8-4.9-4.3-11-4.3-18.2c0-8.2,2.3-15.6,6.9-22.1c4.6-6.5,11.1-11.6,19.5-15.3s18-5.6,28.9-5.6
-		c9.6,0,18.9,1.4,27.9,4.1s16.1,6.2,21.1,10.5l-10.6,24.6c-12.1-8.3-24.9-12.5-38.2-12.5c-6.4,0-11.6,1.2-15.5,3.7s-5.9,5.7-5.9,9.8
-		c0,2.4,0.7,4.4,2.1,5.9c1.4,1.5,4,3,7.8,4.4c3.8,1.5,9.4,2.9,16.8,4.5c12.1,2.7,21.6,5.8,28.6,9.6c7,3.8,11.9,8,14.8,13
-		s4.4,10.8,4.4,17.6c0,13.1-5,23.4-15.1,30.8s-24.3,11.1-42.6,11.1C932.3,136.9,922.4,135.6,912.7,132.9z"/>
-</g>
-<rect x="640" y="157.3" class="st1" width="359.7" height="10"/>
-</svg>

package/public/vite.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/src/App.tsx

@@ -1,6 +0,0 @@
-import { RouterProvider } from "react-router-dom"
-import { router } from "./routes"
-
-export const App = () => {
-	return <RouterProvider router={router} />
-}

package/src/components/ComponentPreview.tsx

@@ -1,46 +0,0 @@
-import type { FC, ForwardRefExoticComponent, RefAttributes } from "react"
-import clsx from "clsx"
-
-interface IComponentPreviewContent {
-	component: FC | ForwardRefExoticComponent<any & RefAttributes<any>> | null
-	props?: any
-	demo?: ReactElement
-}
-
-const ComponentPreviewContent = ({
-	component,
-	props,
-	demo,
-}: IComponentPreviewContent) => {
-	const Component = component as any
-
-	if (demo) return demo
-	if (props) return <Component {...props} />
-
-	return null
-}
-
-interface IComponentPreview extends IComponentPreviewContent {
-	previewTitle?: string
-	noStretch?: boolean
-}
-
-export const ComponentPreview = ({
-	previewTitle,
-	noStretch,
-	...rest
-}: IComponentPreview) => {
-	return previewTitle ? (
-		<div
-			className={clsx(
-				"flex flex-col gap-3",
-				noStretch ? "items-start" : "items-stretch",
-			)}
-		>
-			<h4>{previewTitle}</h4>
-			<ComponentPreviewContent {...rest} />
-		</div>
-	) : (
-		<ComponentPreviewContent {...rest} />
-	)
-}

package/src/components/GridItem.tsx

@@ -1,9 +0,0 @@
-export const GridItem: FC<IGridItem> = ({ children = "Grid item" }) => {
-	return (
-		<div className="bg-blue-500 p-4 rounded-lg text-white">{children}</div>
-	)
-}
-
-interface IGridItem {
-	children?: Children
-}

package/src/components/index.ts

@@ -1,4 +0,0 @@
-export * from "./layout/Page"
-export * from "./layout/BasePage"
-export * from "./GridItem"
-export * from "./layout/CoverLayout"

package/src/components/layout/BasePage.tsx

@@ -1,27 +0,0 @@
-import { Helmet, HelmetData } from "react-helmet-async"
-import { SITE_DATA } from "../../data"
-
-const helmetData = new HelmetData({})
-
-export const BasePage: FC<IBasePage> = ({ title, children }) => {
-	return (
-		<>
-			<Helmet helmetData={helmetData}>
-				<title>{`${title} | ${SITE_DATA.NAME}`}</title>
-				<meta content="IE=edge" httpEquiv="X-UA-Compatible" />
-				<meta
-					content="width=device-width, initial-scale=1"
-					name="viewport"
-				/>
-				<link rel="icon" href={SITE_DATA.FAVICON} />
-			</Helmet>
-
-			{children}
-		</>
-	)
-}
-
-export interface IBasePage {
-	title: string
-	children?: Children
-}

package/src/components/layout/CoverLayout.tsx

@@ -1,97 +0,0 @@
-import { BasePage } from "./BasePage"
-import { Wrapper, Main, Text } from "../../lib"
-
-export const CoverLayout: FC<ICoverLayout> = ({ title, children }) => {
-	return (
-		<BasePage title={title}>
-			{children}
-
-			<Wrapper>
-				<Main>
-					<Text>
-						Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-						Aenean tempus mi augue. Aenean iaculis dolor purus. Orci
-						varius natoque penatibus et magnis dis parturient
-						montes, nascetur ridiculus mus. Quisque lectus risus,
-						luctus at luctus eget, gravida vitae odio. Aliquam
-						commodo fermentum odio at egestas. Sed rutrum commodo
-						auctor. Sed eu ullamcorper mi, accumsan lacinia urna.
-						Duis non placerat urna. Suspendisse vel mi eros. Mauris
-						rutrum sit amet erat at volutpat. In facilisis molestie
-						gravida. Nullam lorem nisi, porta vel arcu nec, cursus
-						sagittis nisl. Etiam consequat sed urna eu tincidunt.
-						Cras sit amet justo eget est vestibulum aliquet et vitae
-						elit.
-					</Text>
-
-					<Text>
-						Nunc fermentum egestas orci. Aenean vehicula massa a
-						lectus imperdiet sodales. Integer finibus mauris dolor,
-						non aliquam lectus dignissim et. Ut bibendum augue nec
-						mattis consectetur. Vestibulum interdum leo vel tellus
-						fringilla bibendum quis ut tellus. Curabitur lacus diam,
-						condimentum a ullamcorper nec, facilisis faucibus nisl.
-						Quisque euismod massa et erat mollis auctor. Sed aliquet
-						elit enim, in dictum eros fringilla vitae. Nulla laoreet
-						felis leo, eget faucibus tellus tincidunt vel. Nam eget
-						congue felis. Fusce commodo posuere libero, ut
-						vestibulum sem efficitur et. Maecenas eros neque, auctor
-						eget odio vitae, molestie cursus dui. Vestibulum dapibus
-						elit non magna gravida, vel pulvinar dolor tempor. Nunc
-						vehicula sem orci, vel tempor mauris accumsan vitae.
-						Praesent at scelerisque elit.
-					</Text>
-
-					<Text>
-						Donec ultrices sit amet massa at semper. Cras quam
-						mauris, tempor a luctus vel, lacinia vel dui. In eget
-						pellentesque purus. Integer tempus, tortor vitae
-						malesuada feugiat, velit quam consequat magna, vitae
-						venenatis risus purus a ante. Class aptent taciti
-						sociosqu ad litora torquent per conubia nostra, per
-						inceptos himenaeos. Aenean quis cursus ipsum. Proin
-						scelerisque metus sed pellentesque viverra. Proin
-						consequat ante risus, quis euismod metus varius non. Sed
-						varius tortor sed nunc pulvinar consequat. Etiam tortor
-						odio, aliquam ac est et, consequat fringilla justo.
-						Mauris in nibh nec neque blandit pulvinar. Sed dapibus
-						elit nulla, nec fringilla neque dignissim non. Phasellus
-						eu facilisis urna. Vivamus feugiat convallis ligula, id
-						congue tellus tincidunt vitae. Aliquam bibendum sed erat
-						porta molestie.
-					</Text>
-
-					<Text>
-						Donec non cursus est. Vestibulum ante ipsum primis in
-						faucibus orci luctus et ultrices posuere cubilia curae;
-						Proin elementum consectetur orci ac faucibus. Sed
-						sodales dolor lorem, consectetur sollicitudin nunc
-						viverra eget. Aliquam eget tortor ultrices neque commodo
-						bibendum. Mauris tellus lacus, posuere eget tincidunt
-						ac, maximus sit amet turpis. Donec in quam eget quam
-						pulvinar feugiat. Morbi ante dolor, rhoncus a pharetra
-						in, laoreet eget odio. Donec commodo ligula ac gravida
-						aliquam. Nam ac lorem at turpis facilisis tempus et
-						egestas libero.
-					</Text>
-
-					<Text>
-						Nulla gravida, quam a ultrices molestie, ante nisl
-						commodo nibh, eget elementum ligula ex eget ante. Sed
-						elementum quam nec diam pellentesque vehicula. Phasellus
-						elementum lacus ligula. Vivamus ornare eros at purus
-						vehicula, vel pulvinar diam hendrerit. Sed non nulla
-						fringilla, venenatis dui ut, ultrices nunc. Nam libero
-						arcu, varius eget lacus sit amet, facilisis ullamcorper
-						nibh. Duis vel neque tellus.
-					</Text>
-				</Main>
-			</Wrapper>
-		</BasePage>
-	)
-}
-
-interface ICoverLayout {
-	title: string
-	children?: Children
-}

package/src/components/layout/Nav.tsx

@@ -1,63 +0,0 @@
-import { useState, useRef } from "react"
-import { NavLink } from "react-router-dom"
-import { toTitleCase } from "@julseb-lib/utils"
-import { useLibTheme, useKeyPress, clsx, Input } from "../../lib"
-import { routesPaths } from "../../routes"
-import { componentPaths } from "../../data/components"
-
-export const Nav = () => {
-	const { switchTheme, theme } = useLibTheme()
-
-	const [search, setSearch] = useState("")
-	const clearSearch = () => setSearch("")
-
-	const filteredRoutes: Array<{ path: string }> = [
-		...routesPaths,
-		...componentPaths,
-	].filter(route => route.path.toLowerCase().includes(search.toLowerCase()))
-
-	const el = useRef<HTMLInputElement>(null)
-	useKeyPress(["Command", "KeyK"], () => el?.current?.focus())
-
-	return (
-		<nav className="fixed flex flex-col items-stretch gap-2 bg-primary-800 p-4 w-[250px] h-[100vh] overflow-y-scroll no-scrollbar">
-			<div className="block h-8">
-				<Input
-					type="search"
-					clearSearch={clearSearch}
-					placeholder="Search component"
-					className={clsx(
-						"p-1 w-full",
-						"border-1 border-gray-200 focus:border-blue-200 border-solid rounded-sm outline-none",
-						theme === "dark" ? "dark:bg-black" : "bg-white",
-					)}
-					value={search}
-					onChange={e => setSearch(e.target.value)}
-					ref={el as any}
-				/>
-			</div>
-
-			<button
-				onClick={switchTheme}
-				className="bg-blue-500 hover:bg-blue-300 active:bg-blue-600 px-4 py-2 rounded-md font-black text-white"
-			>
-				Switch theme
-			</button>
-
-			{filteredRoutes?.map(r => (
-				<NavLink
-					to={r.path}
-					key={r.path}
-					className="[&.active]:font-black text-white"
-					end={!!(r.path === "/")}
-				>
-					{r.path === "/"
-						? "Homepage"
-						: toTitleCase(
-								r.path.replaceAll("/", "").replaceAll("-", " "),
-							)}
-				</NavLink>
-			))}
-		</nav>
-	)
-}

package/src/components/layout/Page.tsx

@@ -1,24 +0,0 @@
-import { BasePage } from "./BasePage"
-import { Nav } from "./Nav"
-import { Text } from "../../lib"
-
-export const Page: FC<IPage> = ({ title, children }) => {
-	return (
-		<BasePage title={title}>
-			<Nav />
-
-			<div className="left-[250px] relative flex justify-center w-[calc(100%-250px)]">
-				<main className="flex flex-col items-stretch gap-6 py-12 w-full max-w-[800px]">
-					<Text tag="h1">{title}</Text>
-
-					{children}
-				</main>
-			</div>
-		</BasePage>
-	)
-}
-
-interface IPage {
-	title: string
-	children?: Children
-}

package/src/data/components.tsx

@@ -1,220 +0,0 @@
-import type { ForwardRefExoticComponent, RefAttributes } from "react"
-import { toKebabCase } from "@julseb-lib/utils"
-import type { ComponentPaths } from "../routes"
-import { colorsPreview } from "./previews/styles/Colors.preview"
-import { overlaysPreview } from "./previews/styles/Overlays.preview"
-import { textPreview } from "../lib/components/Text/__preview__/Text.preview"
-import { shadowsPreview } from "./previews/styles/Shadows.preview"
-import { spacersPreview } from "./previews/styles/Spacers.preview"
-import { radiusesPreview } from "./previews/styles/Radiuses.preview"
-import { themeProviderPreview } from "./previews/styles/Theme.preview"
-import { wrapperPreview } from "../lib/components/Wrapper/__preview__/Wrapper.preview"
-import { mainPreview } from "../lib/components/Main/__preview__/Main.preview"
-import { asidePreview } from "../lib/components/Aside/__preview__/Aside.preview"
-import { sectionPreview } from "../lib/components/Section/__preview__/Section.preview"
-import { gridPreview } from "../lib/components/Grid/__preview__/Grid.preview"
-import { flexboxPreview } from "../lib/components/Flexbox/__preview__/Flexbox.preview"
-import { keyPreview } from "../lib/components/Key/__preview__/Key.preview"
-import { highlightPreview } from "../lib/components/Highlight/__preview__/Highlight.preview"
-import { linkifyPreview } from "../lib/components/Linkify/__preview__/Linkify.preview"
-import { tooltipPreview } from "../lib/components/Tooltip/__preview__/Tooltip.preview"
-import { hrPreview } from "../lib/components/Hr/__preview__/Hr.preview"
-import { skeletonPreview } from "../lib/components/Skeleton/__preview__/Skeleton.preview"
-import { imagePreview } from "../lib/components/Image/__preview__/Image.preview"
-import { masonryPreview } from "../lib/components/Masonry/__preview__/Masonry.preview"
-import { badgePreview } from "../lib/components/Badge/__preview__/Badge.preview"
-import { avatarPreview } from "../lib/components/Avatar/__preview__/Avatar.preview"
-import { loaderPreview } from "../lib/components/Loader/__preview__/Loader.preview"
-import { burgerPreview } from "../lib/components/Burger/__preview__/Burger.preview"
-import { buttonPreview } from "../lib/components/Button/__preview__/Button.preview"
-import { buttonIconPreview } from "../lib/components/ButtonIcon/__preview__/ButtonIcon.preview"
-import { buttonGroupPreview } from "../lib/components/ButtonGroup/__preview__/ButtonGroup.preview"
-import { tagPreview } from "../lib/components/Tag/__preview__/Tag.preview"
-import { inputPreview } from "../lib/components/Input/__preview__/Input.preview"
-import { inputImagePreview } from "../lib/components/InputImage/__preview__/InputImage.preview"
-import { inputCheckPreview } from "../lib/components/InputCheck/__preview__/InputCheck.preview"
-import { inputPhonePreview } from "../lib/components/InputPhone/__preview__/InputPhone.preview"
-import { inputCounterPreview } from "../lib/components/InputCounter/__preview__/InputCounter.preview"
-import { inputSliderPreview } from "../lib/components/InputSlider/__preview__/InputSlider.preview"
-import { selectPreview } from "../lib/components/Select/__preview__/Select.preview"
-import { autocompletePreview } from "../lib/components/Autocomplete/__preview__/Autocomplete.preview"
-import { ratingPreview } from "../lib/components/Rating/__preview__/Rating.preview"
-import { inputPinPreview } from "../lib/components/InputPin/__preview__/InputPin.preview"
-import { fieldsetPreview } from "../lib/components/Fieldset/__preview__/Fieldset.preview"
-import { formPreview } from "../lib/components/Form/__preview__/Form.preview"
-import { listGroupPreview } from "../lib/components/ListGroup/__preview__/ListGroup.preview"
-import { breadcrumbsPreview } from "../lib/components/Breadcrumbs/__preview__/Breadcrumbs.preview"
-import { accordionPreview } from "../lib/components/Accordion/__preview__/Accordion.preview"
-import { dropdownPreview } from "../lib/components/Dropdown/__preview__/Dropdown.preview"
-import { toastPreview } from "../lib/components/Toast/__preview__/Toast.preview"
-import { alertPreview } from "../lib/components/Alert/__preview__/Alert.preview"
-import { modalPreview } from "../lib/components/Modal/__preview__/Modal.preview"
-import { draglistPreview } from "../lib/components/DragList/__preview__/Draglist.preview"
-import { paginationPreview } from "../lib/components/Pagination/__preview__/Pagination.preview"
-import { paginatorPreview } from "../lib/components/Paginator/__preview__/Paginator.preview"
-import { progressBarPreview } from "../lib/components/ProgressBar/__preview__/ProgressBar.preview"
-import { progressCirclePreview } from "../lib/components/ProgressCircle/__preview__/ProgressCircle.preview"
-import { tabsPreview } from "../lib/components/Tabs/__preview__/Tabs.preview"
-import { slideshowPreview } from "../lib/components/Slideshow/__preview__/Slideshow.preview"
-import { coverPreview } from "../lib/components/Cover/__preview__/Cover.preview"
-import { tablePreview } from "../lib/components/Table/__preview__/Table.preview"
-import { pageLoadingPreview } from "../lib/components/PageLoading/__preview__/PageLoading.preview"
-import { stickyPreview } from "../lib/components/Sticky/__preview__/Sticky.preview"
-import { markdownEditorPreview } from "../lib/components/MarkdownEditor/__preview__/MarkdownEditor.preview"
-import { markdownContainerPreview } from "../lib/components/MarkdownContainer/__preview__/MarkdownContainer.preview"
-import { codeContainerPreview } from "../lib/components/CodeContainer/__preview__/CodeContainer.preview"
-import { fadePreview } from "../lib/components/Fade/__preview__/Fade.preview"
-import { backToTopPreview } from "../lib/components/BackToTop/__preview__/BackToTop.preview"
-import { drawerPreview } from "../lib/components/Drawer/__preview__/Drawer.preview"
-import { headerPreview } from "../lib/components/Header/__preview__/Header.preview"
-import { iconMenuPreview } from "../lib/components/IconMenu/__preview__/IconMenu.preview"
-/* Prepend import - DO NOT REMOVE */
-
-export type PreviewProp<T> = {
-	props: T
-}
-
-export type PreviewDemo = {
-	demo: ReactElement
-}
-
-type Prop = {
-	name: string
-	type:
-		| ""
-		| "string"
-		| "Array<string>"
-		| "number"
-		| "boolean"
-		| "string | number"
-		| "string | Object"
-		| "boolean | number | string | Object"
-		| "number | string | Object"
-		| "Object"
-		| "boolean | Object"
-		| "Array of objects"
-		| "function"
-		| "string | JSX.Element"
-		| "ReactNode"
-		| "CSSProperties"
-		| "ReactElement"
-		| "Ref"
-		| "Array of array of ReactElement"
-		| "Array of React Element"
-	possibleValues:
-		| Array<string | number>
-		| "Any color from the library"
-		| "Any color or overlay from the library"
-		| null
-	defaultValue: string | null
-	description: string
-	isRequired: boolean
-}
-
-export interface ComponentPreview<T> {
-	name: string
-	component:
-		| FC<any>
-		| ForwardRefExoticComponent<T & RefAttributes<any>>
-		| null
-	category: "styles" | "layouts" | "components" | "helpers"
-	import: string | null // import Component (ex: Skeleton)
-	additionalImports: Array<string> | null // import OtherComponent (ex: SkeletonCard)
-	optionalImports: Array<string> | null // import ComponentItem (ex: AccordionItem) => to build with children instead of prop on component
-	propsImport: string | null // import ILibComponent (ex: ILibAccordion)
-	additionalTypeImports: Array<string> | null // import ILibComponentItem (ex: ILibAccordionItem)
-	extends: Array<string> | Array<{ name: string; from: string }> | null
-	noStretch?: boolean
-	// TODO?: noAs: boolean
-	// TODO?: noRef?: boolean
-	previews: Array<
-		(PreviewProp<T> | PreviewDemo) & {
-			previewTitle?: string
-		}
-	> | null
-	propsTitle?: string
-	props: Array<Prop> | null
-	propsSecondTitle?: string
-	propsSecond?: Array<Prop>
-	propsThirdTitle?: string
-	propsThird?: Array<Prop>
-	propsFourthTitle?: string
-	propsFourth?: Array<Prop>
-	propsFifthTitle?: string
-	propsFifth?: Array<Prop>
-}
-
-export const previews: Array<ComponentPreview<any>> = [
-	colorsPreview,
-	overlaysPreview,
-	textPreview,
-	shadowsPreview,
-	spacersPreview,
-	radiusesPreview,
-	themeProviderPreview,
-	wrapperPreview,
-	mainPreview,
-	asidePreview,
-	sectionPreview,
-	gridPreview,
-	flexboxPreview,
-	keyPreview,
-	highlightPreview,
-	linkifyPreview,
-	tooltipPreview,
-	hrPreview,
-	skeletonPreview,
-	imagePreview,
-	masonryPreview,
-	badgePreview,
-	avatarPreview,
-	loaderPreview,
-	burgerPreview,
-	buttonPreview,
-	buttonIconPreview,
-	buttonGroupPreview,
-	tagPreview,
-	inputPreview,
-	inputImagePreview,
-	inputCheckPreview,
-	inputPhonePreview,
-	inputCounterPreview,
-	inputSliderPreview,
-	selectPreview,
-	autocompletePreview,
-	ratingPreview,
-	inputPinPreview,
-	fieldsetPreview,
-	formPreview,
-	listGroupPreview,
-	breadcrumbsPreview,
-	accordionPreview,
-	dropdownPreview,
-	toastPreview,
-	alertPreview,
-	modalPreview,
-	draglistPreview,
-	paginationPreview,
-	paginatorPreview,
-	progressBarPreview,
-	progressCirclePreview,
-	tabsPreview,
-	slideshowPreview,
-	coverPreview,
-	tablePreview,
-	pageLoadingPreview,
-	stickyPreview,
-	markdownEditorPreview,
-	markdownContainerPreview,
-	codeContainerPreview,
-	fadePreview,
-	backToTopPreview,
-	drawerPreview,
-	headerPreview,
-	iconMenuPreview,
-	/* Prepend array - DO NOT REMOVE */
-]
-
-export const componentPaths: ComponentPaths = previews.map(preview => ({
-	path: `/${toKebabCase(preview.name)}`,
-}))