react-outline 1.7.3 → 2.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (83) hide show
  1. package/README.md +151 -116
  2. package/dist/Styles.js +34 -35
  3. package/dist/element.js +69 -88
  4. package/dist/main.js +22 -35
  5. package/dist/reactOutline.js +241 -0
  6. package/dist/reactOutline.js.map +7 -0
  7. package/dist/styleItem.js +105 -91
  8. package/dist/utils/buildCssString.js +2 -2
  9. package/dist/utils/genCss.js +21 -32
  10. package/dist/utils/genStyles.js +13 -26
  11. package/dist/utils/hasKids.js +2 -4
  12. package/dist/utils/index.js +80 -66
  13. package/dist/utils/makeid.js +3 -6
  14. package/dist/utils/object2css.js +10 -22
  15. package/dist/utils/pubsub.js +10 -24
  16. package/dist/utils/replaceColors.js +3 -4
  17. package/dist/utils/replacedStyleFn.js +5 -10
  18. package/dist/utils/sanitizeOutlineInput.js +8 -24
  19. package/dist/utils/separateCssStyle.js +5 -8
  20. package/dist/wrapStyles.js +18 -14
  21. package/package.json +36 -24
  22. package/.babelrc +0 -6
  23. package/.travis.yml +0 -7
  24. package/__snapshots__/cornerCases.test.js.snap +0 -139
  25. package/__snapshots__/example.test.js.snap +0 -408
  26. package/cornerCases.test.js +0 -367
  27. package/dist/utils/sanitizeStyleObj.js +0 -22
  28. package/empty-module.js +0 -1
  29. package/example/.babelrc +0 -4
  30. package/example/.storybook/config.js +0 -7
  31. package/example/.storybook/webpack.config.js +0 -14
  32. package/example/README.md +0 -11
  33. package/example/package.json +0 -55
  34. package/example/stories/Animate/basic.js +0 -73
  35. package/example/stories/Basics/CreatingAndApplyingAStyle.js +0 -12
  36. package/example/stories/Basics/Form.js +0 -24
  37. package/example/stories/Basics/ImpliedTags.js +0 -40
  38. package/example/stories/Basics/PassingStyleAndFuntion.js +0 -13
  39. package/example/stories/Basics/PassingStyleAndFuntionAsArray.js +0 -13
  40. package/example/stories/Basics/ReusingElements.js +0 -13
  41. package/example/stories/Basics/Share.js +0 -19
  42. package/example/stories/Basics/UsingTheTagCreater.js +0 -13
  43. package/example/stories/Basics/WrappingAnExistingElement.js +0 -19
  44. package/example/stories/Button.js +0 -27
  45. package/example/stories/CSSHelpers/CssSelector.js +0 -24
  46. package/example/stories/CSSHelpers/CssSource.js +0 -18
  47. package/example/stories/CSSHelpers/DynamicCssSelectors.js +0 -24
  48. package/example/stories/CSSHelpers/Hover.js +0 -20
  49. package/example/stories/CSSHelpers/MediaQuery.js +0 -22
  50. package/example/stories/CSSHelpers/VendorPrefix.js +0 -19
  51. package/example/stories/CombineStyles/CreatingAndApplyingAStyle.js +0 -16
  52. package/example/stories/CombineStyles/LogicFnWithGenerateElement.js +0 -16
  53. package/example/stories/CombineStyles/PassStyleObjToGenerateElement.js +0 -9
  54. package/example/stories/CombineStyles/UsingAPropFlag.js +0 -16
  55. package/example/stories/CombineStyles/UsingTheTagCreater.js +0 -16
  56. package/example/stories/Ref/byFn.js +0 -51
  57. package/example/stories/Ref/onEvent.js +0 -43
  58. package/example/stories/RuntimeFunctions/DynamicStyles.js +0 -32
  59. package/example/stories/RuntimeFunctions/FunctionWithOutStyle.js +0 -31
  60. package/example/stories/RuntimeFunctions/ModifyingStyles.js +0 -36
  61. package/example/stories/RuntimeFunctions/WithGeneratedElements.js +0 -38
  62. package/example/stories/Welcome.js +0 -90
  63. package/example/stories/index.js +0 -88
  64. package/example/stories/load.js +0 -229
  65. package/example.test.js +0 -16
  66. package/source/Styles.js +0 -23
  67. package/source/element.js +0 -100
  68. package/source/main.js +0 -56
  69. package/source/styleItem.js +0 -105
  70. package/source/utils/buildCssString.js +0 -6
  71. package/source/utils/genCss.js +0 -30
  72. package/source/utils/genStyles.js +0 -19
  73. package/source/utils/hasKids.js +0 -6
  74. package/source/utils/index.js +0 -27
  75. package/source/utils/makeid.js +0 -9
  76. package/source/utils/object2css.js +0 -20
  77. package/source/utils/pubsub.js +0 -22
  78. package/source/utils/replaceColors.js +0 -11
  79. package/source/utils/replacedStyleFn.js +0 -30
  80. package/source/utils/sanitizeOutlineInput.js +0 -72
  81. package/source/utils/sanitizeStyleObj.js +0 -13
  82. package/source/utils/separateCssStyle.js +0 -25
  83. package/source/wrapStyles.js +0 -30
package/__snapshots__/example.test.js.snap DELETED
@@ -1,408 +0,0 @@
1
- // Jest Snapshot v1, https://goo.gl/fbAQLP
2
-
3
- exports[`Basics Generate a element from a style 1`] = `
4
- <div
5
- name="title"
6
- style={
7
- Object {
8
- "backgroundColor": "red",
9
- }
10
- }
11
- >
12
- basic
13
- </div>
14
- `;
15
-
16
- exports[`Basics Generate an implied named element 1`] = `
17
- <table
18
- name="table"
19
- style={
20
- Object {
21
- "borderCollapse": "collapse",
22
- "width": "100%",
23
- }
24
- }
25
- >
26
- <tr
27
- name="tr"
28
- style={
29
- Object {
30
- "borderBottom": "thick solid red",
31
- }
32
- }
33
- >
34
- <td
35
- name="td"
36
- style={
37
- Object {
38
- "border": "1px solid #dddddd",
39
- "padding": "8px",
40
- }
41
- }
42
- >
43
- Maria Anders
44
- </td>
45
- <td
46
- name="td"
47
- style={
48
- Object {
49
- "border": "1px solid #dddddd",
50
- "padding": "8px",
51
- }
52
- }
53
- >
54
- Germany
55
- </td>
56
- </tr>
57
- <tr
58
- name="tr"
59
- style={
60
- Object {
61
- "borderBottom": "thick solid red",
62
- }
63
- }
64
- >
65
- <td
66
- name="td"
67
- style={
68
- Object {
69
- "border": "1px solid #dddddd",
70
- "padding": "8px",
71
- }
72
- }
73
- >
74
- Francisco Chang
75
- </td>
76
- <td
77
- name="td"
78
- style={
79
- Object {
80
- "border": "1px solid #dddddd",
81
- "padding": "8px",
82
- }
83
- }
84
- >
85
- Mexico
86
- </td>
87
- </tr>
88
- <tr
89
- name="tr"
90
- style={
91
- Object {
92
- "borderBottom": "thick solid red",
93
- }
94
- }
95
- >
96
- <td
97
- name="td"
98
- style={
99
- Object {
100
- "border": "1px solid #dddddd",
101
- "padding": "8px",
102
- }
103
- }
104
- >
105
- Roland Mendel
106
- </td>
107
- <td
108
- name="td"
109
- style={
110
- Object {
111
- "border": "1px solid #dddddd",
112
- "padding": "8px",
113
- }
114
- }
115
- >
116
- Austria
117
- </td>
118
- </tr>
119
- </table>
120
- `;
121
-
122
- exports[`Basics Passing Style and Funtion as arguments 1`] = `
123
- <div
124
- name="title"
125
- style={
126
- Object {
127
- "backgroundColor": "red",
128
- "color": "white",
129
- }
130
- }
131
- >
132
- basic
133
- </div>
134
- `;
135
-
136
- exports[`Basics Reusing elements 1`] = `
137
- <div>
138
- <span
139
- name="title"
140
- style={
141
- Object {
142
- "backgroundColor": "red",
143
- }
144
- }
145
- >
146
- foo
147
- </span>
148
- <span
149
- name="title"
150
- style={
151
- Object {
152
- "backgroundColor": "red",
153
- }
154
- }
155
- >
156
- bar
157
- </span>
158
- </div>
159
- `;
160
-
161
- exports[`Basics Sharing Style 1`] = `
162
- <div>
163
- <div
164
- name="title"
165
- style={
166
- Object {
167
- "backgroundColor": "red",
168
- "textShadow": "2px 2px 2px black",
169
- }
170
- }
171
- >
172
- basic
173
- </div>
174
- <span
175
- style={
176
- Object {
177
- "color": "red",
178
- "textShadow": "2px 2px 2px black",
179
- }
180
- }
181
- >
182
- content
183
- </span>
184
- </div>
185
- `;
186
-
187
- exports[`Basics Wrapping an existing element 1`] = `
188
- <div
189
- style={
190
- Object {
191
- "backgroundColor": "red",
192
- }
193
- }
194
- >
195
- Hello,
196
- basic
197
- </div>
198
- `;
199
-
200
- exports[`Basics ⚠ Passing Style and Funtion as Array 1`] = `
201
- <div
202
- name="title"
203
- style={
204
- Object {
205
- "backgroundColor": "red",
206
- "color": "white",
207
- }
208
- }
209
- >
210
- basic
211
- </div>
212
- `;
213
-
214
- exports[`CSS Helpers Css Selector 1`] = `
215
- <div>
216
- <style>
217
- .react-outline-:hover{ color:blue; } .react-outline-{text-shadow:1px 1px 10px #000; color:white; cursor:pointer; }
218
- </style>
219
- <div
220
- className="react-outline-"
221
- name="title"
222
- >
223
- <div>
224
- foo
225
- </div>
226
- <div>
227
- bar
228
- </div>
229
- <div>
230
- baz
231
- </div>
232
- </div>
233
- </div>
234
- `;
235
-
236
- exports[`CSS Helpers Css Source 1`] = `
237
- <div>
238
- <style>
239
- .react-outline-:hover{ color:blue; } .react-outline-{text-shadow:1px 1px 10px #000; color:white; cursor:pointer; } .title{ font-size: 25px; background-color: yellow; }
240
- </style>
241
- <div
242
- className="title"
243
- >
244
- basic
245
- </div>
246
- </div>
247
- `;
248
-
249
- exports[`CSS Helpers Dynamic Css Selector 1`] = `
250
- <div>
251
- <style>
252
- .react-outline-:hover{ color:blue; } .react-outline-{text-shadow:1px 1px 10px #000; color:white; cursor:pointer; }
253
- </style>
254
- <div
255
- className="react-outline-"
256
- css={
257
- Object {
258
- "div:nth-child(even)": Object {
259
- "color": "red",
260
- },
261
- }
262
- }
263
- name="title"
264
- >
265
- <div>
266
- foo
267
- </div>
268
- <div>
269
- bar
270
- </div>
271
- <div>
272
- baz
273
- </div>
274
- </div>
275
- </div>
276
- `;
277
-
278
- exports[`CSS Helpers Media Query 1`] = `
279
- <div>
280
- <style>
281
- .react-outline-:hover{ color:blue; } .react-outline-{text-shadow:1px 1px 10px #000; color:white; cursor:pointer; }
282
- </style>
283
- <div
284
- className="react-outline-"
285
- name="title"
286
- >
287
- basic
288
- </div>
289
- </div>
290
- `;
291
-
292
- exports[`CSS Helpers Mouse hover 1`] = `
293
- <div>
294
- <style>
295
- .react-outline-:hover{ color:blue; } .react-outline-{text-shadow:1px 1px 10px #000; color:white; cursor:pointer; }
296
- </style>
297
- <div
298
- className="react-outline-"
299
- name="title"
300
- >
301
- basic
302
- </div>
303
- </div>
304
- `;
305
-
306
- exports[`Combine styles In a generated element 1`] = `
307
- <div
308
- name="title"
309
- style={
310
- Object {
311
- "color": "#f00",
312
- "fontSize": "25px",
313
- }
314
- }
315
- >
316
- basic
317
- </div>
318
- `;
319
-
320
- exports[`Combine styles Logic function With Generate Element 1`] = `
321
- <div
322
- name="title"
323
- style={
324
- Object {
325
- "color": "#f00",
326
- "fontSize": "25px",
327
- }
328
- }
329
- >
330
- basic
331
- </div>
332
- `;
333
-
334
- exports[`Combine styles Passing a Style objct to a generated element 1`] = `
335
- <div
336
- name="title"
337
- style={
338
- Object {
339
- "color": "red",
340
- "fontSize": 25,
341
- }
342
- }
343
- >
344
- basic
345
- </div>
346
- `;
347
-
348
- exports[`Combine styles Using a prop flag 1`] = `
349
- <div
350
- name="title"
351
- style={
352
- Object {
353
- "color": "#f00",
354
- "fontSize": "25px",
355
- }
356
- }
357
- >
358
- basic
359
- </div>
360
- `;
361
-
362
- exports[`Style Functions Function with generated elements 1`] = `
363
- <div
364
- name="content"
365
- style={
366
- Object {
367
- "backgroundColor": "red",
368
- "height": "300px",
369
- }
370
- }
371
- >
372
-
373
- <span
374
- name="cell"
375
- style={
376
- Object {
377
- "fontSize": -5,
378
- }
379
- }
380
- styles={true}
381
- >
382
- foo
383
- </span>
384
- <span
385
- name="cell"
386
- style={
387
- Object {
388
- "fontSize": -5,
389
- }
390
- }
391
- styles={false}
392
- >
393
- bar
394
- </span>
395
- <span
396
- name="cell"
397
- style={
398
- Object {
399
- "fontSize": -5,
400
- }
401
- }
402
- styles={undefined}
403
- >
404
- cat
405
- </span>
406
-
407
- </div>
408
- `;