@lunit/oui 1.0.1-alpha.9 → 1.0.1

package/src/components/Progress/index.ts

@@ -0,0 +1,4 @@
+import CircularProgress from './CircularProgress';
+import LinearProgress from './LinearProgress';
+
+export { CircularProgress, LinearProgress };

package/src/components/Radio/Radio.styled.ts

@@ -0,0 +1,35 @@
+import { styled, Box, Radio } from '@mui/material';
+
+export const Container = styled(Box)(({ theme }) => ({
+  display: 'inline-flex',
+  gap: theme.spacing(2),
+}));
+
+export const StyledRadio = styled(Radio)(({ theme }) => ({
+  width: '22px',
+  height: '22px',
+  padding: 0,
+  borderRadius: '50%',
+  '&.Mui-disabled, &.Mui-disabled + .MuiTypography-root': {
+    opacity: 0.4,
+  },
+  '&.Mui-focusVisible > div': {
+    boxShadow: `0 0 0 1px ${theme.palette.lunitTeal[10]}`,
+  },
+}));
+
+export const UncheckedIcon = styled('div')(({ theme }) => ({
+  width: '18px',
+  height: '18px',
+  border: `1.5px solid ${theme.palette.neutralGrey[45]}`,
+  borderRadius: '50%',
+  boxSizing: 'border-box',
+}));
+
+export const CheckedIcon = styled('div')(({ theme }) => ({
+  width: '18px',
+  height: '18px',
+  border: `4px solid ${theme.palette.lunitTeal[40]}`,
+  borderRadius: '50%',
+  boxSizing: 'border-box',
+}));

package/src/components/Radio/Radio.tsx

@@ -0,0 +1,60 @@
+import { Typography } from '@mui/material';
+import clsx from 'clsx';
+import React, { forwardRef } from 'react';
+import { Container, StyledRadio, UncheckedIcon, CheckedIcon } from './Radio.styled';
+import type { RadioProps } from './Radio.types';
+
+const Radio = forwardRef<HTMLSpanElement, RadioProps>(
+  (
+    {
+      value,
+      name,
+      checked,
+      defaultChecked,
+      disabled,
+      required,
+      onChange,
+      onChangeCapture,
+      inputProps,
+      inputRef,
+      label,
+      ...rootProps
+    }: RadioProps,
+    ref,
+  ) => {
+    return (
+      <Container
+        {...rootProps}
+        className={clsx('radio', rootProps.className)}
+        component={label != null ? 'label' : 'span'}
+        ref={ref}
+      >
+        <StyledRadio
+          disableRipple
+          icon={<UncheckedIcon />}
+          checkedIcon={<CheckedIcon />}
+          value={value}
+          name={name}
+          checked={checked}
+          defaultChecked={defaultChecked}
+          disabled={disabled}
+          required={required}
+          onChange={onChange}
+          onChangeCapture={onChangeCapture}
+          inputProps={inputProps}
+          inputRef={inputRef}
+        />
+        {label && (
+          <Typography
+            variant="body_m1"
+            sx={{ display: 'flex', alignItems: 'center' }}
+          >
+            {label}
+          </Typography>
+        )}
+      </Container>
+    );
+  },
+);
+
+export default Radio;

package/src/components/Radio/Radio.types.ts

@@ -0,0 +1,15 @@
+import type { BoxProps, RadioProps as MuiRadioProps } from '@mui/material';
+
+export interface RadioProps extends Omit<BoxProps<'span'>, 'onChange' | 'onChangeCapture'> {
+  value?: MuiRadioProps['value'];
+  name?: MuiRadioProps['name'];
+  checked?: MuiRadioProps['checked'];
+  defaultChecked?: MuiRadioProps['defaultChecked'];
+  disabled?: MuiRadioProps['disabled'];
+  required?: MuiRadioProps['required'];
+  onChange?: MuiRadioProps['onChange'];
+  onChangeCapture?: MuiRadioProps['onChangeCapture'];
+  label?: string;
+  inputProps?: MuiRadioProps['inputProps'];
+  inputRef?: MuiRadioProps['inputRef'];
+}

package/src/components/Radio/RadioGroup.styled.ts

@@ -0,0 +1,6 @@
+import { styled, RadioGroup } from '@mui/material';
+
+// eslint-disable-next-line import/prefer-default-export
+export const StyledRadioGroup = styled(RadioGroup)(({ theme }) => ({
+  gap: theme.spacing(2),
+}));

package/src/components/Radio/RadioGroup.tsx

@@ -0,0 +1,23 @@
+import React, { forwardRef } from 'react';
+import { StyledRadioGroup } from './RadioGroup.styled';
+import type { RadioGroupProps } from './RadioGroup.types';
+
+const RadioGroup = forwardRef<HTMLDivElement, RadioGroupProps>(
+  ({ defaultValue, name, row, children, onChange, value, ...props }: RadioGroupProps, ref) => {
+    return (
+      <StyledRadioGroup
+        {...props}
+        defaultValue={defaultValue}
+        name={name}
+        onChange={onChange}
+        value={value}
+        row={row}
+        ref={ref}
+      >
+        {children}
+      </StyledRadioGroup>
+    );
+  },
+);
+
+export default RadioGroup;

package/src/components/Radio/RadioGroup.types.ts

@@ -0,0 +1,10 @@
+import type { FormGroupProps, RadioGroupProps as MuiRadioGroupProps } from '@mui/material';
+
+export interface RadioGroupProps extends MuiRadioGroupProps {
+  children?: FormGroupProps['children'];
+  defaultValue?: MuiRadioGroupProps['defaultValue'];
+  name?: MuiRadioGroupProps['name'];
+  onChange?: MuiRadioGroupProps['onChange'];
+  value?: MuiRadioGroupProps['value'];
+  row?: FormGroupProps['row'];
+}

package/src/components/Radio/index.ts

@@ -0,0 +1,7 @@
+import Radio from './Radio';
+import type { RadioProps } from './Radio.types';
+
+import RadioGroup from './RadioGroup';
+import type { RadioGroupProps } from './RadioGroup.types';
+
+export { Radio, RadioGroup, RadioProps, RadioGroupProps };

package/src/components/Stepper/Stepper.styled.ts

@@ -0,0 +1,38 @@
+import { Box, Typography, styled } from '@mui/material';
+import { Chip } from '../Chip';
+import theme from '../../theme';
+import type { StepperTypographyProps } from './Stepper.types';
+
+export const StepperContainer = styled(Box)({
+  display: 'flex',
+  flexDirection: 'column',
+  height: '64px',
+});
+export const ChipContainer = styled(Box)({
+  display: 'inline-block',
+});
+
+export const StepperChip = styled(Chip, {
+  shouldForwardProp: (prop) => prop !== 'disabled',
+})(({ disabled }) => ({
+  backgroundColor: `${
+    !disabled ? theme.palette.lunitTeal[40] : theme.palette.neutralGrey[70]
+  } !important`,
+  color: `${!disabled ? theme.palette.lunitTeal[90] : theme.palette.neutralGrey[95]} !important`,
+  marginBottom: '4px',
+  '.MuiChip-label ': {
+    fontWeight: 400,
+    fontSize: '14px',
+    lineHeight: '24px',
+  },
+}));
+
+export const StepperTypography = styled(Typography, {
+  shouldForwardProp: (prop) => prop !== 'disabled',
+})<StepperTypographyProps>(({ disabled }) => ({
+  color: !disabled ? 'white' : theme.palette.neutralGrey[70],
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+  cursor: 'default',
+}));

package/src/components/Stepper/Stepper.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { ChipContainer, StepperChip, StepperContainer, StepperTypography } from './Stepper.styled';
+import type { StepperProps } from './Stepper.types';
+
+const Stepper = ({ step, title, disabled = false, sx }: StepperProps) => {
+  return (
+    <StepperContainer sx={sx}>
+      <ChipContainer>
+        <StepperChip
+          label={`STEP ${step}`}
+          disabled={disabled}
+        />
+      </ChipContainer>
+      <StepperTypography
+        variant="h7"
+        disabled={disabled}
+      >
+        {title}
+      </StepperTypography>
+    </StepperContainer>
+  );
+};
+
+export default Stepper;

package/src/components/Stepper/Stepper.types.ts

@@ -0,0 +1,13 @@
+import type { TypographyProps } from '@mui/material';
+import type { SxProps } from '@mui/system';
+
+export interface StepperProps {
+  step: number;
+  title: string;
+  disabled?: boolean;
+  sx?: SxProps;
+}
+
+export interface StepperTypographyProps extends TypographyProps {
+  disabled?: boolean;
+}

package/src/components/Stepper/index.ts

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

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