-
Notifications
You must be signed in to change notification settings - Fork 7
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Federico Zivolo
committed
Dec 4, 2018
1 parent
3bdaa26
commit 49b9e1f
Showing
8 changed files
with
209 additions
and
2 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,8 @@ | ||
| This file is served by the styleguide to showcase the usage | ||
| of the `Button.js` component. | ||
|
|
||
| Use it to document its API and to provide some usage examples. | ||
|
|
||
| ```js | ||
| <Button>test</Button> | ||
| ``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,9 @@ | ||
| // @flow | ||
| import styled from '@emotion/styled'; | ||
|
|
||
| const Button = styled.button` | ||
| color: red; | ||
| `; | ||
|
|
||
| // @component | ||
| export default Button; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| // @flow | ||
| import React from 'react'; | ||
| import { mount } from 'enzyme'; | ||
|
|
||
| import Button from './Button'; | ||
|
|
||
| it('renders a button', () => { | ||
| const wrapper = mount(<Button>foo</Button>); | ||
| expect(wrapper.find('button')).toHaveLength(1); | ||
| expect(wrapper).toMatchSnapshot(); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,19 @@ | ||
| This component showcases how to create a React based library | ||
| with the help of Emotion and Flow in the Quid UI repository. | ||
|
|
||
|
|
||
| ### Bundling the package | ||
|
|
||
| To easily bundle the package, we make use of the microbundle tool, | ||
| which wraps Rollup, Babel and other useful utilities into a single CLI utility. | ||
| Read more about [microbundle][microbundle] on its official GitHub repository. | ||
|
|
||
| ### Type checking | ||
|
|
||
| The whole Quid UI repository is type-checked using [Flow][flow], | ||
| you can start the Flow type checker by running `flow` on the root | ||
| of the Quid UI repository. | ||
|
|
||
|
|
||
| [microbundle]: https://github.com/developit/microbundle | ||
| [flow]: https://flow.org/ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,15 @@ | ||
| // Jest Snapshot v1, https://goo.gl/fbAQLP | ||
|
|
||
| exports[`renders a button 1`] = ` | ||
| .emotion-0 { | ||
| color: red; | ||
| } | ||
| <Styled(button)> | ||
| <button | ||
| className="emotion-0" | ||
| > | ||
| foo | ||
| </button> | ||
| </Styled(button)> | ||
| `; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,2 @@ | ||
| // @flow | ||
| export { default } from './Button'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,21 @@ | ||
| { | ||
| "name": "@quid/example", | ||
| "version": "1.0.0", | ||
| "description": "Minimal example to create a React library using Emotion in Quid UI", | ||
| "main": "dist/index.js", | ||
| "umd:main": "dist/index.umd.js", | ||
| "module": "dist/index.es.js", | ||
| "license": "MIT", | ||
| "private": true, | ||
| "scripts": { | ||
| "start": "microbundle watch", | ||
| "prepare": "microbundle build" | ||
| }, | ||
| "dependencies": { | ||
| "@emotion/core": "^10.0.1", | ||
| "@emotion/styled": "^10.0.1" | ||
| }, | ||
| "devDependencies": { | ||
| "microbundle": "^0.8.3" | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters