@julseb-lib/react 0.0.50 → 0.0.51

package/src/pages/demos/DemoHeader.tsx

@@ -0,0 +1,76 @@
+/*=============================================== DemoHeader ===============================================*/
+
+import { CoverLayout } from "../../components"
+import { Header, Cover, Text } from "../../lib"
+import type { LibHeaderLink } from "../../lib/types"
+
+export const DemoHeader = () => {
+    const links: Array<LibHeaderLink | JSX.Element> = [
+        {
+            text: "Link",
+            to: "#",
+        },
+        {
+            text: "Link",
+            to: "/",
+        },
+        {
+            text: "Link",
+            to: "/",
+        },
+        {
+            text: "Button",
+            onClick: () => alert("Clicked"),
+        },
+        <button key={42} onClick={() => alert("Clicked element")}>
+            Click me
+        </button>,
+    ]
+
+    return (
+        <CoverLayout title="Demo header">
+            <Header
+                data-testid="testid"
+                className="className"
+                logo={{
+                    // text: "Logo",
+                    img: "/images/logo-fajny-css.svg",
+                    imgOpen: "/images/logo-fajny-css-white.svg",
+                    width: 100,
+                    // height: 400,
+                }}
+                links={links}
+                position="fixed"
+                hideOnScroll
+                search={{
+                    pathname: "",
+                    iconLeft: "search",
+                    placeholder: "Search here",
+                    keyboardShortcut: ["Command", "KeyK"],
+                    maxWidth: 300,
+                    inputBackground: "light",
+                    showKeys: true,
+                }}
+                variant="transparent"
+                // burgerPosition="left"
+                // navDesktopVariant="left"
+                navMobileVariant="top"
+            />
+
+            <Cover
+                img="/images/cover-img.avif"
+                alt="Cover"
+                justifyContent="flex-end"
+                alignItems="flex-start"
+                overlay="gradient-black"
+            >
+                <Text tag="h1" display>
+                    Title
+                </Text>
+                <Text tag="h2" display>
+                    Subtitle
+                </Text>
+            </Cover>
+        </CoverLayout>
+    )
+}

package/src/pages/demos/DemoMainDefault.tsx

@@ -0,0 +1,16 @@
+/*=============================================== DemoMainDefault ===============================================*/
+
+import { Text } from "../../lib"
+import { BasePage, StyledWrapper, StyledMain } from "../../components"
+
+export const DemoMainDefault = () => {
+    return (
+        <BasePage title="Demo Main Default">
+            <StyledWrapper data-testid="testid" className="className">
+                <StyledMain data-testid="testid" className="className">
+                    <Text tag="h2">Main</Text>
+                </StyledMain>
+            </StyledWrapper>
+        </BasePage>
+    )
+}

package/src/pages/demos/DemoMainForm.tsx

@@ -0,0 +1,20 @@
+/*=============================================== DemoMainForm ===============================================*/
+
+import { Text } from "../../lib"
+import { BasePage, StyledWrapper, StyledMain } from "../../components"
+
+export const DemoMainForm = () => {
+    return (
+        <BasePage title="Demo Main Form">
+            <StyledWrapper data-testid="testid" className="className">
+                <StyledMain
+                    size="form"
+                    data-testid="testid"
+                    className="className"
+                >
+                    <Text tag="h2">Main</Text>
+                </StyledMain>
+            </StyledWrapper>
+        </BasePage>
+    )
+}

package/src/pages/demos/DemoMainFull.tsx

@@ -0,0 +1,126 @@
+/*=============================================== DemoMainFull ===============================================*/
+
+import { Text, Section, Image, FullBleed } from "../../lib"
+import { BasePage, StyledMain } from "../../components"
+
+export const DemoMainFull = () => {
+    return (
+        <BasePage title="Demo Main Full">
+            <StyledMain size="full" data-testid="testid" className="className">
+                <Text tag="h2">Main</Text>
+
+                <Section gap="xs">
+                    <Text tag="h4">Title</Text>
+                    <Text>
+                        Lorem, ipsum dolor sit amet consectetur adipisicing
+                        elit. Fugiat ut possimus doloremque doloribus tempore
+                        ducimus ad fuga. Tempore doloribus sunt perferendis
+                        porro corporis, ex deserunt incidunt architecto libero
+                        temporibus! Rerum. Lorem, ipsum dolor sit amet
+                        consectetur adipisicing elit. Fugiat ut possimus
+                        doloremque doloribus tempore ducimus ad fuga. Tempore
+                        doloribus sunt perferendis porro corporis, ex deserunt
+                        incidunt architecto libero temporibus! Rerum. Lorem,
+                        ipsum dolor sit amet consectetur adipisicing elit.
+                        Fugiat ut possimus doloremque doloribus tempore ducimus
+                        ad fuga. Tempore doloribus sunt perferendis porro
+                        corporis, ex deserunt incidunt architecto libero
+                        temporibus! Rerum.
+                    </Text>
+                </Section>
+
+                <Section gap="xs">
+                    <Text tag="h4">Title</Text>
+                    <Text>
+                        Lorem, ipsum dolor sit amet consectetur adipisicing
+                        elit. Fugiat ut possimus doloremque doloribus tempore
+                        ducimus ad fuga. Tempore doloribus sunt perferendis
+                        porro corporis, ex deserunt incidunt architecto libero
+                        temporibus! Rerum. Lorem, ipsum dolor sit amet
+                        consectetur adipisicing elit. Fugiat ut possimus
+                        doloremque doloribus tempore ducimus ad fuga. Tempore
+                        doloribus sunt perferendis porro corporis, ex deserunt
+                        incidunt architecto libero temporibus! Rerum. Lorem,
+                        ipsum dolor sit amet consectetur adipisicing elit.
+                        Fugiat ut possimus doloremque doloribus tempore ducimus
+                        ad fuga. Tempore doloribus sunt perferendis porro
+                        corporis, ex deserunt incidunt architecto libero
+                        temporibus! Rerum.
+                    </Text>
+                </Section>
+
+                <FullBleed
+                    padding={{ leftRight: "xxl" }}
+                    height={400}
+                    as="section"
+                >
+                    <Image
+                        src="https://images.unsplash.com/photo-1643028468604-858ea2a9c111?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1932&q=80"
+                        alt="Full bleed"
+                        fit="cover"
+                    />
+                </FullBleed>
+
+                <Section gap="xs">
+                    <Text tag="h4">Title</Text>
+                    <Text>
+                        Lorem, ipsum dolor sit amet consectetur adipisicing
+                        elit. Fugiat ut possimus doloremque doloribus tempore
+                        ducimus ad fuga. Tempore doloribus sunt perferendis
+                        porro corporis, ex deserunt incidunt architecto libero
+                        temporibus! Rerum. Lorem, ipsum dolor sit amet
+                        consectetur adipisicing elit. Fugiat ut possimus
+                        doloremque doloribus tempore ducimus ad fuga. Tempore
+                        doloribus sunt perferendis porro corporis, ex deserunt
+                        incidunt architecto libero temporibus! Rerum. Lorem,
+                        ipsum dolor sit amet consectetur adipisicing elit.
+                        Fugiat ut possimus doloremque doloribus tempore ducimus
+                        ad fuga. Tempore doloribus sunt perferendis porro
+                        corporis, ex deserunt incidunt architecto libero
+                        temporibus! Rerum.
+                    </Text>
+                </Section>
+
+                <Section gap="xs">
+                    <Text tag="h4">Title</Text>
+                    <Text>
+                        Lorem, ipsum dolor sit amet consectetur adipisicing
+                        elit. Fugiat ut possimus doloremque doloribus tempore
+                        ducimus ad fuga. Tempore doloribus sunt perferendis
+                        porro corporis, ex deserunt incidunt architecto libero
+                        temporibus! Rerum. Lorem, ipsum dolor sit amet
+                        consectetur adipisicing elit. Fugiat ut possimus
+                        doloremque doloribus tempore ducimus ad fuga. Tempore
+                        doloribus sunt perferendis porro corporis, ex deserunt
+                        incidunt architecto libero temporibus! Rerum. Lorem,
+                        ipsum dolor sit amet consectetur adipisicing elit.
+                        Fugiat ut possimus doloremque doloribus tempore ducimus
+                        ad fuga. Tempore doloribus sunt perferendis porro
+                        corporis, ex deserunt incidunt architecto libero
+                        temporibus! Rerum.
+                    </Text>
+                </Section>
+
+                <Section gap="xs">
+                    <Text tag="h4">Title</Text>
+                    <Text>
+                        Lorem, ipsum dolor sit amet consectetur adipisicing
+                        elit. Fugiat ut possimus doloremque doloribus tempore
+                        ducimus ad fuga. Tempore doloribus sunt perferendis
+                        porro corporis, ex deserunt incidunt architecto libero
+                        temporibus! Rerum. Lorem, ipsum dolor sit amet
+                        consectetur adipisicing elit. Fugiat ut possimus
+                        doloremque doloribus tempore ducimus ad fuga. Tempore
+                        doloribus sunt perferendis porro corporis, ex deserunt
+                        incidunt architecto libero temporibus! Rerum. Lorem,
+                        ipsum dolor sit amet consectetur adipisicing elit.
+                        Fugiat ut possimus doloremque doloribus tempore ducimus
+                        ad fuga. Tempore doloribus sunt perferendis porro
+                        corporis, ex deserunt incidunt architecto libero
+                        temporibus! Rerum.
+                    </Text>
+                </Section>
+            </StyledMain>
+        </BasePage>
+    )
+}

package/src/pages/demos/DemoMainLarge.tsx

@@ -0,0 +1,21 @@
+/*=============================================== DemoMainLarge ===============================================*/
+
+
+import { Text } from "../../lib"
+import { BasePage, StyledWrapper, StyledMain } from "../../components"
+
+export const DemoMainLarge = () => {
+    return (
+        <BasePage title="Demo Main Large">
+            <StyledWrapper data-testid="testid" className="className">
+                <StyledMain
+                    size="large"
+                    data-testid="testid"
+                    className="className"
+                >
+                    <Text tag="h2">Main</Text>
+                </StyledMain>
+            </StyledWrapper>
+        </BasePage>
+    )
+}

package/src/pages/demos/DemoMainNumber.tsx

@@ -0,0 +1,21 @@
+/*=============================================== DemoMainNumber ===============================================*/
+
+import type { FC } from "react"
+import { Text } from "../../lib"
+import { BasePage, StyledWrapper, StyledMain } from "../../components"
+
+export const DemoMainNumber: FC = () => {
+    return (
+        <BasePage title="Demo Main Number">
+            <StyledWrapper data-testid="testid" className="className">
+                <StyledMain
+                    size={200}
+                    data-testid="testid"
+                    className="className"
+                >
+                    <Text tag="h2">Main</Text>
+                </StyledMain>
+            </StyledWrapper>
+        </BasePage>
+    )
+}

package/src/pages/demos/DemoPageLoading.tsx

@@ -0,0 +1,18 @@
+/*=============================================== DemoPageLoading ===============================================*/
+
+import type { FC } from "react"
+import { BasePage } from "../../components"
+import { PageLoading } from "../../lib"
+
+export const DemoPageLoading: FC = () => {
+    return (
+        <BasePage title="Demo page loading">
+            <PageLoading
+                backgroundColor="secondary"
+                // loaderVariant={4}
+                data-testid="testid"
+                className="className"
+            />
+        </BasePage>
+    )
+}

package/src/pages/demos/PageLayoutDemo.tsx

@@ -0,0 +1,53 @@
+/*=============================================== PageLayout demo ===============================================*/
+
+import { useState, useEffect, type FC } from "react"
+import { PageLayout, Text } from "../../lib"
+import type { LibHeaderLink, LibFooterLink, LibMainSize } from "../../lib/types"
+
+const links: Array<LibHeaderLink> = [
+    { text: "Link", to: "/" },
+    { text: "Link", to: "/" },
+]
+
+export const PageLayoutDemo: FC<{ mainSize?: LibMainSize }> = ({
+    mainSize,
+}) => {
+    const [isLoading, setIsLoading] = useState(true)
+
+    useEffect(() => {
+        setTimeout(() => setIsLoading(false), 1000)
+    }, [])
+
+    return (
+        <PageLayout
+            isLoading={isLoading}
+            helmet={{
+                title: "Hello Page Layout",
+                keywords: ["Hello", "World"],
+            }}
+            header={{
+                logo: "Demo Page Layout",
+                links,
+                nav: <Nav />,
+            }}
+            footer={{
+                logo: "Demo",
+                direction: "vertical",
+                links: [...links, ...links] as Array<LibFooterLink>,
+                withSeparator: true,
+            }}
+            main={{ size: mainSize }}
+        >
+            <Text tag="h1">Hello World</Text>
+        </PageLayout>
+    )
+}
+
+const Nav: FC = () => {
+    return (
+        <>
+            <p>Hello</p>
+            <p>World</p>
+        </>
+    )
+}

package/src/routes/index.tsx

@@ -0,0 +1,91 @@
+/*=============================================== Routes ===============================================*/
+
+import { createBrowserRouter } from "react-router-dom"
+import { slugify, toKebabCase } from "@julseb-lib/utils"
+
+/*====================== Root ======================*/
+
+import { Homepage } from "../pages/Homepage"
+import { Generate } from "../pages/Generate"
+import { NotFoundPage } from "../pages/404"
+
+/*====================== Components ======================*/
+
+import { ComponentPage } from "../pages/components/ComponentPage"
+
+/*====================== Demos ======================*/
+
+import { DemoMainDefault } from "../pages/demos/DemoMainDefault"
+import { DemoMainLarge } from "../pages/demos/DemoMainLarge"
+import { DemoMainForm } from "../pages/demos/DemoMainForm"
+import { DemoMainNumber } from "../pages/demos/DemoMainNumber"
+import { DemoMainFull } from "../pages/demos/DemoMainFull"
+import { DemoAsideDefault } from "../pages/demos/DemoAsideDefault"
+import { DemoAsideSmall } from "../pages/demos/DemoAsideSmall"
+import { DemoAsideBoth } from "../pages/demos/DemoAsideBoth"
+import { DemoCoverCenter } from "../pages/demos/DemoCoverCenter"
+import { DemoCoverCenterOverlay } from "../pages/demos/DemoCoverCenterOverlay"
+import { DemoCoverBottom } from "../pages/demos/DemoCoverBottom"
+import { DemoCoverBottomOverlay } from "../pages/demos/DemoCoverBottomOverlay"
+import { DemoPageLoading } from "../pages/demos/DemoPageLoading"
+import { BackToTopDemo } from "../pages/demos/BackToTopDemo"
+import { DemoHeader } from "../pages/demos/DemoHeader"
+import { PageLayoutDemo } from "../pages/demos/PageLayoutDemo"
+
+export type Route = {
+    path: string
+    element: JSX.Element
+}
+
+export type ComponentPaths = Array<Pick<Route, "path">>
+
+const demos: Array<Route> = [
+    { path: "/demos/main-default", element: <DemoMainDefault /> },
+    { path: "/demos/main-large", element: <DemoMainLarge /> },
+    { path: "/demos/main-form", element: <DemoMainForm /> },
+    { path: "/demos/main-number", element: <DemoMainNumber /> },
+    { path: "/demos/main-full", element: <DemoMainFull /> },
+    { path: "/demos/aside-default", element: <DemoAsideDefault /> },
+    { path: "/demos/aside-small", element: <DemoAsideSmall /> },
+    { path: "/demos/aside-both-sides", element: <DemoAsideBoth /> },
+
+    { path: "/cover/cover-center", element: <DemoCoverCenter /> },
+    {
+        path: "/cover/cover-center-overlay",
+        element: <DemoCoverCenterOverlay />,
+    },
+    { path: "/cover/cover-bottom", element: <DemoCoverBottom /> },
+    {
+        path: "/cover/cover-bottom-overlay",
+        element: <DemoCoverBottomOverlay />,
+    },
+
+    { path: "/page-loading/demo", element: <DemoPageLoading /> },
+
+    { path: "/back-to-top/demo", element: <BackToTopDemo /> },
+
+    { path: "/header/demo", element: <DemoHeader /> },
+
+    { path: "/page-layout/demo", element: <PageLayoutDemo /> },
+]
+
+export const routes: Array<Route> = [
+    { path: "*", element: <NotFoundPage /> },
+    { path: "/", element: <Homepage /> },
+    { path: "/generate", element: <Generate /> },
+    { path: "/:componentName", element: <ComponentPage /> },
+
+    // prependRoute
+    // { path: "/reset-scroll", element: <></> },
+]
+
+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/vite-env.d.ts

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

package/tsconfig-types.json

@@ -0,0 +1,32 @@
+{
+    "compilerOptions": {
+        "target": "ESNext",
+        "useDefineForClassFields": true,
+        "lib": [
+            "DOM",
+            "DOM.Iterable",
+            "ESNext",
+            "ES2021.String"
+        ],
+        "allowJs": false,
+        "skipLibCheck": true,
+        "esModuleInterop": false,
+        "allowSyntheticDefaultImports": true,
+        "strict": true,
+        "forceConsistentCasingInFileNames": true,
+        "module": "ESNext",
+        "moduleResolution": "Node",
+        "resolveJsonModule": true,
+        "isolatedModules": true,
+        "noEmit": false,
+        "jsx": "react-jsx",
+        "downlevelIteration": true,
+        "declaration": true,
+        "declarationDir": "./types",
+        "outDir": "./types"
+    },
+    "files": [
+        "./types/global.ts",
+        "./types/index.ts",
+    ],
+}

package/tsconfig.app.json

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

package/tsconfig.json

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

package/tsconfig.node.json

@@ -0,0 +1,24 @@
+{
+  "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,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}

package/vite.config.ts

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