@mozaic-ds/icons-vue 0.1.0-beta.0 → 0.1.0-beta.2

package/package.json

@@ -1,20 +1,24 @@
 {
   "name": "@mozaic-ds/icons-vue",
-  "version": "0.1.0-beta.0",
+  "version": "0.1.0-beta.2",
   "description": "ADS icons for vue usage",
   "main": "index.js",
+  "files": [
+    "dist/*",
+    "src/*"
+  ],
   "scripts": {
     "clean": "rm -rf dist/",
     "icons:build": "node icons-builder/index.js",
     "build": "vue-tsc && vite build",
-    "prepublishOnly": "npm run icons:build && npm run build && cp package.json dist",
+    "prepublishOnly": "npm run icons:build && npm run build",
     "release": "release-it",
     "release:beta": "release-it --preRelease=beta",
     "npm:publish": "npm publish --access public",
     "npm:publishBeta": "npm publish --tag beta --access public"
   },
   "dependencies": {
-    "@mozaic-ds/icons": "^2.0.0-beta.22"
+    "@mozaic-ds/icons": "2.0.0-beta.47"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^3.2.0",
@@ -26,8 +30,7 @@
     "glob": "^10.3.10",
     "release-it": "^17.1.1",
     "rimraf": "^5.0.5",
-    "svg-parser": "^2.0.4",
-    "svgo": "^3.2.0"
+    "svg-parser": "^2.0.4"
   },
   "repository": {
     "type": "git",

package/.github/CODEOWNERS

@@ -1,8 +0,0 @@
-# CODEOWNERS
-# Each line is a file pattern followed by one or more owners.
-
-# These owners will be the default owners for everything in
-# the repo. Unless a later match takes precedence,
-# @adeo/adeo-design-system will be requested for
-# review when someone opens a pull request.
-*       @adeo/adeo-design-system

package/.github/ISSUE_TEMPLATE/BUG-REPORT.yml

@@ -1,102 +0,0 @@
-name: 🐞 Bug Report
-description: Report a bug
-labels: ['bug']
-body:
-  - type: markdown
-    attributes:
-      value: |
-        Hi there! :wave: :smiley:
-        Thanks for taking the time to fill out this bug report!
-
-        > To expedite issue processing please search open and closed issues before submitting a new one.
-  - type: dropdown
-    id: about
-    attributes:
-      label: I am opening an issue for
-      options:
-        - New icons
-        - Existing icons
-    validations:
-      required: true
-  - type: input
-    id: ads-icons-version
-    attributes:
-      label: Version of ADS-Icons
-      description: Which version of ADS-Icons is affected?
-      placeholder: ex. @mozaic-ds/icons@2.0.0
-    validations:
-      required: true
-  - type: checkboxes
-    id: regression
-    attributes:
-      label: Is this a regression?
-      description: Did this behavior use to work in the previous version?
-      options:
-        - label: 'Yes'
-        - label: 'No'
-        - label: "I don't know"
-    validations:
-      required: true
-  - type: textarea
-    id: description
-    attributes:
-      label: Description
-      placeholder: A clear and concise description of what the bug is.
-    validations:
-      required: true
-  - type: input
-    id: github-repository
-    attributes:
-      label: Github repository
-      description: To better help you, please indicate the url of your GitHub repo
-      placeholder: ex. https://github.com/adeo/ads-icons
-    validations:
-      required: true
-  - type: input
-    id: mockups
-    attributes:
-      label: Mock-up(s)
-      description: Please, indicate the URL of your Figma mock-up to give us more context.
-      placeholder: e.g., https://www.figma.com/file/b09kkFmjlH6RnLEDF2vppS/%5BBA%5D-Button-%F0%9F%9F%A2?node-id=0%3A1
-  - type: textarea
-    id: what-happened
-    attributes:
-      label: What happened?
-      description: Tell us, what's happening?
-      placeholder: |
-        Tell us what you see.
-
-        Tip: You can attach images or log files by clicking this area to highlight it and then dragging files in.
-  - type: textarea
-    id: what-expected
-    attributes:
-      label: What is expected?
-      description: Tell us, what did you expect to happen?
-      placeholder: Describe the expected outcome.
-  - type: textarea
-    id: reproduce
-    attributes:
-      label: To Reproduce
-      description: Steps to reproduce the issue.
-      placeholder: |
-        1. Go to '...'
-        2. Click on '....'
-        3. Scroll down to '....'
-        4. See error
-
-        Tip: You can attach images or log files by clicking this area to highlight it and then dragging files in.
-  - type: textarea
-    id: code
-    attributes:
-      label: Code example
-      description: Copy here the concerned code or an example of code. _(Consider using Stackbliz, Codepen or CodeSandbox to provide a testable code example.)_
-      render: HTML
-  - type: textarea
-    id: additional-comments
-    attributes:
-      label: Additional comments
-      description: Add any other comments about the problem here.
-      placeholder: |
-        Is this a browser specific issue? If so, please specify the browser and version.
-        Do you have specific setup for sketch, plugins, etc.
-        Do any of these matter: operating system, IDE, package manager, HTTP server, ...?

package/.github/ISSUE_TEMPLATE/FEATURE-REQUEST.yml

@@ -1,27 +0,0 @@
-name: 🚀 Feature request
-description: Suggest an idea for this project
-labels: [':rocket: feat']
-body:
-  - type: markdown
-    attributes:
-      value: |
-        Hi there! :wave: :smiley:
-        Thank you for taking the time to fill out this feature request and helping us expand/improve the Design System!
-
-        > To expedite issue processing please search open and closed issues before submitting a new one.
-  - type: dropdown
-    id: about
-    attributes:
-      label: I want to propose an evolution/improvement on
-      options:
-        - New icons
-        - Existing icons
-    validations:
-      required: true
-  - type: textarea
-    id: description
-    attributes:
-      label: Description
-      placeholder: A clear and concise description of the issue or what you are missing.
-    validations:
-      required: true

package/.github/PULL_REQUEST_TEMPLATE.md

@@ -1,28 +0,0 @@
-## I have read [the contributing guidelines](https://mozaic.adeo.cloud/contributing/)
-
-- [ ] Yes
-- [ ] No
-
-## Does this PR introduce a breaking change?
-
-read [What is a breaking change ?](https://mozaic.adeo.cloud/contributing/developers/git-conventions/#breaking-changes-)
-
-- [ ] Yes
-- [ ] No
-
-## Have you written a story about your changes?
-
-- [ ] Yes
-- [ ] No
-
-## Describe the changes
-
-<!-- Please describe the current behavior that you are modifying, or link to a relevant issue. -->
-
-## GitHub issue number _(or Jira issue URL)_
-
-<!-- Please indicate a link or a number related to the issue or the Jira concerned. -->
-
-## Other information
-
-<!-- Add any other comments or anything else relevant about your request here. -->

package/.release-it.json

@@ -1,21 +0,0 @@
-{
-  "git": {
-    "requireBranch": ["main", "beta", "beta/*", "chore", "chore/*", "next"],
-    "requireCommits": true,
-    "commitMessage": "chore(release): publish v${version}"
-  },
-  "npm": {
-    "publish": false
-  },
-  "github": {
-    "release": true,
-    "releaseName": "v${version}",
-    "skipChecks": false
-  },
-  "plugins": {
-    "@release-it/conventional-changelog": {
-      "preset": "angular",
-      "infile": "CHANGELOG.md"
-    }
-  }
-}

package/CHANGELOG.md

@@ -1,13 +0,0 @@
-
-
-# 0.1.0-beta.0 (2024-03-06)
-
-
-### Features
-
-* **compiler:** new compiler based on new ads-icons ([45142a9](https://github.com/adeo/ads-icons-vue/commit/45142a97a0a35428078d9ad47ce27721c73026db))
-* **icons:** add index for each components ([ed41659](https://github.com/adeo/ads-icons-vue/commit/ed416590332dcb034da8d1ff7b3eaf465a0ade1f))
-* **icons:** export all components ([94ec297](https://github.com/adeo/ads-icons-vue/commit/94ec297fa9214e4b17003093abee408f556b767f))
-* **icons:** update names and add comment ([f6c79d2](https://github.com/adeo/ads-icons-vue/commit/f6c79d2b081c4457abaf028bab38c8054c4e8a9b))
-* **init:** first vue icons ([aed6261](https://github.com/adeo/ads-icons-vue/commit/aed6261aed972afbb3ba1110ebb486fd9c4d4585))
-* **initial:** first commit ([319a2e6](https://github.com/adeo/ads-icons-vue/commit/319a2e6c39070f1d19dffeaa11a94b7fd110a693))

package/icons-builder/component-generator/index.js

@@ -1,63 +0,0 @@
-const fs = require("fs").promises;
-const path = require("path");
-const templateVue = require("./vue-template");
-const { createComponentName } = require("../utils/tools");
-
-
-/**
- * Asynchronously generates Vue component files for a given array of icons. Each icon's data
- * is used to create a Vue component file and an index.js file for exports. It also aggregates
- * all component import statements into a single 'icons.js' file.
- *
- * @async
- * @param {Array<{file: string, data: string}>} icons - An array of objects representing icons,
- * each containing the 'file' name and the 'data' as a UTF-8 string.
- * @throws {Error} Throws an error if there is an issue creating directories, writing files,
- * or during any part of the file generation process.
- * @returns {Promise<void>} A promise that resolves when all Vue components have been successfully
- * generated and import statements have been aggregated and written to 'icons.js'.
- */
-const generateVueComponent = async (icons) => {
-  try {
-    // Aggregate import statements
-    let importStatements = "";
-
-    for (const icon of icons) {
-      if (!icon.file) {
-        continue;
-      }
-
-      const parsedName = createComponentName(icon.file);
-      importStatements += `export { ${parsedName} } from './components/${parsedName}';\n`;
-
-      const dataVue = templateVue(icon);
-      const dataIndex = `import ${parsedName} from './${parsedName}.vue';
-export { ${parsedName} };`;
-
-      const componentDir = path.join(
-        process.cwd(),
-        `${path.relative(process.cwd(), "src/components")}/${parsedName}`
-      );
-      await fs.mkdir(componentDir, { recursive: true });
-
-      const writePath = path.join(componentDir, `${parsedName}.vue`);
-      const writePathIndex = path.join(componentDir, "index.js");
-
-      await fs.writeFile(writePath, dataVue, "utf8");
-      await fs.writeFile(writePathIndex, dataIndex, "utf8");
-    }
-
-    // Write aggregated import statements to icons.js
-    const writeIndex = path.join(
-      process.cwd(),
-      path.relative(process.cwd(), "src/components"),
-      "icons.js"
-    );
-    await fs.appendFile(writeIndex, importStatements, "utf8");
-  } catch (err) {
-    console.error(`✗ ERROR : ${err}`);
-    throw err; // Rethrow or handle error as needed
-  }
-};
-
-module.exports = generateVueComponent;

package/icons-builder/component-generator/vue-template.js

@@ -1,66 +0,0 @@
-const { parse } = require("svg-parser");
-const { createComponentName, convertPxToRem } = require("../utils/tools");
-
-/**
- * Generates a Vue component template string from an icon object containing the file name and SVG data.
- * The function parses the SVG data to inject dynamic properties such as width, height (based on the file name),
- * and fill color. It constructs a Vue component with these dynamic properties and returns the component as a string.
- *
- * @param {Object} icon - An object containing the 'file' name and SVG 'data' of an icon.
- * @param {string} icon.file - The file name of the icon, used to derive the component name and size.
- * @param {string} icon.data - The raw SVG data of the icon.
- * @returns {string|null} A string containing the Vue component template, or null if the SVG content is invalid.
- */
-const vueIconComponent = ({ file, data }) => {
-  const componentName = `${createComponentName(file)}`;
-
-  const sizePx = file.replace(".svg", "").split("_").pop();
-
-  const sizeRem = convertPxToRem(sizePx.replace("px", ""));
-  const parsedSVG = parse(data);
-
-    const parsedData = data.replace(
-      "<svg",
-      `<svg aria-hidden="true" width="${sizeRem}" height="${sizeRem}" :fill="color"`
-    );
-  const viewBox = parsedSVG.children.find((child) => child.tagName === "svg")
-    ?.properties?.viewBox;
-  
-  const content =
-    parsedSVG.children.find((child) => child.tagName === "svg")?.children || [];
-
-  if (!sizeRem || content.length === 0 || !viewBox) {
-    console.error(
-      `✗ ERROR : Problem building ${file} for VueJS - missing or invalid SVG content`
-    );
-
-    return null;
-  }
-  return `<template>${parsedData}</template>
-<script lang="ts">
-export default {
-    name: '${componentName}',
-    props: {
-    /**
-     * Icon color
-     */
-    color: {
-      type: String,
-      default: 'currentColor',
-    },
-  },
-};
-</script>
-`;
-};
-
-/**
- * Wraps the `vueIconComponent` function to directly return a Vue component template string
- * for a given icon object.
- *
- * @param {Object} icon - An object containing the 'file' name and SVG 'data' of an icon.
- * @returns {string|null} A string containing the Vue component template, or null if the SVG content is invalid.
- */
-const templateVue = (icon) => `${vueIconComponent(icon, icon.data)}`;
-
-module.exports = templateVue;

package/icons-builder/index.js

@@ -1,44 +0,0 @@
-/**
- * Compiles icons by cleaning directories, fetching icons,
- * and generating Vue components for each icon. Logs progress and success messages
- * to the console. This function encapsulates the entire process of preparing
- * and compiling icons for use in VueJS applications.
- *
- * @async
- * @function compileIcons
- * @returns {Promise<void>} A promise that resolves when the icons have been compiled
- * successfully or rejects with an error if any step in the process fails.
- */
-const cleanDirectories = require("./utils/directory-cleaner");
-const fetchIcons = require("./utils/fetch-icons");
-const generateVueComponent = require("./component-generator");
-
-console.log(`
-•••••••••••••••••••••••••••••••••••••••
-+                                     +
-+      COMPILING ADS ICON FOR VUEJS   +
-+                                     +
-•••••••••••••••••••••••••••••••••••••••
-`);
-
-async function compileIcons() {
-  try {
-    await cleanDirectories();
-    console.log("✓ SUCCESS : Icons Directories cleaned and recreated");
-
-    const icons = await fetchIcons();
-    console.log("✓ SUCCESS : Icons cleaned and saved as SVGs in the package");
-
-    await generateVueComponent(icons);
-    console.log(
-      "✓ SUCCESS : Monochrom icons compiled into react and vue components"
-    );
-
-    // Assuming there's a step to compile or gather color icons as well, not shown in the original code.
-    // const colorIcons = ...; // This line is just a placeholder for actual logic.
-  } catch (err) {
-    console.error(`✗ ERROR : ${err}`);
-  }
-}
-
-compileIcons();

package/icons-builder/utils/directory-cleaner.js

@@ -1,46 +0,0 @@
-const fs = require("fs").promises;
-const path = require("path");
-const { rimraf } = require("rimraf");
-
-/**
- * Recreates a directory at the specified path. If the directory already exists,
- * no action is taken. If the directory does not exist, it is created with all
- * necessary parent directories.
- *
- * @async
- * @param {string} componentPath - The path where the directory will be recreated.
- * @returns {Promise<boolean>} A promise that resolves to true if the directory
- * is successfully checked and possibly created.
- * @throws {Error} Throws an error if there is an issue accessing or creating the directory.
- */
-const recreateIconsDir = async (componentPath) => {
-  try {
-    await fs.access(componentPath);
-    // If the directory exists, no further action is needed
-  } catch (error) {
-    // If the directory does not exist, it will throw an error, then we create the directory
-    await fs.mkdir(componentPath, { recursive: true });
-  }
-  return true; // This return value is not strictly needed unless you use it for a condition
-};
-
-
-/**
- * Cleans and recreates the icons directory within the "src/components" path
- * relative to the current working directory. This function first attempts to
- * remove the existing icons directory and then recreates it.
- *
- * @async
- * @returns {Promise<void>} A promise that resolves when the icons directory has
- * been successfully cleaned and recreated. 
- * @throws {Error} Throws an error if cleaning or recreating the directory fails.
- */
-const cleanRecreateIconsDirs = async () => {
-  const componentPath = path.join(process.cwd(), "src/components");
-  // Clean the directory first
-  await rimraf(componentPath);
-  // Then recreate the directory
-  await recreateIconsDir(componentPath);
-};
-
-module.exports = cleanRecreateIconsDirs;

package/icons-builder/utils/fetch-icons.js

@@ -1,47 +0,0 @@
-#! /usr/bin/env node
-const fs = require("fs").promises; // Use the promise-based version of fs
-const path = require("path");
-const { glob } = require("glob");
-
-/**
- * Asynchronously reads the content of an icon file and returns an object containing
- * the file name and its data.
- * 
- * @async
- * @param {string} file - The path to the icon file to be read.
- * @returns {Promise<{file: string, data: string}>} A promise that resolves to an object
- * containing the 'file' name (path) and the 'data' as a UTF-8 string.
- * @throws {Error} Throws an error if reading the file fails.
- */
-const readIcon = async (file) => {
-  const data = await fs.readFile(file, "utf8");
-  return { file, data };
-};
-
-/**
- * Asynchronously searches for SVG icon files within the 'node_modules/@mozaic-ds/icons/build/svg'
- * directory and reads their contents. Returns an array of objects, each representing an icon
- * with its file name and data.
- *
- * @async
- * @returns {Promise<Array<{file: string, data: string}>>} A promise that resolves to an array of
- * objects, where each object contains the 'file' name (only the basename) and the 'data' of an icon.
- * @throws {Error} Throws an error if the search or file reading fails.
- */
-const fetchIcons = async () => {
-  try {
-    const inputPath = path.relative(
-      process.cwd(),
-      "node_modules/@mozaic-ds/icons/build/svg/**/*.svg"
-    );
-    const icons = await glob(inputPath);
-    const iconsData = await Promise.all(icons.map(readIcon));
-    iconsData.forEach((icon) => (icon.file = path.basename(icon.file)));
-    return iconsData;
-  } catch (err) {
-    console.error(err);
-    throw err; // Rethrowing the error to be handled by the caller
-  }
-};
-
-module.exports = fetchIcons;

package/icons-builder/utils/tools.js

@@ -1,20 +0,0 @@
-/**
- * Creates Component name from a string (usually the icon file name)
- * @param {string} str - The icon fileName 
- */
-const createComponentName = (str) => {
-  str = str?.replace('.svg', '')?.replace(/_/g, '')?.replace(str.split('_')[0], '')
-  return (str?.match(/[a-zA-Z0-9]+/g) || [])
-    .map((w) => `${w.charAt(0).toUpperCase()}${w.slice(1)}`)
-    .join('')
-}
-
-/**
- * Create rem based ison size based on a 16 px standard
- */
-const convertPxToRem = (str) => parseInt(str, 10) / 16 + 'rem'
-
-module.exports = {
-  createComponentName,
-  convertPxToRem,
-}

package/product-info.json

@@ -1 +0,0 @@
-{"tangram_id": "8a7b40e6-1bb8-4654-8de8-8163e7dabc1f"}

package/tsconfig.json

@@ -1,18 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ESNext",
-    "useDefineForClassFields": true,
-    "module": "ESNext",
-    "moduleResolution": "Node",
-    "strict": true,
-    "jsx": "preserve",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "esModuleInterop": true,
-    "lib": ["ESNext", "DOM"],
-    "skipLibCheck": true,
-    "noEmit": true
-  },
-  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.vue"],
-  "references": [{ "path": "./tsconfig.node.json" }]
-}

package/tsconfig.node.json

@@ -1,9 +0,0 @@
-{
-  "compilerOptions": {
-    "composite": true,
-    "module": "ESNext",
-    "moduleResolution": "Node",
-    "allowSyntheticDefaultImports": true
-  },
-  "include": ["vite.config.ts"]
-}

package/tsconfig.types.json

@@ -1,5 +0,0 @@
-// tsconfig.types.json
-{
-  "include": ["src/**/*"],
-  "exclude": ["node_modules/**"]
-}

package/vite.config.ts

@@ -1,29 +0,0 @@
-import { defineConfig } from "vite";
-import { resolve } from "path";
-import vue from "@vitejs/plugin-vue";
-
-// https://vitejs.dev/config/
-export default defineConfig({
-  plugins: [vue()],
-  build: {
-    lib: {
-      // Could also be a dictionary or array of multiple entry points
-      entry: resolve(__dirname, "src/main.ts"),
-      name: "ads-icons-vue",
-      // the proper extensions will be added
-      fileName: "ads-icons-vue",
-    },
-    rollupOptions: {
-      // make sure to externalize deps that shouldn't be bundled
-      // into your library
-      external: ["vue"],
-      output: {
-        // Provide global variables to use in the UMD build
-        // for externalized deps
-        globals: {
-          vue: "Vue",
-        },
-      },
-    },
-  },
-});