@julseb-lib/react 0.0.51 → 0.0.52

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

@@ -1,180 +0,0 @@
-/*=============================================== StickyPreview ===============================================*/
-
-import { Sticky, Text, Button } from "../../../"
-import type { ILibSticky } from "../../../types/components-props"
-import type { ComponentPreview } from "../../../../data/components"
-
-const StickyDemo = () => {
-    return (
-        <>
-            <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>
-
-            <Sticky data-testid="testid" className="className">
-                <Button>Sticky button</Button>
-            </Sticky>
-
-            <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>
-
-            <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>
-        </>
-    )
-}
-
-export const stickyPreview: ComponentPreview<ILibSticky> = {
-    name: "Sticky",
-    component: Sticky,
-    category: "components",
-    import: "Sticky",
-    additionalImports: null,
-    optionalImports: null,
-    propsImport: "ILibSticky",
-    additionalTypeImports: null,
-    extends: ["HTMLDivElement"],
-    previews: [{ demo: <StickyDemo /> }],
-}

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

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

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

@@ -1,15 +0,0 @@
-/*=============================================== Sticky styles ===============================================*/
-
-import styled from "styled-components"
-import { Mixins, setDefaultTheme } from "../../"
-import type { LibSpacers } from "../../types"
-
-const StyledSticky = styled.div<{ $top: LibSpacers }>`
-    position: -webkit-sticky;
-    position: sticky;
-    top: ${({ $top }) => Mixins.Spacer($top)};
-`
-
-setDefaultTheme([StyledSticky])
-
-export { StyledSticky }

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

@@ -1,7 +0,0 @@
-/*=============================================== Sticky types ===============================================*/
-
-import type { LibComponentBase, LibSpacers } from "../../types"
-
-export interface ILibSticky extends LibComponentBase<HTMLDivElement> {
-    top?: LibSpacers
-}

package/src/lib/components/Table/TBody.tsx

@@ -1,17 +0,0 @@
-/*=============================================== TBody component ===============================================*/
-
-import { forwardRef } from "react"
-import type { ILibTBody } from "./types"
-
-/**
- * @description Returns a TBody component
- * @link https://documentation-components-react.vercel.app/components/table
- * @extends HTMLTableSectionElement
- * @prop data-testid?: string
- * @prop ref?: ForwardedRef<HTMLTableSectionElement>
- */
-export const TBody = forwardRef<HTMLTableSectionElement, ILibTBody>(
-    ({ "data-testid": testid, ...rest }, ref) => {
-        return <tbody data-testid={testid} ref={ref} {...rest} />
-    }
-)

package/src/lib/components/Table/THead.tsx

@@ -1,17 +0,0 @@
-/*=============================================== THead component ===============================================*/
-
-import { forwardRef } from "react"
-import type { ILibTHead } from "./types"
-
-/**
- * @description Returns a THead component
- * @link https://documentation-components-react.vercel.app/components/table
- * @extends HTMLTableSectionElement
- * @prop data-testid?: string
- * @prop ref?: ForwardedRef<HTMLTableSectionElement>
- */
-export const THead = forwardRef<HTMLTableSectionElement, ILibTHead>(
-    ({ "data-testid": testid, ...rest }, ref) => {
-        return <thead data-testid={testid} ref={ref} {...rest} />
-    }
-)

package/src/lib/components/Table/Table.tsx

@@ -1,124 +0,0 @@
-/*=============================================== Table component ===============================================*/
-
-import { forwardRef } from "react"
-import { uuid } from "@julseb-lib/utils"
-import { Linkify } from "../../"
-import { THead } from "./THead"
-import { TBody } from "./TBody"
-import { Tr } from "./Tr"
-import { Td } from "./Td"
-import { StyledTable } from "./styles"
-import type { ILibTable } from "./types"
-
-/**
- * @description Returns a Table component
- * @link https://documentation-components-react.vercel.app/components/table
- * @extends HTMLTableElement
- * @prop data-testid?: string
- * @prop ref?: ForwardedRef<HTMLTableElement>
- * @prop data: Array<Array<ReactChildren>> => only if children is not defined
- * @prop children?: ReactChildren => only if data is not defined
- * @prop headers?: Array<ReactChildren>
- * @prop variant?: LibTableVariant
- * @prop vAlign?: CssVerticalAlign
- * @prop linkify?: boolean
- */
-export const Table = forwardRef<HTMLTableElement, ILibTable>(
-    (
-        {
-            "data-testid": testid,
-            children,
-            className,
-            variant = "bordered",
-            data,
-            headers,
-            linkify,
-            vAlign = "top",
-            ...rest
-        },
-        ref
-    ) => {
-        return (
-            <StyledTable
-                data-testid={testid}
-                ref={ref}
-                className={className}
-                $vAlign={vAlign}
-                $variant={variant}
-                {...rest}
-            >
-                {headers && (
-                    <THead
-                        data-testid={testid && `${testid}.THead`}
-                        className={className && "THead"}
-                    >
-                        <Tr
-                            data-testid={testid && `${testid}.THead.Tr`}
-                            className={className && "TheadTr"}
-                        >
-                            {headers.map(header => (
-                                <Td
-                                    key={uuid()}
-                                    data-testid={
-                                        testid && `${testid}.THead.Tr.Td`
-                                    }
-                                    className={className && "TheadTd"}
-                                >
-                                    {linkify && typeof header === "string" ? (
-                                        <Linkify>{header}</Linkify>
-                                    ) : (
-                                        header
-                                    )}
-                                </Td>
-                            ))}
-                        </Tr>
-                    </THead>
-                )}
-
-                {data ? (
-                    <TBody
-                        data-testid={testid && `${testid}.TBody`}
-                        className={className && "TBody"}
-                    >
-                        {data.map(row => {
-                            return (
-                                <Tr
-                                    key={uuid()}
-                                    data-testid={testid && `${testid}.TBody.Tr`}
-                                    className={className && "TBodyTr"}
-                                >
-                                    {row.map(col => {
-                                        return (
-                                            <Td
-                                                key={uuid()}
-                                                data-testid={
-                                                    testid &&
-                                                    `${testid}.TBody.Tr.Td`
-                                                }
-                                                className={
-                                                    className && "TBodyTd"
-                                                }
-                                                noPadding={
-                                                    typeof col === "object"
-                                                }
-                                            >
-                                                {linkify &&
-                                                typeof col === "string" ? (
-                                                    <Linkify>{col}</Linkify>
-                                                ) : (
-                                                    col
-                                                )}
-                                            </Td>
-                                        )
-                                    })}
-                                </Tr>
-                            )
-                        })}
-                    </TBody>
-                ) : (
-                    children
-                )}
-            </StyledTable>
-        )
-    }
-)

package/src/lib/components/Table/Td.tsx

@@ -1,26 +0,0 @@
-/*=============================================== Td component ===============================================*/
-
-import { forwardRef } from "react"
-import { StyledTd } from "./styles"
-import type { ILibTd } from "./types"
-
-/**
- * @description Returns a Td component
- * @link https://documentation-components-react.vercel.app/components/table
- * @extends HTMLTableCellElement
- * @prop data-testid?: string
- * @prop ref?: ForwardedRef<HTMLTableCellElement>
- * @prop noPadding?: boolean
- */
-export const Td = forwardRef<HTMLTableCellElement, ILibTd>(
-    ({ "data-testid": testid, noPadding, ...rest }, ref) => {
-        return (
-            <StyledTd
-                data-testid={testid}
-                ref={ref}
-                $noPadding={noPadding}
-                {...rest}
-            />
-        )
-    }
-)

package/src/lib/components/Table/Tr.tsx

@@ -1,17 +0,0 @@
-/*=============================================== Tr component ===============================================*/
-
-import { forwardRef } from "react"
-import type { ILibTr } from "./types"
-
-/**
- * @description Returns a Tr component
- * @link https://documentation-components-react.vercel.app/components/table
- * @extends HTMLTableRowElement
- * @prop data-testid?: string
- * @prop ref?: ForwardedRef<HTMLTableRowElement>
- */
-export const Tr = forwardRef<HTMLTableRowElement, ILibTr>(
-    ({ "data-testid": testid, ...rest }, ref) => {
-        return <tr data-testid={testid} ref={ref} {...rest} />
-    }
-)

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

@@ -1,112 +0,0 @@
-/*=============================================== TablePreview ===============================================*/
-
-import { Table } from "../../../"
-import { toTitleCase } from "@julseb-lib/utils"
-import type { ILibTable } from "../../../types/components-props"
-import type { ComponentPreview } from "../../../../data/components"
-import type { ReactChildren } from "../../../types"
-
-const users: Array<User> = [
-    {
-        id: 1,
-        firstName: "Anna",
-        lastName: "Fali",
-        facebook: "Anna Fali",
-        twitter: "@anna.fali",
-    },
-    {
-        id: 2,
-        firstName: "Niek",
-        lastName: "Bove",
-        facebook: "Niek Bove",
-        twitter: "@niek.bove",
-    },
-    {
-        id: 3,
-        firstName: "Lacara",
-        lastName: "Jones",
-        facebook: "Lacara Jones",
-        twitter: "@lacara.jones",
-    },
-    {
-        id: 4,
-        firstName: "Pablo",
-        lastName: "Cambeiro",
-        facebook: "Pablo Cambeiro",
-        twitter: "@pablo.cambeiro",
-    },
-    {
-        id: 5,
-        firstName: "Irene",
-        lastName: "Sotelo",
-        facebook: "Irene Sotelo",
-        twitter: "@irene.sotelo",
-    },
-]
-
-const headers: Array<ReactChildren> = [
-    ...new Set(
-        users
-            .map(user => Object.keys(user))
-            .flat()
-            .map(key => toTitleCase(key))
-    ),
-]
-
-const data: Array<Array<ReactChildren>> = users.map(user =>
-    Object.values(user).map((v, i) =>
-        i === Object.values(user).length - 1 ? `http://twitter.com/${v}` : v
-    )
-)
-
-export const tablePreview: ComponentPreview<ILibTable> = {
-    name: "Table",
-    component: Table,
-    category: "components",
-    import: "Table",
-    additionalImports: null,
-    optionalImports: null,
-    propsImport: "ILibTable",
-    additionalTypeImports: null,
-    extends: ["HTMLTableElement"],
-    previews: [
-        {
-            previewTitle: "Default",
-            props: {
-                headers,
-                data,
-                linkify: true,
-                "data-testid": "testid",
-                className: "className",
-            },
-        },
-        {
-            previewTitle: "Border bottom",
-            props: {
-                headers,
-                data,
-                variant: "border-bottom",
-                "data-testid": "testid",
-                className: "className",
-            },
-        },
-        {
-            previewTitle: "Stripped",
-            props: {
-                headers,
-                data,
-                variant: "stripped",
-                "data-testid": "testid",
-                className: "className",
-            },
-        },
-    ],
-}
-
-type User = {
-    id: number
-    firstName: string
-    lastName: string
-    facebook: string
-    twitter: string
-}

package/src/lib/components/Table/__tests__/Table.cy.tsx

@@ -1,24 +0,0 @@
-/*=============================================== Table tests ===============================================*/
-
-import { Table, Text, uuid } from "../../.."
-
-const HEADERS = ["Header", "Header", "Header"]
-const DATA = [
-    ["Content 1", <Text key={uuid()}>Content 2</Text>, "Content 3"],
-    ["Content 1", <Text key={uuid()}>Content 2</Text>, "Content 3"],
-]
-
-describe("<Table />", () => {
-    it("renders <Table /> component", () => {
-        cy.mount(
-            <Table
-                data-testid="testid"
-                className="className"
-                headers={HEADERS}
-                data={DATA}
-            />
-        )
-        cy.dataTest().should("exist").should("have.class", "className")
-        cy.dataTest("testid.THead").should("exist")
-    })
-})

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

@@ -1,7 +0,0 @@
-/*=============================================== Table exports ===============================================*/
-
-export * from "./Table"
-export * from "./THead"
-export * from "./TBody"
-export * from "./Tr"
-export * from "./Td"

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

@@ -1,114 +0,0 @@
-/*=============================================== Table styles ===============================================*/
-
-import styled, { css } from "styled-components"
-import { setDefaultTheme, SPACERS, Mixins, FONT_SIZES, MEDIA } from "../../"
-import { TextBaseMixin } from "../ComponentsMixins"
-import type { CssVerticalAlign, LibTableVariant } from "../../types"
-
-const StyledTable = styled.table<{
-    $vAlign: CssVerticalAlign
-    $variant: LibTableVariant
-}>`
-    ${TextBaseMixin({
-        $fontSize: "small",
-        $fontWeight: "regular",
-        $linkColor: "primary",
-    })};
-    display: table;
-    border-collapse: collapse;
-    border-spacing: 0;
-    table-layout: fixed;
-    width: 100%;
-    vertical-align: ${({ $vAlign }) => $vAlign};
-    height: 1px;
-
-    td {
-        vertical-align: ${({ $vAlign }) => $vAlign};
-
-        & > * {
-            height: 100%;
-        }
-    }
-
-    td,
-    th {
-        padding: ${SPACERS.XXS} ${SPACERS.XS};
-        display: table-cell;
-        overflow-x: scroll;
-        ${Mixins.HideScrollbar};
-
-        & > * {
-            font-size: ${FONT_SIZES.SMALL};
-        }
-
-        @media ${MEDIA.BREAKPOINT_MOBILE} {
-            display: block;
-        }
-    }
-
-    thead {
-        background-color: ${({ theme }) => theme.PRIMARY_500};
-        text-align: left;
-        color: ${({ theme }) => theme.BACKGROUND};
-
-        && {
-            a {
-                color: ${({ theme }) =>
-                    Mixins.ColorsHoverDefault("background", theme)};
-
-                &:hover {
-                    color: ${({ theme }) =>
-                        Mixins.ColorsHoverHover("background", theme)};
-                }
-
-                &:active {
-                    color: ${({ theme }) =>
-                        Mixins.ColorsHoverActive("background", theme)};
-                }
-            }
-        }
-    }
-
-    ${({ $variant, theme }) => {
-        switch ($variant) {
-            case "border-bottom":
-                return css`
-                    tbody tr {
-                        border-bottom: 1px solid ${theme.GRAY_200};
-                    }
-                `
-            case "bordered":
-                return css`
-                    border: 1px solid ${theme.GRAY_200};
-
-                    thead th:not(:last-child) {
-                        border-right: 1px solid ${theme.BACKGROUND};
-                    }
-
-                    td {
-                        border: 1px solid ${theme.GRAY_200};
-                    }
-                `
-            case "stripped":
-                return css`
-                    tbody tr:nth-child(odd) {
-                        background-color: ${theme.BACKGROUND};
-                    }
-
-                    tbody tr:nth-child(even) {
-                        background-color: ${theme.GRAY_50};
-                    }
-                `
-        }
-    }}
-`
-
-const StyledTd = styled.td<{ $noPadding: boolean | undefined }>`
-    && {
-        padding: ${({ $noPadding }) => $noPadding && 0};
-    }
-`
-
-setDefaultTheme([StyledTable, StyledTd])
-
-export { StyledTable, StyledTd }