@julseb-lib/react 0.0.49 → 0.0.51

package/src/lib/components/CodeContainer/CodeContainer.tsx

@@ -0,0 +1,135 @@
+/*=============================================== CodeContainer component ===============================================*/
+
+import { forwardRef, useState } from "react"
+import { atomOneDark } from "react-syntax-highlighter/dist/esm/styles/hljs"
+import { roundIconSize } from "../../lib-utils"
+import { Clipboard, Check } from "../../icons"
+import {
+    StyledCodeContainer,
+    StyledSyntaxHighlighter,
+    StyledButtonIcon,
+} from "./styles"
+import type { ILibCodeContainer } from "./types"
+
+const DEFAULT_ICON_SIZE = 24
+
+/**
+ * @description Returns a CodeContainer component
+ * @link https://documentation-components-react.vercel.app/components/code-container
+ * @extends HTMLDivElement
+ * @prop data-testid?: string
+ * @prop as?: ElementType
+ * @prop ref?: ForwardedRef<HTMLDivElement>
+ * @prop language?: string => language name
+ * @prop highlighterProps?: SyntaxHighlighterProps => imported from react-syntax-highlighter
+ * @prop color?: Any color from the library
+ * @prop highlighterStyle?: CSSProperties
+ * @prop hideCopyButton?: boolean
+ * @prop tooltipTexts?: { copy?: string; copied?: string } => only if hideCopyButton is not set to true
+ * @prop icons?: { copy?: string | JSX.Element; copied?: string | JSX.Element }
+ * @prop iconsSizes?: { copy?: number; copied?: number }
+ * @prop iconsBaseUrl?: string
+ */
+export const CodeContainer = forwardRef<HTMLDivElement, ILibCodeContainer>(
+    (
+        {
+            "data-testid": testid,
+            as,
+            className,
+            children,
+            highlighterProps,
+            highlighterStyle = atomOneDark,
+            color,
+            hideCopyButton,
+            tooltipTexts,
+            icons,
+            iconsSizes,
+            iconsBaseUrl,
+            ...rest
+        },
+        ref
+    ) => {
+        const [hasCopied, setHasCopied] = useState(false)
+
+        const copyToClipboard = () => {
+            if (children) {
+                let copyString = children.toString()
+
+                if (copyString[0] === "$") {
+                    copyString = copyString.replace("$ ", "")
+                }
+
+                navigator.clipboard.writeText(copyString)
+                setHasCopied(true)
+            }
+
+            setTimeout(() => setHasCopied(false), 1000)
+        }
+
+        const copyButtonCopy = {
+            icon: icons?.copy ?? (
+                <Clipboard
+                    data-testid={testid && `${testid}.CopyButton.IconCopy`}
+                    className={className && "IconCopy"}
+                    size={iconsSizes?.copy ?? roundIconSize(DEFAULT_ICON_SIZE)}
+                />
+            ),
+            tooltip: tooltipTexts?.copy ?? "Copy",
+        }
+
+        const copyButtonCopied = {
+            icon: icons?.copied ?? (
+                <Check
+                    data-testid={testid && `${testid}.CopyButton.IconCopied`}
+                    className={className && "IconCopied"}
+                    size={
+                        iconsSizes?.copied ?? roundIconSize(DEFAULT_ICON_SIZE)
+                    }
+                />
+            ),
+            tooltip: tooltipTexts?.copy ?? "Copied!",
+        }
+
+        return (
+            <StyledCodeContainer
+                data-testid={testid}
+                ref={ref}
+                className={className}
+                as={as || color ? "pre" : "div"}
+                {...rest}
+            >
+                <StyledSyntaxHighlighter
+                    data-testid={testid && `${testid}.SyntaxHighlighter`}
+                    className={className && "SyntaxHighlighter"}
+                    style={highlighterStyle}
+                    $color={color}
+                    {...highlighterProps}
+                >
+                    {children}
+                </StyledSyntaxHighlighter>
+
+                {!hideCopyButton && (
+                    <StyledButtonIcon
+                        data-testid={testid && `${testid}.CopyButton`}
+                        className={className && "CopyButton"}
+                        onClick={copyToClipboard}
+                        icon={
+                            hasCopied
+                                ? copyButtonCopied.icon
+                                : copyButtonCopy.icon
+                        }
+                        size={32}
+                        color={hasCopied ? "success" : "white"}
+                        tooltip={
+                            hasCopied
+                                ? copyButtonCopied.tooltip
+                                : copyButtonCopy.tooltip
+                        }
+                        iconBaseUrl={iconsBaseUrl}
+                        showTooltip
+                    />
+                )}
+            </StyledCodeContainer>
+        )
+    }
+)

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

@@ -0,0 +1,29 @@
+/*=============================================== CodeContainerPreview ===============================================*/
+
+import { CodeContainer } from "../../../"
+import type { ILibCodeContainer } from "../../../types/components-props"
+import type { ComponentPreview } from "../../../../data/components"
+
+const code = 'const Modal = styled.div`\n\topacity: 0;\n\tvisibility: hidden;\n\n\t&.Open {\n\t\topacity: 0;\n\t\tvisibility: visible;\n\t}\n`\n\nconst [isOpen, setIsOpen] = useState(false)\n\nreturn (\n\t<>\n\t\t<Button onClick={() => setIsOpen(!isOpen)}>Open modal</Button>\n\t\t<Modal className={classNames({ Open: isOpen })}>\n\t\t\t...\n\t\t</Modal>\n\t</>\n)'
+
+export const codeContainerPreview: ComponentPreview<ILibCodeContainer> = {
+    name: "CodeContainer",
+    component: CodeContainer,
+    category: "components",
+    import: "CodeContainer",
+    additionalImports: null,
+    optionalImports: null,
+    propsImport: "ILibCodeContainer",
+    additionalTypeImports: null,
+    extends: ["HTMLDivElement"],
+    previews: [
+        {
+            props: {
+                highlighterProps: { language: "typescript" },
+                children: code,
+                "data-testid": "testid",
+                className: "className",
+            },
+        },
+    ],
+}

package/src/lib/components/CodeContainer/styles.tsx

@@ -0,0 +1,65 @@
+/*=============================================== CodeContainer styles ===============================================*/
+
+import styled from "styled-components"
+import SyntaxHighlighter from "react-syntax-highlighter"
+import {
+    setDefaultTheme,
+    ButtonIcon,
+    Mixins,
+    COLORS_LIGHT,
+    SPACERS,
+    FONT_FAMILIES,
+    LINE_HEIGHTS,
+    FONT_SIZES,
+} from "../../"
+import type { LibAllColors } from "../../types"
+
+const StyledCodeContainer = styled.div<{ $color?: LibAllColors }>`
+    position: relative;
+    padding: ${SPACERS.M};
+    background-color: ${COLORS_LIGHT.GRAY_800};
+    color: ${({ $color, theme }) => $color && Mixins.AllColors($color, theme)};
+    ${Mixins.HideScrollbar}
+    tab-size: 4;
+
+    & > code {
+        color: ${({ $color, theme }) =>
+            $color && Mixins.AllColors($color, theme)};
+    }
+`
+
+const StyledSyntaxHighlighter = styled(SyntaxHighlighter)<{
+    $color?: LibAllColors
+}>`
+    background-color: transparent !important;
+    font-family: ${FONT_FAMILIES.CODE};
+    font-size: ${FONT_SIZES.SMALL};
+    padding: 0 !important;
+    white-space: pre;
+    line-height: ${LINE_HEIGHTS.CODE};
+    overflow-x: scroll !important;
+    color: ${({ $color, theme }) => $color && Mixins.AllColors($color, theme)};
+    ${Mixins.HideScrollbar}
+
+    & > code {
+        background-color: transparent !important;
+        line-height: ${LINE_HEIGHTS.CODE};
+        max-width: 100% !important;
+        color: ${({ $color, theme }) =>
+            $color && Mixins.AllColors($color, theme)};
+    }
+`
+
+const StyledButtonIcon = styled(ButtonIcon)`
+    position: absolute;
+    top: ${SPACERS.S};
+    right: ${SPACERS.M};
+`
+
+setDefaultTheme([
+    StyledCodeContainer,
+    StyledSyntaxHighlighter,
+    StyledButtonIcon,
+])
+
+export { StyledCodeContainer, StyledSyntaxHighlighter, StyledButtonIcon }

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

@@ -0,0 +1,45 @@
+/*=============================================== CoverPreview ===============================================*/
+
+import { Link } from "react-router-dom"
+import { toSentenceCase } from "@julseb-lib/utils"
+import { Cover, Text } from "../../../"
+import type { ILibCover } from "../../../types/components-props"
+import type { ComponentPreview } from "../../../../data/components"
+
+const pages = [
+    "cover-center",
+    "cover-center-overlay",
+    "cover-bottom",
+    "cover-bottom-overlay",
+]
+
+export const coverPreview: ComponentPreview<ILibCover> = {
+    name: "Cover",
+    component: Cover,
+    category: "components",
+    import: "Cover",
+    additionalImports: null,
+    optionalImports: null,
+    propsImport: "ILibCover",
+    additionalTypeImports: null,
+    extends: ["HTMLDivElement", "ILibFlexbox"],
+    previews: [
+        {
+            demo: (
+                <>
+                    {pages.map(page => (
+                        <Text key={page}>
+                            <Link
+                                to={`/cover/${page}`}
+                                target="_blank"
+                                rel="noreferrer noopener"
+                            >
+                                Demo {toSentenceCase(page)}
+                            </Link>
+                        </Text>
+                    ))}
+                </>
+            ),
+        },
+    ],
+}

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

@@ -0,0 +1,58 @@
+/*=============================================== Cover tests ===============================================*/
+
+import { Cover, LIB_TOKENS } from "../../.."
+
+describe("<Cover />", () => {
+    it("renders <Cover /> component", () => {
+        cy.mount(
+            <Cover
+                data-testid="testid"
+                className="className"
+                img="images/cover-img.avif"
+            />
+        )
+        cy.dataTest().should("exist").should("have.class", "className")
+        cy.dataTest("testid.CoverImage")
+            .should("exist")
+            .should("have.class", "CoverImage")
+        cy.dataTest("testid.CoverContent")
+            .should("exist")
+            .should("have.class", "CoverContent")
+    })
+
+    it("renders an overlay", () => {
+        cy.mount(
+            <Cover
+                data-testid="testid"
+                className="className"
+                img="images/cover-img.avif"
+                overlay="black-80"
+            />
+        )
+        cy.dataTest().before(
+            cy.dataTest(),
+            "background",
+            `${LIB_TOKENS.overlays["black-80"]} none repeat scroll 0% 0% / auto padding-box border-box`
+        )
+    })
+
+    it("renders a different height and padding", () => {
+        cy.mount(
+            <Cover
+                data-testid="testid"
+                className="className"
+                img="images/cover-img.avif"
+                height={150}
+                padding="xs"
+            />
+        )
+
+        cy.dataTest().should("have.css", "height", "150px")
+
+        cy.dataTest("testid.CoverContent").should(
+            "have.css",
+            "padding",
+            LIB_TOKENS.spacers.xs
+        )
+    })
+})

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

@@ -0,0 +1,107 @@
+/*=============================================== DatepickerPreview ===============================================*/
+
+import { useState } from "react"
+import { getToday, addMonth, formatDate } from "@julseb-lib/utils"
+import { Datepicker } from "../../../"
+import type { ILibDatepicker } from "../../../types/components-props"
+import type { ComponentPreview } from "../../../../data/components"
+
+const today = getToday()
+const nextMonth = formatDate(addMonth(1))
+
+const DatepickerDemo = (props: Omit<ILibDatepicker, "value" | "setValue">) => {
+    const [value, setValue] = useState<string>(getToday())
+    return <Datepicker value={value} setValue={setValue} {...props} />
+}
+
+export const datepickerPreview: ComponentPreview<ILibDatepicker> = {
+    name: "Datepicker",
+    component: Datepicker,
+    category: "components",
+    import: "Datepicker",
+    additionalImports: null,
+    optionalImports: null,
+    propsImport: "ILibDatepicker",
+    additionalTypeImports: null,
+    extends: ["HTMLDivElement"],
+    previews: [
+        {
+            previewTitle: "Default",
+            demo: <DatepickerDemo className="className" data-testid="testid" />,
+        },
+        {
+            previewTitle: "With min and max dates",
+            demo: (
+                <DatepickerDemo
+                    className="className"
+                    data-testid="testid"
+                    minDate={today}
+                    maxDate={nextMonth}
+                />
+            ),
+        },
+        {
+            previewTitle: "With validation",
+            demo: (
+                <DatepickerDemo
+                    className="className"
+                    data-testid="testid"
+                    validation={{
+                        status: false,
+                        message: "Hello",
+                    }}
+                />
+            ),
+        },
+        {
+            previewTitle: "Light",
+            demo: (
+                <DatepickerDemo
+                    className="className"
+                    data-testid="testid"
+                    inputBackground="light"
+                />
+            ),
+        },
+        {
+            previewTitle: "Dark",
+            demo: (
+                <DatepickerDemo
+                    className="className"
+                    data-testid="testid"
+                    inputBackground="dark"
+                    calendarDirection="up"
+                />
+            ),
+        },
+        {
+            previewTitle: "Disabled",
+            demo: (
+                <DatepickerDemo
+                    className="className"
+                    data-testid="testid"
+                    calendarDirection="up"
+                    disabled
+                />
+            ),
+        },
+        {
+            previewTitle: "With different icons, prefix and label",
+            demo: (
+                <DatepickerDemo
+                    className="className"
+                    data-testid="testid"
+                    calendarDirection="up"
+                    icons={{
+                        left: "mail",
+                        prev: "arrow-left",
+                        next: "arrow-right",
+                        calendar: "clock",
+                    }}
+                    prefix="Hello"
+                    label="Label"
+                />
+            ),
+        },
+    ],
+}

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

@@ -0,0 +1,40 @@
+/*=============================================== Datepicker tests ===============================================*/
+
+import { DatepickerDemo } from "./Preview"
+
+describe("<Datepicker />", () => {
+    it("renders <Datepicker /> component", () => {
+        cy.mount(<DatepickerDemo />)
+        cy.dataTest().should("exist").should("have.class", "className")
+        cy.dataTest().click()
+        cy.dataTest().should("have.class", "Open")
+        cy.dataTest("testid.Calendar.DaysContainer.CalendarDay").eq(0).click()
+        cy.dataTest("testid.InputWrapper.InputDate").should(
+            "have.value",
+            "1 Aug 2024"
+        )
+        cy.dataTest().should("not.have.class", "Open")
+    })
+
+    it("has min and max dates", () => {
+        cy.mount(<DatepickerDemo minDate="2024-08-23" maxDate="2024-08-24" />)
+        cy.dataTest("testid.Calendar.Header.NavButton.Prev").should(
+            "be.disabled"
+        )
+        cy.dataTest("testid.Calendar.Header.NavButton.Next").should(
+            "be.disabled"
+        )
+        cy.dataTest("testid.Calendar.DaysContainer.CalendarDay")
+            .eq(0)
+            .should("be.disabled")
+        cy.dataTest("testid.Calendar.DaysContainer.CalendarDay")
+            .eq(22)
+            .should("not.be.disabled")
+        cy.dataTest("testid.Calendar.DaysContainer.CalendarDay")
+            .eq(23)
+            .should("not.be.disabled")
+        cy.dataTest("testid.Calendar.DaysContainer.CalendarDay")
+            .eq(24)
+            .should("be.disabled")
+    })
+})

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

@@ -0,0 +1,19 @@
+/*=============================================== Datapicker tests preview ===============================================*/
+
+import { useState } from "react"
+import { Datepicker } from "../../../"
+import type { ILibDatepicker } from "../../../types/components-props"
+
+export const DatepickerDemo = (props: Omit<ILibDatepicker, "value" | "setValue">) => {
+    const [value, setValue] = useState<string>("2024-08-23")
+
+    return (
+        <Datepicker
+            value={value}
+            setValue={setValue}
+            data-testid="testid"
+            className="className"
+            {...props}
+        />
+    )
+}

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

@@ -0,0 +1,57 @@
+/*=============================================== DragListPreview ===============================================*/
+
+import { useState } from "react"
+import { convertDateShort } from "@julseb-lib/utils"
+import { DragList } from "../../../"
+import type { LibDragListItem } from "../../../types"
+import type { ILibDragList } from "../../../types/components-props"
+import type { ComponentPreview } from "../../../../data/components"
+
+const DragListDemo = (
+    props: Omit<ILibDragList, "items" | "setItems" | "children">
+) => {
+    const [items, setItems] = useState<Array<LibDragListItem>>([
+        { id: "0", title: "First", body: "Body" },
+        {
+            id: "1",
+            title: "Second",
+            badge: { backgroundColor: "success" },
+        },
+        {
+            id: "2",
+            title: "Third",
+            body: "Item",
+            date: convertDateShort(new Date()),
+        },
+    ])
+
+    return <DragList items={items} setItems={setItems} {...props} />
+}
+
+export const dragListPreview: ComponentPreview<ILibDragList> = {
+    name: "DragList",
+    component: DragList,
+    category: "components",
+    import: "DragList",
+    additionalImports: null,
+    optionalImports: ["DragListItem"],
+    propsImport: "ILibDragList",
+    additionalTypeImports: ["LibDragListItem"],
+    extends: ["HTMLDivElement"],
+    previews: [
+        { previewTitle: "Default", demo: <DragListDemo /> },
+        {
+            previewTitle: "Other styles & props",
+            demo: (
+                <DragListDemo
+                    gap="xxl"
+                    iconDrag="burger-menu"
+                    border={{ style: "dotted", width: 2, color: "secondary" }}
+                    borderRadius="xxl"
+                    padding="xxl"
+                    hideSeparator
+                />
+            ),
+        },
+    ],
+}

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

@@ -0,0 +1,25 @@
+/*=============================================== DragList tests ===============================================*/
+
+import { LIB_TOKENS } from "../../.."
+import { DragListPreview } from "./Preview"
+
+describe("<DragList />", () => {
+    it("renders <DragList /> component", () => {
+        cy.mount(<DragListPreview />)
+        cy.dataTest()
+            .should("exist")
+            .should("have.class", "className")
+            .should(
+                "have.css",
+                "border-color",
+                LIB_TOKENS.colors.light["gray-200"].rgb
+            )
+            .should("have.css", "border-style", "solid")
+            .should("have.css", "border-width", "1px")
+            .should("have.css", "padding", LIB_TOKENS.spacers.s)
+            .should("have.css", "border-radius", LIB_TOKENS.radiuses.m)
+            .should("have.css", "gap", LIB_TOKENS.spacers.s)
+
+        cy.dataTest("testid.DragListItem").should("have.length", 3)
+    })
+})

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

@@ -0,0 +1,34 @@
+/*=============================================== DragListPreview ===============================================*/
+
+import { useState } from "react"
+import { convertDateShort } from "@julseb-lib/utils"
+import { DragList } from "../../../"
+import type { LibDragListItem } from "../../../types"
+import type { ILibDragList } from "../types"
+
+export const DragListPreview = (props: Omit<ILibDragList, "items" | "setItems" | "children">) => {
+    const [items, setItems] = useState<Array<LibDragListItem>>([
+        { id: "0", title: "First", body: "Body" },
+        {
+            id: "1",
+            title: "Second",
+            badge: { backgroundColor: "success" },
+        },
+        {
+            id: "2",
+            title: "Third",
+            body: "Item",
+            date: convertDateShort(new Date()),
+        },
+    ])
+
+    return (
+        <DragList
+            data-testid="testid"
+            className="className"
+            items={items}
+            setItems={setItems}
+            {...props}
+        />
+    )
+}