This repo contains a working React/TypeScript app with several example components styled with Twind. It strives to cover as many applicable Twind features as possible.
Features:
- Example components with and without the
styledAPI - Utilizes several Twind features, including advanced grouping, custom animations, and more.
- Configured for out-of-the-box usage with Twind, Headless UI, and Storybook.
- Blazing-fast (~50ms) WASM-powered development server with Snowpack.
- Example components, tests, and stories.
- Basic, optimized build configuration with Webpack.
- Testing with React Testing Library and Chai. Why not Jest? https://www.snowpack.dev/#testing
- Functional, React/TypeScript ESLint configuration.
- ✨ Bootstrapped with Create Snowpack App (CSA).
Step 1:
Clone this repo:
git clone [email protected]:tw-in-js/example-react-typescript.gitStep 2:
Navigate to project and install the dependencies:
cd example-react-typescript
yarn
Step 3:
Run one of the scripts below:
| Script | Description |
|---|---|
yarn start |
Runs the app in the development mode. Open http://localhost:8080 to view it in the browser. The page will reload if you make edits. You will also see any lint errors in the console. |
yarn dev |
Alias for yarn start. |
yarn storybook |
Runs Storybook in the development mode. (uses Webpack). Open http://localhost:6006 to view it in the browser. |
yarn prettier |
Runs a Prettier check. |
yarn lint |
Runs ESLint using eslint-config-gojutin. |
yarn test |
Launches the application test runner. Run with the --watchflag (yarn test -- --watch) to run in interactive watch mode. |
yarn build-storybook |
Builds a static copy of your Storybook to the storybook-static/ folder. |
yarn build |
Builds a static copy of your site to the build/ folder using a minimal Webpack set up. (@snowpack/plugin-webpack & @snowpack/plugin-optimize). Learn more at https://www.snowpack.dev/#optimized-builds. |