@lets-events/react 12.3.9 → 12.4.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lets-events/react",
-  "version": "12.3.9",
+  "version": "12.4.1",
   "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,166 @@
+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;
+};
+
+export function DoubleCalendar({
+    action,
+    actionText,
+    calendarLayout,
+    selected,
+    setSelected,
+    position = "bottom",
+    hasError,
+    expand,
+    allowPastDates = false,
+    maxYearsFromNow = 20,
+    ...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;
+                        })
+                    }
+                >
+                    <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"}
+                        >
+                            <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

@@ -67,6 +67,7 @@ export function Drawer({
         css={{
           zIndex: zIndex + 1,
           width: width ?? "34.25rem",
+          maxWidth: "100%"
         }}
         open={isOpen}
       >

package/src/components/FormFields/DoubleCalendarFormField.tsx

@@ -0,0 +1,90 @@
+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"
+    >;
+    allowPastDates?: boolean;
+    maxYearsFromNow?: number;
+};
+
+export const DoubleCalendarFormField = ({
+    name,
+    label,
+    required,
+    validate,
+    validationErrorMessage = "Este campo é obrigatório.",
+    rules,
+    allowPastDates,
+    maxYearsFromNow = 20,
+    ...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);
+                }}
+                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/dist/index.css

@@ -1,171 +0,0 @@
-/* ../../node_modules/react-international-phone/dist/index.css */
-.react-international-phone-country-selector {
-  position: relative;
-}
-.react-international-phone-country-selector-button {
-  display: flex;
-  height: var(--react-international-phone-height, 36px);
-  box-sizing: border-box;
-  align-items: center;
-  justify-content: center;
-  padding: 0;
-  border: 1px solid var(--react-international-phone-country-selector-border-color, var(--react-international-phone-border-color, gainsboro));
-  margin: 0;
-  appearance: button;
-  -webkit-appearance: button;
-  background-color: var(--react-international-phone-country-selector-background-color, var(--react-international-phone-background-color, white));
-  cursor: pointer;
-  text-transform: none;
-  user-select: none;
-}
-.react-international-phone-country-selector-button:hover {
-  background-color: var(--react-international-phone-country-selector-background-color-hover, whitesmoke);
-}
-.react-international-phone-country-selector-button--hide-dropdown {
-  cursor: auto;
-}
-.react-international-phone-country-selector-button--hide-dropdown:hover {
-  background-color: transparent;
-}
-.react-international-phone-country-selector-button__button-content {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.react-international-phone-country-selector-button__flag-emoji {
-  margin: 0 4px;
-}
-.react-international-phone-country-selector-button__flag-emoji--disabled {
-  opacity: .75;
-}
-.react-international-phone-country-selector-button__dropdown-arrow {
-  border-top: var(--react-international-phone-country-selector-arrow-size, 4px) solid var(--react-international-phone-country-selector-arrow-color, #777);
-  border-right: var(--react-international-phone-country-selector-arrow-size, 4px) solid transparent;
-  border-left: var(--react-international-phone-country-selector-arrow-size, 4px) solid transparent;
-  margin-right: 4px;
-  transition: all .1s ease-out;
-}
-.react-international-phone-country-selector-button__dropdown-arrow--active {
-  transform: rotateX(180deg);
-}
-.react-international-phone-country-selector-button__dropdown-arrow--disabled {
-  border-top-color: var(--react-international-phone-disabled-country-selector-arrow-color, #999);
-}
-.react-international-phone-country-selector-button--disabled {
-  background-color: var(--react-international-phone-disabled-country-selector-background-color, var(--react-international-phone-disabled-background-color, whitesmoke));
-  cursor: auto;
-}
-.react-international-phone-country-selector-button--disabled:hover {
-  background-color: var(--react-international-phone-disabled-country-selector-background-color, var(--react-international-phone-disabled-background-color, whitesmoke));
-}
-.react-international-phone-flag-emoji {
-  width: var(--react-international-phone-flag-width, 24px);
-  height: var(--react-international-phone-flag-height, 24px);
-  box-sizing: border-box;
-}
-.react-international-phone-country-selector-dropdown {
-  position: absolute;
-  z-index: 1;
-  top: var(--react-international-phone-dropdown-top, 44px);
-  left: var(--react-international-phone-dropdown-left, 0);
-  display: flex;
-  width: 300px;
-  max-height: 200px;
-  flex-direction: column;
-  padding: 4px 0;
-  margin: 0;
-  background-color: var(--react-international-phone-dropdown-item-background-color, var(--react-international-phone-background-color, white));
-  box-shadow: var(--react-international-phone-dropdown-shadow, 2px 2px 16px rgba(0, 0, 0, .25));
-  color: var(--react-international-phone-dropdown-item-text-color, var(--react-international-phone-text-color, #222));
-  list-style: none;
-  overflow-y: scroll;
-}
-.react-international-phone-country-selector-dropdown__preferred-list-divider {
-  height: 1px;
-  border: none;
-  margin: var(--react-international-phone-dropdown-preferred-list-divider-margin, 0);
-  background: var(--react-international-phone-dropdown-preferred-list-divider-color, var(--react-international-phone-border-color, gainsboro));
-}
-.react-international-phone-country-selector-dropdown__list-item {
-  display: flex;
-  min-height: var(--react-international-phone-dropdown-item-height, 28px);
-  box-sizing: border-box;
-  align-items: center;
-  padding: 2px 8px;
-}
-.react-international-phone-country-selector-dropdown__list-item-flag-emoji {
-  margin-right: 8px;
-}
-.react-international-phone-country-selector-dropdown__list-item-country-name {
-  overflow: hidden;
-  margin-right: 8px;
-  font-size: var(--react-international-phone-dropdown-item-font-size, 14px);
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.react-international-phone-country-selector-dropdown__list-item-dial-code {
-  color: var(--react-international-phone-dropdown-item-dial-code-color, gray);
-  font-size: var(--react-international-phone-dropdown-item-font-size, 14px);
-}
-.react-international-phone-country-selector-dropdown__list-item:hover {
-  background-color: var(--react-international-phone-selected-dropdown-item-background-color, var(--react-international-phone-selected-dropdown-item-background-color, whitesmoke));
-  cursor: pointer;
-}
-.react-international-phone-country-selector-dropdown__list-item--selected,
-.react-international-phone-country-selector-dropdown__list-item--focused {
-  background-color: var(--react-international-phone-selected-dropdown-item-background-color, whitesmoke);
-  color: var(--react-international-phone-selected-dropdown-item-text-color, var(--react-international-phone-text-color, #222));
-}
-.react-international-phone-country-selector-dropdown__list-item--selected .react-international-phone-country-selector-dropdown__list-item-dial-code,
-.react-international-phone-country-selector-dropdown__list-item--focused .react-international-phone-country-selector-dropdown__list-item-dial-code {
-  color: var(--react-international-phone-selected-dropdown-item-dial-code-color, var(--react-international-phone-dropdown-item-dial-code-color, gray));
-}
-.react-international-phone-country-selector-dropdown__list-item--focused {
-  background-color: var(--react-international-phone-selected-dropdown-item-background-color, var(--react-international-phone-selected-dropdown-item-background-color, whitesmoke));
-}
-.react-international-phone-dial-code-preview {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0 8px;
-  border: 1px solid var(--react-international-phone-dial-code-preview-border-color, var(--react-international-phone-border-color, gainsboro));
-  margin-right: -1px;
-  background-color: var(--react-international-phone-dial-code-preview-background-color, var(--react-international-phone-background-color, white));
-  color: var(--react-international-phone-dial-code-preview-text-color, var(--react-international-phone-text-color, #222));
-  font-size: var(--react-international-phone-dial-code-preview-font-size, var(--react-international-phone-font-size, 13px));
-}
-.react-international-phone-dial-code-preview--disabled {
-  background-color: var(--react-international-phone-dial-code-preview-disabled-background-color, var(--react-international-phone-disabled-background-color, whitesmoke));
-  color: var(--react-international-phone-dial-code-preview-disabled-text-color, var(--react-international-phone-disabled-text-color, #666));
-}
-.react-international-phone-input-container {
-  display: flex;
-}
-.react-international-phone-input-container .react-international-phone-country-selector-button {
-  border-radius: var(--react-international-phone-border-radius, 4px);
-  margin-right: -1px;
-  border-bottom-right-radius: 0;
-  border-top-right-radius: 0;
-}
-.react-international-phone-input-container .react-international-phone-input {
-  overflow: visible;
-  height: var(--react-international-phone-height, 36px);
-  box-sizing: border-box;
-  padding: 0 8px;
-  border: 1px solid var(--react-international-phone-border-color, gainsboro);
-  border-radius: var(--react-international-phone-border-radius, 4px);
-  margin: 0;
-  background-color: var(--react-international-phone-background-color, white);
-  border-bottom-left-radius: 0;
-  border-top-left-radius: 0;
-  color: var(--react-international-phone-text-color, #222);
-  font-family: inherit;
-  font-size: var(--react-international-phone-font-size, 13px);
-}
-.react-international-phone-input-container .react-international-phone-input:focus {
-  outline: none;
-}
-.react-international-phone-input-container .react-international-phone-input--disabled {
-  background-color: var(--react-international-phone-disabled-background-color, whitesmoke);
-  color: var(--react-international-phone-disabled-text-color, #666);
-}