feat(webapp): bank rule

packages/webapp/src/components/AppShell/AppShell.module.scss

@@ -0,0 +1,14 @@
+
+.main{
+  flex: 1 0;
+}
+
+.aside{
+  width: 500px;
+  height: 100dvh;
+  border-left: 1px solid rgba(17, 20, 24, 0.15);
+}
+
+.root {
+  display: flex;
+}

packages/webapp/src/components/AppShell/AppShell.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { AppShellProvider } from './AppShellProvider';
+import { Box } from '../Layout';
+import styles from './AppShell.module.scss';
+
+interface AppShellProps {
+  topbarOffset?: number;
+  mainProps: any;
+  asideProps: any;
+  children: React.ReactNode;
+}
+
+export function AppShell({
+  asideProps,
+  mainProps,
+  topbarOffset = 0,
+  ...restProps
+}: AppShellProps) {
+  return (
+    <AppShellProvider mainProps={mainProps} asideProps={asideProps} topbarOffset={topbarOffset}>
+      <Box {...restProps} className={styles.root} />
+    </AppShellProvider>
+  );
+}
+
+AppShell.Main = AppShellMain;
+AppShell.Aside = AppShellAside;
+
+function AppShellMain({ ...props }) {
+  return <Box {...props} className={styles.main} />;
+}
+
+interface AppShellAsideProps {
+  children: React.ReactNode;
+}
+
+function AppShellAside({ ...props }: AppShellAsideProps) {
+  return <Box {...props} className={styles.aside} />;
+}

packages/webapp/src/components/AppShell/AppShellProvider.tsx

@@ -0,0 +1,25 @@
+import React, { createContext } from 'react';
+
+interface AppShellContextValue {
+  topbarOffset: number
+}
+
+const AppShellContext = createContext<AppShellContextValue>(
+  {} as AppShellContextValue,
+);
+
+interface AppShellProviderProps {
+  children: React.ReactNode;
+  mainProps: any;
+  asideProps: any;
+  topbarOffset: number;
+}
+
+export function AppShellProvider({ topbarOffset, ...props }: AppShellProviderProps) {
+  const provider = { topbarOffset } as AppShellContextValue;
+
+  return <AppShellContext.Provider value={provider} {...props} />;
+}
+
+export const useAppShellContext = () =>
+  React.useContext<AppShellContextValue>(AppShellContext);