@lets-events/react 11.2.0 → 11.4.0

package/package.json

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

package/src/components/Badge.tsx

@@ -6,9 +6,6 @@ export const BadgeStyled = styled(BadgeRadix, {
     fontFamily: '$default',
     borderRadius: '$sm',
     verticalAlign: 'middle',
-    'svg': {
-        marginRight: '10px',
-    },
     variants: {
         color: {
             primary: {
@@ -111,9 +108,9 @@ export const BadgeStyled = styled(BadgeRadix, {
 export type BadgeProps = ComponentProps<typeof BadgeStyled> & {
     as?: ElementType
     icon?: boolean
-    size: 'md',
     children: React.ReactNode
 }
+
 export function Badge({ asChild, children, ...props }: BadgeProps) {
     return (
         <BadgeStyled {...props}>

package/src/components/Button/index.tsx

@@ -1,13 +1,16 @@
-import { ComponentProps } from 'react'
-import { ButtonStyled } from './styledComponents'
-import { Button as ButtonRadix } from '@radix-ui/themes'
+import { ComponentProps } from "react";
+import { ButtonStyled } from "./styledComponents";
+import { Button as ButtonRadix } from "@radix-ui/themes";
+import type { VariantProps } from "@stitches/react";
 
-
-export interface ButtonProps extends ComponentProps<typeof ButtonStyled> {
-  asChild?: boolean,
+type ButtonVariantProps = VariantProps<typeof ButtonStyled>;
+export interface ButtonProps
+  extends ComponentProps<typeof ButtonStyled>,
+    ButtonVariantProps {
+  asChild?: boolean;
 }
 
 export function Button({ asChild, ...props }: ButtonProps) {
-  const Component = asChild ? ButtonRadix : 'button'
-  return <ButtonStyled as={Component} {...props} />
-}
+  const Component = asChild ? ButtonRadix : "button";
+  return <ButtonStyled as={Component} {...props} />;
+}

package/src/components/Button/styledComponents.ts

@@ -1,5 +1,4 @@
 import { Button as ButtonRadix } from "@radix-ui/themes";
-import { typographyButtonValues } from "../../types/typographyValues";
 
 import { styled } from "../../styles";
 
@@ -8,7 +7,6 @@ export const ButtonStyled = styled(ButtonRadix, {
   $$buttonBgColor: "$colors$grey50",
   $$buttonBorderColor: "inherit",
   $$buttonOutlinedColor: "inherit",
-
   fontFamily: "$default",
   letterSpacing: 0,
   border: 0,
@@ -223,7 +221,7 @@ export const ButtonStyled = styled(ButtonRadix, {
         boxShadow: "none",
         padding: 0,
         border: 0,
-        height: 'unset',
+        height: "unset",
         color: "$$buttonColor",
       },
       contained: {
@@ -247,6 +245,19 @@ export const ButtonStyled = styled(ButtonRadix, {
           $$buttonColor: "$colors$neutral300",
         },
       },
+      menuDropdownItem: {
+        backgroundColor: "transparent",
+        boxShadow: "none",
+        padding: "0.25rem 0.5rem",
+        border: 0,
+        height: "unset",
+        color: "$$buttonColor",
+        width: "100%",
+        borderRadius: 0,
+        "&:hover": {
+          backgroundColor: "$dark100",
+        },
+      },
     },
     fontWeight: {
       regular: { fontWeight: "$regular" },

package/src/components/CheckboxGroup.tsx

@@ -1,214 +1,196 @@
-import { ComponentProps } from 'react'
-import { styled } from '../styles'
+import { ComponentProps } from "react";
+import { styled } from "../styles";
 import { CheckboxGroup as CheckboxGroupRadix } from "@radix-ui/themes";
 import { typographyLabelValues } from "../types/typographyValues";
 
 export const CheckboxGroupStyled = styled(CheckboxGroupRadix.Root, {
-  fontFamily: '$default',
-  'svg': {
-    display: 'none'
+  fontFamily: "$default",
+  svg: {
+    display: "none",
   },
-  'label': {
-    display: 'flex',
-    alignItems: 'center',
-    gap: '$8',
-    cursor: 'pointer',
-    '&:focus button, &:hover button': {
-      transition: 'all 300ms ease-out',
-      boxShadow: '0px 0px 0px 4px rgba(56, 129, 255, 0.50)'
-    }
+  label: {
+    display: "flex",
+    alignItems: "center",
+    gap: "$8",
+    cursor: "pointer",
+    "&:focus button, &:hover button": {
+      transition: "all 300ms ease-out",
+      boxShadow: "0px 0px 0px 4px rgba(56, 129, 255, 0.50)",
+    },
   },
-  'label button': {
-    backgroundColor: '$white',
-    borderRadius: '2px',
-    height: '$16',
-    width: '$16',
-    position: 'relative',
-    border: '2px solid $dark300',
-    cursor: 'pointer',
+  "label button": {
+    backgroundColor: "$white",
+    borderRadius: "2px",
+    height: "$16",
+    width: "$16",
+    position: "relative",
+    border: "2px solid $dark300",
+    cursor: "pointer",
   },
-  'label button[data-state=checked]:before': {
-    backgroundColor: '$dark50',
-    content: '',
-    width: '8px',
-    height: '8px',
-    position: 'absolute',
-    top: '2px',
-    right: '2px',
+  "label button[data-state=checked]:before": {
+    backgroundColor: "$dark50",
+    content: "",
+    width: "8px",
+    height: "8px",
+    position: "absolute",
+    top: "2px",
+    right: "2px",
     zIndex: 2,
   },
-  'label button[data-state=checked]:after': {
-    backgroundColor: '$brand500',
-    content: '',
-    height: '$16',
-    width: '$16',
-    position: 'absolute',
-    top: '-2px',
-    right: '-2px',
-    borderRadius: '2px',
+  "label button[data-state=checked]:after": {
+    backgroundColor: "$brand500",
+    content: "",
+    height: "$16",
+    width: "$16",
+    position: "absolute",
+    top: "-2px",
+    right: "-2px",
+    borderRadius: "2px",
     zIndex: 1,
   },
 
   variants: {
     color: {
       success: {
-        'label': {
-          '&:focus button, &:hover button': {
-            boxShadow: '0px 0px 0px 4px rgba(38, 167, 67, 0.50)',
-          }
+        label: {
+          "&:focus button, &:hover button": {
+            boxShadow: "0px 0px 0px 4px rgba(38, 167, 67, 0.50)",
+          },
         },
-        'label button': {
-          borderColor: '$green500',
-          backgroundColor: '$dark50',
+        "label button": {
+          borderColor: "$green500",
+          backgroundColor: "$dark50",
         },
-        'label button[data-state=checked]:after': {
-          backgroundColor: '$green500',
+        "label button[data-state=checked]:after": {
+          backgroundColor: "$green500",
         },
       },
       blue: {},
       error: {
-        'label': {
-          '&:focus button, &:hover button': {
-            boxShadow: '0px 0px 0px 4px rgba(225, 86, 98, 0.50)'
-          }
+        label: {
+          "&:focus button, &:hover button": {
+            boxShadow: "0px 0px 0px 4px rgba(225, 86, 98, 0.50)",
+          },
         },
-        'label button': {
-          borderColor: '$error400',
-          backgroundColor: '$dark50',
+        "label button": {
+          borderColor: "$error400",
+          backgroundColor: "$dark50",
         },
-        'label button[data-state=checked]:after': {
-          backgroundColor: '$error600',
+        "label button[data-state=checked]:after": {
+          backgroundColor: "$error600",
         },
-      }
+      },
     },
     disabled: {
       true: {
-        'label': {
-          cursor: 'not-allowed',
+        label: {
+          cursor: "not-allowed",
           opacity: 0.5,
-          '&:focus button, &:hover button': {
-            boxShadow: 'none',
-          }
+          "&:focus button, &:hover button": {
+            boxShadow: "none",
+          },
+        },
+        "label button": {
+          cursor: "not-allowed",
         },
-        'label button': {
-          cursor: 'not-allowed',
-        }
       },
-      false: {}
+      false: {},
     },
     typography: typographyLabelValues,
     fontWeight: {
-      regular: { fontWeight: '$regular' },
-      medium: { fontWeight: '$medium' },
-      semibold: { fontWeight: '$semibold' },
-      bold: { fontWeight: '$bold' },
+      regular: { fontWeight: "$regular" },
+      medium: { fontWeight: "$medium" },
+      semibold: { fontWeight: "$semibold" },
+      bold: { fontWeight: "$bold" },
     },
   },
 
   compoundVariants: [
-
     {
-      color: 'blue',
+      color: "blue",
       disabled: false,
       css: {
-        'label': {
-          '&:focus button, &:hover button': {
-            boxShadow: '0px 0px 0px 4px rgba(56, 129, 255, 0.50)'
-          }
+        label: {
+          "&:focus button, &:hover button": {
+            boxShadow: "0px 0px 0px 4px rgba(56, 129, 255, 0.50)",
+          },
         },
-        'label button': {
-          borderColor: '$dark300',
+        "label button": {
+          borderColor: "$dark300",
         },
-        'label button[data-state=checked]:after': {
-          backgroundColor: '$brand500',
+        "label button[data-state=checked]:after": {
+          backgroundColor: "$brand500",
         },
-      }
+      },
     },
 
     {
-      color: 'blue',
+      color: "blue",
       disabled: true,
       css: {
-        'label button': {
-          borderColor: '$brand100',
-          backgroundColor: '$dark50',
+        "label button": {
+          borderColor: "$brand100",
+          backgroundColor: "$dark50",
         },
-        'label button[data-state=checked]:after': {
-          backgroundColor: '$brand100',
+        "label button[data-state=checked]:after": {
+          backgroundColor: "$brand100",
         },
-      }
+      },
     },
 
     {
-      color: 'success',
+      color: "success",
       disabled: true,
       css: {
-        'label button': {
-          borderColor: '$success100',
-          backgroundColor: '$dark50',
-        },
-        'label button[data-state=checked]:after': {
-          backgroundColor: '$success100',
-        }
-      }
+        "label button": {
+          borderColor: "$success100",
+          backgroundColor: "$dark50",
+        },
+        "label button[data-state=checked]:after": {
+          backgroundColor: "$success100",
+        },
+      },
     },
 
     {
-      color: 'error',
+      color: "error",
       disabled: true,
       css: {
-        'label button': {
-          borderColor: '$error100',
-          backgroundColor: '$dark50',
-        },
-        'label button[data-state=checked]:after': {
-          backgroundColor: '$error100',
-        }
-      }
-    }
+        "label button": {
+          borderColor: "$error100",
+          backgroundColor: "$dark50",
+        },
+        "label button[data-state=checked]:after": {
+          backgroundColor: "$error100",
+        },
+      },
+    },
   ],
   defaultVariants: {
-    color: 'blue',
-    disabled: false
-  }
-})
-
-export type CheckboxGroupProps = ComponentProps<typeof CheckboxGroupStyled> & {
-  placeholder?: string
-  children?: React.ReactNode
-  color?: string
-  disabled?: boolean
-}
-
-export type CheckboxItemProps = {
-  children?: React.ReactNode
-  value: string,
-  style?: React.CSSProperties
-}
+    color: "blue",
+    disabled: false,
+  },
+});
 
-export function CheckboxGroup({
-  children,
+const StyledItem = styled(CheckboxGroupRadix.Item, {});
 
-  ...props
-}: CheckboxGroupProps) {
-  return (
-    <CheckboxGroupStyled {...props}>
-      {children}
-    </CheckboxGroupStyled>
-  )
+export type CheckboxGroupProps = ComponentProps<typeof CheckboxGroupStyled> & {
+  placeholder?: string;
+  children?: React.ReactNode;
+  color?: string;
+  disabled?: boolean;
+};
+
+export type CheckboxItemProps = ComponentProps<typeof StyledItem> & {
+  children?: React.ReactNode;
+  value: string;
+  style?: React.CSSProperties;
+};
+
+export function CheckboxGroup({ children, ...props }: CheckboxGroupProps) {
+  return <CheckboxGroupStyled {...props}>{children}</CheckboxGroupStyled>;
 }
 
-
-export function CheckboxItem({
-  children,
-
-  ...props
-}: CheckboxItemProps) {
-  return (
-    <CheckboxGroupRadix.Item {...props}>
-      {children}
-    </CheckboxGroupRadix.Item>
-  )
+export function CheckboxItem({ children, ...props }: CheckboxItemProps) {
+  return <StyledItem {...props}>{children}</StyledItem>;
 }
-
-

package/src/components/Drawer/index.tsx

@@ -0,0 +1,48 @@
+import { ComponentProps, ReactNode } from "react";
+import { colors, Colors } from "@lets-events/tokens";
+import Icon from "../Icon";
+import {
+  DrawerOverlayStyled,
+  DrawerContainerStyled,
+  DrawerHeaderDiv,
+  DrawerHeaderTitle,
+  DrawerHeaderCloseButton,
+} from "./styledComponents";
+
+export type DrawerProps = ComponentProps<typeof DrawerOverlayStyled> & {
+  isOpen: boolean;
+  onClose: () => void;
+  width?: string;
+  backgroundColor?: keyof Colors;
+  title: string;
+  children?: ReactNode;
+};
+
+export function Drawer({
+  isOpen,
+  onClose,
+  width,
+  backgroundColor,
+  title,
+  children,
+}: DrawerProps) {
+  if (!isOpen) return null;
+  return (
+    <DrawerOverlayStyled>
+      <DrawerContainerStyled
+        style={{
+          width: width ?? "34.25rem",
+          backgroundColor: colors[backgroundColor ?? "neutral50"],
+        }}
+      >
+        <DrawerHeaderDiv>
+          <DrawerHeaderTitle>{title}</DrawerHeaderTitle>
+          <DrawerHeaderCloseButton onClick={onClose}>
+            <Icon size={"xl"} color="$dark600" name="xmark" />
+          </DrawerHeaderCloseButton>
+        </DrawerHeaderDiv>
+        {children}
+      </DrawerContainerStyled>
+    </DrawerOverlayStyled>
+  );
+}

package/src/components/Drawer/styledComponents.ts

@@ -0,0 +1,46 @@
+import { styled } from "../../styles";
+
+export const DrawerOverlayStyled = styled("div", {
+  position: "fixed",
+  top: 0,
+  right: 0,
+  width: "100vw",
+  height: "100vh",
+  background: "rgba(0, 0, 0, 0.4)",
+  zIndex: 1000,
+});
+
+export const DrawerContainerStyled = styled("div", {
+  position: "absolute",
+  top: 0,
+  right: 0,
+  maxWidth: "calc(100% - 2rem)",
+  height: "100%",
+  background: "$neutral50",
+  display: "flex",
+  flexDirection: "column",
+  boxShadow: "-4px 0 12px rgba(0, 0, 0, 0.2)",
+  padding: "1.5rem 0",
+  overflowY: "auto",
+});
+
+export const DrawerHeaderDiv = styled("div", {
+  display: "flex",
+  justifyContent: "space-between",
+  alignItems: "center",
+  borderBottom: "1px solid $neutral300",
+  padding: "0 1.5rem 1rem",
+  position: "relative",
+});
+export const DrawerHeaderTitle = styled("h2", {
+  fontSize: "1.125rem",
+  fontWeight: "400",
+  fontFamily: "Work Sans",
+  color: "$dark800",
+  margin: "0",
+});
+export const DrawerHeaderCloseButton = styled("button", {
+  background: "none",
+  border: "none",
+  cursor: "pointer",
+});

package/src/components/FormFields/MultiSelectFormField.tsx

@@ -0,0 +1,65 @@
+import { useController, useFormContext } from "react-hook-form";
+import { Flex } from "../Flex";
+import { FormLabel } from "./FormLabel";
+import { ErrorFormMessage } from "./ErrorFormMessage";
+import { MultiSelect, MultiSelectProps } from "../MultiSelect";
+
+export type MultiSelectFormFieldProps = MultiSelectProps & {
+  name: string;
+  label?: string;
+  required?: boolean;
+};
+
+export const MultiSelectFormField = ({
+  name,
+  label,
+  required,
+  ...rest
+}: MultiSelectFormFieldProps) => {
+  const {
+    formState: { errors },
+  } = useFormContext();
+
+  const { field } = useController({
+    name,
+    rules: {
+      required
+    },
+    defaultValue: [],
+  });
+
+  const { value, onChange, ref, onBlur, disabled } = field;
+
+  const haveError = !!errors[name];
+
+  const errorMsg = errors[name]?.message;
+
+  const handleChange = (v: any) => {
+    onChange(v);
+  };
+
+  return (
+    <Flex direction={"column"}>
+      <FormLabel
+        name={name}
+        label={label}
+        required={required}
+        haveError={haveError}
+      />
+      <MultiSelect
+        value={value}
+        onValueChange={handleChange}
+        ref={ref}
+        color={haveError ? "error" : "default"}
+        {...rest}
+      />
+      {/* <TextareaField
+        {...register(name, { required })}
+        placeholder={placeholder}
+        color={haveError ? "error" : "default"}
+        aria-labelledby={`${name}-label`}
+      /> */}
+      <ErrorFormMessage message={errorMsg} />
+    </Flex>
+  );
+};

package/src/components/MenuDropdown/index.tsx

@@ -0,0 +1,30 @@
+import { ComponentProps, ReactNode, useState } from "react";
+import {
+  MenuDropdownContainerStyled,
+  TriggerButtonStyled,
+  MenuItemsContainerStyled,
+} from "./styledComponents";
+import Icon from "../Icon";
+
+export type MenuDropdownProps = ComponentProps<
+  typeof MenuDropdownContainerStyled
+> & {
+  children: ReactNode;
+};
+
+export function MenuDropdown({ children }: MenuDropdownProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  function handleMenuDropdown() {
+    setIsOpen(!isOpen);
+  }
+  return (
+    <MenuDropdownContainerStyled>
+      <TriggerButtonStyled onClick={handleMenuDropdown}>
+        <Icon name="ellipsis" size="xl" color="#FFFFFF" />
+      </TriggerButtonStyled>
+      {isOpen && (
+        <MenuItemsContainerStyled>{children}</MenuItemsContainerStyled>
+      )}
+    </MenuDropdownContainerStyled>
+  );
+}

package/src/components/MenuDropdown/styledComponents.ts

@@ -0,0 +1,31 @@
+import { styled } from "../../styles";
+
+export const MenuDropdownContainerStyled = styled("div", {
+  position: "relative",
+  width: "fit-content",
+});
+export const TriggerButtonStyled = styled("button", {
+  backgroundColor: "$brand500",
+  boxShadow: "0px 4px 4px 0px #23354314",
+  borderRadius: "$full",
+  border: "none",
+  height: "1.875rem",
+  width: "1.875rem",
+  cursor: "pointer",
+});
+export const MenuItemsContainerStyled = styled("div", {
+  position: "absolute",
+  right: 0,
+  top: "2.125rem",
+  zIndex: "999",
+  width: "fit-content",
+  minWidth: "5rem",
+  background: "#fff",
+  maxWidth: "18.75rem",
+  margin: "auto",
+  boxShadow: "0px 4px 4px 0px rgba(35, 53, 67, 0.0784313725)",
+  border: "1px solid $dark300",
+  borderRadius: "0.5rem",
+  padding: "0.5rem 0",
+  height: "fit-content",
+});