@lukso/web-components 1.5.3 → 1.5.4

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## [1.5.4](https://github.com/lukso-network/tools-web-components/compare/v1.5.3...v1.5.4) (2023-02-25)
+
+
+### Bug Fixes
+
+* docs typo ([#56](https://github.com/lukso-network/tools-web-components/issues/56)) ([ea75e46](https://github.com/lukso-network/tools-web-components/commit/ea75e46887cd4a7bb35b2689ec99a6636a08d13e))
+
 ## [1.5.3](https://github.com/lukso-network/tools-web-components/compare/v1.5.2...v1.5.3) (2023-02-24)
 
 

package/README.md

@@ -55,7 +55,7 @@ See example below:
 
 ### Styles (Tailwind CSS projects)
 
-1. Add this preset in the config file
+##### 1. Add this preset in the config file
 
 ```js
 // tailwind.config.js
@@ -65,7 +65,7 @@ module.exports = {
 }
 ```
 
-2. Include styles in your main file
+##### 2. Include styles in your main file
 
 ```scss
 // main.scss
@@ -74,7 +74,7 @@ $font-file-path: '/assets/fonts';
 @import '@lukso/web-components/sass/main.scss';
 ```
 
-3. In your main js file load the CSS variables
+##### 3. In your main js file load the CSS variables
 
 ```javascript
 // app.vue
@@ -83,6 +83,19 @@ import { generateCssVariables } from '@/shared/styles/color-palette'
 generateCssVariables()
 ```
 
+##### 4. Add script to copy assets in your build config
+
+In order to use other files like fonts or images from library we need to manually copy them to your project. This is ESM limitation that allow to import only `js` files.
+
+```ts
+import { copyAssets } from '@lukso/web-components/tools/copy-assets'
+import assets from '@lukso/web-components/assets'
+
+copyAssets('./src/assets', assets)
+```
+
+> Place this at the top of your build file ie. `vite.config.ts`
+
 ### Styles (non Tailwind CSS projects)
 
 Atm the only thing that you can benefit from non Tailwind CSS projects is loading the fonts

package/dist/copy-assets/index.js

@@ -0,0 +1,19 @@
+const i = {};
+function r(n, c) {
+  let e = c;
+  i.existsSync(c) && i.lstatSync(c).isDirectory() && (e = i.join(c, i.basename(n))), i.writeFileSync(e, i.readFileSync(n));
+}
+function s(n, c) {
+  let e = [];
+  const t = i.join(c, i.basename(n));
+  i.existsSync(t) || i.mkdirSync(t), i.lstatSync(n).isDirectory() && (e = i.readdirSync(n), e.forEach(function(o) {
+    const y = i.join(n, o);
+    i.lstatSync(y).isDirectory() ? s(y, t) : r(y, t);
+  }));
+}
+const S = (n, c) => {
+  i.existsSync(n) || i.mkdirSync(n, { recursive: !0 }), s(c, n);
+};
+export {
+  S as copyAssets
+};

package/dist/copy-assets/index.umd.cjs

@@ -0,0 +1 @@
+(function(t,e){typeof exports=="object"&&typeof module<"u"?e(exports):typeof define=="function"&&define.amd?define(["exports"],e):(t=typeof globalThis<"u"?globalThis:t||self,e(t.web_component_copy_assets={}))})(this,function(t){"use strict";const e={};function f(n,i){let c=i;e.existsSync(i)&&e.lstatSync(i).isDirectory()&&(c=e.join(i,e.basename(n))),e.writeFileSync(c,e.readFileSync(n))}function y(n,i){let c=[];const o=e.join(i,e.basename(n));e.existsSync(o)||e.mkdirSync(o),e.lstatSync(n).isDirectory()&&(c=e.readdirSync(n),c.forEach(function(l){const s=e.join(n,l);e.lstatSync(s).isDirectory()?y(s,o):f(s,o)}))}const d=(n,i)=>{e.existsSync(n)||e.mkdirSync(n,{recursive:!0}),y(i,n)};t.copyAssets=d,Object.defineProperty(t,Symbol.toStringTag,{value:"Module"})});

package/dist/shared/utils/copy-assets.d.ts

@@ -0,0 +1,2 @@
+export declare const copyAssets: (assetDir: string, assets: any) => void;
+//# sourceMappingURL=copy-assets.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lukso/web-components",
-  "version": "1.5.3",
+  "version": "1.5.4",
   "type": "module",
   "files": [
     "dist/**/*.{cjs,js,ts,css,woff2,scss}",
@@ -61,6 +61,7 @@
     "./custom-elements": "./custom-elements.json",
     "./custom-elements.json": "./custom-elements.json",
     "./package.json": "./package.json",
+    "./tools/copy-assets": "./tools/copy-assets.cjs",
     "./components": {
       "require": "./dist/components/index.umd.cjs",
       "import": "./dist/components/index.js",

package/src/shared/utils/copy-assets.ts

@@ -0,0 +1,45 @@
+import fs from 'fs'
+import path from 'path'
+
+function copyFileSync(source, target) {
+  let targetFile = target
+
+  // If target is a directory, a new file with the same name will be created
+  if (fs.existsSync(target)) {
+    if (fs.lstatSync(target).isDirectory()) {
+      targetFile = path.join(target, path.basename(source))
+    }
+  }
+
+  fs.writeFileSync(targetFile, fs.readFileSync(source))
+}
+
+function copyFolderRecursiveSync(source, target) {
+  let files = []
+
+  // Check if folder needs to be created or integrated
+  const targetFolder = path.join(target, path.basename(source))
+  if (!fs.existsSync(targetFolder)) {
+    fs.mkdirSync(targetFolder)
+  }
+
+  // Copy
+  if (fs.lstatSync(source).isDirectory()) {
+    files = fs.readdirSync(source)
+    files.forEach(function (file) {
+      const curSource = path.join(source, file)
+      if (fs.lstatSync(curSource).isDirectory()) {
+        copyFolderRecursiveSync(curSource, targetFolder)
+      } else {
+        copyFileSync(curSource, targetFolder)
+      }
+    })
+  }
+}
+
+export const copyAssets = (assetDir: string, assets: any) => {
+  if (!fs.existsSync(assetDir)) {
+    fs.mkdirSync(assetDir, { recursive: true })
+  }
+  copyFolderRecursiveSync(assets, assetDir)
+}

package/tools/color-palette.cjs

@@ -12,7 +12,52 @@ module.exports = (function () {
     var __importDefault = (this && this.__importDefault) || function (mod) {
         return (mod && mod.__esModule) ? mod : { "default": mod };
     };
-    define("hslColorMap", ["require", "exports", "tinycolor2"], function (require, exports, tinycolor2_1) {
+    define("utils/copy-assets", ["require", "exports", "fs", "path"], function (require, exports, fs_1, path_1) {
+        "use strict";
+        Object.defineProperty(exports, "__esModule", { value: true });
+        exports.copyAssets = void 0;
+        fs_1 = __importDefault(fs_1);
+        path_1 = __importDefault(path_1);
+        function copyFileSync(source, target) {
+            var targetFile = target;
+            // If target is a directory, a new file with the same name will be created
+            if (fs_1.default.existsSync(target)) {
+                if (fs_1.default.lstatSync(target).isDirectory()) {
+                    targetFile = path_1.default.join(target, path_1.default.basename(source));
+                }
+            }
+            fs_1.default.writeFileSync(targetFile, fs_1.default.readFileSync(source));
+        }
+        function copyFolderRecursiveSync(source, target) {
+            var files = [];
+            // Check if folder needs to be created or integrated
+            var targetFolder = path_1.default.join(target, path_1.default.basename(source));
+            if (!fs_1.default.existsSync(targetFolder)) {
+                fs_1.default.mkdirSync(targetFolder);
+            }
+            // Copy
+            if (fs_1.default.lstatSync(source).isDirectory()) {
+                files = fs_1.default.readdirSync(source);
+                files.forEach(function (file) {
+                    var curSource = path_1.default.join(source, file);
+                    if (fs_1.default.lstatSync(curSource).isDirectory()) {
+                        copyFolderRecursiveSync(curSource, targetFolder);
+                    }
+                    else {
+                        copyFileSync(curSource, targetFolder);
+                    }
+                });
+            }
+        }
+        var copyAssets = function (assetDir, assets) {
+            if (!fs_1.default.existsSync(assetDir)) {
+                fs_1.default.mkdirSync(assetDir, { recursive: true });
+            }
+            copyFolderRecursiveSync(assets, assetDir);
+        };
+        exports.copyAssets = copyAssets;
+    });
+    define("styles/hslColorMap", ["require", "exports", "tinycolor2"], function (require, exports, tinycolor2_1) {
         "use strict";
         Object.defineProperty(exports, "__esModule", { value: true });
         exports.hslColorMap = void 0;
@@ -35,7 +80,7 @@ module.exports = (function () {
         };
         exports.hslColorMap = hslColorMap;
     });
-    define("color-palette", ["require", "exports", "tinycolor2", "hslColorMap"], function (require, exports, tinycolor2_2, hslColorMap_1) {
+    define("styles/color-palette", ["require", "exports", "tinycolor2", "styles/hslColorMap"], function (require, exports, tinycolor2_2, hslColorMap_1) {
         "use strict";
         Object.defineProperty(exports, "__esModule", { value: true });
         exports.neutral3 = exports.neutral2 = exports.neutral1 = exports.colorPalette = void 0;

package/tools/color-palette.d.ts

@@ -1,4 +1,7 @@
-declare module "hslColorMap" {
+declare module "utils/copy-assets" {
+    export const copyAssets: (assetDir: string, assets: any) => void;
+}
+declare module "styles/hslColorMap" {
     /**
      * Generates a color map for a given hue, saturation and lightness values
      *
@@ -9,7 +12,7 @@ declare module "hslColorMap" {
      */
     export const hslColorMap: (h: any, s: any, l: any) => {};
 }
-declare module "color-palette" {
+declare module "styles/color-palette" {
     type ColorMap = {
         [key: string]: string;
     };

package/tools/color-palette.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"color-palette.d.ts","sourceRoot":"","sources":["../src/shared/styles/hslColorMap.ts","../src/shared/styles/color-palette.ts"],"names":[],"mappings":";IAEA;;;;;;;OAOG;IACH,MAAM,CAAC,MAAM,WAAW,gCASvB,CAAA;;;ICfD,KAAK,QAAQ,GAAG;QACd,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;KACtB,CAAA;IAED;;OAEG;IACH,MAAM,CAAC,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAmCxB,CAAA;IAoBD;;OAEG;IACH,MAAM,CAAC,MAAM,QAAQ,UAAyC,CAAA;IAC9D,MAAM,CAAC,MAAM,QAAQ,UAA0C,CAAA;IAC/D,MAAM,CAAC,MAAM,QAAQ,UAIpB,CAAA"}
+{"version":3,"file":"color-palette.d.ts","sourceRoot":"","sources":["../src/shared/utils/copy-assets.ts","../src/shared/styles/hslColorMap.ts","../src/shared/styles/color-palette.ts"],"names":[],"mappings":";IAuCA,MAAM,CAAC,MAAM,UAAU,aAAc,MAAM,UAAU,GAAG,SAKvD,CAAA;;;IC1CD;;;;;;;OAOG;IACH,MAAM,CAAC,MAAM,WAAW,gCASvB,CAAA;;;ICfD,KAAK,QAAQ,GAAG;QACd,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;KACtB,CAAA;IAED;;OAEG;IACH,MAAM,CAAC,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAmCxB,CAAA;IAoBD;;OAEG;IACH,MAAM,CAAC,MAAM,QAAQ,UAAyC,CAAA;IAC9D,MAAM,CAAC,MAAM,QAAQ,UAA0C,CAAA;IAC/D,MAAM,CAAC,MAAM,QAAQ,UAIpB,CAAA"}