@julseb-lib/react 0.1.3 → 0.1.5

package/src/lib/utils/linkify-text.tsx

@@ -0,0 +1,26 @@
+import { Fragment } from "react"
+import { uuid } from "@julseb-lib/utils"
+
+export const URL_REGEX =
+    /^(http:\/\/www\.|https:\/\/www\.|http:\/\/|https:\/\/)?[a-z0-9]+([\-\.]{1}[a-z0-9]+)*\.[a-z]{2,5}(:[0-9]{1,5})?(\/.*)?$/gm
+
+export const linkifyText = (text: string, blank?: boolean) => {
+    const words: Array<string> = text?.split(" ")
+
+    return words?.map((word: string) =>
+        word.match(URL_REGEX) ? (
+            <Fragment key={uuid()}>
+                <a
+                    href={word}
+                    target={blank ? "_blank" : undefined}
+                    rel={blank ? "noreferrer noopener" : undefined}
+                    className="font-black text-blue-500"
+                >
+                    {word}
+                </a>{" "}
+            </Fragment>
+        ) : (
+            word + " "
+        )
+    )
+}

package/src/lib/utils/options-markdown.ts

@@ -0,0 +1,60 @@
+import type { MarkdownToJSX } from "markdown-to-jsx"
+import { Text } from "../components/Text"
+import { Table } from "../components/Table"
+import type { LibMdEditorOptions } from "../types"
+
+export const libOptionsMarkdown: MarkdownToJSX.Options = {
+	forceBlock: true,
+	wrapper: "div",
+	overrides: {
+		h1: { component: Text, props: { tag: "h1" } },
+
+		h2: { component: Text, props: { tag: "h2" } },
+
+		h3: { component: Text, props: { tag: "h3" } },
+
+		h4: { component: Text, props: { tag: "h4" } },
+
+		h5: { component: Text, props: { tag: "h5" } },
+
+		h6: { component: Text, props: { tag: "h6" } },
+
+		p: { component: Text, props: { tag: "p" } },
+
+		strong: { component: Text, props: { tag: "strong" } },
+
+		em: { component: Text, props: { tag: "em" } },
+
+		ul: { component: Text, props: { tag: "ul" } },
+
+		ol: { component: Text, props: { tag: "ol" } },
+
+		dl: { component: Text, props: { tag: "dl" } },
+
+		small: { component: Text, props: { tag: "small" } },
+
+		blockquote: { component: Text, props: { tag: "blockquote" } },
+
+		table: { component: Table },
+	},
+}
+
+export const libMarkdownEditorOptions: LibMdEditorOptions = {
+	bold: true,
+	italic: true,
+	strikethrough: true,
+	underline: true,
+	ul: true,
+	ol: true,
+	link: true,
+	quote: true,
+	hr: true,
+	code: true,
+	codeBlock: true,
+	comment: true,
+	image: true,
+	viewCode: true,
+	viewLive: true,
+	viewPreview: true,
+	titles: true,
+}

package/src/lib/utils/tools.ts

@@ -0,0 +1,15 @@
+import { createTools, type CreateTailwindest } from "tailwindest"
+import type { Tailwind, TailwindNestGroups } from "../types"
+import { twMerge } from "tailwind-merge"
+
+type Tailwindest = CreateTailwindest<{
+	tailwind: Tailwind
+	tailwindNestGroups: TailwindNestGroups
+	groupPrefix: "$" // prefix for nest groups, [optional]
+	useArbitrary: true // use arbitrary values, [optional]
+}>
+
+// @ts-ignore
+export const tw = createTools<Tailwindest>({
+	merger: twMerge, // set tailwind-merge as merger, [optional]
+})

package/src/main.tsx

@@ -0,0 +1,11 @@
+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

@@ -0,0 +1,29 @@
+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

@@ -0,0 +1,53 @@
+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

@@ -0,0 +1,10 @@
+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

@@ -0,0 +1,22 @@
+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>
+	)
+}

package/src/pages/demos/AsideDefaultDemo.tsx

@@ -0,0 +1,18 @@
+import { BasePage } from "../../components"
+import { Wrapper, Main, Aside, Text } from "../../lib"
+
+export const AsideLeftDemo = () => {
+	return (
+		<BasePage title="Aside Left">
+			<Wrapper className="bg-amber-200">
+				<Aside className="bg-red-200">
+					<Text tag="h2">Aside</Text>
+				</Aside>
+
+				<Main className="bg-red-200">
+					<Text tag="h1">Main</Text>
+				</Main>
+			</Wrapper>
+		</BasePage>
+	)
+}

package/src/pages/demos/AsideRightDemo.tsx

@@ -0,0 +1,18 @@
+import { BasePage } from "../../components"
+import { Wrapper, Main, Aside, Text } from "../../lib"
+
+export const AsideRightDemo = () => {
+	return (
+		<BasePage title="AsideRight">
+			<Wrapper className="bg-amber-200">
+				<Main className="bg-red-200">
+					<Text tag="h1">Main</Text>
+				</Main>
+
+				<Aside className="bg-red-200">
+					<Text tag="h2">Aside</Text>
+				</Aside>
+			</Wrapper>
+		</BasePage>
+	)
+}

package/src/pages/demos/CoverBottomDemo.tsx

@@ -0,0 +1,24 @@
+import { CoverLayout } from "../../components"
+import { Cover, Text } from "../../lib"
+
+export const CoverBottomDemo = () => {
+	return (
+		<CoverLayout title="Cover Bottom">
+			<Cover
+				img="/images/cover-img.avif"
+				alt="Cover"
+				alignItems="end"
+				justifyContent="start"
+				className="text-white"
+			>
+				<Text tag="h1" display>
+					Title
+				</Text>
+
+				<Text tag="h2" display>
+					Subtitle
+				</Text>
+			</Cover>
+		</CoverLayout>
+	)
+}

package/src/pages/demos/CoverBottomOverlayDemo.tsx

@@ -0,0 +1,25 @@
+import { CoverLayout } from "../../components"
+import { Cover, Text } from "../../lib"
+
+export const CoverBottomOverlayDemo = () => {
+	return (
+		<CoverLayout title="Cover Bottom Overlay">
+			<Cover
+				img="/images/cover-img.avif"
+				alt="Cover"
+				alignItems="end"
+				justifyContent="start"
+				overlay="gradient-black"
+				className="text-white"
+			>
+				<Text tag="h1" display>
+					Title
+				</Text>
+
+				<Text tag="h2" display>
+					Subtitle
+				</Text>
+			</Cover>
+		</CoverLayout>
+	)
+}

package/src/pages/demos/CoverCenterDemo.tsx

@@ -0,0 +1,24 @@
+import { CoverLayout } from "../../components"
+import { Cover, Text } from "../../lib"
+
+export const CoverCenterDemo = () => {
+	return (
+		<CoverLayout title="Cover Center">
+			<Cover
+				img="/images/cover-img.avif"
+				alt="Cover"
+				alignItems="center"
+				justifyContent="center"
+				className="text-white"
+			>
+				<Text tag="h1" display textAlign="center">
+					Title
+				</Text>
+
+				<Text tag="h2" display textAlign="center">
+					Subtitle
+				</Text>
+			</Cover>
+		</CoverLayout>
+	)
+}

package/src/pages/demos/CoverCenterOverlayDemo.tsx

@@ -0,0 +1,25 @@
+import { CoverLayout } from "../../components"
+import { Cover, Text } from "../../lib"
+
+export const CoverCenterOverlayDemo = () => {
+	return (
+		<CoverLayout title="Cover Center Overlay">
+			<Cover
+				img="/images/cover-img.avif"
+				alt="Cover"
+				alignItems="center"
+				justifyContent="center"
+				overlay="gradient-black"
+				className="text-white"
+			>
+				<Text tag="h1" display textAlign="center">
+					Title
+				</Text>
+
+				<Text tag="h2" display textAlign="center">
+					Subtitle
+				</Text>
+			</Cover>
+		</CoverLayout>
+	)
+}

package/src/pages/demos/HeaderDemo.tsx

@@ -0,0 +1,76 @@
+import { useState, type FormEvent } from "react"
+import { Link, useSearchParams, NavLink } from "react-router-dom"
+import { CoverLayout } from "../../components"
+import { Header, Cover, Text, uuid, clsx } from "../../lib"
+
+const links = [
+	<NavLink
+		to="/header/demo"
+		className={clsx("[&&]:font-normal [&.active]:font-black")}
+		key={uuid()}
+	>
+		Home
+	</NavLink>,
+	<NavLink
+		to="/about"
+		className={clsx("[&&]:font-normal [&.active]:font-black")}
+		key={uuid()}
+	>
+		About
+	</NavLink>,
+	<NavLink
+		to="/users"
+		className={clsx("[&&]:font-normal [&.active]:font-black")}
+		key={uuid()}
+	>
+		Users
+	</NavLink>,
+]
+
+export const HeaderDemo = () => {
+	const [search, setSearch] = useState("")
+	const [_, setSearchParams] = useSearchParams()
+
+	const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
+		e.preventDefault()
+		setSearchParams({ search })
+		setSearch("")
+	}
+
+	return (
+		<CoverLayout title="Header">
+			<Header
+				logo={<Link to="/">Logo</Link>}
+				links={links}
+				search={{
+					value: search,
+					setValue: setSearch,
+					handleSubmit,
+					focusKeys: ["Command", "KeyK"],
+					showKeys: true,
+					placeholder: "Search here...",
+					clearSearch: () => setSearch(""),
+				}}
+				position="fixed"
+				hideOnScroll
+			/>
+
+			<Cover
+				img="/images/cover-img.avif"
+				alt="Cover"
+				alignItems="end"
+				justifyContent="start"
+				overlay="gradient-black"
+				className="text-white"
+			>
+				<Text tag="h1" display>
+					Title
+				</Text>
+
+				<Text tag="h2" display>
+					Subtitle
+				</Text>
+			</Cover>
+		</CoverLayout>
+	)
+}

package/src/pages/demos/MainDefaultDemo.tsx

@@ -0,0 +1,14 @@
+import { BasePage } from "../../components"
+import { Wrapper, Main, Text } from "../../lib"
+
+export const MainDefaultDemo = () => {
+	return (
+		<BasePage title="MainDefault">
+			<Wrapper className="bg-amber-200">
+				<Main className="bg-red-200">
+					<Text tag="h1">Main default</Text>
+				</Main>
+			</Wrapper>
+		</BasePage>
+	)
+}

package/src/pages/demos/MainFormDemo.tsx

@@ -0,0 +1,14 @@
+import { BasePage } from "../../components"
+import { Wrapper, Main, Text } from "../../lib"
+
+export const MainFormDemo = () => {
+	return (
+		<BasePage title="Main form">
+			<Wrapper className="bg-amber-200">
+				<Main className="bg-red-200" size="form">
+					<Text tag="h1">Main form</Text>
+				</Main>
+			</Wrapper>
+		</BasePage>
+	)
+}

package/src/pages/demos/MainLargeDemo.tsx

@@ -0,0 +1,14 @@
+import { BasePage } from "../../components"
+import { Wrapper, Main, Text } from "../../lib"
+
+export const MainLargeDemo = () => {
+	return (
+		<BasePage title="Main large">
+			<Wrapper className="bg-amber-200">
+				<Main className="bg-red-200" size="large">
+					<Text tag="h1">Main large</Text>
+				</Main>
+			</Wrapper>
+		</BasePage>
+	)
+}

package/src/pages/demos/PageLoadingDemo.tsx

@@ -0,0 +1,10 @@
+import { BasePage } from "../../components"
+import { PageLoading } from "../../lib"
+
+export const PageLoadingDemo = () => {
+	return (
+		<BasePage title="PageLoading">
+			<PageLoading loaderVariant={3} backgroundColor="secondary" />
+		</BasePage>
+	)
+}

package/src/routes/index.tsx

@@ -0,0 +1,59 @@
+import type { ReactElement } from "react"
+import { createBrowserRouter } from "react-router-dom"
+import { slugify, toKebabCase } from "@julseb-lib/utils"
+import { Homepage } from "../pages/Homepage"
+import { NotFound } from "../pages/NotFound"
+import { ComponentPage } from "../pages/Component"
+import { MainDefaultDemo } from "../pages/demos/MainDefaultDemo"
+import { AsideLeftDemo } from "../pages/demos/AsideDefaultDemo"
+import { MainLargeDemo } from "../pages/demos/MainLargeDemo"
+import { MainFormDemo } from "../pages/demos/MainFormDemo"
+import { AsideRightDemo } from "../pages/demos/AsideRightDemo"
+import { AsideBothDemo } from "../pages/demos/AsideBothDemo"
+import { CoverCenterDemo } from "../pages/demos/CoverCenterDemo"
+import { CoverCenterOverlayDemo } from "../pages/demos/CoverCenterOverlayDemo"
+import { CoverBottomDemo } from "../pages/demos/CoverBottomDemo"
+import { CoverBottomOverlayDemo } from "../pages/demos/CoverBottomOverlayDemo"
+import { PageLoadingDemo } from "../pages/demos/PageLoadingDemo"
+import { HeaderDemo } from "../pages/demos/HeaderDemo"
+/* Prepend demo import - DO NOT REMOVE */
+
+export type Route = {
+	path: string
+	element: ReactElement
+}
+
+export type ComponentPaths = Array<Pick<Route, "path">>
+
+const demos: Array<Route> = [
+	{ path: "/main/demo-default", element: <MainDefaultDemo /> },
+	{ path: "/main/demo-large", element: <MainLargeDemo /> },
+	{ path: "/main/demo-form", element: <MainFormDemo /> },
+	{ path: "/aside/demo-left", element: <AsideLeftDemo /> },
+	{ path: "/aside/demo-right", element: <AsideRightDemo /> },
+	{ path: "/aside/demo-both", element: <AsideBothDemo /> },
+	{ path: "/cover/demo-center", element: <CoverCenterDemo /> },
+	{ path: "/cover/demo-center-overlay", element: <CoverCenterOverlayDemo /> },
+	{ path: "/cover/demo-bottom", element: <CoverBottomDemo /> },
+	{ path: "/cover/demo-bottom-overlay", element: <CoverBottomOverlayDemo /> },
+	{ path: "/page-loading/demo", element: <PageLoadingDemo /> },
+	{ path: "/header/demo", element: <HeaderDemo /> },
+	/* Prepend here - DO NOT REMOVE */
+]
+
+export const routes: Array<Route> = [
+	{ path: "*", element: <NotFound /> },
+	{ path: "/", element: <Homepage /> },
+	{ path: "/:componentName", element: <ComponentPage /> },
+]
+
+export const routesPaths: ComponentPaths = routes
+	.filter(route => route.path !== "/:componentName" && route.path !== "*")
+	.map(route => ({
+		path:
+			route.path === "/"
+				? "/"
+				: `/${toKebabCase(slugify(route.path.replaceAll("/", "")))}`,
+	}))
+
+export const router = createBrowserRouter([...routes, ...demos])

package/src/types/global.d.ts

@@ -0,0 +1,11 @@
+import type {
+	FunctionComponent,
+	ReactNode,
+	ReactElement as ReactEl,
+} from "react"
+
+declare global {
+	type FC<T> = FunctionComponent<T>
+	type Children = ReactNode | Array<ReactNode>
+	type ReactElement = ReactEl
+}

package/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/tailwind.config.ts

@@ -0,0 +1,19 @@
+import type { Config } from "tailwindcss"
+
+const config: Config = {
+	content: ["./src/**/*.{js,ts,jsx,tsx,mdx}"],
+	theme: {
+		extend: {
+			fontFamily: {
+				sans: ["var(--lato)"],
+			},
+			animation: {},
+			keyframes: {},
+		},
+	},
+	// eslint-disable-next-line
+	plugins: [require("@tailwindcss/forms")],
+}
+
+// eslint-disable-next-line
+export default config

package/tsconfig.app.json

@@ -0,0 +1,28 @@
+{
+	"compilerOptions": {
+		"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+		"target": "ES2021",
+		"useDefineForClassFields": true,
+		"lib": ["ES2020", "DOM", "DOM.Iterable", "ES2021"],
+		"module": "ESNext",
+		"skipLibCheck": true,
+
+		/* Bundler mode */
+		"moduleResolution": "bundler",
+		"allowImportingTsExtensions": true,
+		"isolatedModules": true,
+		"moduleDetection": "force",
+		"noEmit": true,
+		"jsx": "react-jsx",
+		"verbatimModuleSyntax": true,
+
+		/* Linting */
+		"strict": true,
+		"noUnusedLocals": false,
+		"noUnusedParameters": false,
+		"noFallthroughCasesInSwitch": true,
+		"noUncheckedSideEffectImports": true
+	},
+	"include": ["src"],
+	"exclude": ["node_modules"]
+}

package/tsconfig.json

@@ -0,0 +1,7 @@
+{
+	"files": [],
+	"references": [
+		{ "path": "./tsconfig.app.json" },
+		{ "path": "./tsconfig.node.json" }
+	]
+}

package/tsconfig.node.json

@@ -0,0 +1,25 @@
+{
+	"compilerOptions": {
+		"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+		"target": "ES2022",
+		"lib": ["ES2023"],
+		"module": "ESNext",
+		"skipLibCheck": true,
+
+		/* Bundler mode */
+		"moduleResolution": "bundler",
+		"allowImportingTsExtensions": true,
+		"isolatedModules": true,
+		"moduleDetection": "force",
+		"noEmit": true,
+		"verbatimModuleSyntax": true,
+
+		/* Linting */
+		"strict": true,
+		"noUnusedLocals": false,
+		"noUnusedParameters": false,
+		"noFallthroughCasesInSwitch": true,
+		"noUncheckedSideEffectImports": true
+	},
+	"include": ["vite.config.ts"]
+}