Add example application about react-uswds HOT 5 CLOSED

👍 thanks, all good feedback and suggestions! I'll update this issue with the new AC and create some followup issues. agreed this is where it would be helpful to have epics.. but for now I'll use the example label on this work.

@haworku my thinking behind including Redux was to show an example of how you might want to control UI such as a Modal being open/closed.

from react-uswds.

The example application would specifically highlight how react-uswds can integrate with other widely used react dependencies - perhaps libraries for building tables, forms, etc.

from react-uswds.

Ok here's my initial proposal:

1. create a directory in the project root called example, kitchensink, something of that sort
2. set up the directory with a basic react application, maybe using create react app?
3. throw in with some libs commonly used with react, such as react router, redux, formik, and react hook form
4. using USWDS components, create a basic page / navigation layout so that individual pages can be created easily
5. add some initial pages with content that shows how to use some of the more complex components (modal, forms with different libraries, etc.)

All of the above is probably too much for one issue 🙃 SO if that sounds like a good plan, I would suggest let this issue represent the first TWO steps above, and then create follow-up issues for the others. how does that sound?

from react-uswds.

Here are my thoughts on the proposal:

1. I agree with having the project in an example directory. I believe this is fairly common.
2. It seems smart to use create-react-app. This also seems like a jumping off point for a lot of react projects.
3. I think throwing in some common libraries would be good as long as it doesn't make it overly complicated and distract from the actual implementation of react-uswds.
4. Sounds good!
5. Also sounds good :) I don't think we need to show every component

I think we should make it clear you don't have to use any other specific library to use react-uswds and we aren't prescribing the example libraries we use. It would also be neat if we were able to use the example project as some form of documentation. I am not sure how to achieve this though :)

I definitely think this should be broken into different issues. There are a lot of steps to create this.

from react-uswds.

This sounds good to me.

Additional libs to consider:

• moment (maybe worth showing how you could take a db time and translate for use in the various data/time components)
• react-table or other table libraries
• an i18n library - maybe react-i18next or react-intl

Also wondering why bother with redux? I'm less clear this is needed because I don't see how redux relates to component UI. Maybe I'm thinking about this wrong though.

Other things to maybe implement:

• A form with strict validation and warnings (maybe a payment form or somethign that needs text, phone numbers, emails, credit cards in a certain format)
• something simple that shows off loading states - components that load async

Seeing this list I think that would make it easier to develop is if we had a simple plan documented somewhere (so once new Trussels are working on the repo there's a clear single place that collects ideas for what to implement next- in case we don't get to some things now). This is where an epic would be helpful haha.

from react-uswds.