@julseb-lib/react 0.1.4 → 0.1.6

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

@@ -1,101 +0,0 @@
-import { BiLeftArrowAlt, BiRightArrowAlt } from "react-icons/bi"
-import { ButtonGroup } from "../../../"
-import type { LibButtonGroupButtonItem } from "../../../types"
-import type { ILibButtonGroup } from "../../../types/components-props"
-import type { ComponentPreview } from "../../../../data/components"
-
-const buttons: Array<LibButtonGroupButtonItem> = [
-	{ id: "1", content: <BiLeftArrowAlt /> },
-	{ id: "2", content: "Button", disabled: true },
-	{ id: "3", content: "Button", onClick: () => alert("Clicked") },
-	{ id: "4", content: "Button" },
-	{ id: "5", content: <BiRightArrowAlt /> },
-]
-
-export const buttonGroupPreview: ComponentPreview<ILibButtonGroup> = {
-	name: "Button Group",
-	component: ButtonGroup,
-	category: "components",
-	import: "ButtonGroup",
-	additionalImports: null,
-	optionalImports: null,
-	propsImport: "ILibButtonGroup",
-	additionalTypeImports: ["LibButtonGroupButtonItem"],
-	extends: ["HTMLDivElement"],
-	previews: [
-		{ previewTitle: "Default", props: { buttons } },
-		{ previewTitle: "Ghost", props: { buttons, variant: "ghost" } },
-		{
-			previewTitle: "Transparent",
-			props: { buttons, variant: "transparent" },
-		},
-		{
-			previewTitle: "Success",
-			props: { buttons, color: "success" },
-		},
-		{ previewTitle: "Small", props: { buttons, size: "small" } },
-		{
-			previewTitle: "Border radius",
-			props: { buttons, borderRadius: "full" },
-		},
-	],
-	props: [
-		{
-			name: "buttons",
-			type: "Array of objects",
-			possibleValues: null,
-			defaultValue: null,
-			description: "Array of button items to render in the group.",
-			isRequired: true,
-		},
-		{
-			name: "color",
-			type: "string",
-			possibleValues: [
-				"primary",
-				"secondary",
-				"success",
-				"danger",
-				"warning",
-				"gray",
-				"white",
-			],
-			defaultValue: "primary",
-			description: "Color theme for the button group.",
-			isRequired: false,
-		},
-		{
-			name: "variant",
-			type: "string",
-			possibleValues: ["plain", "ghost", "outline", "transparent"],
-			defaultValue: "plain",
-			description: "Visual variant style of the button group.",
-			isRequired: false,
-		},
-		{
-			name: "borderRadius",
-			type: "string",
-			possibleValues: [
-				"none",
-				"sm",
-				"md",
-				"lg",
-				"xl",
-				"2xl",
-				"3xl",
-				"full",
-			],
-			defaultValue: "md",
-			description: "Border radius of the button group container.",
-			isRequired: false,
-		},
-		{
-			name: "size",
-			type: "string",
-			possibleValues: ["default", "small"],
-			defaultValue: "default",
-			description: "Size of the buttons in the group.",
-			isRequired: false,
-		},
-	],
-}

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

@@ -1,239 +0,0 @@
-import { BiEnvelope } from "react-icons/bi"
-import { ButtonIcon, designTokens, Flexbox } from "../../../"
-import type { ReactChildren } from "../../../types"
-import type { ILibButtonIcon } 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 buttonIconPreview: ComponentPreview<ILibButtonIcon> = {
-	name: "Button Icon",
-	component: ButtonIcon,
-	category: "components",
-	import: "ButtonIcon",
-	additionalImports: null,
-	optionalImports: null,
-	propsImport: "ILibButtonIcon",
-	additionalTypeImports: null,
-	extends: ["HTMLButtonElement"],
-	previews: [
-		{
-			previewTitle: "Plain",
-			demo: (
-				<Flex>
-					{Object.keys(designTokens.libColorsHover).map(
-						(color, i) => (
-							<ButtonIcon
-								icon={<BiEnvelope size={32} />}
-								color={color as any}
-								variant="plain"
-								key={i}
-							/>
-						),
-					)}
-				</Flex>
-			),
-		},
-		{
-			previewTitle: "Ghost",
-			demo: (
-				<Flex>
-					{Object.keys(designTokens.libColorsHover).map(
-						(color, i) => (
-							<ButtonIcon
-								icon={<BiEnvelope size={32} />}
-								color={color as any}
-								variant="ghost"
-								key={i}
-							/>
-						),
-					)}
-				</Flex>
-			),
-		},
-		{
-			previewTitle: "Transparent",
-			demo: (
-				<Flex>
-					{Object.keys(designTokens.libColorsHover).map(
-						(color, i) => (
-							<ButtonIcon
-								icon={<BiEnvelope size={32} />}
-								color={color as any}
-								variant="transparent"
-								key={i}
-							/>
-						),
-					)}
-				</Flex>
-			),
-		},
-		{
-			previewTitle: "With tooltip",
-			demo: (
-				<Flex>
-					<ButtonIcon
-						icon={<BiEnvelope size={32} />}
-						tooltip="Tooltip"
-						showTooltip
-					/>
-				</Flex>
-			),
-		},
-		{
-			previewTitle: "With different border radius",
-			demo: (
-				<Flex>
-					<ButtonIcon
-						icon={<BiEnvelope size={32} />}
-						borderRadius="lg"
-					/>
-				</Flex>
-			),
-		},
-		{
-			previewTitle: "Disabled",
-			demo: (
-				<Flex>
-					<ButtonIcon
-						icon={<BiEnvelope size={32} />}
-						variant="plain"
-						disabled
-					/>
-					<ButtonIcon
-						icon={<BiEnvelope size={32} />}
-						variant="ghost"
-						disabled
-					/>
-					<ButtonIcon
-						icon={<BiEnvelope size={32} />}
-						variant="transparent"
-						disabled
-					/>
-				</Flex>
-			),
-		},
-		{
-			previewTitle: "Loading",
-			demo: (
-				<Flex>
-					<ButtonIcon icon={<BiEnvelope size={32} />} isLoading />
-				</Flex>
-			),
-		},
-	],
-	props: [
-		{
-			name: "icon",
-			type: "ReactElement",
-			possibleValues: null,
-			defaultValue: null,
-			description: "Icon element to display inside the button.",
-			isRequired: true,
-		},
-		{
-			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: "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,
-		},
-		{
-			name: "loaderClasses",
-			type: "string",
-			possibleValues: null,
-			defaultValue: null,
-			description: "Additional CSS classes for the loader.",
-			isRequired: false,
-		},
-		{
-			name: "tooltip",
-			type: "string",
-			possibleValues: null,
-			defaultValue: null,
-			description: "Tooltip text to display.",
-			isRequired: false,
-		},
-		{
-			name: "showTooltip",
-			type: "boolean | Object",
-			possibleValues: null,
-			defaultValue: null,
-			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/CodeContainer/__preview__/CodeContainer.preview.tsx

@@ -1,280 +0,0 @@
-import { CodeContainer } from "../../../"
-import type {} from "../../../types"
-import type { ILibCodeContainer } from "../../../types/components-props"
-import type { ComponentPreview } from "../../../../data/components"
-
-const code =
-	'const [isOpen, setIsOpen] = useState(false)\n\nreturn (\n\t<>\n\t\t<Button onClick={() => setIsOpen(!isOpen)}>Open modal</Button>\n\t\t<div className={clsx("top-0 left-0 fixed bg-overlay-black-50 w-full h-svh", isOpen ? "visible" : "invisible")}>\n\t\t\t...\n\t\t</div>\n\t</>\n)'
-
-export const codeContainerPreview: ComponentPreview<ILibCodeContainer> = {
-	name: "Code Container",
-	component: CodeContainer,
-	category: "components",
-	import: "CodeContainer", // import Component (ex: Skeleton)
-	additionalImports: [], // import OtherComponent (ex: SkeletonCard)
-	optionalImports: [], // import ComponentItem (ex: AccordionItem) => to build with children instead of prop on component
-	propsImport: "ILibCodeContainer", // import ILibComponent (ex: ILibAccordion)
-	additionalTypeImports: [], // import LibComponentItem (ex: LibAccordionItem)
-	extends: ["HTMLDivElement"],
-	previews: [
-		{
-			props: {
-				highlighterProps: { language: "typescript" },
-				children: code,
-			},
-		},
-	],
-	props: [
-		{
-			name: "highlighterProps",
-			type: "string",
-			possibleValues: [
-				"oneC (1c)",
-				"abnf",
-				"accesslog",
-				"actionscript",
-				"ada",
-				"angelscript",
-				"apache",
-				"applescript",
-				"arcade",
-				"arduino",
-				"armasm",
-				"asciidoc",
-				"aspectj",
-				"autohotkey",
-				"autoit",
-				"avrasm",
-				"awk",
-				"axapta",
-				"bash",
-				"basic",
-				"bnf",
-				"brainfuck",
-				"cLike (c-like)",
-				"c",
-				"cal",
-				"capnproto",
-				"ceylon",
-				"clean",
-				"clojureRepl (clojure-repl)",
-				"clojure",
-				"cmake",
-				"coffeescript",
-				"coq",
-				"cos",
-				"cpp",
-				"crmsh",
-				"crystal",
-				"csharp",
-				"csp",
-				"css",
-				"d",
-				"dart",
-				"delphi",
-				"diff",
-				"django",
-				"dns",
-				"dockerfile",
-				"dos",
-				"dsconfig",
-				"dts",
-				"dust",
-				"ebnf",
-				"elixir",
-				"elm",
-				"erb",
-				"erlangRepl (erlang-repl)",
-				"erlang",
-				"excel",
-				"fix",
-				"flix",
-				"fortran",
-				"fsharp",
-				"gams",
-				"gauss",
-				"gcode",
-				"gherkin",
-				"glsl",
-				"gml",
-				"go",
-				"golo",
-				"gradle",
-				"groovy",
-				"haml",
-				"handlebars",
-				"haskell",
-				"haxe",
-				"hsp",
-				"htmlbars",
-				"http",
-				"hy",
-				"inform7",
-				"ini",
-				"irpf90",
-				"isbl",
-				"java",
-				"javascript",
-				"jbossCli (jboss-cli)",
-				"json",
-				"juliaRepl (julia-repl)",
-				"julia",
-				"kotlin",
-				"lasso",
-				"latex",
-				"ldif",
-				"leaf",
-				"less",
-				"lisp",
-				"livecodeserver",
-				"livescript",
-				"llvm",
-				"lsl",
-				"lua",
-				"makefile",
-				"markdown",
-				"mathematica",
-				"matlab",
-				"maxima",
-				"mel",
-				"mercury",
-				"mipsasm",
-				"mizar",
-				"mojolicious",
-				"monkey",
-				"moonscript",
-				"n1ql",
-				"nginx",
-				"nim",
-				"nix",
-				"nodeRepl (node-repl)",
-				"nsis",
-				"objectivec",
-				"ocaml",
-				"openscad",
-				"oxygene",
-				"parser3",
-				"perl",
-				"pf",
-				"pgsql",
-				"phpTemplate (php-template)",
-				"php",
-				"plaintext",
-				"pony",
-				"powershell",
-				"processing",
-				"profile",
-				"prolog",
-				"properties",
-				"protobuf",
-				"puppet",
-				"purebasic",
-				"pythonRepl (python-repl)",
-				"python",
-				"q",
-				"qml",
-				"r",
-				"reasonml",
-				"rib",
-				"roboconf",
-				"routeros",
-				"rsl",
-				"ruby",
-				"ruleslanguage",
-				"rust",
-				"sas",
-				"scala",
-				"scheme",
-				"scilab",
-				"scss",
-				"shell",
-				"smali",
-				"smalltalk",
-				"sml",
-				"sqf",
-				"sql",
-				"sqlMore (sql_more)",
-				"stan",
-				"stata",
-				"step21",
-				"stylus",
-				"subunit",
-				"swift",
-				"taggerscript",
-				"tap",
-				"tcl",
-				"thrift",
-				"tp",
-				"twig",
-				"typescript",
-				"vala",
-				"vbnet",
-				"vbscriptHtml (vbscript-html)",
-				"vbscript",
-				"verilog",
-				"vhdl",
-				"vim",
-				"x86asm",
-				"xl",
-				"xml",
-				"xquery",
-				"yaml",
-				"zephir",
-			],
-			defaultValue: null,
-			description:
-				"Additional props to pass to the syntax highlighter, including language selection.",
-			isRequired: false,
-		},
-		{
-			name: "textColor",
-			type: "string",
-			possibleValues: "Any color from the library",
-			defaultValue: null,
-			description: "Text color for the code content.",
-			isRequired: false,
-		},
-		{
-			name: "backgroundColor",
-			type: "string",
-			possibleValues: "Any color from the library",
-			defaultValue: null,
-			description: "Background color for the code content.",
-			isRequired: false,
-		},
-		{
-			name: "style",
-			type: "CSSProperties",
-			possibleValues: [],
-			defaultValue: null,
-			description: "Custom styles for the syntax highlighter.",
-			isRequired: false,
-		},
-		{
-			name: "hideCopyButton",
-			type: "boolean",
-			possibleValues: [],
-			defaultValue: "false",
-			description: "Whether to hide the copy to clipboard button.",
-			isRequired: false,
-		},
-		{
-			name: "tooltipTexts",
-			type: "Object",
-			possibleValues: [],
-			defaultValue: null,
-			description:
-				"Custom tooltip texts for copy button states. Only available when hideCopyButton is false.",
-			isRequired: false,
-		},
-		{
-			name: "icons",
-			type: "Object",
-			possibleValues: [],
-			defaultValue: "copy: BiClipboard, copied: BiCheck",
-			description:
-				"Custom icons for copy button states. Only available when hideCopyButton is false.",
-			isRequired: false,
-		},
-	],
-}