@bigmath-ui-library/core 2.0.4

package/src/components/BMDatePicker/BMDatePicker.tsx

@@ -0,0 +1,187 @@
+import React, { FC, useState } from "react";
+import { AdapterDateFns } from "@mui/x-date-pickers/AdapterDateFns";
+
+import {
+  DatePicker,
+  PickersTextField,
+  LocalizationProvider,
+  PickersTextFieldProps,
+} from "@mui/x-date-pickers";
+
+import {
+  Box,
+  Theme,
+  styled,
+  SxProps,
+  useTheme,
+  IconButton,
+  Typography,
+  PopperProps,
+  InputAdornment,
+} from "@mui/material";
+
+import CalendarIcon from "../../assets/icons/Calendar.svg";
+
+interface BMDatePickerProps
+  extends Omit<React.ComponentProps<typeof DatePicker>, "onChange" | "value"> {
+  label?: string;
+  value: Date | null;
+  onChange: (date: Date | null) => void;
+  readOnly?: boolean;
+  openOnInputClick?: boolean;
+  dataTestid: string;
+  placeholder?: string;
+  shouldDisableDate?: (day: Date) => boolean;
+  bottomNoteText?: React.ReactNode;
+  className?: string;
+  popoverProps?: Partial<PopperProps>;
+  format?: string;
+  disabled?: boolean;
+  labelSx?: SxProps<Theme>;
+}
+
+const BottomNote = styled(Box)(({ theme }) => ({
+  marginTop: theme.spacing(0.5),
+  color: theme.palette.text.secondary,
+  fontSize: theme.typography.caption.fontSize,
+}));
+
+const StyledDatePickerWrapper = styled(Box)(({ theme }) => ({
+  display: "flex",
+  flexDirection: "column",
+  gap: theme.spacing(0.5),
+}));
+
+export const BMDatePicker: FC<BMDatePickerProps> = ({
+  label,
+  value,
+  onChange,
+  readOnly = false,
+  openOnInputClick = false,
+  placeholder,
+  minDate,
+  maxDate,
+  shouldDisableDate,
+  bottomNoteText,
+  className,
+  dataTestid = "bm-datepicker",
+  popoverProps,
+  labelSx,
+  format = "yyyy-MM-dd",
+  disabled = false,
+  ...props
+}) => {
+  const theme = useTheme();
+  const [open, setOpen] = useState(false);
+
+  // Open only if input click allowed and not disabled/readOnly
+  const handleInputClick = () => {
+    if (openOnInputClick && !disabled && !readOnly) {
+      setOpen(true);
+    }
+  };
+
+  // Open calendar when calendar icon clicked
+  const handleCalendarIconClick = () => {
+    if (!disabled && !readOnly) {
+      setOpen(true);
+    }
+  };
+
+  const CustomPickerTextField = React.forwardRef<
+    HTMLDivElement,
+    PickersTextFieldProps
+  >((props, ref) => {
+    return (
+      <PickersTextField
+        {...props}
+        ref={ref}
+        onClick={openOnInputClick ? handleInputClick : () => {}}
+        data-testid={dataTestid}
+        // @ts-ignore - InputProps is deprecated in MUI v6 but needed for compatibility
+        InputProps={{
+          ...(props as any).InputProps,
+          readOnly: false,
+          endAdornment: (
+            <InputAdornment position="end">
+              <IconButton
+                size="small"
+                onClick={handleCalendarIconClick}
+                disabled={disabled || readOnly}
+                tabIndex={-1}
+                aria-label="open calendar"
+              >
+                <CalendarIcon />
+              </IconButton>
+            </InputAdornment>
+          ),
+          sx: {
+            cursor: openOnInputClick ? "pointer" : "default",
+            "&.MuiOutlinedInput-root": {
+              borderRadius: 1,
+              paddingLeft: 1,
+              paddingRight: 1,
+              "& fieldset": {
+                borderColor: theme.palette.grey[300],
+              },
+              "&:hover fieldset": {
+                borderColor: theme.palette.primary[300],
+              },
+              "&.Mui-focused fieldset": {
+                borderColor: theme.palette.primary.main,
+                boxShadow: `0 0 0 2px ${theme.palette.primary.main}40`,
+              },
+            },
+            "& input": {
+              paddingTop: theme.spacing(1.5),
+              paddingBottom: theme.spacing(1.5),
+            },
+          },
+        }}
+        size="small"
+        fullWidth
+      />
+    );
+  });
+  CustomPickerTextField.displayName = "CustomPickerTextField";
+
+  return (
+    <LocalizationProvider dateAdapter={AdapterDateFns}>
+      <StyledDatePickerWrapper className={className}>
+        {!!label && (
+          <Typography
+            fontWeight={600}
+            variant="caption"
+            sx={{ color: theme.palette.text.secondary, ...labelSx }}
+          >
+            {label.toUpperCase()}
+          </Typography>
+        )}
+
+        <DatePicker
+          {...props}
+          value={value}
+          onChange={onChange}
+          minDate={minDate}
+          maxDate={maxDate}
+          shouldDisableDate={shouldDisableDate}
+          readOnly={readOnly}
+          disabled={disabled}
+          format={format}
+          open={open}
+          onOpen={() => setOpen(true)}
+          onClose={() => setOpen(false)}
+          closeOnSelect={true}
+          slots={{ textField: CustomPickerTextField }}
+          slotProps={{
+            popper: {
+              ...popoverProps,
+            },
+          }}
+        />
+
+        {!!bottomNoteText && <BottomNote>{bottomNoteText}</BottomNote>}
+      </StyledDatePickerWrapper>
+    </LocalizationProvider>
+  );
+};

package/src/components/BMDatePicker/index.ts

@@ -0,0 +1 @@
+export * from './BMDatePicker';

package/src/components/BMDropdown/BMDropdown.tsx

@@ -0,0 +1,107 @@
+import React, { FC } from "react";
+import { Menu, MenuProps, PopoverOrigin, styled } from "@mui/material";
+
+import { BMTooltip } from "../BMTooltip/BMTooltip";
+
+export interface DropdownProps extends Omit<MenuProps, "open"> {
+  origin: React.ReactElement | ((dropdownOpen: boolean) => React.ReactElement);
+  position?: "bottom" | "bottomCenter" | "right";
+  growDirection?: "up" | "down" | "left" | "right";
+  keepOpenOnSelect?: boolean;
+  className?: string;
+  dataTestId: string;
+  tooltip?: string;
+  disabled?: boolean;
+}
+
+const OriginWrapper = styled("div")({
+  width: "fit-content",
+});
+
+export const BMDropdown: FC<DropdownProps> = ({
+  children,
+  position = "bottom",
+  growDirection,
+  origin,
+  keepOpenOnSelect,
+  className,
+  dataTestId,
+  tooltip,
+  disabled,
+  ...menuProps
+}) => {
+  const [anchorEl, setAnchorEl] = React.useState<HTMLElement | null>(null);
+
+  const handleClick = (event: React.MouseEvent<HTMLDivElement>) => {
+    if (!disabled) {
+      setAnchorEl(event.currentTarget);
+    }
+    event.stopPropagation();
+  };
+
+  const handleClose = (event: React.MouseEvent | Event) => {
+    setAnchorEl(null);
+    event.stopPropagation?.();
+  };
+
+  const handleMenuClick = (event: React.MouseEvent) => {
+    if (!keepOpenOnSelect) {
+      handleClose(event);
+    }
+  };
+
+  const open = Boolean(anchorEl);
+
+  let anchorOrigin: PopoverOrigin = { vertical: "bottom", horizontal: "right" };
+  let transformOrigin: PopoverOrigin = { vertical: "top", horizontal: "right" };
+
+  if (position === "bottom") {
+    anchorOrigin = {
+      vertical: "bottom",
+      horizontal: growDirection === "right" ? "left" : "right",
+    };
+    transformOrigin = {
+      vertical: "top",
+      horizontal: growDirection === "right" ? "left" : "right",
+    };
+  } else if (position === "bottomCenter") {
+    anchorOrigin = { vertical: "bottom", horizontal: "center" };
+    transformOrigin = { vertical: "top", horizontal: "center" };
+  } else if (position === "right") {
+    anchorOrigin = {
+      vertical: growDirection === "up" ? "bottom" : "top",
+      horizontal: "right",
+    };
+    transformOrigin = {
+      vertical: growDirection === "up" ? "bottom" : "top",
+      horizontal: "left",
+    };
+  }
+
+  return (
+    <>
+      <BMTooltip title={tooltip ?? ""} placement="top">
+        <OriginWrapper
+          onClick={handleClick}
+          className={className}
+          data-testid={dataTestId}
+        >
+          {typeof origin === "function" ? origin(open) : origin}
+        </OriginWrapper>
+      </BMTooltip>
+
+      <Menu
+        open={open}
+        anchorEl={anchorEl}
+        disableAutoFocusItem
+        onClose={handleClose}
+        onClick={handleMenuClick}
+        anchorOrigin={anchorOrigin}
+        transformOrigin={transformOrigin}
+        {...menuProps}
+      >
+        {children}
+      </Menu>
+    </>
+  );
+};

package/src/components/BMDropdown/index.ts

@@ -0,0 +1 @@
+export * from "./BMDropdown";

package/src/components/BMForm/BMFormControlLabel.tsx

@@ -0,0 +1,23 @@
+import {
+	FormControlLabel,
+	type FormControlLabelProps,
+	styled,
+} from "@mui/material";
+
+const StyledFormControlLabel = styled(FormControlLabel)(({ theme }) => ({
+	marginLeft: 0,
+	marginRight: 0,
+	"& .bm-MuiFormControlLabel-label": {
+		...theme.typography.body2,
+		marginLeft: theme.spacing(0.5),
+		fontWeight: 400,
+	},
+	"&.Mui-disabled": {
+		color: theme.palette.grey[600],
+		cursor: "not-allowed",
+	},
+}));
+
+export const BMFormControlLabel = (props: FormControlLabelProps) => (
+	<StyledFormControlLabel {...props} />
+);

package/src/components/BMForm/BMLabel.tsx

@@ -0,0 +1,24 @@
+import {
+	InputLabel,
+	inputLabelClasses,
+	InputLabelProps,
+	styled,
+} from "@mui/material";
+
+const StyledLabel = styled(InputLabel)(({ theme }) => ({
+	marginLeft: 0,
+	marginRight: 0,
+	[`& .${inputLabelClasses.root}`]: {
+		...theme.typography.body2,
+		marginLeft: theme.spacing(0.5),
+		fontWeight: 400,
+	},
+	"&.Mui-disabled": {
+		color: theme.palette.grey[600],
+		cursor: "not-allowed",
+	},
+}));
+
+export const BMLabel = (props: InputLabelProps) => (
+	<StyledLabel {...props} />
+);

package/src/components/BMForm/index.ts

@@ -0,0 +1,2 @@
+export * from './BMFormControlLabel';
+export * from './BMLabel';

package/src/components/BMHelloBanner/BMHelloBanner.tsx

@@ -0,0 +1,68 @@
+import React, { FC } from 'react';
+import { Box, Link, styled, Typography } from '@mui/material';
+
+import CloseIcon from '../../assets/icons/close-basic.svg';
+
+
+const Panel = styled('div')(({ theme }) => ({
+  color: theme.palette.grey[700],
+  marginTop: theme.spacing(2),
+  backgroundColor: theme.palette.common.white,
+  padding: theme.spacing(2.7, 2.5),
+  border: `1px solid ${theme.palette.grey[200]}`,
+  boxShadow: '0px 8px 16px rgba(11, 17, 23, 0.08)',
+  borderRadius: theme.shape.borderRadius
+}));
+
+const StartTitle = styled(Typography)(({ theme }) => ({
+  color: theme.palette.common.indigo
+}));
+
+type BMHelloBanner = {
+  title?: string;
+  subTitle?: string | React.ReactElement;
+  showBanner: boolean;
+  setShowBanner?: (show: boolean) => void;
+};
+
+export const BMHelloBanner: FC<BMHelloBanner> = ({ title, subTitle, showBanner = true, setShowBanner }) => {
+
+  return showBanner ? (
+    <Panel>
+      <Box display="flex" justifyContent="space-between" alignItems="self-start" position="relative">
+        <Box display="flex" alignItems="self-start">
+          <Box mr={3} fontSize={32}>
+            {'👋'}
+          </Box>
+          <div>
+            {title && (
+              <StartTitle variant="h5">
+                {title}
+              </StartTitle>
+            )}
+
+            {subTitle && (
+              <Box mt={0.75} display="flex" color="grey.700">
+                <Box display="flex" alignItems="center" sx={{ fontWeight: 400 }}>
+                  {subTitle}
+                </Box>
+              </Box>
+            )}
+          </div>
+        </Box>
+        <Box position="absolute" right={0}>
+          {setShowBanner && (
+            <Link component={'a'} onClick={() => setShowBanner(false)} sx={{ textDecoration: 'none' }}>
+              <Box display="flex" alignItems="center" color="primary.600">
+                <Box mr={0.5} display="flex" alignItems="center">
+                  <CloseIcon />
+                </Box>
+                <Typography variant="subtitle1">Dismiss</Typography>
+              </Box>
+            </Link>
+          )}
+        </Box>
+      </Box>
+    </Panel>
+  ) : null;
+};

package/src/components/BMHelloBanner/index.ts

@@ -0,0 +1 @@
+export * from './BMHelloBanner';

package/src/components/BMInput/BMInput.tsx

@@ -0,0 +1,31 @@
+import { type StandardTextFieldProps, TextField } from "@mui/material";
+import type { FC, ReactNode } from "react";
+import { BMTooltip } from "../BMTooltip";
+
+export type BMInputProps = {
+  tooltip?: ReactNode;
+  size?: "small" | "large" | "medium";
+  dataTestId: string;
+} & Omit<
+  StandardTextFieldProps,
+  | "variant"
+  | "color"
+  | "classes"
+  | "select"
+  | "FormHelperTextProps"
+  | "SelectProps"
+>;
+
+export const BMInput: FC<BMInputProps> = ({ label, tooltip, dataTestId, ...props }) => (
+  <TextField
+    {...props}
+    label={
+      <>
+        {label} {tooltip && <BMTooltip title={tooltip} />}
+
+      </>
+    }
+    variant="standard"
+    data-testid={dataTestId}
+  />
+);

package/src/components/BMInput/BMInputEditableCode.tsx

@@ -0,0 +1,120 @@
+import { FC, ReactElement, useRef, useState } from "react";
+import { Box, IconButton, styled } from "@mui/material";
+
+import { BMInput, BMInputProps } from "../BMInput/BMInput";
+import { BMTooltip } from "../BMTooltip/BMTooltip";
+
+import CheckIcon from "../../assets/icons/check.svg";
+import EditIcon from "../../assets/icons/pencil.svg";
+import CloseIcon from "../../assets/icons/close_collapse.svg";
+
+export interface BMInputEditableCodeProps
+  extends Omit<BMInputProps, "defaultValue" | "inputRef" | "tooltip"> {
+  content: string;
+  onSave: (savedString: string) => void;
+  tooltip?: string;
+}
+
+const Content = styled(Box)(({ theme }) => ({
+  borderStyle: "dashed",
+  borderWidth: "0 0 1px 0",
+  color: theme.palette.primary.main,
+  display: "inline",
+  fontStyle: "normal",
+  fontFamily: "Menlo",
+  "&:hover": {
+    cursor: "pointer",
+  },
+}));
+
+const IconButtonStyled = styled(IconButton)(({ theme }) => ({
+  height: 24,
+  width: 24,
+  borderRadius: theme.shape.borderRadius,
+  border: `1px solid ${theme.palette.grey[300]}`,
+  background: theme.palette.background.paper,
+  color: theme.palette.primary[600],
+  marginTop: theme.spacing(0.25),
+  marginRight: theme.spacing(0.375),
+  "&:hover": {
+    background: theme.palette.background.paper,
+  },
+}));
+
+const EditIconStyled = styled(EditIcon)(() => ({
+  position: "relative",
+  left: -4,
+  top: 7,
+}));
+
+export const BMInputEditableCode: FC<BMInputEditableCodeProps> = ({
+  content,
+  onSave,
+  tooltip,
+  ...bmInputProps
+}): ReactElement => {
+  const [isEditing, setIsEditing] = useState(false);
+  const fieldRef = useRef<HTMLInputElement>(null);
+  const placeholder = bmInputProps.placeholder ?? "";
+
+  return (
+    <>
+      {isEditing ? (
+        <Box display="inline-table" position="relative">
+          <Box
+            sx={{
+              "& .MuiFormLabel-root": {
+                display: "none",
+              },
+            }}
+          >
+            <BMInput
+              inputRef={fieldRef}
+              defaultValue={content}
+              {...bmInputProps}
+            />
+          </Box>
+          <Box textAlign="right" position="absolute" right={0}>
+            <IconButtonStyled
+              onClick={() => {
+                if (fieldRef.current) {
+                  if (fieldRef.current.value === "") {
+                    setIsEditing(false);
+                  } else {
+                    fieldRef.current.value = "";
+                  }
+                }
+              }}
+              size="small"
+            >
+              <CloseIcon viewBox="-1 -1 17 17" />
+            </IconButtonStyled>
+
+            <IconButtonStyled
+              onClick={() => {
+                setIsEditing(false);
+                onSave(fieldRef?.current?.value ?? "");
+              }}
+              size="small"
+            >
+              <CheckIcon />
+            </IconButtonStyled>
+          </Box>
+        </Box>
+      ) : (
+        <BMTooltip title={tooltip ?? placeholder}>
+          <Content
+            onClick={() => {
+              setIsEditing(true);
+            }}
+          >
+            <span>{content.length ? content : placeholder}</span>
+            <span>
+              <EditIconStyled />
+            </span>
+          </Content>
+        </BMTooltip>
+      )}
+    </>
+  );
+};

package/src/components/BMInput/BMInputField.tsx

@@ -0,0 +1,37 @@
+import type { ReactElement } from "react";
+import {
+	type FieldValues,
+	type UseControllerProps,
+	useController,
+} from "react-hook-form";
+import { BMInput, type BMInputProps } from "./BMInput";
+
+export type BMInputFieldProps<T extends FieldValues> = UseControllerProps<T> &
+	BMInputProps;
+
+export const BMInputField = <T extends FieldValues>(
+	props: BMInputFieldProps<T>,
+): ReactElement => {
+	const {
+		name,
+		rules,
+		defaultValue,
+		control,
+		shouldUnregister,
+		...bmInputProps
+	} = props;
+	const {
+		field: { ref, ...fieldProps },
+		fieldState,
+	} = useController({ name, rules, defaultValue, control, shouldUnregister });
+
+	return (
+		<BMInput
+			{...fieldProps}
+			{...bmInputProps}
+			inputRef={ref}
+			error={!!fieldState.error}
+			helperText={fieldState.error?.message ?? bmInputProps.helperText}
+		/>
+	);
+};

package/src/components/BMInput/BMSearch.tsx

@@ -0,0 +1,17 @@
+import { FC } from "react";
+import { BMInput, BMInputProps } from "./BMInput";
+import Search from '../../assets/icons/search.svg';
+import { inputBaseClasses, styled } from "@mui/material";
+
+const StyledSearch = styled(BMInput)(({ theme }) => ({
+    [`& .${inputBaseClasses.adornedStart}`]: {
+        padding: '4px 8px',
+        '& >svg': {
+            width: '26px'
+        },
+    }
+
+}));
+export const BMSearch: FC<BMInputProps> = (props) => {
+    return <StyledSearch  InputProps={{ startAdornment: <Search />, disableUnderline: true }} type="search" {...props} />
+}

package/src/components/BMInput/BMStripeInput.tsx

@@ -0,0 +1,24 @@
+import React, { forwardRef, Ref } from "react";
+import type { InputBaseComponentProps } from "@mui/material/InputBase";
+
+interface BMStripeInputProps extends InputBaseComponentProps {
+  handleOnChange?: React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+  handleOnBlur?: React.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+}
+
+export const BMStripeInput = forwardRef<unknown, BMStripeInputProps>(
+  (props, ref: Ref<unknown>) => {
+    const { component: Component = "input", handleOnChange, handleOnBlur, ...rest } = props;
+
+    return (
+      <Component
+        {...rest}
+        ref={ref}
+        onChange={handleOnChange}
+        onBlur={handleOnBlur}
+      />
+    );
+  }
+);
+
+BMStripeInput.displayName = "BMStripeInput";

package/src/components/BMInput/index.ts

@@ -0,0 +1,5 @@
+export * from "./BMInput";
+export * from "./BMInputField";
+export * from "./BMSearch";
+export * from "./BMStripeInput";
+export * from "./BMInputEditableCode";