Skip to content

Commit 561ba33

Browse files
author
Chris Johnson
authored
New Features and Bug Fixes (#6)
* Feature/wrapper updates (#2) * feat(Stagger): Add onComplete callback Allow users to pass an `onComplete` function that will be called after the last child transition is complete BREAKING CHANGE: the `duration` prop now must be passed to `Stagger` so it can calculate the correct timing for `onComplete`. Any `duration` in child animations will be overwritten when wrapped in `Stagger` * feat(Random): Add onComplete callback Allow users to pass an onComplete function that will be called after the last transition completes BREAKING CHANGE: Users must pass `duration` into `Random` now rather than directly into the child animation component. This is so it can properly calculate when to fire the `onComplete` callback * refactor(Storybook): Update stories to use `map` Create one array of `Example` text and map through it in each Wrapper example * feat(Stagger): Add `in` prop for conditionally starting Stagger Users can pass an `in` prop to `Stagger` which will mount or unmount the children and cause them to Stagger in and out BREAKING CHANGE: Stagger is no longer set to `appear` by default. You must pass `in` as true to initiate * feat(Random): Add `in` prop for conditionally starting Random Users can pass `in` to Random to mount and unmount the child animations similayly to `Stagger` BREAKING CHANGE: Random is no longer set to `appear`. Must pass `in` as `true` to initiate the Animation * Feature/animation updates (#3) * feat(Animations): Allow classNames Allow a user to pass a className to the inner wrapping div on each animation. * test(Snapshots): Update snapshots for `className` Rendered element snapshot no includes `className={undefined}` * feat(FadeInOut): Add `enterOpacity` and `exitOpacity` props All a user to set what the enter and exit values for opacity are on `FadeInOut`. Defaults to enter as 1 and exit as 0 * fix(TweenTransform): Fix collision with prop names `enter` and `exit` are `Transition` props. Change to `enterTransform` and `exitTransform` BREAKING CHANGE: `enter` and `exit` will now be passed to the transition as a prop and will not control the values for transforms * refactor(FadeTransform): Make FadeTransform a composed component Rather than a separate API for FadeTransform, use both existing animation components to create a composed version. Allows a user to pass shared props for transition values an individual prop objects for each animation BREAKING CHANGE: The API changed to accept shared props at the parent level and props for individual inner animation components in `fadeProps` and `transformProps` * refactor(Animations): Rename animations Rename animation files and references to be shorter and more concise names BREAKING CHANGE: Old imports will no longer work as the components are exported with their new names * test(Snapshots): Update snapshots for renamed components * feat(Storybook): Add more controls Add `chunk` option in `Stagger` and `minDelay` and `maxDelay` in `Random` * chore(Eslint): Add eslintrc * refactor(Storybook): Split stories into separate files. Add `createCommonKnobs` to utilities * chore(Linting): Code clean up Satisfy eslint rules * feat(Wrappers): Implement Reverse (#4) Allow users to pass `reverse` to reverse the way the delays are applied in `Stagger` and `Random`. Also includes a bug fix where `onComplete` was not called `onExited` and was being called multiple times * docs(Readme): Update readme for new features * docs(Readme): Fix section links * docs(Readme): Fix typo * docs(Readme): Fix typo * test(Unit Tests): Clean up unneeded imports. Add test globals to eslintrc * test(Snapshot): Add snapshot tests for passing className * test(Snapshot): Fix snapshots for updates * docs(Readme): Fix subtitle * docs(Readme): More concise subtitle
1 parent 1d303c8 commit 561ba33

28 files changed

+1050
-467
lines changed

‎.eslintrc

Lines changed: 181 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,181 @@
1+
{
2+
"env": {
3+
"browser": true,
4+
"es6": true,
5+
"node": true
6+
},
7+
"globals": {
8+
"describe": true,
9+
"test": true,
10+
"expect": true
11+
},
12+
"parser": "babel-eslint",
13+
"plugins": ["babel", "react"],
14+
"rules": {
15+
/* Possible Errors */
16+
"no-cond-assign": [1, "except-parens"],
17+
"no-console": 0,
18+
"no-constant-condition": 1,
19+
"no-control-regex": 1,
20+
"no-debugger": 1,
21+
"no-dupe-args": 1,
22+
"no-dupe-keys": 1,
23+
"no-duplicate-case": 0,
24+
"no-empty": 1,
25+
"no-empty-character-class": 1,
26+
"no-ex-assign": 1,
27+
"no-extra-boolean-cast": 1,
28+
"no-extra-parens": 0,
29+
"no-func-assign": 1,
30+
"no-inner-declarations": [1, "functions"],
31+
"no-invalid-regexp": 1,
32+
"no-irregular-whitespace": 1,
33+
"no-negated-in-lhs": 1,
34+
"no-obj-calls": 1,
35+
"no-regex-spaces": 1,
36+
"no-reserved-keys": 0,
37+
"no-sparse-arrays": 1,
38+
"no-unexpected-multiline": 1,
39+
"no-unreachable": 1,
40+
"use-isnan": 1,
41+
"valid-jsdoc": 1,
42+
"valid-typeof": 1,
43+
44+
/* Best Practices */
45+
"accessor-pairs": 0,
46+
"block-scoped-var": 0, // see Babel section
47+
"complexity": 0,
48+
"consistent-return": 1,
49+
"curly": [1, "all"],
50+
"default-case": 0,
51+
"dot-notation": [1, { "allowKeywords": true, "allowPattern": "" }],
52+
"eqeqeq": 1,
53+
"guard-for-in": 0,
54+
"no-alert": 1,
55+
"no-caller": 1,
56+
"no-div-regex": 1,
57+
"no-else-return": 1,
58+
"no-eq-null": 0,
59+
"no-eval": 1,
60+
"no-extend-native": 1,
61+
"no-extra-bind": 1,
62+
"no-fallthrough": 0,
63+
"no-floating-decimal": 1,
64+
"no-implied-eval": 1,
65+
"no-iterator": 1,
66+
"no-labels": 1,
67+
"no-lone-blocks": 1,
68+
"no-loop-func": 1,
69+
"no-multi-spaces": 0,
70+
"no-multi-str": 1,
71+
"no-native-reassign": 1,
72+
"no-new": 1,
73+
"no-new-func": 1,
74+
"no-new-wrappers": 1,
75+
"no-octal": 1,
76+
"no-octal-escape": 1,
77+
"no-param-reassign": 0,
78+
"no-process-env": 0,
79+
"no-proto": 1,
80+
"no-redeclare": 1,
81+
"no-return-assign": 1,
82+
"no-script-url": 1,
83+
"no-self-compare": 1,
84+
"no-sequences": 1,
85+
"no-throw-literal": 1,
86+
"no-unused-expressions": 0,
87+
"no-void": 0,
88+
"no-warning-comments": [
89+
1,
90+
{ "terms": ["todo", "tofix"], "location": "start" }
91+
],
92+
"no-with": 1,
93+
"radix": 1,
94+
"vars-on-top": 1,
95+
"yoda": [1, "never"],
96+
97+
/* Strict Mode */
98+
"strict": [1, "never"],
99+
100+
/* Variables */
101+
"no-catch-shadow": 0,
102+
"no-delete-var": 1,
103+
"no-label-var": 1,
104+
"no-shadow": 1,
105+
"no-shadow-restricted-names": 1,
106+
"no-undef": 1,
107+
"no-undef-init": 1,
108+
"no-undefined": 1,
109+
"no-unused-vars": [1, { "vars": "local", "args": "after-used" }],
110+
"no-use-before-define": 1,
111+
112+
/* Node.js */
113+
"handle-callback-err": 1,
114+
"no-mixed-requires": 1,
115+
"no-new-require": 1,
116+
"no-path-concat": 1,
117+
"no-process-exit": 1,
118+
"no-restricted-modules": [1, ""], // add any unwanted Node.js core modules
119+
"no-sync": 1,
120+
121+
/* Stylistic Issues */
122+
"camelcase": [1, { "properties": "always" }],
123+
"computed-property-spacing": 0,
124+
"consistent-this": 0,
125+
"func-names": 0,
126+
"func-style": 0,
127+
"linebreak-style": 0,
128+
"max-nested-callbacks": [0, 3],
129+
"new-cap": 0, // see Babel section
130+
"newline-after-var": 0,
131+
"no-array-constructor": 1,
132+
"no-continue": 1,
133+
"no-inline-comments": 0,
134+
"no-lonely-if": 1,
135+
"no-nested-ternary": 0,
136+
"no-new-object": 1,
137+
"no-ternary": 0,
138+
"no-underscore-dangle": 0,
139+
"no-unneeded-ternary": 1,
140+
"object-curly-spacing": 0, // see Babel section
141+
"one-var": [1, "never"],
142+
"operator-assignment": [1, "never"],
143+
"padded-blocks": [0, "never"],
144+
"quote-props": [0, "as-needed"],
145+
"sort-vars": 0,
146+
"space-after-keywords": 0,
147+
"space-unary-ops": 0,
148+
"spaced-comment": [1, "always"],
149+
150+
/* ECMAScript 6 */
151+
"constructor-super": 1,
152+
"no-this-before-super": 1,
153+
"no-var": 1,
154+
"object-shorthand": [1, "always"],
155+
"prefer-const": 1,
156+
157+
/* Babel */
158+
"babel/new-cap": 1,
159+
"babel/object-curly-spacing": [1, "always"],
160+
161+
/* React */
162+
"react/display-name": 1,
163+
"react/jsx-boolean-value": 1,
164+
"react/jsx-no-bind": 1,
165+
"react/jsx-no-duplicate-props": 1,
166+
"react/jsx-no-undef": 1,
167+
"react/jsx-sort-props": 0,
168+
"react/jsx-uses-react": 1,
169+
"react/jsx-uses-vars": 1,
170+
"react/no-danger": 1,
171+
"react/no-did-mount-set-state": 1,
172+
"react/no-did-update-set-state": 1,
173+
"react/no-multi-comp": 1,
174+
"react/no-unknown-property": 1,
175+
"react/prop-types": 1,
176+
"react/react-in-jsx-scope": 1,
177+
"react/self-closing-comp": 1,
178+
"react/sort-comp": 1,
179+
"react/wrap-multilines": 0
180+
}
181+
}

‎.storybook/config.js

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
11
import { configure, addDecorator } from '@storybook/react';
22
import AppDecorator from './AppDecorator';
33

4+
const req = require.context('../stories', true, /\.js$/);
5+
46
function loadStories() {
5-
require('../stories');
7+
req.keys().forEach(filename => req(filename));
68
}
79

810
addDecorator(AppDecorator);

0 commit comments

Comments
 (0)