@julseb-lib/react 0.0.51 → 0.0.52

package/src/lib/components/Loader/styles.tsx

@@ -1,140 +0,0 @@
-/*=============================================== Loader styles ===============================================*/
-
-import styled, { css, keyframes } from "styled-components"
-import { stringifyPx } from "@julseb-lib/utils"
-import { Mixins, RADIUSES, setDefaultTheme } from "../../"
-import type { LibAllColors } from "../../types"
-
-type LoaderStyle = {
-    $size?: number
-    $color: LibAllColors
-    $borderWidth?: number
-}
-
-const Common = ({ $size }: { $size?: number }) => css`
-    width: ${$size && stringifyPx($size)};
-    height: ${$size && stringifyPx($size)};
-    position: relative;
-`
-
-const Spin = keyframes`
-    0% {
-        transform: rotate(0deg);
-    }
-
-    100% {
-        transform: rotate(360deg);
-    }
-`
-
-const LOADER_SPIN_ANIMATION = (
-    timingFunction: "linear" | "cubic-bezier(0.5, 0, 0.5, 1)" = "linear"
-) => css`
-    animation: ${Spin} 1200ms ${timingFunction} infinite;
-`
-
-const StyledLoaderOne = styled.span<LoaderStyle>`
-    ${Common};
-    display: inline-block;
-    border-radius: ${RADIUSES.CIRCLE};
-    border: ${({ $borderWidth }) => $borderWidth}px solid transparent;
-    border-bottom-color: ${({ $color, theme }) =>
-        Mixins.AllColors($color, theme)};
-    ${LOADER_SPIN_ANIMATION()}
-`
-
-const StyledLoaderTwo = styled.span<LoaderStyle>`
-    ${Common};
-    display: inline-block;
-    border-radius: ${RADIUSES.CIRCLE};
-    border: ${({ $borderWidth }) => $borderWidth}px solid transparent;
-    border-top-color: ${({ $color, theme }) => Mixins.AllColors($color, theme)};
-    border-bottom-color: ${({ $color, theme }) =>
-        Mixins.AllColors($color, theme)};
-    ${LOADER_SPIN_ANIMATION()}
-`
-
-const StyledLoaderThree = styled.span<LoaderStyle>`
-    ${Common};
-    display: inline-block;
-
-    span {
-        display: block;
-        position: absolute;
-        width: 100%;
-        height: 100%;
-        border: ${({ $borderWidth }) => $borderWidth}px solid transparent;
-        border-top-color: ${({ $color, theme }) =>
-            Mixins.AllColors($color, theme)};
-        border-radius: ${RADIUSES.CIRCLE};
-        ${LOADER_SPIN_ANIMATION("cubic-bezier(0.5, 0, 0.5, 1)")}
-
-        &:first-child {
-            animation-delay: -450ms;
-        }
-
-        &:nth-child(2) {
-            animation-delay: -300ms;
-        }
-
-        &:last-child {
-            animation-delay: -150ms;
-        }
-    }
-`
-
-const Flash = keyframes`
-    0% {
-        opacity: 1;
-    }
-
-    50%, 100% {
-        opacity: 0.5;
-    }
-`
-
-const DURATION_LOADER_FOUR = "1000ms" as const
-
-const StyledLoaderFour = styled.span<Omit<LoaderStyle, "$borderWidth">>`
-    ${Common};
-    ${Mixins.Flexbox({
-        $inline: true,
-        $alignItems: "center",
-        $justifyContent: "center",
-        $gap: "xxs",
-    })}
-
-    span {
-        aspect-ratio: 1;
-        flex-grow: 1;
-        display: inline-block;
-        border-radius: ${RADIUSES.CIRCLE};
-        background-color: ${({ $color, theme }) =>
-            Mixins.AllColors($color, theme)};
-
-        &:first-child {
-            animation: ${Flash} ${DURATION_LOADER_FOUR} infinite alternate;
-            animation-delay: 0;
-        }
-
-        &:nth-child(2) {
-            animation: ${Flash} ${DURATION_LOADER_FOUR} infinite linear
-                alternate;
-            animation-delay: 250ms;
-        }
-
-        &:last-child {
-            animation: ${Flash} ${DURATION_LOADER_FOUR} infinite alternate;
-            animation-delay: 500ms;
-        }
-    }
-`
-
-setDefaultTheme([
-    StyledLoaderOne,
-    StyledLoaderTwo,
-    StyledLoaderThree,
-    StyledLoaderFour,
-])
-
-export { StyledLoaderOne, StyledLoaderTwo, StyledLoaderThree, StyledLoaderFour }

package/src/lib/components/Loader/templates/LoaderFour.tsx

@@ -1,24 +0,0 @@
-/*=============================================== LoaderFour ===============================================*/
-
-import { forwardRef } from "react"
-import { StyledLoaderFour } from "../styles"
-import type { ILibLoader } from "../types"
-
-export const LoaderFour = forwardRef<HTMLSpanElement, ILibLoader>(
-    ({ "data-testid": testid, as, size, color, ...rest }, ref) => {
-        return (
-            <StyledLoaderFour
-                data-testid={testid}
-                ref={ref}
-                as={as}
-                $size={size}
-                $color={color}
-                {...rest}
-            >
-                <span />
-                <span />
-                <span />
-            </StyledLoaderFour>
-        )
-    }
-)

package/src/lib/components/Loader/templates/LoaderOne.tsx

@@ -1,24 +0,0 @@
-/*=============================================== LoaderOne ===============================================*/
-
-import { forwardRef } from "react"
-import { StyledLoaderOne } from "../styles"
-import type { ILibLoader } from "../types"
-
-export const LoaderOne = forwardRef<HTMLSpanElement, ILibLoader>(
-    (
-        { "data-testid": testid, as, size, color, borderWidth = 8, ...rest },
-        ref
-    ) => {
-        return (
-            <StyledLoaderOne
-                data-testid={testid}
-                ref={ref}
-                as={as}
-                $size={size}
-                $color={color}
-                $borderWidth={borderWidth}
-                {...rest}
-            />
-        )
-    }
-)

package/src/lib/components/Loader/templates/LoaderThree.tsx

@@ -1,29 +0,0 @@
-/*=============================================== LoaderThree ===============================================*/
-
-import { forwardRef } from "react"
-import { StyledLoaderThree } from "../styles"
-import type { ILibLoader } from "../types"
-
-export const LoaderThree = forwardRef<HTMLSpanElement, ILibLoader>(
-    (
-        { "data-testid": testid, as, size, color, borderWidth = 8, ...rest },
-        ref
-    ) => {
-        return (
-            <StyledLoaderThree
-                data-testid={testid}
-                ref={ref}
-                as={as}
-                $size={size}
-                $color={color}
-                $borderWidth={borderWidth}
-                {...rest}
-            >
-                <span />
-                <span />
-                <span />
-                <span />
-            </StyledLoaderThree>
-        )
-    }
-)

package/src/lib/components/Loader/templates/LoaderTwo.tsx

@@ -1,24 +0,0 @@
-/*=============================================== LoaderTwo ===============================================*/
-
-import { forwardRef } from "react"
-import { StyledLoaderTwo } from "../styles"
-import type { ILibLoader } from "../types"
-
-export const LoaderTwo = forwardRef<HTMLSpanElement, ILibLoader>(
-    (
-        { "data-testid": testid, as, size, color, borderWidth = 8, ...rest },
-        ref
-    ) => {
-        return (
-            <StyledLoaderTwo
-                data-testid={testid}
-                ref={ref}
-                as={as}
-                $size={size}
-                $color={color}
-                $borderWidth={borderWidth}
-                {...rest}
-            />
-        )
-    }
-)

package/src/lib/components/Loader/types.ts

@@ -1,25 +0,0 @@
-/*=============================================== Loader types ===============================================*/
-
-import type {
-    LibAllColors,
-    LibComponentBase,
-    LibLoaderVariant,
-} from "../../types"
-
-interface ILibLoaderBase extends LibComponentBase<HTMLSpanElement> {
-    size?: number
-    color?: LibAllColors
-    children?: never
-}
-
-interface LoaderWithBorder extends ILibLoaderBase {
-    variant?: Exclude<LibLoaderVariant, 4>
-    borderWidth?: number
-}
-
-interface LoaderWithDots extends ILibLoaderBase {
-    variant?: Extract<LibLoaderVariant, 4>
-    borderWidth?: never
-}
-
-export type ILibLoader = LoaderWithBorder | LoaderWithDots

package/src/lib/components/Main/Main.tsx

@@ -1,45 +0,0 @@
-/*=============================================== Main component ===============================================*/
-
-import { forwardRef } from "react"
-import { StyledMain } from "./styles"
-import type { ILibMain } from "./types"
-
-/**
- * @description Returns a Main component
- * @link https://documentation-components-react.vercel.app/layouts/container
- * @extends HTMLDivElement
- * @prop data-testid?: string
- * @prop as?: ElementType
- * @prop ref?: ForwardedRef<HTMLDivElement>
- * @prop minHeight?: string | number
- * @prop size?: "default" | "large" | "form" | "full" | number
- * @prop contentSize?: "default" | "large" | "form" | number => only if size is set to full
- */
-export const Main = forwardRef<HTMLDivElement, ILibMain>(
-    (
-        {
-            "data-testid": testid,
-            as,
-            children,
-            size,
-            contentSize,
-            minHeight = "100vh",
-            ...rest
-        },
-        ref
-    ) => {
-        return (
-            <StyledMain
-                data-testid={testid}
-                ref={ref}
-                as={as}
-                $size={size}
-                $contentSize={contentSize}
-                $minHeight={minHeight}
-                {...rest}
-            >
-                {children}
-            </StyledMain>
-        )
-    }
-)

package/src/lib/components/Main/__preview__/Main.preview.tsx

@@ -1,33 +0,0 @@
-/*=============================================== MainPreview ===============================================*/
-
-import { Main } from "../../../"
-import { ContainerPreview } from "../../../../data/previews/layouts/Container.preview"
-import type { ILibMain } from "../../../types/components-props"
-import type { ComponentPreview } from "../../../../data/components"
-
-export const mainPreview: ComponentPreview<ILibMain> = {
-    name: "Main",
-    component: Main,
-    category: "components",
-    import: "Main",
-    additionalImports: null,
-    optionalImports: null,
-    propsImport: "ILibMain",
-    additionalTypeImports: null,
-    extends: ["HTMLDivElement"],
-    previews: [
-        {
-            demo: (
-                <ContainerPreview
-                    demos={[
-                        "main-default",
-                        "main-large",
-                        "main-form",
-                        "main-number",
-                        "main-full",
-                    ]}
-                />
-            ),
-        },
-    ],
-}

package/src/lib/components/Main/index.ts

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

package/src/lib/components/Main/styles.tsx

@@ -1,61 +0,0 @@
-/*=============================================== Main styles ===============================================*/
-
-import styled, { css } from "styled-components"
-import { stringifyPx } from "@julseb-lib/utils"
-import { setDefaultTheme, Mixins, MEDIA, SPACERS, LAYOUTS } from "../../"
-import type { LibMainSize } from "../../types"
-
-const getMainSize = (size: LibMainSize) => {
-    if (typeof size === "number") return stringifyPx(size)
-
-    const sizesMap = new Map<LibMainSize, LAYOUTS>([
-        ["default", LAYOUTS.MAIN_DEFAULT],
-        ["large", LAYOUTS.MAIN_LARGE],
-        ["form", LAYOUTS.MAIN_FORM],
-        ["full", LAYOUTS.MAIN_FULL],
-    ])
-
-    return sizesMap.get(size)
-}
-
-const StyledMain = styled.main<{
-    $size?: LibMainSize
-    $contentSize?: Extract<LibMainSize, "default" | "large" | "form">
-    $minHeight: string | number
-}>`
-    position: relative;
-    width: 100%;
-    height: auto;
-    min-height: ${({ $minHeight }) => stringifyPx($minHeight)};
-    max-width: ${({ $size }) => getMainSize($size || "default")};
-    padding: ${SPACERS.XXL} 0;
-    ${Mixins.Flexbox({
-        $flexDirection: "column",
-        $alignItems: "flex-start",
-        $gap: "l",
-    })}
-    ${Mixins.StretchTags}
-
-    & > * {
-        flex-shrink: 0;
-    }
-
-    ${({ $size, $contentSize }) =>
-        $size === "full" &&
-        css`
-            display: grid;
-            grid-template-columns: 1fr ${getMainSize($contentSize || "default")} 1fr;
-
-            & > * {
-                grid-column: 2;
-            }
-        `}
-
-    @media ${MEDIA.BREAKPOINT_TABLET_SMALL} {
-        height: unset;
-    }
-`
-
-setDefaultTheme([StyledMain])
-
-export { StyledMain }

package/src/lib/components/Main/types.ts

@@ -1,19 +0,0 @@
-/*=============================================== Main types ===============================================*/
-
-import type { LibComponentBase, LibMainSize } from "../../types"
-
-interface ILibMainBase extends LibComponentBase<HTMLDivElement> {
-    minHeight?: string | number
-}
-
-interface MainWithSize extends ILibMainBase {
-    size?: Exclude<LibMainSize, "full">
-    contentSize?: never
-}
-
-interface MainWithFullPage extends ILibMainBase {
-    size?: Extract<LibMainSize, "full">
-    contentSize?: Exclude<LibMainSize, "full">
-}
-
-export type ILibMain = MainWithSize | MainWithFullPage

package/src/lib/components/MarkdownContainer/MarkdownContainer.tsx

@@ -1,35 +0,0 @@
-/*=============================================== MarkdownContainer component ===============================================*/
-
-import { forwardRef } from "react"
-import { optionsMarkdown } from "../../"
-import { StyledMarkdownContainer } from "./styles"
-import type { ILibMarkdownContainer } from "./types"
-
-/**
- * @description Returns a MarkdownContainer component
- * @link https://documentation-components-react.vercel.app/components/markdown-container
- * @extends HTMLDivElement
- * @prop data-testid?: string
- * @prop ref?: ForwardedRef<HTMLDivElement>
- * @prop options?: MarkdownToJSX.Options => imported from package markdown-to-jsx
- */
-export const MarkdownContainer = forwardRef<
-    HTMLDivElement,
-    ILibMarkdownContainer
->(
-    (
-        { "data-testid": testid, children, options = optionsMarkdown, ...rest },
-        ref
-    ) => {
-        return (
-            <StyledMarkdownContainer
-                data-testid={testid}
-                ref={ref}
-                options={options}
-                {...rest}
-            >
-                {children}
-            </StyledMarkdownContainer>
-        )
-    }
-)

package/src/lib/components/MarkdownContainer/__preview__/MarkdownContainer.preview.tsx

@@ -1,28 +0,0 @@
-/*=============================================== MarkdownContainerPreview ===============================================*/
-
-import { MarkdownContainer } from "../../../"
-import type { ILibMarkdownContainer } from "../../../types/components-props"
-import type { ComponentPreview } from "../../../../data/components"
-
-export const markdownContainerPreview: ComponentPreview<ILibMarkdownContainer> =
-    {
-        name: "MarkdownContainer",
-        component: MarkdownContainer,
-        category: "components",
-        import: "MarkdownContainer",
-        additionalImports: null,
-        optionalImports: null,
-        propsImport: "ILibMarkdownContainer",
-        additionalTypeImports: null,
-        extends: ["HTMLDivElement"],
-        previews: [
-            {
-                props: {
-                    children:
-                        "## Hello world \n\n I'm some markdown content **compiled** to *jsx*",
-                    "data-testid": "testid",
-                    className: "className",
-                },
-            },
-        ],
-    }

package/src/lib/components/MarkdownContainer/index.ts

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

package/src/lib/components/MarkdownContainer/styles.tsx

@@ -1,17 +0,0 @@
-/*=============================================== MarkdownContainer styles ===============================================*/
-
-import styled from "styled-components"
-import Markdown from "markdown-to-jsx"
-import { setDefaultTheme, Mixins } from "../../"
-
-const StyledMarkdownContainer = styled(Markdown)`
-    ${Mixins.Flexbox({
-        $gap: "s",
-        $alignItems: "stretch",
-        $flexDirection: "column",
-    })};
-`
-
-setDefaultTheme([StyledMarkdownContainer])
-
-export { StyledMarkdownContainer }

package/src/lib/components/MarkdownContainer/types.ts

@@ -1,9 +0,0 @@
-/*=============================================== MarkdownContainer types ===============================================*/
-
-import type { MarkdownToJSX } from "markdown-to-jsx"
-import type { LibComponentBase } from "../../types"
-
-export interface ILibMarkdownContainer
-    extends Exclude<LibComponentBase<HTMLDivElement>, "as"> {
-    options?: MarkdownToJSX.Options
-}