The React Component Library for the WCA
- Install the library as a npm package with
npm install @thewca/wca-components - Import the component you want to use with
import { CubingIcon } from "@thewca/wca-components" - Import the styles in your app with
import '@thewca/wca-components/dist/index.esm.css'or - Import only a single stylesheet if you want to keep your css bundle small with
import '@thewca/wca-components/dist/css/{component}/index.css'
If you want to work on an existing component the easiest way is to run npm run storybook
and navigate to the component. It will update with changes in the code
The Components are written using typescript, so they can provide useful type information for developers.
When you are transitioning a Rails Component to React or you are building a new React Component you can add it to the Component Library following these steps
- Fork the repository
- Create a new Folder in the components folder
- Write your component and provide type information for its props
- If your component has a state that would make sense to communicate to a parent component make sure to provide callback functions that are triggered on state changes
- Write tests for your components using jest
- You can also add a Story to your component using Storybook to more easily visualize how arguments affect your component and how to interact with it. See an example in EventSelector.stories.tsx
- Create an index.ts in your directory to export your component and add its desired exported name to src/components/index.ts
- Create a PR with your changes