@lunit/oui 1.0.0-alpha.9 → 1.0.1-alpha.10

package/src/components/TabbedPanel/TabbedPanel.styled.ts

@@ -1,129 +0,0 @@
-import TabPanel from '@mui/lab/TabPanel/TabPanel';
-import { Tab, Tabs, styled } from '@mui/material';
-import type { Theme } from '@mui/material';
-import type { BaseTabProps, BaseTabsProps, TabSize } from './TabbedPanel.types';
-
-const tabSizeStyle = (size: TabSize) => {
-  return {
-    minHeight: `${size === 'small' ? '28px' : '44px'} !important`,
-  };
-};
-
-// Style for Tabs (Tab Group)
-const baseTabMenuStyle = (theme: Theme) => {
-  return {
-    padding: 0,
-    borderBottom: `1px solid ${theme.palette.neutralGrey[65]}`,
-  };
-};
-
-const toggleTabMenuStyle = {
-  borderRadius: '8px',
-  outline: 'none',
-  boxShadow: 'none',
-  borderBottom: 'none',
-};
-
-// Style for Tab (Tab Button)
-const baseTabStyle = (theme: Theme, size: TabSize) => {
-  return {
-    background: theme.palette.neutralGrey[90],
-    borderRadius: 'inherit',
-    color: theme.palette.neutralGrey[45],
-    minWidth: '100px',
-    padding: `${size === 'small' ? '4px 8px' : '12px 16px'}`,
-    textTransform: 'none' as const,
-    '&:hover': {
-      opacity: 0.8,
-    },
-    '&:active': {
-      background: theme.palette.neutralGrey[60],
-      color: theme.palette.neutralGrey[0],
-    },
-    '&.Mui-selected': {
-      background: theme.palette.neutralGrey[90],
-      color: theme.palette.neutralGrey[0],
-    },
-  };
-};
-
-const toggleTabStyle = (theme: Theme) => {
-  return {
-    outline: 'none',
-    borderRadius: 'inherit',
-    border: `1px solid ${theme.palette.neutralGrey[75]}`,
-    boxShadow: 'none',
-    background: theme.palette.neutralGrey[90],
-    color: theme.palette.neutralGrey[45],
-    '&:hover': {
-      opacity: 0.8,
-    },
-    '&:active': {
-      borderRadius: 'inherit',
-      boxShadow: 'none',
-      outline: 'none',
-      borderColor: theme.palette.neutralGrey[60],
-      background: theme.palette.neutralGrey[60],
-      color: theme.palette.neutralGrey[0],
-    },
-    '&.Mui-selected': {
-      borderRadius: 'inherit',
-      boxShadow: 'none',
-      outline: 'none',
-      borderColor: 'transparent',
-      background: theme.palette.neutralGrey[75],
-      color: theme.palette.neutralGrey[0],
-      '&:hover': { opacity: 1 },
-    },
-    '&:first-of-type': {
-      borderRadius: '8px 0 0 8px',
-    },
-    '&:last-of-type': {
-      borderRadius: '0 8px 8px 0',
-    },
-  };
-};
-
-const baseTabbedPanelStyle = {
-  padding: '0',
-};
-
-const BaseTabMenu = styled(Tabs, {
-  shouldForwardProp: (prop) => !['size', 'buttonVariant'].includes(prop.toString()),
-})<BaseTabsProps>(({ theme, size, buttonVariant }) => {
-  let style = {
-    ...baseTabMenuStyle(theme),
-    ...tabSizeStyle(size ?? 'medium'),
-  };
-  if (buttonVariant === 'toggle') {
-    style = {
-      ...style,
-      ...toggleTabMenuStyle,
-    };
-  }
-  return style;
-});
-
-const BaseTab = styled(Tab, {
-  shouldForwardProp: (prop) => !['size', 'buttonVariant'].includes(prop.toString()),
-})<BaseTabProps>(({ theme, size, buttonVariant }) => {
-  let style = {
-    ...baseTabStyle(theme, size ?? 'medium'),
-    ...tabSizeStyle(size ?? 'medium'),
-  };
-
-  if (buttonVariant === 'toggle') {
-    style = {
-      ...style,
-      ...toggleTabStyle(theme),
-    };
-  }
-
-  return style;
-});
-
-const BaseTabPanel = styled(TabPanel)(() => {
-  return baseTabbedPanelStyle;
-});
-
-export { BaseTabMenu, BaseTab, BaseTabPanel };

package/src/components/TabbedPanel/TabbedPanel.tsx

@@ -1,70 +0,0 @@
-import React from 'react';
-import { Box, Typography } from '@mui/material';
-import TabContext from '@mui/lab/TabContext';
-import { BaseTab, BaseTabMenu, BaseTabPanel } from './TabbedPanel.styled';
-import type { TabbedPanelProps } from './TabbedPanel.types';
-
-const TabbedPanel = ({
-  tabs,
-  size = 'medium',
-  buttonVariant = 'normal',
-  activatedTab,
-  TabPanelProps,
-  TabProps,
-  TabsProps,
-  menuVariant,
-  onActivatedTab,
-  onTabChangeListener,
-}: TabbedPanelProps) => {
-  const handleChange = (_: React.SyntheticEvent, newValue: string) => {
-    if (onTabChangeListener) {
-      onTabChangeListener(newValue);
-    }
-    onActivatedTab(newValue);
-  };
-
-  // If prop is not explicitly set, use standard when there is only one tab
-  // This means by default, it will left-align when there is only one tab.
-  const menuVariantSetting = !menuVariant || tabs.length < 2 ? 'standard' : menuVariant;
-
-  return (
-    <Box>
-      <TabContext value={activatedTab}>
-        <BaseTabMenu
-          size={size}
-          value={activatedTab}
-          onChange={handleChange}
-          variant={menuVariantSetting}
-          buttonVariant={buttonVariant}
-          TabIndicatorProps={{ sx: { display: 'none' } }}
-          {...TabsProps}
-        >
-          {tabs.map((t) => (
-            <BaseTab
-              buttonVariant={buttonVariant}
-              size={size}
-              disabled={t.disabled}
-              disableTouchRipple
-              disableRipple
-              key={t.value}
-              label={<Typography variant="body_sb1">{t.value}</Typography>}
-              value={t.value}
-              {...TabProps}
-            />
-          ))}
-        </BaseTabMenu>
-        {tabs.map((t) => (
-          <BaseTabPanel
-            key={t.value}
-            value={t.value}
-            {...TabPanelProps}
-          >
-            {t.element}
-          </BaseTabPanel>
-        ))}
-      </TabContext>
-    </Box>
-  );
-};
-
-export default TabbedPanel;

package/src/components/TabbedPanel/TabbedPanel.types.ts

@@ -1,36 +0,0 @@
-import type { TabPanelProps } from '@mui/lab/TabPanel';
-import type { TabProps, TabsProps } from '@mui/material';
-
-type TabSize = 'small' | 'medium';
-type ButtonVariant = 'normal' | 'toggle';
-
-interface TabConfig {
-  value: string;
-  element: React.ReactNode;
-  disabled?: boolean;
-}
-
-interface BaseTabProps extends TabProps {
-  size?: TabSize;
-  buttonVariant?: ButtonVariant;
-}
-
-interface BaseTabsProps extends TabsProps {
-  size?: TabSize;
-  buttonVariant?: ButtonVariant;
-}
-
-interface TabbedPanelProps {
-  tabs: TabConfig[];
-  activatedTab: string;
-  size?: TabSize;
-  buttonVariant?: ButtonVariant;
-  menuVariant?: TabsProps['variant'];
-  TabsProps?: Partial<TabsProps>;
-  TabProps?: Partial<TabProps>;
-  TabPanelProps?: Partial<TabPanelProps>;
-  onActivatedTab: (tab: string) => void;
-  onTabChangeListener?: (newTabValue: string) => void;
-}
-
-export type { TabbedPanelProps, TabConfig, TabSize, BaseTabProps, BaseTabsProps };

package/src/components/TabbedPanel/TabbedPanel.utils.ts

@@ -1,21 +0,0 @@
-import type { TabConfig } from './TabbedPanel.types';
-
-/**
- *
- * @param defaultTab string | undefined
- * @param tabs TabConfig[]
- * @returns string
- * @description returns the initial value for useState, based on defaultTab.
- * If default tab is provided and matched, returns that,
- * else, returns first tab.
- *
- */
-
-function findDefaultTab(defaultTab: string | undefined, tabs: TabConfig[]): string {
-  if (defaultTab) {
-    return tabs.find((t) => t.value === defaultTab)?.value ?? tabs[0].value;
-  }
-  return tabs[0].value;
-}
-
-export { findDefaultTab };

package/src/components/TabbedPanel/index.ts

@@ -1,5 +0,0 @@
-import TabbedPanel from './TabbedPanel';
-import type { TabbedPanelProps, TabConfig } from './TabbedPanel.types';
-
-export { TabbedPanel };
-export type { TabbedPanelProps, TabConfig };

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

@@ -1,36 +0,0 @@
-import { styled, Theme } from '@mui/material';
-import { styles } from '../BaseTextField/BaseTextField.styled';
-import type { RootTextAreaProps } from './TextArea.types';
-import { formatCSSSize } from '../BaseTextField/BaseTextField.utils';
-
-const baseTextAreaStyle = (theme: Theme, height: string | number | undefined) => {
-  return {
-    ...styles.baseTextFieldStyle(theme),
-    height: height ? formatCSSSize(height) : '100px',
-    resize: 'none' as const,
-    '&::-webkit-scrollbar': {
-      width: '14px !important',
-    },
-    '&::-webkit-scrollbar-thumb': {
-      border: `4px solid ${theme.palette.neutralGrey[75]}`,
-    },
-  };
-};
-
-const BaseTextArea = styled('textarea', {
-  shouldForwardProp: (prop) => !['error', 'width', 'height'].includes(prop.toString()),
-})<RootTextAreaProps>(({ theme, height, error }) => {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  let resultStyle: any = baseTextAreaStyle(theme, height);
-
-  if (error) {
-    resultStyle = {
-      ...resultStyle,
-      ...styles.baseTextFieldErrorStyle(theme),
-    };
-  }
-
-  return resultStyle;
-});
-
-export default BaseTextArea;

package/src/components/TextField/TextArea.tsx

@@ -1,35 +0,0 @@
-import React, { forwardRef } from 'react';
-import { InputMsg, BaseTextFieldContainer } from '../BaseTextField/BaseTextField.styled';
-import BaseTextArea from './TextArea.styled';
-import type { TextAreaProps } from './TextArea.types';
-
-const TextArea = forwardRef(
-  (props: TextAreaProps, ref?: React.ForwardedRef<HTMLTextAreaElement>) => {
-    const { error, helperMsg, OuterBoxProps, ...areaProps } = props;
-
-    return (
-      <BaseTextFieldContainer
-        {...OuterBoxProps}
-        width={props.width}
-      >
-        <BaseTextArea
-          ref={ref}
-          {...areaProps}
-          multiline="true"
-          error={!!error}
-        />
-        {error ? (
-          <InputMsg
-            variant="body5"
-            error
-          >
-            {error}
-          </InputMsg>
-        ) : (
-          helperMsg && <InputMsg variant="body5">{helperMsg}</InputMsg>
-        )}
-      </BaseTextFieldContainer>
-    );
-  },
-);
-export default TextArea;

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

@@ -1,28 +0,0 @@
-import type { BoxProps } from '@mui/material';
-import type { HelperMsgProps, RootTextFieldProps } from '../BaseTextField/BaseTextField.types';
-
-// props we define for the textarea element itself
-interface RootTextAreaProps extends Omit<RootTextFieldProps, 'BoxProps'> {
-  multiline: 'true';
-  onChange?: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;
-  error?: boolean;
-  ref?: React.ForwardedRef<HTMLTextAreaElement> | undefined;
-  placeholder?: string;
-  width?: string | number;
-  height?: string | number;
-  OuterBoxProps?: BoxProps;
-}
-
-// common props for a wrapped textarea and helper message
-interface TextAreaWithHelperMsgProps
-  extends Omit<RootTextAreaProps, 'error' | 'multiline'>,
-    Omit<HelperMsgProps, 'error'> {
-  error?: string;
-}
-
-// props for TextArea
-interface TextAreaProps extends TextAreaWithHelperMsgProps {}
-
-export type { RootTextAreaProps, TextAreaProps };
-
-// n.b structured to match TextInput

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;