This project was bootstrapped with Create React App.
Node v16.15.1Yarn v1.22.11
To install the dependencies for the project, you can run:
In order for graphql-codegen to generate TypeScript types to match the GraphQL schema, create a .env.local file in the root of the project and include the property GRAPHQL_SCHEMA_PATH:
GRAPHQL_SCHEMA_PATH=/path/to/schema.graphqls
The architecture of the front-end is split into 3 layers:
-
UI (React) - The user interface are the pages and components that make up the application. Built with React, they contain no application logic.
-
Data Model (XState) - STAN client state management uses XState, a library for building StateCharts.
-
Core SDK - The SDK (which uses graphql-request) is generated as part of
graphql-codegendescribed above. handles all communication between STAN client and STAN core.
In the project directory, you can run:
Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.
The page will reload if you make edits.
You will also see any lint errors in the console.
It will also watch for any changes in the GraphQL schema, or in the queries and mutations in the graphql directory. It will automatically rebuild the graphql TypeScript types on any change. See yarn codegen below for more details.
Runs the app in the development mode with MockServiceWorker enabled (see below).
Open http://localhost:3000 to view it in the browser.
There is some special behaviour built in for the labware handlers when using MSW. When searching for a piece of labware by barcode, the number after the - will determine the labware type returned. The number following that will determine how many samples will be in each slot of the labware.
The current list of labware types and their order can be found in the labwareTypeFactory.ts.
Examples:
STAN-1111 // Proviasette (1) with 1 sample in each slot
STAN-4089 // Visium LP (4) with 0 samples in each slot
Runs the GraphQL Code Generator. This command automatically runs before yarn start, yarn start:msw, and yarn test:open.
GraphQL Code Generator is a CLI tool that can generate TypeScript typings out of a GraphQL schema.
Its configuration lives in codegen.yml. Its output goes into the /types directory.
Starts the app on http://localhost:3001 with REACT_APP_MOCK_API=msw then launches the Cypress test runner.
When the environment variable REACT_APP_MOCK_API is set to msw, after the application loads up it will also start Mock Service Worker. This allows all requests to the API to be mocked at the network level. The message [MSW] Mocking enabled. will be shown in the browser's javascript console.
By default, when using cy.visit() to visit a page in cypress, the user is already logged in. To visit as a guest, use cy.visitAsGuest() method.
The default handlers for msw are in /src/mocks/handlers.ts.
If using IntelliJ, install the Cypress plugin to allow running tests inside the IDE.
Does the same as yarn jest. It runs all the unit tests in the /tests directory using jest.
Does the same as yarn test:open but runs all cypress tests on the command line, instead of using its launcher.
Runs eslint in the project to identify syntax problems and suggest improvements in the code.
Runs prettier in the project to format the code
This should be run once to initialise the git hooks in the project.
Runs Storybook. The development server will need to be simultaneously running in a separate process to build the CSS.
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 for more information.
This allows user to run prettier on all files manually and corrects all formatting errors.
Every time you create a commit, a git hook (using husky) will check for formatting errors in your files and run prettier.
However,to make the coding environment better, it is recommended to integrate Prettier into the editor of your choice Reformatting code with Prettier in IntelliJ
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.
You can learn more in the Create React App documentation.
To learn React, check out the React documentation.
- graphql-request: https://github.com/prisma-labs/graphql-request
- Learn about cypress: https://docs.cypress.io/guides/overview/why-cypress.html#In-a-nutshell
- Cypress assertions: https://docs.cypress.io/guides/references/assertions.html#Chai
- Cypress testing library: https://testing-library.com/docs/cypress-testing-library/intro
- Mock Service Worker docs: https://mswjs.io/docs/
- Useful article about testing with MSW: https://kentcdodds.com/blog/stop-mocking-fetch
- Tailwind CSS - https://tailwindcss.com
- Tailwind CSS Custom Forms - https://tailwindcss-custom-forms.netlify.app/
- Icon Set: https://heroicons.com/
- XState (state machine library): https://xstate.js.org/docs/
- React Framer Motion (animation components): https://www.framer.com/api/motion/
- Fishery (for defining factories): https://github.com/thoughtbot/fishery