@lets-events/react 11.2.0 → 11.4.0

package/src/components/MultiSelect.tsx

@@ -0,0 +1,216 @@
+import { DropdownMenu, Theme } from "@radix-ui/themes";
+import { Button } from "./Button";
+import { CheckboxGroup, CheckboxItem } from "./CheckboxGroup";
+import { styled, css } from "../styles";
+import { Text } from "./Text";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import {
+  faChevronDown,
+  faChevronUp,
+  faX,
+} from "@fortawesome/free-solid-svg-icons";
+import { colors } from "@lets-events/tokens";
+import { ComponentProps, useCallback, useMemo, useRef, useState } from "react";
+import { Flex } from "./Flex";
+import { CSS } from "@stitches/react";
+import React from "react";
+import { Badge } from "./Badge";
+
+const StyledContent = styled(DropdownMenu.Content, {
+  backgroundColor: "$dark50",
+  borderRadius: "$sm",
+  padding: "$8 0",
+  boxShadow: "0px 2px 4px 0px #23354329, 0px 4px 4px 0px #23354314",
+  boxSizing: "border-box",
+  border: "1px solid $dark300",
+});
+
+const StyledTrigger = styled("div", {
+  minHeight: "40px",
+  borderRadius: "$sm",
+  cursor: "pointer",
+  display: "flex",
+  justifyContent: "start",
+  alignItems: "center",
+  padding: "$6 $14",
+  boxSizing: "border-box",
+  gap: "4px",
+
+  variants: {
+    color: {
+      default: {
+        border: "1px solid $dark300",
+      },
+      error: {
+        border: "1px solid $error400",
+      },
+    },
+  },
+
+  defaultVariants: {
+    color: "default",
+  },
+});
+
+const itemStyle: CSS = {
+  padding: "$4 $16",
+  minHeight: "$32",
+  height: "32px",
+  boxSizing: "border-box",
+  backgroundColor: "$dark50",
+  display: "block",
+
+  "&:hover": {
+    backgroundColor: "$dark100",
+  },
+};
+
+const BadgeWrapper = styled("div", {
+  flex: "1",
+  display: "flex",
+  justifyContent: "start",
+  flexWrap: "wrap",
+  gap: "4px",
+});
+
+const BadgeCloseBtn = styled("div", {
+  borderRadius: "100%",
+  width: "16px",
+  height: "16px",
+  minWidth: "16px",
+  minHeight: "16px",
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+
+  "&:hover": {
+    backgroundColor: "$dark600",
+  },
+});
+
+export type MultiSelectProps = ComponentProps<typeof StyledTrigger> & {
+  placeholder?: string;
+  value?: string[];
+  onValueChange?: (v: string[]) => void;
+  options: Array<{
+    label: string;
+    value: string;
+  }>;
+  width?: string;
+};
+
+export const MultiSelect = React.forwardRef<HTMLDivElement, MultiSelectProps>(
+  (
+    {
+      placeholder,
+      value: selectedValues = [],
+      onValueChange,
+      options,
+      color,
+      width = "100%",
+    },
+    fowardedRef
+  ) => {
+    const [isOpen, setIsOpen] = useState(false);
+
+    const triggerRef = useRef<HTMLDivElement>(null);
+
+    const labelByValue = useMemo(() => {
+      return options.reduce<{ [key: string]: string }>((prev, curr) => {
+        return {
+          ...prev,
+          [curr.value]: curr.label,
+        };
+      }, {});
+    }, [options]);
+
+    const handleRemove = useCallback(
+      (value: string) => {
+        const newValue = selectedValues.filter((v) => v !== value);
+        onValueChange?.(newValue);
+      },
+      [selectedValues, onValueChange]
+    );
+
+    const menuWidth = triggerRef.current?.offsetWidth;
+
+    return (
+      <Theme>
+        <DropdownMenu.Root open={isOpen} onOpenChange={() => setIsOpen(false)}>
+          <DropdownMenu.Trigger onClick={() => setIsOpen(true)}>
+            <StyledTrigger
+              css={{
+                width,
+              }}
+              ref={(r) => {
+                if (!r) return;
+                triggerRef.current = r;
+                if (fowardedRef) {
+                  if (typeof fowardedRef === "function") fowardedRef(r);
+                  else {
+                    fowardedRef.current = r;
+                  }
+                }
+              }}
+              color={color}
+            >
+              {selectedValues.length === 0 ? (
+                <Text typography={"labelMedium"} css={{ flex: 1 }}>
+                  {placeholder ?? "Selecione"}
+                </Text>
+              ) : (
+                <BadgeWrapper>
+                  {selectedValues.map((value) => {
+                    return (
+                      <Badge key={value} size={"sm"} color={"dark"}>
+                        <Flex justify={"between"} align={"center"}>
+                          <Text typography={"badgeSmall"} color="dark100">
+                            {labelByValue[value]}
+                          </Text>
+                          <BadgeCloseBtn
+                            onClick={(e) => {
+                              e.stopPropagation();
+                              handleRemove(value);
+                            }}
+                            role="button"
+                          >
+                            <FontAwesomeIcon icon={faX} size="xs" />
+                          </BadgeCloseBtn>
+                        </Flex>
+                      </Badge>
+                    );
+                  })}
+                </BadgeWrapper>
+              )}
+              <FontAwesomeIcon
+                icon={isOpen ? faChevronUp : faChevronDown}
+                size="sm"
+                color={colors.dark600}
+              />
+            </StyledTrigger>
+          </DropdownMenu.Trigger>
+          <StyledContent
+            css={{
+              width: menuWidth ? menuWidth + "px" : width,
+            }}
+          >
+            <CheckboxGroup
+              value={selectedValues}
+              onValueChange={(v) => {
+                onValueChange?.(v);
+              }}
+            >
+              <Flex direction={"column"} gap={8}>
+                {options.map(({ value, label }, i) => (
+                  <CheckboxItem value={value} css={itemStyle} key={i}>
+                    <Text typography={"labelSmall"}>{label}</Text>
+                  </CheckboxItem>
+                ))}
+              </Flex>
+            </CheckboxGroup>
+          </StyledContent>
+        </DropdownMenu.Root>
+      </Theme>
+    );
+  }
+);

package/src/components/Text.tsx

@@ -8,7 +8,6 @@ import { colors, Colors } from "@lets-events/tokens";
 export const TextStyle = styled(TextRadix, {
   fontFamily: "$default",
   lineHeight: "$base",
-  color: "$grey950",
   variants: {
     typography: typographyValues,
     fontWeight: {
@@ -31,7 +30,7 @@ export function Text({ color, ...props }: TextProps) {
     <TextStyle
       {...props}
       css={{
-        color: color ? "$" + color : "$grey950",
+        color: color ? "$" + color : "$dark600",
         ...props.css,
       }}
     />

package/src/index.tsx

@@ -15,7 +15,9 @@ export * from "./components/Filter";
 export * from "./components/Dropdown";
 export * from "./components/Badge";
 export * from "./components/Modal";
+export * from "./components/MenuDropdown";
 export * from "./components/Calendar";
+export * from "./components/Drawer";
 export * from "./components/TimePicker";
 export * from "./components/Alert";
 export * from "./components/Switch";
@@ -24,6 +26,7 @@ export * from "./components/Card";
 export * from "./components/TextareaField";
 export * from "./components/Toast";
 export * from "./components/Tooltip";
+export * from "./components/MultiSelect";
 
 // Layouts
 export * from "./components/Flex";
@@ -38,3 +41,4 @@ export * from "./components/FormFields/FormLabel";
 export * from "./components/FormFields/TextAreaFormField";
 export * from "./components/FormFields/TextFormField";
 export * from "./components/FormFields/Form";
+export * from "./components/FormFields/MultiSelectFormField";