Feat/migrate modals

.github/workflows/ui-tests.yml

@@ -1,10 +1,6 @@
 name: 'UI Tests'
 
-on:
-  pull_request_review:
-    types: [submitted]
-  pull_request:
-    types: [review_requested]
+on: pull_request
 
 jobs:
   # Run interaction and accessibility tests
@@ -32,12 +28,12 @@ jobs:
 
       - name: Install chromium
         run: yarn playwright install chromium
-      
+
       - name: Playwright component test
         run: yarn test-ct
       - uses: actions/upload-artifact@v3
         if: always()
         with:
           name: playwright-report
           path: playwright-report/
-          retention-days: 30
+          retention-days: 30

.storybook/main.ts

@@ -1,5 +1,4 @@
 import type { StorybookConfig } from '@storybook/react-vite';
-
 const config: StorybookConfig = {
   stories: [
     '../src/**/*/stories.@(ts|tsx)',
@@ -15,6 +14,8 @@ const config: StorybookConfig = {
     name: '@storybook/react-vite',
     options: {},
   },
+  docs: {
+    autodocs: true,
+  },
 };
-
 export default config;

package.json

@@ -26,8 +26,9 @@
   "scripts": {
     "build": "vite build",
     "start": "vite build --watch",
-    "prepare": "run-s build",
     "prepack": "run-s build",
+    "gen:cahkra-theme-typings": "chakra-cli tokens src/theme-chakra/theme/index.ts",
+    "postinstall": "yarn run gen:cahkra-theme-typings",
     "test:lint": "eslint --ext .ts,.tsx ./src",
     "test:prettier": "prettier --check ./src",
     "prettier": "prettier --write ./src",
@@ -49,31 +50,59 @@
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.3.0"
   },
+  "dependencies": {
+    "@chakra-ui/anatomy": "^2.1.1",
+    "@chakra-ui/react": "^2.6.1",
+    "@chakra-ui/styled-system": "^2.9.0",
+    "@codemirror/view": "^6.9.5",
+    "@emotion/core": "^10.3.1",
+    "@emotion/react": "^11.10.6",
+    "@emotion/styled": "^11.10.6",
+    "@rebass/forms": "^4.0.6",
+    "@styled-system/css": "^5.1.5",
+    "@tanem/react-nprogress": "^5.0.34",
+    "@uiw/codemirror-extensions-langs": "^4.19.16",
+    "@uiw/codemirror-theme-darcula": "^4.19.16",
+    "@uiw/react-codemirror": "^4.19.16",
+    "date-fns": "^2.28.0",
+    "emotion-theming": "^10.3.0",
+    "framer-motion": "^10.11.4",
+    "ramda": "^0.28.0",
+    "rc-slider": "^10.1.0",
+    "rc-tooltip": "^4.2.3",
+    "react-datepicker": "4.10.0",
+    "react-spring": "^8.0.27",
+    "rebass": "^4.0.7"
+  },
   "devDependencies": {
+    "@chakra-ui/cli": "^2.4.1",
     "@playwright/experimental-ct-react": "^1.31.2",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/commit-analyzer": "^9.0.2",
     "@semantic-release/git": "^10.0.1",
     "@semantic-release/github": "^8.0.7",
     "@semantic-release/npm": "^10.0.3",
     "@semantic-release/release-notes-generator": "^10.0.3",
-    "@storybook/addon-actions": "^7.0.4",
-    "@storybook/addon-essentials": "^7.0.4",
-    "@storybook/addon-interactions": "^7.0.4",
-    "@storybook/addon-links": "^7.0.4",
-    "@storybook/react": "^7.0.4",
-    "@storybook/react-vite": "^7.0.4",
+    "@storybook/addon-actions": "^7.0.12",
+    "@storybook/addon-docs": "^7.0.12",
+    "@storybook/addon-essentials": "^7.0.12",
+    "@storybook/addon-interactions": "^7.0.12",
+    "@storybook/addon-links": "^7.0.12",
+    "@storybook/jest": "^0.1.0",
+    "@storybook/react": "^7.0.12",
+    "@storybook/react-vite": "^7.0.12",
     "@storybook/test-runner": "^0.10.0",
+    "@storybook/testing-library": "^0.1.0",
     "@types/node": "^16.12.38",
     "@types/ramda": "^0.28.1",
     "@types/react": "^18.0.28",
     "@types/react-datepicker": "^4",
     "@types/react-dom": "^18.0.11",
     "@types/rebass": "^4.0.10",
     "@types/rebass__forms": "^4.0.6",
-    "@typescript-eslint/eslint-plugin": "^5.29.0",
+    "@typescript-eslint/eslint-plugin": "^5.59.6",
     "@typescript-eslint/parser": "^5.29.0",
-    "@vitejs/plugin-react": "^3.1.0",
+    "@vitejs/plugin-react": "^4.0.0",
     "chromatic": "^5.10.2",
     "commitizen": "^4.2.4",
     "cross-env": "^7.0.3",
@@ -96,44 +125,18 @@
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.3.0",
     "semantic-release": "^21.0.1",
-    "storybook": "^7.0.4",
+    "storybook": "^7.0.12",
     "storybook-dark-mode": "^3.0.0",
-    "typescript": "^4.6.2",
-    "vite": "^4.2.1",
-    "vite-plugin-css-injected-by-js": "^3.1.0",
-    "vite-plugin-dts": "^2.2.0",
+    "typescript": "^5.0.4",
+    "vite": "^4.3.6",
+    "vite-plugin-css-injected-by-js": "^3.1.1",
+    "vite-plugin-dts": "^2.3.0",
     "yalc": "^1.0.0-pre.53"
   },
   "files": [
     "dist",
     ".releaserc.json"
   ],
-  "dependencies": {
-    "@chakra-ui/react": "^2.6.1",
-    "@codemirror/view": "^6.9.5",
-    "@emotion/core": "^10.3.1",
-    "@emotion/react": "^11.10.6",
-    "@emotion/styled": "^11.10.6",
-    "@rebass/forms": "^4.0.6",
-    "@storybook/jest": "^0.1.0",
-    "@storybook/testing-library": "^0.1.0",
-    "@styled-system/css": "^5.1.5",
-    "@tanem/react-nprogress": "^5.0.34",
-    "@uiw/codemirror-extensions-langs": "^4.19.16",
-    "@uiw/codemirror-theme-darcula": "^4.19.16",
-    "@uiw/react-codemirror": "^4.19.16",
-    "date-fns": "^2.28.0",
-    "emotion-theming": "^10.3.0",
-    "events": "^3.2.0",
-    "framer-motion": "^10.11.4",
-    "ramda": "^0.28.0",
-    "rc-slider": "^10.1.0",
-    "rc-tooltip": "^4.2.3",
-    "react-datepicker": "4.10.0",
-    "react-spring": "^8.0.27",
-    "rebass": "^4.0.7",
-    "remove": "^0.1.5"
-  },
   "publishConfig": {
     "access": "public"
   },

src/.vscode/extensions.json

@@ -0,0 +1,9 @@
+{
+  "recommendations": [
+    "dbaeumer.vscode-eslint",
+    "esbenp.prettier-vscode",
+    "nicholashsiang.vscode-react-snippet",
+    "eamodio.gitlens",
+    "ms-vsliveshare.vsliveshare"
+  ]
+}

src/.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "typescript.tsdk": "node_modules/typescript/lib"
+}

src/chakra.ts

@@ -1,4 +1,4 @@
-export { useDisclosure, ColorModeScript } from '@chakra-ui/react';
+export * from '@chakra-ui/react';
 
 export { ChakraThemeProvider } from './theme-chakra/ChakraThemeProvider';
 

src/components/button/Button.tsx

@@ -44,6 +44,7 @@ export const Button: FC<Props> = ({
   const component = (
     <RebassButton
       variant={intent}
+      as={href ? 'span' : 'button'}
       disabled={disabled || isLoading}
       sx={{ ...S.wrapper, ...sx }}
       type={type}

src/components/button/styles.ts

@@ -33,7 +33,7 @@ export const wrapper = {
   },
 } as SxStyleProp;
 
-export const spinnerColor = (intent: string): string => {
+export const spinnerColor = (intent: keyof typeof buttonsStyles): string => {
   const disabledStyles = buttonsStyles[intent][':disabled'];
   return disabledStyles.color;
 };

src/components/code/index.tsx

@@ -1,5 +1,5 @@
 import { EditorView } from '@codemirror/view';
-import React, { FC, useState } from 'react';
+import React, { useState } from 'react';
 import { Box, Flex, FlexProps } from 'rebass';
 
 import { LanguageName, loadLanguage } from '@uiw/codemirror-extensions-langs';
@@ -30,11 +30,10 @@ export interface CodeProps extends Omit<FlexProps, 'css' | 'title'> {
 }
 
 export const defaultPopupProps = {
-  width: 'calc(100vw - 80px)',
-  height: 'calc(100vh - 80px)',
+  size: '7xl',
 };
 
-const Code: FC<CodeProps> = ({
+const Code = ({
   content,
   language,
   copyButton = false,
@@ -62,11 +61,6 @@ const Code: FC<CodeProps> = ({
             language={language}
             copyButton={copyButton}
             downloadButton={downloadButton}
-            maxHeightOfCode={
-              popupProps.height || popupProps.maxHeight
-                ? `calc(${popupProps.height ?? popupProps.maxHeight} - 143px)`
-                : '100%'
-            }
             {...props}
           />
         )}
@@ -99,11 +93,8 @@ const Code: FC<CodeProps> = ({
 export default Code;
 
 // Normal Code Component
-interface CodeSnippetProps
-  extends Omit<CodeProps, 'popupProps' | 'expandable'> {
-  maxHeightOfCode?: string;
-}
-const CodeSnippet: FC<CodeSnippetProps> = ({
+type CodeSnippetProps = Omit<CodeProps, 'popupProps' | 'expandable'>;
+const CodeSnippet = ({
   title,
   content,
   language,
@@ -113,9 +104,8 @@ const CodeSnippet: FC<CodeSnippetProps> = ({
   wrapLongLines,
   showLineNumbers,
   copyCallback,
-  maxHeightOfCode,
   ...props
-}) => {
+}: CodeSnippetProps) => {
   return (
     <Flex flexDirection="column" width="100%" height="100%">
       <Flex width="100%" sx={codeHeaderStyles}>
@@ -133,13 +123,7 @@ const CodeSnippet: FC<CodeSnippetProps> = ({
           <CopyButton content={content} copyCallback={copyCallback} />
         )}
       </Flex>
-      <Flex
-        width="100%"
-        variant="code"
-        height={maxHeightOfCode}
-        {...props}
-        p={0}
-      >
+      <Flex width="100%" variant="code" {...props} p={0}>
         <CodeMirror
           value={content}
           basicSetup={{
@@ -162,9 +146,11 @@ const CodeSnippet: FC<CodeSnippetProps> = ({
 };
 
 // Download Button
-const DownloadButton: FC<
-  Pick<CodeProps, 'content' | 'downloadCallback' | 'title'>
-> = ({ content, downloadCallback, title }) => {
+const DownloadButton = ({
+  content,
+  downloadCallback,
+  title,
+}: Pick<CodeProps, 'content' | 'downloadCallback' | 'title'>) => {
   const download = () => {
     if (downloadCallback) {
       downloadCallback();
@@ -186,10 +172,10 @@ const DownloadButton: FC<
 };
 
 // Copy Button
-const CopyButton: FC<Pick<CodeProps, 'copyCallback' | 'content'>> = ({
+const CopyButton = ({
   copyCallback,
   content,
-}) => {
+}: Pick<CodeProps, 'copyCallback' | 'content'>) => {
   const [copied, setCopied] = useState(false);
 
   const handleCopyClicked = async () => {

src/components/dropdown-button/styles.ts

@@ -4,6 +4,7 @@ export default {
     cursor: 'pointer',
     marginTop: '-2px',
     width: 'fit-content',
+    height: 'fit-content',
     background: 'white',
   },
   dropdown: (height: number | undefined, alignLeft: boolean) => ({

src/components/expand-viewer/index.tsx

@@ -2,10 +2,8 @@ import React, { FC, useState } from 'react';
 import { Box, Button as RebassButton, Flex } from 'rebass';
 import { useTheme } from '../../theme/theme';
 import Popup, { PopupProps } from '../popup';
-import { IconButton } from '../icon-button';
 import { getIcon, IconName } from '../icon/list';
 import Value from '../typography/value';
-import Subtitle from '../typography/subtitle';
 import expandViewButtonStyle from './expand-viewer.styles';
 
 export interface ExpandViewerProps {
@@ -45,18 +43,15 @@ const ExpandViewer: FC<ExpandViewerProps> = ({
   return (
     <Flex sx={{ width: '100%' }}>
       <BriefComponent />
-      <Popup isOpen onClose={() => setExpanded(false)} {...popupProps}>
-        <Box padding={20}>
-          <Flex marginBottom={3} alignItems="center">
-            <Box flexGrow={1}>
-              <Subtitle>{title}</Subtitle>
-            </Box>
-            <IconButton
-              icon={IconName.cross}
-              intent="ghost"
-              onClick={() => setExpanded(false)}
-            />
-          </Flex>
+      <Popup
+        isOpen
+        onClose={() => setExpanded(false)}
+        title={title}
+        hasCloseButton
+        size="4xl"
+        {...popupProps}
+      >
+        <Box mb="20px">
           <NormalComponent />
         </Box>
       </Popup>

src/components/file-system-explorer/file-system-explorer.styles.ts

@@ -32,8 +32,8 @@ export const fileExplorerHeaderStyles = {
 export default {
   display: 'flex',
   flexDirection: 'column',
-  minHeight: 'calc(100vh - 45px)',
-  maxHeight: 'calc(100vh - 20px)',
+  height: '100%',
+  maxHeight: 'calc(100vh - 110px)',
   borderWidth: '1px',
   borderBottomWidth: '0px',
   borderStyle: 'solid',

src/components/footer-button/footer-button.styles.ts

@@ -29,4 +29,7 @@ export default {
   ':disabled': {
     cursor: 'default',
   },
+  ':focus': {
+    bg: 'primaryShade2',
+  },
 } as SxStyleProp;

src/components/navigation/container/index.tsx

@@ -22,7 +22,7 @@ export interface NavigationProps {
   children?: React.ReactNode;
   footer?: React.ReactNode;
   header?: React.ReactNode;
-  trackBy?: string;
+  trackBy?: keyof TreeNode;
   tree?: TreeNode[];
   onNavigate?: (node: TreeNode | null) => void;
   onBackCLick?: () => void;

src/components/navigation/context/getNode.ts

@@ -4,7 +4,7 @@ type ReturnType = TreeNode | null;
 
 const getNode = (
   tree: TreeNode[] | TreeNode,
-  key: string,
+  key: keyof TreeNode,
   value?: string,
 ): ReturnType => {
   if (Array.isArray(tree)) {