@julseb-lib/react 0.0.51 → 0.0.53

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

@@ -1,37 +0,0 @@
-/*=============================================== GridPreview ===============================================*/
-
-import { Grid } from "../"
-import { GridItem } from "../../../../components/GridItem"
-import type { ILibGrid } from "../types"
-import type { ComponentPreview } from "../../../../data/components"
-
-export const gridPreview: ComponentPreview<ILibGrid> = {
-    name: "Grid",
-    component: Grid,
-    category: "layouts",
-    import: "Grid",
-    additionalImports: null,
-    optionalImports: null,
-    propsImport: "ILibGrid",
-    additionalTypeImports: null,
-    extends: ["HTMLDivElement"],
-    previews: [
-        {
-            props: {
-                col: 3,
-                columnGap: "s",
-                rowGap: "xxl",
-                "data-testid": "testid",
-                className: "className",
-                children: (
-                    <>
-                        <GridItem />
-                        <GridItem />
-                        <GridItem />
-                        <GridItem />
-                    </>
-                ),
-            },
-        },
-    ],
-}

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

@@ -1,39 +0,0 @@
-/*=============================================== Grid tests ===============================================*/
-
-import { Grid, LIB_TOKENS } from "../../.."
-
-describe("<Grid />", () => {
-    it("renders <Grid /> component", () => {
-        cy.mount(
-            <Grid data-testid="testid" className="className" col={3} gap="s">
-                <span>Hello</span>
-                <span>Hello</span>
-                <span>Hello</span>
-                <span>Hello</span>
-                <span>Hello</span>
-            </Grid>
-        )
-        cy.dataTest()
-            .should("exist")
-            .should("have.class", "className")
-            .should("have.css", "gap", LIB_TOKENS.spacers.s)
-    })
-
-    it("renders the grid as a `p`", () => {
-        cy.mount(
-            <Grid data-testid="testid" as="p">
-                <span>Hello</span>
-            </Grid>
-        )
-        cy.dataTest().should("have.prop", "tagName", "P")
-    })
-
-    it("renders the grid inline", () => {
-        cy.mount(
-            <Grid data-testid="testid" inline>
-                <span>Hello</span>
-            </Grid>
-        )
-        cy.dataTest().should("have.css", "display", "inline-grid")
-    })
-})

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

@@ -1,33 +0,0 @@
-/*=============================================== HeaderPreview ===============================================*/
-
-import { Link } from "react-router-dom"
-import { Header, Text } from "../../../"
-import type { ILibHeader } from "../../../types/components-props"
-import type { ComponentPreview } from "../../../../data/components"
-
-export const headerPreview: ComponentPreview<ILibHeader> = {
-    name: "Header",
-    component: Header,
-    category: "components",
-    import: "Header",
-    additionalImports: null,
-    optionalImports: null,
-    propsImport: "ILibHeader",
-    additionalTypeImports: ["LibHeaderLink"],
-    extends: ["HTMLDivElement"],
-    previews: [
-        {
-            demo: (
-                <Text>
-                    <Link
-                        to="/header/demo"
-                        target="_blank"
-                        rel="noreferrer noopener"
-                    >
-                        Demo
-                    </Link>
-                </Text>
-            ),
-        },
-    ],
-}

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

@@ -1,95 +0,0 @@
-/*=============================================== Header tests ===============================================*/
-
-import { Header, LIB_TOKENS } from "../../.."
-import type { LibHeaderLink } from "../../../types"
-
-const links: Array<LibHeaderLink> = [
-    {
-        text: "Link",
-        to: "/",
-    },
-    {
-        text: "Link",
-        to: "/about",
-    },
-    {
-        text: "Link",
-        to: "/hello",
-    },
-    {
-        text: "Button",
-        onClick: () => alert("Clicked"),
-    },
-]
-
-describe("<Header />", () => {
-    const search = () => cy.dataTest("testid.SearchInput")
-    const searchInput = () => cy.dataTest("testid.SearchInput.Input")
-    const logo = () => cy.dataTest("testid.HeaderLogo")
-    const nav = () => cy.dataTest("testid.HeaderNav")
-    const navLink = () => cy.dataTest("testid.NavLink")
-    const navButton = () => cy.dataTest("testid.NavButton")
-
-    it("renders <Header /> component", () => {
-        cy.mount(
-            <Header
-                data-testid="testid"
-                className="className"
-                links={links}
-                logo="Logo"
-            />
-        )
-        cy.dataTest().should("exist").should("have.class", "className")
-        logo()
-            .should("exist")
-            .should("have.text", "Logo")
-            .should("have.prop", "tagName", "A")
-            .should("have.attr", "href", "/")
-        nav().should("exist").should("have.class", "HeaderNav")
-        navLink().should("exist").should("have.length", 3)
-        navButton().should("exist").should("have.length", 1)
-        cy.dataTest()
-            .should(
-                "have.css",
-                "background-color",
-                LIB_TOKENS.colors.light["primary-500"].rgb
-            )
-            .should("have.css", "position", "relative")
-    })
-
-    it("renders a search", () => {
-        cy.mount(
-            <Header
-                data-testid="testid"
-                className="className"
-                links={links}
-                logo="Logo"
-                search={{ pathname: "/" }}
-            />
-        )
-
-        search().should("exist")
-        searchInput().should("exist")
-        searchInput().focus().type("Hello")
-        searchInput().should("have.value", "Hello")
-        searchInput().focus().type("{enter}")
-        searchInput().should("have.value", "")
-    })
-
-    it("renders a transparant variant", () => {
-        cy.mount(
-            <Header
-                data-testid="testid"
-                className="className"
-                links={links}
-                logo="Logo"
-                variant="transparent"
-            />
-        )
-        cy.dataTest().should(
-            "have.css",
-            "background-color",
-            LIB_TOKENS.colors.light.transparent.rgb
-        )
-    })
-})

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

@@ -1,26 +0,0 @@
-/*=============================================== HelmetPreview ===============================================*/
-
-import { Helmet } from "../../../"
-import type { ILibHelmet } from "../../../types/components-props"
-import type { ComponentPreview } from "../../../../data/components"
-
-export const helmetPreview: ComponentPreview<ILibHelmet> = {
-    name: "Helmet",
-    component: Helmet as any,
-    category: "components",
-    import: "Helmet",
-    additionalImports: null,
-    optionalImports: null,
-    propsImport: "ILibHelmet",
-    additionalTypeImports: null,
-    extends: ["HTMLDivElement"],
-    previews: [
-        {
-            previewTitle: "Default",
-            props: {
-                title: "Hello Helmet title",
-                keywords: ["foo", "baz", "bar"],
-            },
-        },
-    ],
-}

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

@@ -1,40 +0,0 @@
-/*=============================================== HighlightPreview ===============================================*/
-
-import { Highlight } from "../../../"
-import type { ILibHighlight } from "../../../types/components-props"
-import type { ComponentPreview } from "../../../../data/components"
-
-export const highlightPreview: ComponentPreview<ILibHighlight> = {
-    name: "Highlight",
-    component: Highlight,
-    category: "components",
-    import: "Highlight",
-    additionalImports: null,
-    optionalImports: null,
-    propsImport: "ILibHighlight",
-    additionalTypeImports: null,
-    extends: ["ILibText"],
-    previews: [
-        {
-            previewTitle: "Default",
-            props: {
-                highlightedText: "hello",
-                children: "Hello world",
-                "data-testid": "testid",
-                className: "className",
-            },
-        },
-        {
-            previewTitle: "With different styles",
-            props: {
-                highlightedText: "hello",
-                children: "Hello world",
-                "data-testid": "testid",
-                className: "className",
-                highlightStyle: {
-                    color: "red",
-                },
-            },
-        },
-    ],
-}

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

@@ -1,32 +0,0 @@
-/*=============================================== Highlight tests ===============================================*/
-
-import { Highlight } from "../../../"
-
-describe("<Highlight />", () => {
-    it("renders <Highlight /> component", () => {
-        cy.mount(
-            <Highlight
-                data-testid="testid"
-                className="className"
-                highlightedText="hello"
-            >
-                Hello world
-            </Highlight>
-        )
-        cy.dataTest()
-            .should("exist")
-            .should("have.class", "className")
-            .children()
-            .should("have.prop", "tagName", "STRONG")
-            .should("have.class", "HighlightedText")
-    })
-
-    it("highlights selected text", () => {
-        cy.mount(
-            <Highlight data-testid="testid" highlightedText="hello" tag="small">
-                Hello world
-            </Highlight>
-        )
-        cy.dataTest().get("strong").should("have.text", "Hello")
-    })
-})

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

@@ -1,32 +0,0 @@
-/*=============================================== HrPreview ===============================================*/
-
-import { Hr } from "../../../"
-import type { ILibHr } from "../../../types/components-props"
-import type { ComponentPreview } from "../../../../data/components"
-
-export const hrPreview: ComponentPreview<ILibHr> = {
-    name: "Hr",
-    component: Hr,
-    category: "components",
-    import: "Hr",
-    additionalImports: null,
-    optionalImports: null,
-    propsImport: "ILibHr",
-    additionalTypeImports: null,
-    extends: ["HTMLHRElement"],
-    previews: [
-        {
-            previewTitle: "Default",
-            props: { "data-testid": "testid", className: "className" },
-        },
-        {
-            previewTitle: "Rounded",
-            props: {
-                "data-testid": "testid",
-                className: "className",
-                isRounded: true,
-                height: 5,
-            },
-        },
-    ],
-}

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

@@ -1,69 +0,0 @@
-/*=============================================== Hr tests ===============================================*/
-
-import { Hr, LIB_TOKENS } from "../../.."
-import { stringifyPx } from "@julseb-lib/utils"
-
-describe("<Hr />", () => {
-    it("renders <Hr /> component", () => {
-        cy.mount(<Hr data-testid="testid" className="className" />)
-        cy.dataTest()
-            .should("exist")
-            .should("have.class", "className")
-            .should("have.prop", "tagName", "HR")
-            .should("have.css", "height", "1px")
-            .should(
-                "have.css",
-                "background-color",
-                LIB_TOKENS.colors.light["gray-200"].rgb
-            )
-            .should("have.css", "max-width", "100%")
-            .invoke("height")
-            .should("equal", 1)
-    })
-
-    it("renders a set height", () => {
-        const height = 8
-        cy.mount(<Hr data-testid="testid" height={height} />)
-        cy.dataTest().invoke("height").should("equal", height)
-    })
-
-    it("renders a set max width", () => {
-        const maxWidth = 200
-        cy.mount(<Hr data-testid="testid" maxWidth={maxWidth} />)
-        cy.dataTest().should("have.css", "max-width", `${maxWidth}px`)
-    })
-
-    it("renders with background color `primary-400`", () => {
-        cy.mount(<Hr data-testid="testid" color="primary-400" />)
-        cy.dataTest().should(
-            "have.css",
-            "background-color",
-            LIB_TOKENS.colors.light["primary-400"].rgb
-        )
-    })
-
-    it("renders with margin top 24px, margin bottom 16px and margins left & right 8px", () => {
-        cy.mount(
-            <Hr
-                data-testid="testid"
-                margin={{ top: "l", bottom: "m", leftRight: "xs" }}
-            />
-        )
-        cy.dataTest()
-            .should("have.css", "margin-top", LIB_TOKENS.spacers.l)
-            .should("have.css", "margin-bottom", LIB_TOKENS.spacers.m)
-            .should("have.css", "margin-left", LIB_TOKENS.spacers.xs)
-            .should("have.css", "margin-right", LIB_TOKENS.spacers.xs)
-    })
-
-    it("renders a rounded line", () => {
-        cy.mount(<Hr data-testid="testid" isRounded />)
-        cy.dataTest().should(
-            "have.css",
-            "border-radius",
-            stringifyPx(
-                Number(LIB_TOKENS.radiuses.round.replace("em", "")) * 16
-            )
-        )
-    })
-})

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

@@ -1,55 +0,0 @@
-/*=============================================== AccordionPreview ===============================================*/
-
-import styled from "styled-components"
-import { Icon, Text, Mixins } from "../../../"
-import type { ILibIcon } from "../../../types/components-props"
-import type { ComponentPreview } from "../../../../data/components"
-
-const IconMixin = styled(Text)`
-    &:before {
-        ${Mixins.Icon({
-            $name: "arrow-right",
-            $color: "danger-400",
-            $size: 32,
-        })}
-    }
-`
-
-export const iconPreview: ComponentPreview<ILibIcon> = {
-    name: "Icon",
-    component: Icon,
-    category: "components",
-    import: "Icon",
-    additionalImports: null,
-    optionalImports: null,
-    propsImport: "ILibIcon",
-    additionalTypeImports: null,
-    extends: [{ name: "SVGProps", from: "react-inlinesvg" }],
-    previews: [
-        {
-            previewTitle: "Default",
-            props: {
-                src: "arrow-left",
-                color: "success",
-                size: 120,
-                "data-testid": "testid",
-                className: "className",
-            },
-        },
-        {
-            previewTitle: "With baseUrl",
-            props: {
-                src: "warning",
-                baseURL: "icons-alt",
-                color: "danger",
-                size: 48,
-                "data-testid": "testid",
-                className: "className",
-            },
-        },
-        {
-            previewTitle: "With styled-components mixins",
-            demo: <IconMixin>Hello World</IconMixin>,
-        },
-    ],
-}

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

@@ -1,43 +0,0 @@
-/*=============================================== Icon tests ===============================================*/
-
-import { Icon, LIB_TOKENS } from "../../.."
-import { SITE_DATA } from "../../../../data"
-
-describe("<Icon />", () => {
-    it("renders <Icon /> component", () => {
-        cy.mount(
-            <Icon
-                data-testid="testid"
-                src="arrow-right"
-                className="className"
-                baseURL={SITE_DATA.TESTS_ICON_BASE_URL}
-            />
-        )
-        cy.dataTest()
-            .should("exist")
-            .should("have.class", "className")
-            .should("have.prop", "tagName", "svg")
-    })
-
-    it("renders an icon with a size of 120px and a `danger` color", () => {
-        const size = 120
-        cy.mount(
-            <Icon
-                data-testid="testid"
-                src="close"
-                color="danger"
-                size={size}
-                baseURL={SITE_DATA.TESTS_ICON_BASE_URL}
-            />
-        )
-
-        cy.dataTest()
-            .should(
-                "have.css",
-                "fill",
-                LIB_TOKENS.colors.light["danger-500"].rgb
-            )
-            .invoke("width")
-            .should("equal", size)
-    })
-})

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

@@ -1,59 +0,0 @@
-/*=============================================== IconMenuPreview ===============================================*/
-
-import { IconMenu } from "../../../"
-import { Check } from "../../../icons"
-import type { LibIconMenuItem } from "../../../types"
-import type { ILibIconMenu } from "../../../types/components-props"
-import type { ComponentPreview } from "../../../../data/components"
-
-const items: Array<LibIconMenuItem> = [
-    { icon: "edit", href: "/", label: "href" },
-    { icon: <Check />, to: "/", label: "to" },
-    { icon: "show", onClick: () => alert("Clicked"), label: "onClick" },
-]
-
-export const iconMenuPreview: ComponentPreview<ILibIconMenu> = {
-    name: "IconMenu",
-    component: IconMenu,
-    category: "components",
-    import: "IconMenu",
-    additionalImports: null,
-    optionalImports: ["IconMenuItem"],
-    propsImport: "ILibIconMenu",
-    additionalTypeImports: ["LibIconMenuItem"],
-    extends: ["HTMLDivElement"],
-    previews: [
-        {
-            previewTitle: "Default",
-            props: { items, "data-testid": "testid", className: "className" },
-        },
-        {
-            previewTitle: "With burger",
-            props: {
-                items,
-                icon: "burger",
-                "data-testid": "testid",
-                className: "className",
-            },
-        },
-        {
-            previewTitle: "Secondary color",
-            props: {
-                items,
-                color: "secondary",
-                "data-testid": "testid",
-                className: "className",
-            },
-        },
-        {
-            previewTitle: "Fixed",
-            props: {
-                items,
-                position: { position: "fixed", top: "xxl", right: "xxl" },
-                direction: "down",
-                "data-testid": "testid",
-                className: "className",
-            },
-        },
-    ],
-}

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

@@ -1,35 +0,0 @@
-/*=============================================== IconMenu tests ===============================================*/
-
-import { IconMenu } from "../../.."
-import { SITE_DATA } from "../../../../data"
-import { Check } from "../../../icons"
-import type { LibIconMenuItem } from "../../../types"
-
-const items: Array<LibIconMenuItem> = [
-    { icon: "edit", href: "/", label: "href" },
-    { icon: <Check />, to: "/", label: "to" },
-    { icon: "show", onClick: () => alert("Clicked"), label: "onClick" },
-]
-
-describe("<IconMenu />", () => {
-    it("renders <IconMenu /> component", () => {
-        cy.mount(
-            <IconMenu
-                data-testid="testid"
-                className="className"
-                items={items}
-                iconBaseUrl={SITE_DATA.TESTS_ICON_BASE_URL}
-            />
-        )
-        cy.dataTest().should("exist").should("have.class", "className")
-        cy.dataTest()
-            .children()
-            .should("have.length", items.length + 1)
-        cy.dataTest("testid.Item")
-            .should("have.length", items.length)
-            .should("have.css", "left", "0px")
-
-        cy.dataTest().click()
-        cy.dataTest("testid.Item").eq(0).should("have.css", "left", "56px")
-    })
-})