From f8d706233e3490d4c41a70d3a026e28f26edec3d Mon Sep 17 00:00:00 2001 From: Gilbert Date: Thu, 11 Apr 2024 16:40:22 -0500 Subject: [PATCH] Switch from cra to vite --- .node-version | 1 + packages/backend/.node-version | 1 + packages/backend/package.json | 14 +- packages/frontend/.env.example | 7 - packages/frontend/.eslintignore | 1 - packages/frontend/.eslintrc.cjs | 18 + packages/frontend/.eslintrc.json | 25 - packages/frontend/.gitignore | 2 +- packages/frontend/.node-version | 1 + packages/frontend/.prettierignore | 3 - packages/frontend/README.md | 60 +- packages/frontend/index.html | 36 + packages/frontend/logo.svg | 7 - packages/frontend/package.json | 65 +- packages/frontend/postcss.config.js | 6 + packages/frontend/src/App.tsx | 32 +- packages/frontend/src/assets/templates.ts | 40 +- packages/frontend/src/components/Stepper.tsx | 14 +- .../src/components/VerticalStepper.tsx | 121 + .../projects/create/ConnectAccount.tsx | 28 +- .../create/ConnectAccountTabPanel.tsx | 8 +- .../src/components/projects/create/Deploy.tsx | 18 +- .../components/projects/create/DeployStep.tsx | 48 +- .../src/context/Web3ModalProvider.tsx | 64 +- packages/frontend/src/index.tsx | 36 +- packages/frontend/src/pages/SnowballLogin.tsx | 18 + packages/frontend/src/utils/snowball.ts | 19 + packages/frontend/src/utils/use-snowball.ts | 13 + packages/frontend/tsconfig.json | 35 +- packages/frontend/tsconfig.node.json | 11 + packages/frontend/vite.config.ts | 29 + packages/gql-client/index.ts | 2 - packages/gql-client/package.json | 17 +- packages/gql-client/src/index.ts | 2 + scripts/yarn-file-for-local-dev.sh | 67 + yarn.lock | 10876 +++++++--------- 36 files changed, 5163 insertions(+), 6582 deletions(-) create mode 100644 .node-version create mode 100644 packages/backend/.node-version delete mode 100644 packages/frontend/.env.example delete mode 100644 packages/frontend/.eslintignore create mode 100644 packages/frontend/.eslintrc.cjs delete mode 100644 packages/frontend/.eslintrc.json create mode 100644 packages/frontend/.node-version delete mode 100644 packages/frontend/.prettierignore create mode 100644 packages/frontend/index.html delete mode 100644 packages/frontend/logo.svg create mode 100644 packages/frontend/postcss.config.js create mode 100644 packages/frontend/src/components/VerticalStepper.tsx create mode 100644 packages/frontend/src/pages/SnowballLogin.tsx create mode 100644 packages/frontend/src/utils/snowball.ts create mode 100644 packages/frontend/src/utils/use-snowball.ts create mode 100644 packages/frontend/tsconfig.node.json create mode 100644 packages/frontend/vite.config.ts delete mode 100644 packages/gql-client/index.ts create mode 100644 packages/gql-client/src/index.ts create mode 100755 scripts/yarn-file-for-local-dev.sh diff --git a/.node-version b/.node-version new file mode 100644 index 00000000..020fc41d --- /dev/null +++ b/.node-version @@ -0,0 +1 @@ +v20.12.1 diff --git a/packages/backend/.node-version b/packages/backend/.node-version new file mode 100644 index 00000000..020fc41d --- /dev/null +++ b/packages/backend/.node-version @@ -0,0 +1 @@ +v20.12.1 diff --git a/packages/backend/package.json b/packages/backend/package.json index 8a47a4ba..972fd24e 100644 --- a/packages/backend/package.json +++ b/packages/backend/package.json @@ -35,7 +35,6 @@ "copy-assets": "copyfiles -u 1 src/**/*.gql dist/", "clean": "rm -rf ./dist", "build": "yarn clean && tsc && yarn copy-assets", - "lint": "eslint .", "format": "prettier --write .", "format:check": "prettier --check .", "test:registry:init": "DEBUG=snowball:* ts-node ./test/initialize-registry.ts", @@ -46,20 +45,9 @@ "devDependencies": { "@types/express-session": "^1.17.10", "@types/fs-extra": "^11.0.4", - "@typescript-eslint/eslint-plugin": "^6.18.1", - "@typescript-eslint/parser": "^6.18.1", "better-sqlite3": "^9.2.2", "copyfiles": "^2.4.1", - "eslint": "^8.56.0", - "eslint-config-prettier": "^9.1.0", - "eslint-config-semistandard": "^15.0.1", - "eslint-config-standard": "^16.0.3", - "eslint-plugin-import": "^2.27.5", - "eslint-plugin-node": "^11.1.0", - "eslint-plugin-prettier": "^5.1.3", - "eslint-plugin-promise": "^5.1.0", - "eslint-plugin-standard": "^5.0.0", "prettier": "^3.1.1", "workspace": "^0.0.1-preview.1" } -} +} \ No newline at end of file diff --git a/packages/frontend/.env.example b/packages/frontend/.env.example deleted file mode 100644 index 06d048c4..00000000 --- a/packages/frontend/.env.example +++ /dev/null @@ -1,7 +0,0 @@ -REACT_APP_SERVER_URL = 'http://localhost:8000' - -REACT_APP_GITHUB_CLIENT_ID = -REACT_APP_GITHUB_PWA_TEMPLATE_REPO = -REACT_APP_GITHUB_IMAGE_UPLOAD_PWA_TEMPLATE_REPO = - -REACT_APP_WALLET_CONNECT_ID = \ No newline at end of file diff --git a/packages/frontend/.eslintignore b/packages/frontend/.eslintignore deleted file mode 100644 index 378eac25..00000000 --- a/packages/frontend/.eslintignore +++ /dev/null @@ -1 +0,0 @@ -build diff --git a/packages/frontend/.eslintrc.cjs b/packages/frontend/.eslintrc.cjs new file mode 100644 index 00000000..d6c95379 --- /dev/null +++ b/packages/frontend/.eslintrc.cjs @@ -0,0 +1,18 @@ +module.exports = { + root: true, + env: { browser: true, es2020: true }, + extends: [ + 'eslint:recommended', + 'plugin:@typescript-eslint/recommended', + 'plugin:react-hooks/recommended', + ], + ignorePatterns: ['dist', '.eslintrc.cjs'], + parser: '@typescript-eslint/parser', + plugins: ['react-refresh'], + rules: { + 'react-refresh/only-export-components': [ + 'warn', + { allowConstantExport: true }, + ], + }, +} diff --git a/packages/frontend/.eslintrc.json b/packages/frontend/.eslintrc.json deleted file mode 100644 index a06db087..00000000 --- a/packages/frontend/.eslintrc.json +++ /dev/null @@ -1,25 +0,0 @@ -{ - "parser": "@typescript-eslint/parser", - "parserOptions": { - "ecmaFeatures": { - "jsx": true - }, - "ecmaVersion": 13, - "sourceType": "module" - }, - "env": { - "browser": true, - "es2021": true - }, - "plugins": ["react", "@typescript-eslint"], - "extends": [ - "plugin:react/recommended", - "plugin:@typescript-eslint/recommended", - "plugin:prettier/recommended" - ], - "settings": { - "react": { - "version": "detect" - } - } -} diff --git a/packages/frontend/.gitignore b/packages/frontend/.gitignore index 8692cf66..eb14a767 100644 --- a/packages/frontend/.gitignore +++ b/packages/frontend/.gitignore @@ -21,4 +21,4 @@ npm-debug.log* yarn-debug.log* -yarn-error.log* +yarn-error.log* \ No newline at end of file diff --git a/packages/frontend/.node-version b/packages/frontend/.node-version new file mode 100644 index 00000000..020fc41d --- /dev/null +++ b/packages/frontend/.node-version @@ -0,0 +1 @@ +v20.12.1 diff --git a/packages/frontend/.prettierignore b/packages/frontend/.prettierignore deleted file mode 100644 index 307ac112..00000000 --- a/packages/frontend/.prettierignore +++ /dev/null @@ -1,3 +0,0 @@ -# artifacts -build -coverage diff --git a/packages/frontend/README.md b/packages/frontend/README.md index 7db1053b..0d6babed 100644 --- a/packages/frontend/README.md +++ b/packages/frontend/README.md @@ -1,46 +1,30 @@ -# Getting Started with Create React App +# React + TypeScript + Vite -This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app), using [typescript-tailwindcss-eslint-prettier](https://github.com/cufarvid/cra-templates) template. +This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. -## Available Scripts +Currently, two official plugins are available: -In the project directory, you can run: +- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh +- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh -### `yarn start` +## Expanding the ESLint configuration -Runs the app in the development mode.\ -Open [http://localhost:3000](http://localhost:3000) to view it in the browser. +If you are developing a production application, we recommend updating the configuration to enable type aware lint rules: -The page will reload if you make edits.\ -You will also see any lint errors in the console. +- Configure the top-level `parserOptions` property like this: -### `yarn test` +```js +export default { + // other rules... + parserOptions: { + ecmaVersion: 'latest', + sourceType: 'module', + project: ['./tsconfig.json', './tsconfig.node.json'], + tsconfigRootDir: __dirname, + }, +} +``` -Launches the test runner in the interactive watch mode.\ -See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. - -### `yarn build` - -Builds the app for production to the `build` folder.\ -It correctly bundles React in production mode and optimizes the build for the best performance. - -The build is minified and the filenames include the hashes.\ -Your app is ready to be deployed! - -See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. - -### `yarn eject` - -**Note: this is a one-way operation. Once you `eject`, you can’t go back!** - -If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project. - -Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own. - -You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it. - -## Learn More - -You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). - -To learn React, check out the [React documentation](https://reactjs.org/). +- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked` +- Optionally add `plugin:@typescript-eslint/stylistic-type-checked` +- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list diff --git a/packages/frontend/index.html b/packages/frontend/index.html new file mode 100644 index 00000000..f009134f --- /dev/null +++ b/packages/frontend/index.html @@ -0,0 +1,36 @@ + + + + + + + + + + + + + + + + Snowball + + +
+ + + diff --git a/packages/frontend/logo.svg b/packages/frontend/logo.svg deleted file mode 100644 index 9dd99e38..00000000 --- a/packages/frontend/logo.svg +++ /dev/null @@ -1,7 +0,0 @@ - - - - - - - diff --git a/packages/frontend/package.json b/packages/frontend/package.json index 729d7b1e..e2560e3a 100644 --- a/packages/frontend/package.json +++ b/packages/frontend/package.json @@ -1,7 +1,13 @@ { "name": "frontend", - "version": "0.1.8", "private": true, + "version": "0.0.0", + "type": "module", + "scripts": { + "dev": "vite --port 3000", + "build": "tsc && vite build", + "preview": "vite preview" + }, "dependencies": { "@fontsource-variable/jetbrains-mono": "^5.0.19", "@fontsource/inter": "^5.0.16", @@ -15,6 +21,13 @@ "@radix-ui/react-tabs": "^1.0.4", "@radix-ui/react-toast": "^1.1.5", "@radix-ui/react-tooltip": "^1.0.7", + "@snowballtools/auth": "/Users/rabbit-m2/p/snowball/snowball-ts-sdk/packages/auth", + "@snowballtools/auth-lit": "/Users/rabbit-m2/p/snowball/snowball-ts-sdk/packages/auth-lit", + "@snowballtools/js-sdk": "/Users/rabbit-m2/p/snowball/snowball-ts-sdk/packages/js-sdk", + "@snowballtools/link-lit-alchemy-light": "/Users/rabbit-m2/p/snowball/snowball-ts-sdk/packages/link-lit-alchemy-light", + "@snowballtools/smartwallet-alchemy-light": "/Users/rabbit-m2/p/snowball/snowball-ts-sdk/packages/smartwallet-alchemy-light", + "@snowballtools/types": "/Users/rabbit-m2/p/snowball/snowball-ts-sdk/packages/types", + "@snowballtools/utils": "/Users/rabbit-m2/p/snowball/snowball-ts-sdk/packages/utils", "@tanstack/react-query": "^5.22.2", "@testing-library/jest-dom": "^5.17.0", "@testing-library/react": "^13.4.0", @@ -23,6 +36,7 @@ "@types/node": "^16.18.68", "@types/react": "^18.2.42", "@types/react-dom": "^18.2.17", + "@walletconnect/ethereum-provider": "^2.12.2", "@web3modal/siwe": "^4.0.5", "@web3modal/wagmi": "^4.0.5", "assert": "^2.1.0", @@ -30,7 +44,6 @@ "clsx": "^2.1.0", "date-fns": "^3.3.1", "downshift": "^8.3.2", - "eslint-config-react-app": "^7.0.1", "framer-motion": "^11.0.8", "gql-client": "^1.0.0", "lottie-react": "^2.4.0", @@ -46,54 +59,24 @@ "react-hot-toast": "^2.4.1", "react-oauth-popup": "^1.0.5", "react-router-dom": "^6.20.1", - "react-scripts": "5.0.1", "react-timer-hook": "^3.0.7", "siwe": "^2.1.4", "tailwind-variants": "^0.2.0", - "typescript": "^4.9.5", "usehooks-ts": "^2.15.1", - "vertical-stepper-nav": "^1.0.2", "viem": "^2.7.11", "wagmi": "^2.5.7", "web-vitals": "^2.1.4" }, - "scripts": { - "start": "react-scripts start", - "build": "react-scripts build", - "test": "react-scripts test", - "eject": "react-scripts eject", - "format": "prettier --write .", - "format:check": "prettier --check .", - "lint": "eslint ." - }, - "eslintConfig": { - "extends": [ - "react-app", - "react-app/jest" - ] - }, - "browserslist": { - "production": [ - ">0.2%", - "not dead", - "not op_mini all" - ], - "development": [ - "last 1 chrome version", - "last 1 firefox version", - "last 1 safari version" - ] - }, "devDependencies": { - "@babel/plugin-proposal-private-property-in-object": "^7.21.11", "@types/luxon": "^3.3.7", - "@typescript-eslint/eslint-plugin": "^6.13.2", - "@typescript-eslint/parser": "^6.13.2", - "eslint": "^8.55.0", - "eslint-config-prettier": "^9.1.0", - "eslint-plugin-prettier": "^5.0.1", - "eslint-plugin-react": "^7.33.2", + "@types/react": "^18.2.66", + "@types/react-dom": "^18.2.22", + "@vitejs/plugin-react": "^4.2.1", + "autoprefixer": "^10.4.19", + "postcss": "^8.4.38", "prettier": "^3.1.0", - "tailwindcss": "^3.4.1" + "tailwindcss": "^3.4.3", + "typescript": "^5.3.3", + "vite": "^5.2.0" } -} +} \ No newline at end of file diff --git a/packages/frontend/postcss.config.js b/packages/frontend/postcss.config.js new file mode 100644 index 00000000..2e7af2b7 --- /dev/null +++ b/packages/frontend/postcss.config.js @@ -0,0 +1,6 @@ +export default { + plugins: { + tailwindcss: {}, + autoprefixer: {}, + }, +} diff --git a/packages/frontend/src/App.tsx b/packages/frontend/src/App.tsx index 0e171b94..28624a79 100644 --- a/packages/frontend/src/App.tsx +++ b/packages/frontend/src/App.tsx @@ -1,51 +1,51 @@ -import React from 'react'; -import { createBrowserRouter, RouterProvider } from 'react-router-dom'; +import React from "react"; +import { createBrowserRouter, RouterProvider } from "react-router-dom"; -import Projects from './pages/org-slug'; -import Settings from './pages/org-slug/Settings'; +import Projects from "./pages/org-slug"; +import Settings from "./pages/org-slug/Settings"; import { projectsRoutesWithSearch, projectsRoutesWithoutSearch, -} from './pages/org-slug/projects/routes'; -import ProjectSearchLayout from './layouts/ProjectSearch'; -import Index from './pages'; -import Login from './pages/Login'; -import { DashboardLayout } from 'pages/org-slug/layout'; +} from "./pages/org-slug/projects/routes"; +import ProjectSearchLayout from "./layouts/ProjectSearch"; +import Index from "./pages"; +import Login from "./pages/Login"; +import { DashboardLayout } from "./pages/org-slug/layout"; const router = createBrowserRouter([ { - path: ':orgSlug', + path: ":orgSlug", element: , children: [ { element: , children: [ { - path: '', + path: "", element: , }, { - path: 'projects', + path: "projects", children: projectsRoutesWithSearch, }, ], }, { - path: 'settings', + path: "settings", element: , }, { - path: 'projects', + path: "projects", children: projectsRoutesWithoutSearch, }, ], }, { - path: '/', + path: "/", element: , }, { - path: '/login', + path: "/login", element: , }, ]); diff --git a/packages/frontend/src/assets/templates.ts b/packages/frontend/src/assets/templates.ts index 2d12165a..c35d2df0 100644 --- a/packages/frontend/src/assets/templates.ts +++ b/packages/frontend/src/assets/templates.ts @@ -1,37 +1,37 @@ export default [ { - id: '1', - name: 'Progressive Web App (PWA)', - icon: 'pwa', - repoFullName: `${process.env.REACT_APP_GITHUB_PWA_TEMPLATE_REPO}`, + id: "1", + name: "Progressive Web App (PWA)", + icon: "pwa", + repoFullName: `${import.meta.env.VITE_GITHUB_PWA_TEMPLATE_REPO}`, isComingSoon: false, }, { - id: '2', - name: 'Image Upload PWA', - icon: 'pwa', - repoFullName: `${process.env.REACT_APP_GITHUB_IMAGE_UPLOAD_PWA_TEMPLATE_REPO}`, + id: "2", + name: "Image Upload PWA", + icon: "pwa", + repoFullName: `${import.meta.env.VITE_GITHUB_IMAGE_UPLOAD_PWA_TEMPLATE_REPO}`, isComingSoon: false, }, { - id: '3', - name: 'Kotlin', - icon: 'kotlin', - repoFullName: '', + id: "3", + name: "Kotlin", + icon: "kotlin", + repoFullName: "", isComingSoon: true, }, { - id: '4', - name: 'React Native', - icon: 'react-native', - repoFullName: '', + id: "4", + name: "React Native", + icon: "react-native", + repoFullName: "", isComingSoon: true, }, { - id: '5', - name: 'Swift', - icon: 'swift', - repoFullName: '', + id: "5", + name: "Swift", + icon: "swift", + repoFullName: "", isComingSoon: true, }, ]; diff --git a/packages/frontend/src/components/Stepper.tsx b/packages/frontend/src/components/Stepper.tsx index 996cab95..ff9958da 100644 --- a/packages/frontend/src/components/Stepper.tsx +++ b/packages/frontend/src/components/Stepper.tsx @@ -1,9 +1,9 @@ -import React from 'react'; -import { StepperNav } from 'vertical-stepper-nav'; +import React from "react"; +import { StepperNav } from "./VerticalStepper"; -const COLOR_COMPLETED = '#059669'; -const COLOR_ACTIVE = '#CFE6FC'; -const COLOR_NOT_STARTED = '#F1F5F9'; +const COLOR_COMPLETED = "#059669"; +const COLOR_ACTIVE = "#CFE6FC"; +const COLOR_NOT_STARTED = "#F1F5F9"; interface StepperValue { step: number; @@ -25,8 +25,8 @@ const Stepper = ({ activeStep, stepperValues }: StepperProps) => {
{stepperValue.label} diff --git a/packages/frontend/src/components/VerticalStepper.tsx b/packages/frontend/src/components/VerticalStepper.tsx new file mode 100644 index 00000000..203267c2 --- /dev/null +++ b/packages/frontend/src/components/VerticalStepper.tsx @@ -0,0 +1,121 @@ +import React from 'react'; +import * as CSS from 'csstype'; + +// +// Nav +// +export interface IStepDescription { + stepContent: () => JSX.Element; + stepStateColor?: string; + stepStatusCircleSize?: number; + onClickHandler?: () => void | undefined; +} + +export interface IStepperNavProps { + steps: IStepDescription[]; +} + +export const StepperNav = (props: IStepperNavProps): JSX.Element => { + return ( + + ); +}; + +// +// Separator +// +const separatorStyles = { + height: '5vh', + width: 2, + border: '1px solid #E1E1E1', + background: '#E1E1E1', +}; + +export interface ISeparator { + height?: string | number; +} + +export const Separator = ({ height }: ISeparator): JSX.Element => { + return
; +}; + +// +// Step +// +export interface IStep { + stepContent: () => JSX.Element; + statusColor?: string; + statusCircleSize?: number; + onClickHandler?: ( + event?: React.MouseEvent, + ) => void | undefined; +} + +const buttonContainerStyles: CSS.Properties = { + display: 'inline-flex', + flexWrap: 'wrap', + gap: '12px', + padding: '2px', + cursor: 'pointer', +}; + +export const Step = ({ + stepContent, + statusColor, + statusCircleSize, + onClickHandler, +}: IStep): JSX.Element => { + const circleStyles = { + borderRadius: statusCircleSize ?? 16, + width: statusCircleSize ?? 16, + height: statusCircleSize ?? 16, + border: '2px solid #E1E1E1', + background: statusColor ?? 'white', + }; + + const keyDownHandler = (event: React.KeyboardEvent) => { + if (event.keyCode === 13 || event.keyCode === 32) { + onClickHandler?.(); + } + }; + + return ( +
+
+
+
+
{stepContent()}
+
+ ); +}; diff --git a/packages/frontend/src/components/projects/create/ConnectAccount.tsx b/packages/frontend/src/components/projects/create/ConnectAccount.tsx index 7c4e1e4e..ab90cb97 100644 --- a/packages/frontend/src/components/projects/create/ConnectAccount.tsx +++ b/packages/frontend/src/components/projects/create/ConnectAccount.tsx @@ -1,23 +1,23 @@ -import React from 'react'; -import OauthPopup from 'react-oauth-popup'; +import React from "react"; +import OauthPopup from "react-oauth-popup"; -import { useGQLClient } from '../../../context/GQLClientContext'; -import { Button } from 'components/shared/Button'; +import { useGQLClient } from "../../../context/GQLClientContext"; +import { Button } from "../../shared/Button"; import { GitIcon, EllipsesIcon, SnowballIcon, GithubIcon, GitTeaIcon, -} from 'components/shared/CustomIcon'; -import { useToast } from 'components/shared/Toast'; -import { IconWithFrame } from 'components/shared/IconWithFrame'; -import { Heading } from 'components/shared/Heading'; -import { MockConnectGitCard } from './MockConnectGitCard'; +} from "../../shared/CustomIcon"; +import { useToast } from "../../shared/Toast"; +import { IconWithFrame } from "../../shared/IconWithFrame"; +import { Heading } from "../../shared/Heading"; +import { MockConnectGitCard } from "./MockConnectGitCard"; -const SCOPES = 'repo user'; +const SCOPES = "repo user"; const GITHUB_OAUTH_URL = `https://github.com/login/oauth/authorize?client_id=${ - process.env.REACT_APP_GITHUB_CLIENT_ID + import.meta.env.VITE_GITHUB_CLIENT_ID }&scope=${encodeURIComponent(SCOPES)}`; interface ConnectAccountInterface { @@ -39,9 +39,9 @@ const ConnectAccount: React.FC = ({ onToken(token); toast({ onDismiss: dismiss, - id: 'connected-to-github', - title: 'The Git account is connected.', - variant: 'success', + id: "connected-to-github", + title: "The Git account is connected.", + variant: "success", }); }; diff --git a/packages/frontend/src/components/projects/create/ConnectAccountTabPanel.tsx b/packages/frontend/src/components/projects/create/ConnectAccountTabPanel.tsx index f7706520..7a9565b7 100644 --- a/packages/frontend/src/components/projects/create/ConnectAccountTabPanel.tsx +++ b/packages/frontend/src/components/projects/create/ConnectAccountTabPanel.tsx @@ -1,6 +1,6 @@ -import React from 'react'; +import React from "react"; -import { Tabs } from 'components/shared/Tabs'; +import { Tabs } from "components/shared/Tabs"; const ConnectAccountTabPanel: React.FC = () => { return ( @@ -11,8 +11,8 @@ const ConnectAccountTabPanel: React.FC = () => { > {[ - { title: 'Import a repository' }, - { title: 'Start with a template' }, + { title: "Import a repository" }, + { title: "Start with a template" }, ].map(({ title }, index) => ( {title} diff --git a/packages/frontend/src/components/projects/create/Deploy.tsx b/packages/frontend/src/components/projects/create/Deploy.tsx index f443d5ed..8482b78e 100644 --- a/packages/frontend/src/components/projects/create/Deploy.tsx +++ b/packages/frontend/src/components/projects/create/Deploy.tsx @@ -1,17 +1,17 @@ -import React, { useCallback, useEffect } from 'react'; -import { useNavigate, useParams, useSearchParams } from 'react-router-dom'; +import React, { useCallback, useEffect } from "react"; +import { useNavigate, useParams, useSearchParams } from "react-router-dom"; -import { DeployStep, DeployStatus } from './DeployStep'; -import { Stopwatch, setStopWatchOffset } from 'components/StopWatch'; -import { Heading } from 'components/shared/Heading'; -import { Button } from 'components/shared/Button'; -import { ClockOutlineIcon, WarningIcon } from 'components/shared/CustomIcon'; -import { CancelDeploymentDialog } from 'components/projects/Dialog/CancelDeploymentDialog'; +import { DeployStep, DeployStatus } from "./DeployStep"; +import { Stopwatch, setStopWatchOffset } from "../../StopWatch"; +import { Heading } from "../../shared/Heading"; +import { Button } from "../../shared/Button"; +import { ClockOutlineIcon, WarningIcon } from "../../shared/CustomIcon"; +import { CancelDeploymentDialog } from "../../projects/Dialog/CancelDeploymentDialog"; const TIMEOUT_DURATION = 5000; const Deploy = () => { const [searchParams] = useSearchParams(); - const projectId = searchParams.get('projectId'); + const projectId = searchParams.get("projectId"); const [open, setOpen] = React.useState(false); const handleOpen = () => setOpen(!open); diff --git a/packages/frontend/src/components/projects/create/DeployStep.tsx b/packages/frontend/src/components/projects/create/DeployStep.tsx index de78f789..8e750e2f 100644 --- a/packages/frontend/src/components/projects/create/DeployStep.tsx +++ b/packages/frontend/src/components/projects/create/DeployStep.tsx @@ -1,11 +1,11 @@ -import React, { useState } from 'react'; +import React, { useState } from "react"; -import { Collapse } from '@material-tailwind/react'; +import { Collapse } from "@material-tailwind/react"; -import { Stopwatch, setStopWatchOffset } from '../../StopWatch'; -import FormatMillisecond from '../../FormatMilliSecond'; -import processLogs from '../../../assets/process-logs.json'; -import { cn } from 'utils/classnames'; +import { Stopwatch, setStopWatchOffset } from "../../StopWatch"; +import FormatMillisecond from "../../FormatMilliSecond"; +import processLogs from "../../../assets/process-logs.json"; +import { cn } from "utils/classnames"; import { CheckRoundFilledIcon, ClockOutlineIcon, @@ -13,15 +13,15 @@ import { LoaderIcon, MinusCircleIcon, PlusIcon, -} from 'components/shared/CustomIcon'; -import { Button } from 'components/shared/Button'; -import { useToast } from 'components/shared/Toast'; -import { useIntersectionObserver } from 'usehooks-ts'; +} from "components/shared/CustomIcon"; +import { Button } from "components/shared/Button"; +import { useToast } from "components/shared/Toast"; +import { useIntersectionObserver } from "usehooks-ts"; enum DeployStatus { - PROCESSING = 'progress', - COMPLETE = 'complete', - NOT_STARTED = 'notStarted', + PROCESSING = "progress", + COMPLETE = "complete", + NOT_STARTED = "notStarted", } interface DeployStepsProps { @@ -52,8 +52,8 @@ const DeployStep = ({ {/* Collapisble trigger */} @@ -133,15 +133,15 @@ const DeployStep = ({ )} {/* Copy log button */} -
+