@julseb-lib/react 0.0.50 → 0.0.51

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

@@ -0,0 +1,422 @@
+/*=============================================== InputCheck demo ===============================================*/
+
+import type { ReactNode } from "react"
+import type { CssFlexDirection, LibSpacers } from "../../../types"
+import { InputCheck, Flexbox } from "../../../"
+
+const FlexDemo = ({
+    children,
+    flexDirection = "row",
+    gap = "m",
+}: {
+    children?: ReactNode
+    flexDirection?: CssFlexDirection
+    gap?: LibSpacers
+}) => {
+    return (
+        <Flexbox
+            gap={gap}
+            flexDirection={flexDirection}
+            flexWrap="wrap"
+            style={{ width: "100%" }}
+        >
+            {children}
+        </Flexbox>
+    )
+}
+
+export const InputCheckDemoCheckbox = () => {
+    return (
+        <FlexDemo>
+            <InputCheck
+                id="checkbox-1"
+                name="checkbox-demo-1"
+                type="checkbox"
+                data-testid="testid"
+                className="className"
+                label="Checkbox"
+            />
+            <InputCheck
+                id="checkbox-2"
+                name="checkbox-demo-1"
+                type="checkbox"
+                defaultChecked
+                data-testid="testid"
+                className="className"
+                label="Checkbox"
+            />
+            <InputCheck
+                id="checkbox-3"
+                name="checkbox-demo-2"
+                type="checkbox"
+                validation={false}
+                data-testid="testid"
+                className="className"
+                label="Checkbox"
+            />
+            <InputCheck
+                id="checkbox-4"
+                name="checkbox-demo-2"
+                type="checkbox"
+                validation={false}
+                defaultChecked
+                data-testid="testid"
+                className="className"
+                label="Checkbox"
+            />
+            <InputCheck
+                id="checkbox-5"
+                name="checkbox-demo-3"
+                type="checkbox"
+                disabled
+                data-testid="testid"
+                className="className"
+                label="Checkbox"
+            />
+            <InputCheck
+                id="checkbox-6"
+                name="checkbox-demo-3"
+                type="checkbox"
+                defaultChecked
+                disabled
+                data-testid="testid"
+                className="className"
+                label="Checkbox"
+            />
+        </FlexDemo>
+    )
+}
+
+export const InputCheckDemoRadio = () => {
+    return (
+        <FlexDemo>
+            <InputCheck
+                id="radio-1"
+                name="radio-demo-1"
+                type="radio"
+                data-testid="testid"
+                className="className"
+                label="Radio"
+            />
+            <InputCheck
+                id="radio-2"
+                name="radio-demo-1"
+                type="radio"
+                defaultChecked
+                data-testid="testid"
+                className="className"
+                label="Radio"
+            />
+            <InputCheck
+                id="radio-3"
+                name="radio-demo-2"
+                type="radio"
+                validation={false}
+                data-testid="testid"
+                className="className"
+                label="Radio"
+            />
+            <InputCheck
+                id="radio-4"
+                name="radio-demo-2"
+                type="radio"
+                validation={false}
+                defaultChecked
+                data-testid="testid"
+                className="className"
+                label="Radio"
+            />
+            <InputCheck
+                id="radio-5"
+                name="radio-demo-3"
+                type="radio"
+                disabled
+                data-testid="testid"
+                className="className"
+                label="Radio"
+            />
+            <InputCheck
+                id="radio-6"
+                name="radio-demo-3"
+                type="radio"
+                defaultChecked
+                disabled
+                data-testid="testid"
+                className="className"
+                label="Radio"
+            />
+        </FlexDemo>
+    )
+}
+
+export const InputCheckDemoCheckboxTile = () => {
+    return (
+        <FlexDemo flexDirection="column" gap="xs">
+            <InputCheck
+                id="checkbox-tile-1"
+                name="checkbox-tile-demo-1"
+                type="checkbox"
+                variant="tile"
+                data-testid="testid"
+                className="className"
+                label="Checkbox"
+            />
+            <InputCheck
+                id="checkbox-tile-2"
+                name="checkbox-tile-demo-1"
+                type="checkbox"
+                defaultChecked
+                variant="tile"
+                data-testid="testid"
+                className="className"
+                label="Checkbox"
+            />
+            <InputCheck
+                id="checkbox-tile-3"
+                name="checkbox-tile-demo-2"
+                type="checkbox"
+                validation={false}
+                variant="tile"
+                data-testid="testid"
+                className="className"
+                label="Checkbox"
+            />
+            <InputCheck
+                id="checkbox-tile-4"
+                name="checkbox-tile-demo-2"
+                type="checkbox"
+                validation={false}
+                defaultChecked
+                variant="tile"
+                data-testid="testid"
+                className="className"
+                label="Checkbox"
+            />
+            <InputCheck
+                id="checkbox-tile-5"
+                name="checkbox-tile-demo-3"
+                type="checkbox"
+                disabled
+                variant="tile"
+                data-testid="testid"
+                className="className"
+                label="Checkbox"
+            />
+            <InputCheck
+                id="checkbox-tile-6"
+                name="checkbox-tile-demo-3"
+                type="checkbox"
+                defaultChecked
+                disabled
+                variant="tile"
+                data-testid="testid"
+                className="className"
+                label="Checkbox"
+            />
+        </FlexDemo>
+    )
+}
+
+export const InputCheckDemoRadioTile = () => {
+    return (
+        <FlexDemo flexDirection="column" gap="xs">
+            <InputCheck
+                id="radio-tile-1"
+                name="radio-tile-demo-1"
+                type="radio"
+                variant="tile"
+                data-testid="testid"
+                className="className"
+                label="Radio"
+            />
+            <InputCheck
+                id="radio-tile-2"
+                name="radio-tile-demo-1"
+                type="radio"
+                defaultChecked
+                variant="tile"
+                data-testid="testid"
+                className="className"
+                label="Radio"
+            />
+            <InputCheck
+                id="radio-tile-3"
+                name="radio-tile-demo-2"
+                type="radio"
+                validation={false}
+                variant="tile"
+                data-testid="testid"
+                className="className"
+                label="Radio"
+            />
+            <InputCheck
+                id="radio-tile-4"
+                name="radio-tile-demo-2"
+                type="radio"
+                validation={false}
+                defaultChecked
+                variant="tile"
+                data-testid="testid"
+                className="className"
+                label="Radio"
+            />
+            <InputCheck
+                id="radio-tile-5"
+                name="radio-tile-demo-3"
+                type="radio"
+                disabled
+                variant="tile"
+                data-testid="testid"
+                className="className"
+                label="Radio"
+            />
+            <InputCheck
+                id="radio-tile-6"
+                name="radio-tile-demo-3"
+                type="radio"
+                defaultChecked
+                disabled
+                variant="tile"
+                data-testid="testid"
+                className="className"
+                label="Radio"
+            />
+        </FlexDemo>
+    )
+}
+
+export const InputCheckDemoCheckboxToggle = () => {
+    return (
+        <FlexDemo>
+            <InputCheck
+                id="checkbox-toggle-1"
+                name="checkbox-toggle-demo-1"
+                type="checkbox"
+                variant="toggle"
+                data-testid="testid"
+                className="className"
+                label="Checkbox"
+            />
+            <InputCheck
+                id="checkbox-toggle-2"
+                name="checkbox-toggle-demo-1"
+                type="checkbox"
+                defaultChecked
+                variant="toggle"
+                data-testid="testid"
+                className="className"
+                label="Checkbox"
+            />
+            <InputCheck
+                id="checkbox-toggle-3"
+                name="checkbox-toggle-demo-2"
+                type="checkbox"
+                validation={false}
+                variant="toggle"
+                data-testid="testid"
+                className="className"
+                label="Checkbox"
+            />
+            <InputCheck
+                id="checkbox-toggle-4"
+                name="checkbox-toggle-demo-2"
+                type="checkbox"
+                validation={false}
+                defaultChecked
+                variant="toggle"
+                data-testid="testid"
+                className="className"
+                label="Checkbox"
+            />
+            <InputCheck
+                id="checkbox-toggle-5"
+                name="checkbox-toggle-demo-3"
+                type="checkbox"
+                disabled
+                variant="toggle"
+                data-testid="testid"
+                className="className"
+                label="Checkbox"
+            />
+            <InputCheck
+                id="checkbox-toggle-6"
+                name="checkbox-toggle-demo-3"
+                type="checkbox"
+                defaultChecked
+                disabled
+                variant="toggle"
+                data-testid="testid"
+                className="className"
+                label="Checkbox"
+            />
+        </FlexDemo>
+    )
+}
+
+export const InputCheckDemoCheckboxSelector = () => {
+    return (
+        <FlexDemo>
+            <InputCheck
+                id="checkbox-selector-1"
+                name="checkbox-selector-demo-1"
+                type="checkbox"
+                variant="selector"
+                data-testid="testid"
+                className="className"
+                label="Checkbox"
+            />
+            <InputCheck
+                id="checkbox-selector-2"
+                name="checkbox-selector-demo-1"
+                type="checkbox"
+                defaultChecked
+                variant="selector"
+                data-testid="testid"
+                className="className"
+                label="Checkbox"
+            />
+            <InputCheck
+                id="checkbox-selector-3"
+                name="checkbox-selector-demo-2"
+                type="checkbox"
+                validation={false}
+                variant="selector"
+                data-testid="testid"
+                className="className"
+                label="Checkbox"
+            />
+            <InputCheck
+                id="checkbox-selector-4"
+                name="checkbox-selector-demo-2"
+                type="checkbox"
+                validation={false}
+                defaultChecked
+                variant="selector"
+                data-testid="testid"
+                className="className"
+                label="Checkbox"
+            />
+            <InputCheck
+                id="checkbox-selector-5"
+                name="checkbox-selector-demo-3"
+                type="checkbox"
+                disabled
+                variant="selector"
+                data-testid="testid"
+                className="className"
+                label="Checkbox"
+            />
+            <InputCheck
+                id="checkbox-selector-6"
+                name="checkbox-selector-demo-3"
+                type="checkbox"
+                defaultChecked
+                disabled
+                variant="selector"
+                data-testid="testid"
+                className="className"
+                label="Checkbox"
+            />
+        </FlexDemo>
+    )
+}

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

@@ -0,0 +1,39 @@
+/*=============================================== InputCheckPreview ===============================================*/
+
+import { InputCheck } from "../../../"
+import {
+    InputCheckDemoCheckbox,
+    InputCheckDemoRadio,
+    InputCheckDemoCheckboxTile,
+    InputCheckDemoRadioTile,
+    InputCheckDemoCheckboxToggle,
+    InputCheckDemoCheckboxSelector,
+} from "./InputCheck.demo"
+import type { ILibInputCheck } from "../../../types/components-props"
+import type { ComponentPreview } from "../../../../data/components"
+
+export const inputCheckPreview: ComponentPreview<ILibInputCheck> = {
+    name: "InputCheck",
+    component: InputCheck,
+    category: "components",
+    import: "InputCheck",
+    additionalImports: null,
+    optionalImports: null,
+    propsImport: "ILibInputCheck",
+    additionalTypeImports: null,
+    extends: ["InputHTMLAttributes<HTMLInputElement>"],
+    previews: [
+        { previewTitle: "Checkbox", demo: <InputCheckDemoCheckbox /> },
+        { previewTitle: "Radio", demo: <InputCheckDemoRadio /> },
+        { previewTitle: "Checkbox tile", demo: <InputCheckDemoCheckboxTile /> },
+        { previewTitle: "Radio tile", demo: <InputCheckDemoRadioTile /> },
+        {
+            previewTitle: "Checkbox toggle",
+            demo: <InputCheckDemoCheckboxToggle />,
+        },
+        {
+            previewTitle: "Checkbox selector",
+            demo: <InputCheckDemoCheckboxSelector />,
+        },
+    ],
+}

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

@@ -0,0 +1,100 @@
+/*=============================================== InputCheck tests ===============================================*/
+
+import { InputCheck, LIB_TOKENS } from "../../.."
+
+describe("<InputCheck />", () => {
+    it("renders <InputCheck /> component", () => {
+        cy.mount(
+            <InputCheck
+                id="input"
+                data-testid="testid"
+                className="className"
+                label="Hello"
+            />
+        )
+        cy.dataTest().should("exist").should("have.class", "className")
+        cy.dataTest("testid.Input")
+            .should("exist")
+            .should("have.class", "Input")
+            .should("have.attr", "type", "checkbox")
+        cy.dataTest("testid.CheckContainer")
+            .should("exist")
+            .should("have.class", "CheckContainer")
+        cy.dataTest("testid.CheckContainer.Checkbox")
+            .should("exist")
+            .should("have.class", "Checkbox")
+        cy.dataTest("testid.CheckContainer.Checkbox.Icon")
+            .should("exist")
+            .should("not.be.visible")
+            .should("have.class", "Icon")
+        cy.dataTest().click()
+        cy.dataTest("testid.CheckContainer.Checkbox.Icon").should("be.visible")
+    })
+
+    it("renders a radio input", () => {
+        cy.mount(
+            <InputCheck
+                id="input"
+                data-testid="testid"
+                type="radio"
+                label="Hello"
+            />
+        )
+        cy.dataTest("testid.Input").should("have.attr", "type", "radio")
+    })
+
+    it("renders a toggle", () => {
+        cy.mount(
+            <InputCheck
+                id="input"
+                data-testid="testid"
+                variant="toggle"
+                label="Hello"
+            />
+        )
+        cy.dataTest("testid.CheckContainer.Toggle").should("exist")
+    })
+
+    it("renders a tile with radio", () => {
+        cy.mount(
+            <InputCheck
+                id="input"
+                data-testid="testid"
+                type="radio"
+                variant="tile"
+                label="Hello"
+            />
+        )
+        cy.dataTest()
+            .should(
+                "have.css",
+                "border-color",
+                LIB_TOKENS.colors.light["gray-200"].rgb
+            )
+            .should("have.css", "border-radius", LIB_TOKENS.radiuses.m)
+            .should("have.css", "padding", LIB_TOKENS.spacers.s)
+    })
+
+    it("renders a selector with validation", () => {
+        cy.mount(
+            <InputCheck
+                id="input"
+                data-testid="testid"
+                variant="selector"
+                validation={false}
+                label="Hello"
+            />
+        )
+        cy.dataTest()
+            .should(
+                "have.css",
+                "background-color",
+                LIB_TOKENS.colors.light["danger-50"].rgb
+            )
+            .should("have.css", "border-radius", "1584px")
+            .should("have.css", "padding-left", LIB_TOKENS.spacers.m)
+            .should("have.css", "padding-right", LIB_TOKENS.spacers.m)
+            .should("have.css", "padding-top", LIB_TOKENS.spacers.xxs)
+            .should("have.css", "padding-bottom", LIB_TOKENS.spacers.xxs)
+    })
+})

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

@@ -0,0 +1,42 @@
+/*=============================================== InputCounterPreview ===============================================*/
+
+import { useState } from "react"
+import { InputCounter } from "../../../"
+import type { ILibInputCounter } from "../../../types/components-props"
+import type { ComponentPreview } from "../../../../data/components"
+
+const InputCounterDemo = ({ ...rest }: Partial<ILibInputCounter>) => {
+    const [counter, setCounter] = useState(1)
+
+    return (
+        <InputCounter
+            {...rest}
+            value={counter}
+            setValue={setCounter}
+            data-testid="testid"
+            className="className"
+            // showButtonTooltip
+            // data-testid="testid"
+            // className="className"
+        />
+    )
+}
+
+export const inputCounterPreview: ComponentPreview<ILibInputCounter> = {
+    name: "InputCounter",
+    component: InputCounter,
+    category: "components",
+    import: "InputCounter",
+    additionalImports: null,
+    optionalImports: null,
+    propsImport: "ILibInputCounter",
+    additionalTypeImports: null,
+    extends: ["InputHTMLAttributes<HTMLInputElement>", "ILibInputBase"],
+    previews: [
+        { previewTitle: "Default", demo: <InputCounterDemo /> },
+        {
+            previewTitle: "Input not editable",
+            demo: <InputCounterDemo inputNoEdit />,
+        },
+    ],
+}