react-pop-cards 0.2.0 → 0.2.3

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 (8) hide show
  1. package/README.md +42 -2
  2. package/dist/components/Card.js +98 -70
  3. package/dist/index.css +683 -162
  4. package/dist/index.d.ts +18 -0
  5. package/dist/index.js +29 -14
  6. package/package.json +73 -65
  7. package/dist/Sandbox.js +0 -186
  8. package/dist/styles.css +0 -79
package/dist/index.d.ts ADDED
@@ -0,0 +1,18 @@
1
+ interface CardDataItem {
2
+ title: string;
3
+ description: string;
4
+ image?: string;
5
+ }
6
+
7
+ interface CardProps {
8
+ data: CardDataItem[];
9
+ bgColor?: string;
10
+ disposition?: "LeftRight" | "RightLeft" | "TopBottom" | "BottomTop";
11
+ isRounded?: boolean;
12
+ tension?: number;
13
+ friction?: number;
14
+ }
15
+
16
+ declare const Card: React.FC<CardProps>;
17
+
18
+ export default Card;
package/dist/index.js CHANGED
@@ -1,21 +1,36 @@
1
1
  "use strict";
2
2
 
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- Object.defineProperty(exports, "Card", {
7
- enumerable: true,
8
- get: function get() {
9
- return _Card.default;
10
- }
11
- });
12
3
  var _react = _interopRequireDefault(require("react"));
13
4
  var _client = _interopRequireDefault(require("react-dom/client"));
14
5
  require("./index.css");
15
6
  var _Card = _interopRequireDefault(require("./components/Card"));
16
- var _Sandbox = _interopRequireDefault(require("./Sandbox"));
17
7
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
18
- const array = ["Un", "Deux", "Trois", "Quatre"];
19
- _client.default.createRoot(document.getElementById('root')).render( /*#__PURE__*/_react.default.createElement(_react.default.StrictMode, null, /*#__PURE__*/_react.default.createElement(_Card.default, {
20
- data: array
21
- })));
8
+ // import Sandbox from "./Sandbox"
9
+
10
+ const array = [{
11
+ title: "Title1",
12
+ description: "Description1",
13
+ image: "https://placehold.co/600x400"
14
+ }, {
15
+ title: "Title2",
16
+ description: "Description2",
17
+ image: "https://placehold.co/600x400"
18
+ }, {
19
+ title: "Title3",
20
+ description: "Description3",
21
+ image: "https://placehold.co/600x400"
22
+ }, {
23
+ title: "Title4",
24
+ description: "Description4",
25
+ image: "https://placehold.co/600x400"
26
+ }];
27
+ _client.default.createRoot(document.getElementById("root")).render( /*#__PURE__*/_react.default.createElement(_react.default.StrictMode, null, /*#__PURE__*/_react.default.createElement(_Card.default, {
28
+ data: array,
29
+ disposition: "LeftRight",
30
+ isRounded: false,
31
+ tension: 120,
32
+ friction: 10,
33
+ bgColor: "#e5e7eb"
34
+ })));
35
+
36
+ // export { Card }
package/package.json CHANGED
@@ -1,67 +1,75 @@
1
1
  {
2
- "name": "react-pop-cards",
3
- "version": "0.2.0",
4
- "main": "dist/index.js",
5
- "module": "dist/index.js",
6
- "keywords": [
7
- "card",
8
- "react",
9
- "useSpring",
10
- "tailwindcss"
11
- ],
12
- "files": [
13
- "dist",
14
- "README.md"
15
- ],
16
- "repository": {
17
- "type": "git",
18
- "url": "git+https://github.com/thony32/test-card.git"
19
- },
20
- "dependencies": {
21
- "-": "^0.0.1",
22
- "@react-spring/web": "^9.7.3",
23
- "@testing-library/jest-dom": "^6.2.0",
24
- "@testing-library/react": "^14.1.2",
25
- "@testing-library/user-event": "^14.5.2",
26
- "prop-types": "^15.8.1",
27
- "react": "^18.2.0",
28
- "react-dom": "^18.2.0",
29
- "react-responsive": "^9.0.2",
30
- "react-scripts": "5.0.1",
31
- "web-vitals": "^3.5.1"
32
- },
33
- "scripts": {
34
- "start": "react-scripts start",
35
- "build": "rm -rf dist && NODE_ENV=production babel src --out-dir dist --copy-files && postcss src/index.css -o dist/index.css",
36
- "test": "react-scripts test",
37
- "eject": "react-scripts eject"
38
- },
39
- "eslintConfig": {
40
- "extends": [
41
- "react-app",
42
- "react-app/jest"
43
- ]
44
- },
45
- "browserslist": {
46
- "production": [
47
- ">0.2%",
48
- "not dead",
49
- "not op_mini all"
2
+ "name": "react-pop-cards",
3
+ "version": "0.2.3",
4
+ "main": "dist/index.js",
5
+ "types": "dist/index.d.ts",
6
+ "module": "dist/index.js",
7
+ "keywords": [
8
+ "card",
9
+ "react",
10
+ "useSpring",
11
+ "tailwindcss"
50
12
  ],
51
- "development": [
52
- "last 1 chrome version",
53
- "last 1 firefox version",
54
- "last 1 safari version"
55
- ]
56
- },
57
- "devDependencies": {
58
- "@babel/cli": "^7.23.4",
59
- "@babel/core": "^7.23.7",
60
- "@babel/preset-env": "^7.23.8",
61
- "@babel/preset-react": "^7.23.3",
62
- "autoprefixer": "^10.4.17",
63
- "daisyui": "^4.6.0",
64
- "postcss-cli": "^11.0.0",
65
- "tailwindcss": "^3.4.1"
66
- }
67
- }
13
+ "files": [
14
+ "dist",
15
+ "README.md"
16
+ ],
17
+ "repository": {
18
+ "type": "git",
19
+ "url": "git+https://github.com/thony32/react-pop-cards.git"
20
+ },
21
+ "dependencies": {
22
+ "-": "^0.0.1",
23
+ "@react-spring/web": "^9.7.3",
24
+ "@testing-library/jest-dom": "^6.2.0",
25
+ "@testing-library/react": "^14.1.2",
26
+ "@testing-library/user-event": "^14.5.2",
27
+ "core-js": "^3.35.1",
28
+ "prop-types": "^15.8.1",
29
+ "react": "^18.2.0",
30
+ "react-best-gradient-color-picker": "^3.0.5",
31
+ "react-color": "^2.19.3",
32
+ "react-dom": "^18.2.0",
33
+ "react-responsive": "^9.0.2",
34
+ "chroma-js": "^2.4.2",
35
+ "react-scripts": "5.0.1",
36
+ "web-vitals": "^3.5.1"
37
+ },
38
+ "scripts": {
39
+ "dev": "react-scripts start",
40
+ "build": "rm -rf dist && NODE_ENV=production babel src/index.js --out-dir dist --copy-files && babel src/components/Card.js --out-dir dist/components --copy-files && postcss src/index.css -o dist/index.css",
41
+ "build:vercel": "react-scripts build",
42
+ "test": "react-scripts test",
43
+ "eject": "react-scripts eject"
44
+ },
45
+ "eslintConfig": {
46
+ "extends": [
47
+ "react-app",
48
+ "react-app/jest"
49
+ ]
50
+ },
51
+ "browserslist": {
52
+ "production": [
53
+ ">0.2%",
54
+ "not dead",
55
+ "not op_mini all"
56
+ ],
57
+ "development": [
58
+ "last 1 chrome version",
59
+ "last 1 firefox version",
60
+ "last 1 safari version"
61
+ ]
62
+ },
63
+ "devDependencies": {
64
+ "@babel/cli": "^7.23.4",
65
+ "@babel/core": "^7.23.7",
66
+ "@babel/preset-env": "^7.23.8",
67
+ "@babel/preset-react": "^7.23.3",
68
+ "@monaco-editor/react": "^4.6.0",
69
+ "autoprefixer": "^10.4.17",
70
+ "daisyui": "^4.6.0",
71
+ "postcss-cli": "^11.0.0",
72
+ "react-typed": "^2.0.12",
73
+ "tailwindcss": "^3.4.1"
74
+ }
75
+ }
package/dist/Sandbox.js DELETED
@@ -1,186 +0,0 @@
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/styles.css DELETED
@@ -1,79 +0,0 @@
1
- .flex{
2
- display: flex;
3
- }
4
-
5
- .flex-col{
6
- flex-direction: column;
7
- }
8
-
9
- .flex-row{
10
- flex-direction: row;
11
- }
12
-
13
- .flex-col-reverse{
14
- flex-direction: column-reverse;
15
- }
16
-
17
- .flex-row-reverse{
18
- flex-direction: row-reverse;
19
- }
20
-
21
- .justify-center{
22
- justify-content: center;
23
- }
24
-
25
- .justify-start{
26
- justify-content: flex-start;
27
- }
28
-
29
- .items-start{
30
- align-items: flex-start;
31
- }
32
-
33
- .items-center{
34
- align-items: center;
35
- }
36
-
37
- .justify-end{
38
- justify-content: flex-end;
39
- }
40
-
41
- .items-end{
42
- align-items: flex-end;
43
- }
44
-
45
- .grid {
46
- display: grid;
47
- }
48
-
49
- .grid-cols-2{
50
- grid-template-columns: repeat(2, minmax(0, 1fr));
51
- }
52
-
53
- .grid-cols-5{
54
- grid-template-columns: repeat(5, minmax(0, 1fr));
55
- }
56
-
57
- .h-screen{
58
- height: 100vh;
59
- }
60
-
61
- .col-span-3{
62
- grid-column: span 3 / span 3;
63
- }
64
-
65
- .col-span-2{
66
- grid-column: span 2 / span 2;
67
- }
68
-
69
- .rounded-2xl{
70
- border-radius: 1rem;
71
- }
72
-
73
- .order-1{
74
- order: 1;
75
- }
76
-
77
- .order-2{
78
- order: 2;
79
- }