@lets-events/react 12.3.10 → 12.5.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @lets-events/react
 
+## 12.5.0
+
+### Minor Changes
+
+- Drawer and DoubleCalendar Props
+
+## 12.4.1
+
+### Patch Changes
+
+- test
+
+## 12.4.0
+
+### Minor Changes
+
+- DoubleCalendar
+
 ## 12.3.10
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lets-events/react",
-  "version": "12.3.10",
+  "version": "12.5.0",
   "description": "",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",

package/src/components/Calendar/styledComponents.ts

@@ -76,7 +76,8 @@ export const CalendarFooterStyled = styled("div", {
   borderTop: "2px solid $neutral100",
   padding: "$4 $16",
   display: "flex",
-  justifyContent: "center",
+  gap: '1rem',
+  justifyContent: "flex-end",
   alignItems: "center",
   height: "3rem",
 });
@@ -88,7 +89,7 @@ export const DayPickerWrapperStyled = styled("div", {
     color: "$dark500",
   },
   ".rdp-root": {
-    padding: "$8",
+    padding: "0 $8",
   },
   ".rdp-today .rdp-day_button": {
     color: "$brand500",
@@ -98,8 +99,8 @@ export const DayPickerWrapperStyled = styled("div", {
     color: "$dark400",
   },
   ".rdp-day_button": {
-    height: "32px",
-    width: "32px",
+    height: "28px",
+    width: "28px",
     borderRadius: "$sm",
     fontSize: "$14",
     color: "$text",
@@ -117,9 +118,10 @@ export const DayPickerWrapperStyled = styled("div", {
     borderColor: "transparent",
   },
   ".rdp-nav": {
+    position: "absolute",
+    width: "98%",
     display: "flex",
     justifyContent: "space-between",
-    width: "100%",
   },
   ".rdp-nav .rdp-chevron": {
     display: "none",
@@ -159,8 +161,15 @@ export const DayPickerWrapperStyled = styled("div", {
     backgroundColor: "transparent",
     cursor: "pointer",
   },
+  ".rdp-months": {
+    display: "flex",
+    columnGap: "$16",
+    alignItems: "flex-start",
+    paddingTop: "$12",
+  },
   ".rdp-month": {
-    marginTop: "-24px",
+    marginTop: "0",
+    paddingTop: "$6",
   },
   ".rdp-month_caption": {
     display: "flex",
@@ -212,9 +221,9 @@ export const DayPickerWrapperStyled = styled("div", {
     boxShadow: "none",
   },
   ".rdp-dropdown.rdp-months_dropdown:focus, .rdp-dropdown.rdp-years_dropdown:focus":
-    {
-      border: "none",
-    },
+  {
+    border: "none",
+  },
   ".rdp-dropdown_root": {
     position: "relative",
   },

package/src/components/DoubleCalendar/index.tsx

@@ -0,0 +1,170 @@
+import React, { ComponentProps, useRef, useEffect, useState } from "react";
+import { useOnClickOutside } from "../../hooks/useOnClickOutside";
+import { DayPicker } from "react-day-picker";
+import { ptBR } from "date-fns/locale";
+import { format, addYears } from "date-fns";
+import { Button } from "../Button";
+import { Box } from "../Box";
+import { TextField, TextFieldSlot } from "../TextField";
+import Icon from "../Icon";
+import {
+    CalendarContentStyled,
+    CalendarFooterStyled,
+    CalendarStyled,
+    DayPickerWrapperStyled,
+    CalendarButtonStyled,
+} from "../Calendar/styledComponents";
+
+export type DateRange = { from?: Date; to?: Date } | undefined;
+
+export type DoubleCalendarProps = ComponentProps<typeof CalendarStyled> & {
+    calendarLayout?: "label" | "dropdown" | "dropdown-months" | "dropdown-years";
+    selected: DateRange;
+    setSelected: React.Dispatch<React.SetStateAction<DateRange>>;
+    position?: "top" | "bottom" | "top-right" | "bottom-right";
+    action?: boolean;
+    actionText?: string;
+    hasError?: boolean;
+    expand?: boolean;
+    allowPastDates?: boolean;
+    maxYearsFromNow?: number;
+    disabled?: boolean;
+};
+
+export function DoubleCalendar({
+    action,
+    actionText,
+    calendarLayout,
+    selected,
+    setSelected,
+    position = "bottom",
+    hasError,
+    expand,
+    allowPastDates = false,
+    maxYearsFromNow = 20,
+    disabled = false,
+    ...props
+}: DoubleCalendarProps) {
+    const [startValue, setStartValue] = useState("");
+    const [endValue, setEndValue] = useState("");
+    const [showContainer, setShowCalendar] = useState(false);
+    const initialSelectedRef = useRef<DateRange | undefined>(undefined);
+
+    const dropdownRef = useRef<HTMLDivElement>(null);
+
+    useOnClickOutside(dropdownRef, () => {
+        setShowCalendar(false);
+    });
+    const today = new Date();
+    const maxDate = addYears(today, maxYearsFromNow);
+
+    useEffect(() => {
+        if (selected && selected.from) {
+            setStartValue(format(selected.from, "dd/MM/yyyy"));
+        } else {
+            setStartValue("");
+        }
+
+        if (selected && selected.to) {
+            setEndValue(format(selected.to, "dd/MM/yyyy"));
+        } else {
+            setEndValue("");
+        }
+    }, [selected]);
+
+    return (
+        <div>
+            <CalendarStyled {...props} expand={expand} ref={dropdownRef}>
+                <CalendarButtonStyled
+                    expand={expand}
+                    type="button"
+                    onClick={() =>
+                        setShowCalendar((prev) => {
+                            const next = !prev;
+                            if (!prev) initialSelectedRef.current = selected;
+                            return next;
+                        })
+                    }
+                    disabled={disabled}
+                >
+                    <div style={{ display: "flex", gap: "8px", width: "100%" }}>
+                        <TextField
+                            placeholder="00/00/0000 - 00/00/0000"
+                            type="text"
+                            value={`${startValue || "00/00/0000"} - ${endValue || "00/00/0000"}`}
+                            readOnly
+                            inputMode="numeric"
+                            textAlign={"right"}
+                            color={hasError ? "error" : "default"}
+                            disabled={disabled}
+                        >
+                            <TextFieldSlot>
+                                <Icon name="calendar" size={"xl"} />
+                            </TextFieldSlot>
+                        </TextField>
+                    </div>
+                </CalendarButtonStyled>
+
+                {showContainer && (
+                    <CalendarContentStyled position={position}>
+                        <Box>
+                            <DayPickerWrapperStyled>
+                                <DayPicker
+                                    mode="range"
+                                    numberOfMonths={2}
+                                    captionLayout={calendarLayout}
+                                    selected={selected as any}
+                                    onSelect={setSelected}
+                                    required
+                                    locale={ptBR}
+                                    disabled={allowPastDates ? undefined : { before: today }}
+                                    fromMonth={allowPastDates ? undefined : today}
+                                    toMonth={maxDate}
+                                />
+                            </DayPickerWrapperStyled>
+                        </Box>
+
+                        {action && (
+                            <CalendarFooterStyled>
+                                <div style={{ textAlign: "center", padding: "1rem" }}>
+                                    <span>
+                                        {`${selected?.from ? format(selected.from, "dd/MM/yyyy") : "00/00/0000"} — ${selected?.to ? format(selected.to, "dd/MM/yyyy") : "00/00/0000"}`}
+                                    </span>
+                                </div>
+                                <Button
+                                    style={{ margin: "0 0.5rem" }}
+                                    variant="text"
+                                    color="neutral"
+                                    type="button"
+                                    onClick={() => {
+                                        setSelected(initialSelectedRef.current);
+                                        setShowCalendar(false);
+                                    }}
+                                    size={"medium"}
+                                    fontWeight="regular"
+                                >
+                                    Cancelar
+                                </Button>
+                                <Button
+                                    style={{ margin: "0 0.5rem" }}
+                                    variant="text"
+                                    color="brand"
+                                    type="button"
+                                    onClick={() => {
+                                        setShowCalendar(false);
+                                    }}
+                                    size={"medium"}
+                                    fontWeight="medium"
+                                >
+                                    {actionText ?? "Aplicar"}
+                                </Button>
+                            </CalendarFooterStyled>
+                        )}
+                    </CalendarContentStyled>
+                )}
+            </CalendarStyled>
+        </div>
+    );
+}
+
+export default DoubleCalendar;

package/src/components/Drawer/index.tsx

@@ -23,6 +23,7 @@ export type DrawerProps = ComponentProps<typeof DrawerOverlayStyled> & {
   goBackIcon?: ReactNode;
   goBackAction?: () => void;
   zIndex?: number;
+  clickOutsideAvailable?: boolean;
 };
 
 export function Drawer({
@@ -35,6 +36,7 @@ export function Drawer({
   goBackIcon,
   goBackAction,
   zIndex = 1000,
+  clickOutsideAvailable = true,
 }: DrawerProps) {
   useEffect(() => {
     if (isOpen) {
@@ -60,7 +62,7 @@ export function Drawer({
         css={{
           zIndex,
         }}
-        onClick={onClose}
+        onClick={clickOutsideAvailable ? onClose : undefined}
         open={isOpen}
       />
       <DrawerWrapper

package/src/components/FormFields/DoubleCalendarFormField.tsx

@@ -0,0 +1,93 @@
+import { useCallback } from "react";
+import { FieldValues, useController, RegisterOptions } from "react-hook-form";
+import { Flex } from "../Flex";
+import { FormLabel } from "./subComponents/FormLabel";
+import { ErrorFormMessage } from "./subComponents/ErrorFormMessage";
+import { DoubleCalendar, DateRange, DoubleCalendarProps } from "../DoubleCalendar";
+
+export type DoubleCalendarFormFieldProps = Omit<
+    DoubleCalendarProps,
+    "selected" | "setSelected"
+> & {
+    name: string;
+    label?: string;
+    required?: boolean;
+    validate?: (value: DateRange) => boolean | string;
+    validationErrorMessage?: string;
+    rules?: Omit<
+        RegisterOptions<FieldValues, string>,
+        "valueAsNumber" | "valueAsDate" | "setValueAs" | "disabled"
+    >;
+    disabled?: boolean;
+    allowPastDates?: boolean;
+    maxYearsFromNow?: number;
+};
+
+export const DoubleCalendarFormField = ({
+    name,
+    label,
+    required,
+    validate,
+    validationErrorMessage = "Este campo é obrigatório.",
+    rules,
+    allowPastDates,
+    maxYearsFromNow = 20,
+    disabled,
+    ...calendarProps
+}: DoubleCalendarFormFieldProps) => {
+    const handleValidate = useCallback(
+        (value?: DateRange) => {
+            if (value === undefined || value === null) {
+                if (required) return validationErrorMessage;
+                return true;
+            }
+            return validate?.(value) ?? true;
+        },
+        [validate, required, validationErrorMessage]
+    );
+
+    const { field, fieldState } = useController({
+        name,
+        rules: {
+            required: required ? validationErrorMessage : false,
+            validate: handleValidate,
+            ...rules,
+        },
+        defaultValue: undefined,
+    });
+
+    const fieldError = fieldState.error;
+    const haveError = !!fieldError;
+    const errorMsg = fieldError?.message;
+
+    const { value: selected, onChange: setSelected } = field as any;
+
+    const handleCalendarChange = (range: DateRange) => {
+        setSelected(range);
+    };
+
+    return (
+        <Flex direction="column" style={{ flex: "1" }}>
+            {label && (
+                <FormLabel name={name} label={label} required={required} haveError={haveError} />
+            )}
+
+            <DoubleCalendar
+                selected={selected}
+                setSelected={(value) => {
+                    const newValue = typeof value === "function" ? value(selected) : value;
+                    handleCalendarChange(newValue);
+                }}
+                disabled={disabled}
+                hasError={haveError}
+                allowPastDates={allowPastDates}
+                maxYearsFromNow={maxYearsFromNow}
+                {...calendarProps}
+            />
+
+            <ErrorFormMessage message={errorMsg} />
+        </Flex>
+    );
+};
+
+export default DoubleCalendarFormField;

package/src/components/FormFields/TextAreaFormField.tsx

@@ -20,6 +20,7 @@ export const TextAreaFormField = ({
   placeholder,
   validate,
   validationErrorMessage = "Este campo é obrigatório.",
+  simpleLayout = false,
   ...props
 }: TextAreaFormFieldProps) => {
   const {
@@ -49,6 +50,7 @@ export const TextAreaFormField = ({
         {...register(name, validationRules)}
         placeholder={placeholder}
         color={haveError ? "error" : "default"}
+        simpleLayout={simpleLayout}
         aria-labelledby={`${name}-label`}
       />
       <ErrorFormMessage message={errorMsg} />

package/src/components/TextareaField.tsx

@@ -3,6 +3,8 @@ import { styled } from "../styles";
 import React, { ComponentProps, useRef, useState, useEffect } from "react";
 import { typographyValues } from "../types/typographyValues";
 import { Text } from "./Text";
+import { Badge } from "./Badge";
+import { Flex } from "./Flex";
 
 export const TextareaFieldStyle = styled(TextAreaRadix, {
   display: "flex",
@@ -77,12 +79,14 @@ export type TextareaFieldProps = Omit<
   ComponentProps<typeof TextareaFieldStyle>,
   "color"
 > &
-  ComponentProps<typeof TextareaContainer>;
+  ComponentProps<typeof TextareaContainer> & {
+    simpleLayout?: boolean;
+  };
 
 export const TextareaField = React.forwardRef<
   HTMLTextAreaElement,
   TextareaFieldProps
->(({ maxLength, color, ...props }, forwardedRef) => {
+>(({ maxLength, color, simpleLayout = false, ...props }, forwardedRef) => {
   const inputRef = useRef<HTMLTextAreaElement>(null);
   const [remaining, setRemaining] = useState(maxLength);
 
@@ -100,28 +104,35 @@ export const TextareaField = React.forwardRef<
   };
 
   return (
-    <TextareaContainer color={color}>
-      <TextareaFieldStyle
-        rows={4}
-        ref={(r) => {
-          if (!r) return;
-          inputRef.current = r;
-          if (forwardedRef) {
-            if (typeof forwardedRef === "function") forwardedRef(r);
-            else forwardedRef.current = r;
-          }
-        }}
-        onInput={handleInput}
-        maxLength={maxLength}
-        {...props}
-      />
-      {maxLength && (
-        <TextareaLimitIndicator>
-          <Text typography="badgeMedium">
-            {remaining}
-          </Text>
-        </TextareaLimitIndicator>
+    <Flex direction="column" align="end" style={{ position: 'relative' }}>
+      {maxLength && simpleLayout && (
+        <Badge size="sm" color="grey" style={{ position: 'absolute', right: 0, top: '-1.75rem' }}>
+          {remaining}
+        </Badge>
       )}
-    </TextareaContainer>
+      <TextareaContainer color={color}>
+        <TextareaFieldStyle
+          rows={4}
+          ref={(r) => {
+            if (!r) return;
+            inputRef.current = r;
+            if (forwardedRef) {
+              if (typeof forwardedRef === "function") forwardedRef(r);
+              else forwardedRef.current = r;
+            }
+          }}
+          onInput={handleInput}
+          maxLength={maxLength}
+          {...props}
+        />
+        {maxLength && !simpleLayout && (
+          <TextareaLimitIndicator>
+            <Text typography="badgeMedium">
+              {remaining}
+            </Text>
+          </TextareaLimitIndicator>
+        )}
+      </TextareaContainer>
+    </Flex>
   );
 });

package/src/index.tsx

@@ -17,6 +17,7 @@ export * from "./components/Badge";
 export * from "./components/Modal";
 export * from "./components/MenuDropdown";
 export * from "./components/Calendar";
+export * from "./components/DoubleCalendar";
 export * from "./components/Drawer";
 export * from "./components/TimePicker";
 export * from "./components/Alert";
@@ -57,6 +58,7 @@ export * from "./components/FormFields/SwitchFormField";
 export * from "./components/FormFields/EmailFormField";
 export * from "./components/FormFields/RichEditorFormField";
 export * from "./components/FormFields/CalendarFormField";
+export * from "./components/FormFields/DoubleCalendarFormField";
 export * from "./components/FormFields/TimePickerFormField";
 
 // Rich Editor

package/.turbo/turbo-build.log

@@ -1,21 +0,0 @@
-
-
-> @lets-events/react@12.3.10 build
-> tsup src/index.tsx  --format esm,cjs --dts --external react
-
-CLI Building entry: src/index.tsx
-CLI Using tsconfig: tsconfig.json
-CLI tsup v8.5.0
-CLI Using tsup config: /home/bia3003/Lets/design-system/packages/react/tsup.config.ts
-CLI Target: es6
-ESM Build start
-CJS Build start
-CJS dist/index.js 394.55 KB
-CJS ⚡️ Build success in 286ms
-ESM dist/index.mjs 380.48 KB
-ESM ⚡️ Build success in 287ms
-DTS Build start
-DTS ⚡️ Build success in 5710ms
-DTS dist/index.d.mts 401.14 KB
-DTS dist/index.d.ts  401.14 KB
-⠙