@lunit/oui 1.0.0-alpha.1

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

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

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

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

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

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

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

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

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

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

@@ -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;