diff options
-rw-r--r-- | package-lock.json | 21 | ||||
-rw-r--r-- | package.json | 2 | ||||
-rw-r--r-- | packages/forms/src/index.ts | 3 | ||||
-rw-r--r-- | packages/forms/src/input/index.tsx | 10 | ||||
-rw-r--r-- | packages/forms/src/input/styles.ts | 2 | ||||
-rw-r--r-- | packages/forms/src/toggle/index.tsx | 117 | ||||
-rw-r--r-- | packages/forms/src/typings/generic.ts | 7 | ||||
-rw-r--r-- | packages/forms/src/wrapper/index.tsx | 2 | ||||
-rw-r--r-- | packages/theme/src/themes/dark/index.ts | 4 | ||||
-rw-r--r-- | packages/theme/src/themes/default/index.ts | 7 | ||||
-rw-r--r-- | src/styles/toggle.scss | 2 | ||||
-rw-r--r-- | tsconfig.settings.json | 8 | ||||
-rw-r--r-- | tsconfig.storybook.json | 7 | ||||
-rw-r--r-- | typings/react-html-attributes.d.ts | 1 | ||||
-rw-r--r-- | typings/storybook__addons.d.ts | 1 | ||||
-rw-r--r-- | uidev/src/app.tsx | 47 | ||||
-rw-r--r-- | uidev/src/stores/stories.ts | 2 | ||||
-rw-r--r-- | uidev/src/stories/input.stories.tsx (renamed from uidev/src/stories/input.tsx) | 2 | ||||
-rw-r--r-- | uidev/src/stories/toggle.stories.tsx | 70 | ||||
-rw-r--r-- | uidev/src/withTheme/index.tsx | 1 | ||||
-rw-r--r-- | uidev/tsconfig.json | 3 |
21 files changed, 281 insertions, 38 deletions
diff --git a/package-lock.json b/package-lock.json index ef9196134..60cd2aeaf 100644 --- a/package-lock.json +++ b/package-lock.json | |||
@@ -2852,6 +2852,12 @@ | |||
2852 | "integrity": "sha512-Z3TNyBL8Vd/M9D9Ms2S3LmFq2sSMzahodD6rCS9V2N44HUMINb75jNkSuwAx7eo2ufqTdfOdtGQpNbieUjPQmw==", | 2852 | "integrity": "sha512-Z3TNyBL8Vd/M9D9Ms2S3LmFq2sSMzahodD6rCS9V2N44HUMINb75jNkSuwAx7eo2ufqTdfOdtGQpNbieUjPQmw==", |
2853 | "dev": true | 2853 | "dev": true |
2854 | }, | 2854 | }, |
2855 | "@types/node": { | ||
2856 | "version": "10.12.18", | ||
2857 | "resolved": "https://registry.npmjs.org/@types/node/-/node-10.12.18.tgz", | ||
2858 | "integrity": "sha512-fh+pAqt4xRzPfqA6eh3Z2y6fyZavRIumvjhaCL753+TVkGKGhpPeyrJG2JftD0T9q4GF00KjefsQ+PQNDdWQaQ==", | ||
2859 | "dev": true | ||
2860 | }, | ||
2855 | "@types/prop-types": { | 2861 | "@types/prop-types": { |
2856 | "version": "15.5.8", | 2862 | "version": "15.5.8", |
2857 | "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.5.8.tgz", | 2863 | "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.5.8.tgz", |
@@ -2898,6 +2904,15 @@ | |||
2898 | "@types/react": "*" | 2904 | "@types/react": "*" |
2899 | } | 2905 | } |
2900 | }, | 2906 | }, |
2907 | "@types/uuid": { | ||
2908 | "version": "3.4.4", | ||
2909 | "resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-3.4.4.tgz", | ||
2910 | "integrity": "sha512-tPIgT0GUmdJQNSHxp0X2jnpQfBSTfGxUMc/2CXBU2mnyTFVYVa2ojpoQ74w0U2yn2vw3jnC640+77lkFFpdVDw==", | ||
2911 | "dev": true, | ||
2912 | "requires": { | ||
2913 | "@types/node": "*" | ||
2914 | } | ||
2915 | }, | ||
2901 | "@webassemblyjs/ast": { | 2916 | "@webassemblyjs/ast": { |
2902 | "version": "1.7.11", | 2917 | "version": "1.7.11", |
2903 | "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.7.11.tgz", | 2918 | "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.7.11.tgz", |
@@ -14156,6 +14171,12 @@ | |||
14156 | } | 14171 | } |
14157 | } | 14172 | } |
14158 | }, | 14173 | }, |
14174 | "mobx-react-devtools": { | ||
14175 | "version": "6.0.3", | ||
14176 | "resolved": "https://registry.npmjs.org/mobx-react-devtools/-/mobx-react-devtools-6.0.3.tgz", | ||
14177 | "integrity": "sha512-PY+lG6XeWaC0DFnDaVC7ImrHJQu7XVXNy4z4fmqHzWc3p+fJisKmaZNwgToO2vJGBghz98Mx2yXUBLw1Ba2mPQ==", | ||
14178 | "dev": true | ||
14179 | }, | ||
14159 | "mobx-react-form": { | 14180 | "mobx-react-form": { |
14160 | "version": "1.35.1", | 14181 | "version": "1.35.1", |
14161 | "resolved": "https://registry.npmjs.org/mobx-react-form/-/mobx-react-form-1.35.1.tgz", | 14182 | "resolved": "https://registry.npmjs.org/mobx-react-form/-/mobx-react-form-1.35.1.tgz", |
diff --git a/package.json b/package.json index 87c1175a4..f9bf78f1d 100644 --- a/package.json +++ b/package.json | |||
@@ -104,6 +104,7 @@ | |||
104 | "@types/react": "^16.7.18", | 104 | "@types/react": "^16.7.18", |
105 | "@types/react-dom": "16.0.11", | 105 | "@types/react-dom": "16.0.11", |
106 | "@types/react-jss": "^8.6.0", | 106 | "@types/react-jss": "^8.6.0", |
107 | "@types/uuid": "3.4.4", | ||
107 | "babel-eslint": "10.0.1", | 108 | "babel-eslint": "10.0.1", |
108 | "babel-loader": "^8.0.4", | 109 | "babel-loader": "^8.0.4", |
109 | "cross-env": "^5.0.5", | 110 | "cross-env": "^5.0.5", |
@@ -132,6 +133,7 @@ | |||
132 | "install": "0.12.2", | 133 | "install": "0.12.2", |
133 | "kebab-case": "1.0.0", | 134 | "kebab-case": "1.0.0", |
134 | "lerna": "^3.8.0", | 135 | "lerna": "^3.8.0", |
136 | "mobx-react-devtools": "6.0.3", | ||
135 | "mocha": "5.2.0", | 137 | "mocha": "5.2.0", |
136 | "node-sass": "4.11.0", | 138 | "node-sass": "4.11.0", |
137 | "npm": "6.5.0", | 139 | "npm": "6.5.0", |
diff --git a/packages/forms/src/index.ts b/packages/forms/src/index.ts index 3f24ecaf7..a506de111 100644 --- a/packages/forms/src/index.ts +++ b/packages/forms/src/index.ts | |||
@@ -1 +1,2 @@ | |||
1 | export { default as Input } from './input'; | 1 | export { Input } from './input'; |
2 | export { Toggle } from './toggle'; | ||
diff --git a/packages/forms/src/input/index.tsx b/packages/forms/src/input/index.tsx index 0e19e3368..d82ee5fe3 100644 --- a/packages/forms/src/input/index.tsx +++ b/packages/forms/src/input/index.tsx | |||
@@ -16,14 +16,12 @@ import scorePasswordFunc from './scorePassword'; | |||
16 | 16 | ||
17 | import styles from './styles'; | 17 | import styles from './styles'; |
18 | 18 | ||
19 | interface IProps extends IFormField, React.InputHTMLAttributes<HTMLInputElement>, IWithStyle { | 19 | interface IProps extends React.InputHTMLAttributes<HTMLInputElement>, IFormField, IWithStyle { |
20 | label: string; | ||
21 | focus?: boolean; | 20 | focus?: boolean; |
22 | prefix?: string; | 21 | prefix?: string; |
23 | suffix?: string; | 22 | suffix?: string; |
24 | scorePassword?: boolean; | 23 | scorePassword?: boolean; |
25 | showPasswordToggle?: boolean; | 24 | showPasswordToggle?: boolean; |
26 | error?: string; | ||
27 | } | 25 | } |
28 | 26 | ||
29 | interface IState { | 27 | interface IState { |
@@ -32,15 +30,15 @@ interface IState { | |||
32 | } | 30 | } |
33 | 31 | ||
34 | @observer | 32 | @observer |
35 | class Input extends Component<IProps, IState> { | 33 | class InputComponent extends Component<IProps, IState> { |
36 | public static defaultProps = { | 34 | public static defaultProps = { |
37 | classes: {}, | ||
38 | focus: false, | 35 | focus: false, |
39 | onChange: () => {}, | 36 | onChange: () => {}, |
40 | scorePassword: false, | 37 | scorePassword: false, |
41 | showLabel: true, | 38 | showLabel: true, |
42 | showPasswordToggle: false, | 39 | showPasswordToggle: false, |
43 | type: 'text', | 40 | type: 'text', |
41 | disabled: false, | ||
44 | }; | 42 | }; |
45 | 43 | ||
46 | state = { | 44 | state = { |
@@ -172,4 +170,4 @@ class Input extends Component<IProps, IState> { | |||
172 | } | 170 | } |
173 | } | 171 | } |
174 | 172 | ||
175 | export default injectSheet(styles)(Input); | 173 | export const Input = injectSheet(styles)(InputComponent); |
diff --git a/packages/forms/src/input/styles.ts b/packages/forms/src/input/styles.ts index 2cdda12ee..2b34e92c3 100644 --- a/packages/forms/src/input/styles.ts +++ b/packages/forms/src/input/styles.ts | |||
@@ -1,5 +1,5 @@ | |||
1 | import { Theme } from '@meetfranz/theme'; | ||
1 | import CSS from 'csstype'; | 2 | import CSS from 'csstype'; |
2 | import { Theme } from '../../../theme/lib'; | ||
3 | 3 | ||
4 | const prefixStyles = (theme: Theme) => ({ | 4 | const prefixStyles = (theme: Theme) => ({ |
5 | background: theme.inputPrefixBackground, | 5 | background: theme.inputPrefixBackground, |
diff --git a/packages/forms/src/toggle/index.tsx b/packages/forms/src/toggle/index.tsx new file mode 100644 index 000000000..759694dc8 --- /dev/null +++ b/packages/forms/src/toggle/index.tsx | |||
@@ -0,0 +1,117 @@ | |||
1 | import { Theme } from '@meetfranz/theme'; | ||
2 | import classnames from 'classnames'; | ||
3 | import CSS from 'csstype'; | ||
4 | import { observer } from 'mobx-react'; | ||
5 | import React, { Component, createRef } from 'react'; | ||
6 | import injectStyle from 'react-jss'; | ||
7 | |||
8 | import { IFormField, IWithStyle, Omit } from '../typings/generic'; | ||
9 | |||
10 | import Error from '../error'; | ||
11 | import Label from '../label'; | ||
12 | import Wrapper from '../wrapper'; | ||
13 | |||
14 | interface IProps extends React.InputHTMLAttributes<HTMLInputElement>, IFormField, IWithStyle { | ||
15 | // field: any; | ||
16 | } | ||
17 | |||
18 | const styles = (theme: Theme) => ({ | ||
19 | toggle: { | ||
20 | background: theme.toggleBackground, | ||
21 | borderRadius: theme.borderRadius, | ||
22 | height: theme.toggleHeight, | ||
23 | position: 'relative' as CSS.PositionProperty, | ||
24 | width: theme.toggleWidth, | ||
25 | }, | ||
26 | button: { | ||
27 | background: theme.toggleButton, | ||
28 | borderRadius: '100%', | ||
29 | boxShadow: '0 1px 4px rgba(0, 0, 0, .3)', | ||
30 | width: theme.toggleHeight - 2, | ||
31 | height: theme.toggleHeight - 2, | ||
32 | left: 1, | ||
33 | top: 1, | ||
34 | position: 'absolute' as CSS.PositionProperty, | ||
35 | transition: 'all .5s', | ||
36 | }, | ||
37 | buttonActive: { | ||
38 | background: theme.toggleButtonActive, | ||
39 | left: (theme.toggleWidth - theme.toggleHeight) + 1, | ||
40 | }, | ||
41 | input: { | ||
42 | visibility: 'hidden' as any, | ||
43 | }, | ||
44 | disabled: { | ||
45 | opacity: 0.5, | ||
46 | }, | ||
47 | toggleLabel: { | ||
48 | display: 'flex', | ||
49 | |||
50 | '& > span': { | ||
51 | order: 1, | ||
52 | marginLeft: 15, | ||
53 | marginTop: 2, | ||
54 | }, | ||
55 | }, | ||
56 | }); | ||
57 | |||
58 | @observer | ||
59 | class ToggleComponent extends Component<IProps> { | ||
60 | public static defaultProps = { | ||
61 | onChange: () => {}, | ||
62 | showLabel: true, | ||
63 | disabled: false, | ||
64 | error: '', | ||
65 | }; | ||
66 | |||
67 | render() { | ||
68 | const { | ||
69 | classes, | ||
70 | disabled, | ||
71 | error, | ||
72 | id, | ||
73 | label, | ||
74 | showLabel, | ||
75 | checked, | ||
76 | value, | ||
77 | onChange, | ||
78 | } = this.props; | ||
79 | |||
80 | console.log('props', this.props); | ||
81 | |||
82 | return ( | ||
83 | <Wrapper> | ||
84 | <Label | ||
85 | title={label} | ||
86 | showLabel={showLabel} | ||
87 | htmlFor={id} | ||
88 | className={classes.toggleLabel} | ||
89 | > | ||
90 | <div className={classnames({ | ||
91 | [`${classes.toggle}`]: true, | ||
92 | [`${classes.disabled}`]: disabled, | ||
93 | })}> | ||
94 | <div className={classnames({ | ||
95 | [`${classes.button}`]: true, | ||
96 | [`${classes.buttonActive}`]: checked, | ||
97 | })} /> | ||
98 | <input | ||
99 | className={classes.input} | ||
100 | id={id || name} | ||
101 | type="checkbox" | ||
102 | checked={checked} | ||
103 | value={value} | ||
104 | onChange={onChange} | ||
105 | disabled={disabled} | ||
106 | /> | ||
107 | </div> | ||
108 | </Label> | ||
109 | {error && ( | ||
110 | <Error message={error} /> | ||
111 | )} | ||
112 | </Wrapper> | ||
113 | ); | ||
114 | } | ||
115 | } | ||
116 | |||
117 | export const Toggle = injectStyle(styles)(ToggleComponent); | ||
diff --git a/packages/forms/src/typings/generic.ts b/packages/forms/src/typings/generic.ts index e1e497050..bd3ea364b 100644 --- a/packages/forms/src/typings/generic.ts +++ b/packages/forms/src/typings/generic.ts | |||
@@ -1,11 +1,14 @@ | |||
1 | import { Classes } from 'jss'; | 1 | import { Classes } from 'jss'; |
2 | 2 | ||
3 | export interface IFormField { | 3 | export interface IFormField { |
4 | title?: string; | ||
5 | showLabel?: boolean; | 4 | showLabel?: boolean; |
6 | isError?: boolean; | 5 | label?: string; |
6 | error?: string; | ||
7 | } | 7 | } |
8 | 8 | ||
9 | export interface IWithStyle { | 9 | export interface IWithStyle { |
10 | classes: Classes; | 10 | classes: Classes; |
11 | } | 11 | } |
12 | |||
13 | export type Merge<M, N> = Omit<M, Extract<keyof M, keyof N>> & N; | ||
14 | export type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>; | ||
diff --git a/packages/forms/src/wrapper/index.tsx b/packages/forms/src/wrapper/index.tsx index c2444b0ea..b3e92da66 100644 --- a/packages/forms/src/wrapper/index.tsx +++ b/packages/forms/src/wrapper/index.tsx | |||
@@ -1,3 +1,4 @@ | |||
1 | import { observer } from 'mobx-react'; | ||
1 | import React, { Component } from 'react'; | 2 | import React, { Component } from 'react'; |
2 | import injectStyle from 'react-jss'; | 3 | import injectStyle from 'react-jss'; |
3 | import { IWithStyle } from '../typings/generic'; | 4 | import { IWithStyle } from '../typings/generic'; |
@@ -8,6 +9,7 @@ interface IProps extends IWithStyle { | |||
8 | children: React.ReactNode; | 9 | children: React.ReactNode; |
9 | } | 10 | } |
10 | 11 | ||
12 | @observer | ||
11 | class Wrapper extends Component<IProps> { | 13 | class Wrapper extends Component<IProps> { |
12 | render() { | 14 | render() { |
13 | const { | 15 | const { |
diff --git a/packages/theme/src/themes/dark/index.ts b/packages/theme/src/themes/dark/index.ts index 7eac5a3c3..0cc4caa16 100644 --- a/packages/theme/src/themes/dark/index.ts +++ b/packages/theme/src/themes/dark/index.ts | |||
@@ -24,3 +24,7 @@ export const inputDisabledOpacity = 0.5; | |||
24 | export const inputScorePasswordBackground = legacyStyles.darkThemeGrayDark; | 24 | export const inputScorePasswordBackground = legacyStyles.darkThemeGrayDark; |
25 | export const inputModifierColor = color(legacyStyles.darkThemeGrayLighter).lighten(0.3).hex(); | 25 | export const inputModifierColor = color(legacyStyles.darkThemeGrayLighter).lighten(0.3).hex(); |
26 | export const inputPlaceholderColor = color(legacyStyles.darkThemeGrayLighter).darken(0.1).hex(); | 26 | export const inputPlaceholderColor = color(legacyStyles.darkThemeGrayLighter).darken(0.1).hex(); |
27 | |||
28 | // Toggle | ||
29 | export const toggleBackground = legacyStyles.darkThemeGray; | ||
30 | export const toggleButton = legacyStyles.darkThemeGrayLighter; | ||
diff --git a/packages/theme/src/themes/default/index.ts b/packages/theme/src/themes/default/index.ts index b22730413..ea218cd8f 100644 --- a/packages/theme/src/themes/default/index.ts +++ b/packages/theme/src/themes/default/index.ts | |||
@@ -42,3 +42,10 @@ export const inputPrefixColor = legacyStyles.themeGrayLight; | |||
42 | export const inputPrefixBackground = legacyStyles.themeGrayLighter; | 42 | export const inputPrefixBackground = legacyStyles.themeGrayLighter; |
43 | export const inputDisabledOpacity = 0.5; | 43 | export const inputDisabledOpacity = 0.5; |
44 | export const inputScorePasswordBackground = legacyStyles.themeGrayLighter; | 44 | export const inputScorePasswordBackground = legacyStyles.themeGrayLighter; |
45 | |||
46 | // Toggle | ||
47 | export const toggleBackground = legacyStyles.themeGrayLighter; | ||
48 | export const toggleButton = legacyStyles.themeGrayLight; | ||
49 | export const toggleButtonActive = brandPrimary; | ||
50 | export const toggleWidth = 40; | ||
51 | export const toggleHeight = 14; | ||
diff --git a/src/styles/toggle.scss b/src/styles/toggle.scss index 0ce0c3379..52675ceed 100644 --- a/src/styles/toggle.scss +++ b/src/styles/toggle.scss | |||
@@ -41,7 +41,7 @@ $toggle-button-size: 22px; | |||
41 | 41 | ||
42 | &.is-active .franz-form__toggle-button { | 42 | &.is-active .franz-form__toggle-button { |
43 | background: $theme-brand-primary; | 43 | background: $theme-brand-primary; |
44 | left: $toggle-width - $toggle-size - 3;; | 44 | left: $toggle-width - $toggle-size - 3; |
45 | } | 45 | } |
46 | 46 | ||
47 | input { display: none; } | 47 | input { display: none; } |
diff --git a/tsconfig.settings.json b/tsconfig.settings.json index 84081fab7..ccd0927ab 100644 --- a/tsconfig.settings.json +++ b/tsconfig.settings.json | |||
@@ -1,5 +1,6 @@ | |||
1 | { | 1 | { |
2 | "compilerOptions": { | 2 | "compilerOptions": { |
3 | "baseUrl": ".", | ||
3 | "target": "esnext", | 4 | "target": "esnext", |
4 | "module": "commonjs", | 5 | "module": "commonjs", |
5 | "lib": [ | 6 | "lib": [ |
@@ -13,6 +14,11 @@ | |||
13 | "allowSyntheticDefaultImports": true, | 14 | "allowSyntheticDefaultImports": true, |
14 | "experimentalDecorators": true, | 15 | "experimentalDecorators": true, |
15 | "composite": true, | 16 | "composite": true, |
16 | "esModuleInterop": true | 17 | "esModuleInterop": true, |
18 | "typeRoots": ["packages/typings/types", "node_modules/@types"], | ||
19 | "paths": { | ||
20 | "@types/*": ["packages/typings/types/*.d.ts"], | ||
21 | "*": ["packages/typings/types/*.d.ts"] | ||
22 | } | ||
17 | } | 23 | } |
18 | } | 24 | } |
diff --git a/tsconfig.storybook.json b/tsconfig.storybook.json deleted file mode 100644 index 46e0e6cfa..000000000 --- a/tsconfig.storybook.json +++ /dev/null | |||
@@ -1,7 +0,0 @@ | |||
1 | { | ||
2 | "extends": "./tsconfig.settings.json", | ||
3 | "compilerOptions": { | ||
4 | "outDir": ".tstmp", | ||
5 | "rootDir": "./" | ||
6 | }, | ||
7 | } | ||
diff --git a/typings/react-html-attributes.d.ts b/typings/react-html-attributes.d.ts deleted file mode 100644 index 6f8f20fe4..000000000 --- a/typings/react-html-attributes.d.ts +++ /dev/null | |||
@@ -1 +0,0 @@ | |||
1 | declare module 'react-html-attributes'; | ||
diff --git a/typings/storybook__addons.d.ts b/typings/storybook__addons.d.ts deleted file mode 100644 index 14ccd3cf0..000000000 --- a/typings/storybook__addons.d.ts +++ /dev/null | |||
@@ -1 +0,0 @@ | |||
1 | declare module '@storybook/addons'; | ||
diff --git a/uidev/src/app.tsx b/uidev/src/app.tsx index a1c9ee343..6a5c578f2 100644 --- a/uidev/src/app.tsx +++ b/uidev/src/app.tsx | |||
@@ -1,20 +1,34 @@ | |||
1 | import CSS from 'csstype'; | ||
1 | import { Classes } from 'jss'; | 2 | import { Classes } from 'jss'; |
3 | import { observer } from 'mobx-react'; | ||
4 | import DevTools from 'mobx-react-devtools'; | ||
2 | import React, { Component } from 'react'; | 5 | import React, { Component } from 'react'; |
3 | import { render } from 'react-dom'; | ||
4 | import injectSheet from 'react-jss'; | 6 | import injectSheet from 'react-jss'; |
5 | import './stories/input'; | 7 | |
6 | import { WithTheme } from './withTheme'; | 8 | import { WithTheme } from './withTheme'; |
7 | 9 | ||
10 | import './stories/input.stories'; | ||
11 | import './stories/toggle.stories'; | ||
12 | |||
8 | import { store } from './stores'; | 13 | import { store } from './stores'; |
9 | 14 | ||
10 | const styles = { | 15 | const styles = { |
16 | '@global body': { | ||
17 | margin: 0, | ||
18 | }, | ||
11 | container: { | 19 | container: { |
12 | display: 'flex', | 20 | display: 'flex', |
13 | width: '100%', | 21 | width: '100%', |
14 | }, | 22 | }, |
15 | menu: { | 23 | menu: { |
16 | width: 300, | 24 | width: 300, |
17 | position: 'fixed' as any, | 25 | position: 'fixed' as CSS.PositionProperty, |
26 | listStyleType: 'none', | ||
27 | }, | ||
28 | storyList: { | ||
29 | paddingLeft: 18, | ||
30 | marginTop: 5, | ||
31 | marginBottom: 20, | ||
18 | }, | 32 | }, |
19 | stories: { | 33 | stories: { |
20 | width: '100%', | 34 | width: '100%', |
@@ -22,6 +36,7 @@ const styles = { | |||
22 | paddingLeft: 40, | 36 | paddingLeft: 40, |
23 | paddingRight: 40, | 37 | paddingRight: 40, |
24 | borderLeft: '1px solid #CFCFCF', | 38 | borderLeft: '1px solid #CFCFCF', |
39 | background: '#f7f7f7', | ||
25 | }, | 40 | }, |
26 | sectionHeadline: { | 41 | sectionHeadline: { |
27 | fontSize: 30, | 42 | fontSize: 30, |
@@ -34,24 +49,29 @@ const styles = { | |||
34 | marginBottom: 40, | 49 | marginBottom: 40, |
35 | borderBottom: '1px solid #CFCFCF', | 50 | borderBottom: '1px solid #CFCFCF', |
36 | }, | 51 | }, |
52 | sectionLink: { | ||
53 | fontWeight: 'bold' as CSS.FontWeightProperty, | ||
54 | color: '#000', | ||
55 | textDecoration: 'none', | ||
56 | }, | ||
57 | storyLink: { | ||
58 | color: '#000', | ||
59 | textDecoration: 'none', | ||
60 | }, | ||
37 | }; | 61 | }; |
38 | 62 | ||
39 | const foo = { | 63 | export const App = injectSheet(styles)(observer(({ classes }: { classes: Classes }) => ( |
40 | seas: 'bar', | ||
41 | }; | ||
42 | |||
43 | export const App = injectSheet(styles)(({ classes }: { classes: Classes }) => ( | ||
44 | <div className={classes.container}> | 64 | <div className={classes.container}> |
45 | <ul className={classes.menu}> | 65 | <ul className={classes.menu}> |
46 | {store.stories.sections.map((section, key) => ( | 66 | {store.stories.sections.map((section, key) => ( |
47 | <li key={key}> | 67 | <li key={key}> |
48 | <a href={`#section-${key}`}>{ | 68 | <a href={`#section-${key}`} className={classes.sectionLink}>{ |
49 | section.name} | 69 | section.name} |
50 | </a> | 70 | </a> |
51 | <ul> | 71 | <ul className={classes.storyList}> |
52 | {section.stories.map((story, storyKey) => ( | 72 | {section.stories.map((story, storyKey) => ( |
53 | <li key={storyKey}> | 73 | <li key={storyKey}> |
54 | <a href={`#section-${key}-story-${storyKey}`}> | 74 | <a href={`#section-${key}-story-${storyKey}`} className={classes.storyLink}> |
55 | {story.name} | 75 | {story.name} |
56 | </a> | 76 | </a> |
57 | </li> | 77 | </li> |
@@ -78,12 +98,13 @@ export const App = injectSheet(styles)(({ classes }: { classes: Classes }) => ( | |||
78 | {story.name} | 98 | {story.name} |
79 | </h2> | 99 | </h2> |
80 | <WithTheme> | 100 | <WithTheme> |
81 | {story.component()} | 101 | <story.component /> |
82 | </WithTheme> | 102 | </WithTheme> |
83 | </div> | 103 | </div> |
84 | ))} | 104 | ))} |
85 | </div> | 105 | </div> |
86 | ))} | 106 | ))} |
87 | </div> | 107 | </div> |
108 | <DevTools /> | ||
88 | </div> | 109 | </div> |
89 | )); | 110 | ))); |
diff --git a/uidev/src/stores/stories.ts b/uidev/src/stores/stories.ts index 064bf275f..6a98c9fd3 100644 --- a/uidev/src/stores/stories.ts +++ b/uidev/src/stores/stories.ts | |||
@@ -2,7 +2,7 @@ import { store } from './index'; | |||
2 | 2 | ||
3 | export type StorySectionName = string; | 3 | export type StorySectionName = string; |
4 | export type StoryName = string; | 4 | export type StoryName = string; |
5 | export type StoryComponent = Function; | 5 | export type StoryComponent = () => JSX.Element; |
6 | 6 | ||
7 | export interface IStories { | 7 | export interface IStories { |
8 | name: string; | 8 | name: string; |
diff --git a/uidev/src/stories/input.tsx b/uidev/src/stories/input.stories.tsx index dc8f6e997..9862ee479 100644 --- a/uidev/src/stories/input.tsx +++ b/uidev/src/stories/input.stories.tsx | |||
@@ -3,8 +3,6 @@ import React from 'react'; | |||
3 | import { Input } from '@meetfranz/forms'; | 3 | import { Input } from '@meetfranz/forms'; |
4 | import { storiesOf } from '../stores/stories'; | 4 | import { storiesOf } from '../stores/stories'; |
5 | 5 | ||
6 | export const stories = () => (<div>input stories</div>); | ||
7 | |||
8 | const defaultProps = { | 6 | const defaultProps = { |
9 | label: 'Label', | 7 | label: 'Label', |
10 | id: 'test1', | 8 | id: 'test1', |
diff --git a/uidev/src/stories/toggle.stories.tsx b/uidev/src/stories/toggle.stories.tsx new file mode 100644 index 000000000..091342496 --- /dev/null +++ b/uidev/src/stories/toggle.stories.tsx | |||
@@ -0,0 +1,70 @@ | |||
1 | import { observable } from 'mobx'; | ||
2 | import { observer } from 'mobx-react'; | ||
3 | import React from 'react'; | ||
4 | import uuid from 'uuid/v4'; | ||
5 | |||
6 | import { Toggle } from '@meetfranz/forms'; | ||
7 | import { storiesOf } from '../stores/stories'; | ||
8 | |||
9 | interface IStoreArgs { | ||
10 | value?: boolean; | ||
11 | checked?: boolean; | ||
12 | label?: string; | ||
13 | id?: string; | ||
14 | name?: string; | ||
15 | disabled?: boolean; | ||
16 | error?: string; | ||
17 | } | ||
18 | |||
19 | const createStore = (args?: IStoreArgs) => { | ||
20 | return observable(Object.assign({ | ||
21 | id: `element-${uuid()}`, | ||
22 | name: 'toggle', | ||
23 | label: 'Label', | ||
24 | value: true, | ||
25 | checked: false, | ||
26 | disabled: false, | ||
27 | error: '', | ||
28 | }, args)); | ||
29 | }; | ||
30 | |||
31 | const WithStoreToggle = observer(({ store }: { store: any }) => ( | ||
32 | <> | ||
33 | <Toggle | ||
34 | value={store.value} | ||
35 | checked={store.checked} | ||
36 | label={store.label} | ||
37 | id={store.id} | ||
38 | name={store.name} | ||
39 | disabled={store.disabled} | ||
40 | error={store.error} | ||
41 | onChange={() => store.checked = !store.checked} | ||
42 | /> | ||
43 | </> | ||
44 | )); | ||
45 | |||
46 | storiesOf('Toggle') | ||
47 | .add('Basic', () => ( | ||
48 | <WithStoreToggle store={createStore()} /> | ||
49 | )) | ||
50 | .add('Checked', () => ( | ||
51 | <WithStoreToggle store={createStore({ | ||
52 | checked: true, | ||
53 | })} /> | ||
54 | )) | ||
55 | .add('Disabled', () => ( | ||
56 | <WithStoreToggle store={createStore({ | ||
57 | checked: true, | ||
58 | disabled: true, | ||
59 | })} /> | ||
60 | )) | ||
61 | .add('Long label', () => ( | ||
62 | <WithStoreToggle store={createStore({ | ||
63 | label: 'Hello world, this is an insanely long label for this toggle. We need to make sure that it will be displayed correctly.', | ||
64 | })} /> | ||
65 | )) | ||
66 | .add('With error', () => ( | ||
67 | <WithStoreToggle store={createStore({ | ||
68 | error: 'Something went wrong', | ||
69 | })} /> | ||
70 | )); | ||
diff --git a/uidev/src/withTheme/index.tsx b/uidev/src/withTheme/index.tsx index 17a1074d3..d7d4be3de 100644 --- a/uidev/src/withTheme/index.tsx +++ b/uidev/src/withTheme/index.tsx | |||
@@ -24,6 +24,7 @@ const styles = (theme: Theme) => ({ | |||
24 | borderRadius: theme.borderRadiusSmall, | 24 | borderRadius: theme.borderRadiusSmall, |
25 | marginBottom: 20, | 25 | marginBottom: 20, |
26 | padding: 20, | 26 | padding: 20, |
27 | paddingBottom: 5, | ||
27 | background: theme.colorContentBackground, | 28 | background: theme.colorContentBackground, |
28 | }, | 29 | }, |
29 | }); | 30 | }); |
diff --git a/uidev/tsconfig.json b/uidev/tsconfig.json index 23a59e665..fb57639c8 100644 --- a/uidev/tsconfig.json +++ b/uidev/tsconfig.json | |||
@@ -1,8 +1,9 @@ | |||
1 | { | 1 | { |
2 | "extends": "../tsconfig.settings.json", | 2 | "extends": "../tsconfig.settings.json", |
3 | "compilerOptions": { | 3 | "compilerOptions": { |
4 | "baseUrl": "..", | ||
4 | "outDir": "lib", | 5 | "outDir": "lib", |
5 | "rootDir": "src" | 6 | "rootDir": "src", |
6 | }, | 7 | }, |
7 | "references": [{ | 8 | "references": [{ |
8 | "path": "../packages/theme" | 9 | "path": "../packages/theme" |