@oicl/openbridge-webcomponents 0.0.7 → 0.0.8

package/dist/navigation-instruments/thruster/thruster.js

@@ -1,4 +1,4 @@
-import { LitElement, svg } from "lit";
+import { css, LitElement, html, svg } from "lit";
 import { property, customElement } from "lit/decorators.js";
 import { Size, InstrumentState } from "../types.js";
 var __defProp = Object.defineProperty;
@@ -25,13 +25,26 @@ let ObcThruster = class extends LitElement {
     this.off = false;
   }
   render() {
-    return thruster(this.thrust, this.setpoint, this.state, {
+    return html`<div class="container">
+      ${thruster(this.thrust, this.setpoint, this.state, {
       atSetpoint: this.atSetpoint,
       tunnel: this.tunnel,
       setpointAtZero: this.setpointAtZero
-    });
+    })}
+    </div>`;
   }
 };
+ObcThruster.styles = css`
+    .container {
+      height: 100%;
+      width: 100%;
+    }
+
+    .container > svg {
+      height: 100%;
+      width: 100%;
+    }
+  `;
 __decorateClass([
   property({ type: String })
 ], ObcThruster.prototype, "size", 2);
@@ -150,35 +163,42 @@ function thruster(thrust, setpoint, state, options) {
   const centerLine = svg`
     <rect x="-32" y="-2" width="64" height="4" fill=${zeroLineColor} stroke=${zeroLineColor}/>
   `;
-  const thrusterSvg = svg`
-  <svg xmlns="http://www.w3.org/2000/svg" viewBox="-64 -160 128 320" x="-64" y="-160" width="128" height="320">
-    ${thrusterTop(
-    Math.max(thrust, 0),
-    { box: boxColor, container: containerBackgroundColor },
-    hideTicks
-  )}
-    ${thrusterBottom(
-    Math.max(-thrust, 0),
-    { box: boxColor, container: containerBackgroundColor },
-    hideTicks
-  )}
-    ${centerLine}
-    ${setpoint !== void 0 ? setpointSvg(setpoint, options.setpointAtZero, {
-    fill: setPointColor,
-    stroke: "var(--border-silhouette-color)"
-  }) : null}
-    ${options.tunnel ? null : arrowTop(arrowColor)}
-    </svg>
-  `;
+  const thrusterSvg = [
+    thrusterTop(
+      Math.max(thrust, 0),
+      { box: boxColor, container: containerBackgroundColor },
+      hideTicks
+    ),
+    thrusterBottom(
+      Math.max(-thrust, 0),
+      { box: boxColor, container: containerBackgroundColor },
+      hideTicks
+    ),
+    centerLine
+  ];
+  if (setpoint !== void 0) {
+    thrusterSvg.push(
+      setpointSvg(setpoint, options.setpointAtZero, {
+        fill: setPointColor,
+        stroke: "var(--border-silhouette-color)"
+      })
+    );
+  }
   if (options.tunnel) {
     return svg`
-      <svg xmlns="http://www.w3.org/2000/svg" viewBox="-160 -64  320 128" x="-160" y="-64" width="320" height="128">
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="-160 -64  320 128" x="-160" y="-64">
         <g transform="rotate(90)">
           ${thrusterSvg}
         </g>
       </svg>`;
+  } else {
+    thrusterSvg.push(arrowTop(arrowColor));
+    return svg`
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="-64 -160 128 320" x="-64" y="-160">
+      ${thrusterSvg}
+    </svg>
+  `;
   }
-  return thrusterSvg;
 }
 export {
   ObcThruster,

package/dist/navigation-instruments/thruster/thruster.js.map

@@ -1 +1 @@
-{"version":3,"file":"thruster.js","sources":["../../../src/navigation-instruments/thruster/thruster.ts"],"sourcesContent":["import {LitElement, svg} from 'lit';\nimport {customElement, property} from 'lit/decorators.js';\nimport {Size, InstrumentState} from '../types';\n\n/**\n * @element obc-thruster\n *\n * @prop {Size} size - The size of the thruster\n * @prop {number} thrust - The thrust of the thruster in percent (-100 - +100)\n */\n@customElement('obc-thruster')\nexport class ObcThruster extends LitElement {\n  @property({type: String}) size: Size = Size.medium;\n  @property({type: Number}) thrust: number = 0;\n  @property({type: Number}) setpoint: number | undefined;\n  @property({type: Boolean, attribute: 'at-setpoint'}) atSetpoint: boolean =\n    false;\n  @property({type: Boolean, attribute: 'setpoint-at-zero'})\n  setpointAtZero: boolean = false;\n  @property({type: String}) state: InstrumentState = InstrumentState.inCommand;\n  @property({type: Boolean}) tunnel: boolean = false;\n  @property({type: Boolean}) loading: boolean = false;\n  @property({type: Boolean}) off: boolean = false;\n\n  override render() {\n    return thruster(this.thrust, this.setpoint, this.state, {\n      atSetpoint: this.atSetpoint,\n      tunnel: this.tunnel,\n      setpointAtZero: this.setpointAtZero,\n    });\n  }\n}\nconst containerHeight = 134;\n\nfunction thrusterTop(\n  value: number,\n  colors: {box: string; container: string},\n  hideTicks: boolean\n) {\n  const container = svg`\n      <path transform=\"translate(-33 -137)\" d=\"M1 9C1 4.58172 4.58172 1 9 1H57C61.4183 1 65 4.58172 65 9V135H1V9Z\" fill=${colors.container} stroke=\"var(--instrument-frame-tertiary-color)\" vector-effect=\"non-scaling-stroke\"/>\n  `;\n  const track = svg`<rect width=\"32\" height=\"134\" x=\"-16\" y=\"-136\" fill=\"var(--instrument-frame-secondary-color)\" stroke=\"var(--instrument-frame-tertiary-color)\" vector-effect=\"non-scaling-stroke\"/>`;\n\n  const tickmarks = [];\n\n  const nTicks = 4;\n  const delta = containerHeight / nTicks;\n  if (!hideTicks) {\n    for (let i = 1; i < nTicks; i++) {\n      tickmarks.push(\n        svg`<line x1=\"-20\" x2=\"-28\" y1=${-i * delta - 2}  y2=${\n          -i * delta - 2\n        } stroke=\"var(--instrument-frame-tertiary-color)\" stroke-width=\"1\" vector-effect=\"non-scaling-stroke\"/>`\n      );\n      tickmarks.push(\n        svg`<line  x1=\"20\"  x2=\"28\" y1=${-i * delta - 2}  y2=${\n          -i * delta - 2\n        } stroke=\"var(--instrument-frame-tertiary-color)\" stroke-width=\"1\" vector-effect=\"non-scaling-stroke\"/>`\n      );\n    }\n  }\n\n  const barHeight = (134 * value) / 100;\n  const barY = -136 + 134 - barHeight;\n  const bar = svg`<rect width=\"32\" height=${barHeight} x=\"-16\" y=${barY} fill=${colors.box} stroke=${colors.box} vector-effect=\"non-scaling-stroke\"/>`;\n\n  return [container, track, tickmarks, bar];\n}\n\nfunction thrusterBottom(\n  value: number,\n  colors: {box: string; container: string},\n  hideTicks: boolean\n) {\n  const container = svg`\n      <g transform=\"rotate(180)\">\n        ${thrusterTop(value, colors, hideTicks)}\n      </g>\n  `;\n  return container;\n}\n\nfunction arrowTop(arrowColor: string) {\n  return svg`\n<path transform=\"translate(-15 -156)\" d=\"M0.707007 14.2929L14.9999 0L29.2928 14.2929C29.9228 14.9229 29.4766 16 28.5857 16H1.41412C0.523211 16 0.0770419 14.9229 0.707007 14.2929Z\" fill=${arrowColor}/>`;\n}\n\nfunction setpointSvg(\n  value: number,\n  setpointAtZero: boolean,\n  colors: {fill: string; stroke: string}\n) {\n  const y =\n    -12 +\n    -(setpointAtZero\n      ? 0\n      : Math.sign(value) * ((containerHeight * Math.abs(value)) / 100 + 2));\n  return svg`\n  <g transform=\"translate(-40 ${y})\">\n    <path d=\"M59.4001 11.1999C59.1483 11.3887 59 11.6852 59 12C59 12.3148 59.1483 12.6113 59.4001 12.8001L72.2001 22.3966C74.1773 23.879 77 22.4692 77 19.9971L77 4.0029C77 1.53076 74.1773 0.121035 72.2001 1.60338L59.4001 11.1999Z\" fill=${colors.fill} stroke=${colors.stroke} stroke-width=\"2\" stroke-linejoin=\"round\" vector-effect=\"non-scaling-stroke\"/>\n    <path d=\"M20.5999 12.8001C20.8517 12.6113 21 12.3148 21 12C21 11.6852 20.8517 11.3887 20.5999 11.1999L7.79986 1.60338C5.82268 0.121036 3 1.53075 3 4.0029L3 19.9971C3 22.4692 5.82268 23.879 7.79986 22.3966L20.5999 12.8001Z\" fill=${colors.fill} stroke=${colors.stroke} stroke-width=\"2\" stroke-linejoin=\"round\" vector-effect=\"non-scaling-stroke\"/>\n  </g>\n`;\n}\n\nexport function thruster(\n  thrust: number,\n  setpoint: number | undefined,\n  state: InstrumentState,\n  options: {atSetpoint: boolean; tunnel: boolean; setpointAtZero: boolean}\n) {\n  let boxColor = 'var(--instrument-enhanced-secondary-color)';\n  let setPointColor = boxColor;\n  let arrowColor = 'var(--instrument-tick-mark-primary-color)';\n  let containerBackgroundColor = 'var(--instrument-frame-primary-color)';\n  let zeroLineColor = 'var(--instrument-enhanced-secondary-color)';\n  let hideTicks = false;\n  if (options.atSetpoint) {\n    setPointColor = 'var(--instrument-frame-tertiary-color)';\n  }\n  if (state === InstrumentState.active) {\n    boxColor = 'var(--instrument-regular-secondary-color)';\n    zeroLineColor = 'var(--instrument-regular-secondary-color)';\n    setPointColor = boxColor;\n    arrowColor = 'var(--instrument-regular-secondary-color)';\n    if (options.atSetpoint) {\n      setPointColor = 'var(--instrument-frame-tertiary-color)';\n    }\n  } else if (state === InstrumentState.loading) {\n    boxColor = 'transparent';\n    setPointColor = 'var(--instrument-frame-tertiary-color)';\n    zeroLineColor = 'var(--instrument-frame-tertiary-color)';\n    arrowColor = 'var(--instrument-regular-secondary-color)';\n    thrust = 0;\n    hideTicks = true;\n    if (setpoint !== undefined) {\n      setpoint = 0;\n    }\n  } else if (state === InstrumentState.off) {\n    boxColor = 'transparent';\n    setPointColor = 'var(--instrument-frame-tertiary-color)';\n    arrowColor = 'var(--instrument-frame-tertiary-color)';\n    zeroLineColor = 'var(--instrument-frame-tertiary-color)';\n    thrust = 0;\n    hideTicks = true;\n    containerBackgroundColor = 'transparent';\n    if (setpoint !== undefined) {\n      setpoint = 0;\n    }\n  }\n\n  const centerLine = svg`\n    <rect x=\"-32\" y=\"-2\" width=\"64\" height=\"4\" fill=${zeroLineColor} stroke=${zeroLineColor}/>\n  `;\n\n  const thrusterSvg = svg`\n  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"-64 -160 128 320\" x=\"-64\" y=\"-160\" width=\"128\" height=\"320\">\n    ${thrusterTop(\n      Math.max(thrust, 0),\n      {box: boxColor, container: containerBackgroundColor},\n      hideTicks\n    )}\n    ${thrusterBottom(\n      Math.max(-thrust, 0),\n      {box: boxColor, container: containerBackgroundColor},\n      hideTicks\n    )}\n    ${centerLine}\n    ${\n      setpoint !== undefined\n        ? setpointSvg(setpoint, options.setpointAtZero, {\n            fill: setPointColor,\n            stroke: 'var(--border-silhouette-color)',\n          })\n        : null\n    }\n    ${options.tunnel ? null : arrowTop(arrowColor)}\n    </svg>\n  `;\n\n  if (options.tunnel) {\n    return svg`\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"-160 -64  320 128\" x=\"-160\" y=\"-64\" width=\"320\" height=\"128\">\n        <g transform=\"rotate(90)\">\n          ${thrusterSvg}\n        </g>\n      </svg>`;\n  }\n\n  return thrusterSvg;\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-thruster': ObcThruster;\n  }\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"thruster.js","sources":["../../../src/navigation-instruments/thruster/thruster.ts"],"sourcesContent":["import {LitElement, svg, html, css} from 'lit';\nimport {customElement, property} from 'lit/decorators.js';\nimport {Size, InstrumentState} from '../types';\n\n/**\n * @element obc-thruster\n *\n * @prop {Size} size - The size of the thruster\n * @prop {number} thrust - The thrust of the thruster in percent (-100 - +100)\n */\n@customElement('obc-thruster')\nexport class ObcThruster extends LitElement {\n  @property({type: String}) size: Size = Size.medium;\n  @property({type: Number}) thrust: number = 0;\n  @property({type: Number}) setpoint: number | undefined;\n  @property({type: Boolean, attribute: 'at-setpoint'}) atSetpoint: boolean =\n    false;\n  @property({type: Boolean, attribute: 'setpoint-at-zero'})\n  setpointAtZero: boolean = false;\n  @property({type: String}) state: InstrumentState = InstrumentState.inCommand;\n  @property({type: Boolean}) tunnel: boolean = false;\n  @property({type: Boolean}) loading: boolean = false;\n  @property({type: Boolean}) off: boolean = false;\n\n  override render() {\n    return html`<div class=\"container\">\n      ${thruster(this.thrust, this.setpoint, this.state, {\n        atSetpoint: this.atSetpoint,\n        tunnel: this.tunnel,\n        setpointAtZero: this.setpointAtZero,\n      })}\n    </div>`;\n  }\n\n  static override styles = css`\n    .container {\n      height: 100%;\n      width: 100%;\n    }\n\n    .container > svg {\n      height: 100%;\n      width: 100%;\n    }\n  `;\n}\nconst containerHeight = 134;\n\nfunction thrusterTop(\n  value: number,\n  colors: {box: string; container: string},\n  hideTicks: boolean\n) {\n  const container = svg`\n      <path transform=\"translate(-33 -137)\" d=\"M1 9C1 4.58172 4.58172 1 9 1H57C61.4183 1 65 4.58172 65 9V135H1V9Z\" fill=${colors.container} stroke=\"var(--instrument-frame-tertiary-color)\" vector-effect=\"non-scaling-stroke\"/>\n  `;\n  const track = svg`<rect width=\"32\" height=\"134\" x=\"-16\" y=\"-136\" fill=\"var(--instrument-frame-secondary-color)\" stroke=\"var(--instrument-frame-tertiary-color)\" vector-effect=\"non-scaling-stroke\"/>`;\n\n  const tickmarks = [];\n\n  const nTicks = 4;\n  const delta = containerHeight / nTicks;\n  if (!hideTicks) {\n    for (let i = 1; i < nTicks; i++) {\n      tickmarks.push(\n        svg`<line x1=\"-20\" x2=\"-28\" y1=${-i * delta - 2}  y2=${\n          -i * delta - 2\n        } stroke=\"var(--instrument-frame-tertiary-color)\" stroke-width=\"1\" vector-effect=\"non-scaling-stroke\"/>`\n      );\n      tickmarks.push(\n        svg`<line  x1=\"20\"  x2=\"28\" y1=${-i * delta - 2}  y2=${\n          -i * delta - 2\n        } stroke=\"var(--instrument-frame-tertiary-color)\" stroke-width=\"1\" vector-effect=\"non-scaling-stroke\"/>`\n      );\n    }\n  }\n\n  const barHeight = (134 * value) / 100;\n  const barY = -136 + 134 - barHeight;\n  const bar = svg`<rect width=\"32\" height=${barHeight} x=\"-16\" y=${barY} fill=${colors.box} stroke=${colors.box} vector-effect=\"non-scaling-stroke\"/>`;\n\n  return [container, track, tickmarks, bar];\n}\n\nfunction thrusterBottom(\n  value: number,\n  colors: {box: string; container: string},\n  hideTicks: boolean\n) {\n  const container = svg`\n      <g transform=\"rotate(180)\">\n        ${thrusterTop(value, colors, hideTicks)}\n      </g>\n  `;\n  return container;\n}\n\nfunction arrowTop(arrowColor: string) {\n  return svg`\n<path transform=\"translate(-15 -156)\" d=\"M0.707007 14.2929L14.9999 0L29.2928 14.2929C29.9228 14.9229 29.4766 16 28.5857 16H1.41412C0.523211 16 0.0770419 14.9229 0.707007 14.2929Z\" fill=${arrowColor}/>`;\n}\n\nfunction setpointSvg(\n  value: number,\n  setpointAtZero: boolean,\n  colors: {fill: string; stroke: string}\n) {\n  const y =\n    -12 +\n    -(setpointAtZero\n      ? 0\n      : Math.sign(value) * ((containerHeight * Math.abs(value)) / 100 + 2));\n  return svg`\n  <g transform=\"translate(-40 ${y})\">\n    <path d=\"M59.4001 11.1999C59.1483 11.3887 59 11.6852 59 12C59 12.3148 59.1483 12.6113 59.4001 12.8001L72.2001 22.3966C74.1773 23.879 77 22.4692 77 19.9971L77 4.0029C77 1.53076 74.1773 0.121035 72.2001 1.60338L59.4001 11.1999Z\" fill=${colors.fill} stroke=${colors.stroke} stroke-width=\"2\" stroke-linejoin=\"round\" vector-effect=\"non-scaling-stroke\"/>\n    <path d=\"M20.5999 12.8001C20.8517 12.6113 21 12.3148 21 12C21 11.6852 20.8517 11.3887 20.5999 11.1999L7.79986 1.60338C5.82268 0.121036 3 1.53075 3 4.0029L3 19.9971C3 22.4692 5.82268 23.879 7.79986 22.3966L20.5999 12.8001Z\" fill=${colors.fill} stroke=${colors.stroke} stroke-width=\"2\" stroke-linejoin=\"round\" vector-effect=\"non-scaling-stroke\"/>\n  </g>\n`;\n}\n\nexport function thruster(\n  thrust: number,\n  setpoint: number | undefined,\n  state: InstrumentState,\n  options: {atSetpoint: boolean; tunnel: boolean; setpointAtZero: boolean}\n) {\n  let boxColor = 'var(--instrument-enhanced-secondary-color)';\n  let setPointColor = boxColor;\n  let arrowColor = 'var(--instrument-tick-mark-primary-color)';\n  let containerBackgroundColor = 'var(--instrument-frame-primary-color)';\n  let zeroLineColor = 'var(--instrument-enhanced-secondary-color)';\n  let hideTicks = false;\n  if (options.atSetpoint) {\n    setPointColor = 'var(--instrument-frame-tertiary-color)';\n  }\n  if (state === InstrumentState.active) {\n    boxColor = 'var(--instrument-regular-secondary-color)';\n    zeroLineColor = 'var(--instrument-regular-secondary-color)';\n    setPointColor = boxColor;\n    arrowColor = 'var(--instrument-regular-secondary-color)';\n    if (options.atSetpoint) {\n      setPointColor = 'var(--instrument-frame-tertiary-color)';\n    }\n  } else if (state === InstrumentState.loading) {\n    boxColor = 'transparent';\n    setPointColor = 'var(--instrument-frame-tertiary-color)';\n    zeroLineColor = 'var(--instrument-frame-tertiary-color)';\n    arrowColor = 'var(--instrument-regular-secondary-color)';\n    thrust = 0;\n    hideTicks = true;\n    if (setpoint !== undefined) {\n      setpoint = 0;\n    }\n  } else if (state === InstrumentState.off) {\n    boxColor = 'transparent';\n    setPointColor = 'var(--instrument-frame-tertiary-color)';\n    arrowColor = 'var(--instrument-frame-tertiary-color)';\n    zeroLineColor = 'var(--instrument-frame-tertiary-color)';\n    thrust = 0;\n    hideTicks = true;\n    containerBackgroundColor = 'transparent';\n    if (setpoint !== undefined) {\n      setpoint = 0;\n    }\n  }\n\n  const centerLine = svg`\n    <rect x=\"-32\" y=\"-2\" width=\"64\" height=\"4\" fill=${zeroLineColor} stroke=${zeroLineColor}/>\n  `;\n\n  const thrusterSvg = [\n    thrusterTop(\n      Math.max(thrust, 0),\n      {box: boxColor, container: containerBackgroundColor},\n      hideTicks\n    ),\n    thrusterBottom(\n      Math.max(-thrust, 0),\n      {box: boxColor, container: containerBackgroundColor},\n      hideTicks\n    ),\n    centerLine,\n  ];\n  if (setpoint !== undefined) {\n    thrusterSvg.push(\n      setpointSvg(setpoint, options.setpointAtZero, {\n        fill: setPointColor,\n        stroke: 'var(--border-silhouette-color)',\n      })\n    );\n  }\n\n  if (options.tunnel) {\n    return svg`\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"-160 -64  320 128\" x=\"-160\" y=\"-64\">\n        <g transform=\"rotate(90)\">\n          ${thrusterSvg}\n        </g>\n      </svg>`;\n  } else {\n    thrusterSvg.push(arrowTop(arrowColor));\n    return svg`\n    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"-64 -160 128 320\" x=\"-64\" y=\"-160\">\n      ${thrusterSvg}\n    </svg>\n  `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-thruster': ObcThruster;\n  }\n}\n"],"names":[],"mappings":"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"}

package/fix-generated.cjs

@@ -20,6 +20,8 @@ function addRepositoryToPackageJsonVue() {
     url: 'git+https://github.com/Ocean-Industries-Concept-Lab/openbridge-webcomponents.git',
     directory: 'packages/openbridge-webcomponents-vue',
   };
+  // add license
+  packageJson.license = 'Apache-2.0';
   fs.writeFileSync(
     '../openbridge-webcomponents-vue/package.json',
     JSON.stringify(packageJson, null, 2)
@@ -33,6 +35,7 @@ function addRepositoryToPackageJsonReact() {
     url: 'git+https://github.com/Ocean-Industries-Concept-Lab/openbridge-webcomponents.git',
     directory: 'packages/openbridge-webcomponents-react',
   };
+  packageJson.license = 'Apache-2.0';
   fs.writeFileSync(
     '../openbridge-webcomponents-react/package.json',
     JSON.stringify(packageJson, null, 2)

package/new-component.ts

@@ -29,7 +29,7 @@ const files = await multiselect('Create files', {
 // Convert name to kebab-case
 const componentName = name.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
 
-const parentDir = componentType[0].includes('ui')
+const parentDir = componentType.includes('ui')
   ? 'components'
   : 'navigation-instruments';
 const dir = path.join('src', parentDir, componentName);
@@ -38,14 +38,13 @@ fs.mkdirSync(dir);
 
 // Create files
 if (files.includes('lit')) {
+  const hasCss = files.includes('css');
   const litFile = path.join(dir, `${componentName}.ts`);
-  const content = `import { LitElement, html } from 'lit'
+  const content = `import { LitElement, html${
+    hasCss ? `, unsafeCSS ` : ` `
+  }} from 'lit'
 import { customElement } from 'lit/decorators.js'
-${
-  files.includes('css')
-    ? `import compentStyle from "./${componentName}.style";`
-    : ''
-}
+${hasCss ? `import compentStyle from "./${componentName}.css?inline";` : ''}
 
 @customElement('obc-${componentName}')
 export class Obc${name} extends LitElement {
@@ -57,7 +56,7 @@ export class Obc${name} extends LitElement {
       \`
   }
 
-${files.includes('css') ? `static override styles = compentStyle;` : ''}
+${hasCss ? `static override styles = unsafeCSS(compentStyle);` : ''}
 }
 
 declare global {

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@oicl/openbridge-webcomponents",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "type": "module",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/Ocean-Industries-Concept-Lab/openbridge-webcomponents.git",
     "directory": "packages/openbridge-webcomponents"
   },
+  "license": "Apache-2.0",
   "scripts": {
     "build": "yarn run typecheck && yarn run build:ts && yarn run analyze && yarn run build:wrappers",
     "build:ts": "vite build",
@@ -40,10 +41,13 @@
     "@lit-labs/gen-wrapper-vue": "^0.3.2",
     "@open-wc/lit-helpers": "^0.6.0",
     "@storybook/addon-essentials": "^7.6.7",
+    "@storybook/addon-interactions": "^7.6.17",
     "@storybook/addon-links": "^7.6.7",
+    "@storybook/addon-storysource": "^7.6.17",
     "@storybook/addon-themes": "^7.6.7",
     "@storybook/blocks": "^7.6.7",
     "@storybook/test-runner": "^0.16.0",
+    "@storybook/testing-library": "^0.2.2",
     "@storybook/web-components": "^7.6.7",
     "@storybook/web-components-vite": "^7.6.7",
     "@topcli/prompts": "^1.8.0",

package/script/convert-icons.ts

@@ -0,0 +1,177 @@
+import * as Figma from 'figma-api';
+import * as dotenv from 'dotenv';
+
+dotenv.config();
+
+export interface IconRef {
+  name: string;
+  id: string;
+  javascriptName: string;
+  styles: {[colorCode: string]: {cssClass: string}};
+}
+
+export function getSingleColorIcon(imageData: string, icon: IconRef): string {
+  // replace fill color with currentColor
+  const fillRegex = /fill="[^"]+"/g;
+  const replace = 'fill="currentColor"';
+  let imageDataNew = imageData.replace(fillRegex, replace);
+
+  // remove fillOpacity
+  const fillOpacityRegex = /fill-opacity="[^"]+"/g;
+  imageDataNew = imageDataNew.replace(fillOpacityRegex, '');
+
+  return imageDataNew;
+}
+
+export function getCssColorIcon(imageData: string, icon: IconRef): string {
+  // replace fill color with currentColor
+  const fillRegex = /fill="([^"]+)"/g;
+
+  const replace = (match: string, color: string) => {
+    const cssClass = icon.styles[color];
+    if (cssClass === undefined) {
+      if (color === 'black') return 'fill="currentColor"';
+      if (color === 'none') return 'fill="none"';
+      if (color === 'white') return 'fill="none"';
+      if (color === '#C90000')
+        return 'fill="var(--alarm-enabled-background-color)"';
+      console.warn(
+        'No css class for color',
+        color,
+        icon.name,
+        Object.keys(icon.styles)
+      );
+      return 'fill="currentColor"';
+    }
+    return `style="fill: var(--${cssClass.cssClass})"`;
+  };
+  imageData = imageData.replace(fillRegex, replace);
+
+  // remove fillOpacity
+  const fillOpacityRegex = /fill-opacity="[^"]+"/g;
+  imageData = imageData.replace(fillOpacityRegex, '');
+
+  // replace stroke color with currentColor
+  const strokeRegex = /stroke="([^"]+)"/g;
+  const replaceStroke = (match: string, color: string) => {
+    const cssClass = icon.styles[color];
+    if (cssClass === undefined) {
+      if (color === 'black') return 'stroke="currentColor"';
+      if (color === 'none') return 'stroke="none"';
+      if (color === 'white') return 'stroke="none"';
+      console.warn(
+        'No css class for color',
+        color,
+        icon.name,
+        Object.keys(icon.styles)
+      );
+      return 'stroke="currentColor"';
+    }
+    return `style="stroke: var(--${cssClass.cssClass})"`;
+  };
+  imageData = imageData.replace(strokeRegex, replaceStroke);
+
+  // remove strokeOpacity
+  const strokeOpacityRegex = /stroke-opacity="[^"]+"/g;
+  imageData = imageData.replace(strokeOpacityRegex, '');
+
+  return imageData;
+}
+
+export function kebabToUpperCamelCase(kebabCase: string): string {
+  const words = kebabCase.replace(/ /g, '').split('-');
+  const upperCamelCase = words
+    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+    .join('');
+  return upperCamelCase;
+}
+
+export function getStylesForNode(
+  node: Figma.Node,
+  styles: {[styleId: string]: Figma.Style}
+): {[colorCode: string]: {cssClass: string}} {
+  let out = {};
+
+  if ('children' in node) {
+    for (const child of node.children) {
+      out = {...out, ...getStylesForNode(child, styles)};
+      if ('fills' in child && 'styles' in child) {
+        let fils: string | undefined;
+        child.fills.forEach((fill) => {
+          if (fill.type === 'SOLID') {
+            if (fils !== undefined) {
+              console.warn(
+                'Multiple fills',
+                fils,
+                rgbaToHexOrColorName(fill.color!)
+              );
+            }
+            fils = rgbaToHexOrColorName(fill.color!);
+          }
+        });
+        if (fils !== undefined && child.styles && 'fill' in child.styles) {
+          const styleId = child.styles.fill as string;
+          const figmaStyle = styles[styleId];
+          const cssClass = styleToCssClass(figmaStyle);
+          out[fils] = {cssClass: cssClass};
+        }
+      }
+      if ('strokes' in child && 'styles' in child) {
+        let strokes: string;
+        child.strokes.forEach((fill) => {
+          if (fill.type === 'SOLID') {
+            if (strokes !== undefined) {
+              console.warn(
+                'Multiple strokes',
+                strokes,
+                rgbaToHexOrColorName(fill.color!)
+              );
+            }
+            strokes = rgbaToHexOrColorName(fill.color!);
+          }
+        });
+        if (strokes !== undefined && child.styles?.stroke) {
+          const styleId = child.styles.stroke;
+          const figmaStyle = styles[styleId];
+          const cssClass = styleToCssClass(figmaStyle);
+          out[strokes] = {cssClass: cssClass};
+        }
+      }
+      if ('fillOverrideTable' in child) {
+        for (const fill of Object.values(child.fillOverrideTable)) {
+          if (fill === null) continue;
+          if (!('inheritFillStyleId' in fill)) continue;
+          const styleId = fill.inheritFillStyleId;
+          const figmaStyle = styles[styleId];
+          const color = rgbaToHexOrColorName(fill.fills[0].color!);
+          const cssClass = styleToCssClass(figmaStyle);
+          out[color] = {cssClass: cssClass};
+        }
+      }
+    }
+  }
+  return out;
+}
+
+function decimalToHex(d: number): string {
+  const v = Math.round(d * 255).toString(16);
+  return v.length === 1 ? `0${v}` : v;
+}
+
+function rgbaToHexOrColorName(rgba: Figma.Color): string {
+  const isBlack = rgba.r === 0 && rgba.g === 0 && rgba.b === 0 && rgba.a === 1;
+  const isWhite = rgba.r === 1 && rgba.g === 1 && rgba.b === 1 && rgba.a === 1;
+  if (isBlack) {
+    return 'black';
+  } else if (isWhite) {
+    return 'white';
+  } else {
+    return `#${decimalToHex(rgba.r)}${decimalToHex(rgba.g)}${decimalToHex(
+      rgba.b
+    )}`.toUpperCase();
+  }
+}
+
+function styleToCssClass(style: Figma.Style): string {
+  return style.name.replace(/[\/ ]/g, '-').toLocaleLowerCase();
+}

package/script/download-alert-icons.ts

@@ -0,0 +1,180 @@
+import * as Figma from 'figma-api';
+import * as dotenv from 'dotenv';
+import * as fs from 'fs';
+import {GetFileResult} from 'figma-api/lib/api-types';
+import {
+  IconRef,
+  getCssColorIcon,
+  getStylesForNode,
+  kebabToUpperCamelCase,
+} from './convert-icons';
+
+dotenv.config();
+
+const documentId = 'TPoHGyeEtlcpnNekOa4lY3';
+
+const useCache = false;
+
+const iconMapUrl: {url: string; name: string; typeA: boolean}[] = [
+  {
+    url: 'https://www.figma.com/file/TPoHGyeEtlcpnNekOa4lY3/OpenBridge-CAM?type=design&node-id=850-47442&mode=design&t=QA1ohadrbRZxW1ss-4',
+    name: '14-alarm-unack',
+    typeA: true,
+  },
+  {
+    url: 'https://www.figma.com/file/TPoHGyeEtlcpnNekOa4lY3/OpenBridge-CAM?type=design&node-id=850-47508&mode=design&t=QA1ohadrbRZxW1ss-4',
+    name: '14-alarm-unack',
+    typeA: false,
+  },
+  {
+    url: 'https://www.figma.com/file/TPoHGyeEtlcpnNekOa4lY3/OpenBridge-CAM?type=design&node-id=850-47481&mode=design&t=QA1ohadrbRZxW1ss-4',
+    name: '14-alarm-silenced',
+    typeA: true,
+  },
+  {
+    url: 'https://www.figma.com/file/TPoHGyeEtlcpnNekOa4lY3/OpenBridge-CAM?type=design&node-id=850-47505&mode=design&t=QA1ohadrbRZxW1ss-4',
+    name: '14-alarm-silenced',
+    typeA: false,
+  },
+  {
+    url: 'https://www.figma.com/file/TPoHGyeEtlcpnNekOa4lY3/OpenBridge-CAM?type=design&node-id=850-47445&mode=design&t=QA1ohadrbRZxW1ss-4',
+    name: '14-warning-unack',
+    typeA: true,
+  },
+  {
+    url: 'https://www.figma.com/file/TPoHGyeEtlcpnNekOa4lY3/OpenBridge-CAM?type=design&node-id=850-47475&mode=design&t=QA1ohadrbRZxW1ss-4',
+    name: '14-warning-unack',
+    typeA: false,
+  },
+];
+
+const iconMap: {id: string; name: string; typeA: boolean}[] = iconMapUrl.map(
+  (icon) => {
+    let id = icon.url.match(/node-id=([0-9/-]+)/)![1];
+    // replace - with :
+    id = id.replace(/-/g, ':');
+    return {id, name: icon.name, typeA: icon.typeA};
+  }
+);
+
+const iconDir = './src/components/alert-icon/icons';
+
+export async function main() {
+  // delete all icons
+
+  if (fs.existsSync(iconDir)) {
+    const files = fs.readdirSync(iconDir);
+    for (const file of files) {
+      fs.unlinkSync(`${iconDir}/${file}`);
+    }
+  } else {
+    fs.mkdirSync(iconDir);
+  }
+
+  const api = new Figma.Api({
+    personalAccessToken: process.env.FIGMA_TOKEN as string,
+  });
+
+  const cachepath = './script/.cache-figma-alert.json';
+  let file: GetFileResult;
+  if (fs.existsSync(cachepath) && useCache) {
+    file = JSON.parse(fs.readFileSync(cachepath, 'utf8'));
+  } else {
+    file = await api.getFile(documentId, {ids: ['850:47441']});
+    // save to cache
+    fs.writeFileSync(cachepath, JSON.stringify(file, null, 2));
+  }
+  console.log('Got page');
+  const page = file.document.children.find(
+    (p) => p.name === 'Icons'
+  ) as Figma.Node<'CANVAS'>;
+  const frames = page.children.filter(
+    (child) => child.name === 'Frame 3'
+  ) as Figma.Node<'FRAME'>[];
+  const styles = file.styles;
+
+  const knownIds = iconMap.map((icon) => icon.id);
+  let icons = frames.flatMap((frame): IconRef[] => {
+    return frame.children
+      .filter((child) => knownIds.includes(child.id))
+      .map((child) => {
+        const icon = iconMap.find((icon) => icon.id === child.id);
+        const name = icon!.name + (icon!.typeA ? '-a' : '-b');
+        const javascriptName = 'svg' + kebabToUpperCamelCase(name);
+        return {
+          name: name,
+          id: child.id,
+          javascriptName: javascriptName,
+          styles: getStylesForNode(child, styles),
+        };
+      });
+  });
+
+  // remove duplicate icon names
+  const seen = new Set();
+  icons = icons.filter((icon) => {
+    const duplicate = seen.has(icon.javascriptName);
+    seen.add(icon.javascriptName);
+    if (duplicate) {
+      console.log('Duplicate icon name', icon.name);
+    }
+    return !duplicate;
+  });
+
+  // download all icons
+  if (!useCache) {
+    const split = 50;
+    for (let i = 0; i < icons.length; i += split) {
+      console.log('Got images', i);
+      const iconChunks = icons.slice(i, i + split);
+      const images = await api.getImage(documentId, {
+        ids: iconChunks.map((icon) => icon.id).join(','),
+        scale: 1,
+        format: 'svg',
+      });
+
+      // write icons to disk
+      await Promise.all(
+        Object.keys(images.images).map(async (nodeId) => {
+          const icon = icons.find((icon) => icon.id === nodeId);
+          const imageUrl = images.images[nodeId];
+          if (icon && imageUrl) {
+            // download icons
+            const request = await fetch(imageUrl);
+            const imageData = await request.text();
+            fs.writeFileSync(
+              `./script/.cache/alert-icons/${icon.name}.svg`,
+              imageData
+            );
+          }
+        })
+      );
+    }
+  }
+
+  const fileImport: string[] = [];
+  for (const icon of icons) {
+    const imageData = fs.readFileSync(
+      `./script/.cache/alert-icons/${icon.name}.svg`,
+      'utf8'
+    );
+    const cssColorIcon = getCssColorIcon(imageData, icon);
+
+    // convert icon.name from kebab case to upper cammel case
+    const name = icon.name.toLowerCase();
+
+    const component = `import {svg} from 'lit';
+export const ${icon.javascriptName} = svg\`${cssColorIcon}\`;
+`;
+    fs.writeFileSync(`${iconDir}/icon-${name}.ts`, component);
+    fileImport.push(
+      `import {${icon.javascriptName}} from './icons/icon-${name}';`
+    );
+  }
+
+  fileImport.sort();
+  console.log(fileImport.join('\n'));
+  console.log('done');
+}
+
+main();