react-pop-cards 0.2.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 (7) hide show
  1. package/README.md +3 -0
  2. package/dist/Sandbox.js +186 -0
  3. package/dist/components/Card.js +172 -0
  4. package/dist/index.css +1861 -0
  5. package/dist/index.js +21 -0
  6. package/dist/styles.css +79 -0
  7. package/package.json +67 -0
package/README.md ADDED
@@ -0,0 +1,3 @@
1
+ ## Docs (Beta)
2
+
3
+ Misy props roa aloha atreto: data type : array , bgColor type : string (classe tailwind avao vo mety)
package/dist/Sandbox.js ADDED
@@ -0,0 +1,186 @@
1
+ "use strict";
2
+
3
+ require("core-js/modules/es.weak-map.js");
4
+ Object.defineProperty(exports, "__esModule", {
5
+ value: true
6
+ });
7
+ exports.default = void 0;
8
+ require("core-js/modules/web.dom-collections.iterator.js");
9
+ require("core-js/modules/es.json.stringify.js");
10
+ var _Card = _interopRequireDefault(require("./components/Card"));
11
+ var _react = _interopRequireWildcard(require("react"));
12
+ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
13
+ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
14
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
15
+ function checkForDuplicates(array) {
16
+ let valuesAlreadySeen = [];
17
+ for (let i = 0; i < array.length; i++) {
18
+ let value = array[i];
19
+ if (valuesAlreadySeen.indexOf(value) !== -1) {
20
+ return true;
21
+ }
22
+ valuesAlreadySeen.push(value);
23
+ }
24
+ return false;
25
+ }
26
+ const Sandbox = () => {
27
+ const array = ["Un", "Deux", "Trois", "Quatre"];
28
+ const [disposition, setDisposition] = (0, _react.useState)("");
29
+ const [radius, setRadius] = (0, _react.useState)();
30
+ const [code, setCode] = (0, _react.useState)("<Card data={array} />");
31
+ function handleData() {
32
+ var data = document.getElementById("dataInputRef").value.split(',');
33
+ if (data.length !== 4) {
34
+ alert('Only 4 letters');
35
+ } else {
36
+ if (checkForDuplicates(data)) {
37
+ alert("Duplicate letters");
38
+ } else {
39
+ localStorage.setItem("data", JSON.stringify(data));
40
+ window.dispatchEvent(new Event('DataChange'));
41
+ }
42
+ }
43
+ }
44
+ const handleDispositionChange = event => {
45
+ const newDisposition = event.target.value;
46
+ setDisposition(newDisposition);
47
+ updateCode(newDisposition, radius);
48
+ };
49
+ const handleRadiusChange = () => {
50
+ setRadius(!radius);
51
+ updateCode(disposition, !radius);
52
+ };
53
+ const updateCode = (newDisposition, newIsRounded) => {
54
+ console.log(newDisposition);
55
+ console.log(newIsRounded);
56
+ if (newDisposition !== null) {
57
+ setCode("<Card data={array} disposition=\"".concat(newDisposition, "\" />"));
58
+ }
59
+ if (newIsRounded !== undefined) {
60
+ setCode("<Card data={array} isRounded=".concat(newIsRounded, " />"));
61
+ }
62
+ if (newDisposition !== "" && newIsRounded !== undefined) {
63
+ setCode("<Card data={array} disposition=\"".concat(newDisposition, "\" isRounded={").concat(newIsRounded, "} />"));
64
+ }
65
+ };
66
+ return /*#__PURE__*/_react.default.createElement("div", {
67
+ className: "space-y-5 p-8"
68
+ }, /*#__PURE__*/_react.default.createElement("div", {
69
+ className: "grid grid-cols-5"
70
+ }, /*#__PURE__*/_react.default.createElement("div", {
71
+ className: "col-span-3 p-8 flex gap-[5%]"
72
+ }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("label", {
73
+ className: "form-control w-full max-w-xs"
74
+ }, /*#__PURE__*/_react.default.createElement("div", {
75
+ className: "label"
76
+ }, /*#__PURE__*/_react.default.createElement("span", {
77
+ className: "text-xl font-bold"
78
+ }, "Data")), /*#__PURE__*/_react.default.createElement("div", {
79
+ className: "flex gap-2"
80
+ }, /*#__PURE__*/_react.default.createElement("input", {
81
+ id: "dataInputRef",
82
+ type: "text",
83
+ placeholder: array.join(','),
84
+ className: "input input-bordered w-full max-w-xs"
85
+ }), /*#__PURE__*/_react.default.createElement("button", {
86
+ onClick: () => handleData(),
87
+ className: "btn btn-info"
88
+ }, "Set")), /*#__PURE__*/_react.default.createElement("div", {
89
+ className: "label"
90
+ }, /*#__PURE__*/_react.default.createElement("span", {
91
+ className: "label-text-alt"
92
+ }, "S\xE9parer par ", /*#__PURE__*/_react.default.createElement("kbd", {
93
+ className: "kbd kbd-xs"
94
+ }, ","), " (ex: un,deux,trois,quatre)")))), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("span", {
95
+ className: "text-xl font-bold"
96
+ }, "Disposition (default : LeftRight)"), /*#__PURE__*/_react.default.createElement("div", {
97
+ className: "form-control"
98
+ }, /*#__PURE__*/_react.default.createElement("label", {
99
+ className: "label cursor-pointer space-x-5"
100
+ }, /*#__PURE__*/_react.default.createElement("span", {
101
+ className: "label-text"
102
+ }, "Left to right"), /*#__PURE__*/_react.default.createElement("input", {
103
+ value: "LeftRight",
104
+ type: "radio",
105
+ name: "radio-10",
106
+ className: "radio checked:bg-blue-500",
107
+ checked: disposition === "LeftRight",
108
+ onChange: handleDispositionChange
109
+ }))), /*#__PURE__*/_react.default.createElement("div", {
110
+ className: "form-control"
111
+ }, /*#__PURE__*/_react.default.createElement("label", {
112
+ className: "label cursor-pointer space-x-5"
113
+ }, /*#__PURE__*/_react.default.createElement("span", {
114
+ className: "label-text"
115
+ }, "Right to left"), /*#__PURE__*/_react.default.createElement("input", {
116
+ value: "RightLeft",
117
+ type: "radio",
118
+ name: "radio-10",
119
+ className: "radio checked:bg-blue-500",
120
+ checked: disposition === "RightLeft",
121
+ onChange: handleDispositionChange
122
+ }))), /*#__PURE__*/_react.default.createElement("div", {
123
+ className: "form-control"
124
+ }, /*#__PURE__*/_react.default.createElement("label", {
125
+ className: "label cursor-pointer space-x-5"
126
+ }, /*#__PURE__*/_react.default.createElement("span", {
127
+ className: "label-text"
128
+ }, "Top to bottom"), /*#__PURE__*/_react.default.createElement("input", {
129
+ value: "TopBottom",
130
+ type: "radio",
131
+ name: "radio-10",
132
+ className: "radio checked:bg-blue-500",
133
+ checked: disposition === "TopBottom",
134
+ onChange: handleDispositionChange
135
+ }))), /*#__PURE__*/_react.default.createElement("div", {
136
+ className: "form-control"
137
+ }, /*#__PURE__*/_react.default.createElement("label", {
138
+ className: "label cursor-pointer space-x-5"
139
+ }, /*#__PURE__*/_react.default.createElement("span", {
140
+ className: "label-text"
141
+ }, "Bottom to top"), /*#__PURE__*/_react.default.createElement("input", {
142
+ value: "BottomTop",
143
+ type: "radio",
144
+ name: "radio-10",
145
+ className: "radio checked:bg-blue-500",
146
+ checked: disposition === "BottomTop",
147
+ onChange: handleDispositionChange
148
+ })))), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("span", {
149
+ className: "text-xl font-bold"
150
+ }, "Radius (default : false)"), /*#__PURE__*/_react.default.createElement("div", {
151
+ className: "form-control"
152
+ }, /*#__PURE__*/_react.default.createElement("label", {
153
+ className: "cursor-pointer label space-x-5"
154
+ }, /*#__PURE__*/_react.default.createElement("span", {
155
+ className: "label-text"
156
+ }, "Is Rounded"), /*#__PURE__*/_react.default.createElement("input", {
157
+ type: "checkbox",
158
+ onClick: () => handleRadiusChange(),
159
+ className: "checkbox checkbox-info"
160
+ }))))), /*#__PURE__*/_react.default.createElement("div", {
161
+ className: "col-span-2 p-8"
162
+ }, /*#__PURE__*/_react.default.createElement("h1", {
163
+ className: "text-3xl font-bold mb-3"
164
+ }, "Code preview"), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
165
+ className: "mockup-code"
166
+ }, /*#__PURE__*/_react.default.createElement("pre", null, /*#__PURE__*/_react.default.createElement("code", {
167
+ id: "code"
168
+ }, code)))))), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Card.default, {
169
+ data: array,
170
+ disposition: disposition,
171
+ isRounded: radius
172
+ })), /*#__PURE__*/_react.default.createElement("div", {
173
+ className: "flex justify-center"
174
+ }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h1", {
175
+ className: "mb-3 text-2xl text-center font-medium"
176
+ }, "Installation"), /*#__PURE__*/_react.default.createElement("div", {
177
+ className: "mockup-code"
178
+ }, /*#__PURE__*/_react.default.createElement("pre", {
179
+ "data-prefix": "$"
180
+ }, /*#__PURE__*/_react.default.createElement("code", null, "bun install rajoelina-js")), /*#__PURE__*/_react.default.createElement("pre", null, /*#__PURE__*/_react.default.createElement("code", null, "or")), /*#__PURE__*/_react.default.createElement("pre", {
181
+ "data-prefix": "$"
182
+ }, /*#__PURE__*/_react.default.createElement("code", null, "pnpm i rajoelina-js")), /*#__PURE__*/_react.default.createElement("pre", null, /*#__PURE__*/_react.default.createElement("code", null, "or")), /*#__PURE__*/_react.default.createElement("pre", {
183
+ "data-prefix": "$"
184
+ }, /*#__PURE__*/_react.default.createElement("code", null, "npm i rajoelina-js"))))));
185
+ };
186
+ var _default = exports.default = Sandbox;
package/dist/components/Card.js ADDED
@@ -0,0 +1,172 @@
1
+ "use strict";
2
+
3
+ require("core-js/modules/es.symbol.description.js");
4
+ require("core-js/modules/es.weak-map.js");
5
+ Object.defineProperty(exports, "__esModule", {
6
+ value: true
7
+ });
8
+ exports.default = void 0;
9
+ require("core-js/modules/es.array.reduce.js");
10
+ require("core-js/modules/web.dom-collections.iterator.js");
11
+ var _react = _interopRequireWildcard(require("react"));
12
+ var _web = require("@react-spring/web");
13
+ var _reactResponsive = require("react-responsive");
14
+ require("../index.css");
15
+ var _propTypes = _interopRequireDefault(require("prop-types"));
16
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
17
+ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
18
+ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
19
+ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
20
+ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
21
+ function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
22
+ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : String(i); }
23
+ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); } /* eslint-disable react-hooks/exhaustive-deps */ /* eslint-disable react-hooks/rules-of-hooks */
24
+ const Card = _ref => {
25
+ let {
26
+ data,
27
+ bgColor,
28
+ disposition,
29
+ isRounded
30
+ } = _ref;
31
+ const isMobile = (0, _reactResponsive.useMediaQuery)({
32
+ query: "max-width: 600px"
33
+ });
34
+ const activeCardRef = (0, _react.useRef)(null);
35
+ const parentCard = (0, _react.useRef)(null);
36
+
37
+ // default content div classes
38
+ const cardDivClass = "col-span-3 flex justify-center items-center duration-100";
39
+ const miniCardDivClass = "col-span-2 gap-4 flex justify-center items-center duration-100";
40
+ const miniCardClass = "hover:scale-125 duration-200 cursor-pointer flex justify-center items-center w-[5rem] h-[5rem] shadow-md";
41
+
42
+ // Define card data
43
+ const initialCardDimensions = {
44
+ width: "6rem",
45
+ height: "6rem"
46
+ };
47
+ const convertedObject = data.reduce((acc, currentValue) => {
48
+ acc[currentValue.toLowerCase()] = _objectSpread({}, initialCardDimensions);
49
+ return acc;
50
+ }, {});
51
+ const [cards, setCards] = (0, _react.useState)(convertedObject);
52
+
53
+ // active card
54
+ const [activeCard, setActiveCard] = (0, _react.useState)(data[0].toLowerCase());
55
+ (0, _react.useEffect)(() => {
56
+ handleCardClick(activeCard);
57
+ const handleLocalStorageUpdate = () => {
58
+ try {
59
+ const newData = JSON.parse(localStorage.getItem('data')).reduce((acc, currentValue) => {
60
+ acc[currentValue.toLowerCase()] = _objectSpread({}, initialCardDimensions);
61
+ return acc;
62
+ }, {});
63
+ setCards(newData);
64
+ } catch (error) {
65
+ console.error('Error parsing local storage data:', error);
66
+ }
67
+ };
68
+ window.addEventListener('DataChange', handleLocalStorageUpdate);
69
+ return () => {
70
+ window.removeEventListener('DataChange', handleLocalStorageUpdate);
71
+ };
72
+ }, [data, activeCard, isMobile]);
73
+
74
+ // Handle card click and update dimensions
75
+ const handleCardClick = cardKey => {
76
+ const updatedCards = Object.keys(cards).reduce((acc, key) => {
77
+ acc[key] = cardKey === key ? {
78
+ width: "20rem",
79
+ height: isMobile ? "11rem" : "20rem"
80
+ } : initialCardDimensions;
81
+ return acc;
82
+ }, {});
83
+ setCards(updatedCards);
84
+ setActiveCard(cardKey);
85
+ };
86
+
87
+ // Animated styles for each card
88
+ const animatedStyles = Object.keys(cards).reduce((acc, card) => {
89
+ acc[card] = (0, _web.useSpring)({
90
+ to: {
91
+ width: cards[card].width,
92
+ height: cards[card].height
93
+ },
94
+ config: {
95
+ tension: 120,
96
+ friction: 10
97
+ }
98
+ });
99
+ return acc;
100
+ }, {});
101
+ const getCardClasses = key => {
102
+ switch (key) {
103
+ case 0:
104
+ return "flex justify-end items-end";
105
+ case 1:
106
+ return "flex items-end";
107
+ case 2:
108
+ return "flex justify-end";
109
+ case 3:
110
+ return "flex";
111
+ default:
112
+ return "";
113
+ }
114
+ };
115
+ const getDisposition = disposition => {
116
+ switch (disposition) {
117
+ case "LeftRight":
118
+ return "grid grid-cols-5 h-screen";
119
+ case "RightLeft":
120
+ return "grid grid-cols-5 h-screen";
121
+ case "TopBottom":
122
+ return "flex flex-col justify-center items-center gap-[10%] h-screen";
123
+ case "BottomTop":
124
+ return "flex flex-col-reverse justify-center items-center gap-[10%] h-screen";
125
+ default:
126
+ return "grid grid-cols-5 h-screen";
127
+ }
128
+ };
129
+ return /*#__PURE__*/_react.default.createElement("div", {
130
+ className: getDisposition(disposition)
131
+ }, /*#__PURE__*/_react.default.createElement("div", {
132
+ className: (disposition === "LeftRight" ? "order-1" : "order-2") + " ".concat(cardDivClass)
133
+ }, /*#__PURE__*/_react.default.createElement("div", {
134
+ className: "grid grid-cols-2 gap-2"
135
+ }, Object.keys(cards).map((cardKey, key) => /*#__PURE__*/_react.default.createElement("div", {
136
+ key: cardKey,
137
+ className: getCardClasses(key),
138
+ ref: parentCard
139
+ }, /*#__PURE__*/_react.default.createElement(_web.animated.div, {
140
+ ref: activeCard === cardKey ? activeCardRef : null,
141
+ style: animatedStyles[cardKey],
142
+ onClick: () => handleCardClick(cardKey),
143
+ className: "".concat(activeCard === cardKey ? "px-6 py-4" : "flex justify-center items-center", " cursor-pointer duration-100 ").concat(bgColor, " ").concat(isRounded ? " rounded-2xl" : " rounded-none")
144
+ }, /*#__PURE__*/_react.default.createElement("div", {
145
+ className: "space-y-3"
146
+ }, /*#__PURE__*/_react.default.createElement("div", {
147
+ className: "flex justify-between items-center"
148
+ }, /*#__PURE__*/_react.default.createElement("label", {
149
+ className: (activeCard === cardKey ? "text-5xl" : "text-base") + " capitalize font-bold duration-100"
150
+ }, cardKey), activeCard === cardKey && /*#__PURE__*/_react.default.createElement("div", {
151
+ className: "w-20 h-20 text-center bg-green-500"
152
+ }, "Icon or image here")), activeCard === cardKey && /*#__PURE__*/_react.default.createElement("p", {
153
+ className: "line-clamp-[8] text-justify"
154
+ }, "Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt possimus assumenda sequi nihil, pariatur, aliquid molestias harum aliquam aut eum incidunt, amet accusantium numquam reiciendis. Dicta architecto quibusdam aspernatur laborum. Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo quasi ipsum fuga ex harum reprehenderit, tempora a alias nisi dignissimos inventore quia eum modi molestiae perspiciatis ducimus optio minus nostrum."))))))), /*#__PURE__*/_react.default.createElement("div", {
155
+ className: (disposition === "RightLeft" ? "order-1" : "order-2") + " ".concat(miniCardDivClass)
156
+ }, Object.keys(cards).map(cardKey => /*#__PURE__*/_react.default.createElement("div", {
157
+ key: cardKey,
158
+ onClick: () => handleCardClick(cardKey),
159
+ className: "".concat(activeCard === cardKey ? "scale-110 shadow-xl" : "scale-90", " ").concat(miniCardClass, " ").concat(isRounded ? "rounded-2xl" : "rounded-none")
160
+ }, /*#__PURE__*/_react.default.createElement("label", {
161
+ className: "text-center text-xs capitalize"
162
+ }, cardKey)))));
163
+ };
164
+ Card.propTypes = {
165
+ data: _propTypes.default.array.isRequired
166
+ };
167
+ Card.defaultProps = {
168
+ disposition: 'LeftRight',
169
+ bgColor: 'bg-gray-200',
170
+ isRounded: false
171
+ };
172
+ var _default = exports.default = Card;