@julseb-lib/react 0.0.50 → 0.0.52

package/dist/lib/components/Fieldset/index.ts

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

package/dist/lib/components/Fieldset/styles.tsx

@@ -1,50 +0,0 @@
-/*=============================================== Fieldset styles ===============================================*/
-
-import styled from "styled-components"
-import { setDefaultTheme, Mixins, SPACERS, FONT_WEIGHTS } from "../../"
-import type {
-    CssAlignContent,
-    CssAlignItems,
-    CssFlexDirection,
-    CssFlexWrap,
-    CssJustifyContent,
-    CssJustifyItems,
-    ILibBorder,
-    ILibPadding,
-    ILibRadius,
-    LibSpacers,
-    LibValidationStatus,
-} from "../../types"
-
-const StyledFieldset = styled.fieldset<{
-    $flexDirection?: CssFlexDirection
-    $flexWrap?: CssFlexWrap
-    $justifyContent?: CssJustifyContent
-    $alignItems?: CssAlignItems
-    $justifyItems?: CssJustifyItems
-    $alignContent?: CssAlignContent
-    $gap?: LibSpacers
-    $columnGap?: LibSpacers
-    $rowGap?: LibSpacers
-    $padding?: ILibPadding
-    $border?: ILibBorder
-    $borderRadius?: ILibRadius
-    $validationStatus: LibValidationStatus | undefined
-}>`
-    border: 1px solid ${({ theme }) => theme.GRAY_200};
-    ${Mixins.Flexbox}
-    ${({ $border, $validationStatus }) =>
-        Mixins.Border(
-            $validationStatus === false ? { color: "danger" } : $border
-        )};
-    ${({ $borderRadius }) => Mixins.BorderRadius($borderRadius)};
-`
-
-const Legend = styled.legend`
-    padding: 0 ${SPACERS.S};
-    font-weight: ${FONT_WEIGHTS.BLACK};
-`
-
-setDefaultTheme([StyledFieldset, Legend])
-
-export { StyledFieldset, Legend }

package/dist/lib/components/Fieldset/types.ts

@@ -1,34 +0,0 @@
-/*=============================================== Fieldset types ===============================================*/
-
-import type {
-    CssAlignContent,
-    CssAlignItems,
-    CssFlexDirection,
-    CssFlexWrap,
-    CssJustifyContent,
-    CssJustifyItems,
-    ILibBorder,
-    ILibPadding,
-    ILibRadius,
-    LibComponentBase,
-    LibSpacers,
-} from "../../types"
-import type { ILibInputBase } from "../InputComponents/types"
-
-export interface ILibFieldset
-    extends LibComponentBase<HTMLFieldSetElement>,
-        Pick<ILibInputBase, "containerStyle" | "validation"> {
-    legend: string
-    flexDirection?: CssFlexDirection
-    flexWrap?: CssFlexWrap
-    justifyContent?: CssJustifyContent
-    alignItems?: CssAlignItems
-    justifyItems?: CssJustifyItems
-    alignContent?: CssAlignContent
-    gap?: LibSpacers
-    columnGap?: LibSpacers
-    rowGap?: LibSpacers
-    padding?: ILibPadding
-    border?: ILibBorder
-    borderRadius?: ILibRadius
-}

package/dist/lib/components/Flexbox/Flexbox.tsx

@@ -1,69 +0,0 @@
-/*=============================================== Flexbox component ===============================================*/
-
-import { forwardRef } from "react"
-import { StyledFlexbox } from "./styles"
-import type { ILibFlexbox } from "./types"
-
-/**
- * @description Returns a Flexbox component
- * @link https://documentation-components-react.vercel.app/layouts/flexbox
- * @extends HTMLDivElement
- * @prop data-testid?: string
- * @prop as?: ElementType
- * @prop ref?: ForwardedRef<HTMLDivElement>
- * @prop inline?: boolean
- * @prop flexDirection?: CssFlexDirection
- * @prop flexWrap?: CssFlexWrap
- * @prop justifyContent?: CssJustifyContent
- * @prop alignItems?: CssAlignItems
- * @prop justifyItems?: CssJustifyItems
- * @prop alignContent?: CssAlignContent
- * @prop gap?: "xxl" | "xl" | "l" | "m" | "s" | "xs" | "xxs" | number | "0px"
- * @prop columnGap?: "xxl" | "xl" | "l" | "m" | "s" | "xs" | "xxs" | number | "0px"
- * @prop rowGap?: "xxl" | "xl" | "l" | "m" | "s" | "xs" | "xxs" | number | "0px"
- * @prop padding?: "xxl" | "xl" | "l" | "m" | "s" | "xs" | "xxs" | number | "0px" | { left?: LibSpacers | "auto"; top?: LibSpacers | "auto"; right?: LibSpacers | "auto"; bottom?: LibSpacers | "auto"; leftRight?: LibSpacers | "auto"; topBottom?: LibSpacers | "auto" }
- */
-export const Flexbox = forwardRef<HTMLDivElement, ILibFlexbox>(
-    (
-        {
-            "data-testid": testid,
-            as,
-            children,
-            inline,
-            flexDirection,
-            flexWrap,
-            justifyContent,
-            alignItems,
-            justifyItems,
-            alignContent,
-            gap,
-            columnGap,
-            rowGap,
-            padding,
-            ...rest
-        },
-        ref
-    ) => {
-        return (
-            <StyledFlexbox
-                data-testid={testid}
-                ref={ref}
-                as={as}
-                $inline={inline}
-                $flexDirection={flexDirection}
-                $flexWrap={flexWrap}
-                $justifyContent={justifyContent}
-                $alignItems={alignItems}
-                $justifyItems={justifyItems}
-                $alignContent={alignContent}
-                $gap={gap}
-                $columnGap={columnGap}
-                $rowGap={rowGap}
-                $padding={padding}
-                {...rest}
-            >
-                {children}
-            </StyledFlexbox>
-        )
-    }
-)

package/dist/lib/components/Flexbox/index.ts

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

package/dist/lib/components/Flexbox/styles.tsx

@@ -1,34 +0,0 @@
-/*=============================================== Flexbox styles ===============================================*/
-
-import styled from "styled-components"
-import { Mixins, setDefaultTheme } from "../../"
-import type {
-    CssAlignContent,
-    CssAlignItems,
-    CssFlexDirection,
-    CssFlexWrap,
-    CssJustifyContent,
-    CssJustifyItems,
-    ILibPadding,
-    LibSpacers,
-} from "../../types"
-
-const StyledFlexbox = styled.div<{
-    $inline?: boolean
-    $flexDirection?: CssFlexDirection
-    $flexWrap?: CssFlexWrap
-    $justifyContent?: CssJustifyContent
-    $alignItems?: CssAlignItems
-    $justifyItems?: CssJustifyItems
-    $alignContent?: CssAlignContent
-    $gap?: LibSpacers
-    $columnGap?: LibSpacers
-    $rowGap?: LibSpacers
-    $padding?: ILibPadding
-}>`
-    ${Mixins.Flexbox}
-`
-
-setDefaultTheme([StyledFlexbox])
-
-export { StyledFlexbox }

package/dist/lib/components/Flexbox/types.ts

@@ -1,27 +0,0 @@
-/*=============================================== Flexbox types ===============================================*/
-
-import type {
-    LibComponentBase,
-    CssAlignContent,
-    CssAlignItems,
-    CssFlexDirection,
-    CssFlexWrap,
-    CssJustifyContent,
-    CssJustifyItems,
-    LibSpacers,
-    ILibPadding,
-} from "../../types"
-
-export interface ILibFlexbox extends LibComponentBase<HTMLDivElement> {
-    inline?: boolean
-    flexDirection?: CssFlexDirection
-    flexWrap?: CssFlexWrap
-    justifyContent?: CssJustifyContent
-    alignItems?: CssAlignItems
-    justifyItems?: CssJustifyItems
-    alignContent?: CssAlignContent
-    gap?: LibSpacers
-    columnGap?: LibSpacers
-    rowGap?: LibSpacers
-    padding?: ILibPadding
-}

package/dist/lib/components/Footer/Footer.tsx

@@ -1,106 +0,0 @@
-/*=============================================== Footer component ===============================================*/
-
-import { forwardRef, Fragment } from "react"
-import { uuid } from "@julseb-lib/utils"
-import { FooterLogo } from "./FooterLogo"
-import { FooterLink } from "./FooterLink"
-import {
-    StyledFooter,
-    FooterLinksContainer,
-    FooterLinkSeparatorContainer,
-} from "./styles"
-import type { ILibFooter } from "./types"
-
-/**
- * @description Returns a Footer component
- * @link https://documentation-components-react.vercel.app/components/footer
- * @extends HTMLDivElement
- * @prop data-testid?: string
- * @prop as?: ElementType
- * @prop ref?: ForwardedRef<HTMLDivElement>
- * @prop links: Array<LibFooterLink> => required if direction is set to horizontal, only if children is not defined
- * @prop logo: string | { img: string => only if text is not defined; text: string => only if img is not defined; alt?: string => only if img is defined; width?: number => only if img is defined; height?: number => only if img is defined } => required if direction is set to horizontal
- * @prop children?: ReactChildren
- * @prop withSeparator?: boolean
- * @prop linksSeparator?: "dot" | "dash"
- * @prop direction?: "horizontal" | "vertical"
- *
- * @type LibFooterLink
- * @prop data-testid?: string
- * @prop className?: string
- * @prop id?: string
- * @prop ref?: ForwardedRef<HTMLAnchorElement & HTMLButtonElement>
- * @prop text: string
- * @prop onClick: void => only if to or href are not defined
- * @prop disabled?: boolean => only if onClick is defined
- * @prop to: string => only if onClick and href are not defined
- * @prop href: string => only if onClick and to are not defined
- * @prop blank?: boolean => only if to or href are defined
- */
-export const Footer = forwardRef<HTMLDivElement, ILibFooter>(
-    (
-        {
-            "data-testid": testid,
-            as,
-            children,
-            className,
-            withSeparator,
-            links,
-            logo,
-            direction = "horizontal",
-            linksSeparator = "dot",
-            ...rest
-        },
-        ref
-    ) => {
-        return (
-            <StyledFooter
-                data-testid={testid}
-                ref={ref}
-                className={className}
-                as={as}
-                $withSeparator={withSeparator}
-                $direction={direction}
-                {...rest}
-            >
-                {logo && (
-                    <FooterLogo
-                        data-testid={testid && `${testid}.Logo`}
-                        className={className && "FooterLogo"}
-                        logo={logo}
-                    />
-                )}
-
-                <FooterLinksContainer
-                    data-testid={testid && `${testid}.FooterLinksContainer`}
-                    className={className && "FooterLinksContainer"}
-                >
-                    {links
-                        ? links.map((link, i) => (
-                              <Fragment key={uuid()}>
-                                  <FooterLink
-                                      data-testid={
-                                          testid &&
-                                          `${testid}.FooterLinksContainer.FooterLink`
-                                      }
-                                      className={className && "FooterLink"}
-                                      item={link}
-                                  />
-
-                                  {i !== links.length - 1 && (
-                                      <FooterLinkSeparatorContainer>
-                                          {linksSeparator === "dash"
-                                              ? "-"
-                                              : linksSeparator === "dot"
-                                              ? "•"
-                                              : ""}
-                                      </FooterLinkSeparatorContainer>
-                                  )}
-                              </Fragment>
-                          ))
-                        : children}
-                </FooterLinksContainer>
-            </StyledFooter>
-        )
-    }
-)

package/dist/lib/components/Footer/FooterLink.tsx

@@ -1,31 +0,0 @@
-/*=============================================== FooterLinks ===============================================*/
-
-import { forwardRef } from "react"
-import { Link } from "react-router-dom"
-import type { ILibFooterLink } from "./subtypes"
-
-export const FooterLink = forwardRef<
-    HTMLButtonElement & HTMLAnchorElement,
-    ILibFooterLink
->(({ "data-testid": testid, className, item }, ref) => {
-    const commonProps = {
-        "data-testid": testid,
-        className,
-        ref,
-        children: item.text,
-        ...item,
-    }
-
-    const blankProps = {
-        target: item.blank ? "_blank" : undefined,
-        rel: item.blank ? "noreferrer noopener" : undefined,
-    }
-
-    if (item.href)
-        return <a href={item.href} {...blankProps} {...(commonProps as any)} />
-
-    if (item.to)
-        return <Link to={item.to} {...blankProps} {...(commonProps as any)} />
-
-    return <button onClick={item.onClick} type="button" {...commonProps} />
-})

package/dist/lib/components/Footer/FooterLogo.tsx

@@ -1,30 +0,0 @@
-/*=============================================== FooterLogo ===============================================*/
-
-import { LogoText, LogoImg } from "./styles"
-import type { ILibFooterLogo } from "./subtypes"
-
-export const FooterLogo = ({
-    "data-testid": testid,
-    className,
-    logo,
-}: ILibFooterLogo) => {
-    const { text, img, alt = "Logo", width = 100, height = 30 } = logo as any
-
-    if (text || typeof logo === "string")
-        return (
-            <LogoText data-testid={testid} className={className}>
-                {text || logo}
-            </LogoText>
-        )
-
-    return (
-        <LogoImg
-            data-testid={testid}
-            className={className}
-            src={img}
-            alt={alt}
-            width={width}
-            height={height}
-        />
-    )
-}

package/dist/lib/components/Footer/index.ts

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

package/dist/lib/components/Footer/styles.tsx

@@ -1,126 +0,0 @@
-/*=============================================== Footer styles ===============================================*/
-
-import styled, { css } from "styled-components"
-import {
-    setDefaultTheme,
-    Mixins,
-    SPACERS,
-    MEDIA,
-    Image,
-    Text,
-    Flexbox,
-} from "../../"
-import type { LibFooterDirection } from "../../types"
-
-const StyledFooter = styled.footer<{
-    $withSeparator?: boolean
-    $direction: LibFooterDirection
-}>`
-    width: 100%;
-    position: relative;
-    z-index: 10;
-    background-color: ${({ theme }) => theme.Background};
-    padding: ${SPACERS.L} 5%;
-    width: 100%;
-    ${({ $direction }) =>
-        Mixins.Flexbox({
-            $alignItems: "center",
-            $justifyContent:
-                $direction === "horizontal"
-                    ? "space-between"
-                    : $direction === "vertical"
-                    ? "center"
-                    : undefined,
-            $gap: $direction === "horizontal" ? "l" : "xs",
-            $flexDirection: $direction === "horizontal" ? "row" : "column",
-        })}
-
-    a,
-    button {
-        color: ${({ theme }) => Mixins.ColorsHoverDefault("primary", theme)};
-        text-decoration: none;
-        border: none;
-        padding: 0;
-        background-color: transparent;
-
-        @media ${MEDIA.HOVER} {
-            &:hover {
-                color: ${({ theme }) =>
-                    Mixins.ColorsHoverHover("primary", theme)};
-            }
-
-            &:active {
-                color: ${({ theme }) =>
-                    Mixins.ColorsHoverActive("primary", theme)};
-            }
-        }
-    }
-
-    @media ${MEDIA.BREAKPOINT_MOBILE} {
-        flex-direction: column;
-        gap: ${SPACERS.XS};
-    }
-
-    ${({ $withSeparator }) =>
-        $withSeparator &&
-        css`
-            padding-top: ${SPACERS.XXL};
-
-            &:before {
-                content: "";
-                width: calc(100% - 10%);
-                height: 1px;
-                position: absolute;
-                top: ${SPACERS.L};
-                left: 5%;
-                background-color: ${({ theme }) => theme.GRAY_200};
-            }
-        `}
-`
-
-const LogoImg = styled(Image).attrs({ fit: "contain" })`
-    object-position: left center;
-`
-
-const LogoText = styled(Text).attrs({ tag: "strong" })`
-    color: ${({ theme }) => theme.Primary500};
-` as any
-
-const FooterLinksContainer = styled(Flexbox).attrs({
-    alignItems: "center",
-    justifyContent: "center",
-    gap: "xs",
-    flexWrap: "wrap",
-})`
-    @media ${MEDIA.BREAKPOINT_MOBILE} {
-        justify-content: center;
-        align-items: center;
-    }
-`
-
-const FooterLinkSeparatorContainer = styled.span`
-    height: 24px;
-    font-size: 12px;
-    line-height: 24px;
-    ${Mixins.Flexbox({
-        $inline: true,
-        $alignItems: "center",
-    })};
-    color: ${({ theme }) => theme.GRAY_500};
-`
-
-setDefaultTheme([
-    StyledFooter,
-    LogoImg,
-    LogoText,
-    FooterLinksContainer,
-    FooterLinkSeparatorContainer,
-])
-
-export {
-    StyledFooter,
-    LogoImg,
-    LogoText,
-    FooterLinksContainer,
-    FooterLinkSeparatorContainer,
-}

package/dist/lib/components/Footer/subtypes.ts

@@ -1,14 +0,0 @@
-/*=============================================== Footer sub components types ===============================================*/
-
-import type { LibFooterLink } from "../../types"
-import type { ILibFooter } from "./types"
-
-// ! DO NOT EXPORT THOSE TYPES, ONLY USE THEM IN FOOTER COMPONENTS
-
-export interface ILibFooterLink
-    extends Pick<ILibFooter, "data-testid" | "className"> {
-    item: LibFooterLink
-}
-
-export interface ILibFooterLogo
-    extends Pick<ILibFooter, "data-testid" | "className" | "logo"> {}

package/dist/lib/components/Footer/types.ts

@@ -1,76 +0,0 @@
-/*=============================================== Footer types ===============================================*/
-
-import type {
-    LibComponentBase,
-    LibFooterDirection,
-    LibFooterLink,
-    ReactChildren,
-    RequireAtLeastOne,
-    LibFooterLinksSeparator,
-} from "../../types"
-
-/*====================== Footer Content ======================*/
-
-interface FooterWithLogoImg {
-    img: string
-    alt?: string
-    width?: number
-    height?: number
-    text?: never
-}
-
-interface FooterWithLogoText {
-    img?: never
-    alt?: never
-    width?: never
-    height?: never
-    text: string
-}
-
-type LibFooterLogo = FooterWithLogoImg | FooterWithLogoText
-
-/*====================== Footer component ======================*/
-
-interface ILibFooterBase extends LibComponentBase<HTMLDivElement> {
-    withSeparator?: boolean
-    linksSeparator?: LibFooterLinksSeparator
-}
-
-interface FooterHorizontalWithItems extends ILibFooterBase {
-    links: Array<LibFooterLink>
-    logo: string | LibFooterLogo
-    direction?: Extract<LibFooterDirection, "horizontal">
-    children?: never
-}
-
-interface FooterHorizontalWithChildren extends ILibFooterBase {
-    links?: never
-    logo: LibFooterLogo
-    direction?: Extract<LibFooterDirection, "horizontal">
-    children?: ReactChildren
-}
-
-type LibFooterHorizontal =
-    | FooterHorizontalWithItems
-    | FooterHorizontalWithChildren
-
-interface FooterVerticalWithItems extends ILibFooterBase {
-    links?: Array<LibFooterLink>
-    logo?: LibFooterLogo
-    direction?: Extract<LibFooterDirection, "vertical">
-    children?: never
-}
-
-interface FooterVerticalWithChildren extends ILibFooterBase {
-    links?: never
-    logo?: LibFooterLogo
-    direction?: Extract<LibFooterDirection, "vertical">
-    children?: ReactChildren
-}
-
-type LibFooterVertical = RequireAtLeastOne<
-    FooterVerticalWithItems | FooterVerticalWithChildren,
-    "links" | "children" | "logo"
->
-
-export type ILibFooter = LibFooterHorizontal | LibFooterVertical