feat: Add base project structure with API and web components

web/src/components/RbModal/Confirm.tsx

@@ -0,0 +1,63 @@
+import React, { createContext } from 'react';
+import { Button, Modal, Space } from 'antd';
+
+const ReachableContext = createContext<string | null>(null);
+const UnreachableContext = createContext<string | null>(null);
+
+const config = {
+  title: 'Use Hook!',
+  content: (
+    <>
+      <ReachableContext.Consumer>{(name) => `Reachable: ${name}!`}</ReachableContext.Consumer>
+      <br />
+      <UnreachableContext.Consumer>{(name) => `Unreachable: ${name}!`}</UnreachableContext.Consumer>
+    </>
+  ),
+};
+
+const App: React.FC = () => {
+  const [modal, contextHolder] = Modal.useModal();
+
+  return (
+    <ReachableContext.Provider value="Light">
+      <Space>
+        <Button
+          onClick={async () => {
+            const confirmed = await modal.confirm(config);
+            console.log('Confirmed: ', confirmed);
+          }}
+        >
+          Confirm
+        </Button>
+        <Button
+          onClick={() => {
+            modal.warning(config);
+          }}
+        >
+          Warning
+        </Button>
+        <Button
+          onClick={async () => {
+            modal.info(config);
+          }}
+        >
+          Info
+        </Button>
+        <Button
+          onClick={async () => {
+            modal.error(config);
+          }}
+        >
+          Error
+        </Button>
+      </Space>
+      {/* `contextHolder` should always be placed under the context you want to access */}
+      {contextHolder}
+
+      {/* Can not access this context since `contextHolder` is not in it */}
+      <UnreachableContext.Provider value="Bamboo" />
+    </ReachableContext.Provider>
+  );
+};
+
+export default App;

web/src/components/RbModal/index.tsx

@@ -0,0 +1,28 @@
+import { type FC } from 'react'
+import { Modal, type ModalProps } from 'antd'
+import { useTranslation } from 'react-i18next'
+
+const RbModal: FC<ModalProps> = ({
+  onOk,
+  onCancel,
+  children,
+  ...props
+}) => {
+  const { t } = useTranslation()
+  return (
+    <Modal
+      onCancel={onCancel}
+      width={480}
+      cancelText={t('common.cancel')}
+      onOk={onOk}
+      destroyOnHidden={true}
+      {...props}
+    >
+      <div className='rb:max-h-[550px] rb:overflow-y-auto rb:overflow-x-hidden'>
+        {children}
+      </div>
+    </Modal>
+  )
+}
+
+export default RbModal