diff options
author | 2019-01-14 22:26:06 +0100 | |
---|---|---|
committer | 2019-01-14 22:26:06 +0100 | |
commit | 8b4231e3109d4b29e4d90f4553f718a1d7867bc5 (patch) | |
tree | b7c89bd60d01cca3692a3e6df580669fd08a4b27 | |
parent | Update package.json (diff) | |
download | ferdium-app-8b4231e3109d4b29e4d90f4553f718a1d7867bc5.tar.gz ferdium-app-8b4231e3109d4b29e4d90f4553f718a1d7867bc5.tar.zst ferdium-app-8b4231e3109d4b29e4d90f4553f718a1d7867bc5.zip |
Add buttons
-rw-r--r-- | package-lock.json | 7 | ||||
-rw-r--r-- | packages/forms/package-lock.json | 309 | ||||
-rw-r--r-- | packages/forms/package.json | 8 | ||||
-rw-r--r-- | packages/forms/src/button/index.tsx | 172 | ||||
-rw-r--r-- | packages/forms/src/error/styles.ts | 1 | ||||
-rw-r--r-- | packages/forms/src/index.ts | 1 | ||||
-rw-r--r-- | packages/forms/src/input/index.tsx | 34 | ||||
-rw-r--r-- | packages/forms/src/input/styles.ts | 6 | ||||
-rw-r--r-- | packages/forms/src/label/styles.ts | 1 | ||||
-rw-r--r-- | packages/forms/src/toggle/index.tsx | 8 | ||||
-rw-r--r-- | packages/forms/src/typings/generic.ts | 2 | ||||
-rw-r--r-- | packages/forms/src/wrapper/index.tsx | 2 | ||||
-rw-r--r-- | packages/forms/typings/react-html-attributes.d.ts | 1 | ||||
-rw-r--r-- | packages/forms/webpack.config.js | 9 | ||||
-rw-r--r-- | uidev/src/app.html | 6 | ||||
-rw-r--r-- | uidev/src/app.tsx | 7 | ||||
-rw-r--r-- | uidev/src/stories/button.stories.tsx | 74 | ||||
-rw-r--r-- | uidev/src/stories/input.stories.tsx | 51 | ||||
-rw-r--r-- | uidev/src/withTheme/index.tsx | 1 | ||||
-rw-r--r-- | uidev/webpack.config.js | 7 |
20 files changed, 426 insertions, 281 deletions
diff --git a/package-lock.json b/package-lock.json index 60cd2aeaf..6b10c8689 100644 --- a/package-lock.json +++ b/package-lock.json | |||
@@ -2725,13 +2725,8 @@ | |||
2725 | "@mdi/js": "^3.3.92", | 2725 | "@mdi/js": "^3.3.92", |
2726 | "@mdi/react": "^1.1.0", | 2726 | "@mdi/react": "^1.1.0", |
2727 | "@meetfranz/theme": "file:packages/theme", | 2727 | "@meetfranz/theme": "file:packages/theme", |
2728 | "classnames": "^2.2.6", | ||
2729 | "lodash": "^4.17.11", | ||
2730 | "mobx": "^5.8.0", | ||
2731 | "mobx-react": "^5.4.3", | ||
2732 | "react": "^16.7.0", | ||
2733 | "react-html-attributes": "^1.4.3", | 2728 | "react-html-attributes": "^1.4.3", |
2734 | "react-jss": "^8.6.1" | 2729 | "react-loader": "^2.4.5" |
2735 | }, | 2730 | }, |
2736 | "dependencies": { | 2731 | "dependencies": { |
2737 | "debug": { | 2732 | "debug": { |
diff --git a/packages/forms/package-lock.json b/packages/forms/package-lock.json index a3e000944..cdfab23b5 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.0", | 3 | "version": "1.0.1", |
4 | "lockfileVersion": 1, | 4 | "lockfileVersion": 1, |
5 | "requires": true, | 5 | "requires": true, |
6 | "dependencies": { | 6 | "dependencies": { |
@@ -60,30 +60,46 @@ | |||
60 | } | 60 | } |
61 | } | 61 | } |
62 | }, | 62 | }, |
63 | "brcast": { | 63 | "asap": { |
64 | "version": "3.0.1", | 64 | "version": "2.0.6", |
65 | "resolved": "https://registry.npmjs.org/brcast/-/brcast-3.0.1.tgz", | 65 | "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz", |
66 | "integrity": "sha512-eI3yqf9YEqyGl9PCNTR46MGvDylGtaHjalcz6Q3fAPnP/PhpKkkve52vFdfGpwp4VUvK6LUr4TQN+2stCrEwTg==" | 66 | "integrity": "sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY=" |
67 | }, | 67 | }, |
68 | "classnames": { | 68 | "core-js": { |
69 | "version": "2.2.6", | 69 | "version": "1.2.7", |
70 | "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz", | 70 | "resolved": "https://registry.npmjs.org/core-js/-/core-js-1.2.7.tgz", |
71 | "integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q==" | 71 | "integrity": "sha1-ZSKUwUZR2yj6k70tX/KYOk8IxjY=" |
72 | }, | 72 | }, |
73 | "css-vendor": { | 73 | "create-react-class": { |
74 | "version": "0.3.8", | 74 | "version": "15.6.3", |
75 | "resolved": "https://registry.npmjs.org/css-vendor/-/css-vendor-0.3.8.tgz", | 75 | "resolved": "https://registry.npmjs.org/create-react-class/-/create-react-class-15.6.3.tgz", |
76 | "integrity": "sha1-ZCHP0wNM5mT+dnOXL9ARn8KJQfo=", | 76 | "integrity": "sha512-M+/3Q6E6DLO6Yx3OwrWjwHBnvfXXYA7W+dFjt/ZDBemHO1DDZhsalX/NUtnTYclN6GfnBDRh4qRHjcDHmlJBJg==", |
77 | "requires": { | 77 | "requires": { |
78 | "is-in-browser": "^1.0.2" | 78 | "fbjs": "^0.8.9", |
79 | "loose-envify": "^1.3.1", | ||
80 | "object-assign": "^4.1.1" | ||
81 | } | ||
82 | }, | ||
83 | "encoding": { | ||
84 | "version": "0.1.12", | ||
85 | "resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.12.tgz", | ||
86 | "integrity": "sha1-U4tm8+5izRq1HsMjgp0flIDHS+s=", | ||
87 | "requires": { | ||
88 | "iconv-lite": "~0.4.13" | ||
79 | } | 89 | } |
80 | }, | 90 | }, |
81 | "hoist-non-react-statics": { | 91 | "fbjs": { |
82 | "version": "3.2.1", | 92 | "version": "0.8.17", |
83 | "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.2.1.tgz", | 93 | "resolved": "https://registry.npmjs.org/fbjs/-/fbjs-0.8.17.tgz", |
84 | "integrity": "sha512-TFsu3TV3YLY+zFTZDrN8L2DTFanObwmBLpWvJs1qfUuEQ5bTAdFcwfx2T/bsCXfM9QHSLvjfP+nihEl0yvozxw==", | 94 | "integrity": "sha1-xNWY6taUkRJlPWWIsBpc3Nn5D90=", |
85 | "requires": { | 95 | "requires": { |
86 | "react-is": "^16.3.2" | 96 | "core-js": "^1.0.0", |
97 | "isomorphic-fetch": "^2.1.1", | ||
98 | "loose-envify": "^1.0.0", | ||
99 | "object-assign": "^4.1.0", | ||
100 | "promise": "^7.1.1", | ||
101 | "setimmediate": "^1.0.5", | ||
102 | "ua-parser-js": "^0.7.18" | ||
87 | } | 103 | } |
88 | }, | 104 | }, |
89 | "html-element-attributes": { | 105 | "html-element-attributes": { |
@@ -91,139 +107,33 @@ | |||
91 | "resolved": "https://registry.npmjs.org/html-element-attributes/-/html-element-attributes-1.3.1.tgz", | 107 | "resolved": "https://registry.npmjs.org/html-element-attributes/-/html-element-attributes-1.3.1.tgz", |
92 | "integrity": "sha512-UrRKgp5sQmRnDy4TEwAUsu14XBUlzKB8U3hjIYDjcZ3Hbp86Jtftzxfgrv6E/ii/h78tsaZwAnAE8HwnHr0dPA==" | 108 | "integrity": "sha512-UrRKgp5sQmRnDy4TEwAUsu14XBUlzKB8U3hjIYDjcZ3Hbp86Jtftzxfgrv6E/ii/h78tsaZwAnAE8HwnHr0dPA==" |
93 | }, | 109 | }, |
94 | "hyphenate-style-name": { | 110 | "iconv-lite": { |
95 | "version": "1.0.2", | 111 | "version": "0.4.24", |
96 | "resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.0.2.tgz", | 112 | "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz", |
97 | "integrity": "sha1-MRYKNpMK2vH8BMYHT360FGXU7Es=" | 113 | "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==", |
98 | }, | 114 | "requires": { |
99 | "is-function": { | 115 | "safer-buffer": ">= 2.1.2 < 3" |
100 | "version": "1.0.1", | 116 | } |
101 | "resolved": "https://registry.npmjs.org/is-function/-/is-function-1.0.1.tgz", | ||
102 | "integrity": "sha1-Es+5i2W1fdPRk6MSH19uL0N2ArU=" | ||
103 | }, | 117 | }, |
104 | "is-in-browser": { | 118 | "is-stream": { |
105 | "version": "1.1.3", | 119 | "version": "1.1.0", |
106 | "resolved": "https://registry.npmjs.org/is-in-browser/-/is-in-browser-1.1.3.tgz", | 120 | "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-1.1.0.tgz", |
107 | "integrity": "sha1-Vv9NtoOgeMYILrldrX3GLh0E+DU=" | 121 | "integrity": "sha1-EtSj3U5o4Lec6428hBc66A2RykQ=" |
108 | }, | 122 | }, |
109 | "is-plain-object": { | 123 | "isomorphic-fetch": { |
110 | "version": "2.0.4", | 124 | "version": "2.2.1", |
111 | "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-2.0.4.tgz", | 125 | "resolved": "https://registry.npmjs.org/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz", |
112 | "integrity": "sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==", | 126 | "integrity": "sha1-YRrhrPFPXoH3KVB0coGf6XM1WKk=", |
113 | "requires": { | 127 | "requires": { |
114 | "isobject": "^3.0.1" | 128 | "node-fetch": "^1.0.1", |
129 | "whatwg-fetch": ">=0.10.0" | ||
115 | } | 130 | } |
116 | }, | 131 | }, |
117 | "isobject": { | ||
118 | "version": "3.0.1", | ||
119 | "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz", | ||
120 | "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8=" | ||
121 | }, | ||
122 | "js-tokens": { | 132 | "js-tokens": { |
123 | "version": "4.0.0", | 133 | "version": "4.0.0", |
124 | "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", | 134 | "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", |
125 | "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==" | 135 | "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==" |
126 | }, | 136 | }, |
127 | "jss": { | ||
128 | "version": "9.8.7", | ||
129 | "resolved": "https://registry.npmjs.org/jss/-/jss-9.8.7.tgz", | ||
130 | "integrity": "sha512-awj3XRZYxbrmmrx9LUSj5pXSUfm12m8xzi/VKeqI1ZwWBtQ0kVPTs3vYs32t4rFw83CgFDukA8wKzOE9sMQnoQ==", | ||
131 | "requires": { | ||
132 | "is-in-browser": "^1.1.3", | ||
133 | "symbol-observable": "^1.1.0", | ||
134 | "warning": "^3.0.0" | ||
135 | } | ||
136 | }, | ||
137 | "jss-camel-case": { | ||
138 | "version": "6.1.0", | ||
139 | "resolved": "https://registry.npmjs.org/jss-camel-case/-/jss-camel-case-6.1.0.tgz", | ||
140 | "integrity": "sha512-HPF2Q7wmNW1t79mCqSeU2vdd/vFFGpkazwvfHMOhPlMgXrJDzdj9viA2SaHk9ZbD5pfL63a8ylp4++irYbbzMQ==", | ||
141 | "requires": { | ||
142 | "hyphenate-style-name": "^1.0.2" | ||
143 | } | ||
144 | }, | ||
145 | "jss-compose": { | ||
146 | "version": "5.0.0", | ||
147 | "resolved": "https://registry.npmjs.org/jss-compose/-/jss-compose-5.0.0.tgz", | ||
148 | "integrity": "sha512-YofRYuiA0+VbeOw0VjgkyO380sA4+TWDrW52nSluD9n+1FWOlDzNbgpZ/Sb3Y46+DcAbOS21W5jo6SAqUEiuwA==", | ||
149 | "requires": { | ||
150 | "warning": "^3.0.0" | ||
151 | } | ||
152 | }, | ||
153 | "jss-default-unit": { | ||
154 | "version": "8.0.2", | ||
155 | "resolved": "https://registry.npmjs.org/jss-default-unit/-/jss-default-unit-8.0.2.tgz", | ||
156 | "integrity": "sha512-WxNHrF/18CdoAGw2H0FqOEvJdREXVXLazn7PQYU7V6/BWkCV0GkmWsppNiExdw8dP4TU1ma1dT9zBNJ95feLmg==" | ||
157 | }, | ||
158 | "jss-expand": { | ||
159 | "version": "5.3.0", | ||
160 | "resolved": "https://registry.npmjs.org/jss-expand/-/jss-expand-5.3.0.tgz", | ||
161 | "integrity": "sha512-NiM4TbDVE0ykXSAw6dfFmB1LIqXP/jdd0ZMnlvlGgEMkMt+weJIl8Ynq1DsuBY9WwkNyzWktdqcEW2VN0RAtQg==" | ||
162 | }, | ||
163 | "jss-extend": { | ||
164 | "version": "6.2.0", | ||
165 | "resolved": "https://registry.npmjs.org/jss-extend/-/jss-extend-6.2.0.tgz", | ||
166 | "integrity": "sha512-YszrmcB6o9HOsKPszK7NeDBNNjVyiW864jfoiHoMlgMIg2qlxKw70axZHqgczXHDcoyi/0/ikP1XaHDPRvYtEA==", | ||
167 | "requires": { | ||
168 | "warning": "^3.0.0" | ||
169 | } | ||
170 | }, | ||
171 | "jss-global": { | ||
172 | "version": "3.0.0", | ||
173 | "resolved": "https://registry.npmjs.org/jss-global/-/jss-global-3.0.0.tgz", | ||
174 | "integrity": "sha512-wxYn7vL+TImyQYGAfdplg7yaxnPQ9RaXY/cIA8hawaVnmmWxDHzBK32u1y+RAvWboa3lW83ya3nVZ/C+jyjZ5Q==" | ||
175 | }, | ||
176 | "jss-nested": { | ||
177 | "version": "6.0.1", | ||
178 | "resolved": "https://registry.npmjs.org/jss-nested/-/jss-nested-6.0.1.tgz", | ||
179 | "integrity": "sha512-rn964TralHOZxoyEgeq3hXY8hyuCElnvQoVrQwKHVmu55VRDd6IqExAx9be5HgK0yN/+hQdgAXQl/GUrBbbSTA==", | ||
180 | "requires": { | ||
181 | "warning": "^3.0.0" | ||
182 | } | ||
183 | }, | ||
184 | "jss-preset-default": { | ||
185 | "version": "4.5.0", | ||
186 | "resolved": "https://registry.npmjs.org/jss-preset-default/-/jss-preset-default-4.5.0.tgz", | ||
187 | "integrity": "sha512-qZbpRVtHT7hBPpZEBPFfafZKWmq3tA/An5RNqywDsZQGrlinIF/mGD9lmj6jGqu8GrED2SMHZ3pPKLmjCZoiaQ==", | ||
188 | "requires": { | ||
189 | "jss-camel-case": "^6.1.0", | ||
190 | "jss-compose": "^5.0.0", | ||
191 | "jss-default-unit": "^8.0.2", | ||
192 | "jss-expand": "^5.3.0", | ||
193 | "jss-extend": "^6.2.0", | ||
194 | "jss-global": "^3.0.0", | ||
195 | "jss-nested": "^6.0.1", | ||
196 | "jss-props-sort": "^6.0.0", | ||
197 | "jss-template": "^1.0.1", | ||
198 | "jss-vendor-prefixer": "^7.0.0" | ||
199 | } | ||
200 | }, | ||
201 | "jss-props-sort": { | ||
202 | "version": "6.0.0", | ||
203 | "resolved": "https://registry.npmjs.org/jss-props-sort/-/jss-props-sort-6.0.0.tgz", | ||
204 | "integrity": "sha512-E89UDcrphmI0LzmvYk25Hp4aE5ZBsXqMWlkFXS0EtPkunJkRr+WXdCNYbXbksIPnKlBenGB9OxzQY+mVc70S+g==" | ||
205 | }, | ||
206 | "jss-template": { | ||
207 | "version": "1.0.1", | ||
208 | "resolved": "https://registry.npmjs.org/jss-template/-/jss-template-1.0.1.tgz", | ||
209 | "integrity": "sha512-m5BqEWha17fmIVXm1z8xbJhY6GFJxNB9H68GVnCWPyGYfxiAgY9WTQyvDAVj+pYRgrXSOfN5V1T4+SzN1sJTeg==", | ||
210 | "requires": { | ||
211 | "warning": "^3.0.0" | ||
212 | } | ||
213 | }, | ||
214 | "jss-vendor-prefixer": { | ||
215 | "version": "7.0.0", | ||
216 | "resolved": "https://registry.npmjs.org/jss-vendor-prefixer/-/jss-vendor-prefixer-7.0.0.tgz", | ||
217 | "integrity": "sha512-Agd+FKmvsI0HLcYXkvy8GYOw3AAASBUpsmIRvVQheps+JWaN892uFOInTr0DRydwaD91vSSUCU4NssschvF7MA==", | ||
218 | "requires": { | ||
219 | "css-vendor": "^0.3.8" | ||
220 | } | ||
221 | }, | ||
222 | "lodash": { | ||
223 | "version": "4.17.11", | ||
224 | "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.11.tgz", | ||
225 | "integrity": "sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg==" | ||
226 | }, | ||
227 | "loose-envify": { | 137 | "loose-envify": { |
228 | "version": "1.4.0", | 138 | "version": "1.4.0", |
229 | "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz", | 139 | "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz", |
@@ -232,18 +142,13 @@ | |||
232 | "js-tokens": "^3.0.0 || ^4.0.0" | 142 | "js-tokens": "^3.0.0 || ^4.0.0" |
233 | } | 143 | } |
234 | }, | 144 | }, |
235 | "mobx": { | 145 | "node-fetch": { |
236 | "version": "5.8.0", | 146 | "version": "1.7.3", |
237 | "resolved": "https://registry.npmjs.org/mobx/-/mobx-5.8.0.tgz", | 147 | "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-1.7.3.tgz", |
238 | "integrity": "sha512-NsZB+9bF5j+nv9Qwk6bNeE3np26a4TbTGkMpOLf6o1zXoM9BtHPQn/00px4uZ2AXJXtQML5P4MEWdMm6icMIfQ==" | 148 | "integrity": "sha512-NhZ4CsKx7cYm2vSrBAr2PvFOe6sWDf0UYLRqA6svUYg7+/TSfVAu49jYC4BvQ4Sms9SZgdqGBgroqfDhJdTyKQ==", |
239 | }, | ||
240 | "mobx-react": { | ||
241 | "version": "5.4.3", | ||
242 | "resolved": "https://registry.npmjs.org/mobx-react/-/mobx-react-5.4.3.tgz", | ||
243 | "integrity": "sha512-WC8yFlwvJ91hy8j6CrydAuFteUafcuvdITFQeHl3LRIf5ayfT/4W3M/byhEYD2BcJWejeXr8y4Rh2H26RunCRQ==", | ||
244 | "requires": { | 149 | "requires": { |
245 | "hoist-non-react-statics": "^3.0.0", | 150 | "encoding": "^0.1.11", |
246 | "react-lifecycles-compat": "^3.0.2" | 151 | "is-stream": "^1.0.1" |
247 | } | 152 | } |
248 | }, | 153 | }, |
249 | "object-assign": { | 154 | "object-assign": { |
@@ -251,6 +156,14 @@ | |||
251 | "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", | 156 | "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", |
252 | "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=" | 157 | "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=" |
253 | }, | 158 | }, |
159 | "promise": { | ||
160 | "version": "7.3.1", | ||
161 | "resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz", | ||
162 | "integrity": "sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==", | ||
163 | "requires": { | ||
164 | "asap": "~2.0.3" | ||
165 | } | ||
166 | }, | ||
254 | "prop-types": { | 167 | "prop-types": { |
255 | "version": "15.6.2", | 168 | "version": "15.6.2", |
256 | "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.6.2.tgz", | 169 | "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.6.2.tgz", |
@@ -260,17 +173,6 @@ | |||
260 | "object-assign": "^4.1.1" | 173 | "object-assign": "^4.1.1" |
261 | } | 174 | } |
262 | }, | 175 | }, |
263 | "react": { | ||
264 | "version": "16.7.0", | ||
265 | "resolved": "https://registry.npmjs.org/react/-/react-16.7.0.tgz", | ||
266 | "integrity": "sha512-StCz3QY8lxTb5cl2HJxjwLFOXPIFQp+p+hxQfc8WE0QiLfCtIlKj8/+5tjjKm8uSTlAW+fCPaavGFS06V9Ar3A==", | ||
267 | "requires": { | ||
268 | "loose-envify": "^1.1.0", | ||
269 | "object-assign": "^4.1.1", | ||
270 | "prop-types": "^15.6.2", | ||
271 | "scheduler": "^0.12.0" | ||
272 | } | ||
273 | }, | ||
274 | "react-html-attributes": { | 176 | "react-html-attributes": { |
275 | "version": "1.4.3", | 177 | "version": "1.4.3", |
276 | "resolved": "https://registry.npmjs.org/react-html-attributes/-/react-html-attributes-1.4.3.tgz", | 178 | "resolved": "https://registry.npmjs.org/react-html-attributes/-/react-html-attributes-1.4.3.tgz", |
@@ -279,67 +181,40 @@ | |||
279 | "html-element-attributes": "^1.0.0" | 181 | "html-element-attributes": "^1.0.0" |
280 | } | 182 | } |
281 | }, | 183 | }, |
282 | "react-is": { | 184 | "react-loader": { |
283 | "version": "16.7.0", | 185 | "version": "2.4.5", |
284 | "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.7.0.tgz", | 186 | "resolved": "https://registry.npmjs.org/react-loader/-/react-loader-2.4.5.tgz", |
285 | "integrity": "sha512-Z0VRQdF4NPDoI0tsXVMLkJLiwEBa+RP66g0xDHxgxysxSoCUccSten4RTF/UFvZF1dZvZ9Zu1sx+MDXwcOR34g==" | 187 | "integrity": "sha1-zT5VHGzQc4wcDxPwc2VPk4KL5ak=", |
286 | }, | ||
287 | "react-jss": { | ||
288 | "version": "8.6.1", | ||
289 | "resolved": "https://registry.npmjs.org/react-jss/-/react-jss-8.6.1.tgz", | ||
290 | "integrity": "sha512-SH6XrJDJkAphp602J14JTy3puB2Zxz1FkM3bKVE8wON+va99jnUTKWnzGECb3NfIn9JPR5vHykge7K3/A747xQ==", | ||
291 | "requires": { | 188 | "requires": { |
292 | "hoist-non-react-statics": "^2.5.0", | 189 | "create-react-class": "^15.5.2", |
293 | "jss": "^9.7.0", | 190 | "prop-types": "^15.5.8", |
294 | "jss-preset-default": "^4.3.0", | 191 | "spin.js": "2.x" |
295 | "prop-types": "^15.6.0", | ||
296 | "theming": "^1.3.0" | ||
297 | }, | ||
298 | "dependencies": { | ||
299 | "hoist-non-react-statics": { | ||
300 | "version": "2.5.5", | ||
301 | "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz", | ||
302 | "integrity": "sha512-rqcy4pJo55FTTLWt+bU8ukscqHeE/e9KWvsOW2b/a3afxQZhwkQdT1rPPCJ0rYXdj4vNcasY8zHTH+jF/qStxw==" | ||
303 | } | ||
304 | } | 192 | } |
305 | }, | 193 | }, |
306 | "react-lifecycles-compat": { | 194 | "safer-buffer": { |
307 | "version": "3.0.4", | 195 | "version": "2.1.2", |
308 | "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz", | 196 | "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz", |
309 | "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==" | 197 | "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==" |
310 | }, | 198 | }, |
311 | "scheduler": { | 199 | "setimmediate": { |
312 | "version": "0.12.0", | 200 | "version": "1.0.5", |
313 | "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.12.0.tgz", | 201 | "resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz", |
314 | "integrity": "sha512-t7MBR28Akcp4Jm+QoR63XgAi9YgCUmgvDHqf5otgAj4QvdoBE4ImCX0ffehefePPG+aitiYHp0g/mW6s4Tp+dw==", | 202 | "integrity": "sha1-KQy7Iy4waULX1+qbg3Mqt4VvgoU=" |
315 | "requires": { | ||
316 | "loose-envify": "^1.1.0", | ||
317 | "object-assign": "^4.1.1" | ||
318 | } | ||
319 | }, | 203 | }, |
320 | "symbol-observable": { | 204 | "spin.js": { |
321 | "version": "1.2.0", | 205 | "version": "2.3.2", |
322 | "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.2.0.tgz", | 206 | "resolved": "https://registry.npmjs.org/spin.js/-/spin.js-2.3.2.tgz", |
323 | "integrity": "sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ==" | 207 | "integrity": "sha1-bKpW1SBnNFD9XPvGlx5tB3LDeho=" |
324 | }, | 208 | }, |
325 | "theming": { | 209 | "ua-parser-js": { |
326 | "version": "1.3.0", | 210 | "version": "0.7.19", |
327 | "resolved": "https://registry.npmjs.org/theming/-/theming-1.3.0.tgz", | 211 | "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.19.tgz", |
328 | "integrity": "sha512-ya5Ef7XDGbTPBv5ENTwrwkPUexrlPeiAg/EI9kdlUAZhNlRbCdhMKRgjNX1IcmsmiPcqDQZE6BpSaH+cr31FKw==", | 212 | "integrity": "sha512-T3PVJ6uz8i0HzPxOF9SWzWAlfN/DavlpQqepn22xgve/5QecC+XMCAtmUNnY7C9StehaV6exjUCI801lOI7QlQ==" |
329 | "requires": { | ||
330 | "brcast": "^3.0.1", | ||
331 | "is-function": "^1.0.1", | ||
332 | "is-plain-object": "^2.0.1", | ||
333 | "prop-types": "^15.5.8" | ||
334 | } | ||
335 | }, | 213 | }, |
336 | "warning": { | 214 | "whatwg-fetch": { |
337 | "version": "3.0.0", | 215 | "version": "3.0.0", |
338 | "resolved": "https://registry.npmjs.org/warning/-/warning-3.0.0.tgz", | 216 | "resolved": "https://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-3.0.0.tgz", |
339 | "integrity": "sha1-MuU3fLVy3kqwR1O9+IIcAe1gW3w=", | 217 | "integrity": "sha512-9GSJUgz1D4MfyKU7KRqwOjXCXTqWdFNvEr7eUBYchQiVc744mqK/MzXPNR2WsPkmkOa4ywfg8C2n8h+13Bey1Q==" |
340 | "requires": { | ||
341 | "loose-envify": "^1.0.0" | ||
342 | } | ||
343 | } | 218 | } |
344 | } | 219 | } |
345 | } | 220 | } |
diff --git a/packages/forms/package.json b/packages/forms/package.json index 68584e626..68bd4d50e 100644 --- a/packages/forms/package.json +++ b/packages/forms/package.json | |||
@@ -26,12 +26,16 @@ | |||
26 | "@mdi/js": "^3.3.92", | 26 | "@mdi/js": "^3.3.92", |
27 | "@mdi/react": "^1.1.0", | 27 | "@mdi/react": "^1.1.0", |
28 | "@meetfranz/theme": "file:../theme", | 28 | "@meetfranz/theme": "file:../theme", |
29 | "react-html-attributes": "^1.4.3", | ||
30 | "react-loader": "^2.4.5" | ||
31 | }, | ||
32 | "peerDependencies": { | ||
29 | "classnames": "^2.2.6", | 33 | "classnames": "^2.2.6", |
30 | "lodash": "^4.17.11", | 34 | "lodash": "^4.17.11", |
35 | "react": "^16.7.0", | ||
31 | "mobx": "^5.8.0", | 36 | "mobx": "^5.8.0", |
32 | "mobx-react": "^5.4.3", | 37 | "mobx-react": "^5.4.3", |
33 | "react": "^16.7.0", | 38 | "react-dom": "16.7.0", |
34 | "react-html-attributes": "^1.4.3", | ||
35 | "react-jss": "^8.6.1" | 39 | "react-jss": "^8.6.1" |
36 | }, | 40 | }, |
37 | "gitHead": "e9a48f96f8659dcd6ac07a8445f60f27d6ae698a" | 41 | "gitHead": "e9a48f96f8659dcd6ac07a8445f60f27d6ae698a" |
diff --git a/packages/forms/src/button/index.tsx b/packages/forms/src/button/index.tsx new file mode 100644 index 000000000..c4a138b16 --- /dev/null +++ b/packages/forms/src/button/index.tsx | |||
@@ -0,0 +1,172 @@ | |||
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 } from 'react'; | ||
6 | import injectStyle from 'react-jss'; | ||
7 | import Loader from 'react-loader'; | ||
8 | |||
9 | import { IFormField, IWithStyle } from '../typings/generic'; | ||
10 | |||
11 | type ButtonType = 'primary' | 'secondary' | 'danger' | 'warning' | 'inverted'; | ||
12 | |||
13 | interface IProps extends React.InputHTMLAttributes<HTMLButtonElement>, IFormField, IWithStyle { | ||
14 | buttonType?: ButtonType; | ||
15 | stretch?: boolean; | ||
16 | loaded?: boolean; | ||
17 | busy?: boolean; | ||
18 | } | ||
19 | |||
20 | interface IState { | ||
21 | busy: boolean; | ||
22 | } | ||
23 | |||
24 | const styles = (theme: Theme) => ({ | ||
25 | button: { | ||
26 | borderRadius: theme.borderRadiusSmall, | ||
27 | border: 'none', | ||
28 | display: 'flex', | ||
29 | position: 'relative' as CSS.PositionProperty, | ||
30 | transition: 'background .5s', | ||
31 | textAlign: 'center' as CSS.TextAlignProperty, | ||
32 | outline: 'none', | ||
33 | alignItems: 'center', | ||
34 | padding: 0, | ||
35 | width: (props: IProps) => (props.stretch ? '100%' : 'auto') as CSS.WidthProperty<string>, | ||
36 | fontSize: theme.uiFontSize, | ||
37 | }, | ||
38 | label: { | ||
39 | margin: '10px 20px', | ||
40 | width: '100%', | ||
41 | }, | ||
42 | primary: { | ||
43 | background: theme.buttonPrimaryBackground, | ||
44 | color: theme.buttonPrimaryTextColor, | ||
45 | }, | ||
46 | secondary: { | ||
47 | background: theme.buttonSecondaryBackground, | ||
48 | color: theme.buttonSecondaryTextColor, | ||
49 | }, | ||
50 | danger: { | ||
51 | background: theme.buttonDangerBackground, | ||
52 | color: theme.buttonDangerTextColor, | ||
53 | }, | ||
54 | warning: { | ||
55 | background: theme.buttonWarningBackground, | ||
56 | color: theme.buttonWarningTextColor, | ||
57 | }, | ||
58 | inverted: { | ||
59 | background: theme.buttonInvertedBackground, | ||
60 | color: theme.buttonInvertedTextColor, | ||
61 | border: theme.buttonInvertedBorder, | ||
62 | }, | ||
63 | disabled: { | ||
64 | opacity: theme.inputDisabledOpacity, | ||
65 | }, | ||
66 | loader: { | ||
67 | position: 'relative' as CSS.PositionProperty, | ||
68 | width: 20, | ||
69 | height: 18, | ||
70 | zIndex: 9999, | ||
71 | }, | ||
72 | loaderContainer: { | ||
73 | width: (props: IProps): string => (!props.busy ? '0' : '40px'), | ||
74 | height: 20, | ||
75 | overflow: 'hidden', | ||
76 | transition: 'all 0.3s', | ||
77 | marginLeft: (props: IProps): number => !props.busy ? 10 : 20, | ||
78 | marginRight: (props: IProps): number => !props.busy ? -10 : -20, | ||
79 | position: (props: IProps): CSS.PositionProperty => props.stretch ? 'absolute' : 'inherit', | ||
80 | }, | ||
81 | }); | ||
82 | |||
83 | @observer | ||
84 | class ButtonComponent extends Component<IProps> { | ||
85 | public static defaultProps = { | ||
86 | type: 'button', | ||
87 | disabled: false, | ||
88 | onClick: () => null, | ||
89 | buttonType: 'primary' as ButtonType, | ||
90 | stretch: false, | ||
91 | busy: false, | ||
92 | }; | ||
93 | |||
94 | state = { | ||
95 | busy: false, | ||
96 | }; | ||
97 | |||
98 | componentWillMount() { | ||
99 | this.setState({ busy: this.props.busy }); | ||
100 | } | ||
101 | |||
102 | componentWillReceiveProps(nextProps: IProps) { | ||
103 | if (nextProps.busy !== this.props.busy) { | ||
104 | if (this.props.busy) { | ||
105 | setTimeout(() => { | ||
106 | this.setState({ busy: nextProps.busy }); | ||
107 | }, 300); | ||
108 | } else { | ||
109 | this.setState({ busy: nextProps.busy }); | ||
110 | } | ||
111 | } | ||
112 | } | ||
113 | |||
114 | render() { | ||
115 | const { | ||
116 | classes, | ||
117 | theme, | ||
118 | disabled, | ||
119 | id, | ||
120 | label, | ||
121 | type, | ||
122 | onClick, | ||
123 | buttonType, | ||
124 | loaded, | ||
125 | busy: busyProp, | ||
126 | } = this.props; | ||
127 | |||
128 | const { | ||
129 | busy, | ||
130 | } = this.state; | ||
131 | |||
132 | let showLoader = false; | ||
133 | if (loaded) { | ||
134 | showLoader = !loaded; | ||
135 | console.warn('Franz Button prop `loaded` will be deprecated in the future. Please use `busy` instead'); | ||
136 | } | ||
137 | if (busy) { | ||
138 | showLoader = busy; | ||
139 | } | ||
140 | |||
141 | return ( | ||
142 | <button | ||
143 | id={id} | ||
144 | type={type} | ||
145 | onClick={onClick} | ||
146 | className={classnames({ | ||
147 | [`${classes.button}`]: true, | ||
148 | [`${classes[buttonType as ButtonType]}`]: true, | ||
149 | [`${classes.disabled}`]: disabled, | ||
150 | })} | ||
151 | disabled={disabled} | ||
152 | > | ||
153 | <div className={classes.loaderContainer}> | ||
154 | {showLoader && ( | ||
155 | <Loader | ||
156 | loaded={false} | ||
157 | width={4} | ||
158 | scale={0.45} | ||
159 | color={theme.buttonLoaderColor[buttonType!]} | ||
160 | parentClassName={classes.loader} | ||
161 | /> | ||
162 | )} | ||
163 | </div> | ||
164 | <div className={classes.label}> | ||
165 | {label} | ||
166 | </div> | ||
167 | </button> | ||
168 | ); | ||
169 | } | ||
170 | } | ||
171 | |||
172 | export const Button = injectStyle(styles)(ButtonComponent); | ||
diff --git a/packages/forms/src/error/styles.ts b/packages/forms/src/error/styles.ts index 36a2b24e7..5104838a5 100644 --- a/packages/forms/src/error/styles.ts +++ b/packages/forms/src/error/styles.ts | |||
@@ -4,5 +4,6 @@ export default (theme: Theme) => ({ | |||
4 | message: { | 4 | message: { |
5 | color: theme.brandDanger, | 5 | color: theme.brandDanger, |
6 | margin: '5px 0 0', | 6 | margin: '5px 0 0', |
7 | fontSize: theme.uiFontSize, | ||
7 | }, | 8 | }, |
8 | }); | 9 | }); |
diff --git a/packages/forms/src/index.ts b/packages/forms/src/index.ts index a506de111..fbeb7e3d3 100644 --- a/packages/forms/src/index.ts +++ b/packages/forms/src/index.ts | |||
@@ -1,2 +1,3 @@ | |||
1 | export { Input } from './input'; | 1 | export { Input } from './input'; |
2 | export { Toggle } from './toggle'; | 2 | export { Toggle } from './toggle'; |
3 | export { Button } from './button'; | ||
diff --git a/packages/forms/src/input/index.tsx b/packages/forms/src/input/index.tsx index d82ee5fe3..8f17ba2f9 100644 --- a/packages/forms/src/input/index.tsx +++ b/packages/forms/src/input/index.tsx | |||
@@ -34,6 +34,7 @@ class InputComponent extends Component<IProps, IState> { | |||
34 | public static defaultProps = { | 34 | public static defaultProps = { |
35 | focus: false, | 35 | focus: false, |
36 | onChange: () => {}, | 36 | onChange: () => {}, |
37 | onBlur: () => {}, | ||
37 | scorePassword: false, | 38 | scorePassword: false, |
38 | showLabel: true, | 39 | showLabel: true, |
39 | showPasswordToggle: false, | 40 | showPasswordToggle: false, |
@@ -74,6 +75,7 @@ class InputComponent extends Component<IProps, IState> { | |||
74 | render() { | 75 | render() { |
75 | const { | 76 | const { |
76 | classes, | 77 | classes, |
78 | className, | ||
77 | disabled, | 79 | disabled, |
78 | error, | 80 | error, |
79 | id, | 81 | id, |
@@ -84,6 +86,11 @@ class InputComponent extends Component<IProps, IState> { | |||
84 | showLabel, | 86 | showLabel, |
85 | showPasswordToggle, | 87 | showPasswordToggle, |
86 | type, | 88 | type, |
89 | value, | ||
90 | name, | ||
91 | placeholder, | ||
92 | spellCheck, | ||
93 | onBlur, | ||
87 | } = this.props; | 94 | } = this.props; |
88 | 95 | ||
89 | const { | 96 | const { |
@@ -91,18 +98,7 @@ class InputComponent extends Component<IProps, IState> { | |||
91 | passwordScore, | 98 | passwordScore, |
92 | } = this.state; | 99 | } = this.state; |
93 | 100 | ||
94 | const inputProps = pick(this.props, htmlElementAttributes['input']); | 101 | const inputType = type === 'password' && showPassword ? 'text' : type; |
95 | |||
96 | if (type === 'password' && showPassword) { | ||
97 | inputProps.type = 'text'; | ||
98 | } | ||
99 | |||
100 | inputProps.onChange = this.onChange.bind(this); | ||
101 | |||
102 | const cssClasses = classnames({ | ||
103 | [`${inputProps.className}`]: inputProps.className, | ||
104 | [`${classes.input}`]: true, | ||
105 | }); | ||
106 | 102 | ||
107 | return ( | 103 | return ( |
108 | <Wrapper> | 104 | <Wrapper> |
@@ -110,10 +106,11 @@ class InputComponent extends Component<IProps, IState> { | |||
110 | title={label} | 106 | title={label} |
111 | showLabel={showLabel} | 107 | showLabel={showLabel} |
112 | htmlFor={id} | 108 | htmlFor={id} |
109 | className={className} | ||
113 | > | 110 | > |
114 | <div | 111 | <div |
115 | className={classnames({ | 112 | className={classnames({ |
116 | [`${classes.hasPasswordScore}`]: showPasswordToggle, | 113 | [`${classes.hasPasswordScore}`]: scorePassword, |
117 | [`${classes.wrapper}`]: true, | 114 | [`${classes.wrapper}`]: true, |
118 | [`${classes.disabled}`]: disabled, | 115 | [`${classes.disabled}`]: disabled, |
119 | [`${classes.hasError}`]: error, | 116 | [`${classes.hasError}`]: error, |
@@ -124,9 +121,16 @@ class InputComponent extends Component<IProps, IState> { | |||
124 | </span> | 121 | </span> |
125 | )} | 122 | )} |
126 | <input | 123 | <input |
127 | {...inputProps} | 124 | id={id} |
128 | className={cssClasses} | 125 | type={inputType} |
126 | name={name} | ||
127 | value={value} | ||
128 | placeholder={placeholder} | ||
129 | spellCheck={spellCheck} | ||
130 | className={classes.input} | ||
129 | ref={this.inputRef} | 131 | ref={this.inputRef} |
132 | onChange={this.onChange.bind(this)} | ||
133 | onBlur={onBlur} | ||
130 | /> | 134 | /> |
131 | {suffix && ( | 135 | {suffix && ( |
132 | <span className={classes.suffix}> | 136 | <span className={classes.suffix}> |
diff --git a/packages/forms/src/input/styles.ts b/packages/forms/src/input/styles.ts index 2b34e92c3..a64d2c340 100644 --- a/packages/forms/src/input/styles.ts +++ b/packages/forms/src/input/styles.ts | |||
@@ -6,12 +6,10 @@ const prefixStyles = (theme: Theme) => ({ | |||
6 | color: theme.inputPrefixColor, | 6 | color: theme.inputPrefixColor, |
7 | lineHeight: theme.inputHeight, | 7 | lineHeight: theme.inputHeight, |
8 | padding: '0 10px', | 8 | padding: '0 10px', |
9 | fontSize: theme.uiFontSize, | ||
9 | }); | 10 | }); |
10 | 11 | ||
11 | export default (theme: Theme) => ({ | 12 | export default (theme: Theme) => ({ |
12 | container: { | ||
13 | // display: 'flex', | ||
14 | }, | ||
15 | disabled: { | 13 | disabled: { |
16 | opacity: theme.inputDisabledOpacity, | 14 | opacity: theme.inputDisabledOpacity, |
17 | }, | 15 | }, |
@@ -33,7 +31,7 @@ export default (theme: Theme) => ({ | |||
33 | input: { | 31 | input: { |
34 | background: 'none', | 32 | background: 'none', |
35 | border: 0, | 33 | border: 0, |
36 | fontSize: theme.inputFontSize, | 34 | fontSize: theme.uiFontSize, |
37 | outline: 'none', | 35 | outline: 'none', |
38 | padding: 8, | 36 | padding: 8, |
39 | width: '100%', | 37 | width: '100%', |
diff --git a/packages/forms/src/label/styles.ts b/packages/forms/src/label/styles.ts index 64011a93d..f3998de04 100644 --- a/packages/forms/src/label/styles.ts +++ b/packages/forms/src/label/styles.ts | |||
@@ -6,6 +6,7 @@ export default (theme: Theme) => ({ | |||
6 | }, | 6 | }, |
7 | label: { | 7 | label: { |
8 | color: theme.labelColor, | 8 | color: theme.labelColor, |
9 | fontSize: theme.uiFontSize, | ||
9 | }, | 10 | }, |
10 | hasError: { | 11 | hasError: { |
11 | color: theme.brandDanger, | 12 | color: theme.brandDanger, |
diff --git a/packages/forms/src/toggle/index.tsx b/packages/forms/src/toggle/index.tsx index 759694dc8..a1cd7f1a4 100644 --- a/packages/forms/src/toggle/index.tsx +++ b/packages/forms/src/toggle/index.tsx | |||
@@ -11,9 +11,7 @@ import Error from '../error'; | |||
11 | import Label from '../label'; | 11 | import Label from '../label'; |
12 | import Wrapper from '../wrapper'; | 12 | import Wrapper from '../wrapper'; |
13 | 13 | ||
14 | interface IProps extends React.InputHTMLAttributes<HTMLInputElement>, IFormField, IWithStyle { | 14 | interface IProps extends React.InputHTMLAttributes<HTMLInputElement>, IFormField, IWithStyle {} |
15 | // field: any; | ||
16 | } | ||
17 | 15 | ||
18 | const styles = (theme: Theme) => ({ | 16 | const styles = (theme: Theme) => ({ |
19 | toggle: { | 17 | toggle: { |
@@ -42,7 +40,7 @@ const styles = (theme: Theme) => ({ | |||
42 | visibility: 'hidden' as any, | 40 | visibility: 'hidden' as any, |
43 | }, | 41 | }, |
44 | disabled: { | 42 | disabled: { |
45 | opacity: 0.5, | 43 | opacity: theme.inputDisabledOpacity, |
46 | }, | 44 | }, |
47 | toggleLabel: { | 45 | toggleLabel: { |
48 | display: 'flex', | 46 | display: 'flex', |
@@ -77,8 +75,6 @@ class ToggleComponent extends Component<IProps> { | |||
77 | onChange, | 75 | onChange, |
78 | } = this.props; | 76 | } = this.props; |
79 | 77 | ||
80 | console.log('props', this.props); | ||
81 | |||
82 | return ( | 78 | return ( |
83 | <Wrapper> | 79 | <Wrapper> |
84 | <Label | 80 | <Label |
diff --git a/packages/forms/src/typings/generic.ts b/packages/forms/src/typings/generic.ts index bd3ea364b..b7f2fc452 100644 --- a/packages/forms/src/typings/generic.ts +++ b/packages/forms/src/typings/generic.ts | |||
@@ -1,3 +1,4 @@ | |||
1 | import { Theme } from '@meetfranz/theme/lib'; | ||
1 | import { Classes } from 'jss'; | 2 | import { Classes } from 'jss'; |
2 | 3 | ||
3 | export interface IFormField { | 4 | export interface IFormField { |
@@ -8,6 +9,7 @@ export interface IFormField { | |||
8 | 9 | ||
9 | export interface IWithStyle { | 10 | export interface IWithStyle { |
10 | classes: Classes; | 11 | classes: Classes; |
12 | theme: Theme; | ||
11 | } | 13 | } |
12 | 14 | ||
13 | export type Merge<M, N> = Omit<M, Extract<keyof M, keyof N>> & N; | 15 | export type Merge<M, N> = Omit<M, Extract<keyof M, keyof N>> & N; |
diff --git a/packages/forms/src/wrapper/index.tsx b/packages/forms/src/wrapper/index.tsx index b3e92da66..633cc4c99 100644 --- a/packages/forms/src/wrapper/index.tsx +++ b/packages/forms/src/wrapper/index.tsx | |||
@@ -18,7 +18,7 @@ class Wrapper extends Component<IProps> { | |||
18 | } = this.props; | 18 | } = this.props; |
19 | 19 | ||
20 | return ( | 20 | return ( |
21 | <div className={classes.container}> | 21 | <div className={classes.container}> |
22 | {children} | 22 | {children} |
23 | </div> | 23 | </div> |
24 | ); | 24 | ); |
diff --git a/packages/forms/typings/react-html-attributes.d.ts b/packages/forms/typings/react-html-attributes.d.ts deleted file mode 100644 index 6f8f20fe4..000000000 --- a/packages/forms/typings/react-html-attributes.d.ts +++ /dev/null | |||
@@ -1 +0,0 @@ | |||
1 | declare module 'react-html-attributes'; | ||
diff --git a/packages/forms/webpack.config.js b/packages/forms/webpack.config.js index 8ad7ee3b6..cc3370359 100644 --- a/packages/forms/webpack.config.js +++ b/packages/forms/webpack.config.js | |||
@@ -7,4 +7,13 @@ module.exports = Object.assign({}, baseConfig, { | |||
7 | path: path.join(__dirname, 'lib'), | 7 | path: path.join(__dirname, 'lib'), |
8 | libraryTarget: 'commonjs2', | 8 | libraryTarget: 'commonjs2', |
9 | }, | 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 | }, | ||
10 | }); | 19 | }); |
diff --git a/uidev/src/app.html b/uidev/src/app.html index 40801775e..2557bf25e 100644 --- a/uidev/src/app.html +++ b/uidev/src/app.html | |||
@@ -4,12 +4,6 @@ | |||
4 | <head> | 4 | <head> |
5 | <title>UIDev</title> | 5 | <title>UIDev</title> |
6 | <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,800" rel="stylesheet"> | 6 | <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,800" rel="stylesheet"> |
7 | <style> | ||
8 | * { | ||
9 | font-family: 'Open Sans', sans-serif; | ||
10 | font-size: 14px; | ||
11 | } | ||
12 | </style> | ||
13 | </head> | 7 | </head> |
14 | 8 | ||
15 | <body> | 9 | <body> |
diff --git a/uidev/src/app.tsx b/uidev/src/app.tsx index 6a5c578f2..0fd524e34 100644 --- a/uidev/src/app.tsx +++ b/uidev/src/app.tsx | |||
@@ -7,14 +7,20 @@ import injectSheet from 'react-jss'; | |||
7 | 7 | ||
8 | import { WithTheme } from './withTheme'; | 8 | import { WithTheme } from './withTheme'; |
9 | 9 | ||
10 | import './stories/button.stories'; | ||
10 | import './stories/input.stories'; | 11 | import './stories/input.stories'; |
11 | import './stories/toggle.stories'; | 12 | import './stories/toggle.stories'; |
12 | 13 | ||
13 | import { store } from './stores'; | 14 | import { store } from './stores'; |
14 | 15 | ||
16 | import { theme, ThemeType } from '@meetfranz/theme'; | ||
17 | const defaultTheme = theme(ThemeType.default); | ||
18 | |||
15 | const styles = { | 19 | const styles = { |
16 | '@global body': { | 20 | '@global body': { |
17 | margin: 0, | 21 | margin: 0, |
22 | fontSize: defaultTheme.uiFontSize, | ||
23 | fontFamily: '\'Open Sans\', sans-serif', | ||
18 | }, | 24 | }, |
19 | container: { | 25 | container: { |
20 | display: 'flex', | 26 | display: 'flex', |
@@ -24,6 +30,7 @@ const styles = { | |||
24 | width: 300, | 30 | width: 300, |
25 | position: 'fixed' as CSS.PositionProperty, | 31 | position: 'fixed' as CSS.PositionProperty, |
26 | listStyleType: 'none', | 32 | listStyleType: 'none', |
33 | fontSize: 14, | ||
27 | }, | 34 | }, |
28 | storyList: { | 35 | storyList: { |
29 | paddingLeft: 18, | 36 | paddingLeft: 18, |
diff --git a/uidev/src/stories/button.stories.tsx b/uidev/src/stories/button.stories.tsx new file mode 100644 index 000000000..1a54eb6bf --- /dev/null +++ b/uidev/src/stories/button.stories.tsx | |||
@@ -0,0 +1,74 @@ | |||
1 | import { observable } from 'mobx'; | ||
2 | import { observer } from 'mobx-react'; | ||
3 | import React from 'react'; | ||
4 | |||
5 | import { Button } from '@meetfranz/forms'; | ||
6 | import { storiesOf } from '../stores/stories'; | ||
7 | |||
8 | const defaultProps = { | ||
9 | label: 'Button', | ||
10 | id: 'test1', | ||
11 | name: 'test1', | ||
12 | type: 'button', | ||
13 | onClick: (e: React.MouseEvent<HTMLButtonElement>) => console.log('click event', e), | ||
14 | disabled: false, | ||
15 | }; | ||
16 | |||
17 | const createStore = (args?: any) => { | ||
18 | return observable(Object.assign({}, defaultProps, args)); | ||
19 | }; | ||
20 | |||
21 | const WithStoreButton = observer(({ store }: { store: any }) => ( | ||
22 | <> | ||
23 | <Button | ||
24 | {...Object.assign({}, defaultProps, store)} | ||
25 | onClick={() => { | ||
26 | store.busy = !store.busy; | ||
27 | |||
28 | window.setTimeout(() => { | ||
29 | store.busy = !store.busy; | ||
30 | }, 1000); | ||
31 | }} | ||
32 | /> | ||
33 | </> | ||
34 | )); | ||
35 | |||
36 | storiesOf('Button') | ||
37 | .add('Basic', () => ( | ||
38 | <WithStoreButton store={createStore()} /> | ||
39 | )) | ||
40 | .add('Secondary', () => ( | ||
41 | <WithStoreButton store={createStore({ | ||
42 | buttonType: 'secondary', | ||
43 | })} /> | ||
44 | )) | ||
45 | .add('Warning', () => ( | ||
46 | <WithStoreButton store={createStore({ | ||
47 | buttonType: 'warning', | ||
48 | })} /> | ||
49 | )) | ||
50 | .add('Danger', () => ( | ||
51 | <WithStoreButton store={createStore({ | ||
52 | buttonType: 'danger', | ||
53 | })} /> | ||
54 | )) | ||
55 | .add('Inverted', () => ( | ||
56 | <WithStoreButton store={createStore({ | ||
57 | buttonType: 'inverted', | ||
58 | })} /> | ||
59 | )) | ||
60 | .add('Full width', () => ( | ||
61 | <WithStoreButton store={createStore({ | ||
62 | stretch: true, | ||
63 | })} /> | ||
64 | )) | ||
65 | .add('Disabled', () => ( | ||
66 | <WithStoreButton store={createStore({ | ||
67 | disabled: true, | ||
68 | })} /> | ||
69 | )) | ||
70 | .add('With loader', () => ( | ||
71 | <WithStoreButton store={createStore({ | ||
72 | busy: true, | ||
73 | })} /> | ||
74 | )); | ||
diff --git a/uidev/src/stories/input.stories.tsx b/uidev/src/stories/input.stories.tsx index 9862ee479..c522a10c7 100644 --- a/uidev/src/stories/input.stories.tsx +++ b/uidev/src/stories/input.stories.tsx | |||
@@ -1,61 +1,68 @@ | |||
1 | import React from 'react'; | 1 | import React from 'react'; |
2 | import uuid from 'uuid/v4'; | ||
2 | 3 | ||
3 | import { Input } from '@meetfranz/forms'; | 4 | import { Input } from '@meetfranz/forms'; |
4 | import { storiesOf } from '../stores/stories'; | 5 | import { storiesOf } from '../stores/stories'; |
5 | 6 | ||
6 | const defaultProps = { | 7 | const defaultProps = () => { |
7 | label: 'Label', | 8 | const id = uuid(); |
8 | id: 'test1', | 9 | return { |
9 | name: 'test1', | 10 | label: 'Label', |
10 | onChange: (e: React.ChangeEvent<HTMLInputElement>) => console.log('changed event', e), | 11 | id: `test-${id}`, |
12 | name: `test-${id}`, | ||
13 | onChange: (e: React.ChangeEvent<HTMLInputElement>) => console.log('changed event', e), | ||
14 | }; | ||
11 | }; | 15 | }; |
12 | 16 | ||
13 | const defaultPasswordProps = { | 17 | const defaultPasswordProps = () => { |
14 | label: 'Password', | 18 | const id = uuid(); |
15 | type: 'password', | 19 | return { |
16 | id: 'test1', | 20 | label: 'Password', |
17 | name: 'test1', | 21 | id: `test-${id}`, |
18 | onChange: (e: React.ChangeEvent<HTMLInputElement>) => console.log('changed event', e), | 22 | name: `test-${id}`, |
23 | type: 'password', | ||
24 | onChange: (e: React.ChangeEvent<HTMLInputElement>) => console.log('changed event', e), | ||
25 | }; | ||
19 | }; | 26 | }; |
20 | 27 | ||
21 | storiesOf('Input') | 28 | storiesOf('Input') |
22 | .add('Basic', () => ( | 29 | .add('Basic', () => ( |
23 | <Input | 30 | <Input |
24 | {...defaultProps} | 31 | {...defaultProps()} |
25 | placeholder="Placeholder text" | 32 | placeholder="Placeholder text" |
26 | /> | 33 | /> |
27 | )) | 34 | )) |
28 | .add('Without Label', () => ( | 35 | .add('Without Label', () => ( |
29 | <Input | 36 | <Input |
30 | {...defaultProps} | 37 | {...defaultProps()} |
31 | showLabel={false} | 38 | showLabel={false} |
32 | /> | 39 | /> |
33 | )) | 40 | )) |
34 | .add('Disabled', () => ( | 41 | .add('Disabled', () => ( |
35 | <Input {...defaultProps} disabled /> | 42 | <Input {...defaultProps()} disabled /> |
36 | )) | 43 | )) |
37 | .add('With prefix', () => ( | 44 | .add('With prefix', () => ( |
38 | <Input | 45 | <Input |
39 | {...defaultProps} | 46 | {...defaultProps()} |
40 | prefix="https://" | 47 | prefix="https://" |
41 | /> | 48 | /> |
42 | )) | 49 | )) |
43 | .add('With suffix', () => ( | 50 | .add('With suffix', () => ( |
44 | <Input | 51 | <Input |
45 | {...defaultProps} | 52 | {...defaultProps()} |
46 | suffix=".meetfranz.com" | 53 | suffix=".meetfranz.com" |
47 | /> | 54 | /> |
48 | )) | 55 | )) |
49 | .add('With pre-suffix', () => ( | 56 | .add('With pre-suffix', () => ( |
50 | <Input | 57 | <Input |
51 | {...defaultProps} | 58 | {...defaultProps()} |
52 | prefix="https://" | 59 | prefix="https://" |
53 | suffix=".meetfranz.com" | 60 | suffix=".meetfranz.com" |
54 | /> | 61 | /> |
55 | )) | 62 | )) |
56 | .add('With error', () => ( | 63 | .add('With error', () => ( |
57 | <Input | 64 | <Input |
58 | {...defaultProps} | 65 | {...defaultProps()} |
59 | value="faulty input" | 66 | value="faulty input" |
60 | error="This is a generic error message." | 67 | error="This is a generic error message." |
61 | /> | 68 | /> |
@@ -64,25 +71,25 @@ storiesOf('Input') | |||
64 | storiesOf('Password') | 71 | storiesOf('Password') |
65 | .add('Basic', () => ( | 72 | .add('Basic', () => ( |
66 | <Input | 73 | <Input |
67 | {...defaultPasswordProps} | 74 | {...defaultPasswordProps()} |
68 | /> | 75 | /> |
69 | )) | 76 | )) |
70 | .add('Show password toggle', () => ( | 77 | .add('Show password toggle', () => ( |
71 | <Input | 78 | <Input |
72 | {...defaultPasswordProps} | 79 | {...defaultPasswordProps()} |
73 | showPasswordToggle | 80 | showPasswordToggle |
74 | /> | 81 | /> |
75 | )) | 82 | )) |
76 | .add('Score password', () => ( | 83 | .add('Score password', () => ( |
77 | <Input | 84 | <Input |
78 | {...defaultPasswordProps} | 85 | {...defaultPasswordProps()} |
79 | showPasswordToggle | 86 | showPasswordToggle |
80 | scorePassword | 87 | scorePassword |
81 | /> | 88 | /> |
82 | )) | 89 | )) |
83 | .add('Score password with error', () => ( | 90 | .add('Score password with error', () => ( |
84 | <Input | 91 | <Input |
85 | {...defaultPasswordProps} | 92 | {...defaultPasswordProps()} |
86 | error="Password is too short" | 93 | error="Password is too short" |
87 | showPasswordToggle | 94 | showPasswordToggle |
88 | scorePassword | 95 | scorePassword |
diff --git a/uidev/src/withTheme/index.tsx b/uidev/src/withTheme/index.tsx index d7d4be3de..17a1074d3 100644 --- a/uidev/src/withTheme/index.tsx +++ b/uidev/src/withTheme/index.tsx | |||
@@ -24,7 +24,6 @@ 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, | ||
28 | background: theme.colorContentBackground, | 27 | background: theme.colorContentBackground, |
29 | }, | 28 | }, |
30 | }); | 29 | }); |
diff --git a/uidev/webpack.config.js b/uidev/webpack.config.js index 8c4a4ade9..74ea870ef 100644 --- a/uidev/webpack.config.js +++ b/uidev/webpack.config.js | |||
@@ -12,6 +12,9 @@ module.exports = { | |||
12 | }, | 12 | }, |
13 | resolve: { | 13 | resolve: { |
14 | extensions: ['.tsx', '.ts', '.js'], | 14 | extensions: ['.tsx', '.ts', '.js'], |
15 | alias: { | ||
16 | react: path.resolve('../node_modules/react'), | ||
17 | }, | ||
15 | }, | 18 | }, |
16 | mode: 'none', | 19 | mode: 'none', |
17 | plugins: [ | 20 | plugins: [ |
@@ -19,4 +22,8 @@ module.exports = { | |||
19 | template: path.join('src', 'app.html'), | 22 | template: path.join('src', 'app.html'), |
20 | }), | 23 | }), |
21 | ], | 24 | ], |
25 | devServer: { | ||
26 | inline: true, | ||
27 | port: 8008, | ||
28 | }, | ||
22 | }; | 29 | }; |