Move from CRA/JS to Vite/TS #38
Closed
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…unused files and code
… Logo.js): remove unused files and code 🔥 chore(Sidebar.js): remove Sidebar component 🔥 chore(UseTitle.js): remove useTitle hook 🔥 chore(index.js): remove index.js file 🔥 chore(reportWebVitals.js): remove reportWebVitals.js file 🔥 chore(routes.js): remove routes.js file 🔥 chore(setupTests.js): remove setupTests.js file
✨ feat(RequesFromCode.ts): add codeParse and RequestFromCode functions to parse and send requests from code editor window
…CodeBlocks functions ✨ feat(Theme.ts): add Theme object with base, rules, and colors properties
🎉 feat(History): add History component to Menu
…r code ✨ feat(types.ts): add Row and ColumnParams types for DataGrid ✨ feat(CollectionCard.tsx): add CollectionCard component to display collection details ✨ feat(DeleteDialog.tsx): add DeleteDialog component to confirm collection deletion ✨ feat(SearchBar.tsx): add SearchBar component to search collections ✨ feat(index.ts): export CollectionCard, DeleteDialog, and SearchBar components
✨ feat(PointCard.tsx): create PointCard component in TypeScript ✨ feat(PointImage.tsx): create PointImage component to render images ✨ feat(ResultEditorWindow.tsx): create ResultEditorWindow component to display JSON data
🔥 chore: remove .eslintrc.yml file 🔥 chore: remove .gitattributes file 🎉 feat: add index.html file 🎉 feat: add type field to package.json 🎉 feat: add scripts to package.json 🎉 feat: add devDependencies to package.json
🆕 feat(tsconfig.json): add tsconfig.json file 🆕 feat(tsconfig.node.json): add tsconfig.node.json file 🆕 feat(vite.config.ts): add vite.config.ts file
🚨 test(App.test.tsx): add simple test for App component 🚀 feat(App.tsx): add AppRoutes component to App 🚀 feat(fn.bench.ts): add linear and binary search benchmarks for sorted and unsorted arrays 🔥 chore(logo.svg): delete logo.svg file ✨ feat(main.tsx): add React.StrictMode, QueryClientProvider, and ErrorBoundary components ✨ feat(vite-env.d.ts): add VITE_API_URL environment variable to ImportMetaEnv interface
🚀 feat(api): add axios instance and api methods 🚀 feat(mocks): add mock user data for tests
🎉 feat(routes.tsx): add browser routes for Home, Collection, Collections, and Console 🎉 feat(envs.schema.ts): add envSchema for VITE_API_URL 🎉 feat(services): add collectionServices for getCollections, deleteCollections, and getCollectionsByName 🎉 feat(utils): add formatErrors to format Zod errors
✨ feat(Home): add Home page component ✨ feat(api.ts): add apiRoutes object ✨ feat(app.ts): add appRoutes object
✨ feat(Collection): add Collection component ✨ feat(Collections): add Collections component ✨ feat(Console): add Console component
✨ feat(index.ts): export envs module from config ✨ feat(useCollections.ts): add useGetCollections, useGetCollectionByName, and useDeleteCollections hooks ✨ feat(useTitle.tsx): add useTitle hook ✨ feat(Collection.tsx): add Collection page component ✨ feat(index.ts): export Collection, Collections, Console, and Home page components
…plete, error marker, and run button 🐛 fix(CodeEditorWindow): fix error marker not showing on editor change 🚚 chore(CodeEditorWindow): move Menu component to CodeEditorWindow folder 🚀 feat(parser): add tests for code parser and block selector 🚀 feat(ErrorBoundary): add ErrorBoundary component 🚀 feat(Logo): add Logo component 🚀 feat(Points): add PointCard component 🚀 feat(Sidebar): add Sidebar component 🚀 feat(components): export all components from index file
…files and add types ✨ feat(ToastNotifications): add types file and export components from index file
🎨 style(Collection.tsx): disable pagination button when there is no next page available
… Web UI project, benefits of using TypeScript with Vite, and stack used for the project. Also, add instructions for getting started with the project, available scripts, and information about pnpm.
|
Hi @CarlosZiegler that is great effort! Do you think it might be possible to introduce changes gradually? Of not, I will just merge it as-is without a review. |
|
Here is some top-level feedback:
@CarlosZiegler it would really help if you could split this PR into multiple smaller once, otherwise it is quite hard to synchronize with all the changes we already have in conflict. I would start with Vite and then I would gradually integrate TS in the codebase. |
|
I understand the importance of breaking down PRs into smaller chunks, but in this particular case, since the codebase is still in its early stages, I believe it wouldn't be too difficult to make this transition. We could incorporate the changes from other open PRs into this one and gradually adjust the codebase. While I agree that small commits make sense, it's worth noting that many of the issues were resolved in this PR with the migration to Vite. Nonetheless, I'm happy to work with the team to find a solution that works best for everyone. |
|
@CarlosZiegler I can't resolve conflicts, as I don't have access to your branch. You would need to do it from your side. |
This was to changes that I was integrated before open PR. Now it will work. |
…and more efficient package management
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Pull Request Description
Related issues
#16
#37
#35
Description
This pull request implements several improvements to the existing CRA App by moving it to either Vite or Next with TypeScript. In addition, it utilizes React Query for data fetching and Zod for some validations.
To enhance code organization and maintainability, the codebase has been restructured into different layers, including API, Hooks, Config, Routes, Schema, Services, and Utils. These layers have been added to improve code modularity and separation of concerns.
The implementation also includes the addition of keybinds to trigger queries, making the user experience more seamless and intuitive. To improve testing, Jest has been replaced with Vitest.
However, further refinement is required in the following areas:
Components
The current implementation lacks proper componentization, and this pull request aims to address this by creating reusable, independent components. This will improve code organization and maintenance, as well as enhance the overall scalability of the application.
Types
This pull request currently lacks sufficient types, and we need to implement proper type annotations throughout the codebase. This will improve code readability and catch potential errors before runtime.
Editor Hooks for Data Fetching
To improve the user experience, we want to create hooks that allow users to fetch data directly from the editor. This will enable more seamless data retrieval and make the application more user-friendly.
Overall, this pull request will improve the maintainability, scalability, and user experience of the CRA App by moving it to Vite or Next with TypeScript, utilizing React Query and Zod, restructuring the codebase into different layers, adding keybinds, and changing the testing framework to Vitest.
Deploy
Deployment on Vercel and Demo
This pull request includes deployment to Vercel, a cloud platform for static and serverless deployment. Vercel provides seamless integration with Git and automatic deployments, making it an excellent choice for our project.
The demo for this project is available online at https://qdrant-web-ui-demo.vercel.app/. Users can access the demo and interact with the application to test its features and functionalities.