@lunit/oui 1.0.1 → 1.1.0-alpha.1

package/src/components/LoadingIndicator/assets/DotLoadingAnimation.json

@@ -1,426 +0,0 @@
-{
-  "nm": "Loading",
-  "ddd": 0,
-  "h": 500,
-  "w": 500,
-  "meta": { "g": "@lottiefiles/toolkit-js 0.25.4" },
-  "layers": [
-    {
-      "ty": 4,
-      "nm": "Shape Layer 4",
-      "sr": 1,
-      "st": 0,
-      "op": 30.0000012219251,
-      "ip": 0,
-      "hd": false,
-      "ddd": 0,
-      "bm": 0,
-      "hasMask": false,
-      "ao": 0,
-      "ks": {
-        "a": { "a": 0, "k": [0, 0, 0], "ix": 1 },
-        "s": { "a": 0, "k": [100, 100, 100], "ix": 6 },
-        "sk": { "a": 0, "k": 0 },
-        "p": {
-          "a": 1,
-          "k": [
-            {
-              "o": { "x": 0.167, "y": 0 },
-              "i": { "x": 0.833, "y": 1 },
-              "s": [546, 266, 0],
-              "t": 13,
-              "ti": [0, 0, 0],
-              "to": [0, -11, 0]
-            },
-            {
-              "o": { "x": 0.167, "y": 0 },
-              "i": { "x": 0.833, "y": 1 },
-              "s": [546, 200, 0],
-              "t": 17,
-              "ti": [0, -11, 0],
-              "to": [0, 0, 0]
-            },
-            { "s": [546, 266, 0], "t": 21.0000008553475 }
-          ],
-          "ix": 2
-        },
-        "r": { "a": 0, "k": 0, "ix": 10 },
-        "sa": { "a": 0, "k": 0 },
-        "o": { "a": 0, "k": 100, "ix": 11 }
-      },
-      "ef": [],
-      "shapes": [
-        {
-          "ty": "gr",
-          "bm": 0,
-          "hd": false,
-          "mn": "ADBE Vector Group",
-          "nm": "Ellipse 1",
-          "ix": 1,
-          "cix": 2,
-          "np": 3,
-          "it": [
-            {
-              "ty": "el",
-              "bm": 0,
-              "hd": false,
-              "mn": "ADBE Vector Shape - Ellipse",
-              "nm": "Ellipse Path 1",
-              "d": 1,
-              "p": { "a": 0, "k": [0, 0], "ix": 3 },
-              "s": { "a": 0, "k": [45.137, 45.137], "ix": 2 }
-            },
-            {
-              "ty": "st",
-              "bm": 0,
-              "hd": false,
-              "mn": "ADBE Vector Graphic - Stroke",
-              "nm": "Stroke 1",
-              "lc": 1,
-              "lj": 1,
-              "ml": 4,
-              "o": { "a": 0, "k": 100, "ix": 4 },
-              "w": { "a": 0, "k": 8, "ix": 5 },
-              "c": { "a": 0, "k": [0, 0.7882, 0.9176], "ix": 3 }
-            },
-            {
-              "ty": "fl",
-              "bm": 0,
-              "hd": false,
-              "mn": "ADBE Vector Graphic - Fill",
-              "nm": "Fill 1",
-              "c": { "a": 0, "k": [0, 0.7882, 0.9176], "ix": 4 },
-              "r": 1,
-              "o": { "a": 0, "k": 100, "ix": 5 }
-            },
-            {
-              "ty": "tr",
-              "a": { "a": 0, "k": [0, 0], "ix": 1 },
-              "s": { "a": 0, "k": [100, 100], "ix": 3 },
-              "sk": { "a": 0, "k": 0, "ix": 4 },
-              "p": { "a": 0, "k": [-167.432, -17.432], "ix": 2 },
-              "r": { "a": 0, "k": 0, "ix": 6 },
-              "sa": { "a": 0, "k": 0, "ix": 5 },
-              "o": { "a": 0, "k": 100, "ix": 7 }
-            }
-          ]
-        }
-      ],
-      "ind": 1
-    },
-    {
-      "ty": 4,
-      "nm": "Shape Layer 3",
-      "sr": 1,
-      "st": -359.00001462237,
-      "op": 30.0000012219251,
-      "ip": 0,
-      "hd": false,
-      "ddd": 0,
-      "bm": 0,
-      "hasMask": false,
-      "ao": 0,
-      "ks": {
-        "a": { "a": 0, "k": [0, 0, 0], "ix": 1 },
-        "s": { "a": 0, "k": [100, 100, 100], "ix": 6 },
-        "sk": { "a": 0, "k": 0 },
-        "p": {
-          "a": 1,
-          "k": [
-            {
-              "o": { "x": 0.167, "y": 0 },
-              "i": { "x": 0.833, "y": 1 },
-              "s": [454, 266, 0],
-              "t": 9,
-              "ti": [0, 0, 0],
-              "to": [0, -11, 0]
-            },
-            {
-              "o": { "x": 0.167, "y": 0 },
-              "i": { "x": 0.833, "y": 1 },
-              "s": [454, 200, 0],
-              "t": 13,
-              "ti": [0, -11, 0],
-              "to": [0, 0, 0]
-            },
-            { "s": [454, 266, 0], "t": 17.0000006924242 }
-          ],
-          "ix": 2
-        },
-        "r": { "a": 0, "k": 0, "ix": 10 },
-        "sa": { "a": 0, "k": 0 },
-        "o": { "a": 0, "k": 100, "ix": 11 }
-      },
-      "ef": [],
-      "shapes": [
-        {
-          "ty": "gr",
-          "bm": 0,
-          "hd": false,
-          "mn": "ADBE Vector Group",
-          "nm": "Ellipse 1",
-          "ix": 1,
-          "cix": 2,
-          "np": 3,
-          "it": [
-            {
-              "ty": "el",
-              "bm": 0,
-              "hd": false,
-              "mn": "ADBE Vector Shape - Ellipse",
-              "nm": "Ellipse Path 1",
-              "d": 1,
-              "p": { "a": 0, "k": [0, 0], "ix": 3 },
-              "s": { "a": 0, "k": [45.137, 45.137], "ix": 2 }
-            },
-            {
-              "ty": "st",
-              "bm": 0,
-              "hd": false,
-              "mn": "ADBE Vector Graphic - Stroke",
-              "nm": "Stroke 1",
-              "lc": 1,
-              "lj": 1,
-              "ml": 4,
-              "o": { "a": 0, "k": 100, "ix": 4 },
-              "w": { "a": 0, "k": 8, "ix": 5 },
-              "c": { "a": 0, "k": [0, 0.7882, 0.9176], "ix": 3 }
-            },
-            {
-              "ty": "fl",
-              "bm": 0,
-              "hd": false,
-              "mn": "ADBE Vector Graphic - Fill",
-              "nm": "Fill 1",
-              "c": { "a": 0, "k": [0, 0.7882, 0.9176], "ix": 4 },
-              "r": 1,
-              "o": { "a": 0, "k": 100, "ix": 5 }
-            },
-            {
-              "ty": "tr",
-              "a": { "a": 0, "k": [0, 0], "ix": 1 },
-              "s": { "a": 0, "k": [100, 100], "ix": 3 },
-              "sk": { "a": 0, "k": 0, "ix": 4 },
-              "p": { "a": 0, "k": [-167.432, -17.432], "ix": 2 },
-              "r": { "a": 0, "k": 0, "ix": 6 },
-              "sa": { "a": 0, "k": 0, "ix": 5 },
-              "o": { "a": 0, "k": 100, "ix": 7 }
-            }
-          ]
-        }
-      ],
-      "ind": 2
-    },
-    {
-      "ty": 4,
-      "nm": "Shape Layer 2",
-      "sr": 1,
-      "st": 0,
-      "op": 30.0000012219251,
-      "ip": 0,
-      "hd": false,
-      "ddd": 0,
-      "bm": 0,
-      "hasMask": false,
-      "ao": 0,
-      "ks": {
-        "a": { "a": 0, "k": [0, 0, 0], "ix": 1 },
-        "s": { "a": 0, "k": [100, 100, 100], "ix": 6 },
-        "sk": { "a": 0, "k": 0 },
-        "p": {
-          "a": 1,
-          "k": [
-            {
-              "o": { "x": 0.167, "y": 0 },
-              "i": { "x": 0.833, "y": 1 },
-              "s": [365, 266, 0],
-              "t": 4,
-              "ti": [0, 0, 0],
-              "to": [0, -11, 0]
-            },
-            {
-              "o": { "x": 0.167, "y": 0 },
-              "i": { "x": 0.833, "y": 1 },
-              "s": [365, 200, 0],
-              "t": 9,
-              "ti": [0, -11, 0],
-              "to": [0, 0, 0]
-            },
-            { "s": [365, 266, 0], "t": 13.0000005295009 }
-          ],
-          "ix": 2
-        },
-        "r": { "a": 0, "k": 0, "ix": 10 },
-        "sa": { "a": 0, "k": 0 },
-        "o": { "a": 0, "k": 100, "ix": 11 }
-      },
-      "ef": [],
-      "shapes": [
-        {
-          "ty": "gr",
-          "bm": 0,
-          "hd": false,
-          "mn": "ADBE Vector Group",
-          "nm": "Ellipse 1",
-          "ix": 1,
-          "cix": 2,
-          "np": 3,
-          "it": [
-            {
-              "ty": "el",
-              "bm": 0,
-              "hd": false,
-              "mn": "ADBE Vector Shape - Ellipse",
-              "nm": "Ellipse Path 1",
-              "d": 1,
-              "p": { "a": 0, "k": [0, 0], "ix": 3 },
-              "s": { "a": 0, "k": [45.137, 45.137], "ix": 2 }
-            },
-            {
-              "ty": "st",
-              "bm": 0,
-              "hd": false,
-              "mn": "ADBE Vector Graphic - Stroke",
-              "nm": "Stroke 1",
-              "lc": 1,
-              "lj": 1,
-              "ml": 4,
-              "o": { "a": 0, "k": 100, "ix": 4 },
-              "w": { "a": 0, "k": 8, "ix": 5 },
-              "c": { "a": 0, "k": [0, 0.7882, 0.9176], "ix": 3 }
-            },
-            {
-              "ty": "fl",
-              "bm": 0,
-              "hd": false,
-              "mn": "ADBE Vector Graphic - Fill",
-              "nm": "Fill 1",
-              "c": { "a": 0, "k": [0, 0.7882, 0.9176], "ix": 4 },
-              "r": 1,
-              "o": { "a": 0, "k": 100, "ix": 5 }
-            },
-            {
-              "ty": "tr",
-              "a": { "a": 0, "k": [0, 0], "ix": 1 },
-              "s": { "a": 0, "k": [100, 100], "ix": 3 },
-              "sk": { "a": 0, "k": 0, "ix": 4 },
-              "p": { "a": 0, "k": [-167.432, -17.432], "ix": 2 },
-              "r": { "a": 0, "k": 0, "ix": 6 },
-              "sa": { "a": 0, "k": 0, "ix": 5 },
-              "o": { "a": 0, "k": 100, "ix": 7 }
-            }
-          ]
-        }
-      ],
-      "ind": 3
-    },
-    {
-      "ty": 4,
-      "nm": "Shape Layer 1",
-      "sr": 1,
-      "st": 0,
-      "op": 30.0000012219251,
-      "ip": 0,
-      "hd": false,
-      "ddd": 0,
-      "bm": 0,
-      "hasMask": false,
-      "ao": 0,
-      "ks": {
-        "a": { "a": 0, "k": [0, 0, 0], "ix": 1 },
-        "s": { "a": 0, "k": [100, 100, 100], "ix": 6 },
-        "sk": { "a": 0, "k": 0 },
-        "p": {
-          "a": 1,
-          "k": [
-            {
-              "o": { "x": 0.167, "y": 0 },
-              "i": { "x": 0.833, "y": 1 },
-              "s": [277, 266, 0],
-              "t": 0,
-              "ti": [0, 0, 0],
-              "to": [0, -11, 0]
-            },
-            {
-              "o": { "x": 0.167, "y": 0 },
-              "i": { "x": 0.833, "y": 1 },
-              "s": [277, 200, 0],
-              "t": 4,
-              "ti": [0, -11, 0],
-              "to": [0, 0, 0]
-            },
-            { "s": [277, 266, 0], "t": 9.00000036657752 }
-          ],
-          "ix": 2
-        },
-        "r": { "a": 0, "k": 0, "ix": 10 },
-        "sa": { "a": 0, "k": 0 },
-        "o": { "a": 0, "k": 100, "ix": 11 }
-      },
-      "ef": [],
-      "shapes": [
-        {
-          "ty": "gr",
-          "bm": 0,
-          "hd": false,
-          "mn": "ADBE Vector Group",
-          "nm": "Ellipse 1",
-          "ix": 1,
-          "cix": 2,
-          "np": 3,
-          "it": [
-            {
-              "ty": "el",
-              "bm": 0,
-              "hd": false,
-              "mn": "ADBE Vector Shape - Ellipse",
-              "nm": "Ellipse Path 1",
-              "d": 1,
-              "p": { "a": 0, "k": [0, 0], "ix": 3 },
-              "s": { "a": 0, "k": [45.137, 45.137], "ix": 2 }
-            },
-            {
-              "ty": "st",
-              "bm": 0,
-              "hd": false,
-              "mn": "ADBE Vector Graphic - Stroke",
-              "nm": "Stroke 1",
-              "lc": 1,
-              "lj": 1,
-              "ml": 4,
-              "o": { "a": 0, "k": 100, "ix": 4 },
-              "w": { "a": 0, "k": 8, "ix": 5 },
-              "c": { "a": 0, "k": [0, 0.7882, 0.9176], "ix": 3 }
-            },
-            {
-              "ty": "fl",
-              "bm": 0,
-              "hd": false,
-              "mn": "ADBE Vector Graphic - Fill",
-              "nm": "Fill 1",
-              "c": { "a": 0, "k": [0, 0.7882, 0.9176], "ix": 4 },
-              "r": 1,
-              "o": { "a": 0, "k": 100, "ix": 5 }
-            },
-            {
-              "ty": "tr",
-              "a": { "a": 0, "k": [0, 0], "ix": 1 },
-              "s": { "a": 0, "k": [100, 100], "ix": 3 },
-              "sk": { "a": 0, "k": 0, "ix": 4 },
-              "p": { "a": 0, "k": [-167.432, -17.432], "ix": 2 },
-              "r": { "a": 0, "k": 0, "ix": 6 },
-              "sa": { "a": 0, "k": 0, "ix": 5 },
-              "o": { "a": 0, "k": 100, "ix": 7 }
-            }
-          ]
-        }
-      ],
-      "ind": 4
-    }
-  ],
-  "v": "5.7.8",
-  "fr": 29.9700012207031,
-  "op": 30.0000012219251,
-  "ip": 0,
-  "assets": []
-}

package/src/components/LoadingIndicator/index.ts

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

package/src/components/Menu/Menu.styled.tsx

@@ -1,42 +0,0 @@
-import React from 'react';
-import { styled, Menu, listClasses, ListSubheader, dividerClasses } from '@mui/material';
-import { forwardRef } from 'react';
-import type { StyledMenuProps } from './Menu.types';
-
-const ForwardRefMenu = forwardRef<HTMLDivElement, StyledMenuProps>(
-  ({ size, className, ...props }: StyledMenuProps, ref) => (
-    <Menu
-      {...props}
-      ref={ref}
-      PopoverClasses={{ paper: className }}
-    />
-  ),
-);
-
-export const StyledMenu = styled(ForwardRefMenu)(({ size, theme }) => ({
-  backgroundColor: theme.palette.neutralGrey[90],
-  borderRadius: '8px',
-  [`& > .${listClasses.root}`]: {
-    display: 'flex',
-    flexDirection: 'column',
-    padding: size === 'small' ? theme.spacing(3, 4) : theme.spacing(5, 7),
-    gap: size === 'small' ? theme.spacing(0) : theme.spacing(2),
-  },
-  [`& > .${listClasses.root} > .${dividerClasses.root}`]: {
-    marginTop: 0,
-    marginBottom: 0,
-    marginLeft: size === 'small' ? theme.spacing(-4) : theme.spacing(-7),
-    marginRight: size === 'small' ? theme.spacing(-4) : theme.spacing(-7),
-    width: 'auto',
-  },
-}));
-
-export const StyledListSubheader = styled(ListSubheader)(({ theme }) => ({
-  ...theme.typography.small_body_m1,
-  display: 'flex',
-  alignItems: 'center',
-  backgroundColor: 'transparent',
-  height: '28px',
-  padding: 0,
-  color: theme.palette.neutralGrey[40],
-}));

package/src/components/Menu/Menu.tsx

@@ -1,28 +0,0 @@
-import React, { createContext, forwardRef, useMemo } from 'react';
-import { StyledListSubheader, StyledMenu } from './Menu.styled';
-import type { MenuContextValue, MenuProps } from './Menu.types';
-
-export const MenuContext = createContext<MenuContextValue>({
-  size: 'small',
-  showCheck: false,
-});
-
-const Menu = forwardRef<HTMLDivElement, MenuProps>(
-  ({ subheader, size = 'small', showCheck = false, children, ...props }: MenuProps, ref) => {
-    const contextValue = useMemo<MenuContextValue>(() => ({ size, showCheck }), [size, showCheck]);
-    return (
-      <MenuContext.Provider value={contextValue}>
-        <StyledMenu
-          size={size}
-          ref={ref}
-          {...props}
-        >
-          {subheader && <StyledListSubheader>{subheader}</StyledListSubheader>}
-          {children}
-        </StyledMenu>
-      </MenuContext.Provider>
-    );
-  },
-);
-
-export default Menu;

package/src/components/Menu/Menu.types.ts

@@ -1,18 +0,0 @@
-import type { MenuProps as MuiMenuProps } from '@mui/material';
-
-export type MenuSize = 'small' | 'medium';
-
-export interface MenuProps extends StyledMenuProps {
-  size?: MenuSize;
-  subheader?: React.ReactNode;
-  showCheck?: boolean;
-}
-
-export interface StyledMenuProps extends MuiMenuProps {
-  size?: MenuSize;
-}
-
-export interface MenuContextValue {
-  size: MenuSize;
-  showCheck: boolean;
-}

package/src/components/Menu/MenuItem.styled.ts

@@ -1,62 +0,0 @@
-import {
-  MenuItem,
-  styled,
-  buttonBaseClasses,
-  ListItemIcon,
-  menuItemClasses,
-  ListItemText,
-  typographyClasses,
-} from '@mui/material';
-import type { StyledMenuItemProps } from './MenuItem.types';
-
-export { CheckIcon, EmptyIcon } from '../List/ListItem.styled';
-
-export const StyledMenuItem = styled(MenuItem)<StyledMenuItemProps>(({ size, theme }) => {
-  return {
-    [`&.${buttonBaseClasses.root}`]: {
-      padding: size === 'small' ? theme.spacing(2) : theme.spacing(2, 4),
-      margin: size === 'small' ? theme.spacing(0, -2) : theme.spacing(0, -4),
-      '&.Mui-selected': {
-        background: 'transparent',
-      },
-      '&:hover, &.Mui-selected:hover, &.Mui-focusVisible, &.Mui-selected.Mui-focusVisible': {
-        borderRadius: '8px',
-        backgroundColor: theme.palette.neutralGrey[75],
-      },
-    },
-  };
-});
-
-const iconStyles = {
-  minWidth: '20px',
-  width: '20px',
-  height: '20px',
-  color: 'currentColor',
-  svg: {
-    width: '100%',
-    height: '100%',
-    color: 'currentColor !important',
-  },
-};
-
-export const StyledMenuItemStartIcon = styled(ListItemIcon)(({ theme }) => ({
-  [`.${menuItemClasses.root} &`]: {
-    ...iconStyles,
-    marginRight: theme.spacing(2),
-  },
-}));
-
-export const StyledMenuItemEndIcon = styled(ListItemIcon)(({ theme }) => ({
-  [`.${menuItemClasses.root} &`]: {
-    ...iconStyles,
-    justifyContent: 'flex-end',
-    marginLeft: theme.spacing(2),
-  },
-}));
-
-export const StyledMenuItemText = styled(ListItemText)(({ theme }) => ({
-  margin: 0,
-  [`& .${typographyClasses.body1}`]: {
-    ...theme.typography.body5,
-  },
-}));

package/src/components/Menu/MenuItem.tsx

@@ -1,45 +0,0 @@
-import React from 'react';
-import { useContext } from 'react';
-import ListItemCaption from '../List/ListItemCaption';
-import { MenuContext } from '../Menu/Menu';
-import {
-  StyledMenuItem,
-  StyledMenuItemStartIcon,
-  StyledMenuItemText,
-  StyledMenuItemEndIcon,
-  CheckIcon,
-  EmptyIcon,
-} from './MenuItem.styled';
-import type { MenuItemProps } from './MenuItem.types';
-
-const MenuItem = ({ icon: iconProp, caption, label, selected, ...props }: MenuItemProps) => {
-  const { size, showCheck } = useContext(MenuContext);
-
-  const icon = (() => {
-    if (showCheck) {
-      if (selected) {
-        return <CheckIcon />;
-      }
-      return iconProp || <EmptyIcon />;
-    }
-    return iconProp;
-  })();
-
-  return (
-    <StyledMenuItem
-      {...props}
-      size={size}
-      disableRipple
-    >
-      {icon && <StyledMenuItemStartIcon>{icon}</StyledMenuItemStartIcon>}
-      <StyledMenuItemText primary={label} />
-      {caption && (
-        <StyledMenuItemEndIcon>
-          <ListItemCaption>{caption}</ListItemCaption>
-        </StyledMenuItemEndIcon>
-      )}
-    </StyledMenuItem>
-  );
-};
-
-export default MenuItem;

package/src/components/Menu/MenuItem.types.ts

@@ -1,14 +0,0 @@
-import type { MenuItemProps as MuiMenuItemProps } from '@mui/material';
-import type { MenuSize } from '../Menu/Menu.types';
-
-export interface MenuItemProps extends MuiMenuItemProps {
-  icon?: React.ReactNode;
-  caption?: React.ReactNode;
-  label?: React.ReactNode;
-  open?: boolean;
-  children?: React.ReactNode;
-}
-
-export interface StyledMenuItemProps extends MuiMenuItemProps {
-  size: MenuSize;
-}

package/src/components/Menu/index.ts

@@ -1,5 +0,0 @@
-export { default as Menu } from './Menu';
-export type { MenuProps } from './Menu.types';
-
-export { default as MenuItem } from './MenuItem';
-export type { MenuItemProps } from './MenuItem.types';