diff options
author | Stefan Malzner <stefan@adlk.io> | 2019-02-06 20:28:15 +0100 |
---|---|---|
committer | Stefan Malzner <stefan@adlk.io> | 2019-02-06 20:28:15 +0100 |
commit | 14b151cad6a5a849bb476aaa3fc53bf1eead7f4b (patch) | |
tree | 8daa38d28fe21e1745093962526dd36744be4274 /packages/forms | |
parent | update versions (diff) | |
download | ferdium-app-14b151cad6a5a849bb476aaa3fc53bf1eead7f4b.tar.gz ferdium-app-14b151cad6a5a849bb476aaa3fc53bf1eead7f4b.tar.zst ferdium-app-14b151cad6a5a849bb476aaa3fc53bf1eead7f4b.zip |
cleanup
Diffstat (limited to 'packages/forms')
-rw-r--r-- | packages/forms/package-lock.json | 2 | ||||
-rw-r--r-- | packages/forms/package.json | 9 | ||||
-rw-r--r-- | packages/forms/src/button/index.tsx | 14 | ||||
-rw-r--r-- | packages/forms/src/error/index.tsx | 3 | ||||
-rw-r--r-- | packages/forms/src/input/index.tsx | 3 | ||||
-rw-r--r-- | packages/forms/src/label/index.tsx | 2 | ||||
-rw-r--r-- | packages/forms/src/select/index.tsx | 99 | ||||
-rw-r--r-- | packages/forms/src/toggle/index.tsx | 3 | ||||
-rw-r--r-- | packages/forms/src/wrapper/index.tsx | 15 | ||||
-rw-r--r-- | packages/forms/webpack.config.js | 19 |
10 files changed, 83 insertions, 86 deletions
diff --git a/packages/forms/package-lock.json b/packages/forms/package-lock.json index 834db8d33..b5b24c239 100644 --- a/packages/forms/package-lock.json +++ b/packages/forms/package-lock.json | |||
@@ -1,6 +1,6 @@ | |||
1 | { | 1 | { |
2 | "name": "@meetfranz/forms", | 2 | "name": "@meetfranz/forms", |
3 | "version": "1.0.4", | 3 | "version": "1.0.6", |
4 | "lockfileVersion": 1, | 4 | "lockfileVersion": 1, |
5 | "requires": true, | 5 | "requires": true, |
6 | "dependencies": { | 6 | "dependencies": { |
diff --git a/packages/forms/package.json b/packages/forms/package.json index af5c46a54..a9151e245 100644 --- a/packages/forms/package.json +++ b/packages/forms/package.json | |||
@@ -1,11 +1,11 @@ | |||
1 | { | 1 | { |
2 | "name": "@meetfranz/forms", | 2 | "name": "@meetfranz/forms", |
3 | "version": "1.0.5", | 3 | "version": "1.0.6", |
4 | "description": "React form components for Franz", | 4 | "description": "React form components for Franz", |
5 | "main": "lib/index.js", | 5 | "main": "lib/index.js", |
6 | "scripts": { | 6 | "scripts": { |
7 | "dev": "NODE_ENV=development ../../node_modules/.bin/webpack -w", | 7 | "dev": "tsc -w", |
8 | "prepare": "../../node_modules/.bin/webpack" | 8 | "prepare": "tsc" |
9 | }, | 9 | }, |
10 | "publishConfig": { | 10 | "publishConfig": { |
11 | "access": "public" | 11 | "access": "public" |
@@ -31,9 +31,6 @@ | |||
31 | }, | 31 | }, |
32 | "peerDependencies": { | 32 | "peerDependencies": { |
33 | "classnames": "^2.2.6", | 33 | "classnames": "^2.2.6", |
34 | "lodash": "^4.17.11", | ||
35 | "mobx": "^5.8.0", | ||
36 | "mobx-react": "^5.4.3", | ||
37 | "react": "^16.7.0", | 34 | "react": "^16.7.0", |
38 | "react-dom": "16.7.0", | 35 | "react-dom": "16.7.0", |
39 | "react-jss": "^8.6.1" | 36 | "react-jss": "^8.6.1" |
diff --git a/packages/forms/src/button/index.tsx b/packages/forms/src/button/index.tsx index b7cca7fa4..90eda21e7 100644 --- a/packages/forms/src/button/index.tsx +++ b/packages/forms/src/button/index.tsx | |||
@@ -3,7 +3,6 @@ import Icon from '@mdi/react'; | |||
3 | import { Theme } from '@meetfranz/theme'; | 3 | import { Theme } from '@meetfranz/theme'; |
4 | import classnames from 'classnames'; | 4 | import classnames from 'classnames'; |
5 | import CSS from 'csstype'; | 5 | import CSS from 'csstype'; |
6 | import { observer } from 'mobx-react'; | ||
7 | import React, { Component } from 'react'; | 6 | import React, { Component } from 'react'; |
8 | import injectStyle from 'react-jss'; | 7 | import injectStyle from 'react-jss'; |
9 | import Loader from 'react-loader'; | 8 | import Loader from 'react-loader'; |
@@ -37,7 +36,7 @@ const styles = (theme: Theme) => ({ | |||
37 | border: 'none', | 36 | border: 'none', |
38 | display: 'inline-flex', | 37 | display: 'inline-flex', |
39 | position: 'relative' as CSS.PositionProperty, | 38 | position: 'relative' as CSS.PositionProperty, |
40 | transition: 'background .5s', | 39 | transition: 'background .5s, opacity 0.3s', |
41 | textAlign: 'center' as CSS.TextAlignProperty, | 40 | textAlign: 'center' as CSS.TextAlignProperty, |
42 | outline: 'none', | 41 | outline: 'none', |
43 | alignItems: 'center', | 42 | alignItems: 'center', |
@@ -45,6 +44,14 @@ const styles = (theme: Theme) => ({ | |||
45 | width: (props: IProps) => (props.stretch ? '100%' : 'auto') as CSS.WidthProperty<string>, | 44 | width: (props: IProps) => (props.stretch ? '100%' : 'auto') as CSS.WidthProperty<string>, |
46 | fontSize: theme.uiFontSize, | 45 | fontSize: theme.uiFontSize, |
47 | textDecoration: 'none', | 46 | textDecoration: 'none', |
47 | |||
48 | '&:hover': { | ||
49 | opacity: 0.8, | ||
50 | }, | ||
51 | '&:active': { | ||
52 | opacity: 0.5, | ||
53 | transition: 'none', | ||
54 | }, | ||
48 | }, | 55 | }, |
49 | label: { | 56 | label: { |
50 | margin: '10px 20px', | 57 | margin: '10px 20px', |
@@ -126,7 +133,6 @@ const styles = (theme: Theme) => ({ | |||
126 | }, | 133 | }, |
127 | }); | 134 | }); |
128 | 135 | ||
129 | @observer | ||
130 | class ButtonComponent extends Component<IProps> { | 136 | class ButtonComponent extends Component<IProps> { |
131 | public static defaultProps = { | 137 | public static defaultProps = { |
132 | type: 'button', | 138 | type: 'button', |
@@ -237,6 +243,7 @@ class ButtonComponent extends Component<IProps> { | |||
237 | [`${className}`]: className, | 243 | [`${className}`]: className, |
238 | })} | 244 | })} |
239 | disabled={disabled} | 245 | disabled={disabled} |
246 | data-type="franz-button" | ||
240 | > | 247 | > |
241 | {content} | 248 | {content} |
242 | </button> | 249 | </button> |
@@ -253,6 +260,7 @@ class ButtonComponent extends Component<IProps> { | |||
253 | [`${className}`]: className, | 260 | [`${className}`]: className, |
254 | })} | 261 | })} |
255 | rel={target === '_blank' ? 'noopener' : ''} | 262 | rel={target === '_blank' ? 'noopener' : ''} |
263 | data-type="franz-button" | ||
256 | > | 264 | > |
257 | {content} | 265 | {content} |
258 | </a> | 266 | </a> |
diff --git a/packages/forms/src/error/index.tsx b/packages/forms/src/error/index.tsx index 9d26e086d..a487bb281 100644 --- a/packages/forms/src/error/index.tsx +++ b/packages/forms/src/error/index.tsx | |||
@@ -1,6 +1,4 @@ | |||
1 | import classnames from 'classnames'; | ||
2 | import { Classes } from 'jss'; | 1 | import { Classes } from 'jss'; |
3 | import { observer } from 'mobx-react'; | ||
4 | import React, { Component } from 'react'; | 2 | import React, { Component } from 'react'; |
5 | import injectSheet from 'react-jss'; | 3 | import injectSheet from 'react-jss'; |
6 | 4 | ||
@@ -11,7 +9,6 @@ interface IProps { | |||
11 | message: string; | 9 | message: string; |
12 | } | 10 | } |
13 | 11 | ||
14 | @observer | ||
15 | class ErrorComponent extends Component<IProps> { | 12 | class ErrorComponent extends Component<IProps> { |
16 | render() { | 13 | render() { |
17 | const { | 14 | const { |
diff --git a/packages/forms/src/input/index.tsx b/packages/forms/src/input/index.tsx index cd6da3778..de7e7848e 100644 --- a/packages/forms/src/input/index.tsx +++ b/packages/forms/src/input/index.tsx | |||
@@ -1,7 +1,6 @@ | |||
1 | import { mdiEye, mdiEyeOff } from '@mdi/js'; | 1 | import { mdiEye, mdiEyeOff } from '@mdi/js'; |
2 | import Icon from '@mdi/react'; | 2 | import Icon from '@mdi/react'; |
3 | import classnames from 'classnames'; | 3 | import classnames from 'classnames'; |
4 | import { observer } from 'mobx-react'; | ||
5 | import React, { Component, createRef } from 'react'; | 4 | import React, { Component, createRef } from 'react'; |
6 | import injectSheet from 'react-jss'; | 5 | import injectSheet from 'react-jss'; |
7 | 6 | ||
@@ -33,7 +32,6 @@ interface IState { | |||
33 | passwordScore: number; | 32 | passwordScore: number; |
34 | } | 33 | } |
35 | 34 | ||
36 | @observer | ||
37 | class InputComponent extends Component<IProps, IState> { | 35 | class InputComponent extends Component<IProps, IState> { |
38 | public static defaultProps = { | 36 | public static defaultProps = { |
39 | focus: false, | 37 | focus: false, |
@@ -114,6 +112,7 @@ class InputComponent extends Component<IProps, IState> { | |||
114 | return ( | 112 | return ( |
115 | <Wrapper | 113 | <Wrapper |
116 | className={className} | 114 | className={className} |
115 | identifier="franz-input" | ||
117 | > | 116 | > |
118 | <Label | 117 | <Label |
119 | title={label} | 118 | title={label} |
diff --git a/packages/forms/src/label/index.tsx b/packages/forms/src/label/index.tsx index ee3268b16..36fcfbedf 100644 --- a/packages/forms/src/label/index.tsx +++ b/packages/forms/src/label/index.tsx | |||
@@ -1,6 +1,5 @@ | |||
1 | import classnames from 'classnames'; | 1 | import classnames from 'classnames'; |
2 | import { Classes } from 'jss'; | 2 | import { Classes } from 'jss'; |
3 | import { observer } from 'mobx-react'; | ||
4 | import React, { Component } from 'react'; | 3 | import React, { Component } from 'react'; |
5 | import injectSheet from 'react-jss'; | 4 | import injectSheet from 'react-jss'; |
6 | 5 | ||
@@ -12,7 +11,6 @@ interface ILabel extends IFormField, React.LabelHTMLAttributes<HTMLLabelElement> | |||
12 | classes: Classes; | 11 | classes: Classes; |
13 | } | 12 | } |
14 | 13 | ||
15 | @observer | ||
16 | class LabelComponent extends Component<ILabel> { | 14 | class LabelComponent extends Component<ILabel> { |
17 | static defaultProps = { | 15 | static defaultProps = { |
18 | showLabel: true, | 16 | showLabel: true, |
diff --git a/packages/forms/src/select/index.tsx b/packages/forms/src/select/index.tsx index 58bb7317a..4a9e3c56e 100644 --- a/packages/forms/src/select/index.tsx +++ b/packages/forms/src/select/index.tsx | |||
@@ -2,8 +2,6 @@ import { mdiArrowRightDropCircleOutline, mdiCloseCircle, mdiMagnify } from '@mdi | |||
2 | import Icon from '@mdi/react'; | 2 | import Icon from '@mdi/react'; |
3 | import { Theme } from '@meetfranz/theme'; | 3 | import { Theme } from '@meetfranz/theme'; |
4 | import classnames from 'classnames'; | 4 | import classnames from 'classnames'; |
5 | import debounce from 'lodash/debounce'; | ||
6 | import { observer } from 'mobx-react'; | ||
7 | import React, { Component, createRef } from 'react'; | 5 | import React, { Component, createRef } from 'react'; |
8 | import injectStyle from 'react-jss'; | 6 | import injectStyle from 'react-jss'; |
9 | 7 | ||
@@ -86,7 +84,8 @@ const styles = (theme: Theme) => ({ | |||
86 | }, | 84 | }, |
87 | }, | 85 | }, |
88 | selected: { | 86 | selected: { |
89 | fontWeight: 'bold', | 87 | background: theme.selectOptionItemActive, |
88 | color: theme.selectOptionItemActiveColor, | ||
90 | }, | 89 | }, |
91 | toggle: { | 90 | toggle: { |
92 | marginLeft: 'auto', | 91 | marginLeft: 'auto', |
@@ -133,7 +132,6 @@ const styles = (theme: Theme) => ({ | |||
133 | }, | 132 | }, |
134 | }); | 133 | }); |
135 | 134 | ||
136 | @observer | ||
137 | class SelectComponent extends Component<IProps> { | 135 | class SelectComponent extends Component<IProps> { |
138 | public static defaultProps = { | 136 | public static defaultProps = { |
139 | onChange: () => {}, | 137 | onChange: () => {}, |
@@ -166,7 +164,7 @@ class SelectComponent extends Component<IProps> { | |||
166 | } | 164 | } |
167 | } | 165 | } |
168 | 166 | ||
169 | componentDidUpdate() { | 167 | componentDidUpdate(prevProps: IProps, prevState: IState) { |
170 | const { | 168 | const { |
171 | open, | 169 | open, |
172 | } = this.state; | 170 | } = this.state; |
@@ -179,41 +177,6 @@ class SelectComponent extends Component<IProps> { | |||
179 | } | 177 | } |
180 | 178 | ||
181 | componentDidMount() { | 179 | componentDidMount() { |
182 | if (this.componentRef && this.componentRef.current) { | ||
183 | this.keyListener = this.componentRef.current.addEventListener('keydown', debounce((e) => { | ||
184 | const { | ||
185 | selected, | ||
186 | open, | ||
187 | options, | ||
188 | } = this.state; | ||
189 | |||
190 | if (!open) return; | ||
191 | |||
192 | if (e.keyCode === 38 && selected > 0) { | ||
193 | this.setState((state: IState) => ({ | ||
194 | selected: state.selected - 1, | ||
195 | })); | ||
196 | } else if (e.keyCode === 40 && selected < Object.keys(options!).length - 1) { | ||
197 | this.setState((state: IState) => ({ | ||
198 | selected: state.selected + 1, | ||
199 | })); | ||
200 | } else if (e.keyCode === 13) { | ||
201 | this.select(Object.keys(options!)[selected]); | ||
202 | } | ||
203 | |||
204 | if (this.activeOptionRef && this.activeOptionRef.current && this.scrollContainerRef && this.scrollContainerRef.current) { | ||
205 | const containerTopOffset = this.scrollContainerRef.current.offsetTop; | ||
206 | const optionTopOffset = this.activeOptionRef.current.offsetTop; | ||
207 | |||
208 | const topOffset = optionTopOffset - containerTopOffset; | ||
209 | |||
210 | this.scrollContainerRef.current.scrollTop = topOffset - 35; | ||
211 | } | ||
212 | }, 10, { | ||
213 | leading: true, | ||
214 | })); | ||
215 | } | ||
216 | |||
217 | if (this.inputRef && this.inputRef.current) { | 180 | if (this.inputRef && this.inputRef.current) { |
218 | const { | 181 | const { |
219 | data, | 182 | data, |
@@ -223,10 +186,14 @@ class SelectComponent extends Component<IProps> { | |||
223 | Object.keys(data).map(key => this.inputRef.current!.dataset[key] = data[key]); | 186 | Object.keys(data).map(key => this.inputRef.current!.dataset[key] = data[key]); |
224 | } | 187 | } |
225 | } | 188 | } |
189 | |||
190 | window.addEventListener('keydown', this.arrowKeysHandler.bind(this), false); | ||
226 | } | 191 | } |
227 | 192 | ||
228 | componentWillMount() { | 193 | componentWillMount() { |
229 | const { value } = this.props; | 194 | const { |
195 | value, | ||
196 | } = this.props; | ||
230 | 197 | ||
231 | if (this.componentRef && this.componentRef.current) { | 198 | if (this.componentRef && this.componentRef.current) { |
232 | this.componentRef.current.removeEventListener('keydown', this.keyListener); | 199 | this.componentRef.current.removeEventListener('keydown', this.keyListener); |
@@ -241,6 +208,10 @@ class SelectComponent extends Component<IProps> { | |||
241 | this.setFilter(); | 208 | this.setFilter(); |
242 | } | 209 | } |
243 | 210 | ||
211 | componentWillUnmount() { | ||
212 | window.removeEventListener('keydown', this.arrowKeysHandler.bind(this)); | ||
213 | } | ||
214 | |||
244 | setFilter(needle: string = '') { | 215 | setFilter(needle: string = '') { |
245 | const { options } = this.props; | 216 | const { options } = this.props; |
246 | 217 | ||
@@ -277,6 +248,49 @@ class SelectComponent extends Component<IProps> { | |||
277 | } | 248 | } |
278 | } | 249 | } |
279 | 250 | ||
251 | arrowKeysHandler(e: KeyboardEvent) { | ||
252 | const { | ||
253 | selected, | ||
254 | open, | ||
255 | options, | ||
256 | } = this.state; | ||
257 | |||
258 | if (!open) return; | ||
259 | |||
260 | if (e.keyCode === 38 || e.keyCode === 40) { | ||
261 | e.preventDefault(); | ||
262 | } | ||
263 | |||
264 | if (this.componentRef && this.componentRef.current) { | ||
265 | if (e.keyCode === 38 && selected > 0) { | ||
266 | this.setState((state: IState) => ({ | ||
267 | selected: state.selected - 1, | ||
268 | })); | ||
269 | } else if (e.keyCode === 40 && selected < Object.keys(options!).length - 1) { | ||
270 | this.setState((state: IState) => ({ | ||
271 | selected: state.selected + 1, | ||
272 | })); | ||
273 | } else if (e.keyCode === 13) { | ||
274 | this.select(Object.keys(options!)[selected]); | ||
275 | } | ||
276 | |||
277 | if (this.activeOptionRef && this.activeOptionRef.current && this.scrollContainerRef && this.scrollContainerRef.current) { | ||
278 | const containerTopOffset = this.scrollContainerRef.current.offsetTop; | ||
279 | const optionTopOffset = this.activeOptionRef.current.offsetTop; | ||
280 | |||
281 | const topOffset = optionTopOffset - containerTopOffset; | ||
282 | |||
283 | this.scrollContainerRef.current.scrollTop = topOffset - 35; | ||
284 | } | ||
285 | } | ||
286 | |||
287 | switch (e.keyCode){ | ||
288 | case 37: case 39: case 38: case 40: // Arrow keys | ||
289 | case 32: break; // Space | ||
290 | default: break; // do not block other keys | ||
291 | } | ||
292 | } | ||
293 | |||
280 | render() { | 294 | render() { |
281 | const { | 295 | const { |
282 | actionText, | 296 | actionText, |
@@ -314,6 +328,7 @@ class SelectComponent extends Component<IProps> { | |||
314 | return ( | 328 | return ( |
315 | <Wrapper | 329 | <Wrapper |
316 | className={className} | 330 | className={className} |
331 | identifier="franz-select" | ||
317 | > | 332 | > |
318 | <Label | 333 | <Label |
319 | title={label} | 334 | title={label} |
@@ -366,7 +381,7 @@ class SelectComponent extends Component<IProps> { | |||
366 | <button | 381 | <button |
367 | type="button" | 382 | type="button" |
368 | className={classes.clearNeedle} | 383 | className={classes.clearNeedle} |
369 | onClick={() => this.setState({ needle: '', selected: -1 })} | 384 | onClick={() => this.setFilter()} |
370 | > | 385 | > |
371 | <Icon | 386 | <Icon |
372 | path={mdiCloseCircle} | 387 | path={mdiCloseCircle} |
diff --git a/packages/forms/src/toggle/index.tsx b/packages/forms/src/toggle/index.tsx index 4f446ab1a..6487f1d07 100644 --- a/packages/forms/src/toggle/index.tsx +++ b/packages/forms/src/toggle/index.tsx | |||
@@ -1,7 +1,6 @@ | |||
1 | import { Theme } from '@meetfranz/theme'; | 1 | import { Theme } from '@meetfranz/theme'; |
2 | import classnames from 'classnames'; | 2 | import classnames from 'classnames'; |
3 | import CSS from 'csstype'; | 3 | import CSS from 'csstype'; |
4 | import { observer } from 'mobx-react'; | ||
5 | import React, { Component, createRef } from 'react'; | 4 | import React, { Component, createRef } from 'react'; |
6 | import injectStyle from 'react-jss'; | 5 | import injectStyle from 'react-jss'; |
7 | 6 | ||
@@ -55,7 +54,6 @@ const styles = (theme: Theme) => ({ | |||
55 | }, | 54 | }, |
56 | }); | 55 | }); |
57 | 56 | ||
58 | @observer | ||
59 | class ToggleComponent extends Component<IProps> { | 57 | class ToggleComponent extends Component<IProps> { |
60 | public static defaultProps = { | 58 | public static defaultProps = { |
61 | onChange: () => {}, | 59 | onChange: () => {}, |
@@ -81,6 +79,7 @@ class ToggleComponent extends Component<IProps> { | |||
81 | return ( | 79 | return ( |
82 | <Wrapper | 80 | <Wrapper |
83 | className={className} | 81 | className={className} |
82 | identifier="franz-toggle" | ||
84 | > | 83 | > |
85 | <Label | 84 | <Label |
86 | title={label} | 85 | title={label} |
diff --git a/packages/forms/src/wrapper/index.tsx b/packages/forms/src/wrapper/index.tsx index 87e2c6513..d9c61381d 100644 --- a/packages/forms/src/wrapper/index.tsx +++ b/packages/forms/src/wrapper/index.tsx | |||
@@ -1,5 +1,4 @@ | |||
1 | import classnames from 'classnames'; | 1 | import classnames from 'classnames'; |
2 | import { observer } from 'mobx-react'; | ||
3 | import React, { Component } from 'react'; | 2 | import React, { Component } from 'react'; |
4 | import injectStyle from 'react-jss'; | 3 | import injectStyle from 'react-jss'; |
5 | import { IWithStyle } from '../typings/generic'; | 4 | import { IWithStyle } from '../typings/generic'; |
@@ -9,22 +8,26 @@ import styles from './styles'; | |||
9 | interface IProps extends IWithStyle { | 8 | interface IProps extends IWithStyle { |
10 | children: React.ReactNode; | 9 | children: React.ReactNode; |
11 | className?: string; | 10 | className?: string; |
11 | identifier: string; | ||
12 | } | 12 | } |
13 | 13 | ||
14 | @observer | ||
15 | class WrapperComponent extends Component<IProps> { | 14 | class WrapperComponent extends Component<IProps> { |
16 | render() { | 15 | render() { |
17 | const { | 16 | const { |
18 | children, | 17 | children, |
19 | classes, | 18 | classes, |
20 | className, | 19 | className, |
20 | identifier, | ||
21 | } = this.props; | 21 | } = this.props; |
22 | 22 | ||
23 | return ( | 23 | return ( |
24 | <div className={classnames({ | 24 | <div |
25 | [`${classes.container}`]: true, | 25 | className={classnames({ |
26 | [`${className}`]: className, | 26 | [`${classes.container}`]: true, |
27 | })}> | 27 | [`${className}`]: className, |
28 | })} | ||
29 | data-type={identifier} | ||
30 | > | ||
28 | {children} | 31 | {children} |
29 | </div> | 32 | </div> |
30 | ); | 33 | ); |
diff --git a/packages/forms/webpack.config.js b/packages/forms/webpack.config.js deleted file mode 100644 index cc3370359..000000000 --- a/packages/forms/webpack.config.js +++ /dev/null | |||
@@ -1,19 +0,0 @@ | |||
1 | const path = require('path'); | ||
2 | const baseConfig = require('../../webpack.config.base')(__dirname); | ||
3 | |||
4 | module.exports = Object.assign({}, baseConfig, { | ||
5 | output: { | ||
6 | filename: 'index.js', | ||
7 | path: path.join(__dirname, 'lib'), | ||
8 | libraryTarget: 'commonjs2', | ||
9 | }, | ||
10 | externals: { | ||
11 | react: 'react', | ||
12 | reactDom: 'react-dom', | ||
13 | classnames: 'classnames', | ||
14 | lodash: 'lodash', | ||
15 | mobx: 'mobx', | ||
16 | mobxReact: 'mobx-react', | ||
17 | reactJss: 'react-jss', | ||
18 | }, | ||
19 | }); | ||