https://github.com/textbook/component-library
Example component library with an agile approach
https://github.com/textbook/component-library
Last synced: about 1 month ago
JSON representation
Example component library with an agile approach
- Host: GitHub
- URL: https://github.com/textbook/component-library
- Owner: textbook
- License: isc
- Created: 2022-02-13T19:23:20.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2022-02-14T11:59:57.000Z (over 4 years ago)
- Last Synced: 2025-06-22T01:47:39.319Z (about 1 year ago)
- Language: TypeScript
- Homepage: https://blog.jonrshar.pe/component-library/
- Size: 2.94 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# @codeyourfuture/component-library
Example component library with an agile approach
Check out component examples at https://blog.jonrshar.pe/component-library.
## Usage
### Installation
This library is designed to be used in a [React] app (created using e.g. [CRA]).
It requires [styled-components] 💅 as a peer, so if you're not already using that you'll have to add it as well:
```shell
$ npm install @codeyourfuture/component-library styled-components
```
### Use
You can import the components you need and use them in your own as follows:
```jsx
import { Button } from "@codeyourfuture/component-library";
export default function MyComponent() {
return alert("Hi there!")} />;
}
```
The CYF theme needs to be provided at the top level of your application:
```jsx
import { theme } from "@codeyourfuture/component-library";
import { ThemeProvider } from "styled-components";
export default function App() {
return {/* ... */};
}
```
## Development
### Requirements
- Supported Node versions are listed in the `"engines"` field in `package.json`.
- Supported React versions are listed in the `"peerDependencies"` field in `package.json`.
- The script to create an application for the E2E tests requires [bash] and [jq].
### Setup
[Clone] the repository (or a [fork] of it) locally and run `npm ci` to install all of the dependencies.
### Scripts
- `e2e`: Run [Cypress] tests to check that the package can be used in a fresh React app
- `lint`: Run the [ESLint] code style checking
- `lint:fix`: Fix any linting violations with fixers
- `ship`: Run `lint`, then `test`, then `e2e`
- `storybook`: Run the local [Storybook] dev server
- `storybook:build`: Build the static Storybook site
- `test`: Run the [Jest] unit tests
- `test:cover`: Run the tests with coverage reporting
[bash]: https://www.gnu.org/software/bash/
[clone]: https://docs.github.com/en/repositories/creating-and-managing-repositories/cloning-a-repository
[cra]: https://create-react-app.dev/
[cypress]: https://www.cypress.io/
[eslint]: https://eslint.org/
[fork]: https://docs.github.com/en/get-started/quickstart/fork-a-repo
[jest]: https://jestjs.io/
[jq]: https://stedolan.github.io/jq/
[react]: https://reactjs.org/
[storybook]: https://storybook.js.org/
[styled-components]: https://styled-components.com/