@julseb-lib/react 0.0.51 → 0.0.53

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

@@ -1,88 +0,0 @@
-/*=============================================== ImagePreview ===============================================*/
-
-import { Image } from "../../../"
-import type { ILibImage } from "../../../types/components-props"
-import type { ComponentPreview } from "../../../../data/components"
-
-const IMG_URL = "/images/image-card.jpg"
-const IMG_ALT = "Image"
-
-export const imagePreview: ComponentPreview<ILibImage> = {
-    name: "Image",
-    component: Image,
-    category: "components",
-    import: "Image",
-    additionalImports: null,
-    optionalImports: null,
-    propsImport: "ILibImage",
-    additionalTypeImports: null,
-    extends: ["HTMLImageElement", "ImgHTMLAttributes<HTMLImageElement>"],
-    previews: [
-        {
-            previewTitle: "Default",
-            props: {
-                src: IMG_URL,
-                alt: IMG_ALT,
-                "data-testid": "testid",
-                className: "className",
-            },
-        },
-        {
-            previewTitle: "With border radius",
-            props: {
-                src: IMG_URL,
-                alt: IMG_ALT,
-                borderRadius: "xxl",
-                "data-testid": "testid",
-                className: "className",
-            },
-        },
-        {
-            previewTitle: "With caption",
-            props: {
-                src: IMG_URL,
-                alt: IMG_ALT,
-                borderRadius: "xxl",
-                caption: "Caption",
-                "data-testid": "testid",
-                className: "className",
-            },
-        },
-        {
-            previewTitle: "With fit cover",
-            props: {
-                src: IMG_URL,
-                alt: IMG_ALT,
-                height: 300,
-                fit: "cover",
-                "data-testid": "testid",
-                className: "className",
-            },
-        },
-        {
-            previewTitle: "With fit contain",
-            props: {
-                src: IMG_URL,
-                alt: IMG_ALT,
-                height: 300,
-                fit: "contain",
-                caption: {
-                    text: "Caption",
-                    textColor: "secondary",
-                    background: "white-80",
-                },
-                "data-testid": "testid",
-                className: "className",
-            },
-        },
-        {
-            previewTitle: "With fallback text",
-            props: {
-                src: "/",
-                height: 300,
-                alt: "Hello",
-                imgFallback: { text: "Hello", fontSize: "display-h3" },
-            },
-        },
-    ],
-}

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

@@ -1,105 +0,0 @@
-/*=============================================== Image tests ===============================================*/
-
-import { Image, LIB_TOKENS } from "../../.."
-
-const IMG_URL = "/images/pic-avatar.jpg"
-
-describe("<Image />", () => {
-    it("renders <Image /> component", () => {
-        cy.mount(
-            <Image
-                data-testid="testid"
-                className="className"
-                src={IMG_URL}
-                width={100}
-            />
-        )
-        cy.dataTest()
-            .should("exist")
-            .should("have.class", "className")
-            .should("have.prop", "tagName", "IMG")
-            .invoke("width")
-            .should("equal", 100)
-
-        cy.dataTest("testid.Caption").should("not.exist")
-    })
-
-    it("renders with a set object fit, aspect ratio & border radius", () => {
-        const fit = "contain"
-        const aspectRatio = "16 / 9"
-
-        cy.mount(
-            <Image
-                data-testid="testid"
-                src={IMG_URL}
-                fit={fit}
-                aspectRatio={aspectRatio}
-                borderRadius="xs"
-            />
-        )
-        cy.dataTest()
-            .should("have.css", "object-fit", fit)
-            .should("have.css", "aspect-ratio", aspectRatio)
-            .should("have.css", "border-radius", LIB_TOKENS.radiuses.xs)
-    })
-
-    it("renders with a caption", () => {
-        cy.mount(
-            <Image
-                data-testid="testid"
-                src={IMG_URL}
-                caption="Hello"
-                width={200}
-                className="Image"
-            />
-        )
-        cy.dataTest()
-            .should("have.prop", "tagName", "FIGURE")
-            .should("have.class", "Image")
-        cy.dataTest("testid.Image")
-            .should("exist")
-            .should("have.class", "Image")
-        cy.dataTest("testid.Caption")
-            .should("exist")
-            .should("have.class", "Caption")
-            .should("have.prop", "tagName", "FIGCAPTION")
-            .should(
-                "have.css",
-                "background-color",
-                LIB_TOKENS.overlays["black-50"]
-            )
-            .should("have.css", "color", LIB_TOKENS.colors.light.white.rgb)
-            .should("have.text", "Hello")
-    })
-
-    it("renders with a caption and a set background", () => {
-        cy.mount(
-            <Image
-                data-testid="testid"
-                src={IMG_URL}
-                caption={{
-                    text: "Hello",
-                    background: "white-80",
-                    textColor: "primary",
-                }}
-                width={200}
-            />
-        )
-
-        cy.dataTest().should("have.prop", "tagName", "FIGURE")
-        cy.dataTest("testid.Caption")
-            .should("exist")
-            .should("have.prop", "tagName", "FIGCAPTION")
-            .should(
-                "have.css",
-                "background-color",
-                LIB_TOKENS.overlays["white-80"]
-            )
-            .should(
-                "have.css",
-                "color",
-                LIB_TOKENS.colors.light["primary-500"].rgb
-            )
-            .should("have.text", "Hello")
-    })
-})

package/src/lib/components/Input/__preview__/Input.demo.tsx

@@ -1,73 +0,0 @@
-/*=============================================== InputDemo ===============================================*/
-
-import { useState, type ChangeEvent } from "react"
-import { Input } from "../../../"
-import type { LibValidationStatus } from "../../../types"
-
-export const InputDemoValidation = () => {
-    const [input, setInput] = useState("")
-    const [validation, setValidation] = useState<LibValidationStatus>(undefined)
-
-    const handleValidate = (e: ChangeEvent<HTMLInputElement>) => {
-        setInput(e.target.value)
-
-        if (e.target.value.length > 3) {
-            setValidation(true)
-        } else {
-            setValidation(false)
-        }
-    }
-
-    return (
-        <Input
-            id="validation"
-            validation={{
-                status: validation,
-                message: "Validation message",
-            }}
-            value={input}
-            onChange={handleValidate}
-            data-testid="testid"
-            className="className"
-            prefix="Prefix"
-            suffix="Suffix"
-        />
-    )
-}
-
-export const InputDemoCounter = () => {
-    const [input, setInput] = useState("")
-
-    return (
-        <Input
-            label="Input with counter"
-            counter
-            maxLength={140}
-            value={input}
-            onChange={e => setInput(e.target.value)}
-            data-testid="testid"
-            className="className"
-            prefix="Prefix"
-            suffix="Suffix"
-        />
-    )
-}
-
-export const InputSearch = () => {
-    const [value, setValue] = useState("")
-
-    return (
-        <Input
-            data-testid="testid"
-            className="className"
-            id="search"
-            type="search"
-            value={value}
-            onChange={e => setValue(e.target.value)}
-            clearSearch={() => setValue("")}
-            icon="search"
-            focusKeys={["Command", "KeyJ"]}
-            showKeys
-        />
-    )
-}

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

@@ -1,164 +0,0 @@
-/*=============================================== InputPreview ===============================================*/
-
-import { Input } from "../../../"
-import {
-    InputDemoValidation,
-    InputDemoCounter,
-    InputSearch,
-} from "./Input.demo"
-import type { ILibInput } from "../../../types/components-props"
-import type { ComponentPreview } from "../../../../data/components"
-
-export const inputPreview: ComponentPreview<ILibInput> = {
-    name: "Input",
-    component: Input,
-    category: "components",
-    import: "Input",
-    additionalImports: null,
-    optionalImports: null,
-    propsImport: "ILibInput",
-    additionalTypeImports: null,
-    extends: ["InputHTMLAttributes<HTMLInputElement>", "ILibInputBase"],
-    previews: [
-        {
-            previewTitle: "With InputContainer",
-            props: {
-                label: "Label",
-                labelComment: "LabelComment",
-                helper: "Helper",
-                helperBottom: {
-                    text: "Helper bottom",
-                    icon: "check",
-                    iconColor: "success",
-                },
-                prefix: "Hello",
-                suffix: "World",
-                "data-testid": "testid",
-                className: "className",
-                placeholder: "Placeholder",
-            },
-        },
-        {
-            previewTitle: "File",
-            props: {
-                type: "file",
-                "data-testid": "testid",
-                className: "className",
-            },
-        },
-        {
-            previewTitle: "Color",
-            props: {
-                type: "color",
-                "data-testid": "testid",
-                className: "className",
-            },
-        },
-        {
-            previewTitle: "Disabled",
-            props: {
-                disabled: true,
-                "data-testid": "testid",
-                className: "className",
-            },
-        },
-        {
-            previewTitle: "With icon",
-            props: {
-                icon: "mail",
-                "data-testid": "testid",
-                className: "className",
-            },
-        },
-        {
-            previewTitle: "Focus on keypress",
-            demo: <InputSearch />,
-        },
-        {
-            previewTitle: "Date & time",
-            demo: (
-                <>
-                    <Input id="input-date" type="date" data-testid="testid" />
-                    <Input
-                        id="input-datetime"
-                        type="datetime-local"
-                        data-testid="testid"
-                    />
-                    <Input id="input-month" type="month" data-testid="testid" />
-                    <Input id="input-week" type="week" data-testid="testid" />
-                    <Input id="input-time" type="time" data-testid="testid" />
-                </>
-            ),
-        },
-        { previewTitle: "With validation", demo: <InputDemoValidation /> },
-        {
-            previewTitle: "With counter and maxLength",
-            demo: <InputDemoCounter />,
-        },
-        {
-            previewTitle: "Password",
-            props: {
-                type: "password",
-                "data-testid": "testid",
-                className: "className",
-                prefix: "Hello",
-            },
-        },
-        {
-            previewTitle: "Pill",
-            props: {
-                inputVariant: "pill",
-                "data-testid": "testid",
-                className: "className",
-            },
-        },
-        {
-            previewTitle: "Pill with icon",
-            props: {
-                inputVariant: "pill",
-                "data-testid": "testid",
-                className: "className",
-                icon: "send",
-            },
-        },
-        {
-            previewTitle: "With background light",
-            props: {
-                inputBackground: "light",
-                "data-testid": "testid",
-                className: "className",
-                prefix: "Hello",
-                suffix: "World",
-            },
-        },
-        {
-            previewTitle: "With background dark",
-            props: {
-                inputBackground: "dark",
-                "data-testid": "testid",
-                className: "className",
-                prefix: "Hello",
-                suffix: "World",
-            },
-        },
-        {
-            previewTitle: "Select",
-            props: {
-                type: "select",
-                children: <option value="1">1</option>,
-                "data-testid": "testid",
-                className: "className",
-                icon: "user",
-            },
-        },
-        {
-            previewTitle: "Textarea",
-            props: {
-                type: "textarea",
-                "data-testid": "testid",
-                className: "className",
-                label: "Textarea",
-            },
-        },
-    ],
-}

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

@@ -1,145 +0,0 @@
-/*=============================================== Image tests ===============================================*/
-
-import { Input, LIB_TOKENS } from "../../.."
-import { InputPropsPreview, InputSearchPreview } from "./Preview"
-
-describe("<Input />", () => {
-    it("renders <Input /> component", () => {
-        cy.mount(<Input data-testid="testid" className="className" />)
-        cy.dataTest()
-            .should("exist")
-            .should("have.class", "className")
-            .should("have.prop", "tagName", "DIV")
-            .should(
-                "have.css",
-                "border-color",
-                LIB_TOKENS.colors.light["gray-200"].rgb
-            )
-
-        cy.dataTest("testid.Input").focus().type("Hello")
-
-        cy.dataTest().should(
-            "have.css",
-            "border-color",
-            LIB_TOKENS.colors.light["primary-500"].rgb
-        )
-
-        cy.dataTest("testid.Input").should("have.value", "Hello")
-    })
-
-    it("renders several props", () => {
-        cy.mount(<InputPropsPreview />)
-
-        cy.dataTest().should("exist").should("have.class", "className")
-
-        cy.dataTest("testid.Label")
-            .should("exist")
-            .should("have.class", "Label")
-
-        cy.dataTest("testid.Helper")
-            .should("exist")
-            .should("have.class", "Helper")
-
-        cy.dataTest("testid.HelperBottomContainer")
-            .should("exist")
-            .should("have.class", "HelperBottomContainer")
-
-        cy.dataTest("testid.HelperBottom.IconContainer")
-            .should("exist")
-            .should("have.class", "BottomIconContainer")
-
-        cy.dataTest("testid.HelperBottom.IconContainer.Icon")
-            .should("exist")
-            .should("have.class", "HelperBottomIcon")
-
-        cy.dataTest("testid.Counter")
-            .should("exist")
-            .should("have.class", "Counter")
-
-        cy.dataTest("testid.ValidationHelper")
-            .should("exist")
-            .should("have.class", "ValidationHelper")
-
-        cy.dataTest("testid.ValidationHelper.IconContainer")
-            .should("exist")
-            .should("have.class", "ValidationIconContainerBottom")
-
-        cy.dataTest("testid.ValidationHelper.IconContainer")
-            .should("exist")
-            .should("have.class", "ValidationIconContainerBottom")
-        cy.dataTest("testid.ValidationHelper.Text")
-            .should("exist")
-            .should("have.class", "ValidationTextBottom")
-        cy.dataTest("testid.Input")
-            .should("exist")
-            .should("have.class", "Input")
-    })
-
-    it("renders an input color", () => {
-        cy.mount(
-            <Input
-                data-testid="testid"
-                type="color"
-                inputVariant="pill"
-                inputBackground="dark"
-            />
-        )
-
-        cy.dataTest()
-            .should("exist")
-            .should(
-                "have.css",
-                "background-color",
-                LIB_TOKENS.colors.dark.background.rgb
-            )
-            .should("have.css", "border-radius", "1584px")
-    })
-
-    it("renders an input password", () => {
-        cy.mount(<Input data-testid="testid" type="password" />)
-        cy.dataTest().should("exist")
-
-        cy.dataTest("testid.Input")
-            .should("have.attr", "type", "password")
-            .type("Hello")
-        cy.dataTest("testid.Button").click()
-        cy.dataTest("testid.Input").should("have.attr", "type", "text")
-    })
-
-    it("renders an input password without button", () => {
-        cy.mount(<Input data-testid="testid" type="password" hideButton />)
-        cy.dataTest("testid.Button").should("not.exist")
-    })
-
-    it("renders a search input", () => {
-        cy.mount(<InputSearchPreview />)
-        cy.dataTest("testid.Input").should("exist")
-        cy.dataTest("testid.Button").should("not.exist")
-        cy.dataTest("testid.Input").type("Hello")
-        cy.dataTest("testid.Button").should("exist")
-        cy.dataTest("testid.Button").click()
-        cy.dataTest("testid.Input").should("have.value", "")
-        cy.dataTest("testid.Button").should("not.exist")
-    })
-
-    it("renders a select", () => {
-        cy.mount(
-            <Input data-testid="testid" type="select">
-                <option value="0">0</option>
-                <option value="1">1</option>
-                <option value="2">2</option>
-            </Input>
-        )
-        cy.dataTest("testid.Select")
-            .should("exist")
-            .should("have.prop", "tagName", "SELECT")
-    })
-
-    it("renders a textarea", () => {
-        cy.mount(<Input data-testid="testid" type="textarea" />)
-        cy.dataTest().should("exist").should("have.prop", "tagName", "DIV")
-        cy.dataTest("testid.Textarea")
-            .should("exist")
-            .should("have.prop", "tagName", "TEXTAREA")
-    })
-})

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

@@ -1,52 +0,0 @@
-/*=============================================== Input tests previews ===============================================*/
-
-import { useState, type ChangeEvent } from "react"
-import { Input } from "../../.."
-import { SITE_DATA } from "../../../../data"
-
-export const InputPropsPreview = () => {
-    const [input, setInput] = useState("")
-
-    return (
-        <Input
-            data-testid="testid"
-            className="className"
-            label="Label"
-            helper="Helper"
-            helperBottom={{
-                text: "Helper bottom",
-                textColor: "secondary",
-                icon: "chevron-left",
-                iconColor: "warning",
-                fontStyle: "oblique",
-                iconSize: 24,
-            }}
-            counter
-            maxLength={8}
-            validation={{
-                status: false,
-                message: "Validation message",
-            }}
-            icon="mail"
-            value={input}
-            onChange={(e: ChangeEvent<HTMLInputElement>) =>
-                setInput(e.target.value)
-            }
-            iconBaseUrl={SITE_DATA.TESTS_ICON_BASE_URL}
-        />
-    )
-}
-
-export const InputSearchPreview = () => {
-    const [search, setSearch] = useState("")
-
-    return (
-        <Input
-            data-testid="testid"
-            type="search"
-            value={search}
-            onChange={e => setSearch(e.target.value)}
-            clearSearch={() => setSearch("")}
-        />
-    )
-}