@lunit/oui 1.0.1-alpha.9 → 1.0.1

package/src/components/TextField/TextInput.styled.tsx

@@ -0,0 +1,115 @@
+import { styled, Theme } from '@mui/material';
+import { InputMsg, styles } from '../BaseTextField/BaseTextField.styled';
+import type { RootTextInputProps } from './TextInput.types';
+
+const baseTextInputStyle = (theme: Theme) => {
+  return {
+    ...styles.baseTextFieldStyle(theme),
+    textOverflow: 'ellipsis',
+  };
+};
+
+const textInputLarge = {
+  padding: '11px 16px',
+};
+
+const textInputWithLeftIcon = {
+  paddingLeft: '44px',
+};
+
+const BaseTextInput = styled('input', {
+  shouldForwardProp: (prop) =>
+    ![
+      'error',
+      'large',
+      'showClear',
+      'leftIcon',
+      'width',
+      'OuterBoxProps',
+      'InputContainerProps',
+    ].includes(prop.toString()),
+})<RootTextInputProps>(({ theme, large, error, leftIcon, width }) => {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  let resultStyle: any = {
+    ...baseTextInputStyle(theme),
+    width:
+      // eslint-disable-next-line no-nested-ternary
+      typeof width !== 'undefined' ? (typeof width === 'number' ? `${width}px` : width) : width,
+  };
+
+  if (error) {
+    resultStyle = {
+      ...resultStyle,
+      ...styles.baseTextFieldErrorStyle(theme),
+    };
+  }
+
+  if (large) {
+    resultStyle = {
+      ...resultStyle,
+      ...textInputLarge,
+    };
+  }
+
+  if (leftIcon) {
+    resultStyle = {
+      ...resultStyle,
+      ...textInputWithLeftIcon,
+    };
+  }
+
+  return resultStyle;
+});
+
+const LeftIconContainer = styled('div')(() => {
+  return {
+    position: 'absolute',
+    left: '0px',
+    top: '0px',
+    zIndex: '2',
+    height: '100%',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingLeft: '16px',
+    paddingRight: '8px',
+    pointerEvents: 'none',
+  };
+});
+const RightIconContainer = styled('div')<{ error?: string }>(() => {
+  return {
+    position: 'absolute',
+    right: '16px',
+    top: '0px',
+    zIndex: '2',
+    height: '36px',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+  };
+});
+
+const ButtonWrapper = styled('button')(({ theme }) => {
+  return {
+    width: '28px',
+    height: '28px',
+    backgroundColor: 'transparent',
+    opacity: '0.8',
+    border: 'none',
+    color: theme.palette.neutralGrey[45],
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderRadius: '8px',
+    padding: 0,
+    '&:hover': {
+      backgroundColor: theme.palette.neutralGrey[70],
+      cursor: 'pointer',
+    },
+    '&:active': {
+      backgroundColor: theme.palette.neutralGrey[60],
+    },
+  };
+});
+
+export { BaseTextInput, InputMsg, LeftIconContainer, RightIconContainer, ButtonWrapper };

package/src/components/TextField/TextInput.tsx

@@ -0,0 +1,27 @@
+import React, { forwardRef } from 'react';
+import PasswordInput from './components/PasswordInput';
+import NormalTextInput from './components/NormalTextInput';
+
+import isPasswordInput from './TextInput.utils';
+import type { TextInputProps } from './TextInput.types';
+
+const TextInput = forwardRef(
+  (props: TextInputProps, ref?: React.ForwardedRef<HTMLInputElement>) => {
+    if (isPasswordInput(props)) {
+      return (
+        <PasswordInput
+          {...props}
+          ref={ref}
+        />
+      );
+    }
+    return (
+      <NormalTextInput
+        {...props}
+        ref={ref}
+      />
+    );
+  },
+);
+
+export default TextInput;

package/src/components/TextField/TextInput.types.ts

@@ -0,0 +1,46 @@
+import type { BoxProps, InputProps as MuiInputProps } from '@mui/material';
+import type { RootTextFieldProps, HelperMsgProps } from '../BaseTextField/BaseTextField.types';
+
+// props we defined for the input element itself
+interface RootTextInputProps
+  extends RootTextFieldProps,
+    Omit<MuiInputProps, 'size' | 'error' | 'ref' | 'value' | 'defaultValue' | 'onChange'> {
+  large?: boolean;
+  leftIcon?: React.ReactNode;
+  rightIcon?: React.ReactNode;
+  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  OuterBoxProps?: BoxProps;
+  InputContainerProps?: BoxProps;
+  inputSX?: MuiInputProps['sx'];
+}
+
+// common props for a wrapped input and helper message
+interface InputWithHelperMsgProps
+  extends Omit<RootTextInputProps, 'error'>,
+    Omit<HelperMsgProps, 'error'> {
+  error?: string;
+}
+
+// props specifically for password input with helper message
+interface PasswordInputWithHelperMsgProps
+  extends Omit<
+    InputWithHelperMsgProps,
+    'rightIcon' | 'readOnly' | 'onClearButtonClick' | 'InputContainerProps'
+  > {
+  type: 'password';
+}
+
+// Props for TextInput when used for normal input
+interface NormalTextInputProps extends InputWithHelperMsgProps {
+  onClearButtonClick?: () => void;
+  rightIcon?: React.ReactNode;
+}
+
+// Props for TextInput when used for passwords
+interface PasswordTextInputProps extends PasswordInputWithHelperMsgProps {}
+
+// Prop type for TextInput
+type TextInputProps = PasswordTextInputProps | NormalTextInputProps;
+
+// eslint-disable-next-line @typescript-eslint/no-use-before-define
+export type { TextInputProps, NormalTextInputProps, PasswordTextInputProps, RootTextInputProps };

package/src/components/TextField/TextInput.utils.ts

@@ -0,0 +1,7 @@
+import type { PasswordTextInputProps, TextInputProps } from './TextInput.types';
+
+// Function for inferring required input by props
+function isPasswordInput(props: TextInputProps): props is PasswordTextInputProps {
+  return props.type === 'password';
+}
+export default isPasswordInput;

package/src/components/TextField/components/Buttons.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { CloseSmall, HideSmall, ShowSmall } from '../../../icons';
+import { ButtonWrapper } from '../TextInput.styled';
+
+function ClearButton({ onClick }: { onClick?: () => void }) {
+  return (
+    <ButtonWrapper onClick={onClick}>
+      <CloseSmall fontSize="small" />
+    </ButtonWrapper>
+  );
+}
+
+function ShowHidePasswordButton({
+  onClick,
+  isHidden,
+}: {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  onClick?: (event: any) => void;
+  isHidden: boolean;
+}) {
+  return (
+    <ButtonWrapper onClick={onClick}>{isHidden ? <HideSmall /> : <ShowSmall />}</ButtonWrapper>
+  );
+}
+
+export { ClearButton, ShowHidePasswordButton };

package/src/components/TextField/components/NormalTextInput.tsx

@@ -0,0 +1,95 @@
+import React, { forwardRef, useMemo, useState } from 'react';
+import {
+  InputMsg,
+  BaseTextFieldContainer,
+  BaseTextFieldBox,
+} from '../../BaseTextField/BaseTextField.styled';
+import { BaseTextInput, LeftIconContainer, RightIconContainer } from '../TextInput.styled';
+import { ClearButton } from './Buttons';
+
+import type { NormalTextInputProps } from '../TextInput.types';
+
+const NormalTextInput = forwardRef(
+  (props: NormalTextInputProps, ref?: React.ForwardedRef<HTMLInputElement>) => {
+    const { error, helperMsg, leftIcon, rightIcon, onClearButtonClick, inputSX, ...inputProps } =
+      props;
+
+    const [showClear, setShowClear] = useState(!!props.defaultValue ?? false);
+
+    const showRightIcon = useMemo(() => {
+      return (
+        rightIcon ?? // if rightIcon is passed, use it, else use clear button
+        (!props.disabled && // hide if disabled
+          !props.readOnly && // hide if readonly
+          !!onClearButtonClick && // hide if no function (it doesn't do anything)
+          showClear)
+      );
+    }, [props.disabled, onClearButtonClick, props.readOnly, rightIcon, showClear]);
+
+    function handleClearButtonClick() {
+      onClearButtonClick?.();
+      setShowClear(false);
+    }
+
+    function changeHandler(e: React.ChangeEvent<HTMLInputElement>) {
+      // wrap incoming onChange
+      if (props.onChange) {
+        props.onChange(e);
+      }
+
+      // rightIcon overrides clear button
+      if (rightIcon) return;
+
+      // handle show/hide of clear button
+      if (e.target.value) {
+        if (!showClear) setShowClear(true);
+      } else if (showClear) setShowClear(false);
+    }
+
+    return (
+      <BaseTextFieldBox
+        {...props.OuterBoxProps}
+        width={props.width}
+      >
+        <BaseTextFieldContainer
+          {...props.InputContainerProps}
+          width={props.width}
+        >
+          {leftIcon && (
+            <LeftIconContainer sx={inputProps.disabled ? { opacity: '0.8' } : undefined}>
+              {leftIcon}
+            </LeftIconContainer>
+          )}
+
+          <BaseTextInput
+            ref={ref}
+            {...inputProps}
+            error={!!error}
+            onChange={(e) => changeHandler(e)}
+            leftIcon={leftIcon}
+            sx={inputSX ?? { paddingRight: showRightIcon ? '44px' : '16px' }}
+          />
+
+          {showRightIcon && (
+            <RightIconContainer>
+              {rightIcon && rightIcon}
+              {!rightIcon && <ClearButton onClick={() => handleClearButtonClick()} />}
+            </RightIconContainer>
+          )}
+        </BaseTextFieldContainer>
+        {error ? (
+          <InputMsg
+            variant="body5"
+            error
+          >
+            {error}
+          </InputMsg>
+        ) : (
+          helperMsg && <InputMsg variant="body5">{helperMsg}</InputMsg>
+        )}
+      </BaseTextFieldBox>
+    );
+  },
+);
+
+export default NormalTextInput;

package/src/components/TextField/components/PasswordInput.tsx

@@ -0,0 +1,92 @@
+import React, { forwardRef, useState } from 'react';
+import { InputMsg, BaseTextFieldContainer } from '../../BaseTextField/BaseTextField.styled';
+import { BaseTextInput, LeftIconContainer, RightIconContainer } from '../TextInput.styled';
+import { ShowHidePasswordButton } from './Buttons';
+
+import type { PasswordTextInputProps } from '../TextInput.types';
+
+interface PasswordInputContainerProps extends PasswordTextInputProps {
+  children: React.ReactNode;
+  hidePassword: boolean;
+  handlePasswordShowHide: () => void;
+  width?: string | number;
+}
+
+function PasswordInputContainer(props: PasswordInputContainerProps) {
+  const {
+    error,
+    disabled,
+    helperMsg,
+    leftIcon,
+    children,
+    hidePassword,
+    handlePasswordShowHide,
+    width,
+    OuterBoxProps,
+  } = props;
+
+  return (
+    <BaseTextFieldContainer
+      {...OuterBoxProps}
+      width={width}
+    >
+      {leftIcon && (
+        <LeftIconContainer sx={disabled ? { opacity: '0.8' } : undefined}>
+          {leftIcon}
+        </LeftIconContainer>
+      )}
+      {children}
+      <RightIconContainer error={error}>
+        {!disabled && (
+          <ShowHidePasswordButton
+            onClick={(event) => {
+              event.preventDefault();
+              handlePasswordShowHide();
+            }}
+            isHidden={hidePassword}
+          />
+        )}
+      </RightIconContainer>
+      {error ? (
+        <InputMsg
+          variant="body5"
+          error
+        >
+          {error}
+        </InputMsg>
+      ) : (
+        helperMsg && <InputMsg variant="body5">{helperMsg}</InputMsg>
+      )}
+    </BaseTextFieldContainer>
+  );
+}
+
+const PasswordInput = forwardRef(
+  (props: PasswordTextInputProps, ref: React.ForwardedRef<HTMLInputElement>) => {
+    const { error, helperMsg, leftIcon, type, inputSX, ...otherInputProps } = props;
+
+    const [hidePassword, setHidePassword] = useState(true);
+
+    function handlePasswordShowHide() {
+      setHidePassword(!hidePassword);
+    }
+
+    return (
+      <PasswordInputContainer
+        {...props}
+        hidePassword={hidePassword}
+        handlePasswordShowHide={() => handlePasswordShowHide()}
+      >
+        <BaseTextInput
+          type={hidePassword ? 'password' : 'text'}
+          ref={ref}
+          {...otherInputProps}
+          leftIcon={leftIcon}
+          sx={inputSX}
+        />
+      </PasswordInputContainer>
+    );
+  },
+);
+
+export default PasswordInput;

package/src/components/TextField/index.ts

@@ -0,0 +1,7 @@
+import TextInput from './TextInput';
+import type { TextInputProps } from './TextInput.types';
+import TextArea from './TextArea';
+import type { TextAreaProps } from './TextArea.types';
+
+export { TextInput, TextArea };
+export type { TextInputProps, TextAreaProps };

package/src/components/Tooltip/Tooltip.styled.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { Tooltip as MuiTooltip, styled, tooltipClasses } from '@mui/material';
+import typographyOptions from '../../foundations/typography';
+import { resizeArrowBySize, setMarginByPlacement, setPaddingBySize } from './Tooltip.utils';
+import type { TooltipProps } from './Tooltip.types';
+
+const BaseTooltip = styled(
+  ({ className, ref, ...props }: TooltipProps) => (
+    <MuiTooltip
+      {...props}
+      ref={ref}
+      classes={{ popper: className }}
+    />
+  ),
+  {
+    shouldForwardProp: (prop) => prop !== 'noPadding',
+  },
+)(({ theme, size = 'small', placement = 'bottom', noPadding }) => ({
+  [`& .${tooltipClasses.tooltip}`]: {
+    ...typographyOptions.body5,
+    margin: '0px !important',
+    padding: noPadding ? '0px !important' : setPaddingBySize(size),
+    backgroundColor: theme.palette.neutralGrey[75],
+    borderRadius: size === 'small' ? '4px' : '8px',
+    filter:
+      'drop-shadow(0px 4px 8px rgba(0, 0, 0, 0.32)) drop-shadow(0px 4px 12px rgba(0, 0, 0, 0.4))',
+  },
+  [`& .${tooltipClasses.arrow}`]: {
+    color: theme.palette.neutralGrey[75],
+    margin: `${setMarginByPlacement(placement, resizeArrowBySize(size, placement))} !important`,
+    width: `${resizeArrowBySize(size, placement).width}px  !important`,
+    height: `${resizeArrowBySize(size, placement).height}px !important`,
+  },
+}));
+
+export default BaseTooltip;

package/src/components/Tooltip/Tooltip.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import { Box, Typography } from '@mui/material';
+import { forwardRef } from 'react';
+import BaseTooltip from './Tooltip.styled';
+import type { TooltipProps } from './Tooltip.types';
+
+const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
+  (
+    {
+      icon,
+      title,
+      children,
+      size = 'small',
+      placement = 'bottom',
+      noPadding = false,
+      ...otherProps
+    }: TooltipProps,
+    ref,
+  ) => {
+    return (
+      <BaseTooltip
+        ref={ref}
+        arrow
+        size={size}
+        PopperProps={{
+          popperOptions: {
+            modifiers: [
+              {
+                name: 'offset',
+                enabled: true,
+                options: {
+                  offset: [0, 6],
+                },
+              },
+            ],
+          },
+        }}
+        title={
+          icon && size === 'small' ? (
+            <Box sx={{ display: 'flex', flexDirection: 'row', gap: '8px' }}>
+              {icon}
+              {title && <Typography variant="body5">{title}</Typography>}
+            </Box>
+          ) : (
+            title
+          )
+        }
+        placement={placement}
+        noPadding={noPadding}
+        {...otherProps}
+      >
+        {children}
+      </BaseTooltip>
+    );
+  },
+);
+
+export default Tooltip;

package/src/components/Tooltip/Tooltip.types.ts

@@ -0,0 +1,24 @@
+import { ReactNode } from 'react';
+import type { TooltipClasses, TooltipProps as MuiTooltipProps } from '@mui/material';
+
+export type Position = Pick<TooltipProps, 'placement'>;
+
+export type TooltipSizes = 'small' | 'large';
+
+export type TooltipSize = { width: number; height: number };
+
+export type TooltipPlacement =
+  | TooltipClasses['tooltipPlacementBottom']
+  | TooltipClasses['tooltipPlacementLeft']
+  | TooltipClasses['tooltipPlacementRight']
+  | TooltipClasses['tooltipPlacementTop'];
+
+export type ArrowSizeBySize = Record<TooltipSizes, TooltipSize>;
+
+export type TooltipPlacementToSize = Record<TooltipPlacement, ArrowSizeBySize>;
+
+export interface TooltipProps extends MuiTooltipProps {
+  icon?: ReactNode;
+  size?: TooltipSizes;
+  noPadding?: boolean;
+}

package/src/components/Tooltip/Tooltip.utils.ts

@@ -0,0 +1,46 @@
+import type {
+  TooltipPlacement,
+  TooltipPlacementToSize,
+  TooltipSize,
+  ArrowSizeBySize,
+  TooltipSizes,
+} from './Tooltip.types';
+
+// small(10px * 6px) -> (10/2)^2 + 6^2 = 7.8^2
+// large(16px * 8px)   -> (16/2)^2 + 8^2 = 11.3^2
+const setArrowSizeBySize: ArrowSizeBySize = {
+  small: { width: 11, height: 7.8 },
+  large: { width: 16, height: 11.3 },
+};
+
+const tooltipPlacementToSize: TooltipPlacementToSize = {
+  bottom: setArrowSizeBySize,
+  left: setArrowSizeBySize,
+  right: setArrowSizeBySize,
+  top: setArrowSizeBySize,
+};
+
+export const resizeArrowBySize = (
+  tooltipType: TooltipSizes,
+  tooltipPlacement: TooltipPlacement,
+): TooltipSize => {
+  const size = tooltipPlacementToSize[tooltipPlacement][tooltipType];
+  if (tooltipPlacement === 'left' || tooltipPlacement === 'right') {
+    return { width: size.height, height: size.width };
+  }
+  return size;
+};
+
+export const setMarginByPlacement = (tooltipPlacement: TooltipPlacement, margin: TooltipSize) =>
+  ({
+    bottom: `-${margin.height}px 0 0 0`,
+    right: `0 0 0 -${margin.width}px`,
+    left: `0 -${margin.width}px 0 0`,
+    top: `0 0 -${margin.height}px 0`,
+  })[tooltipPlacement];
+
+export const setPaddingBySize = (tooltipSize: TooltipSizes) =>
+  ({
+    small: '6px 8px',
+    large: '12px 16px',
+  })[tooltipSize];

package/src/components/Tooltip/index.ts

@@ -0,0 +1,5 @@
+import Tooltip from './Tooltip';
+import type { TooltipProps } from './Tooltip.types';
+
+export { Tooltip };
+export type { TooltipProps };

package/src/components/UploadManager/UploadManager.styled.ts

@@ -0,0 +1,49 @@
+import { Paper, Toolbar, Collapse } from '@mui/material';
+import { styled } from '@mui/material/styles';
+
+const StyledPaper = styled(Paper)(({ theme }) => ({
+  overflow: 'hidden',
+  borderRadius: '10px',
+  width: '500px',
+  backgroundColor: theme.palette.neutralGrey[90],
+}));
+
+const StyledToolbar = styled(Toolbar)({
+  padding: '20px 40px 20px 32px',
+  paddingRight: '40px !important',
+  paddingLeft: '32px !important',
+  color: '#fff',
+  minHeight: 'unset !important',
+});
+
+const StyledToolbarButtonContainer = styled(Toolbar)({
+  position: 'absolute',
+  display: 'flex',
+  gap: '12px',
+  right: '30px',
+  paddingRight: '4px !important',
+});
+
+const StyledCollapse = styled(Collapse)({
+  maxHeight: '320px',
+  overflowY: 'auto',
+  overflowX: 'hidden',
+});
+
+const StyledUploadFile = styled('div')({
+  display: 'flex',
+  justifyContent: 'space-between',
+  gap: '16px',
+  alignItems: 'center',
+  padding: '20px 30px 20px 32px',
+  paddingRight: '30x !important',
+  paddingLeft: '32px !important',
+});
+
+export {
+  StyledPaper,
+  StyledToolbar,
+  StyledToolbarButtonContainer,
+  StyledCollapse,
+  StyledUploadFile,
+};