@julseb-lib/react 0.0.50 → 0.0.51

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

@@ -0,0 +1,180 @@
+/*=============================================== 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/Table/__preview__/Table.preview.tsx

@@ -0,0 +1,112 @@
+/*=============================================== 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

@@ -0,0 +1,24 @@
+/*=============================================== 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/Tabs/__preview__/Tabs.preview.tsx

@@ -0,0 +1,64 @@
+/*=============================================== TabsPreview ===============================================*/
+
+import { Tabs, Text } from "../../../"
+import type { LibTabItem } from "../../../types"
+import type { ILibTabs } from "../../../types/components-props"
+import type { ComponentPreview } from "../../../../data/components"
+
+const tabsItems: Array<LibTabItem> = [
+    {
+        title: "First",
+        content: "Content tab 1",
+    },
+    {
+        title: "Second",
+        content: (
+            <>
+                <Text>Hello</Text>
+                <Text>World</Text>
+            </>
+        ),
+    },
+    {
+        title: "Third",
+        content: "Content tab 3",
+    },
+]
+
+export const tabsPreview: ComponentPreview<ILibTabs> = {
+    name: "Tabs",
+    component: Tabs,
+    category: "components",
+    import: "Tabs",
+    additionalImports: null,
+    optionalImports: [
+        "TabsContainer",
+        "TabsButtonsContainer",
+        "TabButton",
+        "TabItem",
+    ],
+    propsImport: "ILibTabs",
+    additionalTypeImports: ["LibTabItem"],
+    extends: ["HTMLDivElement"],
+    previews: [
+        {
+            previewTitle: "Basic",
+            props: {
+                tabsItems,
+                showInUrl: true,
+                "data-testid": "testid",
+                className: "className",
+            },
+        },
+        {
+            previewTitle: "Rounded",
+            props: {
+                tabsItems,
+                variant: "rounded",
+                justify: "stretch",
+                "data-testid": "testid",
+                className: "className",
+            },
+        },
+    ],
+}

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

@@ -0,0 +1,62 @@
+/*=============================================== Tabs tests ===============================================*/
+
+import { Tabs, LIB_TOKENS } from "../../.."
+import { tabsItems } from "./data"
+
+describe("<Tabs />", () => {
+    it("renders <Tabs /> component", () => {
+        cy.mount(
+            <Tabs
+                data-testid="testid"
+                className="className"
+                tabsItems={tabsItems}
+            />
+        )
+        cy.dataTest().should("exist").should("have.class", "className")
+        cy.dataTest("testid.TabsButtonsContainer")
+            .should("exist")
+            .should("have.class", "TabsButtonsContainer")
+        cy.dataTest("testid.TabsButtonsContainer.TabButton")
+            .should("exist")
+            .should("have.class", "TabButton")
+            .should("have.length", 3)
+
+        cy.dataTest("testid.TabItem")
+            .should("exist")
+            .should("have.class", "TabItem")
+            .should("have.length", 3)
+
+        cy.dataTest("testid.TabItem").eq(0).should("be.visible")
+        cy.dataTest("testid.TabItem").eq(1).should("not.be.visible")
+    })
+
+    it("renders a rounded variant", () => {
+        cy.mount(
+            <Tabs
+                data-testid="testid"
+                className="className"
+                tabsItems={tabsItems}
+                variant="rounded"
+            />
+        )
+
+        cy.dataTest("testid.TabsButtonsContainer").should(
+            "have.css",
+            "background-color",
+            LIB_TOKENS.colors.light["gray-50"].rgb
+        )
+    })
+
+    it("changes page on click", () => {
+        cy.mount(
+            <Tabs
+                data-testid="testid"
+                className="className"
+                tabsItems={tabsItems}
+            />
+        )
+
+        cy.dataTest("testid.TabsButtonsContainer.TabButton").eq(2).click()
+        cy.dataTest("testid.TabItem").eq(2).should("have.text", "Content tab 3")
+    })
+})

package/src/lib/components/Tabs/__tests__/data.tsx

@@ -0,0 +1,24 @@
+/*=============================================== Tabs tests demo ===============================================*/
+
+import { Text } from "../../Text"
+import type { LibTabItem } from "../../../types"
+
+export const tabsItems: Array<LibTabItem> = [
+    {
+        title: "First",
+        content: "Content tab 1",
+    },
+    {
+        title: "Second",
+        content: (
+            <>
+                <Text>Hello</Text>
+                <Text>World</Text>
+            </>
+        ),
+    },
+    {
+        title: "Third",
+        content: "Content tab 3",
+    },
+]

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

@@ -0,0 +1,63 @@
+/*=============================================== TagPreview ===============================================*/
+
+import { Tag, Flexbox } from "../../../"
+import { typeValues, type LibColorsShort } from "../../../types"
+import type { ILibTag } from "../../../types/components-props"
+import type { ComponentPreview } from "../../../../data/components"
+
+const TagDemo = ({ ...rest }: ILibTag) => {
+    const colors = Object.keys(typeValues.colorsShort) as Array<LibColorsShort>
+
+    return (
+        <Flexbox gap="xs" alignItems="flex-start">
+            {colors.map(c => (
+                <Tag
+                    key={c}
+                    backgroundColor={c}
+                    {...rest}
+                    data-testid="testid"
+                    className="className"
+                >
+                    Tag
+                </Tag>
+            ))}
+        </Flexbox>
+    )
+}
+
+export const tagPreview: ComponentPreview<ILibTag> = {
+    name: "Tag",
+    component: Tag,
+    category: "components",
+    import: "Tag",
+    noStretch: true,
+    additionalImports: null,
+    optionalImports: null,
+    propsImport: "ILibTag",
+    additionalTypeImports: null,
+    extends: ["HTMLSpanElement"],
+    previews: [
+        { previewTitle: "Default", demo: <TagDemo /> },
+        {
+            previewTitle: "With different border radius",
+            demo: (
+                <TagDemo
+                    borderRadius="m"
+                    padding={{ leftRight: "m", topBottom: "xxs" }}
+                />
+            ),
+        },
+        {
+            previewTitle: "With icons",
+            props: {
+                children: "Tag",
+                icons: {
+                    left: "chevron-right",
+                    right: "close",
+                },
+                "data-testid": "testid",
+                className: "className",
+            },
+        },
+    ],
+}

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

@@ -0,0 +1,155 @@
+/*=============================================== Tag tests ===============================================*/
+
+import { Tag, LIB_TOKENS } from "../../.."
+import { getIconSizeFromFont } from "../../../lib-utils"
+import { Close } from "../../../icons"
+import { SITE_DATA } from "../../../../data"
+
+describe("<Tag />", () => {
+    it("renders <Tag /> component", () => {
+        cy.mount(
+            <Tag data-testid="testid" className="className">
+                Hello
+            </Tag>
+        )
+        cy.dataTest()
+            .should("exist")
+            .should("have.class", "className")
+            .should("have.text", "Hello")
+            .should(
+                "have.css",
+                "background-color",
+                LIB_TOKENS.colors.light["primary-500"].rgb
+            )
+            .should("have.css", "color", LIB_TOKENS.colors.light.white.rgb)
+            .should("have.css", "padding-top", LIB_TOKENS.spacers.xxs)
+            .should("have.css", "padding-bottom", LIB_TOKENS.spacers.xxs)
+            .should("have.css", "padding-left", LIB_TOKENS.spacers.s)
+            .should("have.css", "padding-right", LIB_TOKENS.spacers.s)
+            .should(
+                "have.css",
+                "border-radius",
+                `${Number(LIB_TOKENS.radiuses.round.replace("em", "")) * 14}px`
+            )
+            .should("have.css", "gap", LIB_TOKENS.spacers.xs)
+            .should("have.css", "font-size", LIB_TOKENS["font-sizes"].small.px)
+    })
+
+    it("renders with a set backgroundColor", () => {
+        cy.mount(
+            <Tag data-testid="testid" backgroundColor="white">
+                Hello
+            </Tag>
+        )
+        cy.dataTest()
+            .should(
+                "have.css",
+                "background-color",
+                LIB_TOKENS.colors.light.white.rgb
+            )
+            .should(
+                "have.css",
+                "color",
+                LIB_TOKENS.colors.light["primary-500"].rgb
+            )
+    })
+
+    it("renders with a set textColor", () => {
+        cy.mount(
+            <Tag
+                data-testid="testid"
+                backgroundColor="success"
+                textColor="warning-300"
+            >
+                Hello
+            </Tag>
+        )
+        cy.dataTest()
+            .should(
+                "have.css",
+                "background-color",
+                LIB_TOKENS.colors.light["success-500"].rgb
+            )
+            .should(
+                "have.css",
+                "color",
+                LIB_TOKENS.colors.light["warning-300"].rgb
+            )
+    })
+
+    it("renders with a border", () => {
+        cy.mount(
+            <Tag
+                data-testid="testid"
+                backgroundColor="transparent"
+                border={{ width: 2, color: "success" }}
+                textColor="success"
+                padding={{ left: "xs", topBottom: "xxl", right: "s" }}
+            >
+                Hello
+            </Tag>
+        )
+        cy.dataTest()
+            .should(
+                "have.css",
+                "background-color",
+                LIB_TOKENS.colors.light.transparent.rgb
+            )
+            .should(
+                "have.css",
+                "color",
+                LIB_TOKENS.colors.light["success-500"].rgb
+            )
+            .should(
+                "have.css",
+                "border-color",
+                LIB_TOKENS.colors.light["success-500"].rgb
+            )
+            .should("have.css", "border-width", "2px")
+            .should("have.css", "padding-left", LIB_TOKENS.spacers.xs)
+            .should("have.css", "padding-right", LIB_TOKENS.spacers.s)
+            .should("have.css", "padding-top", LIB_TOKENS.spacers.xxl)
+            .should("have.css", "padding-bottom", LIB_TOKENS.spacers.xxl)
+    })
+
+    it("renders with a different borderRadius", () => {
+        cy.mount(
+            <Tag data-testid="testid" borderRadius="m" fontSize="body">
+                Hello
+            </Tag>
+        )
+        cy.dataTest()
+            .should("have.css", "border-radius", LIB_TOKENS.radiuses.m)
+            .should("have.css", "font-size", LIB_TOKENS["font-sizes"].body.px)
+    })
+
+    it("renders with icons", () => {
+        cy.mount(
+            <Tag
+                data-testid="testid"
+                fontSize="h4"
+                icons={{
+                    left: "star",
+                    right: (
+                        <Close
+                            size={getIconSizeFromFont("h4")}
+                            className=""
+                            data-testid=""
+                        />
+                    ),
+                }}
+                gap="m"
+                iconBaseUrl={SITE_DATA.TESTS_ICON_BASE_URL}
+            >
+                Hello
+            </Tag>
+        )
+        cy.dataTest().should("have.css", "gap", LIB_TOKENS.spacers.m)
+        cy.dataTest()
+            .children()
+            .eq(0)
+            .should("have.prop", "tagName", "svg")
+            .should("have.css", "width", LIB_TOKENS["font-sizes"].h4.px)
+        cy.dataTest().children().eq(1).should("have.prop", "tagName", "svg")
+    })
+})