@lunit/oui 1.0.1-alpha.13 → 1.0.1-alpha.2

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

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

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

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

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

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

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

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

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

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

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