@lunit/oui 1.0.1 → 1.1.0-alpha.2

package/src/components/Progress/index.ts

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

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

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

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

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

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

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

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

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

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

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

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

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

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