feat: build react/vue/elements icons (#4)

* feat: build react icons

* feat: build icons for vue

* feat: build icons for elements

* fix: add necessary config to be able to build correct imports with eik plugin

* See a preview of all icons using pnpm dev command

Align with other warp-ds repos on how we can check the output in the form of a running 'docs page.

* update README with new scripts

---------

Co-authored-by: BalbinaK <balbuhhha@gmail.com>

.gitignore

@@ -1,4 +1,8 @@
 /node_modules
 /dist
 
-.FIGMA_TOKEN
+.FIGMA_TOKEN
+
+vue/
+react/
+elements/

README.md

@@ -21,14 +21,14 @@ To update the icons, run the following script. If it has a valid Figma access to
 or 
 
 ```bash
-pnpm run import
+pnpm import
 ```
 
 ### Local preview
 You can open a local preview of the icons. Use this to verify that the icons looks as they should. Run the following command.
 
 ```bash
-pnpm run preview
+pnpm dev
 ```
 
 

elements.eik.js

@@ -0,0 +1,16 @@
+import * as eik from '@eik/esbuild-plugin';
+import esbuild from 'esbuild';
+
+await eik.load();
+
+await esbuild.build({
+  plugins: [eik.plugin()],
+  entryPoints: ['elements/index.js'],
+  bundle: true,
+  outfile: 'dist/elements/icons.js',
+  format: 'esm',
+  sourcemap: true,
+  target: 'es2017',
+  minify: true,
+  external: ['lit'],
+});

package.json

@@ -5,21 +5,30 @@
   "description": "WARP's icon set",
   "main": "index.js",
   "files": [
-    "dist"
+    "dist",
+    "vue",
+    "react",
+    "elements"
   ],
   "exports": {
-    ".": "./index.js"
+    ".": "./index.js",
+    "./react": "./react/index.js",
+    "./vue": "./vue/index.js",
+    "./elements": "./elements/index.js",
+    "./elements/*": "./elements/*.js",
+    "./package.json": "./package.json"
   },
   "scripts": {
     "import": "node ./scripts/import.js",
     "build": "node ./scripts/build.js",
-    "render": "node preview/render.js",
-    "dev": "vite",
-    "vite:build": "vite build",
-    "preview": "pnpm run build && vite build && vite preview"
+    "dev": "pnpm build && vite",
+    "build:react": "rimraf react && mkdir react && node ./scripts/output/react.js && node ./react.eik.js",
+    "build:vue": "rimraf vue && mkdir vue && node ./scripts/output/vue.js && node ./vue.eik.js",
+    "build:elements": "rimraf elements && mkdir elements && node ./scripts/output/elements.js && node ./elements.eik.js"
   },
   "license": "Apache-2.0",
   "devDependencies": {
+    "@eik/esbuild-plugin": "^1.1.11",
     "@sindresorhus/slugify": "^2.1.0",
     "@warp-ds/uno": "^1.0.0",
     "camelcase": "^8.0.0",
@@ -41,5 +50,19 @@
   },
   "publishConfig": {
     "access": "public"
+  },
+  "eik": {
+    "server": "https://assets.finn.no",
+    "type": "package",
+    "files": {
+      "react": "./dist/react",
+      "vue": "./dist/vue",
+      "elements": "./dist/elements"
+    },
+    "import-map": [
+      "https://assets.finn.no/map/react/v2",
+      "https://assets.finn.no/map/vue/v1",
+      "https://assets.finn.no/map/custom-elements/v2"
+    ]
   }
 }