@hashtagcms/admin-ui-kit 1.0.6

package/packages/helpers/src/fx.js

@@ -0,0 +1,106 @@
+import { animate, spring } from "motion";
+export class Fx {
+  static come(div, cb) {
+    document.querySelectorAll(div).forEach((e) => {
+      e.style.display = "";
+    });
+    animate(div, { opacity: [0, 1] }, { duration: 1 }).finished.then(() => {
+      if (cb) {
+        cb.apply(this, arguments);
+      }
+    });
+  }
+
+  static out(div, cb) {
+    //div = (typeof div == "string") ? document.getElementById(div) : div;
+    animate(div, { opacity: [1, 0] }, { duration: 1 }).finished.then(() => {
+      document.querySelectorAll(div).forEach((e) => {
+        e.style.display = "none";
+      });
+      if (cb) {
+        cb.apply(this, arguments);
+      }
+    });
+  }
+
+  static highlight(div, cb) {
+    div = typeof div === "string" ? document.getElementById(div) : div;
+    let backgroundColor =
+      div.style.backgroundColor === "" ? "#fff" : div.style.backgroundColor;
+    if (div.nodeName === "TR") {
+      div = div.querySelectorAll("td");
+    }
+    animate(
+      div,
+      { "background-color": "#fff3cd" },
+      { duration: 0.5 },
+    ).finished.then(() => {
+      animate(
+        div,
+        { "background-color": backgroundColor },
+        { duration: 1 },
+      ).finished.then(() => {
+        if (cb) {
+          cb.apply(this, arguments);
+        }
+      });
+    });
+  }
+
+  static scrollWinTo(div, cb) {
+    let ele = document.querySelector(div);
+    if (ele) {
+      window.scrollTo({
+        top: ele.offsetTop,
+        behavior: "smooth",
+      });
+      setTimeout(() => {
+        if (cb) {
+          cb.apply(this, arguments);
+        }
+      }, 700);
+    }
+  }
+
+  static slideLeft(div, cb) {
+    div = document.querySelector(div);
+    let old = div.getBoundingClientRect();
+    div.oldProp = old;
+    animate(
+      div,
+      { x: 0 },
+      {
+        easing: spring({
+          velocity: -(window.outerWidth + div.getBoundingClientRect().width),
+        }),
+      },
+    ).finished.then(() => {
+      if (cb) {
+        cb.apply(this, arguments);
+      }
+    });
+  }
+
+  static slideRight(div, cb) {
+    div = document.querySelector(div);
+    animate(
+      div,
+      { x: 0 },
+      {
+        easing: spring({
+          velocity: window.outerWidth + div.getBoundingClientRect().width,
+        }),
+      },
+    ).finished.then(() => {
+      if (cb) {
+        cb.apply(this, arguments);
+      }
+    });
+  }
+
+  static cssAnimate(ele, css) {
+    ele = typeof ele === "string" ? document.querySelector(ele) : ele;
+    ele.classList.remove("animated", css);
+    ele.classList.add("animated", css);
+  }
+}

package/packages/helpers/src/humanize.js

@@ -0,0 +1,14 @@
+/**
+ * Humanize a string
+ * Replaces underscores and dashes with spaces and capitalizes the first letter
+ * Fallback implementation since generic SDK might miss it
+ */
+export default function Humanize(str) {
+  if (typeof str !== 'string') return '';
+  
+  return str
+      .replace(/[_-]+/g, ' ')
+      .replace(/\s+/g, ' ')
+      .trim()
+      .replace(/\b\w/g, (char) => char.toUpperCase());
+}

package/packages/helpers/src/map.js

@@ -0,0 +1,3 @@
+import { MapAPI } from "@hashtagcms/admin-sdk";
+
+export default MapAPI;

package/packages/styles/README.md

@@ -0,0 +1,37 @@
+# @hashtagcms/styles
+
+The core design system for HashtagCMS. This package contains the SASS/SCSS source files used to style the admin interface, compatible with the compiled CSS structure.
+
+## 📦 Installation
+
+```bash
+npm install @hashtagcms/styles
+```
+
+## 🚀 Usage
+
+For most projects, you will want to import the main standard entry point in your SCSS file:
+
+```scss
+@import "~@hashtagcms/styles/app";
+```
+
+## 📂 Structure
+
+- **`_variables.scss`**: Global SASS variables for colors, spacing, and typography.
+- **`_admin.scss`**: Core layout styles for the dashboard shell.
+- **`_table-grid.scss`**: Styles for the `TabularView` component.
+- **`_loader.scss`**: Styles for the `Loader` component.
+- **`_toast.scss`**: Styles for the `ToastBox` component.
+
+## 🎨 Customization
+
+To override variables, import your custom variables _before_ importing this package:
+
+```scss
+// Your overrides
+$primary-color: #3498db;
+
+// Import HashtagCMS styles
+@import "~@hashtagcms/styles/app";
+```

package/packages/styles/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "@hashtagcms/styles",
+  "version": "1.0.0",
+  "description": "Design system and styles for HashtagCMS",
+  "author": "HashtagCMS",
+  "license": "MIT",
+  "homepage": "https://hashtagcms.org",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/hashtagcms/admin-ui-kit.git"
+  },
+  "exports": {
+    "./*": "./src/*"
+  }
+}

package/packages/styles/src/_action-bar.scss

@@ -0,0 +1,35 @@
+.actionToolbar {
+  * {
+    font-size: 12px;
+  }
+  .btn {
+    padding: 10px;
+  }
+  .dropdown-menu li:hover {
+    background: #f3f3f3;
+    color: $dropdown-link-color;
+  }
+  .dropdown {
+    a.lang {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+  }
+}
+
+.searchForm {
+  * {
+    font-size: 14px;
+  }
+  div.space-between {
+    padding: 5px 2px;
+    background: #f3f3f3;
+  }
+  div.space-between:first-child {
+    padding-left: 5px;
+  }
+  .btn-space {
+    margin-right: 2px;
+    margin-left: 2px;
+  }
+}

package/packages/styles/src/_admin.scss

@@ -0,0 +1,22 @@
+@use "sass:math";
+
+@mixin marginTop($value) {
+  margin-top: $value;
+}
+
+// @import "../css/animate.css";
+@import "variables";
+@import "left-nav";
+@import "info-box";
+@import "table-grid";
+@import "action-bar";
+@import "page-manager";
+@import "loader";
+@import "module-permission";
+@import "menu-sorter";
+@import "category-list";
+@import "popover-modal";
+@import "model-creator";
+@import "toast";
+@import "badges";
+@import "common";