feat(#24): add sidebar

package.json

@@ -29,7 +29,7 @@
     "@codemirror/language": "6.2.1",
     "@codemirror/lint": "6.0.0",
     "@codemirror/state": "6.1.1",
-    "@codemirror/view": "6.2.3",
+    "@codemirror/view": "6.2.4",
     "@dnd-kit/core": "6.0.5",
     "@dnd-kit/modifiers": "6.0.0",
     "@dnd-kit/sortable": "7.0.1",
@@ -43,7 +43,7 @@
     "@improbable-eng/grpc-web-node-http-transport": "0.15.0",
     "@lezer/highlight": "1.0.0",
     "@nextui-org/react": "1.0.0-beta.10",
-    "@uiw/react-codemirror": "4.12.2",
+    "@uiw/react-codemirror": "4.12.3",
     "chroma-js": "2.4.2",
     "electron-squirrel-startup": "1.0.0",
     "electron-store": "8.1.0",
@@ -83,7 +83,7 @@
     "@storybook/react": "6.5.12",
     "@storybook/testing-library": "0.0.13",
     "@types/chroma-js": "2.1.4",
-    "@types/jest": "29.0.2",
+    "@types/jest": "29.0.3",
     "@types/lodash": "4.14.185",
     "@types/react": "18.0.20",
     "@types/react-color": "3.0.6",
@@ -110,7 +110,7 @@
     "jest": "29.0.3",
     "node-loader": "2.0.0",
     "prettier": "2.7.1",
-    "release-it": "15.4.1",
+    "release-it": "15.4.2",
     "style-loader": "3.3.1",
     "ts-jest": "29.0.1",
     "ts-loader": "9.3.1",

src/app/components/buttons/ezy.button.tsx

@@ -0,0 +1,20 @@
+import { Button, ButtonProps } from '@nextui-org/react';
+import React from 'react';
+
+export const EzyButton: React.FC<ButtonProps> = ({ css, children, ...props }) => (
+  <Button
+    {...props}
+    css={{
+      color: '$accents5',
+      '&:hover': {
+        color: '$ezy',
+      },
+      '.nextui-drip .nextui-drip-filler': {
+        fill: '$accents1',
+      },
+      ...css,
+    }}
+  >
+    {children}
+  </Button>
+);

src/app/components/buttons/index.ts

@@ -0,0 +1 @@
+export * from './ezy.button';

src/app/components/icons/ezy.icon.tsx

@@ -0,0 +1,27 @@
+import { CSS, styled } from '@nextui-org/react';
+import React from 'react';
+
+export interface Props {
+  className?: string;
+  css?: CSS;
+}
+
+const StyledSvg = styled('svg', {
+  stroke: 'CurrentColor',
+});
+
+export const EzyIcon: React.FC<Props> = () => (
+  <StyledSvg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      opacity="0.95"
+      d="M10 19L8.54456 19C8.15547 19 7.60137 18.4611 7.60137 18.4611L4.14594 12.5389C3.95136 12.2054 3.95137 11.7946 4.14589 11.4611L7.60132 5.53886C7.79589 5.20541 8.15547 5 8.54456 5L12 5M12 19L15.4554 19C15.8445 19 16.2041 18.7946 16.3987 18.4611L19.8541 12.5389C20.0486 12.2054 20.0486 11.7946 19.8541 11.4611L16.3986 5.53886C16.2041 5.20541 15.8445 5 15.4554 5L14 5"
+      strokeWidth="2"
+    />
+  </StyledSvg>
+);

src/app/components/icons/index.ts

@@ -1,2 +1,3 @@
 export * from './horizontal-layout.icon';
 export * from './vertical-layout.icon';
+export * from './ezy.icon';

src/app/components/index.ts

@@ -11,3 +11,5 @@ export * from './file-input';
 export * from './notification';
 export * from './info-label';
 export * from './kbar';
+export * from './menu';
+export * from './buttons';

src/app/components/menu/index.ts

@@ -0,0 +1,2 @@
+export * from './menu';
+export * from './menu-item';

src/app/components/menu/menu-item.tsx

@@ -0,0 +1,65 @@
+import { styled, VariantProps } from '@nextui-org/react';
+import React from 'react';
+
+const StyledMenuItem = styled('div', {
+  display: 'flex',
+  justifyContent: 'center',
+  padding: 10,
+
+  '&:hover': {
+    color: '$ezy',
+  },
+
+  variants: {
+    active: {
+      true: {
+        color: '$ezy',
+      },
+      false: {
+        color: '$accents5',
+      },
+    },
+  },
+});
+
+const IconWrapper = styled('div', {
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+
+  width: 30,
+  height: 30,
+
+  variants: {
+    active: {
+      true: {
+        transition: 'all 0.2s ease',
+        bs: '$xs',
+        br: '$squared',
+        backgroundColor: '$accents1',
+      },
+      false: {
+        backgroundColor: 'transparent',
+      },
+    },
+  },
+});
+
+export type MenuItemData = {
+  key: string;
+
+  icon: React.ReactElement;
+
+  // eslint-disable-next-line react/no-unused-prop-types
+  submenu?: React.ReactElement;
+};
+
+export type MenuItemProps = MenuItemData & {
+  onClick?: () => void;
+} & VariantProps<typeof StyledMenuItem>;
+
+export const MenuItem: React.FC<MenuItemProps> = ({ key, icon, active = false, onClick }) => (
+  <StyledMenuItem key={key} active={active} onClick={onClick}>
+    <IconWrapper active={active}>{icon}</IconWrapper>
+  </StyledMenuItem>
+);

src/app/components/menu/menu.tsx

@@ -0,0 +1,99 @@
+import { styled } from '@nextui-org/react';
+import React from 'react';
+
+import { MenuItem, MenuItemData } from './menu-item';
+
+const StyledMenu = styled('div', {
+  display: 'flex',
+  flexDirection: 'column',
+  flex: 1,
+
+  width: 50,
+  maxWidth: 50,
+
+  backgroundColor: '$background',
+
+  borderRight: 'solid 0.1px $border',
+});
+
+const SubMenu = styled('div', {
+  display: 'flex',
+  flexWrap: 'nowrap',
+  transition: 'all 0.2s ease',
+
+  borderRight: 'solid 0.1px $border',
+
+  variants: {
+    isCollapsed: {
+      true: {
+        width: 250,
+      },
+      false: {
+        '& div': {
+          display: 'none',
+        },
+        width: 0,
+      },
+    },
+  },
+});
+
+const TopContainer = styled('div', {
+  borderBottom: 'solid 0.1px $border',
+});
+
+const BottomContainer = styled('div', {
+  marginTop: 'auto',
+});
+
+export interface MenuProps {
+  items: MenuItemData[];
+
+  top?: React.ReactNode;
+
+  bottom?: React.ReactNode;
+
+  isCollapsed?: boolean;
+
+  onCollapseChange?: (isCollapsed: boolean) => void;
+}
+
+export const Menu: React.FC<MenuProps> = ({
+  items,
+  bottom,
+  top,
+  isCollapsed = false,
+  onCollapseChange,
+}) => {
+  // const [isCollapsed, setIsCollapsed] = React.useState(true);
+  const [activeItem, setActiveItem] = React.useState<string>(items[0].key);
+
+  const handleMenuItemClick = (index: string) => {
+    if (index === activeItem && onCollapseChange) {
+      onCollapseChange(!isCollapsed);
+    } else {
+      setActiveItem(index);
+    }
+  };
+
+  const submenu = items.find((item) => item.key === activeItem)?.submenu;
+
+  return (
+    <>
+      <StyledMenu>
+        <TopContainer>{top}</TopContainer>
+        {items.map((item) => (
+          <MenuItem
+            {...item}
+            active={item.key === activeItem}
+            onClick={() => {
+              handleMenuItemClick(item.key);
+            }}
+          />
+        ))}
+        <BottomContainer>{bottom}</BottomContainer>
+      </StyledMenu>
+      <SubMenu isCollapsed={isCollapsed}>{!!submenu && submenu}</SubMenu>
+    </>
+  );
+};

src/app/pages/context/app.context.ts → src/app/context/app.context.ts

@@ -26,7 +26,7 @@ export function useAppContextProvider() {
     });
   });
 
-  const value: IAppContext = {
+  const appContext: IAppContext = {
     platform: {
       os,
       setOs,
@@ -38,7 +38,7 @@ export function useAppContextProvider() {
   };
 
   return {
-    value,
+    appContext,
     AppProvider,
   };
 }

src/app/pages/main.tsx

@@ -1,17 +1,17 @@
 import React from 'react';
 import { useEffectOnce } from 'react-use';
 
+import { useAppContextProvider } from '../context';
 import { DefaultLayout } from '../layouts';
 import { useCollectionsStore } from '../storage';
-import { useAppContextProvider } from './context';
 import { Shortcuts } from './shortcuts';
 import { SideBar } from './side-bar';
 import { StatusBar } from './status-bar';
 import { TabsContainer } from './tabs-container';
 
 export const Main = (): JSX.Element => {
   const { collections, updateCollection } = useCollectionsStore((store) => store);
-  const { value, AppProvider } = useAppContextProvider();
+  const { appContext, AppProvider } = useAppContextProvider();
 
   useEffectOnce(() => {
     collections.forEach((collection) => {
@@ -20,7 +20,7 @@ export const Main = (): JSX.Element => {
   });
 
   return (
-    <AppProvider value={value}>
+    <AppProvider value={appContext}>
       <Shortcuts>
         <DefaultLayout left={<SideBar />} bottom={<StatusBar />}>
           <TabsContainer />

src/app/pages/settings/forms/settings.form.tsx

@@ -32,7 +32,12 @@ export const SettingsForm: React.FC<SettingsFormProps> = ({
                 borderWeight="light"
                 animated={false}
                 color="gradient"
-                css={{ tt: 'capitalize' }}
+                css={{
+                  tt: 'capitalize',
+                  '.nextui-drip .nextui-drip-filler': {
+                    fill: '$ezy',
+                  },
+                }}
               >
                 {field.value} Theme
               </Dropdown.Button>

src/app/pages/shortcuts/shortcuts.tsx

@@ -4,8 +4,8 @@ import { createAction, KBarProvider } from 'kbar';
 import React, { PropsWithChildren } from 'react';
 
 import { KBar } from '../../components';
+import { AppContext } from '../../context';
 import { useCollectionsStore, useTabsStore } from '../../storage';
-import { AppContext } from '../context';
 import { useEnvironmentActions, useGrpcMethodActions, useThemeActions } from './hooks';
 
 interface ActionsProviderProps {