Skip to content

Commit dc0e8d1

Browse files
erwstouterwstout
authored
Release/1.0.0 (#10)
* add flow support, update handler methods to use state, update to use react-jss * Update test command
1 parent 19b6b7d commit dc0e8d1

File tree

14 files changed

+688
-32300
lines changed

14 files changed

+688
-32300
lines changed

‎.babelrc‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
{
2-
"presets": ["env", "react"]
2+
"presets": ["env", "react", "flow"],
3+
"plugins": ["transform-flow-strip-types", "transform-class-properties"]
34
}

‎.eslintrc.json‎

Lines changed: 19 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,22 @@
11
{
2-
"env": {
3-
"browser": true,
4-
"es6": true
2+
"env": {
3+
"browser": true,
4+
"es6": true,
5+
"node": true
6+
},
7+
"extends": ["eslint:recommended", "plugin:flowtype/recommended"],
8+
"parserOptions": {
9+
"ecmaFeatures": {
10+
"experimentalObjectRestSpread": true,
11+
"jsx": true
512
},
6-
"extends": "eslint:recommended",
7-
"parserOptions": {
8-
"ecmaFeatures": {
9-
"experimentalObjectRestSpread": true,
10-
"jsx": true
11-
},
12-
"sourceType": "module"
13-
},
14-
"plugins": [
15-
"react"
16-
],
17-
"rules": {
18-
"indent": [
19-
"error",
20-
2
21-
],
22-
"linebreak-style": [
23-
"error",
24-
"unix"
25-
],
26-
"quotes": [
27-
"error",
28-
"single"
29-
],
30-
"no-unused-vars": [
31-
"warn"
32-
]
33-
}
13+
"sourceType": "module"
14+
},
15+
"plugins": ["flowtype", "react", "babel"],
16+
"rules": {
17+
"indent": ["error", 2],
18+
"linebreak-style": ["error", "unix"],
19+
"quotes": ["error", "double"],
20+
"no-unused-vars": ["warn"]
21+
}
3422
}

‎.flowconfig‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
[ignore]
2+
3+
[include]
4+
5+
[libs]
6+
7+
[lints]
8+
9+
[options]
10+
11+
[strict]

‎.travis.yml‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,3 +2,4 @@ language: node_js
22
node_js:
33
- "8"
44
- "9"
5+
- "10"

‎CHANGELOG.md‎

Lines changed: 30 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,50 @@
11
# Changelog
2+
23
All notable changes to this project will be documented in this file.
34

45
The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
56
and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
67

8+
## [1.0.0] - 2018-08-11
9+
10+
### Added
11+
12+
* Flow support
13+
* React-JSS for styling
14+
15+
### Updated
16+
17+
* All handler methods to use state instead of class switching
18+
19+
### Removed
20+
21+
* CSS Imports
22+
723
## [0.3.0] - 2018-03-12
24+
825
### Fix
9-
- Adjust webpack config to ensure when compiled for production, only React production
10-
code is included
26+
27+
* Adjust webpack config to ensure when compiled for production, only React production
28+
code is included
1129

1230
### Added
13-
- className support thanks to @tamirkash
31+
32+
* className support thanks to @tamirkash
1433

1534
## [0.2.0] - 2018-03-12
35+
1636
### Fix
17-
- Webpack config that was causing error(s) when trying to import as a npm package.
37+
38+
* Webpack config that was causing error(s) when trying to import as a npm package.
1839

1940
## [0.1.1] - 2018-03-12
41+
2042
### Added
21-
- This CHANGELOG
22-
- production build
2343

44+
* This CHANGELOG
45+
* production build
46+
47+
[0.3.0]: https://github.com/factor1/react-card-flipper/compare/v0.3.0...v1.0.0
2448
[0.3.0]: https://github.com/factor1/react-card-flipper/compare/v0.2.0...v0.3.0
2549
[0.2.0]: https://github.com/factor1/react-card-flipper/compare/v0.1.1...v0.2.0
2650
[0.1.1]: https://github.com/factor1/react-card-flipper/compare/v0.1.0...v0.1.1

‎README.md‎

Lines changed: 58 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,74 +1,76 @@
11
# react-card-flipper
2-
[![Build Status](https://travis-ci.org/factor1/react-card-flipper.svg?branch=master)](https://travis-ci.org/factor1/react-card-flipper)
3-
[![npm version](https://badge.fury.io/js/react-card-flipper.svg)](https://badge.fury.io/js/react-card-flipper)
4-
![GitHub issues](https://img.shields.io/github/issues-raw/factor1/react-card-flipper.svg)
5-
![license](https://img.shields.io/github/license/factor1/react-card-flipper.svg)
62

3+
[![Build Status](https://travis-ci.org/erwstout/react-card-flipper.svg?branch=master)](https://travis-ci.org/erwstout/react-card-flipper)
4+
[![npm version](https://badge.fury.io/js/react-card-flipper.svg)](https://badge.fury.io/js/react-card-flipper)
5+
![GitHub issues](https://img.shields.io/github/issues-raw/erwstout/react-card-flipper.svg)
6+
![license](https://img.shields.io/github/license/erwstout/react-card-flipper.svg)
77

88
A React card flipper component (built with React `16.2.0`) that can be triggered by hover or click. Inspired
99
from [David Walsh's great tutorial](https://davidwalsh.name/css-flip).
1010

1111
## Installation
12+
1213
### Yarn:
14+
1315
`yarn add react-card-flipper`
1416

1517
### npm:
18+
1619
`npm install react-card-flipper --save`
1720

1821
## Current Browser Support
22+
1923
Initial testing via BrowserStack of a React app that simply renders the card
2024
component.
2125

22-
| Browser | Support | Notes |
23-
| ---------------- |:--:| ------ |
24-
| Chrome >= 38 | ✅ | |
25-
| Edge >= 14 | ✅ | |
26-
| Firefox >= 16 | ✅‍ | |
27-
| IE 11-10 | ⚠️ | Card flips have no animation |
28-
| IE 9.0 | ❌ | No toggling of cards |
29-
| Opera >= 30 | ✅ | |
30-
| Safari >= 6.2.8 | ✅ | |
31-
| Safari 6.0.5 | ⚠️ | Card flips have no animation |
32-
26+
| Browser | Support | Notes |
27+
| --------------- | :-----: | ---------------------------- |
28+
| Chrome >= 38 | ✅ | |
29+
| Edge >= 14 | ✅ | |
30+
| Firefox >= 16 | ✅‍ | |
31+
| IE 11-10 | ⚠️ | Card flips have no animation |
32+
| IE 9.0 | ❌ | No toggling of cards |
33+
| Opera >= 30 | ✅ | |
34+
| Safari >= 6.2.8 | ✅ | |
35+
| Safari 6.0.5 | ⚠️ | Card flips have no animation |
3336

3437
## Getting Started
38+
3539
You can import react-card-flipper into your React app. The following is a bare
3640
bones example.
3741

3842
> **Important:** The `<ReactCardFlipper>` component must have two `<div>` elements, one for the front and one for the back.
3943
4044
```js
41-
import React from 'react';
42-
import ReactDOM from 'react-dom';
43-
import ReactCardFlipper from 'react-card-flipper';
45+
import React from "react";
46+
import ReactDOM from "react-dom";
47+
import ReactCardFlipper from "react-card-flipper";
4448

4549
ReactDOM.render(
4650
<div>
4751
<ReactCardFlipper>
48-
<div>
49-
The cards front content goes here.
50-
</div>
51-
<div>
52-
The cards back content goes here.
53-
</div>
52+
<div>The cards front content goes here.</div>
53+
<div>The cards back content goes here.</div>
5454
</ReactCardFlipper>
5555
</div>,
56-
document.getElementById('root')
56+
document.getElementById("root")
5757
);
5858
```
5959

6060
## Props and Options
61+
6162
The `ReactCardFlipper` component has 4 props it accepts that you can use to adjust
6263
how your card behaves.
6364

64-
| Prop / Option | Accepted Prop(s) | Default | Description |
65-
| ------------- |:---------------------------:|:-------:| ----------- |
66-
| `width` | String (ex: `300px`) | `auto` | Card width. |
67-
| `height` | String (ex: `600px`) | `auto` | Card height. |
68-
| `behavior` | String (`click` or `hover`) | `click` | If the card should click to flip, or hover to flip. |
69-
| `levitate` | Boolean | `false` | If the card should "levitate" up on hover. Only applied when `behavior` is `click`. |
65+
| Prop / Option | Accepted Prop(s) | Default | Description |
66+
| ------------- | :-------------------------: | :-----: | ----------------------------------------------------------------------------------- |
67+
| `width` | String (ex: `300px`) | `auto` | Card width. |
68+
| `height` | String (ex: `600px`) | `auto` | Card height. |
69+
| `behavior` | String (`click` or `hover`) | `click` | If the card should click to flip, or hover to flip. |
70+
| `levitate` | Boolean | `false` | If the card should "levitate" up on hover. Only applied when `behavior` is `click`. |
7071

7172
#### Example:
73+
7274
```js
7375
render() {
7476
return(
@@ -87,31 +89,49 @@ render() {
8789
```
8890

8991
## Styling
92+
9093
Out of the box we provide very little styling aside from core styles like transitions
91-
to let you shape the design as you see fit. All of the css classes provided for are
92-
prefixed with `rcf-` to avoid any conflicts with existing classes. In most cases you'll
93-
only be adding styles to `.rcf-front` & `.rcf-back`. All classes available for styling are:
94+
to let you shape the design as you see fit. You can style your cards by passing className's as props.
95+
To style the card itself, you want to use `innerCardClass`, for the card container itself you
96+
would use a normal `className`. You can see a working example [here](https://codesandbox.io/s/p99p8mxqqj) or reference the following code snippet (this example is using `react-jss`):
9497

95-
- `rcf-container` - main container for the component
96-
- `rcf-front` - front card styling
97-
- `rcf-back` - back card styling
98-
- `rcf-flipper` - "flipper" container, controls animation speed, etc.
98+
```js
99+
<ReactCardFlipper
100+
width="300px"
101+
height="400px"
102+
behavior="click"
103+
className={classes.root}
104+
innerCardClass={classes.card}
105+
>
106+
<div className="text-center">You can click me, go ahead... Try it.</div>
107+
<div className="text-center">Great job! You win person of the month.</div>
108+
</ReactCardFlipper>
109+
```
99110

100111
## Development
112+
101113
To get started developing on this project, fork or clone the repo. Then run `yarn install`
102114

103115
#### Start the development server
116+
104117
##### `yarn start`
118+
105119
Starts the development/test server and polls for changes.
106120

107121
#### Running EsLint
122+
108123
##### `yarn lint`
124+
109125
Lints `ReactCardFlipper.js` and outputs any warnings or errors.
110126

111127
#### Running Tests
128+
112129
##### `yarn test`
130+
113131
Runs EsLint, and builds the test output.
114132

115133
#### Running Production Build
134+
116135
##### `yarn build`
136+
117137
Compiles a new build in the `dist/` folder.

0 commit comments

Comments
 (0)