@bigmath-ui-library/core 2.0.4

package/src/components/BMButton/index.ts

@@ -0,0 +1,3 @@
+export * from "./BMButton";
+export * from "./BMSplitButton";
+export * from './BMButtonGroup';

package/src/components/BMCheckbox/BMCheckbox.tsx

@@ -0,0 +1,44 @@
+import { type InputProps, Typography, styled } from "@mui/material";
+import Checkbox, { type CheckboxProps } from "@mui/material/Checkbox";
+import { BMFormControlLabel } from "../BMForm/BMFormControlLabel";
+
+export interface BMCheckboxProps extends CheckboxProps {
+	dataTestId: string;
+	label: React.ReactNode;
+	labelClassName?: string;
+	inputProps?: InputProps["inputProps"];
+}
+
+const CheckBoxIcon = styled("span")(({ theme }) => ({
+	width: 16,
+	height: 16,
+	margin: "3.14px",
+	borderRadius: "1px",
+	boxShadow: `inset 0 0 0 2px ${theme.palette.grey[400]}, inset 0 -1px 0 ${theme.palette.grey[400]}`,
+	"input:hover ~ &": {
+		background: theme.palette.grey[100],
+	},
+	"input:disabled ~ &": {
+		boxShadow: `inset 0 0 0 2px ${theme.palette.grey[200]}, inset 0 -1px 0 ${theme.palette.grey[200]}`,
+		background: theme.palette.grey[100],
+	},
+}));
+
+export const BMCheckbox: React.FC<BMCheckboxProps> = ({
+	label,
+	labelClassName,
+	dataTestId,
+	...checkboxProps
+}) => {
+	return (
+		<BMFormControlLabel
+			control={<Checkbox {...checkboxProps} data-testid={dataTestId} icon={<CheckBoxIcon />} />}
+			label={
+				<Typography component="span" variant="body2">
+					{label}
+				</Typography>
+			}
+			className={labelClassName}
+		/>
+	);
+};

package/src/components/BMCheckbox/BMCheckboxField.tsx

@@ -0,0 +1,41 @@
+import type { ReactElement } from "react";
+import {
+	type FieldValues,
+	type UseControllerProps,
+	useController,
+} from "react-hook-form";
+import { BMCheckbox, type BMCheckboxProps } from "./BMCheckbox";
+
+type BMCheckboxFieldProps<T extends FieldValues> = UseControllerProps<T> &
+	BMCheckboxProps;
+
+export const BMCheckboxField = <T extends FieldValues>(
+	props: BMCheckboxFieldProps<T>,
+): ReactElement => {
+	const {
+		name,
+		rules,
+		defaultValue,
+		control,
+		shouldUnregister,
+		...bmCheckboxProps
+	} = props;
+	const { field } = useController({
+		name,
+		rules,
+		defaultValue,
+		control,
+		shouldUnregister,
+	});
+
+	return (
+		<BMCheckbox
+			name={field.name}
+			inputRef={field.ref}
+			checked={!!field.value}
+			onBlur={field.onBlur}
+			onChange={field.onChange}
+			{...bmCheckboxProps}
+		/>
+	);
+};

package/src/components/BMCheckbox/index.ts

@@ -0,0 +1,2 @@
+export * from "./BMCheckbox";
+export * from "./BMCheckboxField";

package/src/components/BMCloudSelect/BMCloudList.tsx

@@ -0,0 +1,43 @@
+import { BMCloudSelectorOption } from "./BMCloudSelect";
+import AWS from '../../assets/icons/aws.svg';
+import GCP from '../../assets/icons/google-cloud.svg';
+import Azure from '../../assets/icons/microsoft-azure.svg';
+import Kubernetes from '../../assets/icons/k8s.svg';
+import OnPrem from '../../assets/icons/onprem.svg';
+
+export const AWS_CLOUD_OPTION: BMCloudSelectorOption<string> = {
+    label: "AWS",
+    icon: <AWS />,
+    value: "aws",
+    description: "Amazon Web Services",
+    visible: true,
+}
+
+export const GCP_CLOUD_OPTION: BMCloudSelectorOption<string> = {
+    label: "GCP",
+    icon: <GCP />,
+    value: "gcp",
+    description: "Google Cloud Platform",
+    visible: true,
+}
+export const AZURE_CLOUD_OPTION: BMCloudSelectorOption<string> = {
+    label: "Azure",
+    icon: <Azure />,
+    value: "azure",
+    description: "Microsoft Azure",
+    visible: true,
+}
+export const K8S_CLOUD_OPTION: BMCloudSelectorOption<string> = {
+    label: "Kubernetes",
+    icon: <Kubernetes />,
+    value: "k8s",
+    description: "Kubernetes",
+    visible: true,
+}
+export const ON_PREM_CLOUD_OPTION: BMCloudSelectorOption<string> = {
+    label: "On Prem",
+    icon: <OnPrem />,
+    value: "onprem",
+    description: "On Premise",
+    visible: true,
+}

package/src/components/BMCloudSelect/BMCloudSelect.tsx

@@ -0,0 +1,109 @@
+import { ReactElement, ReactNode } from "react";
+import { Box, styled, Typography } from "@mui/material";
+import { themeVariables } from "../../theme/variables";
+import CheckIcon from "../../assets/icons/circle-selected.svg";
+import CircleIcon from "../../assets/icons/circle-unselected.svg";
+
+export interface BMCloudSelectorOption<T> {
+    label: string;
+    icon: ReactNode;
+    description?: string;
+    value: T;
+    visible: boolean;
+    dataTestId?: string;
+}
+
+export interface BMCloudSelectorProps<T> {
+    label?: ReactNode;
+    overrideOptionWidth?: number;
+    options: BMCloudSelectorOption<T>[];
+    value: T;
+    onChange: (value: T) => void;
+}
+
+
+const Card = styled("div", {
+    shouldForwardProp: (prop) => prop !== 'selected' && prop !== 'visible'
+})<{
+    selected?: boolean;
+    visible?: boolean;
+}>((props) => {
+    const { theme, selected, visible } = props;
+    return {
+        cursor: 'pointer',
+        userSelect: 'none',
+        width: '200px',
+        height: 56,
+        display: visible === false ? 'none' : 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        flexShrink: 0,
+        padding: theme.spacing(0, 1.5),
+        border: `1px solid ${theme.palette.grey[200]}`,
+        borderRadius: theme.shape.borderRadius,
+        marginRight: theme.spacing(1.5),
+        '&:last-child': {
+            marginRight: 0
+        },
+        '&:hover': {
+            borderColor: theme.palette.primary[300],
+            boxShadow: themeVariables.shadowLight
+        },
+        ...(selected && {
+            backgroundColor: theme.palette.primary[100],
+            borderColor: theme.palette.primary[300],
+            boxShadow: `inset 0 0 0 1px ${theme.palette.primary[300]}`,
+            '&:hover': {
+                boxShadow: `inset 0 0 0 1px ${theme.palette.primary[300]}, ${themeVariables.shadowLight}`
+            }
+        })
+    };
+});
+
+const IconLogo = styled("i")(({ theme }) => ({
+    width: '32px',
+    height: '32px',
+    marginRight: theme.spacing(1)
+}));
+
+const CircleCheckIcon = styled(CheckIcon)(({ theme }: { theme: any }) => ({
+    color: theme.palette.primary[600],
+    height: '24px',
+    width: '24px'
+}));
+
+const Circle = styled(CircleIcon)(({ theme }) => ({
+    color: theme.palette.grey[600]
+}));
+
+export const BMCloudSelect = <T,>({
+    overrideOptionWidth,
+    options,
+    value,
+    onChange
+}: BMCloudSelectorProps<T>): ReactElement => {
+    return (
+        <Box display="flex" alignItems="center" flexWrap={"wrap"} rowGap={1} >
+            {options.map((item) => (
+                <Card
+                    key={String(item.value)}
+                    data-testid={item.dataTestId ?? item.value}
+                    onClick={() => onChange(item.value)}
+                    selected={value === item.value}
+                    visible={item.visible}
+                    style={{ width: overrideOptionWidth }}
+                >
+                    <Box display="flex" alignItems="center">
+                        <IconLogo>{item.icon}</IconLogo>
+                        <Typography variant="body1">{item.label}</Typography>
+                    </Box>
+                    {value === item.value ? (
+                        <CircleCheckIcon />
+                    ) : (
+                        <Circle />
+                    )}
+                </Card>
+            ))}
+        </Box>
+    );
+};

package/src/components/BMCloudSelect/BMCloudSelectField.tsx

@@ -0,0 +1,46 @@
+import { ReactElement } from "react";
+import { FormHelperText } from "@mui/material";
+import { Control, Controller, FieldValues, UseControllerProps } from "react-hook-form";
+import { BMCloudSelect, BMCloudSelectorProps } from "./BMCloudSelect";
+import { BMFormControlLabel } from "../BMForm/BMFormControlLabel";
+import { BMLabel } from "../BMForm";
+
+export type BMCloudSelectFieldProps<T extends FieldValues> = UseControllerProps<T> &
+    BMCloudSelectorProps<T>;
+
+export const BMCloudSelectField = <T extends FieldValues>({ name, label, control, options }: BMCloudSelectFieldProps<T>): ReactElement => {
+
+    return (
+
+        <Controller
+            name={name}
+            control={control as unknown as Control<FieldValues>}
+            render={({ field, fieldState }) => (
+                <BMFormControlLabel
+                    labelPlacement="top"
+                    control={
+                        <div>
+                            <BMCloudSelect
+                                options={options}
+                                value={field.value}
+                                onChange={field.onChange}
+                            />
+                            {
+                                fieldState.error && fieldState.error.message && (
+                                    <FormHelperText error>{fieldState.error.message}</FormHelperText>
+                                )
+                            }
+                        </div>
+                    }
+                    label={<BMLabel error={!!fieldState.error} sx={{ alignSelf: 'flex-start', marginBottom: '8px' }}>
+                        {label}
+                    </BMLabel>}
+                    sx={{
+                        flexDirection: 'column-reverse',
+                        alignItems: 'flex-start',
+                    }}
+                />
+            )}
+        />
+    );
+};

package/src/components/BMCloudSelect/index.ts

@@ -0,0 +1,3 @@
+export * from './BMCloudSelect';
+export * from './BMCloudSelectField';
+export * from './BMCloudList';

package/src/components/BMCodeBlock/BMCodeBlock.tsx

@@ -0,0 +1,233 @@
+import React, { FC, useEffect, useLayoutEffect, useRef, useState } from "react";
+import clsx from "clsx";
+import hljs from "highlight.js";
+import {
+  Box,
+  Collapse,
+  IconButton,
+  Typography,
+  Button,
+  useTheme,
+  styled,
+} from "@mui/material";
+
+import "highlight.js/styles/github.css";
+
+import CopyIcon from "../../assets/icons/copy.svg";
+import CaretDownIcon from "../../assets/icons/caret-down.svg";
+
+export interface CodeBlockProps {
+  showCopyButton?: boolean;
+  multiBlock?: boolean;
+  codeClassName?: string;
+  preClassName?: string;
+  lang?: string;
+  containerClassName?: string;
+  text: string | string[] | React.ReactElement | React.ReactElement[];
+  dataTestId?: string;
+  enabledExpandCollapse?: boolean;
+  collapseHeight?: number;
+  copyLabel?: string;
+  showAllLabel?: string;
+  collapseLabel?: string;
+  onCopySuccess?: () => void;
+}
+
+const COLLAPSE_HEIGHT = 120;
+
+const StyledBox = styled(Box)(({ theme }) => ({
+  background: theme.palette.info[400],
+  borderRadius: theme.shape.borderRadius,
+  color: theme.palette.grey[800],
+  border: `1px solid ${theme.palette.grey[300]}`,
+  overflowX: "hidden",
+  position: "relative",
+  marginBottom: theme.spacing(1),
+}));
+
+const CodeWrapper = styled("pre")(({ theme }) => ({
+  display: "block",
+  position: "relative",
+  fontFamily: "Menlo-Regular, Courier, monospace",
+  fontSize: 13,
+  lineHeight: "17px",
+  borderRadius: theme.spacing(0.5),
+  margin: 0,
+  paddingRight: theme.spacing(8),
+}));
+
+const InnerCode = styled("code")(({ theme }) => ({
+  fontFamily: "Menlo, Courier, monospace",
+  whiteSpace: "pre-wrap",
+  lineHeight: 2.7,
+  backgroundColor: "unset",
+  margin: 0,
+}));
+
+const InlineCopyButton = styled(Button)(({ theme }) => ({
+  position: "absolute",
+  right: theme.spacing(0.75),
+  top: theme.spacing(0.5),
+  fontSize: 11.5,
+  textTransform: "uppercase",
+  display: "none",
+  backgroundColor: theme.palette.info[200],
+}));
+
+const CopyIconButton = styled(IconButton)(({ theme }) => ({
+  position: "absolute",
+  right: 0,
+  top: 0,
+  color: theme.palette.primary[600],
+  padding: theme.spacing(1),
+}));
+
+const HoverableLine = styled("pre")(({ theme }) => ({
+  padding: theme.spacing(0.5, 0.75),
+  "&:hover": {
+    backgroundColor: theme.palette.primary[200],
+  },
+  "&:hover .bm-copy-btn": {
+    display: "block",
+  },
+}));
+
+export const BMCodeBlock: FC<CodeBlockProps> = ({
+  showCopyButton,
+  multiBlock,
+  text,
+  codeClassName,
+  preClassName,
+  lang,
+  containerClassName,
+  dataTestId,
+  enabledExpandCollapse = false,
+  collapseHeight = COLLAPSE_HEIGHT,
+  copyLabel = "Copy",
+  showAllLabel = "Show All",
+  collapseLabel = "Collapse",
+  onCopySuccess,
+}) => {
+  const theme = useTheme();
+  const preRef = useRef<HTMLPreElement>(null);
+  const expandableBox = useRef<HTMLDivElement>(null);
+  const [expanded, setExpanded] = useState(!enabledExpandCollapse);
+  const [showToggle, setShowToggle] = useState(false);
+  const syntaxLanguage = lang ?? "language-plaintext";
+
+  useEffect(() => {
+    hljs.highlightAll();
+  }, [text]);
+
+  const didMountRef = useRef(false);
+  useEffect(() => {
+    if (didMountRef.current) {
+      if (expanded && expandableBox?.current) {
+        expandableBox?.current?.scrollTo({ top: 0 });
+      }
+    } else {
+      didMountRef.current = true;
+    }
+  }, [expanded]);
+
+  useLayoutEffect(() => {
+    if (expandableBox?.current) {
+      setShowToggle(
+        enabledExpandCollapse &&
+          Math.round(expandableBox?.current?.clientHeight ?? 0) > collapseHeight
+      );
+    }
+  }, [collapseHeight, enabledExpandCollapse]);
+
+  const copy = async (value: string) => {
+    try {
+      await navigator.clipboard.writeText(value);
+      onCopySuccess?.();
+    } catch (err) {
+      console.error("Failed to copy:", err);
+    }
+  };
+
+  const copyBlock = () => {
+    const text = preRef.current?.innerText?.replace(
+      /\/\*[\s\S]*?\*\/|([^\\:]|^)\/\/.*$/g,
+      "$'"
+    );
+    if (text) copy(text);
+  };
+
+  const copyLineBlock = async (ev: React.MouseEvent) => {
+    const line = (
+      ev.currentTarget.previousSibling as HTMLElement
+    )?.innerText?.replace(/\/\*[\s\S]*?\*\/|([^\\:]|^)\/\/.*$/g, "$'");
+    if (line) await copy(line);
+  };
+
+  return (
+    <StyledBox className={clsx(containerClassName)} data-testid={dataTestId}>
+      <Collapse
+        in={expanded}
+        collapsedSize={showToggle ? collapseHeight : undefined}
+      >
+        <div ref={expandableBox}>
+          {multiBlock && Array.isArray(text) ? (
+            text.map((val, index) => (
+              <HoverableLine
+                key={`code-line-${index}`}
+                className={preClassName}
+              >
+                <InnerCode className={clsx(codeClassName, syntaxLanguage)}>
+                  {val}
+                </InnerCode>
+                {showCopyButton && (
+                  <InlineCopyButton
+                    size="small"
+                    className="bm-copy-btn"
+                    onClick={copyLineBlock}
+                  >
+                    {copyLabel}
+                  </InlineCopyButton>
+                )}
+              </HoverableLine>
+            ))
+          ) : (
+            <CodeWrapper className={preClassName}>
+              <InnerCode
+                className={clsx(codeClassName, syntaxLanguage)}
+                ref={preRef}
+              >
+                {text}
+              </InnerCode>
+              {showCopyButton && (
+                <CopyIconButton onClick={copyBlock}>
+                  <CopyIcon fontSize="small" />
+                </CopyIconButton>
+              )}
+            </CodeWrapper>
+          )}
+        </div>
+      </Collapse>
+
+      {showToggle && (
+        <Box mt={1} display="flex" justifyContent="flex-end">
+          <Box
+            component="a"
+            sx={{ cursor: "pointer", display: "flex", alignItems: "center" }}
+            onClick={() => setExpanded(!expanded)}
+          >
+            <Typography variant="body2" color="primary">
+              <strong>{expanded ? collapseLabel : showAllLabel}</strong>
+            </Typography>
+            <CaretDownIcon
+              style={{
+                marginLeft: theme.spacing(0.5),
+                transition: "transform 0.3s",
+                transform: expanded ? "rotate(180deg)" : "rotate(0deg)",
+              }}
+            />
+          </Box>
+        </Box>
+      )}
+    </StyledBox>
+  );
+};

package/src/components/BMCodeBlock/index.ts

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