@julseb-lib/react 0.0.51 → 0.0.53

package/src/components/ComponentPreview.tsx

@@ -1,47 +0,0 @@
-/*=============================================== ComponentPreview ===============================================*/
-
-import type { FC, ForwardRefExoticComponent, RefAttributes } from "react"
-import { Flexbox, Text } from "../lib"
-
-interface IComponentPreviewContent {
-    component: FC | ForwardRefExoticComponent<any & RefAttributes<any>> | null
-    props?: any
-    demo?: JSX.Element
-}
-
-const ComponentPreviewContent = ({
-    component,
-    props,
-    demo,
-}: IComponentPreviewContent) => {
-    const Component = component as any
-
-    if (demo) return demo
-    if (props) return <Component {...props} />
-
-    return null
-}
-
-interface IComponentPreview extends IComponentPreviewContent {
-    previewTitle?: string
-    noStretch?: boolean
-}
-
-export const ComponentPreview = ({
-    previewTitle,
-    noStretch,
-    ...rest
-}: IComponentPreview) => {
-    return previewTitle ? (
-        <Flexbox
-            flexDirection="column"
-            gap="s"
-            alignItems={noStretch ? "flex-start" : "stretch"}
-        >
-            <Text tag="h4">{previewTitle}</Text>
-            <ComponentPreviewContent {...rest} />
-        </Flexbox>
-    ) : (
-        <ComponentPreviewContent {...rest} />
-    )
-}

package/src/components/CoverLayout.tsx

@@ -1,99 +0,0 @@
-/*=============================================== CoverLayout ===============================================*/
-
-import { BasePage } from "./"
-import { Text, Wrapper, Main } from "../lib"
-
-export const CoverLayout = ({ title, children }: ICoverLayout) => {
-    return (
-        <BasePage title={title}>
-            {children}
-
-            <Wrapper backgroundColor="white">
-                <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>
-                </Main>
-            </Wrapper>
-        </BasePage>
-    )
-}
-
-interface ICoverLayout {
-    title: string
-    children?: any
-}

package/src/components/DemoContainerStyles.tsx

@@ -1,19 +0,0 @@
-/*=============================================== DemoContainerStyles ===============================================*/
-
-import styled from "styled-components"
-import { setDefaultTheme, Wrapper, Main, Aside } from "../lib"
-
-const StyledWrapper = styled(Wrapper)`
-    background-color: ${({ theme }) => theme.WARNING_100};
-`
-
-const StyledMain = styled(Main)`
-    background-color: ${({ theme }) => theme.DANGER_100};
-` as typeof Main
-
-const StyledAside = styled(Aside)`
-    background-color: ${({ theme }) => theme.DANGER_100};
-`
-setDefaultTheme([StyledWrapper, StyledMain, StyledAside])
-
-export { StyledWrapper, StyledMain, StyledAside }

package/src/components/GridItem.tsx

@@ -1,19 +0,0 @@
-/*=============================================== GridItem ===============================================*/
-
-import styled from "styled-components"
-import { Text, RADIUSES, SPACERS } from "../lib"
-
-interface GridItemProps {
-    children?: string
-}
-
-export const GridItem = ({ children = "Grid item" }: GridItemProps) => {
-    return <StyledText>{children}</StyledText>
-}
-
-const StyledText = styled(Text)`
-    background-color: ${({ theme }) => theme.PRIMARY_500};
-    border-radius: ${RADIUSES.M};
-    color: ${({ theme }) => theme.WHITE};
-    padding: ${SPACERS.S};
-`

package/src/components/NavDemo/NavDemo.tsx

@@ -1,48 +0,0 @@
-/*=============================================== NavDemo ===============================================*/
-
-import { useState, useRef } from "react"
-import { NavLink } from "react-router-dom"
-import { toTitleCase } from "@julseb-lib/utils"
-import { useLibTheme, useKeyPress, Button, Input } from "../../lib"
-import { routesPaths } from "../../routes"
-import { componentPaths } from "../../data/components"
-import { StyledNavDemo } from "./styles"
-
-export const NavDemo = () => {
-    const { toggleTheme, selectedTheme } = useLibTheme()
-
-    const [search, setSearch] = useState("")
-
-    const filteredRoutes: Array<{ path: string }> = [
-        ...routesPaths,
-        ...componentPaths,
-    ].filter(route => route.path.toLowerCase().includes(search.toLowerCase()))
-
-    const el = useRef<HTMLInputElement>(null)
-    useKeyPress(["Command", "KeyK"], () => el?.current?.focus())
-
-    return (
-        <StyledNavDemo>
-            <Input
-                type="search"
-                value={search}
-                onChange={e => setSearch(e.target.value)}
-                placeholder="Search"
-                ref={el}
-                clearSearch={() => setSearch("")}
-            />
-
-            <Button onClick={toggleTheme}>Theme: {selectedTheme}</Button>
-
-            {filteredRoutes?.map(r => (
-                <NavLink to={r.path} key={r.path}>
-                    {r.path === "/"
-                        ? "Homepage"
-                        : toTitleCase(
-                              r.path.replaceAll("/", "").replaceAll("-", " ")
-                          )}
-                </NavLink>
-            ))}
-        </StyledNavDemo>
-    )
-}

package/src/components/NavDemo/index.ts

@@ -1,3 +0,0 @@
-/*=============================================== NavDemo exports ===============================================*/
-
-export * from "./NavDemo"

package/src/components/NavDemo/styles.tsx

@@ -1,49 +0,0 @@
-/*=============================================== NavDemo styles ===============================================*/
-
-import styled from "styled-components"
-import { Mixins, SPACERS, TRANSITIONS, MEDIA, setDefaultTheme } from "../../lib"
-
-export const NAV_WIDTH = 200 as const
-
-const StyledNavDemo = styled.nav`
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: ${NAV_WIDTH}px;
-    height: 100vh;
-    overflow-y: scroll;
-    background-color: ${({ theme }) => theme.PRIMARY_500};
-    padding: ${SPACERS.S};
-    ${Mixins.Grid({
-        $col: 1,
-        $gap: "xs",
-        $alignItems: "start",
-        $alignContent: "start",
-    })}
-
-    a {
-        color: ${({ theme }) => Mixins.ColorsHoverDefault("background", theme)};
-        text-decoration: none;
-        transition: ${TRANSITIONS.SHORT};
-
-        @media ${MEDIA.HOVER} {
-            &:hover {
-                color: ${({ theme }) =>
-                    Mixins.ColorsHoverHover("background", theme)};
-            }
-
-            &:active {
-                color: ${({ theme }) =>
-                    Mixins.ColorsHoverActive("background", theme)};
-            }
-        }
-
-        &.active {
-            text-decoration: underline;
-        }
-    }
-`
-
-setDefaultTheme([StyledNavDemo])
-
-export { StyledNavDemo }

package/src/components/Page.tsx

@@ -1,23 +0,0 @@
-/*=============================================== Page ===============================================*/
-
-import { BasePage, type BasePageProps } from "./BasePage"
-import { NavDemo } from "./NavDemo"
-import { WrapperDemo } from "./layouts/WrapperDemo"
-import { MainDemo } from "./layouts/MainDemo"
-import { Text } from "../lib"
-
-export const Page = ({ title, children }: BasePageProps) => {
-    return (
-        <BasePage title={title}>
-            <NavDemo />
-
-            <WrapperDemo>
-                <MainDemo>
-                    <Text tag="h1">{title}</Text>
-
-                    {children}
-                </MainDemo>
-            </WrapperDemo>
-        </BasePage>
-    )
-}

package/src/components/ResetScroll.tsx

@@ -1,18 +0,0 @@
-/*=============================================== ResetScroll ===============================================*/
-
-import { useEffect } from "react"
-import { useLocation } from "react-router-dom"
-
-export const ResetScroll = () => {
-    const { pathname, search } = useLocation()
-
-    useEffect(() => {
-        document.documentElement.scrollTo({
-            top: 0,
-            left: 0,
-            behavior: "instant",
-        })
-    }, [pathname, search])
-
-    return null
-}

package/src/components/SbDemoLayout.tsx

@@ -1,30 +0,0 @@
-/*=============================================== SbDemoLayout ===============================================*/
-
-import styled from "styled-components"
-import { Text } from "../lib"
-import type { ReactChildren } from "../lib/types"
-
-interface SbDemoLayoutProps {
-    title: string
-    children?: ReactChildren
-}
-
-export const SbDemoLayout = ({ title, children }: SbDemoLayoutProps) => {
-    return (
-        <Wrapper>
-            <Main>
-                <Text tag="h1">{title}</Text>
-                {children}
-            </Main>
-        </Wrapper>
-    )
-}
-
-const Wrapper = styled.div`
-    padding: 4rem 20px;
-`
-
-const Main = styled.main`
-    max-width: 1000px;
-    margin: 0 auto;
-`

package/src/components/StylesCard/StylesCard.tsx

@@ -1,50 +0,0 @@
-/*=============================================== StylesCard ===============================================*/
-
-import { capitalize } from "@julseb-lib/utils"
-import { Text } from "../../lib"
-import { StyledStylesCard, Square, Content } from "./styles"
-import type { StylesCardProps } from "./types"
-
-type Item = {
-    name: string
-    value: string
-}
-
-export const StylesCard = ({
-    variable: { name, variable, css, value },
-    type,
-}: StylesCardProps) => {
-    const items: Array<Item> = [
-        {
-            name: "Variable",
-            value: variable,
-        },
-        {
-            name: "CSS",
-            value: css,
-        },
-        {
-            name: "Value",
-            value: value.toString(),
-        },
-    ]
-
-    return (
-        <StyledStylesCard>
-            <Square $css={css} $type={type} />
-
-            <Content>
-                <Text tag="h5">
-                    {capitalize(type)} {name}
-                </Text>
-
-                {items.map(({ name, value }) => (
-                    <Text key={name}>
-                        <Text tag="strong">{name}: </Text>
-                        {value}
-                    </Text>
-                ))}
-            </Content>
-        </StyledStylesCard>
-    )
-}

package/src/components/StylesCard/index.ts

@@ -1,3 +0,0 @@
-/*=============================================== StylesCard exports ===============================================*/
-
-export * from "./StylesCard"

package/src/components/StylesCard/styles.tsx

@@ -1,54 +0,0 @@
-/*=============================================== StylesCard styles ===============================================*/
-
-import styled, { css } from "styled-components"
-import { Mixins, SPACERS, setDefaultTheme } from "../../lib"
-import { BaseCard } from "../BaseCard"
-import type { CardType } from "./types"
-
-const StyledStylesCard = styled(BaseCard)`
-    flex-direction: column;
-    gap: ${SPACERS.XS};
-`
-
-const SQUARE_SIZE = 150
-
-const Square = styled.span<{ $css: string; $type: CardType }>`
-    width: ${SQUARE_SIZE}px;
-    height: ${SQUARE_SIZE}px;
-    display: block;
-
-    ${({ $type, $css }) =>
-        $type === "shadow" &&
-        css`
-            background-color: ${({ theme }) => theme.BACKGROUND};
-            box-shadow: ${$css};
-        `}
-
-    ${({ $type, $css }) =>
-        $type === "radius" &&
-        css`
-            background-color: ${({ theme }) => theme.DANGER_100};
-            border-radius: ${$css};
-            width: ${$css === "var(--radius-round)" && "100%"};
-        `}
-
-    ${({ $type, $css }) =>
-        $type === "spacer" &&
-        css`
-            width: ${$css};
-            height: ${$css};
-            background-color: ${({ theme }) => theme.DANGER_100};
-        `}
-`
-
-const Content = styled.div`
-    width: 100%;
-    ${Mixins.Flexbox({
-        $flexDirection: "column",
-        $alignItems: "stretch",
-    })}
-`
-
-setDefaultTheme([StyledStylesCard, Square, Content])
-
-export { StyledStylesCard, Square, Content }

package/src/components/StylesCard/types.ts

@@ -1,16 +0,0 @@
-/*=============================================== StylesCard types ===============================================*/
-
-import type { Variable } from "../../data/types"
-
-// eslint-disable-next-line
-const cardTypes = {
-    shadow: "shadow",
-    spacer: "spacer",
-    radius: "radius",
-} as const
-export type CardType = keyof typeof cardTypes
-
-export interface StylesCardProps {
-    variable: Variable
-    type: CardType
-}

package/src/components/index.ts

@@ -1,12 +0,0 @@
-/*=============================================== Exports ===============================================*/
-
-export * from "./BasePage"
-export * from "./Page"
-export * from "./ColorCard"
-export * from "./StylesCard"
-export * from "./DemoContainerStyles"
-export * from "./GridItem"
-export * from "./SbDemoLayout"
-export * from "./ResetScroll"
-export * from "./ComponentPreview"
-export * from "./CoverLayout"

package/src/components/layouts/MainDemo.tsx

@@ -1,16 +0,0 @@
-/*=============================================== MainDemo ===============================================*/
-
-import styled from "styled-components"
-import { LAYOUTS, Mixins, SPACERS } from "../../lib"
-
-export const MainDemo = styled.main`
-    width: 100%;
-    max-width: ${LAYOUTS.MAIN_LARGE};
-    padding: ${SPACERS.XXL} 0;
-    ${Mixins.Flexbox({
-        $flexDirection: "column",
-        $alignItems: "flex-start",
-        $gap: "l",
-    })}
-    ${Mixins.StretchTags};
-`

package/src/components/layouts/WrapperDemo.tsx

@@ -1,14 +0,0 @@
-/*=============================================== WrapperDemo ===============================================*/
-
-import styled from "styled-components"
-import { NAV_WIDTH } from "../NavDemo/styles"
-import { Mixins } from "../../lib"
-
-export const WrapperDemo = styled.div`
-    width: calc(100% - ${NAV_WIDTH}px);
-    position: relative;
-    left: ${NAV_WIDTH}px;
-    ${Mixins.Flexbox({
-        $justifyContent: "center",
-    })}
-`