@lunit/oui 1.0.1 → 1.1.0-alpha.2

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

@@ -1,115 +0,0 @@
-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

@@ -1,27 +0,0 @@
-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

@@ -1,46 +0,0 @@
-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

@@ -1,7 +0,0 @@
-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

@@ -1,26 +0,0 @@
-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

@@ -1,95 +0,0 @@
-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

@@ -1,92 +0,0 @@
-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

@@ -1,7 +0,0 @@
-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

@@ -1,36 +0,0 @@
-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

@@ -1,58 +0,0 @@
-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

@@ -1,24 +0,0 @@
-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

@@ -1,46 +0,0 @@
-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

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

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

@@ -1,49 +0,0 @@
-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,
-};