@julseb-lib/react 0.0.51 → 0.0.52

package/src/pages/demos/DemoHeader.tsx

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

@@ -1,16 +0,0 @@
-/*=============================================== 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

@@ -1,20 +0,0 @@
-/*=============================================== 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

@@ -1,126 +0,0 @@
-/*=============================================== 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

@@ -1,21 +0,0 @@
-/*=============================================== 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

@@ -1,21 +0,0 @@
-/*=============================================== 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

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

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

@@ -1,91 +0,0 @@
-/*=============================================== 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

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

package/tsconfig-types.json

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

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

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

package/tsconfig.node.json

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

package/vite.config.ts

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