@julseb-lib/react 0.1.5 → 0.1.7

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

@@ -1,97 +0,0 @@
-import { Text, designTokens } from "../../../"
-import type { ILibText } from "../../../types/components-props"
-import type { ComponentPreview } from "../../../../data/components"
-import { TextDisplay } from "./previews/TextDisplay"
-import { TextTitles } from "./previews/TextTitles"
-import { Paragraphs } from "./previews/Paragraphs"
-import { Small } from "./previews/Small"
-import { BlockQuote } from "./previews/Quote"
-import { Unordered } from "./previews/Unordered"
-import { Ordered } from "./previews/Ordered"
-import { Description } from "./previews/Description"
-
-export const textPreview: ComponentPreview<ILibText> = {
-	name: "Text",
-	component: Text,
-	category: "styles",
-	import: "Text",
-	additionalImports: null,
-	optionalImports: null,
-	propsImport: "ILibText",
-	additionalTypeImports: null,
-	extends: ["HTMLDivElement"],
-	previews: [
-		{ previewTitle: "Display", demo: <TextDisplay /> },
-		{ previewTitle: "Titles", demo: <TextTitles /> },
-		{ previewTitle: "Paragraphs", demo: <Paragraphs /> },
-		{ previewTitle: "Small", demo: <Small /> },
-		{ previewTitle: "Blockquote", demo: <BlockQuote /> },
-		{ previewTitle: "Unordered list", demo: <Unordered /> },
-		{ previewTitle: "Ordered list", demo: <Ordered /> },
-		{ previewTitle: "Description list", demo: <Description /> },
-	],
-	props: [
-		{
-			name: "color",
-			type: "string",
-			possibleValues: "Any color from the library",
-			defaultValue: null,
-			description: "Text color.",
-			isRequired: false,
-		},
-		{
-			name: "linkColor",
-			type: "string",
-			possibleValues: Object.keys(designTokens.libColorsHover),
-			defaultValue: null,
-			description: "Color for links inside the text.",
-			isRequired: false,
-		},
-		{
-			name: "textAlign",
-			type: "string",
-			possibleValues: [
-				"left",
-				"center",
-				"right",
-				"justify",
-				"start",
-				"end",
-			],
-			defaultValue: null,
-			description: "Text alignment.",
-			isRequired: false,
-		},
-		{
-			name: "tag",
-			type: "string",
-			possibleValues: [
-				"p",
-				"span",
-				"div",
-				"strong",
-				"em",
-				"b",
-				"i",
-				"u",
-				"small",
-				"mark",
-				"del",
-				"ins",
-				"sub",
-				"sup",
-			],
-			defaultValue: "p",
-			description: "HTML tag to use for the text.",
-			isRequired: false,
-		},
-		{
-			name: "display",
-			type: "boolean",
-			possibleValues: null,
-			defaultValue: null,
-			description: "Only if the tag is h1 to h5.",
-			isRequired: false,
-		},
-	],
-}

package/src/lib/components/Text/__preview__/previews/Description.tsx

@@ -1,18 +0,0 @@
-import { Text } from "../.."
-
-export const Description = () => {
-	return (
-		<Text tag="dl">
-			<dt>Description list title</dt>
-			<dd>Description list content</dd>
-			<dt>Description list title</dt>
-			<dd>Description list content</dd>
-			<dt>Description list title</dt>
-			<dd>Description list content</dd>
-			<dt>Description list title</dt>
-			<dd>Description list content</dd>
-			<dt>Description list title</dt>
-			<dd>Description list content</dd>
-		</Text>
-	)
-}

package/src/lib/components/Text/__preview__/previews/Ordered.tsx

@@ -1,13 +0,0 @@
-import { Text } from "../.."
-
-export const Ordered = () => {
-	return (
-		<Text tag="ol">
-			<li>Ordered list</li>
-			<li>Ordered list</li>
-			<li>Ordered list</li>
-			<li>Ordered list</li>
-			<li>Ordered list</li>
-		</Text>
-	)
-}

package/src/lib/components/Text/__preview__/previews/Paragraphs.tsx

@@ -1,26 +0,0 @@
-import { Link } from "react-router-dom"
-import { Text } from "../.."
-
-export const Paragraphs = () => {
-	return (
-		<div className="flex flex-col items-stretch">
-			<Text tag="p">Paragraph</Text>
-
-			<Text tag="p">
-				Paragraph <Text tag="strong">strong</Text>
-			</Text>
-			<Text tag="p">
-				Paragraph <Text tag="em">italic</Text>
-			</Text>
-			<Text tag="p" linkColor="danger">
-				Paragraph with <Link to="#">link</Link>
-			</Text>
-			<Text tag="p" className="className" linkColor="warning">
-				Paragraph with <button>button</button>
-			</Text>
-			<Text tag="p">
-				Paragraph <code>code</code>
-			</Text>
-		</div>
-	)
-}

package/src/lib/components/Text/__preview__/previews/Quote.tsx

@@ -1,5 +0,0 @@
-import { Text } from "../.."
-
-export const BlockQuote = () => {
-	return <Text tag="blockquote">Blockquote</Text>
-}

package/src/lib/components/Text/__preview__/previews/Small.tsx

@@ -1,5 +0,0 @@
-import { Text } from "../.."
-
-export const Small = () => {
-	return <Text tag="small">Small</Text>
-}

package/src/lib/components/Text/__preview__/previews/TextDisplay.tsx

@@ -1,27 +0,0 @@
-import { Text } from "../.."
-
-export const TextDisplay = () => {
-	return (
-		<div className="flex flex-col items-stretch">
-			<Text tag="h1" display>
-				Title h1 display
-			</Text>
-
-			<Text tag="h2" display>
-				Title h2 display
-			</Text>
-
-			<Text tag="h3" display>
-				Title h3 display
-			</Text>
-
-			<Text tag="h4" display>
-				Title h4 display
-			</Text>
-
-			<Text tag="h5" display>
-				Title h5 display
-			</Text>
-		</div>
-	)
-}

package/src/lib/components/Text/__preview__/previews/TextTitles.tsx

@@ -1,19 +0,0 @@
-import { Text } from "../.."
-
-export const TextTitles = () => {
-	return (
-		<div className="flex flex-col items-stretch">
-			<Text tag="h1">Title h1</Text>
-
-			<Text tag="h2">Title h2</Text>
-
-			<Text tag="h3">Title h3</Text>
-
-			<Text tag="h4">Title h4</Text>
-
-			<Text tag="h5">Title h5</Text>
-
-			<Text tag="h6">Title h6</Text>
-		</div>
-	)
-}

package/src/lib/components/Text/__preview__/previews/Unordered.tsx

@@ -1,13 +0,0 @@
-import { Text } from "../.."
-
-export const Unordered = () => {
-	return (
-		<Text tag="ul">
-			<li>Unordered list</li>
-			<li>Unordered list</li>
-			<li>Unordered list</li>
-			<li>Unordered list</li>
-			<li>Unordered list</li>
-		</Text>
-	)
-}

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

@@ -1,115 +0,0 @@
-import { Toast, toast, Button } from "../../../"
-import type { ILibToast } from "../../../types/components-props"
-import type { ComponentPreview } from "../../../../data/components"
-
-const Preview = () => {
-	return (
-		<div className="flex flex-col items-start gap-2">
-			<Button
-				color="success"
-				onClick={() =>
-					toast.success("Success", {
-						body: "Body",
-						duration: 10000,
-					})
-				}
-			>
-				Success
-			</Button>
-			<Button color="danger" onClick={() => toast.error("Error")}>
-				Error
-			</Button>
-			<Button color="warning" onClick={() => toast.warning("Warning")}>
-				Warning
-			</Button>
-			<Button color="primary" onClick={() => toast.info("Info")}>
-				Info
-			</Button>
-			<Button color="gray" onClick={() => toast.loading("Loading")}>
-				Loading
-			</Button>
-			<Button color="danger" onClick={() => toast.close()}>
-				Close
-			</Button>
-		</div>
-	)
-}
-
-export const toastPreview: ComponentPreview<ILibToast> = {
-	name: "Toast",
-	component: Toast,
-	category: "components",
-	import: "Toast",
-	additionalImports: ["ToastContainer"],
-	optionalImports: [],
-	propsImport: "ILibToast",
-	additionalTypeImports: [],
-	extends: ["HTMLDivElement"],
-	previews: [
-		{
-			previewTitle: "Default",
-			props: { title: "Title", body: "Body", hideCloseButton: true },
-		},
-		{ previewTitle: "Toaster", demo: <Preview /> },
-	],
-	props: [
-		{
-			name: "title",
-			type: "ReactNode",
-			possibleValues: [],
-			defaultValue: null,
-			description: "Title content to display in the toast header.",
-			isRequired: true,
-		},
-		{
-			name: "body",
-			type: "ReactNode",
-			possibleValues: [],
-			defaultValue: null,
-			description: "Body content to display below the title.",
-			isRequired: false,
-		},
-		{
-			name: "status",
-			type: "string",
-			possibleValues: ["success", "error", "warning", "info", "loading"],
-			defaultValue: "success",
-			description:
-				"Status type that determines the toast appearance and behavior.",
-			isRequired: false,
-		},
-		{
-			name: "hideCloseButton",
-			type: "boolean",
-			possibleValues: [],
-			defaultValue: "false",
-			description: "Whether to hide the close button in the toast.",
-			isRequired: false,
-		},
-		{
-			name: "closeToast",
-			type: "function",
-			possibleValues: [],
-			defaultValue: null,
-			description: "Function to call when the close button is clicked.",
-			isRequired: false,
-		},
-		{
-			name: "iconClose",
-			type: "ReactElement",
-			possibleValues: [],
-			defaultValue: "BiX",
-			description: "Custom icon for the close button.",
-			isRequired: false,
-		},
-		{
-			name: "loaderVariant",
-			type: "number",
-			possibleValues: [1, 2, 3],
-			defaultValue: null,
-			description:
-				"Variant of the loader shown when status is 'loading'.",
-			isRequired: false,
-		},
-	],
-}

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

@@ -1,117 +0,0 @@
-import { Tooltip, Text } from "../../../"
-import type { ILibTooltip } from "../../../types/components-props"
-import type { ComponentPreview } from "../../../../data/components"
-
-export const tooltipPreview: ComponentPreview<ILibTooltip> = {
-	name: "Tooltip",
-	component: Tooltip,
-	category: "components",
-	import: "Tooltip",
-	additionalImports: null,
-	optionalImports: null,
-	propsImport: "ILibTooltip",
-	additionalTypeImports: null,
-	extends: ["HTMLDivElement"],
-	previews: [
-		{
-			previewTitle: "Click",
-			props: {
-				tooltip: "Hello World!",
-				trigger: "click",
-				children: <Text>Hello, trigger on click</Text>,
-			},
-		},
-		{
-			previewTitle: "Hover",
-			props: {
-				tooltip: "Hello World!",
-				trigger: "hover",
-				hideArrow: true,
-				position: "bottom",
-				children: "Hello, trigger on hover without arrow",
-			},
-		},
-		{
-			previewTitle: "Left",
-			props: {
-				tooltip: "Hello World!",
-				position: "left",
-				children: "Hello tooltip left",
-			},
-		},
-		{
-			previewTitle: "Right",
-			props: {
-				tooltip: "Hello World!",
-				position: "right",
-				children: "Hello tooltip right",
-			},
-		},
-	],
-	props: [
-		{
-			name: "tooltip",
-			type: "string",
-			possibleValues: null,
-			defaultValue: null,
-			description: "The tooltip text or React element to display.",
-			isRequired: true,
-		},
-		{
-			name: "position",
-			type: "string",
-			possibleValues: ["top", "bottom", "left", "right"],
-			defaultValue: null,
-			description: "Tooltip position.",
-			isRequired: false,
-		},
-		{
-			name: "hideArrow",
-			type: "boolean",
-			possibleValues: null,
-			defaultValue: null,
-			description: "If true, hides the tooltip arrow.",
-			isRequired: false,
-		},
-		{
-			name: "trigger",
-			type: "string",
-			possibleValues: ["hover", "click"],
-			defaultValue: null,
-			description: "Tooltip trigger event.",
-			isRequired: false,
-		},
-		{
-			name: "backgroundColor",
-			type: "string",
-			possibleValues: "Any color from the library",
-			defaultValue: null,
-			description: "Tooltip background color.",
-			isRequired: false,
-		},
-		{
-			name: "textColor",
-			type: "string",
-			possibleValues: "Any color from the library",
-			defaultValue: null,
-			description: "Tooltip text color.",
-			isRequired: false,
-		},
-		{
-			name: "offset",
-			type: "string",
-			possibleValues: ["2xs", "xs", "sm", "md", "lg", "xl", "2xl", "0px"],
-			defaultValue: null,
-			description: "Tooltip offset.",
-			isRequired: false,
-		},
-		{
-			name: "tooltipClasses",
-			type: "string",
-			possibleValues: null,
-			defaultValue: null,
-			description: "Additional class names for the tooltip.",
-			isRequired: false,
-		},
-	],
-}

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

@@ -1,78 +0,0 @@
-import { Link } from "react-router-dom"
-import { Wrapper, Text } from "../../../"
-import type { ILibWrapper } from "../../../types/components-props"
-import type { ComponentPreview } from "../../../../data/components"
-
-export const wrapperPreview: ComponentPreview<ILibWrapper> = {
-	name: "Wrapper",
-	component: Wrapper,
-	category: "styles",
-	import: "Wrapper",
-	additionalImports: null,
-	optionalImports: null,
-	propsImport: "ILibWrapper",
-	additionalTypeImports: null,
-	extends: ["HTMLSectionElement"],
-	previews: [
-		{
-			demo: (
-				<div className="flex flex-col gap-2">
-					<Text>
-						<Link
-							to="/main/demo-default"
-							target="_blank"
-							rel="noreferrer noopener"
-						>
-							Demo main default
-						</Link>
-					</Text>
-					<Text>
-						<Link
-							to="/aside/demo-left"
-							target="_blank"
-							rel="noreferrer noopener"
-						>
-							Demo main and aside
-						</Link>
-					</Text>
-				</div>
-			),
-		},
-	],
-	props: [
-		{
-			name: "gap",
-			type: "string",
-			possibleValues: ["2xs", "xs", "sm", "md", "lg", "xl", "2xl"],
-			defaultValue: "lg",
-			description: "Spacing between children elements.",
-			isRequired: false,
-		},
-		{
-			name: "backgroundColor",
-			type: "string",
-			possibleValues: "Any color from the library",
-			defaultValue: "background",
-			description: "Background color of the wrapper.",
-			isRequired: false,
-		},
-		{
-			name: "minHeight",
-			type: "string",
-			possibleValues: [
-				"0",
-				"full",
-				"screen",
-				"min",
-				"max",
-				"fit",
-				"dvh",
-				"lvh",
-				"svh",
-			],
-			defaultValue: "svh",
-			description: "Minimum height of the wrapper.",
-			isRequired: false,
-		},
-	],
-}

package/src/main.tsx

@@ -1,11 +0,0 @@
-import { createRoot } from "react-dom/client"
-import { ThemeProviderWrapper, ToastContainer } from "./lib"
-import { App } from "./App"
-import "./lib/index.css"
-
-createRoot(document.getElementById("root")!).render(
-	<ThemeProviderWrapper>
-		<App />
-		<ToastContainer />
-	</ThemeProviderWrapper>,
-)

package/src/pages/Component.tsx

@@ -1,29 +0,0 @@
-import { useParams } from "react-router-dom"
-import { toKebabCase, toPascalCase } from "@julseb-lib/utils"
-import { Page } from "../components"
-import { NotFound } from "./NotFound"
-import { previews } from "../data/components"
-import { ComponentPreview } from "../components/ComponentPreview"
-
-export const ComponentPage = () => {
-	const { componentName } = useParams<{ componentName: string }>()
-
-	const componentPreview = previews.find(
-		demo => toKebabCase(demo.name) === toKebabCase(componentName ?? ""),
-	)
-
-	if (!componentPreview) return <NotFound />
-
-	return (
-		<Page title={toPascalCase(componentPreview.name)!}>
-			{componentPreview.previews?.map((preview, i) => (
-				<ComponentPreview
-					component={componentPreview.component}
-					noStretch={componentPreview.noStretch}
-					{...preview}
-					key={i}
-				/>
-			))}
-		</Page>
-	)
-}

package/src/pages/Homepage.tsx

@@ -1,53 +0,0 @@
-import { useLibTheme, Text } from "../lib"
-import { Page } from "../components"
-
-export const Homepage = () => {
-	const { theme, switchTheme } = useLibTheme()
-
-	const heights = [
-		"3xs",
-		"2xs",
-		"xs",
-		"sm",
-		"md",
-		"lg",
-		"xl",
-		"2xl",
-		"3xl",
-		"4xl",
-		"5xl",
-		"6xl",
-		"7xl",
-		"none",
-		"px",
-		"full",
-		"dvw",
-		"dvh",
-		"lvw",
-		"lvh",
-		"svw",
-		"svh",
-		"screen",
-		"min",
-		"max",
-		"fit",
-	]
-
-	return (
-		<Page title="Hello World">
-			<Text>Theme is {theme}</Text>
-			<button
-				onClick={switchTheme}
-				className="self-start bg-blue-500 hover:bg-blue-300 active:bg-blue-600 px-4 py-2 rounded-md font-black text-white"
-			>
-				Switch to {theme === "light" ? "dark" : "light"} theme
-			</button>
-
-			<ul>
-				{heights.map(h => (
-					<li key={h}>{`"${h}": "${h}",`}</li>
-				))}
-			</ul>
-		</Page>
-	)
-}

package/src/pages/NotFound.tsx

@@ -1,10 +0,0 @@
-import { Page } from "../components"
-import { Text } from "../lib"
-
-export const NotFound = () => {
-	return (
-		<Page title="404">
-			<Text>Page not found</Text>
-		</Page>
-	)
-}

package/src/pages/demos/AsideBothDemo.tsx

@@ -1,22 +0,0 @@
-import { BasePage } from "../../components"
-import { Wrapper, Main, Aside, Text } from "../../lib"
-
-export const AsideBothDemo = () => {
-	return (
-		<BasePage title="AsideBoth">
-			<Wrapper backgroundColor="warning-200">
-				<Aside backgroundColor="danger-200" size="small">
-					<Text tag="h2">Aside</Text>
-				</Aside>
-
-				<Main backgroundColor="danger-200">
-					<Text tag="h1">Main</Text>
-				</Main>
-
-				<Aside backgroundColor="danger-200" size="small">
-					<Text tag="h2">Aside</Text>
-				</Aside>
-			</Wrapper>
-		</BasePage>
-	)
-}