@julseb-lib/react 0.0.51 → 0.0.53

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

@@ -1,62 +0,0 @@
-/*=============================================== DropdownPreview ===============================================*/
-
-import { useState } from "react"
-import { Dropdown, DropdownContainer, Button } from "../../../"
-import type { LibDropdownItem } from "../../../types"
-import type { ILibDropdown } from "../../../types/components-props"
-import type { ComponentPreview } from "../../../../data/components"
-
-const items: Array<LibDropdownItem> = [
-    {
-        text: "Link",
-        to: "/",
-    },
-    {
-        text: "Button",
-        onClick: () => alert("Clicked"),
-    },
-    {
-        text: "Button with icon",
-        onClick: () => alert("Clicked icon"),
-        icon: "mail",
-    },
-    {
-        text: "Disabled",
-        disabled: true,
-        onClick: () => alert("This shouldn't work"),
-    },
-]
-
-const DropdownDemo = () => {
-    const [isOpen, setIsOpen] = useState(false)
-
-    return (
-        <DropdownContainer
-            isOpen={isOpen}
-            data-testid="testid"
-            className="className"
-        >
-            <Button onClick={() => setIsOpen(!isOpen)}>Open</Button>
-            <Dropdown
-                items={items}
-                isOpen={isOpen}
-                setIsOpen={setIsOpen}
-                data-testid="testid.Dropdown"
-                className="Dropdown"
-            />
-        </DropdownContainer>
-    )
-}
-
-export const dropdownPreview: ComponentPreview<ILibDropdown> = {
-    name: "Dropdown",
-    component: Dropdown,
-    category: "components",
-    import: "Dropdown",
-    additionalImports: null,
-    optionalImports: ["DropdownContainer"],
-    propsImport: "ILibDropdown",
-    additionalTypeImports: ["LibDropdownItem"],
-    extends: ["HTMLDivElement"],
-    previews: [{ demo: <DropdownDemo /> }],
-}

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

@@ -1,73 +0,0 @@
-/*=============================================== Dropdown tests ===============================================*/
-
-import { LIB_TOKENS } from "../../.."
-import { Preview, PreviewDirection, PreviewColor } from "./Preview"
-
-describe("<Dropdown />", () => {
-    it("renders <Dropdown /> component", () => {
-        cy.mount(<Preview />)
-        cy.dataTest().should("exist").should("have.class", "className")
-        cy.dataTest("testid.Dropdown")
-            .should("exist")
-            .should("have.class", "Dropdown")
-            .should("not.be.visible")
-
-        cy.dataTest("Button").click()
-        cy.dataTest("testid.Dropdown").should("be.visible")
-
-        cy.dataTest("testid.Dropdown.DropdownItem")
-            .should("exist")
-            .should("be.visible")
-
-        const stub = cy.stub()
-        cy.on("window:alert", stub)
-
-        cy.dataTest("testid.Dropdown.DropdownItem")
-            .last()
-            .click()
-            .then(() => {
-                expect(stub.getCall(0)).to.be.calledWith("Clicked icon")
-            })
-
-        cy.get("body").click()
-        cy.dataTest("testid.Dropdown").should("not.be.visible")
-    })
-
-    it("renders a different direction & position from button", () => {
-        cy.mount(<PreviewDirection />)
-
-        cy.dataTest().should("have.css", "justify-content", "flex-end")
-        cy.dataTest("testid.Dropdown")
-            .should("have.css", "right", "0px")
-            .should("have.css", "bottom", "48px")
-
-        cy.dataTest("Button").click()
-        cy.dataTest("testid.Dropdown").should("have.css", "max-height", "100px")
-    })
-
-    it("renders link or button and different accent color", () => {
-        cy.mount(<PreviewColor />)
-        cy.dataTest("Button").click()
-
-        cy.dataTest("testid.Dropdown.DropdownItem").should(
-            "have.css",
-            "color",
-            LIB_TOKENS.colors.light["danger-500"].rgb
-        )
-
-        cy.dataTest("testid.Dropdown.DropdownItem")
-            .eq(0)
-            .should("have.prop", "tagName", "A")
-            .should("not.contain.html", "span")
-
-        cy.dataTest("testid.Dropdown.DropdownItem")
-            .eq(1)
-            .should("have.prop", "tagName", "BUTTON")
-            .should("not.contain.html", "span")
-
-        cy.dataTest("testid.Dropdown.DropdownItem")
-            .eq(2)
-            .should("have.prop", "tagName", "BUTTON")
-            .should("contain.html", "span")
-    })
-})

package/src/lib/components/Dropdown/__tests__/Preview.tsx

@@ -1,103 +0,0 @@
-/*=============================================== DropdownPreview ===============================================*/
-
-import { useState } from "react"
-import { DropdownContainer, Dropdown, Button } from "../../../"
-import type { LibDropdownItem } from "../../../types"
-
-const items: Array<LibDropdownItem> = [
-    {
-        text: "Link",
-        to: "/",
-    },
-    {
-        text: "Button",
-        onClick: () => alert("Clicked"),
-    },
-    {
-        text: "Button with icon",
-        onClick: () => alert("Clicked icon"),
-        icon: "mail",
-    },
-]
-
-export const Preview = () => {
-    const [isOpen, setIsOpen] = useState(false)
-
-    return (
-        <DropdownContainer
-            isOpen={isOpen}
-            data-testid="testid"
-            className="className"
-        >
-            <Button onClick={() => setIsOpen(!isOpen)} data-testid="Button">
-                Open dropdown
-            </Button>
-
-            <Dropdown
-                isOpen={isOpen}
-                setIsOpen={setIsOpen}
-                items={items}
-                data-testid="testid.Dropdown"
-                className="Dropdown"
-            />
-        </DropdownContainer>
-    )
-}
-
-export const PreviewDirection = () => {
-    const [isOpen, setIsOpen] = useState(false)
-
-    return (
-        <DropdownContainer
-            isOpen={isOpen}
-            data-testid="testid"
-            className="className"
-            justifyContent="flex-end"
-        >
-            <Button onClick={() => setIsOpen(!isOpen)} data-testid="Button">
-                Open dropdown
-            </Button>
-
-            <Dropdown
-                isOpen={isOpen}
-                setIsOpen={setIsOpen}
-                items={items}
-                data-testid="testid.Dropdown"
-                className="Dropdown"
-                direction="up"
-                positionFromButton={48}
-                maxHeightOpen={100}
-            />
-        </DropdownContainer>
-    )
-}
-
-export const PreviewColor = () => {
-    const [isOpen, setIsOpen] = useState(false)
-
-    return (
-        <DropdownContainer
-            isOpen={isOpen}
-            data-testid="testid"
-            className="className"
-            justifyContent="flex-end"
-        >
-            <Button
-                onClick={() => setIsOpen(!isOpen)}
-                data-testid="Button"
-                color="danger"
-            >
-                Open dropdown
-            </Button>
-
-            <Dropdown
-                isOpen={isOpen}
-                setIsOpen={setIsOpen}
-                items={items}
-                data-testid="testid.Dropdown"
-                className="Dropdown"
-                accentColor="danger"
-            />
-        </DropdownContainer>
-    )
-}

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

@@ -1,37 +0,0 @@
-/*=============================================== FadePreview ===============================================*/
-
-import { Fade, generateNumbers, Text } from "../../../"
-import type { ILibFade } from "../../../types/components-props"
-import type { ComponentPreview } from "../../../../data/components"
-
-const text =
-    "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ac ullamcorper risus. Sed porttitor dolor eget leo accumsan ultricies. Morbi feugiat libero a mi sollicitudin, et varius eros porttitor. Aliquam ac elementum erat, interdum cursus tortor. Maecenas faucibus mollis nisl. Integer vel justo leo. Donec ac magna vel est blandit tristique. Cras nec mauris dictum elit blandit pellentesque sed vel sem. Nam ullamcorper malesuada orci, ac cursus mi convallis at. Donec aliquet pharetra velit, non suscipit elit consectetur vitae. Praesent suscipit, mi a interdum maximus, tellus metus feugiat urna, sed semper felis enim sed magna. Donec vestibulum commodo sapien quis lobortis. Maecenas et venenatis elit. Sed sed porttitor ante. Curabitur eu orci tristique, tristique justo eu, tempus elit."
-
-export const fadePreview: ComponentPreview<ILibFade> = {
-    name: "Fade",
-    component: Fade,
-    category: "components",
-    import: "Fade",
-    additionalImports: null,
-    optionalImports: null,
-    propsImport: "ILibFade",
-    additionalTypeImports: null,
-    extends: ["HTMLDivElement"],
-    previews: [
-        {
-            demo: (
-                <>
-                    {generateNumbers(0, 10).map(i => (
-                        <Fade
-                            key={i}
-                            data-testid="testid"
-                            className="className"
-                        >
-                            <Text>{text}</Text>
-                        </Fade>
-                    ))}
-                </>
-            ),
-        },
-    ],
-}

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

@@ -1,41 +0,0 @@
-/*=============================================== FieldsetPreview ===============================================*/
-
-import { Fieldset } from "../../../"
-import { ChildrenCheck, ChildrenCheckValidate, ChildrenText } from "./Previews"
-import type { ILibFieldset } from "../../../types/components-props"
-import type { ComponentPreview } from "../../../../data/components"
-
-export const fieldsetPreview: ComponentPreview<ILibFieldset> = {
-    name: "Fieldset",
-    component: Fieldset,
-    category: "components",
-    import: "Fieldset",
-    additionalImports: null,
-    optionalImports: null,
-    propsImport: "ILibFieldset",
-    additionalTypeImports: null,
-    extends: ["HTMLFieldSetElement"],
-    previews: [
-        {
-            previewTitle: "With check inputs",
-            props: { legend: "Favourite word?", children: <ChildrenCheck /> },
-        },
-        {
-            previewTitle: "With text inputs",
-            props: {
-                legend: "User information",
-                children: <ChildrenText />,
-                flexDirection: "column",
-                alignItems: "stretch",
-            },
-        },
-        {
-            previewTitle: "With validation",
-            props: {
-                legend: "Favourite word?",
-                children: <ChildrenCheckValidate />,
-                validation: { status: false, message: "This is required." },
-            },
-        },
-    ],
-}

package/src/lib/components/Fieldset/__preview__/Previews.tsx

@@ -1,72 +0,0 @@
-/*=============================================== Fieldset previews ===============================================*/
-
-import { InputCheck, Input } from "../../../"
-
-export const ChildrenCheck = () => {
-    return (
-        <>
-            <InputCheck
-                id="hello"
-                name="inputs-check"
-                type="radio"
-                label="Hello"
-            />
-            <InputCheck
-                id="world"
-                name="inputs-check"
-                type="radio"
-                label="World"
-            />
-
-            <InputCheck id="foo" name="inputs-check" type="radio" label="Foo" />
-
-            <InputCheck id="baz" name="inputs-check" type="radio" label="Baz" />
-        </>
-    )
-}
-
-export const ChildrenText = () => {
-    return (
-        <>
-            <Input label="Name" />
-            <Input label="Email" type="email" />
-        </>
-    )
-}
-
-export const ChildrenCheckValidate = () => {
-    return (
-        <>
-            <InputCheck
-                id="hello-validate"
-                name="inputs-check"
-                type="radio"
-                label="Hello"
-                validation={false}
-            />
-            <InputCheck
-                id="world-validate"
-                name="inputs-check"
-                type="radio"
-                label="World"
-                validation={false}
-            />
-
-            <InputCheck
-                id="foo-validate"
-                name="inputs-check"
-                type="radio"
-                label="Foo"
-                validation={false}
-            />
-
-            <InputCheck
-                id="baz-validate"
-                name="inputs-check"
-                type="radio"
-                label="Baz"
-                validation={false}
-            />
-        </>
-    )
-}

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

@@ -1,38 +0,0 @@
-/*=============================================== FlexboxPreview ===============================================*/
-
-import { Flexbox } from "../"
-import { GridItem } from "../../../../components"
-import type { ILibFlexbox } from "../types"
-import type { ComponentPreview } from "../../../../data/components"
-
-export const flexboxPreview: ComponentPreview<ILibFlexbox> = {
-    name: "Flexbox",
-    component: Flexbox,
-    category: "layouts",
-    import: "Flexbox",
-    additionalImports: null,
-    optionalImports: null,
-    propsImport: "ILibFlexbox",
-    additionalTypeImports: null,
-    extends: ["HTMLDivElement"],
-    previews: [
-        {
-            props: {
-                flexDirection: "column-reverse",
-                rowGap: "xs",
-                alignItems: "flex-end",
-                justifyContent: "flex-end",
-                "data-testid": "testid",
-                className: "className",
-                children: (
-                    <>
-                        <GridItem />
-                        <GridItem>Longer item</GridItem>
-                        <GridItem />
-                        <GridItem>Even longer item</GridItem>
-                    </>
-                ),
-            },
-        },
-    ],
-}

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

@@ -1,23 +0,0 @@
-/*=============================================== Flexbox tests ===============================================*/
-
-import { Flexbox, LIB_TOKENS } from "../../.."
-
-describe("<Flexbox />", () => {
-    it("renders <Flexbox /> component", () => {
-        cy.mount(
-            <Flexbox
-                data-testid="testid"
-                className="className"
-                flexDirection="column"
-                gap="s"
-            >
-                Hello
-            </Flexbox>
-        )
-        cy.dataTest()
-            .should("exist")
-            .should("have.class", "className")
-            .should("have.css", "flex-direction", "column")
-            .should("have.css", "gap", LIB_TOKENS.spacers.s)
-    })
-})

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

@@ -1,69 +0,0 @@
-/*=============================================== FooterPreview ===============================================*/
-
-import { Footer } from "../../../"
-import type { LibFooterLink } from "../../../types"
-import type { ILibFooter } from "../../../types/components-props"
-import type { ComponentPreview } from "../../../../data/components"
-
-const items: Array<LibFooterLink> = [
-    {
-        text: "Link",
-        href: "#",
-    },
-    {
-        text: "Router Link",
-        to: "/",
-    },
-    {
-        text: "Button",
-        onClick: () => console.log("Clicked!"),
-    },
-    {
-        text: "Button",
-        onClick: () => console.log("Clicked!"),
-    },
-]
-
-export const footerPreview: ComponentPreview<ILibFooter> = {
-    name: "Footer",
-    component: Footer,
-    category: "components",
-    import: "Footer",
-    additionalImports: null,
-    optionalImports: null,
-    propsImport: "ILibFooter",
-    additionalTypeImports: ["LibFooterLink"],
-    extends: ["HTMLDivElement"],
-    previews: [
-        {
-            previewTitle: "Default",
-            props: {
-                logo: { text: "Hello" },
-                links: items,
-                "data-testid": "testid",
-                className: "className",
-            },
-        },
-        {
-            previewTitle: "Vertical with logo",
-            props: {
-                links: items,
-                logo: { img: "/images/logo-fajny-css.svg" },
-                linksSeparator: "dash",
-                direction: "vertical",
-                "data-testid": "testid",
-                className: "className",
-            },
-        },
-        {
-            previewTitle: "Vertical",
-            props: {
-                links: items,
-                withSeparator: true,
-                direction: "vertical",
-                "data-testid": "testid",
-                className: "className",
-            },
-        },
-    ],
-}

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

@@ -1,76 +0,0 @@
-/*=============================================== FormPreview ===============================================*/
-
-import { useState, type ChangeEvent, type FormEvent } from "react"
-import { Form, Input } from "../../../"
-import type { ILibForm } from "../../../types/components-props"
-import type { ComponentPreview } from "../../../../data/components"
-
-const FormDemo = () => {
-    const [inputs, setInputs] = useState({
-        name: "Jul",
-        email: "a@b.com",
-        password: "pass",
-    })
-
-    const handleInputs = (e: ChangeEvent<HTMLInputElement>) =>
-        setInputs({
-            ...inputs,
-            [e.target.id]: e.target.value,
-        })
-
-    const resetForm = () =>
-        setInputs({
-            name: "",
-            email: "",
-            password: "",
-        })
-
-    const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
-        e.preventDefault()
-        alert(JSON.stringify(inputs))
-    }
-
-    return (
-        <Form
-            buttonPrimary={{ text: "Submit", iconLeft: "send" }}
-            buttonSecondary={{ text: "Reset", onClick: resetForm }}
-            onSubmit={handleSubmit}
-            data-testid="testid"
-            className="className"
-        >
-            <Input
-                id="name"
-                label="Name"
-                onChange={handleInputs}
-                value={inputs.name}
-            />
-            <Input
-                id="email"
-                label="Email"
-                type="email"
-                onChange={handleInputs}
-                value={inputs.email}
-            />
-            <Input
-                id="password"
-                label="Password"
-                type="password"
-                onChange={handleInputs}
-                value={inputs.password}
-            />
-        </Form>
-    )
-}
-
-export const formPreview: ComponentPreview<ILibForm> = {
-    name: "Form",
-    component: Form,
-    category: "components",
-    import: "Form",
-    additionalImports: null,
-    optionalImports: null,
-    propsImport: "ILibForm",
-    additionalTypeImports: null,
-    extends: ["HTMLFormElement"],
-    previews: [{ previewTitle: "Default", demo: <FormDemo /> }],
-}

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

@@ -1,33 +0,0 @@
-/*=============================================== FullBleedPreview ===============================================*/
-
-import { Link } from "react-router-dom"
-import { FullBleed, Text } from "../../../"
-import type { ILibFullBleed } from "../../../types/components-props"
-import type { ComponentPreview } from "../../../../data/components"
-
-export const fullBleedPreview: ComponentPreview<ILibFullBleed> = {
-    name: "FullBleed",
-    component: FullBleed,
-    category: "components",
-    import: "FullBleed",
-    additionalImports: null,
-    optionalImports: null,
-    propsImport: "ILibFullBleed",
-    additionalTypeImports: null,
-    extends: ["HTMLDivElement"],
-    previews: [
-        {
-            demo: (
-                <Text>
-                    <Link
-                        to="/demos/main-full"
-                        target="_blank"
-                        rel="noreferrer noopener"
-                    >
-                        Demo here
-                    </Link>
-                </Text>
-            ),
-        },
-    ],
-}

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

@@ -1,27 +0,0 @@
-/*=============================================== FullBleed tests ===============================================*/
-
-import { FullBleed, Image } from "../../.."
-
-describe("<FullBleed />", () => {
-    it("renders <FullBleed /> component", () => {
-        cy.mount(
-            <FullBleed data-testid="testid" className="className">
-                Hello
-            </FullBleed>
-        )
-        cy.dataTest().should("exist").should("have.class", "className")
-    })
-
-    it("renders the image inside with a set height", () => {
-        cy.mount(
-            <FullBleed data-testid="testid" height={150}>
-                <Image
-                    src="https://images.unsplash.com/photo-1643028468604-858ea2a9c111?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1932&q=80"
-                    alt="Full bleed"
-                    fit="cover"
-                />
-            </FullBleed>
-        )
-        cy.dataTest().children().invoke("height").should("equal", 150)
-    })
-})