@julseb-lib/react 0.1.3 → 0.1.4

package/plop/partials/pascal-name.ts

@@ -0,0 +1,7 @@
+import type { NodePlopAPI } from "plop"
+
+export default (plop: NodePlopAPI) => {
+    const { setPartial } = plop
+
+    setPartial("pascalName", "{{ pascalCase name }}")
+}

package/plop/plopfile.ts

@@ -0,0 +1,32 @@
+import { NodePlopAPI } from "plop"
+import {
+	generatorGenerator,
+	previewGenerator,
+	componentGenerator,
+	subtypeGenerator,
+	generateDemo,
+	/* Prepend import - DO NOT REMOVE */
+} from "./generators"
+import { kebabName, pascalName } from "./partials"
+import chalk from "chalk"
+import figlet from "figlet"
+
+export default (plop: NodePlopAPI) => {
+	console.log(
+		chalk.blueBright(
+			figlet.textSync("JulSeb CLI", { horizontalLayout: "full" }),
+		),
+	)
+
+	// Partials
+	kebabName(plop)
+	pascalName(plop)
+
+	// Generators
+	generatorGenerator(plop) // yarn plop:g
+	previewGenerator(plop) // yarn plop:p
+	componentGenerator(plop) // yarn plop:c
+	subtypeGenerator(plop) // yarn plop:st
+	generateDemo(plop) // yarn plop:d
+	/* Prepend function - DO NOT REMOVE */
+}

package/plop/templates/__preview__/preview-props.hbs

@@ -0,0 +1,34 @@
+import { {{ pascalCase name }} } from "../../../"
+import type {  } from "../../../types"
+import type { ILib{{ pascalCase name }} } from "../../../types/components-props"
+import type { ComponentPreview } from "../../../../data/components"
+
+export const {{ camelCase name }}Preview: ComponentPreview<ILib{{ pascalCase name }}> = {
+    name: "{{ pascalCase name }}",
+    component: {{ pascalCase name }},
+    category: "{{ category }}",
+    import: "{{ pascalCase name }}", // import Component (ex: Skeleton)
+    additionalImports: [], // import OtherComponent (ex: SkeletonCard)
+    optionalImports: [], // import ComponentItem (ex: AccordionItem) => to build with children instead of prop on component
+    propsImport: "ILib{{ pascalCase name }}", // import ILibComponent (ex: ILibAccordion)
+    additionalTypeImports: [], // import ILibComponentItem (ex: ILibAccordionItem)
+    extends: ["HTML{{ pascalCase attribute }}Element"],
+    previews: [
+        { previewTitle: "Default", props: {  } },
+        { previewTitle: "Default", demo: <{{ pascalCase name }} /> },
+    ],
+	props: [
+		/*
+		Generate the documentation like this:
+		{
+			name: "<name of prop>",
+			type: '<type of prop, can be: "" | "string" | "Array<string>" | "number" | "boolean" | "string | number" | "string | Object" | "boolean | number | string | Object" | "string | number | Object" | "Object" | "boolean | Object" | "function" | "CSSProperties" | "string | JSX.Element" | "ReactNode">',
+			possibleValues: ["<possible value of prop>"],
+			defaultValue: "<default value or null>",
+			description: "<description of the prop>",
+			isRequired: <boolean telling if the prop is required or not>,
+		},
+		ignore ref, children, rest, className, element
+		*/
+	],
+}

package/plop/templates/__preview__/preview.hbs

@@ -0,0 +1,25 @@
+import { {{ pascalCase name }} } from "../../../"
+import type {  } from "../../../types"
+import type { ILib{{ pascalCase name }} } from "../../../types/components-props"
+import type { ComponentPreview } from "../../../../data/components"
+
+export const {{ camelCase name }}Preview: ComponentPreview<ILib{{ pascalCase name }}> = {
+    name: "{{ pascalCase name }}",
+    component: {{ pascalCase name }},
+    category: "{{ category }}",
+    imports: ["{{ pascalCase name }}"],
+    typeImports: ["ILib{{ pascalCase name }}"],
+    extends: ["HTML{{ pascalCase attribute }}Element"],
+    previews: [
+        { previewTitle: "Default", props: {  } },
+        { previewTitle: "Default", demo: <{{ pascalCase name }}Preview /> },
+    ],
+}
+
+function {{ pascalCase name }}Preview() {
+    return (
+        <{{ pascalCase name }}>
+            
+        </{{ pascalCase name }}>
+    )
+}

package/plop/templates/component/__preview__/preview.hbs

@@ -0,0 +1,21 @@
+import { {{ pascalCase name }} } from "../../../"
+import type {  } from "../../../types"
+import type { ILib{{ pascalCase name }} } from "../../../types/components-props"
+import type { ComponentPreview } from "../../../../data/components"
+
+export const {{ camelCase name }}Preview: ComponentPreview<ILib{{ pascalCase name }}> = {
+    name: "{{ pascalCase name }}",
+    component: {{ pascalCase name }},
+    category: "{{ category }}",
+    import: "{{ pascalCase name }}", // import Component (ex: Skeleton)
+    additionalImports: [], // import OtherComponent (ex: SkeletonCard)
+    optionalImports: [], // import ComponentItem (ex: AccordionItem) => to build with children instead of prop on component
+    propsImport: "ILib{{ pascalCase name }}", // import ILibComponent (ex: ILibAccordion)
+    additionalTypeImports: [], // import LibComponentItem (ex: LibAccordionItem)
+    extends: ["HTML{{ pascalCase attribute }}Element"],
+    previews: [
+        { previewTitle: "Default", props: {  } },
+        { previewTitle: "Default", demo: <{{ pascalCase name }} /> },
+    ],
+	props: [],
+}

package/plop/templates/component/index.ts.hbs

@@ -0,0 +1 @@
+export * from "./{{ pascalCase name }}"

package/plop/templates/component/types.ts.hbs

@@ -0,0 +1,5 @@
+import type { LibComponentBase } from "../../types"
+
+export interface ILib{{ pascalCase name }} extends LibComponentBase<HTML{{ pascalCase attribute }}Element> {
+	
+}

package/plop/templates/component/{{ pascalCase name }}.tsx.hbs

@@ -0,0 +1,32 @@
+import { type FC } from "react"
+import {  } from "@julseb-lib/utils"
+import { clsx } from "../../utils"
+import type { ILib{{ pascalCase name }} } from "./types"
+
+/*
+	Generate JSDoc with:
+	* <short description of the component>
+	*
+	* @component
+	*
+	* @example
+	* <an example of the component>
+	* 
+	* @extends <type the component is extending (check in ./types.ts)>
+	*
+	for each prop, generate:
+	* @prop {type} [props.<prop name>] <prop with the possible values, and default values> - <short description of the prop>
+	* 
+	* @returns <what the component returns>
+	*
+	* @see https://doc-julseb-lib-react.vercel.app/components/<name of the component>
+*/
+export const {{ pascalCase name }}: FC<ILib{{ pascalCase name }}> = ({ className, element = "{{ lowerCase tag }}", ref, {{#if children}} children,{{/if}} ...rest }) => {
+	const Element = element
+
+	return (
+		<Element ref={ref} className={clsx("", "{{ kebabCase name }}", className)} {...rest}{{#if children}}>
+			{children}
+		</Element>{{ else }} />{{/if}}
+	)
+}

package/plop/templates/demo.hbs

@@ -0,0 +1,9 @@
+import { BasePage } from "../../components"
+
+export const {{>pascalName}}Demo = () => {
+	return (
+		<BasePage title="{{>pascalName}}">
+
+		</BasePage>
+	)
+}

package/plop/templates/generator.hbs

@@ -0,0 +1,16 @@
+import type { NodePlopAPI, ActionType } from "plop"
+import { BASE_PATH } from "../utils"
+
+export default (plop: NodePlopAPI) => {
+    const { setGenerator } = plop
+
+    setGenerator("{{>kebabName}}", {
+        description: "",
+        prompts: [],
+        actions: [],
+        // actions: data => {
+        //     const actions: Array<ActionType> = []
+        //     return actions
+        // },
+    })
+}

package/plop/templates/subtypes.hbs

@@ -0,0 +1,3 @@
+import type { ILib{{ pascalCase name }} } from "./types"
+
+// ! DO NOT EXPORT THOSE TYPES, ONLY USE THEM IN {{ constantCase name }} COMPONENTS

package/plop/utils/addClosingBrackets.ts

@@ -0,0 +1,13 @@
+import type { NodePlopAPI } from "plop"
+
+/**
+ * Use as {{addClosingBrackets}}
+ */
+
+export default (plop: NodePlopAPI) => {
+    const { setHelper } = plop
+
+    setHelper("addClosingBrackets", () => {
+        return `}}`
+    })
+}

package/plop/utils/addOpenBrackets.ts

@@ -0,0 +1,13 @@
+import type { NodePlopAPI } from "plop"
+
+/**
+ * Use as {{addOpenBrackets}}
+ */
+
+export default (plop: NodePlopAPI) => {
+    const { setHelper } = plop
+
+    setHelper("addOpenBrackets", () => {
+        return `{{`
+    })
+}

package/plop/utils/all-components.ts

@@ -0,0 +1,72 @@
+export const allComponents = [
+    "Text",
+    "Wrapper",
+    "Main",
+    "Aside",
+    "Section",
+    "Grid",
+    "Flexbox",
+    "Icon",
+    "Key",
+    "TextIcon",
+    "Highlight",
+    "Linkify",
+    "Tooltip",
+    "Hr",
+    "Skeleton",
+    "Image",
+    "Masonry",
+    "FullBleed",
+    "Video",
+    "Youtube",
+    "Badge",
+    "Avatar",
+    "Loader",
+    "Burger",
+    "Button",
+    "ButtonIcon",
+    "ButtonGroup",
+    "Tag",
+    "Truncate",
+    "Card",
+    "Input",
+    "InputImage",
+    "InputCheck",
+    "InputPhone",
+    "InputCounter",
+    "InputSlider",
+    "Select",
+    "Autocomplete",
+    "Rating",
+    "InputPin",
+    "Form",
+    "ListGroup",
+    "Breadcrumbs",
+    "Accordion",
+    "Dropdown",
+    "Toast",
+    "Alert",
+    "Modal",
+    "Pagination",
+    "Paginator",
+    "Stepper",
+    "ProgressBar",
+    "ProgressCircle",
+    "Tabs",
+    "Slideshow",
+    "Cover",
+    "Table",
+    "PageLoading",
+    "Sticky",
+    "Messaging",
+    "MarkdownEditor",
+    "MarkdownContainer",
+    "CodeContainer",
+    "Fade",
+    "BackToTop",
+    "Header",
+    "IconMenu",
+    "Footer",
+    "Helmet",
+    "SrOnly",
+]

package/plop/utils/constants.ts

@@ -0,0 +1 @@
+export const BASE_PATH = "../src"

package/plop/utils/index.ts

@@ -0,0 +1,5 @@
+export * from "./constants.js"
+export { default as surroundBrackets } from "./surround-brackets.js"
+export { default as addOpenBrackets } from "./addOpenBrackets.js"
+export { default as addClosingBrackets } from "./addClosingBrackets.js"
+export * from "./all-components.js"

package/plop/utils/surround-brackets.ts

@@ -0,0 +1,12 @@
+import type { NodePlopAPI } from "plop"
+
+/**
+ * Use as {{surroundBrackets "your text"}}
+ */
+export default (plop: NodePlopAPI) => {
+    const { setHelper } = plop
+
+    setHelper("surroundBrackets", text => {
+        return `{{ ${text} }}`
+    })
+}

package/public/favicon.svg

@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.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 64 64" style="enable-background:new 0 0 64 64;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill: #1A2C42;}
+	.st1{fill: #FFFFFF;}
+
+	@media (prefers-color-scheme: dark) {
+      .st0 {fill: #FFF;}
+	  .st1 {fill: #1A2C42;}
+    }
+</style>
+<path class="st0" d="M59.05,64H4.95C2.22,64,0,61.78,0,59.05V4.95C0,2.22,2.22,0,4.95,0h54.1C61.78,0,64,2.22,64,4.95v54.1
+	C64,61.78,61.78,64,59.05,64z"/>
+<g>
+	<path class="st1" d="M29.9,36.9c-0.13,7.62-6.48,11.28-12.91,11.28c-1.1,0-6.34-0.53-9.39-3.44c1.06-1.06,3.18-3.17,6.3-6.39
+		c0.66,0.66,1.67,1.1,3.39,1.1c2.25,0,3.92-1.41,3.92-3.83V15.13h8.68V36.9z"/>
+	<path class="st1" d="M48.73,25.26c0-1.37-1.14-2.51-2.51-2.51c-1.36,0-2.47,1.15-2.47,2.51c0,1.37,1.11,2.47,2.47,2.47
+		c3.22,0,6.13,1.54,7.98,3.92c1.41,1.76,2.2,3.97,2.2,6.39c0,5.64-4.54,10.14-10.18,10.14s-10.18-4.45-10.18-10.27h7.71
+		c0,1.41,1.11,2.51,2.47,2.51c1.37,0,2.51-1.1,2.51-2.47c0-1.37-1.14-2.51-2.51-2.51c-5.64,0-10.13-4.49-10.13-10.13
+		s4.49-10.18,10.13-10.18S56.4,19.62,56.4,25.26H48.73z"/>
+</g>
+</svg>

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

@@ -0,0 +1,37 @@
+<?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

@@ -0,0 +1,35 @@
+<?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

@@ -0,0 +1 @@
+<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

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

package/src/components/ComponentPreview.tsx

@@ -0,0 +1,46 @@
+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

@@ -0,0 +1,9 @@
+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

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

package/src/components/layout/BasePage.tsx

@@ -0,0 +1,27 @@
+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

@@ -0,0 +1,97 @@
+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
+}