ikon-react-components-lib 1.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 (10) hide show
  1. package/README.md +1225 -0
  2. package/dist/ikon-react-components-lib.cjs.js +248 -0
  3. package/dist/ikon-react-components-lib.css +1 -0
  4. package/dist/ikon-react-components-lib.es.js +153148 -0
  5. package/dist/index.d.ts +1450 -0
  6. package/dist/login.css +81 -0
  7. package/dist/login.html +127 -0
  8. package/dist/login.js +140 -0
  9. package/dist/vite.svg +1 -0
  10. package/package.json +118 -0
package/dist/login.css ADDED
@@ -0,0 +1,81 @@
1
+ /* General Styling */
2
+ .body-style {
3
+ background: linear-gradient(104.96deg, #131a29 0%, #1d2634 56.6%, #2f2e78 100.68%);
4
+ color: #fff;
5
+ font-family: 'Poppins', sans-serif;
6
+ }
7
+
8
+ /* Left Section */
9
+ .left-section {
10
+ /* background: #0b1120; */
11
+ color: #fff;
12
+ text-align: left;
13
+ }
14
+
15
+ .left-ikon-logo {
16
+ width: 15%;
17
+ left: 0;
18
+ position: absolute;
19
+ top: 0;
20
+ }
21
+
22
+ .quote {
23
+ font-size: 2rem;
24
+ font-style: italic;
25
+ }
26
+
27
+ /* Right Section */
28
+ .right-section {
29
+ /* background: #1a1c3d; */
30
+ text-align: center;
31
+ color: #ccc;
32
+ }
33
+
34
+ .right-ikon-logo {
35
+ width: 30%;
36
+ }
37
+
38
+ .subtitle {
39
+ font-size: 1rem;
40
+ /* margin-bottom: 20px; */
41
+ }
42
+
43
+ .form-control {
44
+ background: #252a48;
45
+ color: white;
46
+ border: none;
47
+ }
48
+
49
+ .form-control:focus {
50
+ box-shadow: none;
51
+ border: 1px solid #8a86ff;
52
+ }
53
+
54
+ .forgot-password, .sign-up {
55
+ color: #8a86ff;
56
+ text-decoration: none;
57
+ }
58
+
59
+ .btn-primary {
60
+ background: #635bff;
61
+ border: none;
62
+ }
63
+
64
+ .btn-primary:hover {
65
+ background: #5249db;
66
+ }
67
+
68
+ .support-text {
69
+ font-size: 0.9rem;
70
+ color: #888;
71
+ }
72
+ .terminal-video {
73
+ mix-blend-mode: lighten;
74
+ max-width: 100%;
75
+ height: auto;
76
+ }
77
+ footer a {
78
+ color: #888;
79
+ text-decoration: none;
80
+ font-size: 0.9rem;
81
+ }
package/dist/login.html ADDED
@@ -0,0 +1,127 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en" class="h-full">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
+
7
+ <title>IKON Login</title>
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <link rel="stylesheet" href="login.css" />
10
+ </head>
11
+
12
+ <body class="h-full text-white w-full body-style">
13
+ <div class="flex h-full w-full">
14
+ <div
15
+ class="flex flex-col md:flex-row overflow-hidden rounded-lg shadow-lg w-full"
16
+ >
17
+ <!-- Left Section -->
18
+ <div class="flex flex-col h-full justify-center md:w-1/3 p-10 w-full">
19
+ <img
20
+ src="assets/images/dark/keross-logo.png"
21
+ alt="Keross Logo"
22
+ class="p-3 mb-6 left-ikon-logo"
23
+ />
24
+ <blockquote class="quote">
25
+ "Step into the future of<br />
26
+ <strong>Collaboration with our AI-Agent</strong><br />
27
+ <strong>Domain Experts.</strong>"
28
+ </blockquote>
29
+ </div>
30
+ <div
31
+ class="terminal-video flex flex-col items-center justify-center md:w-1/3 p-10 w-full"
32
+ >
33
+ <video width="500" class="terminal-video" autoplay muted>
34
+ <source src="assets/terminal.mp4" type="video/mp4" />
35
+ Your browser does not support the video tag.
36
+ </video>
37
+ </div>
38
+ <!-- Right Section (Login Form) -->
39
+ <div
40
+ class="flex flex-col items-center justify-center md:w-1/3 p-10 w-full"
41
+ >
42
+ <img
43
+ src="assets/images/dark/ikon-logo.png"
44
+ alt="IKON Logo"
45
+ class="right-ikon-logo mb-4"
46
+ />
47
+ <p class="text-gray-300 mb-6">Harness the Power of Data</p>
48
+
49
+ <form class="p-10 pt-0 w-3/4">
50
+ <div class="mb-4">
51
+ <input
52
+ id="userName"
53
+ type="text"
54
+ class="w-full p-3 bg-[#111827] text-white border-none rounded-md focus:ring-2 focus:ring-[#8a86ff]"
55
+ placeholder="Username"
56
+ value="K2303106"
57
+ />
58
+ </div>
59
+ <div class="mb-4">
60
+ <input
61
+ type="password"
62
+ id="userPassword"
63
+ class="w-full p-3 bg-[#111827] text-white border-none rounded-md focus:ring-2 focus:ring-[#8a86ff]"
64
+ placeholder="Password"
65
+ value="**********"
66
+ />
67
+ </div>
68
+ <div class="text-right mb-4">
69
+ <a href="#" class="text-[#8a86ff] text-sm">Forgot Password?</a>
70
+ </div>
71
+ <div class="flex gap-2">
72
+ <button
73
+ type="reset"
74
+ id="resetLoginBtn"
75
+ class="w-1/2 p-3 bg-gray-600 rounded-md hover:bg-gray-500"
76
+ >
77
+ Reset
78
+ </button>
79
+ <button
80
+ type="submit"
81
+ id="submitLoginBtn"
82
+ class="w-1/2 p-3 bg-[#635bff] rounded-md hover:bg-[#5249db]"
83
+ >
84
+ Login
85
+ </button>
86
+ </div>
87
+ </form>
88
+
89
+ <p class="text-gray-400 text-sm mt-4">
90
+ Looking for Support?<br />Version 8.0.0
91
+ </p>
92
+
93
+ <footer class="mt-4 text-sm text-gray-400">
94
+ <a
95
+ href="http://keross.com/about"
96
+ target="_blank"
97
+ class="hover:underline"
98
+ >About Us</a
99
+ >
100
+ |
101
+ <a
102
+ href="http://keross.com/contact"
103
+ target="_blank"
104
+ class="hover:underline"
105
+ >Get in Touch</a
106
+ >
107
+ |
108
+ <a
109
+ href="http://keross.com/privacy-policy"
110
+ target="_blank"
111
+ class="hover:underline"
112
+ >Privacy Policy</a
113
+ >
114
+ </footer>
115
+ </div>
116
+ </div>
117
+ </div>
118
+
119
+ <!-- Alert Container -->
120
+ <div
121
+ id="alertContainer"
122
+ class="bottom-5 fixed right-5 space-y-2 z-50"
123
+ ></div>
124
+
125
+ <script src="login.js"></script>
126
+ </body>
127
+ </html>
package/dist/login.js ADDED
@@ -0,0 +1,140 @@
1
+ document.addEventListener("DOMContentLoaded", function () {
2
+ const usernameInput = document.getElementById("userName");
3
+ const passwordInput = document.getElementById("userPassword");
4
+ const resetButton = document.getElementById("resetLoginBtn");
5
+ const loginButton = document.getElementById("submitLoginBtn");
6
+
7
+ usernameInput.setAttribute("autocomplete", "off");
8
+ passwordInput.setAttribute("autocomplete", "off");
9
+
10
+ resetButton.addEventListener("click", function (e) {
11
+ e.preventDefault();
12
+ usernameInput.value = "";
13
+ passwordInput.value = "";
14
+ });
15
+
16
+ // Function to show custom alerts
17
+ function showAlert(message, type = "error") {
18
+ const alertContainer = document.getElementById("alertContainer");
19
+
20
+ const alertDiv = document.createElement("div");
21
+ alertDiv.className = `flex items-center justify-between p-3 text-white rounded-md shadow-lg ${
22
+ type === "success" ? "bg-green-600" : "bg-red-600"
23
+ } transition-transform transform translate-x-5 opacity-0`;
24
+
25
+ alertDiv.innerHTML = `
26
+ <span>${message}</span>
27
+ <button class="ml-3 text-white font-bold px-2 py-1 rounded hover:bg-gray-700 transition" onclick="this.parentElement.remove()">✖</button>
28
+ `;
29
+
30
+ alertContainer.appendChild(alertDiv);
31
+
32
+ // Animate alert (slide in effect)
33
+ setTimeout(() => {
34
+ alertDiv.classList.remove("translate-x-5", "opacity-0");
35
+ alertDiv.classList.add("opacity-100");
36
+ }, 100);
37
+
38
+ // Remove alert after 3 seconds
39
+ setTimeout(() => {
40
+ alertDiv.classList.add("opacity-0");
41
+ setTimeout(() => alertDiv.remove(), 500);
42
+ }, 3000);
43
+ }
44
+
45
+ function setCookie(name,value,seconds) {
46
+ const cookiePrefix = "ikoncloud_next_";
47
+ var expires = "";
48
+ if (seconds) {
49
+ var date = new Date();
50
+ date.setTime(date.getTime() + (seconds * 1000));
51
+ expires = "; expires=" + date.toUTCString();
52
+ }
53
+ document.cookie =cookiePrefix+ name + "=" + (value || "") + expires + "; path=/";
54
+ }
55
+
56
+ loginButton.addEventListener("click", async function (event) {
57
+ event.preventDefault();
58
+
59
+ const username = usernameInput.value.trim();
60
+ const password = passwordInput.value.trim();
61
+
62
+ console.log("Username:", username);
63
+ console.log("Password:", password);
64
+ try {
65
+ const response = await fetch(`https://ikoncloud-dev.keross.com/ikon-api/platform/auth/login`, {
66
+ method: "POST",
67
+ headers: { "Content-Type": "application/json" },
68
+ body: JSON.stringify({
69
+ userlogin: username,
70
+ password,
71
+ credentialType: "PASSWORD",
72
+ }),
73
+ });
74
+
75
+ const result = await response.json();
76
+
77
+ if (response.ok) {
78
+ showAlert("Login successful!", "success");
79
+ console.log(result)
80
+ setCookie("accessToken", result.accessToken, result.expiresIn );
81
+ setCookie("refreshToken", result.refreshToken, result.refreshExpiresIn );
82
+
83
+ setTimeout(() => {
84
+ //window.location.href = `auth?accessToken=${result.accessToken}&refreshToken=${result.refreshToken}&expiresIn=${result.expiresIn}&refreshExpiresIn=${result.refreshExpiresIn}`;
85
+ window.location.href = "/";
86
+ }, 1500);
87
+ } else {
88
+ showAlert(result.error || "Login failed.");
89
+ }
90
+ } catch (error) {
91
+ showAlert("Error connecting to the server.");
92
+ }
93
+ });
94
+ });
95
+
96
+ ////////////// ---------------- backup code ----------------------------//
97
+
98
+ // document.addEventListener("DOMContentLoaded", function () {
99
+ // const usernameInput = document.getElementById("userName");
100
+ // const passwordInput = document.getElementById("userPassword");
101
+ // const resetButton = document.getElementById("resetLoginBtn");
102
+ // const loginButton = document.getElementById("submitLoginBtn");
103
+
104
+ // usernameInput.setAttribute("autocomplete", "off");
105
+ // passwordInput.setAttribute("autocomplete", "off");
106
+
107
+ // resetButton.addEventListener("click", function (e) {
108
+ // e.preventDefault();
109
+ // usernameInput.value = "";
110
+ // passwordInput.value = "";
111
+ // });
112
+
113
+ // loginButton.addEventListener("click", async function (event) {
114
+ // event.preventDefault();
115
+
116
+ // const username = usernameInput.value.trim();
117
+ // const password = passwordInput.value.trim();
118
+
119
+ // console.log("Username:", username);
120
+ // console.log("Password:", password);
121
+ // try {
122
+ // const response = await fetch("/api/auth/login", {
123
+ // method: "POST",
124
+ // headers: { "Content-Type": "application/json" },
125
+ // body: JSON.stringify({ userName: username, password }),
126
+ // });
127
+
128
+ // const result = await response.json();
129
+
130
+ // if (response.ok) {
131
+ // alert("Login successful!");
132
+ // window.location.href = "/";
133
+ // } else {
134
+ // alert(result.error || "Login failed.");
135
+ // }
136
+ // } catch (error) {
137
+ // alert("Error connecting to the server.");
138
+ // }
139
+ // });
140
+ // });
package/dist/vite.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
package/package.json ADDED
@@ -0,0 +1,118 @@
1
+ {
2
+ "name": "ikon-react-components-lib",
3
+ "private": false,
4
+ "version": "1.0.0",
5
+ "type": "module",
6
+ "main": "./dist/ikon-react-components-lib.cjs.js",
7
+ "module": "./dist/ikon-react-components-lib.es.js",
8
+ "types": "./dist/index.d.ts",
9
+ "style": "dist/styles.css",
10
+ "files": [
11
+ "dist"
12
+ ],
13
+ "scripts": {
14
+ "dev": "vite",
15
+ "build": "tsc -b && vite build",
16
+ "tailwind:build": "ts-node tailwind.config.ts",
17
+ "lint": "eslint .",
18
+ "preview": "vite preview"
19
+ },
20
+ "dependencies": {
21
+ "@assistant-ui/react": "^0.12.12",
22
+ "@assistant-ui/react-ai-sdk": "^1.3.9",
23
+ "@assistant-ui/react-markdown": "^0.12.5",
24
+ "@base-ui/react": "^1.2.0",
25
+ "@hookform/resolvers": "^5.2.2",
26
+ "@radix-ui/react-accordion": "^1.2.12",
27
+ "@radix-ui/react-alert-dialog": "^1.1.15",
28
+ "@radix-ui/react-aspect-ratio": "^1.1.7",
29
+ "@radix-ui/react-avatar": "^1.1.10",
30
+ "@radix-ui/react-checkbox": "^1.3.3",
31
+ "@radix-ui/react-dialog": "^1.1.15",
32
+ "@radix-ui/react-dropdown-menu": "^2.1.16",
33
+ "@radix-ui/react-hover-card": "^1.1.15",
34
+ "@radix-ui/react-icons": "^1.3.0",
35
+ "@radix-ui/react-label": "^2.1.7",
36
+ "@radix-ui/react-navigation-menu": "^1.2.14",
37
+ "@radix-ui/react-popover": "^1.1.15",
38
+ "@radix-ui/react-progress": "^1.1.7",
39
+ "@radix-ui/react-radio-group": "^1.3.8",
40
+ "@radix-ui/react-scroll-area": "^1.2.10",
41
+ "@radix-ui/react-select": "^2.2.6",
42
+ "@radix-ui/react-separator": "^1.1.7",
43
+ "@radix-ui/react-slider": "^1.3.6",
44
+ "@radix-ui/react-slot": "^1.2.4",
45
+ "@radix-ui/react-switch": "^1.2.6",
46
+ "@radix-ui/react-tabs": "^1.1.13",
47
+ "@radix-ui/react-toggle": "^1.1.10",
48
+ "@radix-ui/react-toggle-group": "^1.1.11",
49
+ "@radix-ui/react-tooltip": "^1.2.8",
50
+ "@tailwindcss/vite": "^4.2.0",
51
+ "@tanstack/react-query": "^5.90.21",
52
+ "@tanstack/react-table": "^8.21.3",
53
+ "ai": "^6.0.101",
54
+ "axios": "^1.13.5",
55
+ "class-variance-authority": "^0.7.1",
56
+ "clsx": "^2.1.1",
57
+ "cmdk": "^1.1.1",
58
+ "countries-list": "^3.2.2",
59
+ "country-flag-icons": "^1.6.14",
60
+ "date-fns": "^4.1.0",
61
+ "echarts": "^6.0.0",
62
+ "embla-carousel-react": "^8.6.0",
63
+ "input-otp": "^1.4.2",
64
+ "js-cookie": "^3.0.5",
65
+ "jwt-decode": "^4.0.0",
66
+ "lucide-react": "^0.574.0",
67
+ "motion": "^12.34.3",
68
+ "next-themes": "^0.4.6",
69
+ "react": "^19.2.0",
70
+ "react-big-calendar": "^1.19.4",
71
+ "react-cropper": "^2.3.3",
72
+ "react-day-picker": "^9.13.2",
73
+ "react-dom": "^19.2.0",
74
+ "react-hook-form": "^7.71.1",
75
+ "react-resizable-panels": "^4.6.4",
76
+ "react-router-dom": "^7.13.0",
77
+ "recharts": "^2.15.4",
78
+ "remark-gfm": "^4.0.1",
79
+ "sonner": "^2.0.7",
80
+ "tailwind-merge": "^3.5.0",
81
+ "uuid": "^13.0.0",
82
+ "vaul": "^1.1.2",
83
+ "zod": "^4.3.6",
84
+ "zxcvbn": "^4.4.2"
85
+ },
86
+ "devDependencies": {
87
+ "@eslint/js": "^9.39.1",
88
+ "@tailwindcss/postcss": "^4",
89
+ "@types/js-cookie": "^3.0.6",
90
+ "@types/node": "^24.10.13",
91
+ "@types/react": "^19.2.7",
92
+ "@types/react-big-calendar": "^1.16.3",
93
+ "@types/react-dom": "^19.2.3",
94
+ "@types/zxcvbn": "^4.4.5",
95
+ "@vitejs/plugin-react": "^5.1.1",
96
+ "autoprefixer": "^10.4.24",
97
+ "eslint": "^9.39.1",
98
+ "eslint-plugin-react-hooks": "^7.0.1",
99
+ "eslint-plugin-react-refresh": "^0.4.24",
100
+ "globals": "^16.5.0",
101
+ "postcss": "^8.5.6",
102
+ "postcss-cli": "^11.0.1",
103
+ "postcss-import": "^16.1.1",
104
+ "postcss-preset-env": "^10.4.0",
105
+ "shadcn": "^3.8.5",
106
+ "tailwindcss": "^4.2.0",
107
+ "ts-node": "^10.9.2",
108
+ "tw-animate-css": "^1.4.0",
109
+ "typescript": "~5.9.3",
110
+ "typescript-eslint": "^8.48.0",
111
+ "vite": "^7.3.1",
112
+ "vite-plugin-dts": "^4.5.4"
113
+ },
114
+ "peerDependencies": {
115
+ "react": "^19.2.0",
116
+ "react-dom": "^19.2.0"
117
+ }
118
+ }