Skip to content

Commit

Permalink
More configuration cleanup
Browse files Browse the repository at this point in the history 
- configured Corepack and pnpm to set the correct versions of Node and pnpm
- made final edits to the client workflow documentation
- fixed the versions for 3 npm packages so that the system compiles and runs
- fixed Sam's image
All the npm package versions will need to be revisited and, perhaps, updated.
  • Loading branch information
@kvlinden
kvlinden committed Jul 26, 2024
1 parent a5ba39e commit 2ebbb15
Show file tree
Hide file tree
Showing 5 changed files with 11,912 additions and 14,557 deletions.
2 changes: 2 additions & 0 deletions .vscode/course-schedulizer.code-workspace
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,8 @@
"Madza",
"Maru",
"Norvig",
"packagemanager",
"predeploy",
"Pruim",
"reuseables",
"Schedulizer",
Expand Down
74 changes: 39 additions & 35 deletions client-course-schedulizer/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,8 @@ The Course Schedulizer is a single-page application that allows users to view an

## Scripts

[Create React App](https://create-react-app.dev/) builds the following built-in scripts.

- `pnpm start` runs the app in the development mode.
Open [http://localhost:3000](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.

Expand All @@ -25,45 +27,20 @@ The Course Schedulizer is a single-page application that allows users to view an

We don’t suggest using `pnpm eject` (see [this Stack Overflow post](https://stackoverflow.com/questions/48308936/what-does-this-react-scripts-eject-command-do)).

## Directories

- `csv/` contains sample course schedules in `.csv` and `.xlsx` formats. The files include new and old formats, which are not compatible.

- `public/` contains every image or other “artful” content used in the client app.

- `src/` contains all source files that build the client application.

- `src/assets` contains images used by the application
- `src/components` contains all React components in the project. Every component resides within a folder, that is its exported name written in `PascalCase`. When a folder is used for additional storage, such as `pages/` (for the apps views) and `reuseables/` (for components used in many other components), they are written in `camelCase`. Each component folder contains `index.ts`, `ComponentName.tsx`, `ComponentName.test.tsx`, and `ComponentName.scss`. Sometimes they will contain a `componentNameService.ts` or additional folders for children components. Note that `pages/HarmonyPage` has been removed from the UI.
- `src/data` contains constraints on times within which classes may start. These constraints are run in R; see Prof. Pruim for details.
- `src/styles` contains global styles using [Sass](https://sass-lang.com/) in SCSS form.
- `src/types` contains module type declares for NPM packages that do not ship with types.
- `src/utilities` contains helper functions, logic, interfaces, constants, services, and all other code-related things that are not React Components.
- `utilities/contexts` establishes the global state of the app.
- `utilities/helpers` provides various helpful functions for development use.
- `utilities/hooks` provides hooks for interacting with the schedule.
- `utilities/interfaces` defines the app interfaces and data interfaces.
- `utilities/reducers` provides functions to perform multiple setState updates at once that depend on each other.
- `utilities/services` provides services, e.g., for detecting conflict, calculating faculty load, etc.

- `.tsconfig` has been modified to allow for: [barrelling](https://basarat.gitbook.io/typescript/main-1/barrel), which combines the exports from each module in a directory into a single `index.ts` module, and [absolute imports](https://medium.com/geekculture/making-life-easier-with-absolute-imports-react-in-javascript-and-typescript-bbdab8a8a3a1), which allows for cleaner imports.
## Workflows

- `index.tsx` is the entry point into the React application.
You can manage the Node and pnpm versions manually, but we suggest specifying them using Node [Corepack](https://nodejs.org/api/corepack.html), and [pnpm](https://pnpm.io/). To do this,

[Husky](https://typicode.github.io/husky/#/) is used with [Lint Staged](https://github.com/okonet/lint-staged) to format all code to the ESLint rules when they are committed. This insures that changes pushed are not confused by changing syntax or code style.
1. [Install a recent version of node](https://nodejs.org/en/learn/getting-started/how-to-install-nodejs), e.g., using [nvm](https://github.com/nvm-sh/nvm).
1. Setup your environment by running `corepack enable pnpm`, which enables Corepack, bundled with Node as an “experimental”, non-default feature, with pnpm.

## Workflows
With this done, Corepack will auto-install the pnpm version specified in [`package.json`](package.json) (as `packagemanager`), and pnpm will auto-install the Node version specified in [`.npmrc`](.npmrc) (as [`use-node-version`](https://pnpm.io/npmrc#use-node-version)).

**To run the Schedulizer locally:**

1. `git checkout` the branch you want to work on (e.g., your dedicated feature branch).
1. `cd client-course-schedulizer` to move into the monorepo’s client application sub-directory.
1. `pnpm install` to install the required NodeJS packages as specified in `package.json`.
- Use the version of NodeJS specified in `.nvmrc`. You can install it manually
using [nvm](https://github.com/nvm-sh/nvm), or let pnpm
[do it automatically](https://pnpm.io/npmrc#use-node-version).
- Use the version of pnpm specified in `package.json`. You can [install it manually](https://pnpm.io/installation), or, if enabled,
[Corepack](https://nodejs.org/api/corepack.html) will do it automatically.
1. `pnpm start` to run the website on [localhost:3000](http://localhost:3000).

Edits you make to the code will automatically update the website in your browser.
Expand All @@ -76,24 +53,51 @@ Edits you make to the code will automatically update the website in your browser

GitHub is configured to require on review by a team member for all merges into the `develop` branch. When the merge is approved:

1. The continuous integration (CI) workflow specified in [`.github/workflows/ci.yml`](.github/workflows/ci.yml) will automatically run the tests. The tests are specified in `src/**/*.test.*` files and run using [Jest](https://jestjs.io/).
1. The continuous integration (CI) workflow specified in [`../.github/workflows/ci.yml`](../.github/workflows/ci.yml) will automatically run the tests. The tests are specified in `src/**/*.test.*` files and run using [Jest](https://jestjs.io/).
1. If the tests pass, the CI workflow will automatically merge your PR into the `develop` branch.
1. When it detects new code in the `develop` branch, [Netlify](https://www.netlify.com/) will automatically deploy the new version of the `develop` branch to the development server. See the:
- Development server dashboard at: [https://app.netlify.com/sites/sharp-babbage-a45ee2](https://app.netlify.com/sites/sharp-babbage-a45ee2)
- Running application at: [https://sharp-babbage-a45ee2.netlify.app](https://sharp-babbage-a45ee2.netlify.app)

**To deploy a new production version of the Schedulizer to the production server:**

Follow the same workflow as for the development server, but merge your feature branch into the `production` branch. Note that:
Follow the same workflow as for the development server, but merge the `develop` branch into the `production` branch. Note that:

- The `production` branch is protected and requires a review by a team member.
- Merging to the `production` branch will trigger both the CI workflow (discussed above) and the Deploy workflow specified in [`.github/workflows/deploy.yml`](.github/workflows/deploy.yml). You can test this locally by running:
- The `production` branch is also requires a review by a team member.
- Merging into the `production` branch will trigger both the CI workflow (discussed above) and the Deploy workflow specified in [`../.github/workflows/deploy.yml`](../.github/workflows/deploy.yml). You can test this locally by running:
- `pnpm start` to manually test your changes.
- `pnpm test` to run the tests.
- `pnpm build` to build the application deployment bundle.
- The deploy workflow auto-deploys the new version of the `production` branch on GitHub Pages, see: [https://senior-knights.github.io/course-schedulizer](https://senior-knights.github.io/course-schedulizer).

**TODO**: The deploy script has not been tested with pnpm yet. Fix this before merging into `production`.
**TODO**: The deploy script has not yet been tested with pnpm. Fix this before merging into `production`.

## Directories

- `csv/` contains sample course schedules in `.csv` and `.xlsx` formats. The files include new and old formats, which are not compatible.

- `public/` contains every image or other “artful” content used in the client app.

- `src/` contains all source files that build the client application.

- `src/assets` contains images used by the application
- `src/components` contains all React components in the project. Every component resides within a folder, that is its exported name written in `PascalCase`. When a folder is used for additional storage, such as `pages/` (for the apps views) and `reuseables/` (for components used in many other components), they are written in `camelCase`. Each component folder contains `index.ts`, `ComponentName.tsx`, `ComponentName.test.tsx`, and `ComponentName.scss`. Sometimes they will contain a `componentNameService.ts` or additional folders for children components. Note that `pages/HarmonyPage` has been removed from the UI.
- `src/data` contains constraints on times within which classes may start. These constraints are run in R; see Prof. Pruim for details.
- `src/styles` contains global styles using [Sass](https://sass-lang.com/) in SCSS form.
- `src/types` contains module type declares for NPM packages that do not ship with types.
- `src/utilities` contains helper functions, logic, interfaces, constants, services, and all other code-related things that are not React Components.
- `utilities/contexts` establishes the global state of the app.
- `utilities/helpers` provides various helpful functions for development use.
- `utilities/hooks` provides hooks for interacting with the schedule.
- `utilities/interfaces` defines the app interfaces and data interfaces.
- `utilities/reducers` provides functions to perform multiple setState updates at once that depend on each other.
- `utilities/services` provides services, e.g., for detecting conflict, calculating faculty load, etc.

- `.tsconfig` has been modified to allow for: [barrelling](https://basarat.gitbook.io/typescript/main-1/barrel), which combines the exports from each module in a directory into a single `index.ts` module, and [absolute imports](https://medium.com/geekculture/making-life-easier-with-absolute-imports-react-in-javascript-and-typescript-bbdab8a8a3a1), which allows for cleaner imports.

- `index.tsx` is the entry point into the React application.

[Husky](https://typicode.github.io/husky/#/) is used with [Lint Staged](https://github.com/okonet/lint-staged) to format all code to the ESLint rules when they are committed. This insures that changes pushed are not confused by changing syntax or code style.

## Development Philosophy

Expand Down
13 changes: 5 additions & 8 deletions client-course-schedulizer/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,10 +11,7 @@
"start": "react-scripts start",
"test": "react-scripts test"
},
"packageManager": "[email protected]",
"engines": {
"node": "20"
},
"packageManager": "[email protected]",
"husky": {
"hooks": {}
},
Expand Down Expand Up @@ -51,11 +48,11 @@
"@material-ui/icons": "^4.11.3",
"@material-ui/lab": "^4.0.0-alpha.61",
"@mui/icons-material": "^5.15.14",
"@mui/lab": "5.0.0-alpha.169",
"@mui/lab": "^5.0.0-alpha.169",
"@mui/material": "^5.15.14",
"@mui/styled-engine": "^5.15.14",
"@mui/styles": "^5.15.14",
"@testing-library/jest-dom": "4.2.4",
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^14.2.1",
"@testing-library/user-event": "^14.5.2",
"@types/testing-library__react": "^10.2.0",
Expand Down Expand Up @@ -85,12 +82,12 @@
"sass": "^1.71.1",
"xlsx": "^0.18.5",
"yup": "^1.3.3",
"zustand": "^3.4.1"
"zustand": "~3.4.1"
},
"devDependencies": {
"@types/isomorphic-fetch": "^0.0.39",
"@types/jest": "^24.9.1",
"@types/lodash": "^4.14.165",
"@types/lodash": "4.14.165",
"@types/node": "^12.12.62",
"@types/object-hash": "^1.3.4",
"@types/papaparse": "^5.2.4",
Expand Down
Loading

0 comments on commit 2ebbb15

Please sign in to comment.