@julseb-lib/react 0.1.5 → 0.1.7

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

@@ -1,133 +0,0 @@
-import { useState, type FC } from "react"
-import { BiHeart, BiSolidHeart } from "react-icons/bi"
-import { Rating } from "../../../"
-import type { ILibRating } from "../../../types/components-props"
-import type { ComponentPreview } from "../../../../data/components"
-
-const Preview: FC<Partial<ILibRating>> = props => {
-	const [rating, setRating] = useState(props?.rating ?? 1)
-
-	return <Rating {...(props as any)} rating={rating} setRating={setRating} />
-}
-
-const PreviewReadOnly: FC<Partial<ILibRating>> = props => {
-	return <Rating {...(props as any)} rating={2} readOnly />
-}
-
-export const ratingPreview: ComponentPreview<ILibRating> = {
-	name: "Rating",
-	component: Rating,
-	category: "components",
-	import: "Rating",
-	additionalImports: [],
-	optionalImports: [],
-	propsImport: "ILibRating",
-	additionalTypeImports: [],
-	extends: ["HTMLDivElement"],
-	previews: [
-		{ previewTitle: "Default", demo: <Preview /> },
-		{
-			previewTitle: "Different icons",
-			demo: (
-				<Preview
-					label="Rating"
-					rating={2}
-					icons={{
-						default: <BiHeart size={24} />,
-						checked: <BiSolidHeart size={24} />,
-					}}
-				/>
-			),
-		},
-		{ previewTitle: "Read only", demo: <PreviewReadOnly /> },
-		{
-			previewTitle: "Validation",
-			demo: <Preview validation={{ status: false }} />,
-		},
-	],
-	props: [
-		{
-			name: "rating",
-			type: "number",
-			possibleValues: [],
-			defaultValue: null,
-			description: "Current rating value (1-5 stars).",
-			isRequired: true,
-		},
-		{
-			name: "setRating",
-			type: "function",
-			possibleValues: [],
-			defaultValue: null,
-			description:
-				"Function to update the rating value when not in read-only mode. Required if `readOnly` is not defined.",
-			isRequired: true,
-		},
-		{
-			name: "icons",
-			type: "Object",
-			possibleValues: [],
-			defaultValue: "default: BiStar, checked: BiSolidStar",
-			description:
-				"Icon configuration object with default and checked icon variants.",
-			isRequired: false,
-		},
-		{
-			name: "readOnly",
-			type: "boolean",
-			possibleValues: [],
-			defaultValue: null,
-			description:
-				"Whether the rating is in read-only mode (no interaction). Required if `setRating` is not defined.",
-			isRequired: true,
-		},
-		{
-			name: "label",
-			type: "string",
-			possibleValues: [],
-			defaultValue: null,
-			description: "Label text to display above the rating.",
-			isRequired: false,
-		},
-		{
-			name: "labelComment",
-			type: "string",
-			possibleValues: [],
-			defaultValue: null,
-			description: "Additional comment text next to the label.",
-			isRequired: false,
-		},
-		{
-			name: "helper",
-			type: "string",
-			possibleValues: [],
-			defaultValue: null,
-			description: "Helper text to display below the label.",
-			isRequired: false,
-		},
-		{
-			name: "helperBottom",
-			type: "string",
-			possibleValues: [],
-			defaultValue: null,
-			description: "Helper text to display at the bottom of the rating.",
-			isRequired: false,
-		},
-		{
-			name: "id",
-			type: "string",
-			possibleValues: [],
-			defaultValue: null,
-			description: "Unique identifier for the rating element.",
-			isRequired: false,
-		},
-		{
-			name: "validation",
-			type: "Object",
-			possibleValues: [],
-			defaultValue: null,
-			description: "Validation state and configuration object.",
-			isRequired: false,
-		},
-	],
-}

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

@@ -1,35 +0,0 @@
-import { Section, Text } from "../../../"
-import type { ILibSection } from "../../../types/components-props"
-import type { ComponentPreview } from "../../../../data/components"
-
-const sizes = ["2xs", "xs", "sm", "md", "lg", "xl", "2xl"]
-
-export const sectionPreview: ComponentPreview<ILibSection> = {
-	name: "Section",
-	component: Section,
-	category: "layouts",
-	import: "Section",
-	additionalImports: null,
-	optionalImports: null,
-	propsImport: "ILibSection",
-	additionalTypeImports: null,
-	extends: ["HTMLDivElement"],
-	previews: [
-		...sizes.map((size, i) => (
-			<Section key={i} gap={size as any}>
-				<Text tag="h4">Section with {size} gap</Text>
-				<Text>Section content</Text>
-			</Section>
-		)),
-	],
-	props: [
-		{
-			name: "gap",
-			type: "string",
-			possibleValues: ["2xs", "xs", "sm", "md", "lg", "xl", "2xl"],
-			defaultValue: null,
-			description: "Spacing between children elements.",
-			isRequired: false,
-		},
-	],
-}

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

@@ -1,168 +0,0 @@
-import { useState } from "react"
-import { BiLogoReact } from "react-icons/bi"
-import { Select } from "../../../"
-import type { ILibSelect } from "../../../types/components-props"
-import type { ComponentPreview } from "../../../../data/components"
-
-const options = ["React", "Vue", "Angular", "Python", "Flask", "Node"]
-
-const Preview: FC<Partial<ILibSelect>> = props => {
-	const [value, setValue] = useState(options[0])
-
-	return (
-		<Select
-			value={value}
-			setValue={setValue}
-			options={options}
-			{...props}
-		/>
-	)
-}
-
-export const selectPreview: ComponentPreview<ILibSelect> = {
-	name: "Select",
-	component: Select,
-	category: "components",
-	import: "Select",
-	additionalImports: [],
-	optionalImports: [],
-	propsImport: "ILibSelect",
-	additionalTypeImports: [],
-	extends: ["HTMLButtonElement"],
-	previews: [
-		{ previewTitle: "Default", demo: <Preview tabIndex={1} /> },
-		{
-			previewTitle: "With validation",
-			demo: (
-				<Preview
-					validation={{ status: false, message: "Hello" }}
-					tabIndex={2}
-				/>
-			),
-		},
-		{
-			previewTitle: "With validation",
-			demo: (
-				<Preview
-					validation={{ status: true, message: "Hello" }}
-					tabIndex={3}
-				/>
-			),
-		},
-		{
-			previewTitle: "Light background",
-			demo: <Preview inputBackground="light" tabIndex={4} />,
-		},
-		{
-			previewTitle: "Dark background",
-			demo: <Preview inputBackground="dark" tabIndex={5} />,
-		},
-		{
-			previewTitle: "Pill",
-			demo: <Preview inputVariant="pill" tabIndex={6} />,
-		},
-		{
-			previewTitle: "With icon",
-			demo: <Preview icons={{ left: <BiLogoReact /> }} tabIndex={7} />,
-		},
-	],
-	props: [
-		{
-			name: "value",
-			type: "string",
-			possibleValues: [],
-			defaultValue: null,
-			description: "Currently selected value.",
-			isRequired: true,
-		},
-		{
-			name: "setValue",
-			type: "function",
-			possibleValues: [],
-			defaultValue: null,
-			description: "Function to update the selected value.",
-			isRequired: true,
-		},
-		{
-			name: "options",
-			type: "Array<string>",
-			possibleValues: [],
-			defaultValue: null,
-			description: "Array of options to display in the dropdown.",
-			isRequired: true,
-		},
-		{
-			name: "listDirection",
-			type: "string",
-			possibleValues: ["up", "down"],
-			defaultValue: "down",
-			description: "Direction for the dropdown list to appear.",
-			isRequired: false,
-		},
-		{
-			name: "icons",
-			type: "Object",
-			possibleValues: [],
-			defaultValue: "caret: BiCaretDown",
-			description:
-				"Icon configuration object with left icon and caret icon.",
-			isRequired: false,
-		},
-		{
-			name: "inputVariant",
-			type: "string",
-			possibleValues: ["rounded", "pill"],
-			defaultValue: "rounded",
-			description: "Visual variant of the select input.",
-			isRequired: false,
-		},
-		{
-			name: "inputBackground",
-			type: "string",
-			possibleValues: ["light", "dark"],
-			defaultValue: null,
-			description: "Background theme of the select input.",
-			isRequired: false,
-		},
-		{
-			name: "label",
-			type: "string",
-			possibleValues: [],
-			defaultValue: null,
-			description: "Label text to display above the select.",
-			isRequired: false,
-		},
-		{
-			name: "labelComment",
-			type: "string",
-			possibleValues: [],
-			defaultValue: null,
-			description: "Additional comment text next to the label.",
-			isRequired: false,
-		},
-		{
-			name: "helper",
-			type: "string",
-			possibleValues: [],
-			defaultValue: null,
-			description: "Helper text to display below the label.",
-			isRequired: false,
-		},
-		{
-			name: "helperBottom",
-			type: "string",
-			possibleValues: [],
-			defaultValue: null,
-			description: "Helper text to display at the bottom of the select.",
-			isRequired: false,
-		},
-		{
-			name: "validation",
-			type: "Object",
-			possibleValues: [],
-			defaultValue: null,
-			description: "Validation state and configuration object.",
-			isRequired: false,
-		},
-	],
-}

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

@@ -1,240 +0,0 @@
-import { Skeleton, SkeletonCard } from "../../../"
-import type { ILibSkeleton } from "../../../types/components-props"
-import type { ComponentPreview } from "../../../../data/components"
-
-export const skeletonPreview: ComponentPreview<ILibSkeleton> = {
-	name: "Skeleton",
-	component: Skeleton,
-	category: "components",
-	import: "Skeleton",
-	additionalImports: ["SkeletonCard"],
-	optionalImports: null,
-	propsImport: "ILibSkeleton",
-	additionalTypeImports: null,
-	extends: ["ILibFlexbox"],
-	previews: [
-		{
-			previewTitle: "With pulse animation",
-			props: {
-				borderRadius: "3xl",
-				animation: "pulse",
-				className: "w-[200px] h-[150px]",
-			},
-		},
-		{
-			previewTitle: "With shine animation",
-			props: {
-				animation: "shine",
-			},
-		},
-		{
-			previewTitle: "Inside card & animation pulse",
-			demo: (
-				<SkeletonCard
-					flexDirection="col"
-					gap="sm"
-					className="px-2 py-4 border-1 border-gray-200"
-				>
-					<Skeleton
-						borderRadius="sm"
-						animation="pulse"
-						className="w-full h-6"
-					/>
-					<Skeleton
-						borderRadius="sm"
-						animation="pulse"
-						className="w-[90%] h-6"
-					/>
-				</SkeletonCard>
-			),
-		},
-		{
-			previewTitle: "Inside card & animation shine",
-			demo: (
-				<SkeletonCard
-					flexDirection="col"
-					gap="xs"
-					borderRadius="md"
-					isShiny
-					className="p-4 border-1 border-gray-200"
-				>
-					<Skeleton
-						borderRadius="lg"
-						className="w-[200px] h-[150px]"
-					/>
-					<Skeleton borderRadius="sm" className="w-full h-6" />
-					<Skeleton borderRadius="sm" className="w-[90%] h-6" />
-				</SkeletonCard>
-			),
-		},
-	],
-	propsTitle: "Skeleton component",
-	props: [
-		{
-			name: "backgroundColor",
-			type: "string",
-			possibleValues: "Any color from the library",
-			defaultValue: null,
-			description: "Background color of the skeleton.",
-			isRequired: false,
-		},
-		{
-			name: "borderRadius",
-			type: "string",
-			possibleValues: [
-				"xs",
-				"sm",
-				"md",
-				"lg",
-				"xl",
-				"2xl",
-				"3xl",
-				"4xl",
-				"full",
-			],
-			defaultValue: null,
-			description: "Border radius of the skeleton.",
-			isRequired: false,
-		},
-		{
-			name: "animation",
-			type: "string",
-			possibleValues: ["pulse", "shine"],
-			defaultValue: null,
-			description: "Animation style for the skeleton.",
-			isRequired: false,
-		},
-	],
-	propsSecondTitle: "Skeleton card",
-	propsSecond: [
-		{
-			name: "backgroundColor",
-			type: "string",
-			possibleValues: "Any color from the library",
-			defaultValue: null,
-			description: "Background color of the component.",
-			isRequired: false,
-		},
-		{
-			name: "borderRadius",
-			type: "string",
-			possibleValues: [
-				"xs",
-				"sm",
-				"md",
-				"lg",
-				"xl",
-				"2xl",
-				"3xl",
-				"4xl",
-				"full",
-			],
-			defaultValue: null,
-			description: "Border radius of the component.",
-			isRequired: false,
-		},
-		{
-			name: "isShiny",
-			type: "boolean",
-			possibleValues: null,
-			defaultValue: null,
-			description: "If true, applies a shiny animation to the component.",
-			isRequired: false,
-		},
-		{
-			name: "inline",
-			type: "boolean",
-			possibleValues: null,
-			defaultValue: null,
-			description: "Use inline-flex instead of flex for the component.",
-			isRequired: false,
-		},
-		{
-			name: "flexDirection",
-			type: "string",
-			possibleValues: ["row", "row-reverse", "column", "column-reverse"],
-			defaultValue: null,
-			description: "Flex direction for the component content.",
-			isRequired: false,
-		},
-		{
-			name: "flexWrap",
-			type: "string",
-			possibleValues: ["nowrap", "wrap", "wrap-reverse"],
-			defaultValue: null,
-			description: "Flex wrap for the component content.",
-			isRequired: false,
-		},
-		{
-			name: "justifyContent",
-			type: "string",
-			possibleValues: [
-				"start",
-				"end",
-				"center",
-				"between",
-				"around",
-				"evenly",
-			],
-			defaultValue: null,
-			description: "Justify content property for the component content.",
-			isRequired: false,
-		},
-		{
-			name: "alignItems",
-			type: "string",
-			possibleValues: ["start", "end", "center", "baseline", "stretch"],
-			defaultValue: null,
-			description: "Align items property for the component content.",
-			isRequired: false,
-		},
-		{
-			name: "justifyItems",
-			type: "string",
-			possibleValues: ["start", "end", "center", "stretch"],
-			defaultValue: null,
-			description: "Justify items property for the component content.",
-			isRequired: false,
-		},
-		{
-			name: "alignContent",
-			type: "string",
-			possibleValues: [
-				"start",
-				"end",
-				"center",
-				"between",
-				"around",
-				"evenly",
-				"stretch",
-			],
-			defaultValue: null,
-			description: "Align content property for the component content.",
-			isRequired: false,
-		},
-		{
-			name: "gap",
-			type: "string",
-			possibleValues: ["2xs", "xs", "sm", "md", "lg", "xl", "2xl"],
-			defaultValue: null,
-			description: "Gap between component children.",
-			isRequired: false,
-		},
-		{
-			name: "colGap",
-			type: "string",
-			possibleValues: ["2xs", "xs", "sm", "md", "lg", "xl", "2xl"],
-			defaultValue: null,
-			description: "Column gap between component children.",
-			isRequired: false,
-		},
-		{
-			name: "rowGap",
-			type: "string",
-			possibleValues: ["2xs", "xs", "sm", "md", "lg", "xl", "2xl"],
-			defaultValue: null,
-			description: "Row gap between component children.",
-			isRequired: false,
-		},
-	],
-}

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

@@ -1,133 +0,0 @@
-import { generateNumbers, Slideshow } from "../../../"
-import type { ILibSlideshow } from "../../../types/components-props"
-import type { ComponentPreview } from "../../../../data/components"
-
-const images = generateNumbers(1, 4).map(n => `/images/slideshow-${n}.avif`)
-
-export const slideshowPreview: ComponentPreview<ILibSlideshow> = {
-	name: "Slideshow",
-	component: Slideshow,
-	category: "components",
-	import: "Slideshow",
-	additionalImports: [],
-	optionalImports: [],
-	propsImport: "ILibSlideshow",
-	additionalTypeImports: [],
-	extends: ["HTMLDivElement"],
-	previews: [
-		{
-			previewTitle: "Default",
-			props: {
-				images,
-				pagination: {
-					position: "inside",
-					type: "dots-outline",
-					color: "white",
-				},
-				borderRadius: "2xl",
-				controls: { color: "white" },
-			},
-		},
-		{
-			previewTitle: "With thumbnails",
-			props: { images, pagination: { type: "thumbnails" } },
-		},
-		{
-			previewTitle: "With controls",
-			props: { images, controls: { size: "large" } },
-		},
-		{
-			previewTitle: "Autoplay",
-			props: {
-				images,
-				hideControls: true,
-				hidePagination: true,
-				options: {},
-			},
-		},
-		{
-			previewTitle: "With different height",
-			props: { images, className: "h-[300px]" },
-		},
-	],
-	props: [
-		{
-			name: "images",
-			type: "Array<string>",
-			possibleValues: [],
-			defaultValue: null,
-			description:
-				"Array of image URLs to display in the slideshow. You can also use children instead",
-			isRequired: true,
-		},
-		{
-			name: "imgFit",
-			type: "string",
-			possibleValues: ["cover", "contain", "fill", "none", "scale-down"],
-			defaultValue: "cover",
-			description: "Object fit property for images in the slideshow.",
-			isRequired: false,
-		},
-		{
-			name: "hideControls",
-			type: "boolean",
-			possibleValues: [],
-			defaultValue: "false",
-			description: "Whether to hide the navigation control buttons.",
-			isRequired: false,
-		},
-		{
-			name: "controls",
-			type: "Object",
-			possibleValues: [],
-			defaultValue: null,
-			description: "Configuration object for navigation control buttons.",
-			isRequired: false,
-		},
-		{
-			name: "options",
-			type: "Object",
-			possibleValues: [],
-			defaultValue: null,
-			description:
-				"Configuration options for autoplay timing and transition speed.",
-			isRequired: false,
-		},
-		{
-			name: "borderRadius",
-			type: "string",
-			possibleValues: [
-				"none",
-				"xs",
-				"sm",
-				"md",
-				"lg",
-				"xl",
-				"2xl",
-				"3xl",
-				"full",
-			],
-			defaultValue: null,
-			description: "Border radius variant for the slideshow container.",
-			isRequired: false,
-		},
-
-		{
-			name: "hidePagination",
-			type: "boolean",
-			possibleValues: [],
-			defaultValue: "false",
-			description: "Whether to hide the pagination indicators.",
-			isRequired: false,
-		},
-		{
-			name: "pagination",
-			type: "Object",
-			possibleValues: [],
-			defaultValue: null,
-			description:
-				"Configuration object for pagination indicators and behavior.",
-			isRequired: false,
-		},
-	],
-}