@julseb-lib/react 0.0.51 → 0.0.52

package/src/pages/GenerateOLD.tsx

@@ -1,204 +0,0 @@
-/*=============================================== Generate ===============================================*/
-
-import type { FC } from "react"
-import { Page } from "../components"
-import {} from "../lib"
-import { typeValues } from "../lib/types"
-
-export const Generate: FC = () => {
-    const propsDoc = replaceTypes([
-        "title: string",
-        "icon?: LibAccordionIcon",
-        "variant?: LibAccordionVariant",
-        "defaultOpen?: boolean",
-    ])
-    // const typeValuesArr = Object.keys(typeValues.spacers)
-
-    // const tests = [
-    //     "testid.Button.Minus",
-    //     "testid.Button.Minus.Icon",
-    //     "testid.Input",
-    //     "testid.Button.Plus",
-    //     "testid.Button.Plus.Icon",
-    // ]
-
-    // const inputSliderShowValues = {
-    //     never: "never",
-    //     hover: "hover",
-    //     always: "always",
-    // }
-
-    return (
-        <Page title="Generate">
-            <ul>
-                {propsDoc.map(p => (
-                    <li key={p}>{` * @prop ${p}`}</li>
-                ))}
-            </ul>
-
-            {/* <ul>
-                {tests.map(t => (
-                    <li key={t}>
-                        cy.dataTest("{t}").should("exist").should("have.class",
-                        "{t.replaceAll("testid.", "").replaceAll(".", "__")}")
-                    </li>
-                ))}
-            </ul>
-
-            
-
-            <p>{Object.keys(inputSliderShowValues).map(i => `"${i}" | `)}</p> */}
-
-            {/* <p>
-                {Object.keys(inputTypes).map(i => (
-                    <>"{i}" | </>
-                ))}
-            </p>
-
-            <ul>
-                {itemProps.map(p => (
-                    <li key={p}>{p.split("=")[0]},</li>
-                ))}
-            </ul> */}
-
-            {/* <ul>
-                {fontSizes.map(size => (
-                    <li key={size}>{`["${size}", getSize("${size}")],`}</li>
-                ))}
-            </ul> */}
-
-            {/* <ul>
-                {inputTypes.map(i => (
-                    <li key={i}>{`${i}: "${i}",`}</li>
-                ))}
-            </ul> */}
-
-            {/* <ul>
-                {inputs.map(i => {
-                    const type = i.replaceAll("Input", "").toLowerCase()
-
-                    return (
-                        <li
-                            key={i}
-                        >{`if (type === "${type}") return <${i} ref={ref} {...rest} />`}</li>
-                    )
-                })}
-            </ul>
-
-            <ul>
-                {propsDoc.map(prop => {
-                    return <li key={prop}>${prop}</li>
-                })}
-            </ul>
-
-            <ul>
-                {propsDoc.map(p => {
-                    const prop = p.split(":")[0].replace("?", "")
-
-                    return (
-                        <li key={p}>{`$${prop.split(":")[0]}={${prop.replace(
-                            "$",
-                            ""
-                        )}}`}</li>
-                    )
-                })}
-            </ul>
-            <ul>
-                {propsDoc.map(a => (
-                    <li key={a}>
-                        {a.split(":")[0].replace("$", "").replace("?", "")},
-                    </li>
-                ))}
-            </ul>
-
-            <ul>
-                {propsDoc.map(p => (
-                    <li key={p}>
-                        {" "}
-                        * @prop{" "}
-                        {p.replaceAll("LibIcon", "string | JSX.Element")}
-                    </li>
-                ))}
-            </ul> */}
-
-            {/* <p>{typeValuesArr.map(t => `"${t}" | `)}</p> */}
-        </Page>
-    )
-}
-
-const replaceTypes = (arr: Array<string>) => {
-    const mappedRadiuses = Object.keys(typeValues.radiuses)
-        .map(r => `"${r}"`)
-        .join(" | ")
-    const mappedSpacers = Object.keys(typeValues.spacers)
-        .map(s => `"${s}"`)
-        .join(" | ")
-    const mappedColorsShort = Object.keys(typeValues.colorsShort)
-        .map(c => `"${c}"`)
-        .join(" | ")
-    const mappedAccordionIcons = Object.keys(typeValues.accordionIcons)
-        .map(i => `"${i}"`)
-        .join(" | ")
-    const mappedAccordionVariants = Object.keys(typeValues.accordionVariants)
-        .map(v => `"${v}"`)
-        .join(" | ")
-    const mappedAsideSizes = Object.keys(typeValues.asideSizes)
-        .map(s => `"${s}"`)
-        .join(" | ")
-    const allColorsDesc = "Any color from the library"
-
-    return arr.map(str => {
-        if (str.includes("DispatchState")) {
-            const prop = str.split(":")[0]
-
-            const type = str
-                .split(":")[1]
-                .replace("DispatchState<", "")
-                .replace(">", "")
-
-            return `${prop}: Dispatch<SetStateAction<${type}>>`
-        }
-
-        return str
-            .replaceAll("LibSpacers", mappedSpacers)
-            .replaceAll("LibColorsShort", mappedColorsShort)
-            .replaceAll("LibAllColors", allColorsDesc)
-            .replaceAll(
-                "ILibPadding",
-                `${mappedSpacers} | { left?: LibSpacers | "auto"; top?: LibSpacers | "auto"; right?: LibSpacers | "auto"; bottom?: LibSpacers | "auto"; leftRight?: LibSpacers | "auto"; topBottom?: LibSpacers | "auto" }`
-            )
-            .replaceAll(
-                "ILibRadius",
-                `${mappedRadiuses} | number | null | { topLeft?: LibRadiuses | number | null; topRight?: LibRadiuses | number | null; bottomLeft?: LibRadiuses | number | null; bottomRight?: LibRadiuses | number | null }`
-            )
-            .replaceAll(
-                "ILibBorder",
-                `{ style?: CssBorderStyle; width?: ${mappedSpacers}; color?: ${allColorsDesc} }`
-            )
-            .replaceAll(
-                "LibAccordionIcon",
-                `${mappedAccordionIcons} | JSX.Element`
-            )
-            .replaceAll("LibAccordionVariant", mappedAccordionVariants)
-            .replaceAll("LibAsideSize", `${mappedAsideSizes} | number`)
-            .replaceAll(
-                "LibAccordionItem",
-                '{ "data-testid"?: string; className?: string; title: string; content?: string | ReactChildren; defaultOpen?: boolean; ref?: ForwardedRef<HTMLDivElement> }'
-            )
-    })
-}
-
-// function getTypeDispatch(str: string): string {
-//     if (str.includes("DispatchState")) {
-//         const prop = str.split(":")[0]
-
-//         const type = str
-//             .split(":")[1]
-//             .replace("DispatchState<", "")
-//             .replace(">", "")
-
-//         return `${prop}: Dispatch<SetStateAction<${type}>>`
-//     }
-
-//     return str
-// }

package/src/pages/Homepage.tsx

@@ -1,8 +0,0 @@
-/*=============================================== Homepage ===============================================*/
-
-import type { FC } from "react"
-import { Page } from "../components"
-
-export const Homepage: FC = () => {
-    return <Page title="Homepage" />
-}

package/src/pages/components/ComponentPage.tsx

@@ -1,46 +0,0 @@
-/*=============================================== ComponentPage ===============================================*/
-
-import { useParams } from "react-router-dom"
-import { toKebabCase, toTitleCase } from "@julseb-lib/utils"
-import { Page, ComponentPreview } from "../../components"
-import { NotFoundPage } from "../404"
-import { previews } from "../../data/components"
-
-export const ComponentPage = () => {
-    const { componentName } = useParams<{ componentName: string }>()
-
-    const componentPreview = previews.find(
-        demo => toKebabCase(demo.name) === toKebabCase(componentName || "")
-    )
-
-    if (!componentPreview) return <NotFoundPage />
-
-    const {
-        name,
-        component,
-        previews: componentPreviews,
-        noStretch,
-    } = componentPreview
-
-    return (
-        <Page title={pascalToTitle(name)}>
-            {componentPreviews?.map((preview, i) => (
-                <ComponentPreview
-                    key={i}
-                    component={component}
-                    noStretch={noStretch}
-                    {...preview}
-                />
-            ))}
-        </Page>
-    )
-}
-
-function pascalToTitle(str: string) {
-    const splitted = str
-        .split(/\.?(?=[A-Z])/)
-        .join(" ")
-        .toLowerCase()
-
-    return toTitleCase(splitted)
-}

package/src/pages/demos/BackToTopDemo.tsx

@@ -1,176 +0,0 @@
-/*=============================================== BackToTopDemo ===============================================*/
-
-import { BasePage } from "../../components"
-import { Text, Wrapper, Main, BackToTop } from "../../lib"
-
-export const BackToTopDemo = () => {
-    return (
-        <BasePage title="Back to top demo">
-            <Wrapper>
-                <Main>
-                    <Text>
-                        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-                        Aenean tempus mi augue. Aenean iaculis dolor purus. Orci
-                        varius natoque penatibus et magnis dis parturient
-                        montes, nascetur ridiculus mus. Quisque lectus risus,
-                        luctus at luctus eget, gravida vitae odio. Aliquam
-                        commodo fermentum odio at egestas. Sed rutrum commodo
-                        auctor. Sed eu ullamcorper mi, accumsan lacinia urna.
-                        Duis non placerat urna. Suspendisse vel mi eros. Mauris
-                        rutrum sit amet erat at volutpat. In facilisis molestie
-                        gravida. Nullam lorem nisi, porta vel arcu nec, cursus
-                        sagittis nisl. Etiam consequat sed urna eu tincidunt.
-                        Cras sit amet justo eget est vestibulum aliquet et vitae
-                        elit.
-                    </Text>
-
-                    <Text>
-                        Nunc fermentum egestas orci. Aenean vehicula massa a
-                        lectus imperdiet sodales. Integer finibus mauris dolor,
-                        non aliquam lectus dignissim et. Ut bibendum augue nec
-                        mattis consectetur. Vestibulum interdum leo vel tellus
-                        fringilla bibendum quis ut tellus. Curabitur lacus diam,
-                        condimentum a ullamcorper nec, facilisis faucibus nisl.
-                        Quisque euismod massa et erat mollis auctor. Sed aliquet
-                        elit enim, in dictum eros fringilla vitae. Nulla laoreet
-                        felis leo, eget faucibus tellus tincidunt vel. Nam eget
-                        congue felis. Fusce commodo posuere libero, ut
-                        vestibulum sem efficitur et. Maecenas eros neque, auctor
-                        eget odio vitae, molestie cursus dui. Vestibulum dapibus
-                        elit non magna gravida, vel pulvinar dolor tempor. Nunc
-                        vehicula sem orci, vel tempor mauris accumsan vitae.
-                        Praesent at scelerisque elit.
-                    </Text>
-
-                    <Text>
-                        Donec ultrices sit amet massa at semper. Cras quam
-                        mauris, tempor a luctus vel, lacinia vel dui. In eget
-                        pellentesque purus. Integer tempus, tortor vitae
-                        malesuada feugiat, velit quam consequat magna, vitae
-                        venenatis risus purus a ante. Class aptent taciti
-                        sociosqu ad litora torquent per conubia nostra, per
-                        inceptos himenaeos. Aenean quis cursus ipsum. Proin
-                        scelerisque metus sed pellentesque viverra. Proin
-                        consequat ante risus, quis euismod metus varius non. Sed
-                        varius tortor sed nunc pulvinar consequat. Etiam tortor
-                        odio, aliquam ac est et, consequat fringilla justo.
-                        Mauris in nibh nec neque blandit pulvinar. Sed dapibus
-                        elit nulla, nec fringilla neque dignissim non. Phasellus
-                        eu facilisis urna. Vivamus feugiat convallis ligula, id
-                        congue tellus tincidunt vitae. Aliquam bibendum sed erat
-                        porta molestie.
-                    </Text>
-
-                    <Text>
-                        Donec non cursus est. Vestibulum ante ipsum primis in
-                        faucibus orci luctus et ultrices posuere cubilia curae;
-                        Proin elementum consectetur orci ac faucibus. Sed
-                        sodales dolor lorem, consectetur sollicitudin nunc
-                        viverra eget. Aliquam eget tortor ultrices neque commodo
-                        bibendum. Mauris tellus lacus, posuere eget tincidunt
-                        ac, maximus sit amet turpis. Donec in quam eget quam
-                        pulvinar feugiat. Morbi ante dolor, rhoncus a pharetra
-                        in, laoreet eget odio. Donec commodo ligula ac gravida
-                        aliquam. Nam ac lorem at turpis facilisis tempus et
-                        egestas libero.
-                    </Text>
-
-                    <Text>
-                        Nulla gravida, quam a ultrices molestie, ante nisl
-                        commodo nibh, eget elementum ligula ex eget ante. Sed
-                        elementum quam nec diam pellentesque vehicula. Phasellus
-                        elementum lacus ligula. Vivamus ornare eros at purus
-                        vehicula, vel pulvinar diam hendrerit. Sed non nulla
-                        fringilla, venenatis dui ut, ultrices nunc. Nam libero
-                        arcu, varius eget lacus sit amet, facilisis ullamcorper
-                        nibh. Duis vel neque tellus.
-                    </Text>
-
-                    <Text>
-                        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-                        Aenean tempus mi augue. Aenean iaculis dolor purus. Orci
-                        varius natoque penatibus et magnis dis parturient
-                        montes, nascetur ridiculus mus. Quisque lectus risus,
-                        luctus at luctus eget, gravida vitae odio. Aliquam
-                        commodo fermentum odio at egestas. Sed rutrum commodo
-                        auctor. Sed eu ullamcorper mi, accumsan lacinia urna.
-                        Duis non placerat urna. Suspendisse vel mi eros. Mauris
-                        rutrum sit amet erat at volutpat. In facilisis molestie
-                        gravida. Nullam lorem nisi, porta vel arcu nec, cursus
-                        sagittis nisl. Etiam consequat sed urna eu tincidunt.
-                        Cras sit amet justo eget est vestibulum aliquet et vitae
-                        elit.
-                    </Text>
-
-                    <Text>
-                        Nunc fermentum egestas orci. Aenean vehicula massa a
-                        lectus imperdiet sodales. Integer finibus mauris dolor,
-                        non aliquam lectus dignissim et. Ut bibendum augue nec
-                        mattis consectetur. Vestibulum interdum leo vel tellus
-                        fringilla bibendum quis ut tellus. Curabitur lacus diam,
-                        condimentum a ullamcorper nec, facilisis faucibus nisl.
-                        Quisque euismod massa et erat mollis auctor. Sed aliquet
-                        elit enim, in dictum eros fringilla vitae. Nulla laoreet
-                        felis leo, eget faucibus tellus tincidunt vel. Nam eget
-                        congue felis. Fusce commodo posuere libero, ut
-                        vestibulum sem efficitur et. Maecenas eros neque, auctor
-                        eget odio vitae, molestie cursus dui. Vestibulum dapibus
-                        elit non magna gravida, vel pulvinar dolor tempor. Nunc
-                        vehicula sem orci, vel tempor mauris accumsan vitae.
-                        Praesent at scelerisque elit.
-                    </Text>
-
-                    <Text>
-                        Donec ultrices sit amet massa at semper. Cras quam
-                        mauris, tempor a luctus vel, lacinia vel dui. In eget
-                        pellentesque purus. Integer tempus, tortor vitae
-                        malesuada feugiat, velit quam consequat magna, vitae
-                        venenatis risus purus a ante. Class aptent taciti
-                        sociosqu ad litora torquent per conubia nostra, per
-                        inceptos himenaeos. Aenean quis cursus ipsum. Proin
-                        scelerisque metus sed pellentesque viverra. Proin
-                        consequat ante risus, quis euismod metus varius non. Sed
-                        varius tortor sed nunc pulvinar consequat. Etiam tortor
-                        odio, aliquam ac est et, consequat fringilla justo.
-                        Mauris in nibh nec neque blandit pulvinar. Sed dapibus
-                        elit nulla, nec fringilla neque dignissim non. Phasellus
-                        eu facilisis urna. Vivamus feugiat convallis ligula, id
-                        congue tellus tincidunt vitae. Aliquam bibendum sed erat
-                        porta molestie.
-                    </Text>
-
-                    <Text>
-                        Donec non cursus est. Vestibulum ante ipsum primis in
-                        faucibus orci luctus et ultrices posuere cubilia curae;
-                        Proin elementum consectetur orci ac faucibus. Sed
-                        sodales dolor lorem, consectetur sollicitudin nunc
-                        viverra eget. Aliquam eget tortor ultrices neque commodo
-                        bibendum. Mauris tellus lacus, posuere eget tincidunt
-                        ac, maximus sit amet turpis. Donec in quam eget quam
-                        pulvinar feugiat. Morbi ante dolor, rhoncus a pharetra
-                        in, laoreet eget odio. Donec commodo ligula ac gravida
-                        aliquam. Nam ac lorem at turpis facilisis tempus et
-                        egestas libero.
-                    </Text>
-
-                    <Text>
-                        Nulla gravida, quam a ultrices molestie, ante nisl
-                        commodo nibh, eget elementum ligula ex eget ante. Sed
-                        elementum quam nec diam pellentesque vehicula. Phasellus
-                        elementum lacus ligula. Vivamus ornare eros at purus
-                        vehicula, vel pulvinar diam hendrerit. Sed non nulla
-                        fringilla, venenatis dui ut, ultrices nunc. Nam libero
-                        arcu, varius eget lacus sit amet, facilisis ullamcorper
-                        nibh. Duis vel neque tellus.
-                    </Text>
-
-                    <BackToTop
-                        tooltip="Back to top"
-                        data-testid="testid"
-                        className="className"
-                    />
-                </Main>
-            </Wrapper>
-        </BasePage>
-    )
-}

package/src/pages/demos/DemoAsideBoth.tsx

@@ -1,37 +0,0 @@
-/*=============================================== DemoAsideBoth ===============================================*/
-
-import { Text } from "../../lib"
-import {
-    BasePage,
-    StyledWrapper,
-    StyledMain,
-    StyledAside,
-} from "../../components"
-
-export const DemoAsideBoth = () => {
-    return (
-        <BasePage title="Demo Aside Both Sides">
-            <StyledWrapper data-testid="testid" className="className">
-                <StyledAside
-                    size={100}
-                    data-testid="testid"
-                    className="className"
-                >
-                    <Text tag="h2">Aside</Text>
-                </StyledAside>
-
-                <StyledMain data-testid="testid" className="className">
-                    <Text tag="h2">Main</Text>
-                </StyledMain>
-
-                <StyledAside
-                    size={100}
-                    data-testid="testid"
-                    className="className"
-                >
-                    <Text tag="h2">Aside</Text>
-                </StyledAside>
-            </StyledWrapper>
-        </BasePage>
-    )
-}

package/src/pages/demos/DemoAsideDefault.tsx

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

package/src/pages/demos/DemoAsideSmall.tsx

@@ -1,29 +0,0 @@
-/*=============================================== DemoAsideSmall ===============================================*/
-
-import { Text } from "../../lib"
-import {
-    BasePage,
-    StyledWrapper,
-    StyledMain,
-    StyledAside,
-} from "../../components"
-
-export const DemoAsideSmall = () => {
-    return (
-        <BasePage title="Demo Aside Small">
-            <StyledWrapper data-testid="testid" className="className">
-                <StyledMain data-testid="testid" className="className">
-                    <Text tag="h2">Main</Text>
-                </StyledMain>
-
-                <StyledAside
-                    size="small"
-                    data-testid="testid"
-                    className="className"
-                >
-                    <Text tag="h2">Aside</Text>
-                </StyledAside>
-            </StyledWrapper>
-        </BasePage>
-    )
-}

package/src/pages/demos/DemoCoverBottom.tsx

@@ -1,27 +0,0 @@
-/*=============================================== DemoCoverBottom ===============================================*/
-
-import { CoverLayout } from "../../components"
-import { Cover, Text } from "../../lib"
-
-export const DemoCoverBottom = () => {
-    return (
-        <CoverLayout title="Cover Bottom">
-            <Cover
-                img="/images/cover-img.avif"
-                alt="Cover"
-                alignItems="flex-start"
-                justifyContent="flex-end"
-                height="70vh"
-                data-testid="testid"
-                className="className"
-            >
-                <Text tag="h1" display>
-                    Title
-                </Text>
-                <Text tag="h2" display>
-                    Subtitle
-                </Text>
-            </Cover>
-        </CoverLayout>
-    )
-}

package/src/pages/demos/DemoCoverBottomOverlay.tsx

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

package/src/pages/demos/DemoCoverCenter.tsx

@@ -1,27 +0,0 @@
-/*=============================================== DemoCoverCenter ===============================================*/
-
-import React from "react"
-import { CoverLayout } from "../../components"
-import { Cover, Text } from "../../lib"
-
-export const DemoCoverCenter = () => {
-    return (
-        <CoverLayout title="Cover Center">
-            <Cover
-                img="/images/cover-img.avif"
-                alt="Cover"
-                alignItems="center"
-                justifyContent="center"
-                data-testid="testid"
-                className="className"
-            >
-                <Text tag="h1" display>
-                    Title
-                </Text>
-                <Text tag="h2" display>
-                    Subtitle
-                </Text>
-            </Cover>
-        </CoverLayout>
-    )
-}

package/src/pages/demos/DemoCoverCenterOverlay.tsx

@@ -1,28 +0,0 @@
-/*=============================================== DemoCoverCenterOverlay ===============================================*/
-
-import { CoverLayout } from "../../components"
-import { Cover, Text } from "../../lib"
-
-export const DemoCoverCenterOverlay = () => {
-    return (
-        <CoverLayout title="Cover Center Overlay">
-            <Cover
-                img="/images/cover-img.avif"
-                alt="Cover"
-                alignItems="center"
-                justifyContent="center"
-                overlay="black-80"
-                padding="xs"
-                data-testid="testid"
-                className="className"
-            >
-                <Text tag="h1" display>
-                    Title
-                </Text>
-                <Text tag="h2" display>
-                    Subtitle
-                </Text>
-            </Cover>
-        </CoverLayout>
-    )
-}