Essentially, a re-skin of the thing right here: http://www-dave.cs.uiuc.edu/hours.html.
I wanted to use the power of design-systems such as Grommet, as well as other advances such as time-fields to make the device much easier to use on mobile. Specifically:
- The user shouldn't need to enter the time by text. There is now an input type="time" (can-i-use stats)
- It should be more legible in mobile. Single-column helps here, or at least media queries.
- Limitations such as >12h workshifts or a limited number of days in a work week need to be squashed. We should gun for extendability.
- Build single time record componet as text field
- Capture start and end times on onBlur event
- Validate accurate times
- Provide fallback if browser is safari
Each of these directories are of a single depth.
| Directory | Description |
|---|---|
components |
All visual components |
helpers |
Immutable JS functions |
lib |
All JS tools that aren't immutable helper functions |
| File Name | Description |
|---|---|
| theme.js | Theme information for grommet and styled components |
| App.css | All CSS for all core DOM elements |
| .eslintrc | Instructions for linting rules |
| .eslintignore | Where to ignore the linting rules entirely |
| .prettierrc | Configuration instructions for autoformat rules |
| .serviceWorker.js | Autogenerated file by CRA that assists with PWAs |
- App.css for global rules of HTML elements
- 1rem = 10px by default
- Most defaults will be pulled from the design system.
- Grommet for abstract primitives (Box, Form, FormField, etc)
- Styled Components for styling at the component-level.
Testing is built using both React Enzyme, Jest and is controlled at the test level using @testing-library/react. Testing in the components takes place in component directories. Integration testing is better than testing, behaviour (ie what does the container do when it loads; how many times does it make a network request) is better than Unit behaviour testing (when the props are of a certain type, what colour does it show).
Linting is based on a subset of AirBNB's style guide and internal best practices. The outcome of this combination is still yet to be confirmed. If a lint setting is generally preventing you from accomplishing your goals, talk with the team in #guild-frontend. Either you're too invested in an antipattern, or we have a linter setting that needs to change.
If a linter setting is in conflict with the autoformatter (Prettier), we will opt for the autoformatter. When we build code, we should keep our focus on the content, not the format.