@julseb-lib/react 0.1.4 → 0.1.6

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

@@ -1,188 +0,0 @@
-import { Sticky, Text, Button } from "../../../"
-import type { ILibSticky } from "../../../types/components-props"
-import type { ComponentPreview } from "../../../../data/components"
-
-const StickyDemo: FC<ILibSticky> = props => {
-	return (
-		<>
-			<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>
-
-			<Sticky {...props}>
-				<Button>Sticky button</Button>
-			</Sticky>
-
-			<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>
-
-			<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>
-
-			<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>
-		</>
-	)
-}
-
-export const stickyPreview: ComponentPreview<ILibSticky> = {
-	name: "Sticky",
-	component: Sticky,
-	category: "components",
-	import: "Sticky",
-	additionalImports: [],
-	optionalImports: [],
-	propsImport: "ILibSticky",
-	additionalTypeImports: [],
-	extends: ["HTMLDivElement"],
-	previews: [{ demo: <StickyDemo /> }],
-	props: [
-		{
-			name: "top",
-			type: "string",
-			possibleValues: ["0px", "2xs", "xs", "sm", "md", "lg", "xl", "2xl"],
-			defaultValue: "sm",
-			description: "Distance from top when sticky positioning is active.",
-			isRequired: false,
-		},
-	],
-}

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

@@ -1,173 +0,0 @@
-import { Table, toTitleCase } from "../../../"
-import type { ReactChildren } from "../../../types"
-import type { ILibTable } from "../../../types/components-props"
-import type { ComponentPreview } from "../../../../data/components"
-
-const users: Array<User> = [
-	{
-		id: 1,
-		firstName: "Anna",
-		lastName: "Fali",
-		facebook: "Anna Fali",
-		twitter: "@anna.fali",
-	},
-	{
-		id: 2,
-		firstName: "Niek",
-		lastName: "Bove",
-		facebook: "Niek Bove",
-		twitter: "@niek.bove",
-	},
-	{
-		id: 3,
-		firstName: "Lacara",
-		lastName: "Jones",
-		facebook: "Lacara Jones",
-		twitter: "@lacara.jones",
-	},
-	{
-		id: 4,
-		firstName: "Pablo",
-		lastName: "Cambeiro",
-		facebook: "Pablo Cambeiro",
-		twitter: "@pablo.cambeiro",
-	},
-	{
-		id: 5,
-		firstName: "Irene",
-		lastName: "Sotelo",
-		facebook: "Irene Sotelo",
-		twitter: "@irene.sotelo",
-	},
-]
-
-const headers: Array<ReactChildren> = [
-	...new Set(
-		users
-			.map(user => Object.keys(user))
-			.flat()
-			.map(key => toTitleCase(key)),
-	),
-]
-
-const data: Array<Array<ReactChildren>> = users.map(user =>
-	Object.values(user).map((v, i) =>
-		i === Object.values(user).length - 1 ? `http://twitter.com/${v}` : v,
-	),
-)
-
-export const tablePreview: ComponentPreview<ILibTable> = {
-	name: "Table",
-	component: Table,
-	category: "components",
-	import: "Table",
-	additionalImports: [],
-	optionalImports: [],
-	propsImport: "ILibTable",
-	additionalTypeImports: [],
-	extends: ["HTMLTableElement"],
-	previews: [
-		{ previewTitle: "Default", props: { headers, data, linkify: true } },
-
-		{
-			previewTitle: "Border bottom",
-			props: {
-				headers,
-				data,
-				linkify: true,
-				variant: "border-bottom",
-				className: "[&_td:last-child]:p-0",
-			},
-		},
-		{
-			previewTitle: "Stripped",
-			props: { headers, data, linkify: true, variant: "stripped" },
-		},
-	],
-	props: [
-		{
-			name: "variant",
-			type: "string",
-			possibleValues: ["bordered", "stripped", "border-bottom"],
-			defaultValue: "bordered",
-			description: "Visual variant for table styling.",
-			isRequired: false,
-		},
-		{
-			name: "vAlign",
-			type: "string",
-			possibleValues: [
-				"align-baseline",
-				"align-top",
-				"align-middle",
-				"align-bottom",
-				"align-text-top",
-				"align-text-bottom",
-				"align-sub",
-				"align-super",
-			],
-			defaultValue: "align-top",
-			description: "Vertical alignment for table cells.",
-			isRequired: false,
-		},
-		{
-			name: "textAlign",
-			type: "string",
-			possibleValues: ["left", "center", "right", "justify"],
-			defaultValue: "left",
-			description: "Text alignment for table content.",
-			isRequired: false,
-		},
-		{
-			name: "headers",
-			type: "Array of React Element",
-			possibleValues: [],
-			defaultValue: null,
-			description: "Array of header content for table columns.",
-			isRequired: false,
-		},
-		{
-			name: "footers",
-			type: "Array of React Element",
-			possibleValues: [],
-			defaultValue: null,
-			description: "Array of footer content for table columns.",
-			isRequired: false,
-		},
-		{
-			name: "data",
-			type: "Array of array of ReactElement",
-			possibleValues: [],
-			defaultValue: null,
-			description:
-				"2D array of table data for automatic table generation. Cannot be used with children.",
-			isRequired: false,
-		},
-		{
-			name: "linkify",
-			type: "boolean",
-			possibleValues: [],
-			defaultValue: "false",
-			description:
-				"Whether to automatically convert URLs in text to clickable links.",
-			isRequired: false,
-		},
-		{
-			name: "blank",
-			type: "boolean",
-			possibleValues: [],
-			defaultValue: "false",
-			description:
-				"Whether links should open in new tab when linkify is enabled. Only available when linkify is true.",
-			isRequired: false,
-		},
-	],
-}
-
-type User = {
-	id: number
-	firstName: string
-	lastName: string
-	facebook: string
-	twitter: string
-}

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

@@ -1,155 +0,0 @@
-import { Tabs, Text } from "../../../"
-import type { LibTabItem } from "../../../types"
-import type { ILibTabs } from "../../../types/components-props"
-import type { ComponentPreview } from "../../../../data/components"
-
-const items: Array<LibTabItem> = [
-	{
-		title: "First",
-		content: "Content tab 1",
-	},
-	{
-		title: "Second",
-		content: (
-			<>
-				<Text>Hello</Text>
-				<Text>World</Text>
-			</>
-		),
-	},
-	{
-		title: "Third",
-		content: "Content tab 3",
-	},
-]
-
-export const tabsPreview: ComponentPreview<ILibTabs> = {
-	name: "Tabs",
-	component: Tabs,
-	category: "components",
-	import: "Tabs",
-	additionalImports: [],
-	optionalImports: [
-		"TabsButton",
-		"TabsButtonsContainer",
-		"TabsContainer",
-		"TabsContent",
-	],
-	propsImport: "ILibTabs",
-	additionalTypeImports: ["LibTabItem"],
-	extends: ["HTMLDivElement"],
-	previews: [
-		{ previewTitle: "Default", props: { items } },
-		{
-			previewTitle: "Rounded",
-			props: { items, variant: "rounded", justify: "stretch" },
-		},
-	],
-	propsTitle: "TabsContainer",
-	props: [],
-	propsSecondTitle: "TabsButtonsContainer",
-	propsSecond: [
-		{
-			name: "justify",
-			type: "string",
-			possibleValues: ["start", "stretch"],
-			defaultValue: "start",
-			description:
-				"Justification for positioning tabs within their container.",
-			isRequired: false,
-		},
-		{
-			name: "variant",
-			type: "string",
-			possibleValues: ["basic", "rounded"],
-			defaultValue: "basic",
-			description: "Visual variant for styling the tab buttons.",
-			isRequired: false,
-		},
-	],
-	propsThirdTitle: "TabsButton",
-	propsThird: [
-		{
-			name: "isActive",
-			type: "boolean",
-			possibleValues: [],
-			defaultValue: null,
-			description:
-				"Whether this tab button is currently active/selected.",
-			isRequired: true,
-		},
-		{
-			name: "onClick",
-			type: "function",
-			possibleValues: [],
-			defaultValue: null,
-			description: "Click handler function for tab selection.",
-			isRequired: true,
-		},
-		{
-			name: "justify",
-			type: "string",
-			possibleValues: ["start", "stretch"],
-			defaultValue: "start",
-			description: "Justification for positioning the button content.",
-			isRequired: false,
-		},
-		{
-			name: "variant",
-			type: "string",
-			possibleValues: ["basic", "rounded"],
-			defaultValue: "basic",
-			description: "Visual variant for styling the tab button.",
-			isRequired: false,
-		},
-	],
-	propsFourthTitle: "TabsContent",
-	propsFourth: [
-		{
-			name: "isActive",
-			type: "boolean",
-			possibleValues: [],
-			defaultValue: null,
-			description:
-				"Whether this tab content is currently active/visible.",
-			isRequired: true,
-		},
-	],
-	propsFifthTitle: "Tabs",
-	propsFifth: [
-		{
-			name: "items",
-			type: "Array of objects",
-			possibleValues: [],
-			defaultValue: null,
-			description:
-				"Array of tab items containing title and content for each tab.",
-			isRequired: true,
-		},
-		{
-			name: "justify",
-			type: "string",
-			possibleValues: ["start", "stretch"],
-			defaultValue: "start",
-			description:
-				"Justification for positioning tabs within their container.",
-			isRequired: false,
-		},
-		{
-			name: "variant",
-			type: "string",
-			possibleValues: ["basic", "rounded"],
-			defaultValue: "basic",
-			description: "Visual variant for styling the tab buttons.",
-			isRequired: false,
-		},
-		{
-			name: "activeTab",
-			type: "number",
-			possibleValues: [],
-			defaultValue: "0",
-			description: "Index of the initially active tab.",
-			isRequired: false,
-		},
-	],
-}

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

@@ -1,128 +0,0 @@
-import { BiX } from "react-icons/bi"
-import { Tag, Flexbox } from "../../../"
-import type { ILibTag } from "../../../types/components-props"
-import type { ComponentPreview } from "../../../../data/components"
-
-const Flex: FC<{ children?: Children }> = ({ children }) => {
-	return (
-		<Flexbox gap="sm" flexWrap="wrap">
-			{children}
-		</Flexbox>
-	)
-}
-
-const colors = [
-	"primary",
-	"secondary",
-	"success",
-	"danger",
-	"warning",
-	"gray",
-	"white",
-]
-
-export const tagPreview: ComponentPreview<ILibTag> = {
-	name: "Tag",
-	component: Tag,
-	category: "components",
-	import: "Tag",
-	additionalImports: null,
-	optionalImports: null,
-	propsImport: "ILibTag",
-	additionalTypeImports: null,
-	extends: ["HTMLSpanElement"],
-	previews: [
-		{
-			previewTitle: "Default",
-			demo: (
-				<Flex>
-					{colors.map(color => (
-						<Tag color={color as any} key={color}>
-							Tag
-						</Tag>
-					))}
-				</Flex>
-			),
-		},
-		{
-			previewTitle: "Outline",
-			demo: (
-				<Flex>
-					{colors.map(color => (
-						<Tag color={color as any} variant="outline" key={color}>
-							Tag
-						</Tag>
-					))}
-				</Flex>
-			),
-		},
-		{
-			previewTitle: "With different border radius",
-			demo: (
-				<Flex>
-					{colors.map(color => (
-						<Tag color={color as any} borderRadius="lg" key={color}>
-							Tag
-						</Tag>
-					))}
-				</Flex>
-			),
-		},
-		{
-			previewTitle: "With icon",
-			props: {
-				children: (
-					<>
-						<BiX />
-						Tag
-					</>
-				),
-			},
-		},
-	],
-	props: [
-		{
-			name: "color",
-			type: "string",
-			possibleValues: "Any color from the library",
-			defaultValue: null,
-			description: "Background color for the tag.",
-			isRequired: false,
-		},
-		{
-			name: "contentColor",
-			type: "string",
-			possibleValues: "Any color from the library",
-			defaultValue: null,
-			description: "Text color for the tag content.",
-			isRequired: false,
-		},
-		{
-			name: "borderRadius",
-			type: "string",
-			possibleValues: [
-				"none",
-				"2xs",
-				"xs",
-				"sm",
-				"md",
-				"lg",
-				"xl",
-				"2xl",
-				"3xl",
-				"full",
-			],
-			defaultValue: null,
-			description: "Border radius for the tag corners.",
-			isRequired: false,
-		},
-		{
-			name: "variant",
-			type: "string",
-			possibleValues: ["plain", "light", "outline"],
-			defaultValue: null,
-			description: "Visual variant for the tag styling.",
-			isRequired: false,
-		},
-	],
-}