feather-k-demo-utils 0.0.13 → 0.0.15

package/README.md

@@ -46,3 +46,46 @@ import { PUBLISH_DATE } from '@feather-k-demo-utils/utils/publishDate';
 ```
 
 This ensures the publish date is unique to each deployment and requires no code duplication across consuming projects.
+
+## Quick Usage
+
+- **Install:**
+
+  ```bash
+  npm install feather-k-demo-utils
+  ```
+
+- **Include demo styles:**
+
+  ```js
+  import 'feather-k-demo-utils/styles/demo.css';
+  ```
+
+- **Use utils:**
+
+  ```js
+  import { PUBLISH_DATE, featherkStylesVersion } from 'feather-k-demo-utils/utils';
+  ```
+
+- **Use components:**
+
+  ```vue
+  <script setup lang="ts">
+  import { DemoStats } from 'feather-k-demo-utils';
+  </script>
+
+  <template>
+    <DemoStats />
+  </template>
+  ```
+
+- **Verify package contents locally:**
+
+  ```bash
+  npm run build
+  npm pack
+  tar -tf feather-k-demo-utils-<version>.tgz
+  # confirm package/lib/styles/demo.css and package/lib/utils/index.js are present
+  ```
+
+> Note: If you want a dedicated components subpath (e.g. `feather-k-demo-utils/components`), we can add it to `package.json` `exports`.

package/lib/components/index.js

@@ -0,0 +1 @@
+export { default as DemoStats } from './DemoStats.vue';

package/lib/styles/demo.css

@@ -0,0 +1,33 @@
+h1 {
+  color: var(--kendo-color-primary, limegreen);
+}
+
+/* moved from demo-utilities */
+.featherk-demo-form {
+  display: flex;
+  flex-direction: column;
+  gap: 1em;
+
+  .actions {
+    margin-top: 1em;
+    display: flex;
+    flex-direction: row;
+    gap: 0.5em;
+    justify-content: flex-start;
+  }
+}
+
+.demo-stats-wrapper {
+  .demo-stats {
+    position: fixed;
+    right: var(--kendo-spacing-4);
+    bottom: var(--kendo-spacing-4);
+    background: hsl(from var(--kendo-color-primary) h s 90% / 0.5);
+    font-size: var(--kendo-font-size-sm);
+    margin: var(--kendo-spacing-2);
+    padding: var(--kendo-spacing-2);
+    border-radius: var(--kendo-border-radius-md);
+    box-shadow: var(--kendo-elevation-2);
+    pointer-events: none;
+  }
+}

package/lib/styles/styles.d.ts

@@ -0,0 +1,4 @@
+// src/styles/styles.d.ts
+// Type declaration for importing the CSS module from this package.
+// This allows TypeScript consumers to import "feather-k-demo-utils/styles" without type errors.
+declare module "feather-k-demo-utils/styles";

package/lib/utils/cdnVersion.js

@@ -0,0 +1,14 @@
+import { FEATHERK_STYLES_CDN_URL } from "./constants";
+/**
+ * Extracts the version string (e.g. "1.2.3" or "latest") from a CDN URL for @featherk/styles.
+ * Returns the version as a string, or null if not found.
+ */
+export const getFeatherkStylesVersionFromUrl = (url) => {
+    const match = url.match(/@featherk\/styles@([^/]+)\//);
+    return match && typeof match[1] === "string" ? match[1] : null;
+};
+/**
+ * The resolved FeatherK styles version (evaluated at import time).
+ */
+export const FEATHERK_STYLES_VERSION = getFeatherkStylesVersionFromUrl(FEATHERK_STYLES_CDN_URL);
+export const featherkStylesVersion = FEATHERK_STYLES_VERSION;

package/lib/utils/constants.js

@@ -0,0 +1,20 @@
+// src/utils/constants.ts
+/**
+ * Returns the FeatherK styles CDN URL.
+ * Uses import.meta.env.VITE_FEATHERK_STYLES_CDN_URL if available (Vite), otherwise falls back to the default CDN URL.
+ */
+export function getFeatherKStylesCdnUrl() {
+    // Check for Vite env variable if running in a Vite environment (type-safe)
+    if (typeof import.meta === 'object' &&
+        import.meta &&
+        'env' in import.meta &&
+        import.meta.env &&
+        import.meta.env.VITE_FEATHERK_STYLES_CDN_URL) {
+        return import.meta.env.VITE_FEATHERK_STYLES_CDN_URL;
+    }
+    return "https://cdn.jsdelivr.net/npm/@featherk/styles@latest/dist/styles.css";
+}
+/**
+ * The resolved FeatherK styles CDN URL (evaluated at import time).
+ */
+export const FEATHERK_STYLES_CDN_URL = getFeatherKStylesCdnUrl();

package/lib/utils/index.js

@@ -0,0 +1,6 @@
+// Barrel file for utils exports
+export * from './cdnVersion';
+export * from './constants';
+export * from './publishDate';
+// Export DemoStats component for consumers
+export * from '../components';

package/lib/utils/publishDate.js

@@ -0,0 +1,8 @@
+// publishDate.ts
+/// <reference types="vite/client" />
+// Utility to provide the publish date of the demo or app
+// This value is injected by the consuming project at build time using Vite's define option.
+// In your vite.config.ts, add:
+//   define: { 'import.meta.env.PUBLISH_DATE': JSON.stringify(process.env.PUBLISH_DATE || new Date().toISOString()) }
+// Then, PUBLISH_DATE will be set at build time for each consuming app.
+export const PUBLISH_DATE = import.meta.env.PUBLISH_DATE ?? "";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "feather-k-demo-utils",
   "private": false,
-  "version": "0.0.13",
+  "version": "0.0.15",
   "type": "module",
   "main": "lib/index.es.js",
   "module": "lib/index.es.js",
@@ -22,21 +22,28 @@
   ],
   "exports": {
     ".": {
+      "types": "./lib/index.d.ts",
       "import": "./lib/index.es.js",
       "require": "./lib/index.umd.js",
       "default": "./lib/index.es.js"
     },
-    "./utils": "./lib/utils/index.js",
-    "./styles": {
-      "import": "./lib/styles/index.js",
-      "require": "./lib/styles/index.js",
-      "default": "./lib/styles/index.js"
+    "./utils": {
+      "types": "./lib/utils/index.d.ts",
+      "import": "./lib/utils/index.js",
+      "require": "./lib/utils/index.js",
+      "default": "./lib/utils/index.js"
+    },
+    "./components": {
+      "types": "./lib/components/index.d.ts",
+      "import": "./lib/components/index.js",
+      "require": "./lib/components/index.js",
+      "default": "./lib/components/index.js"
     },
     "./styles/demo.css": "./lib/styles/demo.css"
   },
   "scripts": {
     "dev": "vite",
-    "build": "tsc --project tsconfig.build.json && npm run copy-styles && npm run clean-lib && vite build",
+    "build": "vite build && tsc --project tsconfig.build.json && npm run copy-styles && npm run clean-lib",
     "copy-styles": "node scripts/copy-style.js",
     "clean-lib": "node scripts/cleanup-lib.js",
     "preview": "vite preview",
@@ -58,11 +65,8 @@
     "lib/index.es.js",
     "lib/index.d.ts",
     "lib/index.umd.js",
-    "lib/utils",
-    "lib/styles",
     "lib/components",
-    "lib/styles/styles.d.ts",
-    "lib/styles/index.js",
-    "lib/styles/index.d.ts"
+    "lib/utils",
+    "lib/styles"
   ]
 }