@mohamed-karawia/library 0.1.18 → 0.1.19

Sign up to get free protection for your applications and to get access to all the features.
Files changed (113) hide show
  1. package/dist/stories/Chat/Chat.js +120 -3
  2. package/dist/stories/Common Inputs/Picker/Picker.js +61 -0
  3. package/dist/stories/Common Inputs/TextField/TextField.js +3 -1
  4. package/dist/stories/Community/Community.js +137 -0
  5. package/dist/stories/Events/Event/Event.js +116 -4
  6. package/dist/stories/Events/EventsList/EventsList.js +95 -16
  7. package/dist/stories/Forms/CreateSpace/CreateSpace.js +75 -0
  8. package/dist/stories/Library/Folders/Folders.js +80 -1
  9. package/dist/stories/Library/Notes/Notes.js +75 -1
  10. package/dist/stories/Modals/NavbarPreviewModal/NavbarPreviewModal.js +54 -0
  11. package/dist/stories/Music Album/ViewAlbum/ViewAlbum.js +134 -9
  12. package/dist/stories/Music Album/ViewAlbums/ViewAlbums.js +65 -23
  13. package/dist/stories/Navbar/Navbar.js +1 -1
  14. package/dist/stories/Pages/Events/Event/Event.js +14 -5
  15. package/dist/stories/Pages/Music/MusicAlbums/MusicAlbums.js +2 -15
  16. package/dist/stories/Photo Album/ViewAlbum/ViewAlbum.js +76 -9
  17. package/dist/stories/Photo Album/ViewAlbums/ViewAlbums.js +80 -9
  18. package/dist/stories/Preview/Preview.js +1 -0
  19. package/dist/stories/PreviewComponents/ChatPreview/ChatPreview.js +193 -0
  20. package/dist/stories/PreviewComponents/EventPreview/EventPreview.js +158 -0
  21. package/dist/stories/PreviewComponents/EventsPreview/EventsPreview.js +192 -0
  22. package/dist/stories/PreviewComponents/FoldersPreview/FoldersPreview.js +182 -0
  23. package/dist/stories/PreviewComponents/MusicAlbumPreview/MusicAlbumPreview.js +177 -0
  24. package/dist/stories/PreviewComponents/MusicAlbumsPreview/MusicAlbumsPreview.js +181 -0
  25. package/dist/stories/PreviewComponents/MusicPlayerPreview/MusicPlayerPreview.js +153 -0
  26. package/dist/stories/PreviewComponents/NavbarPreview/NavbarPreview.js +112 -0
  27. package/dist/stories/PreviewComponents/NotesPreview/NotesPreview.js +173 -0
  28. package/dist/stories/PreviewComponents/PhotoAlbumPreview/PhotoAlbumPreview.js +189 -0
  29. package/dist/stories/PreviewComponents/PhotoAlbumsPreview/PhotoAlbumsPreview.js +189 -0
  30. package/dist/stories/PreviewComponents/SpacesListPreview/SpacesListPreview.js +197 -0
  31. package/dist/stories/PreviewComponents/VideoAlbumPreview/VideoAlbumPreview.js +189 -0
  32. package/dist/stories/PreviewComponents/VideoAlbumsPreview/VideoAlbumsPreview.js +175 -0
  33. package/dist/stories/PreviewComponents/VideoPreview/VideoPreview.js +172 -0
  34. package/dist/stories/PreviewComponents/globalStyles.js +26 -0
  35. package/dist/stories/Reusable Components/Cards/Card-style-10/CardStyle10.js +4 -3
  36. package/dist/stories/Reusable Components/Cards/Card-style-11/CardStyle11.js +8 -4
  37. package/dist/stories/Reusable Components/Cards/Card-style-6/CardStyle6.js +10 -4
  38. package/dist/stories/Reusable Components/Cards/Card-style-8/CardStyle8.js +4 -2
  39. package/dist/stories/Reusable Components/Cards/globalCardStyles.js +2 -2
  40. package/dist/stories/Reusable Components/Community/Community.js +76 -0
  41. package/dist/stories/Reusable Components/Gallery/Gallery.js +12 -17
  42. package/dist/stories/Reusable Components/ReactModal/ReactModal.js +11 -30
  43. package/dist/stories/Reusable Components/ReusableForm/ReusableForm.js +19 -2
  44. package/dist/stories/Reusable Components/ReusableList/ReusableList.js +9 -5
  45. package/dist/stories/Reusable Components/Tabs/Tabs.js +68 -0
  46. package/dist/stories/Sections/Sections.js +8 -2
  47. package/dist/stories/VideoAlbum/AlbumsGallery/AlbumsGallery.js +77 -18
  48. package/dist/stories/VideoAlbum/VideoSpace/VideoSpace.js +96 -3
  49. package/dist/stories/VideoAlbum/ViewAlbum/ViewAlbum.js +77 -1
  50. package/dist/stories/Widgets/MusicPlayerWidget/MusicPlayerWidget.js +16 -10
  51. package/dist/stories/Widgets/SpacesListWidget/SpacesListWidget.js +115 -0
  52. package/dist/stories/Widgets/UsersWidget/UsersWidget.js +30 -0
  53. package/dist/stories/helpers/util.js +36 -3
  54. package/dist/stories/store/communities.js +943 -0
  55. package/dist/stories/store/store.js +44 -0
  56. package/package.json +5 -2
  57. package/src/stories/Chat/Chat.jsx +104 -5
  58. package/src/stories/Common Inputs/Picker/Picker.jsx +47 -0
  59. package/src/stories/Common Inputs/TextField/TextField.jsx +1 -1
  60. package/src/stories/Community/Community.jsx +110 -0
  61. package/src/stories/Events/Event/Event.jsx +97 -4
  62. package/src/stories/Events/EventsList/EventsList.jsx +91 -17
  63. package/src/stories/Forms/CreateSpace/CreateSpace.jsx +73 -0
  64. package/src/stories/Library/Folders/Folders.jsx +79 -1
  65. package/src/stories/Library/Notes/Notes.jsx +57 -1
  66. package/src/stories/Modals/NavbarPreviewModal/NavbarPreviewModal.jsx +31 -0
  67. package/src/stories/Music Album/ViewAlbum/ViewAlbum.jsx +125 -11
  68. package/src/stories/Music Album/ViewAlbums/ViewAlbums.jsx +56 -26
  69. package/src/stories/Navbar/Navbar.jsx +1 -1
  70. package/src/stories/Pages/Events/Event/Event.jsx +12 -4
  71. package/src/stories/Pages/Music/MusicAlbums/MusicAlbums.jsx +0 -13
  72. package/src/stories/Pages/ViewWorld/styles.json +1 -1
  73. package/src/stories/Photo Album/ViewAlbum/ViewAlbum.jsx +57 -4
  74. package/src/stories/Photo Album/ViewAlbums/ViewAlbums.jsx +62 -9
  75. package/src/stories/Preview/Preview.jsx +9 -1
  76. package/src/stories/PreviewComponents/ChatPreview/ChatPreview.jsx +132 -0
  77. package/src/stories/PreviewComponents/EventPreview/EventPreview.jsx +116 -0
  78. package/src/stories/PreviewComponents/EventsPreview/EventsPreview.jsx +132 -0
  79. package/src/stories/PreviewComponents/FoldersPreview/FoldersPreview.jsx +127 -0
  80. package/src/stories/PreviewComponents/MusicAlbumPreview/MusicAlbumPreview.jsx +124 -0
  81. package/src/stories/PreviewComponents/MusicAlbumsPreview/MusicAlbumsPreview.jsx +126 -0
  82. package/src/stories/PreviewComponents/MusicPlayerPreview/MusicPlayerPreview.jsx +113 -0
  83. package/src/stories/PreviewComponents/NavbarPreview/NavbarPreview.jsx +93 -0
  84. package/src/stories/PreviewComponents/NotesPreview/NotesPreview.jsx +122 -0
  85. package/src/stories/PreviewComponents/PhotoAlbumPreview/PhotoAlbumPreview.jsx +129 -0
  86. package/src/stories/PreviewComponents/PhotoAlbumsPreview/PhotoAlbumsPreview.jsx +129 -0
  87. package/src/stories/PreviewComponents/SpacesListPreview/SpacesListPreview.jsx +138 -0
  88. package/src/stories/PreviewComponents/VideoAlbumPreview/VideoAlbumPreview.jsx +129 -0
  89. package/src/stories/PreviewComponents/VideoAlbumsPreview/VideoAlbumsPreview.jsx +124 -0
  90. package/src/stories/PreviewComponents/VideoPreview/VideoPreview.jsx +125 -0
  91. package/src/stories/PreviewComponents/globalStyles.js +20 -0
  92. package/src/stories/Reusable Components/Cards/Card-style-10/CardStyle10.jsx +5 -2
  93. package/src/stories/Reusable Components/Cards/Card-style-11/CardStyle11.jsx +5 -5
  94. package/src/stories/Reusable Components/Cards/Card-style-6/CardStyle6.jsx +12 -6
  95. package/src/stories/Reusable Components/Cards/Card-style-8/CardStyle8.jsx +2 -2
  96. package/src/stories/Reusable Components/Cards/globalCardStyles.js +2 -1
  97. package/src/stories/Reusable Components/Community/Community.jsx +70 -0
  98. package/src/stories/Reusable Components/Gallery/Gallery.jsx +10 -9
  99. package/src/stories/Reusable Components/ReactModal/ReactModal.jsx +3 -25
  100. package/src/stories/Reusable Components/ReusableForm/ReusableForm.jsx +18 -6
  101. package/src/stories/Reusable Components/ReusableList/ReusableList.jsx +9 -4
  102. package/src/stories/Reusable Components/Tabs/Tabs.jsx +67 -0
  103. package/src/stories/Sections/Sections.jsx +5 -2
  104. package/src/stories/VideoAlbum/AlbumsGallery/AlbumsGallery.jsx +57 -16
  105. package/src/stories/VideoAlbum/VideoSpace/VideoSpace.jsx +70 -1
  106. package/src/stories/VideoAlbum/ViewAlbum/ViewAlbum.jsx +62 -3
  107. package/src/stories/Widgets/MusicPlayerWidget/MusicPlayerWidget.jsx +13 -6
  108. package/src/stories/Widgets/SpacesListWidget/SpacesListWidget.jsx +78 -0
  109. package/src/stories/Widgets/UsersWidget/UsersWidget.jsx +20 -0
  110. package/src/stories/helpers/util.js +24 -2
  111. package/src/stories/store/communities.js +705 -0
  112. package/src/stories/store/store.js +33 -0
  113. package/src/stories/styling.json +92 -0
@@ -0,0 +1,192 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+
5
+ Object.defineProperty(exports, "__esModule", {
6
+ value: true
7
+ });
8
+ exports.default = void 0;
9
+
10
+ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
11
+
12
+ var _react = _interopRequireWildcard(require("react"));
13
+
14
+ var _Preview = _interopRequireDefault(require("../../Preview/Preview"));
15
+
16
+ var _ReusableForm = _interopRequireDefault(require("../../Reusable Components/ReusableForm/ReusableForm"));
17
+
18
+ var _globalStyles = require("../globalStyles");
19
+
20
+ var _Picker = _interopRequireDefault(require("../../Common Inputs/Picker/Picker"));
21
+
22
+ var _TextField = _interopRequireDefault(require("../../Common Inputs/TextField/TextField"));
23
+
24
+ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
25
+
26
+ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
27
+
28
+ var EventsPreview = function EventsPreview(props) {
29
+ var _useState = (0, _react.useState)({}),
30
+ _useState2 = (0, _slicedToArray2.default)(_useState, 2),
31
+ eventsStyles = _useState2[0],
32
+ setEventsStyles = _useState2[1];
33
+
34
+ var initialValues = {
35
+ headerStyles: {
36
+ headerBackground: '',
37
+ padding: 0,
38
+ titleColor: '',
39
+ titleFontSize: '',
40
+ titleFontWeight: '',
41
+ controlsStyles: {
42
+ iconSize: '',
43
+ iconColor: ''
44
+ }
45
+ },
46
+ customCardStyles: {
47
+ cardBackgroundColor: '',
48
+ onHoverBackgroundColor: '',
49
+ cardRadius: '',
50
+ cardTitleFontSize: '',
51
+ cardTitleFontWeight: '',
52
+ cardTitleColor: '',
53
+ cardImageRadius: '',
54
+ iconColor: '',
55
+ cardPadding: 0,
56
+ imgSize: 0,
57
+ cardBorderSize: 0,
58
+ cardBorderColor: '',
59
+ dateColor: '',
60
+ controlsStyles: ''
61
+ }
62
+ };
63
+ var sections = [{
64
+ title: "Header Styles",
65
+ body: [/*#__PURE__*/_react.default.createElement(_Picker.default, {
66
+ label: "Header Background",
67
+ name: "headerStyles.headerBackground"
68
+ }), /*#__PURE__*/_react.default.createElement(_TextField.default, {
69
+ type: "number",
70
+ label: "Padding",
71
+ name: "headerStyles.padding"
72
+ }), /*#__PURE__*/_react.default.createElement(_Picker.default, {
73
+ label: "Title Color",
74
+ name: "headerStyles.titleColor"
75
+ }), /*#__PURE__*/_react.default.createElement(_TextField.default, {
76
+ type: "number",
77
+ label: "Title Font Size",
78
+ name: "headerStyles.titleFontSize"
79
+ }), /*#__PURE__*/_react.default.createElement(_TextField.default, {
80
+ type: "number",
81
+ label: "Title Font Weight",
82
+ name: "headerStyles.titleFontWeight"
83
+ }), /*#__PURE__*/_react.default.createElement(_TextField.default, {
84
+ type: "number",
85
+ label: "Controls Size",
86
+ name: "headerStyles.controlsStyles.iconSize"
87
+ }), /*#__PURE__*/_react.default.createElement(_Picker.default, {
88
+ label: "Controls Color",
89
+ name: "headerStyles.controlsStyles.iconColor"
90
+ })]
91
+ }, {
92
+ title: "Card Styles",
93
+ body: [/*#__PURE__*/_react.default.createElement(_Picker.default, {
94
+ label: "Card Background",
95
+ name: "customCardStyles.cardBackgroundColor"
96
+ }), /*#__PURE__*/_react.default.createElement(_Picker.default, {
97
+ label: "Hover Color",
98
+ name: "customCardStyles.onHoverBackgroundColor"
99
+ }), /*#__PURE__*/_react.default.createElement(_TextField.default, {
100
+ type: "number",
101
+ label: "Card Radius",
102
+ name: "customCardStyles.cardRadius"
103
+ }), /*#__PURE__*/_react.default.createElement(_TextField.default, {
104
+ type: "number",
105
+ label: "Title Font Size",
106
+ name: "customCardStyles.cardTitleFontSize"
107
+ }), /*#__PURE__*/_react.default.createElement(_TextField.default, {
108
+ type: "number",
109
+ label: "Title Font Weight",
110
+ name: "customCardStyles.cardTitleFontWeight"
111
+ }), /*#__PURE__*/_react.default.createElement(_Picker.default, {
112
+ label: "Title Color",
113
+ name: "customCardStyles.cardTitleColor"
114
+ }), /*#__PURE__*/_react.default.createElement(_TextField.default, {
115
+ type: "number",
116
+ label: "Card Image Radius",
117
+ name: "customCardStyles.cardImageRadius"
118
+ }), /*#__PURE__*/_react.default.createElement(_TextField.default, {
119
+ type: "number",
120
+ label: "Card Padding",
121
+ name: "customCardStyles.cardPadding"
122
+ }), /*#__PURE__*/_react.default.createElement(_TextField.default, {
123
+ type: "number",
124
+ label: "Image Size",
125
+ name: "customCardStyles.imgSize"
126
+ }), /*#__PURE__*/_react.default.createElement(_TextField.default, {
127
+ type: "number",
128
+ label: "Border Size",
129
+ name: "customCardStyles.cardBorderSize"
130
+ }), /*#__PURE__*/_react.default.createElement(_Picker.default, {
131
+ label: "Border Color",
132
+ name: "customCardStyles.cardBorderColor"
133
+ }), /*#__PURE__*/_react.default.createElement(_Picker.default, {
134
+ label: "Icons Color",
135
+ name: "customCardStyles.iconColor"
136
+ }), /*#__PURE__*/_react.default.createElement(_Picker.default, {
137
+ label: "Date Color",
138
+ name: "customCardStyles.dateColor"
139
+ }), /*#__PURE__*/_react.default.createElement(_Picker.default, {
140
+ label: "Card Icon Color",
141
+ name: "customCardStyles.controlsStyles.iconColor"
142
+ })]
143
+ }];
144
+
145
+ var handleChange = function handleChange(values) {
146
+ if (values) {
147
+ props.formChanged(values);
148
+ setEventsStyles(values);
149
+ localStorage.setItem('formStyles', JSON.stringify(values));
150
+ }
151
+ };
152
+
153
+ var submitHandler = function submitHandler(values) {
154
+ console.log(values);
155
+ };
156
+
157
+ var cancelHandler = function cancelHandler() {
158
+ console.log('Canceled');
159
+ };
160
+
161
+ return /*#__PURE__*/_react.default.createElement(_globalStyles.Container, null, /*#__PURE__*/_react.default.createElement(_globalStyles.Left, null, /*#__PURE__*/_react.default.createElement(_ReusableForm.default, {
162
+ formTitle: "Events Styles",
163
+ initialValues: initialValues,
164
+ sections: sections,
165
+ headerStyles: {
166
+ padding: 10,
167
+ headerBackground: 'black',
168
+ titleColor: '#ffff'
169
+ },
170
+ sectionHeaderStyles: {
171
+ padding: 6,
172
+ headerBackground: '#FE1744',
173
+ titleColor: '#ffff'
174
+ },
175
+ bodyPadding: 10,
176
+ saveBtnText: "Save",
177
+ cancelBtnText: "Cancel",
178
+ saveBtnHandle: submitHandler,
179
+ cancelHandler: cancelHandler,
180
+ handleChange: handleChange,
181
+ bodyRowGap: 20,
182
+ bodyColumnGap: 10
183
+ })), /*#__PURE__*/_react.default.createElement(_globalStyles.Right, null, /*#__PURE__*/_react.default.createElement(_Preview.default, {
184
+ type: 'Events',
185
+ componentProps: props.componentProps,
186
+ stylingProps: eventsStyles
187
+ })));
188
+ };
189
+
190
+ EventsPreview.defaultProps = {};
191
+ var _default = EventsPreview;
192
+ exports.default = _default;
@@ -0,0 +1,182 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+
5
+ Object.defineProperty(exports, "__esModule", {
6
+ value: true
7
+ });
8
+ exports.default = void 0;
9
+
10
+ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
11
+
12
+ var _react = _interopRequireWildcard(require("react"));
13
+
14
+ var _Preview = _interopRequireDefault(require("../../Preview/Preview"));
15
+
16
+ var _ReusableForm = _interopRequireDefault(require("../../Reusable Components/ReusableForm/ReusableForm"));
17
+
18
+ var _globalStyles = require("../globalStyles");
19
+
20
+ var _Picker = _interopRequireDefault(require("../../Common Inputs/Picker/Picker"));
21
+
22
+ var _TextField = _interopRequireDefault(require("../../Common Inputs/TextField/TextField"));
23
+
24
+ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
25
+
26
+ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
27
+
28
+ var FoldersPreview = function FoldersPreview(props) {
29
+ var _useState = (0, _react.useState)({}),
30
+ _useState2 = (0, _slicedToArray2.default)(_useState, 2),
31
+ foldersStyles = _useState2[0],
32
+ setFoldersStyles = _useState2[1];
33
+
34
+ var initialValues = {
35
+ headerStyles: {
36
+ headerBackground: '',
37
+ padding: 0,
38
+ titleColor: '',
39
+ titleFontSize: '',
40
+ titleFontWeight: ''
41
+ },
42
+ customCardStyles: {
43
+ cardBackgroundColor: '',
44
+ onHoverBackgroundColor: '',
45
+ cardRadius: '',
46
+ cardTitleFontSize: '',
47
+ cardTitleFontWeight: '',
48
+ cardTitleColor: '',
49
+ cardImageRadius: '',
50
+ cardDescriptionFontSize: '',
51
+ cardDescriptionColor: '',
52
+ cardPadding: 0,
53
+ imgSize: 0,
54
+ cardBorderSize: 0,
55
+ cardBorderColor: '',
56
+ iconColor: ''
57
+ }
58
+ };
59
+ var sections = [{
60
+ title: "Header Styles",
61
+ body: [/*#__PURE__*/_react.default.createElement(_Picker.default, {
62
+ label: "Header Background",
63
+ name: "headerStyles.headerBackground"
64
+ }), /*#__PURE__*/_react.default.createElement(_TextField.default, {
65
+ type: "number",
66
+ label: "Padding",
67
+ name: "headerStyles.padding"
68
+ }), /*#__PURE__*/_react.default.createElement(_Picker.default, {
69
+ label: "Title Color",
70
+ name: "headerStyles.titleColor"
71
+ }), /*#__PURE__*/_react.default.createElement(_TextField.default, {
72
+ type: "number",
73
+ label: "Title Font Size",
74
+ name: "headerStyles.titleFontSize"
75
+ }), /*#__PURE__*/_react.default.createElement(_TextField.default, {
76
+ type: "number",
77
+ label: "Title Font Weight",
78
+ name: "headerStyles.titleFontWeight"
79
+ })]
80
+ }, {
81
+ title: "Card Styles",
82
+ body: [/*#__PURE__*/_react.default.createElement(_Picker.default, {
83
+ label: "Card Background",
84
+ name: "customCardStyles.cardBackgroundColor"
85
+ }), /*#__PURE__*/_react.default.createElement(_Picker.default, {
86
+ label: "Hover Color",
87
+ name: "customCardStyles.onHoverBackgroundColor"
88
+ }), /*#__PURE__*/_react.default.createElement(_TextField.default, {
89
+ type: "number",
90
+ label: "Card Radius",
91
+ name: "customCardStyles.cardRadius"
92
+ }), /*#__PURE__*/_react.default.createElement(_TextField.default, {
93
+ type: "number",
94
+ label: "Title Font Size",
95
+ name: "customCardStyles.cardTitleFontSize"
96
+ }), /*#__PURE__*/_react.default.createElement(_TextField.default, {
97
+ type: "number",
98
+ label: "Title Font Weight",
99
+ name: "customCardStyles.cardTitleFontWeight"
100
+ }), /*#__PURE__*/_react.default.createElement(_Picker.default, {
101
+ label: "Title Color",
102
+ name: "customCardStyles.cardTitleColor"
103
+ }), /*#__PURE__*/_react.default.createElement(_TextField.default, {
104
+ type: "number",
105
+ label: "Card Image Radius",
106
+ name: "customCardStyles.cardImageRadius"
107
+ }), /*#__PURE__*/_react.default.createElement(_TextField.default, {
108
+ type: "number",
109
+ label: "Artist Font Size",
110
+ name: "customCardStyles.cardDescriptionFontSize"
111
+ }), /*#__PURE__*/_react.default.createElement(_Picker.default, {
112
+ label: "Artist Font Color",
113
+ name: "customCardStyles.cardDescriptionColor"
114
+ }), /*#__PURE__*/_react.default.createElement(_TextField.default, {
115
+ type: "number",
116
+ label: "Card Padding",
117
+ name: "customCardStyles.cardPadding"
118
+ }), /*#__PURE__*/_react.default.createElement(_TextField.default, {
119
+ type: "number",
120
+ label: "Image Size",
121
+ name: "customCardStyles.imgSize"
122
+ }), /*#__PURE__*/_react.default.createElement(_TextField.default, {
123
+ type: "number",
124
+ label: "Border Size",
125
+ name: "customCardStyles.cardBorderSize"
126
+ }), /*#__PURE__*/_react.default.createElement(_Picker.default, {
127
+ label: "Border Color",
128
+ name: "customCardStyles.cardBorderColor"
129
+ }), /*#__PURE__*/_react.default.createElement(_Picker.default, {
130
+ label: "Icon Color",
131
+ name: "customCardStyles.iconColor"
132
+ })]
133
+ }];
134
+
135
+ var handleChange = function handleChange(values) {
136
+ if (values) {
137
+ props.formChanged(values);
138
+ setFoldersStyles(values);
139
+ localStorage.setItem('formStyles', JSON.stringify(values));
140
+ }
141
+ };
142
+
143
+ var submitHandler = function submitHandler(values) {
144
+ console.log(values);
145
+ };
146
+
147
+ var cancelHandler = function cancelHandler() {
148
+ console.log('Canceled');
149
+ };
150
+
151
+ return /*#__PURE__*/_react.default.createElement(_globalStyles.Container, null, /*#__PURE__*/_react.default.createElement(_globalStyles.Left, null, /*#__PURE__*/_react.default.createElement(_ReusableForm.default, {
152
+ formTitle: "Folders Styles",
153
+ initialValues: initialValues,
154
+ sections: sections,
155
+ headerStyles: {
156
+ padding: 10,
157
+ headerBackground: 'black',
158
+ titleColor: '#ffff'
159
+ },
160
+ sectionHeaderStyles: {
161
+ padding: 6,
162
+ headerBackground: '#FE1744',
163
+ titleColor: '#ffff'
164
+ },
165
+ bodyPadding: 10,
166
+ saveBtnText: "Save",
167
+ cancelBtnText: "Cancel",
168
+ saveBtnHandle: submitHandler,
169
+ cancelHandler: cancelHandler,
170
+ handleChange: handleChange,
171
+ bodyRowGap: 20,
172
+ bodyColumnGap: 10
173
+ })), /*#__PURE__*/_react.default.createElement(_globalStyles.Right, null, /*#__PURE__*/_react.default.createElement(_Preview.default, {
174
+ type: 'Folders',
175
+ componentProps: props.componentProps,
176
+ stylingProps: foldersStyles
177
+ })));
178
+ };
179
+
180
+ FoldersPreview.defaultProps = {};
181
+ var _default = FoldersPreview;
182
+ exports.default = _default;
@@ -0,0 +1,177 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+
5
+ Object.defineProperty(exports, "__esModule", {
6
+ value: true
7
+ });
8
+ exports.default = void 0;
9
+
10
+ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
11
+
12
+ var _react = _interopRequireWildcard(require("react"));
13
+
14
+ var _Preview = _interopRequireDefault(require("../../Preview/Preview"));
15
+
16
+ var _ReusableForm = _interopRequireDefault(require("../../Reusable Components/ReusableForm/ReusableForm"));
17
+
18
+ var _globalStyles = require("../globalStyles");
19
+
20
+ var _Picker = _interopRequireDefault(require("../../Common Inputs/Picker/Picker"));
21
+
22
+ var _TextField = _interopRequireDefault(require("../../Common Inputs/TextField/TextField"));
23
+
24
+ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
25
+
26
+ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
27
+
28
+ var MusicAlbum = function MusicAlbum(props) {
29
+ var _useState = (0, _react.useState)(JSON.parse(localStorage.getItem('formStyles')) || {
30
+ headerStyles: {
31
+ headerBackground: '',
32
+ padding: 0,
33
+ titleColor: '',
34
+ titleFontSize: '',
35
+ titleFontWeight: ''
36
+ },
37
+ customCardStyles: {
38
+ cardBackgroundColor: '',
39
+ onHoverBackgroundColor: '',
40
+ cardRadius: '',
41
+ cardTitleFontSize: '',
42
+ cardTitleFontWeight: '',
43
+ cardTitleColor: '',
44
+ cardImageRadius: '',
45
+ cardDescriptionFontSize: '',
46
+ cardDescriptionColor: '',
47
+ cardPadding: 0,
48
+ imgSize: 0,
49
+ cardBorderSize: 0,
50
+ cardBorderColor: 'purple'
51
+ }
52
+ }),
53
+ _useState2 = (0, _slicedToArray2.default)(_useState, 2),
54
+ musicAlbumStyles = _useState2[0],
55
+ setMusicAlbumStyles = _useState2[1];
56
+
57
+ var sections = [{
58
+ title: "Header Styles",
59
+ body: [/*#__PURE__*/_react.default.createElement(_Picker.default, {
60
+ label: "Header Background",
61
+ name: "headerStyles.headerBackground"
62
+ }), /*#__PURE__*/_react.default.createElement(_TextField.default, {
63
+ type: "number",
64
+ label: "Padding",
65
+ name: "headerStyles.padding"
66
+ }), /*#__PURE__*/_react.default.createElement(_Picker.default, {
67
+ label: "Title Color",
68
+ name: "headerStyles.titleColor"
69
+ }), /*#__PURE__*/_react.default.createElement(_TextField.default, {
70
+ type: "number",
71
+ label: "Title Font Size",
72
+ name: "headerStyles.titleFontSize"
73
+ }), /*#__PURE__*/_react.default.createElement(_TextField.default, {
74
+ type: "number",
75
+ label: "Title Font Weight",
76
+ name: "headerStyles.titleFontWeight"
77
+ })]
78
+ }, {
79
+ title: "Card Styles",
80
+ body: [/*#__PURE__*/_react.default.createElement(_Picker.default, {
81
+ label: "Card Background",
82
+ name: "customCardStyles.cardBackgroundColor"
83
+ }), /*#__PURE__*/_react.default.createElement(_Picker.default, {
84
+ label: "Hover Color",
85
+ name: "customCardStyles.onHoverBackgroundColor"
86
+ }), /*#__PURE__*/_react.default.createElement(_TextField.default, {
87
+ type: "number",
88
+ label: "Card Radius",
89
+ name: "customCardStyles.cardRadius"
90
+ }), /*#__PURE__*/_react.default.createElement(_TextField.default, {
91
+ type: "number",
92
+ label: "Title Font Size",
93
+ name: "customCardStyles.cardTitleFontSize"
94
+ }), /*#__PURE__*/_react.default.createElement(_TextField.default, {
95
+ type: "number",
96
+ label: "Title Font Weight",
97
+ name: "customCardStyles.cardTitleFontWeight"
98
+ }), /*#__PURE__*/_react.default.createElement(_Picker.default, {
99
+ label: "Title Color",
100
+ name: "customCardStyles.cardTitleColor"
101
+ }), /*#__PURE__*/_react.default.createElement(_TextField.default, {
102
+ type: "number",
103
+ label: "Card Image Radius",
104
+ name: "customCardStyles.cardImageRadius"
105
+ }), /*#__PURE__*/_react.default.createElement(_TextField.default, {
106
+ type: "number",
107
+ label: "Artist Font Size",
108
+ name: "customCardStyles.cardDescriptionFontSize"
109
+ }), /*#__PURE__*/_react.default.createElement(_Picker.default, {
110
+ label: "Artist Font Color",
111
+ name: "customCardStyles.cardDescriptionColor"
112
+ }), /*#__PURE__*/_react.default.createElement(_TextField.default, {
113
+ type: "number",
114
+ label: "Card Padding",
115
+ name: "customCardStyles.cardPadding"
116
+ }), /*#__PURE__*/_react.default.createElement(_TextField.default, {
117
+ type: "number",
118
+ label: "Image Size",
119
+ name: "customCardStyles.imgSize"
120
+ }), /*#__PURE__*/_react.default.createElement(_TextField.default, {
121
+ type: "number",
122
+ label: "Border Size",
123
+ name: "customCardStyles.cardBorderSize"
124
+ }), /*#__PURE__*/_react.default.createElement(_Picker.default, {
125
+ label: "Border Color",
126
+ name: "customCardStyles.cardBorderColor"
127
+ })]
128
+ }];
129
+
130
+ var handleChange = function handleChange(values) {
131
+ if (values) {
132
+ props.formChanged(values);
133
+ setMusicAlbumStyles(values);
134
+ localStorage.setItem('formStyles', JSON.stringify(values));
135
+ }
136
+ };
137
+
138
+ var submitHandler = function submitHandler(values) {
139
+ console.log(values);
140
+ };
141
+
142
+ var cancelHandler = function cancelHandler() {
143
+ console.log('Canceled');
144
+ };
145
+
146
+ return /*#__PURE__*/_react.default.createElement(_globalStyles.Container, null, /*#__PURE__*/_react.default.createElement(_globalStyles.Left, null, /*#__PURE__*/_react.default.createElement(_ReusableForm.default, {
147
+ formTitle: "Music Album Styles",
148
+ initialValues: musicAlbumStyles,
149
+ sections: sections,
150
+ headerStyles: {
151
+ padding: 10,
152
+ headerBackground: 'black',
153
+ titleColor: '#ffff'
154
+ },
155
+ sectionHeaderStyles: {
156
+ padding: 6,
157
+ headerBackground: '#FE1744',
158
+ titleColor: '#ffff'
159
+ },
160
+ bodyPadding: 10,
161
+ saveBtnText: "Save",
162
+ cancelBtnText: "Cancel",
163
+ saveBtnHandle: submitHandler,
164
+ cancelHandler: cancelHandler,
165
+ handleChange: handleChange,
166
+ bodyRowGap: 20,
167
+ bodyColumnGap: 10
168
+ })), /*#__PURE__*/_react.default.createElement(_globalStyles.Right, null, /*#__PURE__*/_react.default.createElement(_Preview.default, {
169
+ type: 'MusicAlbum',
170
+ componentProps: props.componentProps,
171
+ stylingProps: musicAlbumStyles
172
+ })));
173
+ };
174
+
175
+ MusicAlbum.defaultProps = {};
176
+ var _default = MusicAlbum;
177
+ exports.default = _default;