@julseb-lib/react 0.1.5 → 0.1.6

package/src/pages/demos/AsideDefaultDemo.tsx

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/tailwind.config.ts

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

@@ -1,28 +0,0 @@
-{
-	"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

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

package/tsconfig.node.json

@@ -1,25 +0,0 @@
-{
-	"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"]
-}

package/vite.config.ts

@@ -1,53 +0,0 @@
-import { defineConfig } from "vite"
-import react from "@vitejs/plugin-react"
-import tailwindcss from "@tailwindcss/vite"
-import path from "node:path"
-import dts from "vite-plugin-dts"
-import pluginChecker from "vite-plugin-checker"
-
-// https://vite.dev/config/
-export default defineConfig({
-	plugins: [
-		react(),
-		tailwindcss(),
-		dts({
-			insertTypesEntry: true,
-			exclude: [
-				"./src/lib/components/*/__preview__",
-				"./src/lib/components/*/__tests__",
-			],
-		}),
-		pluginChecker({ typescript: true }),
-	],
-	build: {
-		lib: {
-			entry: path.resolve(__dirname, "./src/lib/index.ts"),
-			name: "julseb-lib-react",
-			formats: ["es", "umd", "cjs"],
-			fileName: format => `index.${format}.js`,
-		},
-
-		rollupOptions: {
-			external: [
-				"react",
-				"react-dom",
-				"fuse.js",
-				"markdown-to-jsx",
-				"react-syntax-highlighter",
-				"tailwindcss",
-				"@julseb-lib/utils",
-			],
-			output: {
-				globals: {
-					react: "React",
-					"react-dom": "ReactDOM",
-					tailwindcss: "tailwind",
-					"@julseb-lib/utils": "@julseb-lib/utils",
-					"fuse.js": "fuse.js",
-					"react-syntax-highlighter": "react-syntax-highlighter",
-					"markdown-to-jsx": "markdown-to-jsx",
-				},
-			},
-		},
-	},
-})