@vention/machine-ui 3.27.0

package/src/lib/theme/typography.ts

@@ -0,0 +1,188 @@
+export const TYPOGRAPHY = {
+  // Headings
+  heading36Bold: {
+    fontFamily: "Inter, sans-serif",
+    fontSize: 36,
+    fontWeight: 700,
+    lineHeight: "48px",
+    display: "block",
+  },
+  heading24SemiBold: {
+    fontFamily: "Inter, sans-serif",
+    fontSize: 24,
+    fontWeight: 600,
+    lineHeight: "32px",
+    display: "block",
+  },
+  heading24Medium: {
+    fontFamily: "Inter, sans-serif",
+    fontSize: 24,
+    fontWeight: 500,
+    lineHeight: "32px",
+    display: "block",
+  },
+  heading18SemiBold: {
+    fontFamily: "Inter, sans-serif",
+    fontSize: 18,
+    fontWeight: 600,
+    lineHeight: "24px",
+    display: "block",
+  },
+  heading16SemiBold: {
+    fontFamily: "Inter, sans-serif",
+    fontSize: 16,
+    fontWeight: 600,
+    lineHeight: "24px",
+    display: "block",
+  },
+
+  // Paragraph Text
+  paragraph18Medium: {
+    fontFamily: "Inter, sans-serif",
+    fontSize: 18,
+    fontStyle: "normal",
+    fontWeight: 500,
+    lineHeight: "24px",
+  },
+  paragraph18Regular: {
+    fontFamily: "Inter, sans-serif",
+    fontSize: 18,
+    fontStyle: "normal",
+    fontWeight: 400,
+    lineHeight: "normal",
+  },
+  paragraph16Medium: {
+    fontFamily: "Inter, sans-serif",
+    fontSize: 16,
+    fontStyle: "normal",
+    fontWeight: 500,
+    lineHeight: "24px",
+  },
+  paragraph16Regular: {
+    fontFamily: "Inter, sans-serif",
+    fontSize: 16,
+    fontStyle: "normal",
+    fontWeight: 400,
+    lineHeight: "24px",
+  },
+  paragraph14Regular: {
+    fontFamily: "Inter, sans-serif",
+    fontSize: 14,
+    fontStyle: "normal",
+    fontWeight: 400,
+    lineHeight: "20px",
+  },
+
+  // Code (monospace) Text
+  code14Reg: {
+    fontFamily: "Roboto Mono, monospace",
+    fontSize: 14,
+    lineHeight: "24px",
+  },
+  code12Reg: {
+    fontFamily: "Roboto Mono, monospace",
+    fontSize: 12,
+    lineHeight: "16px",
+  },
+
+  // UI Text 14
+  uiText14SemiBold: {
+    fontFamily: "Inter, sans-serif",
+    fontSize: 14,
+    fontWeight: 600,
+    lineHeight: "24px",
+  },
+  uiText14Medium: {
+    fontFamily: "Inter, sans-serif",
+    fontSize: 14,
+    fontWeight: 500,
+    lineHeight: "24px",
+  },
+  uiText14Regular: {
+    fontFamily: "Inter, sans-serif",
+    fontSize: 14,
+    fontWeight: 400,
+    lineHeight: "24px",
+  },
+
+  // UI Text 12
+  uiText12SemiBold: {
+    fontFamily: "Inter, sans-serif",
+    fontSize: 12,
+    fontWeight: 600,
+    lineHeight: "16px",
+  },
+  uiText12Medium: {
+    fontFamily: "Inter, sans-serif",
+    fontSize: 12,
+    fontStyle: "normal",
+    fontWeight: 500,
+    lineHeight: "16px",
+  },
+  uiText12Regular: {
+    fontFamily: "Inter, sans-serif",
+    fontSize: 12,
+    fontStyle: "normal",
+    fontWeight: 400,
+    lineHeight: "16px",
+  },
+
+  // UI Table Numbers
+  uiTableNumbers14Reg: {
+    fontFamily: "Inter, sans-serif",
+    fontSize: 14,
+    fontWeight: 400,
+    lineHeight: "24px",
+    letterSpacing: "-0.084px",
+  },
+  uiTableNumbers12Reg: {
+    fontFamily: "Inter, sans-serif",
+    fontSize: 12,
+    fontWeight: 400,
+    lineHeight: "normal",
+  },
+
+  //HMI Text
+  hmiText20Regular: {
+    fontFamily: "Inter, sans-serif",
+    fontSize: 20,
+    fontWeight: 400,
+    lineHeight: "26px",
+  },
+  hmiText20SemiBold: {
+    fontFamily: "Inter, sans-serif",
+    fontSize: 20,
+    fontWeight: 600,
+    lineHeight: "26px",
+  },
+  hmiText22Regular: {
+    fontFamily: "Inter, sans-serif",
+    fontSize: 22,
+    fontWeight: 400,
+    lineHeight: "28px",
+  },
+  hmiText22Medium: {
+    fontFamily: "Inter, sans-serif",
+    fontSize: 22,
+    fontWeight: 500,
+    lineHeight: "28px",
+  },
+  hmiText22SemiBold: {
+    fontFamily: "Inter, sans-serif",
+    fontSize: 22,
+    fontWeight: 600,
+    lineHeight: "28px",
+  },
+  hmiText28SemiBold: {
+    fontFamily: "Inter, sans-serif",
+    fontSize: 28,
+    fontWeight: 600,
+    lineHeight: "32px",
+  },
+  hmiText32SemiBold: {
+    fontFamily: "Inter, sans-serif",
+    fontSize: 32,
+    fontWeight: 600,
+    lineHeight: "36px",
+  },
+}

package/src/lib/utilities.ts

@@ -0,0 +1,15 @@
+// utility functions for Machine UI here
+
+//The following function already exists in shared-utils.ts but that increases bundle size for Machine UI package
+export function applyDefaultProps<T>(inputProps: T, defaultProps: Partial<T>) {
+  return { ...defaultProps, ...inputProps }
+}
+
+/**
+ * Retrieves anything from the MachineUi S3 bucket
+ * @param path string
+ * @returns machine-ui S3 url
+ */
+export function getAssetFromS3(path: string) {
+  return `https://ventionblobs.s3.amazonaws.com/machine-ui/${path}`
+}

package/src/scripts/generate-icon-types.test.ts

@@ -0,0 +1,91 @@
+import { processDuotoneFiles } from "./generate-icon-types"
+
+const originalConsoleWarn = console.warn
+let consoleWarnCalls: string[] = []
+
+beforeEach(() => {
+  consoleWarnCalls = []
+  console.warn = (message: string) => {
+    consoleWarnCalls.push(message)
+  }
+})
+
+afterEach(() => {
+  console.warn = originalConsoleWarn
+})
+
+describe("generate-icon-types conflict detection logic", () => {
+  it("should detect conflicts and keep duotone-name format", () => {
+    const regularSvgFiles = [
+      { key: "conveyor", fileName: "conveyor" },
+      { key: "pneumatic", fileName: "pneumatic" },
+      { key: "robot-arm", fileName: "robot-arm" },
+    ]
+
+    const duotoneFiles = ["duotone-conveyor.svg", "duotone-pneumatic.svg", "duotone-analytics.svg"]
+
+    const duotoneSvgFiles = processDuotoneFiles(duotoneFiles, regularSvgFiles)
+
+    expect(duotoneSvgFiles).toHaveLength(3)
+
+    expect(duotoneSvgFiles.find(file => file.fileName === "duotone-conveyor")?.key).toBe("duotone-conveyor")
+    expect(duotoneSvgFiles.find(file => file.fileName === "duotone-pneumatic")?.key).toBe("duotone-pneumatic")
+    expect(duotoneSvgFiles.find(file => file.fileName === "duotone-analytics")?.key).toBe("duotone-analytics")
+
+    expect(consoleWarnCalls).toHaveLength(2)
+    expect(consoleWarnCalls[0]).toContain(
+      '⚠️  Naming conflict detected: "conveyor" exists in both regular and duotone folders. Using duotone name "duotone-conveyor"'
+    )
+    expect(consoleWarnCalls[1]).toContain(
+      '⚠️  Naming conflict detected: "pneumatic" exists in both regular and duotone folders. Using duotone name "duotone-pneumatic"'
+    )
+  })
+
+  it("should keep duotone-name format when no conflicts exist", () => {
+    const regularSvgFiles = [
+      { key: "conveyor", fileName: "conveyor" },
+      { key: "pneumatic", fileName: "pneumatic" },
+    ]
+
+    const duotoneFiles = ["duotone-analytics.svg", "duotone-communication.svg"]
+
+    const duotoneSvgFiles = processDuotoneFiles(duotoneFiles, regularSvgFiles)
+
+    expect(duotoneSvgFiles).toHaveLength(2)
+    expect(duotoneSvgFiles.find(file => file.fileName === "duotone-analytics")?.key).toBe("duotone-analytics")
+    expect(duotoneSvgFiles.find(file => file.fileName === "duotone-communication")?.key).toBe("duotone-communication")
+
+    expect(consoleWarnCalls).toHaveLength(0)
+  })
+
+  it("should handle empty regular icons list", () => {
+    const regularSvgFiles: { key: string; fileName: string }[] = []
+
+    const duotoneFiles = ["duotone-analytics.svg", "duotone-communication.svg"]
+
+    const duotoneSvgFiles = processDuotoneFiles(duotoneFiles, regularSvgFiles)
+
+    expect(duotoneSvgFiles).toHaveLength(2)
+    expect(duotoneSvgFiles.find(file => file.fileName === "duotone-analytics")?.key).toBe("duotone-analytics")
+    expect(duotoneSvgFiles.find(file => file.fileName === "duotone-communication")?.key).toBe("duotone-communication")
+
+    expect(consoleWarnCalls).toHaveLength(0)
+  })
+
+  it("should handle duotone icons without duotone- prefix", () => {
+    const regularSvgFiles = [{ key: "analytics", fileName: "analytics" }]
+
+    const duotoneFiles = ["analytics.svg", "communication.svg"]
+
+    const duotoneSvgFiles = processDuotoneFiles(duotoneFiles, regularSvgFiles)
+
+    expect(duotoneSvgFiles).toHaveLength(2)
+    expect(duotoneSvgFiles.find(file => file.fileName === "analytics")?.key).toBe("analytics")
+    expect(duotoneSvgFiles.find(file => file.fileName === "communication")?.key).toBe("communication")
+
+    expect(consoleWarnCalls).toHaveLength(1)
+    expect(consoleWarnCalls[0]).toContain(
+      '⚠️  Naming conflict detected: "analytics" exists in both regular and duotone folders. Using duotone name "analytics"'
+    )
+  })
+})

package/src/scripts/generate-icon-types.ts

@@ -0,0 +1,97 @@
+import fs, { promises as fsp } from "fs"
+import path from "path"
+
+export const removeExtension = (fileName: string) => fileName.replace(/\.[^/.]+$/, "")
+
+export const processDuotoneFiles = (duotoneFiles: string[], regularSvgFiles: { key: string; fileName: string }[]) => {
+  return duotoneFiles
+    .filter(file => file.includes(".svg"))
+    .map(item => {
+      const originalKey = removeExtension(item)
+
+      // Extract the base name from duotone-name format for conflict detection only
+      const baseName = originalKey.startsWith("duotone-") ? originalKey.replace("duotone-", "") : originalKey
+
+      const regularIconNames = regularSvgFiles.map(file => file.key)
+      const hasConflict = regularIconNames.includes(baseName)
+
+      // Always use the original key (duotone-name format) as the key
+      const key = originalKey
+
+      if (hasConflict) {
+        console.warn(`⚠️  Naming conflict detected: "${baseName}" exists in both regular and duotone folders. Using duotone name "${key}"`)
+      }
+
+      return { key, fileName: originalKey }
+    })
+}
+
+// Main execution logic - only runs when script is executed directly
+if (require.main === module) {
+  // Parse CLI arg: --basePath=libs/machine-ui/src/lib/components/vention-icon
+  const basePathArg = process.argv.find(arg => arg.startsWith("--basePath="))
+
+  if (!basePathArg) {
+    console.error("❌ Missing required parameter: --basePath")
+    console.error("Usage: ts-node generate-icon-types.ts --basePath=./path/to/component")
+    process.exit(1)
+  }
+
+  const basePath = basePathArg.replace("--basePath=", "")
+
+  const SVG_FILE_PATH = path.resolve(__dirname, basePath, "svg")
+  const SVG_DUOTONE_FILE_PATH = path.resolve(__dirname, basePath, "duotone-svg")
+  const GENERATED_DIR = path.resolve(__dirname, basePath, "_generated")
+  const ICON_TYPES_PATH = path.join(GENERATED_DIR, "icon-types.ts")
+
+  if (!fs.existsSync(GENERATED_DIR)) {
+    fs.mkdirSync(GENERATED_DIR, { recursive: true })
+  }
+
+  const regularFiles = fs.existsSync(SVG_FILE_PATH) ? fs.readdirSync(SVG_FILE_PATH) : []
+  const regularSvgFiles = regularFiles
+    .filter(file => file.includes(".svg"))
+    .map(item => {
+      const key = removeExtension(item)
+
+      return { key, fileName: key }
+    })
+
+  const duotoneFiles = fs.existsSync(SVG_DUOTONE_FILE_PATH) ? fs.readdirSync(SVG_DUOTONE_FILE_PATH) : []
+  const duotoneSvgFiles = processDuotoneFiles(duotoneFiles, regularSvgFiles)
+
+  // File Composition.
+  let fileContent = "/* eslint-disable */\n// This file was automatically generated and should not be edited.\n\n"
+
+  fileContent += `import { lazy } from "react"\n`
+  fileContent += `\nexport const iconImports = {\n`
+  for (const file of regularSvgFiles) {
+    fileContent += `  ["${file.key}"]: lazy(() => import("./icons/${file.fileName}")),\n`
+  }
+  fileContent += `}\n`
+
+  fileContent += `\nexport const duotoneIconImports = {\n`
+  for (const file of duotoneSvgFiles) {
+    fileContent += `  ["${file.key}"]: lazy(() => import("./duotone-icons/${file.fileName}")),\n`
+  }
+  fileContent += `}\n`
+
+  fileContent += `\nexport type IconType = keyof typeof iconImports\nexport type DuotoneIconType = keyof typeof duotoneIconImports\n`
+
+  // Write to file
+  const generateTypeFile = async () => {
+    try {
+      if (!fs.existsSync(ICON_TYPES_PATH)) {
+        await fsp.writeFile(ICON_TYPES_PATH, fileContent)
+        console.info("The icon types file was created at", ICON_TYPES_PATH)
+      } else {
+        console.info("The icon types file already exists, updating content...")
+        await fsp.writeFile(ICON_TYPES_PATH, fileContent)
+      }
+    } catch (error) {
+      console.error(error)
+    }
+  }
+
+  generateTypeFile()
+}

package/tsconfig.icon-generator.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "jsx": "react",
+    "module": "commonjs",
+    "skipLibCheck": true,
+    "target": "esnext"
+  }
+}

package/tsconfig.json

@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "allowJs": false,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": false,
+    "isolatedModules": false
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    },
+    {
+      "path": "./tsconfig.storybook.json"
+    }
+  ],
+  "extends": "../../../tsconfig.base.json"
+}

package/tsconfig.lib.json

@@ -0,0 +1,23 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../dist/out-tsc",
+    "types": ["node"]
+  },
+  "exclude": [
+    "jest.config.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.js",
+    "src/**/*.test.js",
+    "src/**/*.spec.jsx",
+    "src/**/*.test.jsx",
+    "**/*.stories.ts",
+    "**/*.stories.js",
+    "**/*.stories.jsx",
+    "**/*.stories.tsx"
+  ],
+  "include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.tsx"]
+}

package/tsconfig.spec.json

@@ -0,0 +1,20 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../dist/out-tsc",
+    "module": "commonjs",
+    "types": ["jest", "node"]
+  },
+  "include": [
+    "jest.config.ts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.js",
+    "src/**/*.spec.js",
+    "src/**/*.test.jsx",
+    "src/**/*.spec.jsx",
+    "src/**/*.d.ts"
+  ]
+}

package/tsconfig.storybook.json

@@ -0,0 +1,33 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "emitDecoratorMetadata": true,
+    "outDir": "tsconfig.storybook",
+    "jsx": "react"
+  },
+  "files": [
+    "../../../node_modules/@nx/react/typings/styled-jsx.d.ts",
+    "../../../node_modules/@nx/react/typings/cssmodule.d.ts",
+    "../../../node_modules/@nx/react/typings/image.d.ts"
+  ],
+  "exclude": [
+    "src/**/*.spec.ts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.js",
+    "src/**/*.test.js",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.jsx",
+    "src/**/*.test.js"
+  ],
+  "include": [
+    "src/**/*.stories.ts",
+    "src/**/*.stories.js",
+    "src/**/*.stories.jsx",
+    "src/**/*.stories.tsx",
+    "src/**/*.stories.mdx",
+    ".storybook/*.js",
+    ".storybook/*.ts",
+    ".storybook/**/*.tsx"
+  ]
+}

package/tsconfig.types.json

@@ -0,0 +1,9 @@
+{
+  "extends": "../../../tsconfig.typebuilding.json",
+  "compilerOptions": {
+    "outDir": "../../../dist/projects/libs/machine-ui",
+    "rootDir": "."
+  },
+  "include": ["src/**/*"],
+  "exclude": ["**/*.spec.*", "**/*.test.*", "**/*.stories.*"]
+}