@julseb-lib/react 0.1.5 → 0.1.7

package/src/lib/components/Avatar/__preview__/Avatar.preview.tsx

@@ -1,107 +0,0 @@
-import { BiUser } from "react-icons/bi"
-import { Avatar } from "../../../"
-import type { ILibAvatar } from "../../../types/components-props"
-import type { ComponentPreview } from "../../../../data/components"
-
-export const avatarPreview: ComponentPreview<ILibAvatar> = {
-	name: "Avatar",
-	component: Avatar,
-	category: "components",
-	import: "Avatar",
-	additionalImports: null,
-	optionalImports: null,
-	propsImport: "ILibAvatar",
-	additionalTypeImports: null,
-	extends: ["HTMLSpanElement"],
-	previews: [
-		{
-			previewTitle: "With image",
-			props: {
-				children: <img src="/images/pic-avatar.jpg" alt="Avatar" />,
-			},
-		},
-		{ previewTitle: "With initials", props: { children: "JS" } },
-		{
-			previewTitle: "With icon",
-			props: { children: <BiUser size={32} /> },
-		},
-		{
-			previewTitle: "With badge",
-			props: {
-				children: "JS",
-				backgroundColor: "secondary",
-				borderColor: "warning",
-				className: "border-4",
-				badge: { content: 1, color: "danger" },
-			},
-		},
-	],
-	props: [
-		{
-			name: "badge",
-			type: "string | Object",
-			possibleValues: null,
-			defaultValue: null,
-			description:
-				"Badge to display on the avatar, can be a string or an object with content and colors.",
-			isRequired: false,
-		},
-		{
-			name: "containerStyle",
-			type: "CSSProperties",
-			possibleValues: null,
-			defaultValue: null,
-			description: "Inline styles for the avatar container.",
-			isRequired: false,
-		},
-		{
-			name: "containerClassName",
-			type: "string",
-			possibleValues: null,
-			defaultValue: null,
-			description: "Additional CSS classes for the avatar container.",
-			isRequired: false,
-		},
-		{
-			name: "borderRadius",
-			type: "string",
-			possibleValues: [
-				"none",
-				"sm",
-				"md",
-				"lg",
-				"xl",
-				"2xl",
-				"3xl",
-				"full",
-			],
-			defaultValue: "full",
-			description: "Border radius of the avatar.",
-			isRequired: false,
-		},
-		{
-			name: "borderColor",
-			type: "string",
-			possibleValues: "Any color from the library",
-			defaultValue: null,
-			description: "Border color of the avatar.",
-			isRequired: false,
-		},
-		{
-			name: "backgroundColor",
-			type: "string",
-			possibleValues: "Any color from the library",
-			defaultValue: "primary",
-			description: "Background color of the avatar.",
-			isRequired: false,
-		},
-		{
-			name: "contentColor",
-			type: "string",
-			possibleValues: "Any color from the library",
-			defaultValue: "white",
-			description: "Text color of the avatar.",
-			isRequired: false,
-		},
-	],
-}

package/src/lib/components/BackToTop/__preview__/BackToTop.preview.tsx

@@ -1,115 +0,0 @@
-import { BackToTop, generateNumbers, Text } from "../../../"
-import type { ILibBackToTop } from "../../../types/components-props"
-import type { ComponentPreview } from "../../../../data/components"
-
-const text =
-	"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ac ullamcorper risus. Sed porttitor dolor eget leo accumsan ultricies. Morbi feugiat libero a mi sollicitudin, et varius eros porttitor. Aliquam ac elementum erat, interdum cursus tortor. Maecenas faucibus mollis nisl. Integer vel justo leo. Donec ac magna vel est blandit tristique. Cras nec mauris dictum elit blandit pellentesque sed vel sem. Nam ullamcorper malesuada orci, ac cursus mi convallis at. Donec aliquet pharetra velit, non suscipit elit consectetur vitae. Praesent suscipit, mi a interdum maximus, tellus metus feugiat urna, sed semper felis enim sed magna. Donec vestibulum commodo sapien quis lobortis. Maecenas et venenatis elit. Sed sed porttitor ante. Curabitur eu orci tristique, tristique justo eu, tempus elit."
-
-export const backToTopPreview: ComponentPreview<ILibBackToTop> = {
-	name: "Back To Top",
-	component: BackToTop,
-	category: "components",
-	import: "BackToTop", // import Component (ex: Skeleton)
-	additionalImports: [], // import OtherComponent (ex: SkeletonCard)
-	optionalImports: [], // import ComponentItem (ex: AccordionItem) => to build with children instead of prop on component
-	propsImport: "ILibBackToTop", // import ILibComponent (ex: ILibAccordion)
-	additionalTypeImports: [], // import LibComponentItem (ex: LibAccordionItem)
-	extends: ["HTMLButtonElement"],
-	previews: [
-		{
-			demo: (
-				<>
-					{generateNumbers(0, 10).map(i => (
-						<Text key={i}>{text}</Text>
-					))}
-
-					<BackToTop showTooltip={{}} />
-				</>
-			),
-		},
-	],
-	props: [
-		{
-			name: "icon",
-			type: "ReactElement",
-			possibleValues: null,
-			defaultValue: "BiUpArrowAlt",
-			description: "Icon element to display inside the button.",
-			isRequired: false,
-		},
-		{
-			name: "color",
-			type: "string",
-			possibleValues: [
-				"primary",
-				"secondary",
-				"success",
-				"danger",
-				"warning",
-				"gray",
-				"white",
-			],
-			defaultValue: "primary",
-			description: "Button color theme.",
-			isRequired: false,
-		},
-		{
-			name: "borderRadius",
-			type: "string",
-			possibleValues: [
-				"none",
-				"sm",
-				"md",
-				"lg",
-				"xl",
-				"2xl",
-				"3xl",
-				"full",
-			],
-			defaultValue: "full",
-			description: "Border radius of the button.",
-			isRequired: false,
-		},
-		{
-			name: "variant",
-			type: "string",
-			possibleValues: ["plain", "ghost", "outline", "transparent"],
-			defaultValue: "plain",
-			description: "Button variant style.",
-			isRequired: false,
-		},
-		{
-			name: "tooltip",
-			type: "string",
-			possibleValues: [],
-			defaultValue: "Back to top",
-			description: "Tooltip text displayed on hover.",
-			isRequired: false,
-		},
-		{
-			name: "showTooltip",
-			type: "boolean | Object",
-			possibleValues: null,
-			defaultValue: "true",
-			description:
-				"Whether to show tooltip or tooltip configuration object.",
-			isRequired: false,
-		},
-		{
-			name: "containerStyle",
-			type: "CSSProperties",
-			possibleValues: null,
-			defaultValue: null,
-			description: "Inline styles for the container.",
-			isRequired: false,
-		},
-		{
-			name: "containerClasses",
-			type: "string",
-			possibleValues: null,
-			defaultValue: null,
-			description: "Additional CSS classes for the container.",
-			isRequired: false,
-		},
-	],
-}

package/src/lib/components/Badge/__preview__/Badge.preview.tsx

@@ -1,84 +0,0 @@
-import { BiStar } from "react-icons/bi"
-import { Badge, designTokens, Flexbox } from "../../../"
-import type { ILibBadge } from "../../../types/components-props"
-import type { ComponentPreview } from "../../../../data/components"
-
-export const badgePreview: ComponentPreview<ILibBadge> = {
-	name: "Badge",
-	component: Badge,
-	category: "components",
-	import: "Badge",
-	additionalImports: null,
-	optionalImports: null,
-	propsImport: "ILibBadge",
-	additionalTypeImports: null,
-	extends: ["HTMLSpanElement"],
-	previews: [
-		{
-			previewTitle: "Default",
-			demo: (
-				<Flexbox gap="sm">
-					{Object.keys(designTokens.libColorsShort).map(
-						(color, i) => (
-							<Badge color={color as any} key={i} />
-						),
-					)}
-				</Flexbox>
-			),
-		},
-		{
-			previewTitle: "With icon",
-			props: { children: <BiStar size={32} />, className: "size-12" },
-		},
-		{
-			previewTitle: "With short number",
-			props: {
-				children: 2,
-				color: "danger",
-			},
-		},
-		{
-			previewTitle: "With long number",
-			props: {
-				children: 300,
-				className: "w-fit px-2",
-				color: "success",
-			},
-		},
-	],
-	props: [
-		{
-			name: "backgroundColor",
-			type: "string",
-			possibleValues: "Any color from the library",
-			defaultValue: "primary",
-			description: "Background color of the badge.",
-			isRequired: false,
-		},
-		{
-			name: "contentColor",
-			type: "string",
-			possibleValues: "Any color from the library",
-			defaultValue: "white",
-			description: "Text color of the badge.",
-			isRequired: false,
-		},
-		{
-			name: "borderRadius",
-			type: "string",
-			possibleValues: [
-				"none",
-				"sm",
-				"md",
-				"lg",
-				"xl",
-				"2xl",
-				"3xl",
-				"full",
-			],
-			defaultValue: "full",
-			description: "Border radius of the badge.",
-			isRequired: false,
-		},
-	],
-}

package/src/lib/components/Breadcrumbs/__preview__/Breadcrumbs.preview.tsx

@@ -1,55 +0,0 @@
-import type { FC } from "react"
-import { Link } from "react-router-dom"
-import { BiChevronRight } from "react-icons/bi"
-import { Breadcrumbs, Text } from "../../../"
-import type { ILibBreadcrumbs } from "../../../types/components-props"
-import type { ComponentPreview } from "../../../../data/components"
-
-const Preview: FC<ILibBreadcrumbs> = props => {
-	return (
-		<Breadcrumbs {...props}>
-			<Text>
-				<Link to="/">Home</Link>
-			</Text>
-			<Text>
-				<Link to="#">Page</Link>
-			</Text>
-			<Text>
-				<Link to="#">Page</Link>
-			</Text>
-			<Text>
-				<Link to="#">Page</Link>
-			</Text>
-			<Text>Current page</Text>
-		</Breadcrumbs>
-	)
-}
-
-export const breadcrumbsPreview: ComponentPreview<ILibBreadcrumbs> = {
-	name: "Breadcrumbs",
-	component: Breadcrumbs,
-	category: "components",
-	import: "Breadcrumbs",
-	additionalImports: [],
-	optionalImports: [],
-	propsImport: "ILibBreadcrumbs",
-	additionalTypeImports: [],
-	extends: ["HTMLDivElement"],
-	previews: [
-		{ previewTitle: "Default", demo: <Preview /> },
-		{
-			previewTitle: "With different separator",
-			demo: <Preview separator={<BiChevronRight />} />,
-		},
-	],
-	props: [
-		{
-			name: "separator",
-			type: "ReactNode",
-			possibleValues: [],
-			defaultValue: "/",
-			description: "Separator to display between breadcrumb items.",
-			isRequired: false,
-		},
-	],
-}

package/src/lib/components/Burger/__preview__/Burger.preview.tsx

@@ -1,55 +0,0 @@
-import { Burger } from "../../../"
-import { BurgerPreview } from "./Preview"
-import type { ILibBurger } from "../../../types/components-props"
-import type { ComponentPreview } from "../../../../data/components"
-
-export const burgerPreview: ComponentPreview<ILibBurger> = {
-	name: "Burger",
-	component: Burger,
-	category: "components",
-	import: "Burger",
-	additionalImports: null,
-	optionalImports: null,
-	propsImport: "ILibBurger",
-	additionalTypeImports: null,
-	extends: ["HTMLButtonElement"],
-	previews: [
-		{ previewTitle: "Default", demo: <BurgerPreview /> },
-		{
-			previewTitle: "Other color",
-			demo: <BurgerPreview color="secondary" />,
-		},
-		{
-			previewTitle: "Other size",
-			demo: (
-				<BurgerPreview color="gray" className="w-12 h-8 [&>span]:h-1" />
-			),
-		},
-	],
-	props: [
-		{
-			name: "isOpen",
-			type: "boolean",
-			possibleValues: null,
-			defaultValue: null,
-			description: "Whether the burger menu is open or closed.",
-			isRequired: true,
-		},
-		{
-			name: "color",
-			type: "string",
-			possibleValues: [
-				"primary",
-				"secondary",
-				"success",
-				"danger",
-				"warning",
-				"gray",
-				"white",
-			],
-			defaultValue: "primary",
-			description: "Color of the burger lines.",
-			isRequired: false,
-		},
-	],
-}

package/src/lib/components/Burger/__preview__/Preview.tsx

@@ -1,11 +0,0 @@
-import { useState, type FC } from "react"
-import { Burger } from "../Burger"
-import type { ILibBurger } from "../types"
-
-export const BurgerPreview: FC<Omit<ILibBurger, "isOpen">> = props => {
-	const [isOpen, setIsOpen] = useState(false)
-
-	return (
-		<Burger isOpen={isOpen} onClick={() => setIsOpen(!isOpen)} {...props} />
-	)
-}

package/src/lib/components/Button/__preview__/Button.preview.tsx

@@ -1,182 +0,0 @@
-import { Button, designTokens, Flexbox } from "../../../"
-import type { ReactChildren } from "../../../types"
-import type { ILibButton } from "../../../types/components-props"
-import type { ComponentPreview } from "../../../../data/components"
-
-const Flex = ({ children }: { children?: ReactChildren }) => {
-	return (
-		<Flexbox gap="sm" flexWrap="wrap">
-			{children}
-		</Flexbox>
-	)
-}
-
-export const buttonPreview: ComponentPreview<ILibButton> = {
-	name: "Button",
-	component: Button,
-	category: "components",
-	import: "Button",
-	additionalImports: null,
-	optionalImports: null,
-	propsImport: "ILibButton",
-	additionalTypeImports: null,
-	extends: ["HTMLButtonElement"],
-	previews: [
-		{
-			previewTitle: "Plain",
-			demo: (
-				<Flex>
-					{Object.keys(designTokens.libColorsHover).map(
-						(color, i) => (
-							<Button color={color as any} key={i}>
-								Button
-							</Button>
-						),
-					)}
-				</Flex>
-			),
-		},
-		{
-			previewTitle: "Ghost",
-			demo: (
-				<Flex>
-					{Object.keys(designTokens.libColorsHover).map(
-						(color, i) => (
-							<Button
-								color={color as any}
-								variant="ghost"
-								key={i}
-							>
-								Button
-							</Button>
-						),
-					)}
-				</Flex>
-			),
-		},
-		{
-			previewTitle: "Outline",
-			demo: (
-				<Flex>
-					{Object.keys(designTokens.libColorsHover).map(
-						(color, i) => (
-							<Button
-								color={color as any}
-								variant="outline"
-								key={i}
-							>
-								Button
-							</Button>
-						),
-					)}
-				</Flex>
-			),
-		},
-		{
-			previewTitle: "Transparent",
-			demo: (
-				<Flex>
-					{Object.keys(designTokens.libColorsHover).map(
-						(color, i) => (
-							<Button
-								color={color as any}
-								variant="transparent"
-								key={i}
-							>
-								Button
-							</Button>
-						),
-					)}
-				</Flex>
-			),
-		},
-		{
-			previewTitle: "Small",
-			demo: (
-				<Flex>
-					<Button size="small">Button</Button>
-				</Flex>
-			),
-		},
-		{
-			previewTitle: "Disabled",
-			demo: (
-				<Flex>
-					<Button variant="plain" disabled>
-						Button
-					</Button>
-					<Button variant="ghost" disabled>
-						Button
-					</Button>
-					<Button variant="transparent" disabled>
-						Button
-					</Button>
-				</Flex>
-			),
-		},
-		{
-			previewTitle: "Loading",
-			demo: (
-				<Flex>
-					<Button isLoading>Button</Button>
-					<Button isLoading loaderVariant={2}>
-						Button
-					</Button>
-					<Button isLoading loaderVariant={3}>
-						Button
-					</Button>
-				</Flex>
-			),
-		},
-	],
-	props: [
-		{
-			name: "variant",
-			type: "string",
-			possibleValues: ["plain", "ghost", "outline", "transparent"],
-			defaultValue: "plain",
-			description: "Button variant style.",
-			isRequired: false,
-		},
-		{
-			name: "color",
-			type: "string",
-			possibleValues: [
-				"primary",
-				"secondary",
-				"success",
-				"danger",
-				"warning",
-				"gray",
-				"white",
-			],
-			defaultValue: "primary",
-			description: "Button color theme.",
-			isRequired: false,
-		},
-		{
-			name: "size",
-			type: "string",
-			possibleValues: ["default", "small"],
-			defaultValue: "default",
-			description: "Button size.",
-			isRequired: false,
-		},
-		{
-			name: "isLoading",
-			type: "boolean",
-			possibleValues: null,
-			defaultValue: null,
-			description: "Whether the button is in a loading state.",
-			isRequired: false,
-		},
-		{
-			name: "loaderVariant",
-			type: "number",
-			possibleValues: ["1", "2", "3"],
-			defaultValue: "1",
-			description: "Loader variant to display when loading.",
-			isRequired: false,
-		},
-	],
-}