Skip to content

Commit

Permalink
Karina/wmdp 162 update styles (#62)
Browse files Browse the repository at this point in the history
* en: update copy for header and index page

* Layout: update header to match new design

* remove depracated font imports

* Karina/wmdp 109 welcome pages (#27)

* Initial commit.

* Create initial folder structure (#1)

* yarn create next-app --typescript

* clean up auto-generated pages, public and styles

* next.config.js: setup i18n locale for internationalization

* next.config.js: add code comment re: internationalization

* add html tags for VO

* Update app/styles/Home.module.css

update stickcy nav

Co-authored-by: Rocket <rocketnova@users.noreply.github.com>

* Update app/README.md

Co-authored-by: Rocket <rocketnova@users.noreply.github.com>

* Update app/README.md

Co-authored-by: Rocket <rocketnova@users.noreply.github.com>

* tsconfig: target es6

* add babelec

* add __mocks__ with mock styles for testing

* -test: add first jest test and snapshot test for Home page
- add jest.setup.js to require jest-dom

* - add jest.config.js
- package.json: add react testing library, babel and jest dependencies
- add first test
- update jsx
- yarn.lock updated with new packages

* .eslintrc.json: extend nava eslint config

* package.json: add eslint-config-nava

* add ts check to all js files

* add dev note regarding incremental type checking

* add TS-specific eslint

* update read me with development typecheck and linting tips

* update read me with development typecheck and linting tips

* add and setup prettier

* WMDP-26 Set Up PR Template (#2)

Changes
added a .github folder which should store all github related processes (e.g. github actions, and templates)
added PR template
Context for reviewers
We want to establish a consistent pull request template that we’ll use.

* Update app/.babelrc

Co-authored-by: Rocket <rocketnova@users.noreply.github.com>

* Update app/package.json

Co-authored-by: Rocket <rocketnova@users.noreply.github.com>

* add eslintrc.js

* add stories dir and examples

* .eslint.js: prettier updates to eslint file

* add storybook dependencies

* Fix pull request template conflict (#8)

- Fixed the filename case conflict between `.github/PULL_REQUEST_TEMPLATE.md` and `.github/pull_request_template.md`
- Updated the pull request template to be slightly more generic

* Karina/wmdp 61 initial nextjs setup (#4)

* yarn create next-app --typescript

* clean up auto-generated pages, public and styles

* next.config.js: setup i18n locale for internationalization

* next.config.js: add code comment re: internationalization

* add html tags for VO

* Update app/styles/Home.module.css

update stickcy nav

Co-authored-by: Rocket <rocketnova@users.noreply.github.com>

* Update app/README.md

Co-authored-by: Rocket <rocketnova@users.noreply.github.com>

* Update app/README.md

Co-authored-by: Rocket <rocketnova@users.noreply.github.com>

* tsconfig: target es6

Co-authored-by: Rocket <rocketnova@users.noreply.github.com>

* add testRegex and testPathIgnorePatterns

* setup jest-axe

* add new lines add end of files

* Karina/wmdp 35 setup test suite (#5)

* yarn create next-app --typescript

* clean up auto-generated pages, public and styles

* next.config.js: setup i18n locale for internationalization

* next.config.js: add code comment re: internationalization

* add html tags for VO

* Update app/styles/Home.module.css

update stickcy nav

Co-authored-by: Rocket <rocketnova@users.noreply.github.com>

* Update app/README.md

Co-authored-by: Rocket <rocketnova@users.noreply.github.com>

* Update app/README.md

Co-authored-by: Rocket <rocketnova@users.noreply.github.com>

* tsconfig: target es6

* add babelec

* add __mocks__ with mock styles for testing

* -test: add first jest test and snapshot test for Home page
- add jest.setup.js to require jest-dom

* - add jest.config.js
- package.json: add react testing library, babel and jest dependencies
- add first test
- update jsx
- yarn.lock updated with new packages

* Update app/.babelrc

Co-authored-by: Rocket <rocketnova@users.noreply.github.com>

* Update app/package.json

Co-authored-by: Rocket <rocketnova@users.noreply.github.com>

* add testRegex and testPathIgnorePatterns

* setup jest-axe

* add new lines add end of files

* jest.config.js: add inline comments

* README: add tsconfig documentation

* README: add test script documentation

Co-authored-by: Rocket <rocketnova@users.noreply.github.com>

* Karina/wmdp 33 linter typechecker (#6)

* yarn create next-app --typescript

* clean up auto-generated pages, public and styles

* next.config.js: setup i18n locale for internationalization

* next.config.js: add code comment re: internationalization

* add html tags for VO

* Update app/styles/Home.module.css

update stickcy nav

Co-authored-by: Rocket <rocketnova@users.noreply.github.com>

* Update app/README.md

Co-authored-by: Rocket <rocketnova@users.noreply.github.com>

* Update app/README.md

Co-authored-by: Rocket <rocketnova@users.noreply.github.com>

* tsconfig: target es6

* add babelec

* add __mocks__ with mock styles for testing

* -test: add first jest test and snapshot test for Home page
- add jest.setup.js to require jest-dom

* - add jest.config.js
- package.json: add react testing library, babel and jest dependencies
- add first test
- update jsx
- yarn.lock updated with new packages

* .eslintrc.json: extend nava eslint config

* package.json: add eslint-config-nava

* add ts check to all js files

* add dev note regarding incremental type checking

* add TS-specific eslint

* update read me with development typecheck and linting tips

* update read me with development typecheck and linting tips

* add and setup prettier

* Update app/.babelrc

Co-authored-by: Rocket <rocketnova@users.noreply.github.com>

* Update app/package.json

Co-authored-by: Rocket <rocketnova@users.noreply.github.com>

* Update package.json

add scripts to package.json

* run prettier

* add checkJs to tsconfig, remove duplicate code from js files

* add typescript parser and implement type information with linting

* eslintrc: add prettier recommended plugin

* preettierrc: add trailing comma check, remove redundant code

* README: add auto-generated modified note

* Update app/README.md

Co-authored-by: Rocket <rocketnova@users.noreply.github.com>

* add testRegex and testPathIgnorePatterns

* re-add localesubpaths to next.config.js

* tsconfig.json: remove inline comment

* README: add docimentation for eslint and tsconfig

* setup jest-axe

* add new lines add end of files

* jest.config.js: add inline comments

* README - add documentation for test

* README: add tsconfig documentation

* README: add test script documentation

* README: add documentation for dependencies

* yarn.lock

* Update app/__mocks__/styleMock.js

Co-authored-by: Rocket <rocketnova@users.noreply.github.com>

Co-authored-by: Rocket <rocketnova@users.noreply.github.com>

* fix eslint errors

* WIP

* Create a separate tsconfig file to specify jsx mode for ts-jest vs next.js (#9)

Create a separate tsconfig file to specify jsx mode.

Next.js requires the typescript jsx mode to be `preserve`, but ts-jest
needs it to be a flavor of `react`. See:

- https://www.typescriptlang.org/docs/handbook/jsx.html
- https://kulshekhar.github.io/ts-jest/docs/getting-started/options/tsconfig
- kulshekhar/ts-jest#63 (comment)
- vercel/next.js#19155 (reply in thread)

* add home page story and uswds dependency

* update dependencies

* add uswds

* support sass in storybook

* fix eslint errors (#10)

* fix eslint errors

* update prettier and linting rules so that they're compatible

* add new eslint rule to README

* WIP - debugging uswds storybook with Rocket

* add storybook static to git ignore

* Remove storybook-static.

* Dockerize the application.

* Create LICENSE.md using Apache 2.0 (#13)

* Dockerize the application (#12)

* WIP.

* Both next.js and storybook working.

* USWDS 3.x instructions require uswds-compile. Can't use next.js or storybook sass without more unknown glue.

* Clean up unnecessary WIP stuff.

* Refactor to use same naming convention for all uswds assets. Add comments.

* Update dockerization to better support local development.

* Remove extraneous yarn command.

* Run formatter.

* Write some brief documentation.

* Fix typo.

* setup CI for NextJS template app (#16)

* Let prettier format project files.

* Run prettier via yarn format.

* Let prettier format project files (#17)

* yarn: add next.intl

* add messages directory with english and spanish json messages pages

* .storybook/preview: set up next-intl with storybook

* next.config: update next local config for itnernationalization

* app.tsx: add next-intl local/messages provider for internationalization

* tests: add nextintlprovider to jest tests, update snapshots

* update gulp

* create src directories -- move src folders

* add tests and stories for Layout and Index

* add scss loading for storybook

* run linter and prettier

* run prettier

* run prettier and lint

* update yarn.lock

* add prettier alphabetize imports -- add storybook-static to prettier ignore

* show compile warnigns

* remove space

* add container background

* WIP: successfully leveraging built-in nextjs sass compiling.

* Working storybook + nextjs + sass + uswds build.

- Drops support for [CSS
  modules](https://nextjs.org/docs/basic-features/built-in-css-support#adding-component-level-css)
- Drops requirement for Gulp and USWDS compile
- Requires postcss and postcss-loader, which storybook says should be
  deprecated

* wip

* delete deprecated flies, add yarn.lock

* add welcome and eligibility page

* update ci.yml (#19)

* Run prettier.

* Update packages.

* Simplify docker. Update README. Use postinstalll script.

* Fix postinstall command.

* Tell prettier to ignore USWDS static assets.

* Disable nextjs telemetry.

* refactor

* jest

* test wip

* Add -p flag to creating public dir so mkdir doesn't error.

* Change comment style so we don't get unnecessary indents.

* Refactor which files storybook recognizes as stories.

* Use storybook lazy compilation.

* Remove no longer needed gulpfile.

* Unpin package versions; use at least instead.

* Remove no longer needed css import.

* add stories

* run prettier, no trailing comma

* correct linting errors

* Remove storybook lazy compilation. Not working.

* Remove non-essential storybook dependencies.

* Don't bind mount node_modules.

* delete depracated code

* host fonts locally for easier sb and jest setup and wider browser support

* support tsconfig module imports in jest and sb

* Switch base image to alpine.

* Run yarn format.

* Update README about node_modules in docker.

* setup next-i18next in project, jest, and sb -- todo: get sb globe to render

* Run formatter.

* Streamline docker build even more.

* Remove no longer installed storybook addons.

* Remove storybook-addon-i18next.

* Run formatter.

* Try storybook-i18n addon. Not quite right.

* Match eslint rule for space before parens to rule as described in README.

* Match prettier and eslint for trailing commas.

* Use the storybook-react-i18next addon for internationalization in storybook.

* Remove wip test of fs package.

* Restore homepage to previous state.

* Document i18n config.

* add storybook-static to git ignore

* add import order to prettier

* add src/ - move pages to src

* app- update import

* public: update translations

* _app.tsx: add Layout to app

* add components dir and Layout component

* index: update deprecated index layout

* update template styles

* update index story

* apply title class to template title

* update tests and stories

* run prettier - add prettier-plugin-sort-imports

* run eslint - add JSX global to linter

* fix translation

* yarn format and delete dead code

* run lint

* Copy over application-template-nextjs at ca2cc15.

Install and configure storybook, sass, and USWDS 3.0 [#15](navapbc/template-application-nextjs#15)

- Install and configure storybook
- Create the first story
- Install and configure [USWDS 3.0](https://designsystem.digital.gov/) as the design system
- Modify `Dockerfile` and `docker-compose.yml` to support USWDS and storybook
- Gitignore storybook, uswds assets, and compiled css
- Prettier ignore uswds assets
- Use postinstall hook to copy uswds static assets
- Stop using CSS modules
- Update some package dependencies
- Switch Docker base image to use alpine for increased speed

* Copy over application-template-nextjs at cd06ba6.

Setup i18n for next.js, jest, and storybook [#24](navapbc/template-application-nextjs#24)

- Install and configure [next-i18next](https://github.com/i18next/next-i18next) for Next.js internationalization
- Move next.js i18n config out of `next.config.js` and into `next-i18next.config.js`
- Modify `pages/_app.tsx` and `pages/index.tsx` to support i18n
- Move jest i18n config into `/tests/jest-i18n.ts`
- Install and configure [storybook-react-i18next](https://storybook.js.org/addons/storybook-react-i18next) for storybook internationalization
- Add support for `<em>` tags in react-i18next in both next.js and storybook.

Extras:
- Remove `space-before-function-paren` eslint rule
- Update eslint to follow prettier's rules
- Rename `test` dir to `tests` (plural)

* Copy over application-template-nextjs at cfe7c3d.

Adds a src dir, layout component, alphabetizes imports [#26](navapbc/template-application-nextjs#26)

- adds `src/` directory for project's webpack compilable JS and JSON files (this update is supported out of the box by [NextJS](https://nextjs.org/docs/advanced-features/src-directory) and pfml also uses this folder structure)
   - moves `api/`, `pages/` and `messages/` directories to `src/`
   - creates `components` directory and adds template `Layout` component

Extras:
- sets up prettier alphabetize imports
- adds storybook-static to prettier ignore
- sets $theme-show-compile-warnings to true for uswds

* Copy over application-template-nextjs at 0a349fa.

Enable dependabot version updates and codeql security scanning as CI jobs [#29](navapbc/template-application-nextjs#29)

- Enable and configure [dependabot version updates](https://docs.github.com/en/code-security/dependabot/dependabot-version-updates/configuring-dependabot-version-updates)
- Enable and configure [codeql security scanning](https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/about-code-scanning)

Note: These features were already enabled in this repo, so this commit
is just bringing in stylistic updates to make the two repos identical.

* Copy over application-template-nextjs at f59d2ac.

 Add layout styles missing from PR #26.
[#37](navapbc/template-application-nextjs#37)

* fix tests

* update tests

* wip

* fix tests

* run lint and format

* address rocket's comments

* update yarn.lock

* update eslint.json

* update eslintrc

* fix bug

Co-authored-by: Rocket ! <rocketnova@users.noreply.github.com>
Co-authored-by: Alsia Plybeah <alsia@navapbc.com>
Co-authored-by: Shawn VanderJagt <91338100+shawnvanderjagt@users.noreply.github.com>

* Karina/wmdp 116 contact info (#32)

* Initial commit.

* Create initial folder structure (#1)

* yarn create next-app --typescript

* clean up auto-generated pages, public and styles

* next.config.js: setup i18n locale for internationalization

* next.config.js: add code comment re: internationalization

* add html tags for VO

* Update app/styles/Home.module.css

update stickcy nav

Co-authored-by: Rocket <rocketnova@users.noreply.github.com>

* Update app/README.md

Co-authored-by: Rocket <rocketnova@users.noreply.github.com>

* Update app/README.md

Co-authored-by: Rocket <rocketnova@users.noreply.github.com>

* tsconfig: target es6

* add babelec

* add __mocks__ with mock styles for testing

* -test: add first jest test and snapshot test for Home page
- add jest.setup.js to require jest-dom

* - add jest.config.js
- package.json: add react testing library, babel and jest dependencies
- add first test
- update jsx
- yarn.lock updated with new packages

* .eslintrc.json: extend nava eslint config

* package.json: add eslint-config-nava

* add ts check to all js files

* add dev note regarding incremental type checking

* add TS-specific eslint

* update read me with development typecheck and linting tips

* update read me with development typecheck and linting tips

* add and setup prettier

* WMDP-26 Set Up PR Template (#2)

Changes
added a .github folder which should store all github related processes (e.g. github actions, and templates)
added PR template
Context for reviewers
We want to establish a consistent pull request template that we’ll use.

* Update app/.babelrc

Co-authored-by: Rocket <rocketnova@users.noreply.github.com>

* Update app/package.json

Co-authored-by: Rocket <rocketnova@users.noreply.github.com>

* add eslintrc.js

* add stories dir and examples

* .eslint.js: prettier updates to eslint file

* add storybook dependencies

* Fix pull request template conflict (#8)

- Fixed the filename case conflict between `.github/PULL_REQUEST_TEMPLATE.md` and `.github/pull_request_template.md`
- Updated the pull request template to be slightly more generic

* Karina/wmdp 61 initial nextjs setup (#4)

* yarn create next-app --typescript

* clean up auto-generated pages, public and styles

* next.config.js: setup i18n locale for internationalization

* next.config.js: add code comment re: internationalization

* add html tags for VO

* Update app/styles/Home.module.css

update stickcy nav

Co-authored-by: Rocket <rocketnova@users.noreply.github.com>

* Update app/README.md

Co-authored-by: Rocket <rocketnova@users.noreply.github.com>

* Update app/README.md

Co-authored-by: Rocket <rocketnova@users.noreply.github.com>

* tsconfig: target es6

Co-authored-by: Rocket <rocketnova@users.noreply.github.com>

* add testRegex and testPathIgnorePatterns

* setup jest-axe

* add new lines add end of files

* Karina/wmdp 35 setup test suite (#5)

* yarn create next-app --typescript

* clean up auto-generated pages, public and styles

* next.config.js: setup i18n locale for internationalization

* next.config.js: add code comment re: internationalization

* add html tags for VO

* Update app/styles/Home.module.css

update stickcy nav

Co-authored-by: Rocket <rocketnova@users.noreply.github.com>

* Update app/README.md

Co-authored-by: Rocket <rocketnova@users.noreply.github.com>

* Update app/README.md

Co-authored-by: Rocket <rocketnova@users.noreply.github.com>

* tsconfig: target es6

* add babelec

* add __mocks__ with mock styles for testing

* -test: add first jest test and snapshot test for Home page
- add jest.setup.js to require jest-dom

* - add jest.config.js
- package.json: add react testing library, babel and jest dependencies
- add first test
- update jsx
- yarn.lock updated with new packages

* Update app/.babelrc

Co-authored-by: Rocket <rocketnova@users.noreply.github.com>

* Update app/package.json

Co-authored-by: Rocket <rocketnova@users.noreply.github.com>

* add testRegex and testPathIgnorePatterns

* setup jest-axe

* add new lines add end of files

* jest.config.js: add inline comments

* README: add tsconfig documentation

* README: add test script documentation

Co-authored-by: Rocket <rocketnova@users.noreply.github.com>

* Karina/wmdp 33 linter typechecker (#6)

* yarn create next-app --typescript

* clean up auto-generated pages, public and styles

* next.config.js: setup i18n locale for internationalization

* next.config.js: add code comment re: internationalization

* add html tags for VO

* Update app/styles/Home.module.css

update stickcy nav

Co-authored-by: Rocket <rocketnova@users.noreply.github.com>

* Update app/README.md

Co-authored-by: Rocket <rocketnova@users.noreply.github.com>

* Update app/README.md

Co-authored-by: Rocket <rocketnova@users.noreply.github.com>

* tsconfig: target es6

* add babelec

* add __mocks__ with mock styles for testing

* -test: add first jest test and snapshot test for Home page
- add jest.setup.js to require jest-dom

* - add jest.config.js
- package.json: add react testing library, babel and jest dependencies
- add first test
- update jsx
- yarn.lock updated with new packages

* .eslintrc.json: extend nava eslint config

* package.json: add eslint-config-nava

* add ts check to all js files

* add dev note regarding incremental type checking

* add TS-specific eslint

* update read me with development typecheck and linting tips

* update read me with development typecheck and linting tips

* add and setup prettier

* Update app/.babelrc

Co-authored-by: Rocket <rocketnova@users.noreply.github.com>

* Update app/package.json

Co-authored-by: Rocket <rocketnova@users.noreply.github.com>

* Update package.json

add scripts to package.json

* run prettier

* add checkJs to tsconfig, remove duplicate code from js files

* add typescript parser and implement type information with linting

* eslintrc: add prettier recommended plugin

* preettierrc: add trailing comma check, remove redundant code

* README: add auto-generated modified note

* Update app/README.md

Co-authored-by: Rocket <rocketnova@users.noreply.github.com>

* add testRegex and testPathIgnorePatterns

* re-add localesubpaths to next.config.js

* tsconfig.json: remove inline comment

* README: add docimentation for eslint and tsconfig

* setup jest-axe

* add new lines add end of files

* jest.config.js: add inline comments

* README - add documentation for test

* README: add tsconfig documentation

* README: add test script documentation

* README: add documentation for dependencies

* yarn.lock

* Update app/__mocks__/styleMock.js

Co-authored-by: Rocket <rocketnova@users.noreply.github.com>

Co-authored-by: Rocket <rocketnova@users.noreply.github.com>

* fix eslint errors

* WIP

* Create a separate tsconfig file to specify jsx mode for ts-jest vs next.js (#9)

Create a separate tsconfig file to specify jsx mode.

Next.js requires the typescript jsx mode to be `preserve`, but ts-jest
needs it to be a flavor of `react`. See:

- https://www.typescriptlang.org/docs/handbook/jsx.html
- https://kulshekhar.github.io/ts-jest/docs/getting-started/options/tsconfig
- kulshekhar/ts-jest#63 (comment)
- vercel/next.js#19155 (reply in thread)

* add home page story and uswds dependency

* update dependencies

* add uswds

* support sass in storybook

* fix eslint errors (#10)

* fix eslint errors

* update prettier and linting rules so that they're compatible

* add new eslint rule to README

* WIP - debugging uswds storybook with Rocket

* add storybook static to git ignore

* Remove storybook-static.

* Dockerize the application.

* Create LICENSE.md using Apache 2.0 (#13)

* Dockerize the application (#12)

* WIP.

* Both next.js and storybook working.

* USWDS 3.x instructions require uswds-compile. Can't use next.js or storybook sass without more unknown glue.

* Clean up unnecessary WIP stuff.

* Refactor to use same naming convention for all uswds assets. Add comments.

* Update dockerization to better support local development.

* Remove extraneous yarn command.

* Run formatter.

* Write some brief documentation.

* Fix typo.

* setup CI for NextJS template app (#16)

* Let prettier format project files.

* Run prettier via yarn format.

* Let prettier format project files (#17)

* yarn: add next.intl

* add messages directory with english and spanish json messages pages

* .storybook/preview: set up next-intl with storybook

* next.config: update next local config for itnernationalization

* app.tsx: add next-intl local/messages provider for internationalization

* tests: add nextintlprovider to jest tests, update snapshots

* update gulp

* create src directories -- move src folders

* add tests and stories for Layout and Index

* add scss loading for storybook

* run linter and prettier

* run prettier

* run prettier and lint

* update yarn.lock

* add prettier alphabetize imports -- add storybook-static to prettier ignore

* show compile warnigns

* remove space

* add container background

* WIP: successfully leveraging built-in nextjs sass compiling.

* Working storybook + nextjs + sass + uswds build.

- Drops support for [CSS
  modules](https://nextjs.org/docs/basic-features/built-in-css-support#adding-component-level-css)
- Drops requirement for Gulp and USWDS compile
- Requires postcss and postcss-loader, which storybook says should be
  deprecated

* wip

* delete deprecated flies, add yarn.lock

* add welcome and eligibility page

* update ci.yml (#19)

* Run prettier.

* Update packages.

* Simplify docker. Update README. Use postinstalll script.

* Fix postinstall command.

* Tell prettier to ignore USWDS static assets.

* Disable nextjs telemetry.

* refactor

* jest

* test wip

* Add -p flag to creating public dir so mkdir doesn't error.

* Change comment style so we don't get unnecessary indents.

* Refactor which files storybook recognizes as stories.

* Use storybook lazy compilation.

* Remove no longer needed gulpfile.

* Unpin package versions; use at least instead.

* Remove no longer needed css import.

* add stories

* run prettier, no trailing comma

* correct linting errors

* Remove storybook lazy compilation. Not working.

* Remove non-essential storybook dependencies.

* Don't bind mount node_modules.

* delete depracated code

* host fonts locally for easier sb and jest setup and wider browser support

* support tsconfig module imports in jest and sb

* Switch base image to alpine.

* Run yarn format.

* Update README about node_modules in docker.

* setup next-i18next in project, jest, and sb -- todo: get sb globe to render

* Run formatter.

* Streamline docker build even more.

* Remove no longer installed storybook addons.

* Remove storybook-addon-i18next.

* Run formatter.

* Try storybook-i18n addon. Not quite right.

* Match eslint rule for space before parens to rule as described in README.

* Match prettier and eslint for trailing commas.

* Use the storybook-react-i18next addon for internationalization in storybook.

* Remove wip test of fs package.

* Restore homepage to previous state.

* Document i18n config.

* add storybook-static to git ignore

* add import order to prettier

* add src/ - move pages to src

* app- update import

* public: update translations

* _app.tsx: add Layout to app

* add components dir and Layout component

* index: update deprecated index layout

* update template styles

* update index story

* apply title class to template title

* update tests and stories

* run prettier - add prettier-plugin-sort-imports

* run eslint - add JSX global to linter

* fix translation

* yarn format and delete dead code

* run lint

* Copy over application-template-nextjs at ca2cc15.

Install and configure storybook, sass, and USWDS 3.0 [#15](navapbc/template-application-nextjs#15)

- Install and configure storybook
- Create the first story
- Install and configure [USWDS 3.0](https://designsystem.digital.gov/) as the design system
- Modify `Dockerfile` and `docker-compose.yml` to support USWDS and storybook
- Gitignore storybook, uswds assets, and compiled css
- Prettier ignore uswds assets
- Use postinstall hook to copy uswds static assets
- Stop using CSS modules
- Update some package dependencies
- Switch Docker base image to use alpine for increased speed

* Copy over application-template-nextjs at cd06ba6.

Setup i18n for next.js, jest, and storybook [#24](navapbc/template-application-nextjs#24)

- Install and configure [next-i18next](https://github.com/i18next/next-i18next) for Next.js internationalization
- Move next.js i18n config out of `next.config.js` and into `next-i18next.config.js`
- Modify `pages/_app.tsx` and `pages/index.tsx` to support i18n
- Move jest i18n config into `/tests/jest-i18n.ts`
- Install and configure [storybook-react-i18next](https://storybook.js.org/addons/storybook-react-i18next) for storybook internationalization
- Add support for `<em>` tags in react-i18next in both next.js and storybook.

Extras:
- Remove `space-before-function-paren` eslint rule
- Update eslint to follow prettier's rules
- Rename `test` dir to `tests` (plural)

* Copy over application-template-nextjs at cfe7c3d.

Adds a src dir, layout component, alphabetizes imports [#26](navapbc/template-application-nextjs#26)

- adds `src/` directory for project's webpack compilable JS and JSON files (this update is supported out of the box by [NextJS](https://nextjs.org/docs/advanced-features/src-directory) and pfml also uses this folder structure)
   - moves `api/`, `pages/` and `messages/` directories to `src/`
   - creates `components` directory and adds template `Layout` component

Extras:
- sets up prettier alphabetize imports
- adds storybook-static to prettier ignore
- sets $theme-show-compile-warnings to true for uswds

* Copy over application-template-nextjs at 0a349fa.

Enable dependabot version updates and codeql security scanning as CI jobs [#29](navapbc/template-application-nextjs#29)

- Enable and configure [dependabot version updates](https://docs.github.com/en/code-security/dependabot/dependabot-version-updates/configuring-dependabot-version-updates)
- Enable and configure [codeql security scanning](https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/about-code-scanning)

Note: These features were already enabled in this repo, so this commit
is just bringing in stylistic updates to make the two repos identical.

* en/common.json: add contact questions

* add contact page

* remove dead code

* contact: add contact page basic styling and copy

* create TextInput component -- add tests and storybook for contact page and textinput component

* Copy over application-template-nextjs at f59d2ac.

 Add layout styles missing from PR #26.
[#37](navapbc/template-application-nextjs#37)

* fix tests

* update tests

* wip

* fix tests

* run lint and format

* address rocket's comments

* update yarn.lock

* update eslint.json

* update eslintrc

* update textinput types for build

* run prettier

* add number-format

* fix bug

* yarn format

Co-authored-by: Rocket ! <rocketnova@users.noreply.github.com>
Co-authored-by: Alsia Plybeah <alsia@navapbc.com>
Co-authored-by: Shawn VanderJagt <91338100+shawnvanderjagt@users.noreply.github.com>

* Configure chromatic to support UAT (#41)

- Install chromatic as a dev dependency
- Configure chromatic as a CI job
- Configure chromatic to be run during local development

* Setup precommit hook (#42)

- Install husky as a dev dependency
- Configure husky to run linting and tests as a git precommit hook
- Have prettier ignore `app/coverage` files
- Rename `ts:check` to `ts-check` to match other script naming conventions

* Update dependencies. Closes #39, #40, #43, #44, #45. (#46)

* update tests

* add accordion storybook test

* Karina/wmdp 119 alternate benefits (#63)

* add jest tests for conditional alternate page routing from eligibility page

* add alternate jest test

* update styles

Co-authored-by: Rocket ! <rocketnova@users.noreply.github.com>
Co-authored-by: Alsia Plybeah <alsia@navapbc.com>
Co-authored-by: Shawn VanderJagt <91338100+shawnvanderjagt@users.noreply.github.com>
  • Loading branch information
4 people committed Aug 18, 2022
1 parent 4cb9a3f commit 4b325d1
Show file tree
Hide file tree
Showing 46 changed files with 930 additions and 591 deletions.
34 changes: 34 additions & 0 deletions .github/workflows/chromatic.yml
@@ -0,0 +1,34 @@
# See https://www.chromatic.com/docs/github-actions

# Workflow name
name: 'Chromatic'

# Event for the workflow
on:
push:
branches:
- main

# List of jobs
jobs:
chromatic-deployment:
# Operating System
runs-on: ubuntu-latest
# Job steps
steps:
- uses: actions/checkout@v1
- name: Install dependencies
run: yarn
# Installs chromatic in the `app` subdirectory
working-directory: app
# 👇 Adds Chromatic as a step in the workflow
- name: Publish to Chromatic
uses: chromaui/action@v1
# Chromatic GitHub Action options
with:
# 👇 Chromatic projectToken, refer to the manage page to obtain it.
projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
# Enable zip because USWDS static files are huge
zip: true
# Runs chromatic in the `app` subdirectory
workingDir: app
3 changes: 3 additions & 0 deletions .gitignore
Expand Up @@ -11,3 +11,6 @@ plan.out

# TypeScript
tsconfig.tsbuildinfo

# All .env files
.env
10 changes: 10 additions & 0 deletions README.md
Expand Up @@ -43,3 +43,13 @@ A `docker-compose.yml` has been included to support local development and deploy
To support local development, the `docker-compose.yml` runs the `nextjs` container in development mode (i.e. `yarn dev`) instead of production mode (i.e. `yarn start`). This allows Next.js to do things like hot reload.

The docker-compose file bind mounts `app` on the host machine to `/srv` in the guest machine. However, to ensure that the container uses the correct packages in `node_modules`, we use a named docker volume for the `node_modules` dir. The named volume will take precedence over the bind mount, so that the `node_modules` dir in the guest machine will not be overwritten with the host machine's `node_modules` dir. This also means that if you run `yarn add <package>` on the host machine in development (which will update `yarn.lock`), you'll also need to run `docker-compose exec nextjs yarn install --frozen-lockfile` to update `node_modules` in the guest machine.

## Git Precommit Hook

We use [husky](https://typicode.github.io/husky/#/) to run linting and formatting checks before each commit. Because our husky directory is in `app`, we configured husky with a [custom directory](https://typicode.github.io/husky/#/?id=custom-directory).

One time setup:

1. `cd app`
2. `yarn install`
3. `yarn husky-prepare`
1 change: 1 addition & 0 deletions app/.gitignore
Expand Up @@ -36,6 +36,7 @@ yarn-error.log*

# storybook
/storybook-static
build-storybook.log

# compiled css
/public/css
Expand Down
2 changes: 2 additions & 0 deletions app/.husky/pre-commit
@@ -0,0 +1,2 @@
# This file is run from the same directory as `.git`, so we need to change to the `app` directory to run our husky commands.
cd app && yarn lint && yarn format-check && yarn ts-check
3 changes: 3 additions & 0 deletions app/.prettierignore
Expand Up @@ -5,3 +5,6 @@ storybook-static/

# Ignore USWDS static assets
public/uswds

# Ignore test coverage files
coverage/
29 changes: 28 additions & 1 deletion app/README.md
Expand Up @@ -73,7 +73,7 @@ Note: make sure TypeScript and Javascript Language Features are enabled in VS Co
- `format`: instructs prettier to rewrite files with fixes for formatting violations.
- `format-check`: instructs prettier to only check files for violations without fixing them.
- `test`: runs `jest --ci --coverage`. [--ci option](https://jestjs.io/docs/cli#--ci) is provided to prevent automatic creation of snapshots. This requires Jest to be run with `--updateSnapshot`. [--coverage option](https://jestjs.io/docs/cli#--coverageboolean) is provided to instruct jest to collect and report test coverage in output.
- `ts:check`: runs `tsc --noEmit`. [--noEmit option](https://www.typescriptlang.org/tsconfig#noEmit) is provided to prevent type checker compiler from outputting files.
- `ts-check`: runs `tsc --noEmit`. [--noEmit option](https://www.typescriptlang.org/tsconfig#noEmit) is provided to prevent type checker compiler from outputting files.

#### Dependencies

Expand Down Expand Up @@ -131,3 +131,30 @@ For storybook, we are using [storybook-react-i18next](https://storybook.js.org/a
2. Edit `.storybook/preview.js` and add the language to `locales`. This tells storybook-react-i18next the options that the globe icon dropdown should include.

Note that for storybook to support i18next, we need to to set a few webpack settings to false. See `.storybook/main.js`.

## Chromatic: Saas Storybook

### CI using Github Actions

For this project, we are using [Chromatic](https://chromatic.com) to host our storybook. We've configured a Github Actions CI job to automatically push a storybook build to chromatic whenever a PR has been merged to main. As part of the one time setup, we created a Github Secret with the chromatic project token.

### Local Development

For local development, we can also manually push a storybook build to Chromatic.

One time setup:

1. Log into Chromatic
2. Click on the project and then click on "Manage" in the left sidebar. Click on the "Configure" tab and copy the project token.
3. Create a `app/.env` file and create a `CHROMATIC_PROJECT_TOKEN=<paste project token here>`

To push a build:

1. Run `yarn chromatic`

To access Chromatic storybook builds (such as for UAT):

1. Log into Chromatic
2. Click on the project and then click on "Builds" in the left sidebar
3. Select the build you are interested in. Look at the branch name. For UAT, make sure to select a build for the `main` branch.
4. Click the "View storybook" button on the right
16 changes: 10 additions & 6 deletions app/package.json
Expand Up @@ -5,15 +5,17 @@
"scripts": {
"build": "NEXT_TELEMETRY_DISABLED=1 next build",
"dev": "NEXT_TELEMETRY_DISABLED=1 next dev",
"chromatic": "npx chromatic --project-token $CHROMATIC_PROJECT_TOKEN --zip --exit-zero-on-changes",
"format": "prettier --write '**/*.{js,json,md,mdx,ts,tsx,scss,yaml,yml}' --json-recursive-sort",
"husky-prepare": "cd .. && husky install app/.husky",
"format-check": "prettier --check '**/*.{js,json,md,mdx,ts,tsx,scss,yaml,yml}' --json-recursive-sort",
"lint": "NEXT_TELEMETRY_DISABLED=1 next lint",
"postinstall": "mkdir -p ./public && cp -R ./node_modules/@uswds/uswds/dist/ ./public/uswds/",
"start": "NEXT_TELEMETRY_DISABLED=1 next start",
"storybook": "start-storybook -p 6006",
"storybook-build": "build-storybook",
"test": "jest --ci --coverage",
"ts:check": "tsc --noEmit"
"ts-check": "tsc --noEmit"
},
"dependencies": {
"@uswds/uswds": "^3.0.1",
Expand All @@ -22,7 +24,7 @@
"next-i18next": "^11.0.0",
"react": "^18.1.0",
"react-dom": "^18.1.0",
"react-i18next": "^11.18.0"
"react-i18next": "^11.18.3"
},
"devDependencies": {
"@babel/core": "^7.18.0",
Expand All @@ -38,21 +40,23 @@
"@trivago/prettier-plugin-sort-imports": "^3.2.0",
"@types/jest": "^27.5.1",
"@types/jest-axe": "^3.5.3",
"@types/node": "^17.0.34",
"@types/node": "^18.6.2",
"@types/react": "^18.0.9",
"@types/react-dom": "^18.0.4",
"@types/styled-components": "^5.1.25",
"@types/testing-library__jest-dom": "^5.14.3",
"@types/testing-library__react": "^10.2.0",
"@typescript-eslint/eslint-plugin": "^5.25.0",
"@typescript-eslint/parser": "^5.26.0",
"@typescript-eslint/eslint-plugin": "^5.31.0",
"@typescript-eslint/parser": "^5.31.0",
"babel-jest": "^28.1.0",
"chromatic": "^6.7.1",
"eslint": "^8.15.0",
"eslint-config-nava": "^11.0.0",
"eslint-config-next": "^12.1.6",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-jest": "^26.5.3",
"eslint-plugin-storybook": "^0.5.12",
"eslint-plugin-storybook": "^0.6.1",
"husky": "^8.0.1",
"i18next-browser-languagedetector": "^6.1.4",
"i18next-http-backend": "^1.4.1",
"jest": "^28.1.0",
Expand Down
8 changes: 4 additions & 4 deletions app/public/img/montana-logo.svg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
8 changes: 4 additions & 4 deletions app/public/img/wic-logo.svg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
60 changes: 43 additions & 17 deletions app/public/locales/en/common.json
@@ -1,24 +1,38 @@
{
"Alternate": {
"assistance": "We recommend visiting <0>https://dphhs.mt.gov/Assistance</0> to learn about other assistance in Montana.",
"button": "Return to start page",
"location": "If you are not currently living or working in Montana, visit <0>SignUpWIC.com</0> to find a clinic near you.",
"subHeader": "Given your responses, you are likely not eligible for WIC.",
"title": "Your eligibility"
},
"Clinic": {
"body": "You’ll need to visit a clinic in person to complete a certification appointment for WIC. Choose the clinic you would like to go to during business hours.",
"button": "Select this clinic",
"button": "Select this clinic and continue",
"listTitle": "Choose a clinic from the following list:",
"searchLabel": "Enter your ZIP code to search for a clinic",
"searchLabel": "Enter your residential ZIP code to search for a clinic",
"title": "Choose a clinic"
},
"Contact": {
"button": "Submit",
"firstName": "What's your first name?",
"lastName": "What's your last name?",
"other": "Is there anything else you want to share with us?",
"firstName": "First name",
"header": "Contact information",
"lastName": "Last name",
"name": "What's your name?",
"other": "Is there anything else you'd like to share with us?",
"otherLabel": "Comments, questions, other information",
"phone": "What's the best phone number to reach you at?",
"phoneHelper": "Your chosen WIC clinic will contact you to set up a time for a certification appointment during business hours."
"phoneAlert": "Your chosen WIC clinic will contact you via phone to set up a time for a certification appointment during business hours.",
"phoneLabel": "Phone number"
},
"Eligibility": {
"accordionBody": "There are multiple categories of eligibility, and your answers here help us understand what benefits you and/or your family may qualify for.",
"accordionHeader": "Why are we asking this?",
"baby": "I've had a baby in the past 12 months",
"categorical": "2. Please select all the following that apply to your family:",
"child": "I'm the parent of an infant or child under the age of 5 years old",
"guardian": "I'm the guardian or foster parent of an infant or child under the age of 5 years old",
"header": "Check your eligibility",
"insurance": "Medicaid and/or Healthy Montana Kids Plus",
"loss": "I've experienced a loss of pregnancy in the past 6 months",
"none": "None of the above",
Expand All @@ -29,34 +43,46 @@
"tanf": "TANF"
},
"Income": {
"dropdownLabel": "What is your household size?",
"enrolled": "If you are currently enrolled in Medicaid, Healthy Montana Kids, Healthy Montana Kids Plus, SNAP, TANF, or FDPIR (Food Distribution Program on Indian Reservations), you may have automatic eligibility for WIC.",
"estimatedIncome": "Estimated maximum income before taxes",
"accordionBody": "A household is defined as all persons, related or unrelated, living together in thesame dwelling and sharing financial resources and costs, with the exception of foster children. If someone in your household is pregnant and applying for WIC benefits and is determined to be ineligible based on your household income, you may then increase your household size by the number of expected births.",
"accordionHeader": "Who counts in my household?",
"assistance": "Learn about other assistance",
"dropdownLabel": "Household size",
"enrolled": "If you are currently enrolled in <b>Medicaid, Healthy Montana Kids Plus, Healthy Montana Kids Plus</b>, Supplemental Nutrition Assistance Program (<b>SNAP</b>), Temporary Assistance for Needy Families (<b>TANF</b>), or Food Distribution Program on Indian Reservations (<b>FDPIR</b>), you may be automatically eligible for WIC.",
"estimatedIncome": "Estimated maximum income limit before taxes",
"header": "Check your eligibility",
"helper": "If someone in your household is pregnant and applying for WIC benefits and is determined to be ineligible based on your household income, you may then increase your household size by the number of expected births.",
"householdSize": "What is your household size?",
"notEnrolled": "If you are not currently enrolled in one or more of those programs, you will have to show proof your income is within a certain level.",
"title": "To be eligible for WIC, your income before taxes must be at or below a certain income level."
"title": "To be eligible for WIC, your household income before taxes must be at or below a certain income level.",
"unsure": "<b>If you are unsure about your income, please continue to apply.</b> A WIC staff member can answer more specific questions about your situation."
},
"Index": {
"benefits": "There are many benefits, including healthy food, support, connections to local resources, and more.",
"benefits": "There are many benefits including healthy food, breastfeeding support, nutrition education, and connections to local resources.",
"button": "Get Started ",
"description": "WIC is a program designed to help families and young children during an important time in growth and development.",
"header": "<b>WIC (Women, Infants, and Children)</b> is a program designed to help families and young children during an important time in growth and development.",
"list": ["a", "b"],
"supplement": "WIC is meant to supplement your food budget and compliment your use of other resources.",
"time": "This form should take about 10 minutes to complete.",
"time": "<b>This form should take about 10 minutes to complete.</b>",
"title": "Start an application for WIC",
"voluntary": "WIC is a voluntary program and participation will not interfere with use of other programs like SNAP or Medicaid."
},
"Information": {
"apply": "You can start applying for WIC by checking to see if you're eligible.",
"appointment": "During your appointment, you'll need to show documentation of your income, identity, and residence. We'll help you figure out the right documents to bring.",
"applyHeader": "Check your eligibility",
"appointment": "During your appointment, you'll need to show documentation of your income, indentity, and residence.",
"appointmentHeader": "Attend your appointment at your local WIC clinic",
"button": "Check your availability",
"eligible": "If you are eligible, a staff member from your local WIC office will call you for additional information and to set up a certification appointment",
"eligible": "<b>If you are eligible</b>, a staff member from your local WIC office will call you for additional information and to set up a certification appointment.",
"eligibleHeader": "Schedule a certification appointment",
"note": "Note: this form does not guarantee enrollment in WIC, your eligibility will be confirmed when you have your first appointment with WIC.",
"title": "How it works"
},
"Layout": {
"footer": "Lorem ipsum odor amet, consectetuer adipiscing elit. Metus himenaeos proin. Non sapien. Habitant lorem nascetur pretium.",
"header": "WIC Eligibility Screener"
"footer1": "This site is a demonstration project built with <0>Montana WIC</0> and is for example purposes only. If you need to submit an application for WIC, please use <1>SignUpWIC.com</1> to find a location near you.",
"footer2": "<0>USDA Non-Discrimination Statement</0>: This institution is an equal opportunity provider.",
"header": "Apply for WIC in Montana",
"menu": "Menu"
},
"asterisk": "All required questions are marked with an asterisk",
"continue": "Continue"
}
40 changes: 40 additions & 0 deletions app/src/components/Accordion.tsx
@@ -0,0 +1,40 @@
import { ReactElement, useState } from 'react'

type Props = {
body: string
header: string
}

const Accordion = (props: Props): ReactElement => {
const { body, header } = props
const [isExpanded, setExpanded] = useState(false)

const handleClick = () => {
setExpanded(!isExpanded)
}

return (
<div className="usa-accordion usa-accordion--bordered">
<h3 className="usa-accordion__heading">
<button
aria-controls="b-a1"
aria-expanded={isExpanded}
className="usa-accordion__button"
onClick={handleClick}
type="button"
>
{header}
</button>
</h3>
<div
className="usa-accordion__content usa-prose"
hidden={!isExpanded}
id="b-a1"
>
<p>{body}</p>
</div>
</div>
)
}

export default Accordion
18 changes: 4 additions & 14 deletions app/src/components/ButtonLink.tsx
@@ -1,4 +1,3 @@
import Image from 'next/image'
import Link from 'next/link'
import { ReactElement } from 'react'
import styled, { StyledComponent } from 'styled-components'
Expand All @@ -7,29 +6,21 @@ type Props = {
disabled?: boolean
label: string
href: string /* TODO: create global type for routes */
vector?: boolean
width?: string /* TODO: check if there is a type for css widths */
}

const ButtonLink = (props: Props): ReactElement => {
const { disabled, href, label, vector, width } = props
const { disabled, href, label, width } = props

return (
<Link href={href}>
<Button
className={`usa-button usa-button--small disabled`}
className={`usa-button usa-button--small`}
disabled={disabled}
href={href}
width={width}
>
{label}
{vector && (
<Image
src="/img/vector.svg"
alt="continue vector"
width={20}
height={15}
/>
)}
</Button>
</Link>
)
Expand All @@ -47,9 +38,8 @@ const Button: StyledComponent<
disabled?: boolean
width?: string
}>`
background-color: ${(props) => (props.disabled ? 'grey' : 'black')};
background-color: ${(props) => props.disabled && 'grey'};
display: flex;
font-family: 'Balsamiq Sans', cursive;
font-weight: 400;
gap: 10px;
pointer-events: ${(props) => props.disabled && 'none'};
Expand Down

0 comments on commit 4b325d1

Please sign in to comment.