@oicl/openbridge-webcomponents 0.0.9 → 0.0.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (68) hide show
  1. package/.release-it.json +1 -1
  2. package/.storybook/preview.ts +0 -1
  3. package/CHANGELOG.md +13 -1
  4. package/__snapshots__/application-topbar--inactive.png +0 -0
  5. package/__snapshots__/button-button--raised-disabled.png +0 -0
  6. package/__snapshots__/input-slider--no-icons.png +0 -0
  7. package/__snapshots__/input-slider--no-value.png +0 -0
  8. package/__snapshots__/line-corner-line--primary.png +0 -0
  9. package/__snapshots__/line-example--air.png +0 -0
  10. package/__snapshots__/line-example--connector.png +0 -0
  11. package/__snapshots__/line-example--electric.png +0 -0
  12. package/__snapshots__/line-example--fluid.png +0 -0
  13. package/__snapshots__/line-horizontal-line--primary.png +0 -0
  14. package/__snapshots__/line-vertical-line--complex.png +0 -0
  15. package/__snapshots__/line-vertical-line--primary.png +0 -0
  16. package/custom-elements.json +764 -399
  17. package/dist/automation/corner-line/corner-line.d.ts +22 -0
  18. package/dist/automation/corner-line/corner-line.d.ts.map +1 -0
  19. package/dist/automation/corner-line/corner-line.js +161 -0
  20. package/dist/automation/corner-line/corner-line.js.map +1 -0
  21. package/dist/automation/horizontal-line/horizontal-line.d.ts +15 -0
  22. package/dist/automation/horizontal-line/horizontal-line.d.ts.map +1 -0
  23. package/dist/automation/horizontal-line/horizontal-line.js +110 -0
  24. package/dist/automation/horizontal-line/horizontal-line.js.map +1 -0
  25. package/dist/automation/index.d.ts +20 -0
  26. package/dist/automation/index.d.ts.map +1 -0
  27. package/dist/automation/index.js +42 -0
  28. package/dist/automation/index.js.map +1 -0
  29. package/dist/automation/vertical-line/vertical-line.d.ts +15 -0
  30. package/dist/automation/vertical-line/vertical-line.d.ts.map +1 -0
  31. package/dist/automation/vertical-line/vertical-line.js +111 -0
  32. package/dist/automation/vertical-line/vertical-line.js.map +1 -0
  33. package/dist/components/brilliance-menu/brilliance-menu.d.ts.map +1 -1
  34. package/dist/components/brilliance-menu/brilliance-menu.js +2 -0
  35. package/dist/components/brilliance-menu/brilliance-menu.js.map +1 -1
  36. package/dist/components/slider/slider.css.js +20 -0
  37. package/dist/components/slider/slider.css.js.map +1 -1
  38. package/dist/components/slider/slider.d.ts +8 -0
  39. package/dist/components/slider/slider.d.ts.map +1 -1
  40. package/dist/components/slider/slider.js +44 -18
  41. package/dist/components/slider/slider.js.map +1 -1
  42. package/dist/components/top-bar/top-bar.css.js +5 -1
  43. package/dist/components/top-bar/top-bar.css.js.map +1 -1
  44. package/dist/components/top-bar/top-bar.d.ts.map +1 -1
  45. package/dist/components/top-bar/top-bar.js +8 -8
  46. package/dist/components/top-bar/top-bar.js.map +1 -1
  47. package/package.json +18 -25
  48. package/src/automation/corner-line/corner-line.stories.ts +31 -0
  49. package/src/automation/corner-line/corner-line.ts +167 -0
  50. package/src/automation/horizontal-line/horizontal-line.stories.ts +28 -0
  51. package/src/automation/horizontal-line/horizontal-line.ts +100 -0
  52. package/src/automation/index.ts +41 -0
  53. package/src/automation/line.stories.ts +142 -0
  54. package/src/automation/vertical-line/vertical-line.stories.ts +71 -0
  55. package/src/automation/vertical-line/vertical-line.ts +104 -0
  56. package/src/components/brilliance-menu/brilliance-menu.ts +2 -0
  57. package/src/components/slider/slider.css +20 -0
  58. package/src/components/slider/slider.stories.ts +20 -1
  59. package/src/components/slider/slider.ts +43 -19
  60. package/src/components/top-bar/top-bar.css +4 -0
  61. package/src/components/top-bar/top-bar.ts +10 -8
  62. package/src/palettes/variables.css +64 -43
  63. package/script/svg-instruments/convert-svg.ts +0 -246
  64. package/script/svg-instruments/environment.d.ts +0 -7
  65. package/script/svg-instruments/exports.ts +0 -82
  66. package/script/svg-instruments/figma-types.ts +0 -804
  67. package/script/svg-instruments/figmaImport.ts +0 -79
  68. package/script/svg-instruments/main.ts +0 -109
@@ -1,79 +0,0 @@
1
- import fetch from 'node-fetch';
2
- import dotenv from 'dotenv';
3
- import * as fs from 'fs';
4
- import * as path from 'path';
5
- import {createHmac} from 'crypto';
6
-
7
- dotenv.config();
8
-
9
- const baseUrl = 'https://api.figma.com';
10
- const figmaToken = process.env.FIGMA_TOKEN;
11
- if (figmaToken === undefined) throw 'Missing figma token in environment';
12
- const header = {headers: {'X-Figma-Token': figmaToken}};
13
-
14
- async function getUrl<T>(url: string): Promise<T> {
15
- const res = await fetch(url, header);
16
- if (res.status !== 200) {
17
- const responseText = await res.text();
18
- throw Error(`Something failed when downloading: ${url}\n${responseText}`);
19
- }
20
- return await res.json();
21
- }
22
-
23
- async function getUrlOrCache<T>(url: string): Promise<T> {
24
- let metaUrl = url;
25
- if (metaUrl.includes('?')) {
26
- metaUrl += '&depth=1';
27
- } else {
28
- metaUrl += '?depth=1';
29
- }
30
- const metaData = (await getUrl(metaUrl)) as any;
31
- const hash = await sha256(url);
32
- const cachedir = '.figmacache';
33
- if (!fs.existsSync(cachedir)) {
34
- fs.mkdirSync(cachedir);
35
- }
36
- const filepath = path.join(cachedir, `${hash}.json`);
37
- if (fs.existsSync(filepath)) {
38
- const cache = JSON.parse(fs.readFileSync(filepath).toString());
39
- if (cache.lastModified == metaData.lastModified) {
40
- return cache;
41
- }
42
- }
43
- const res = await getUrl<T>(url);
44
- fs.writeFileSync(filepath, JSON.stringify(res));
45
- return res;
46
- }
47
-
48
- export async function getFigmaFile(fileId: string): Promise<any> {
49
- return await getUrlOrCache<any>(`${baseUrl}/v1/files/${fileId}`);
50
- }
51
-
52
- export async function getFigmaNode(
53
- fileId: string,
54
- nodeIds: string[]
55
- ): Promise<unknown> {
56
- return await getUrlOrCache<any>(
57
- `${baseUrl}/v1/files/${fileId}/nodes?ids=${nodeIds.join(',')}`
58
- );
59
- }
60
-
61
- export async function getFigmaSvg(
62
- fileId: string,
63
- elementIds: string
64
- ): Promise<{[id: string]: string}> {
65
- const imageUrlData = await fetch(
66
- `${baseUrl}/v1/images/${fileId}?ids=${elementIds}&format=svg&svg_include_id=true`,
67
- header
68
- );
69
- if (imageUrlData.status !== 200) {
70
- const responseText = await imageUrlData.text();
71
- throw Error(`Something failed when downloading SVG: ${responseText}`);
72
- }
73
- const imageUrls = await imageUrlData.json();
74
- return imageUrls.images;
75
- }
76
-
77
- async function sha256(message: string): Promise<string> {
78
- return createHmac('sha256', message).digest('hex');
79
- }
@@ -1,109 +0,0 @@
1
- import * as fs from 'fs';
2
- import {convertSvg} from './convert-svg';
3
- import {getFigmaFile, getFigmaNode, getFigmaSvg} from './figmaImport';
4
- import {FrameNode} from './figma-types';
5
- import fetch from 'node-fetch';
6
-
7
- import {exportComponents, ExportDef} from './exports';
8
- import * as dotenv from 'dotenv';
9
-
10
- dotenv.config();
11
-
12
- interface FigmaNode {
13
- name: string;
14
- children: FigmaNode[];
15
- id: string;
16
- }
17
-
18
- function getElement(root: FigmaNode, path: string[]): FigmaNode | null {
19
- path = [...path];
20
- const name = path.shift();
21
- if (name === undefined) {
22
- return root;
23
- }
24
- const ele = root.children.find((value) => value.name === name);
25
- if (ele === undefined) {
26
- console.error(
27
- `Did not find ${name}, available names are:`,
28
- root.children.map((v) => v.name)
29
- );
30
- return null;
31
- }
32
- return getElement(ele, path);
33
- }
34
-
35
- async function main(option: {outFolder: string; removeAttributes: boolean}) {
36
- const mainFigmaFile = '97IQwfn2ybi9Cas78ei8BE';
37
-
38
- const document: any = await getFigmaNode(mainFigmaFile, ['4536%3A113209']);
39
- const genFolder = option.outFolder;
40
-
41
- if (!fs.existsSync(genFolder)) {
42
- fs.mkdirSync(genFolder);
43
- }
44
- let styles = document.styles;
45
-
46
- for (const node of Object.values(document.nodes) as any[]) {
47
- styles = {...styles, ...node.styles};
48
- }
49
-
50
- const elements = exportComponents
51
- .map((component) => {
52
- const element = getElement(
53
- {
54
- children: Object.values(document.nodes).map((n: any) => n.document),
55
- } as FigmaNode,
56
- component.path
57
- );
58
- if (element === null) {
59
- console.error(`In ${component.name}, ${component.path}`);
60
- }
61
- return {component: component, element: element};
62
- })
63
- .filter((value) => value.element !== null) as {
64
- component: ExportDef;
65
- element: FigmaNode;
66
- }[];
67
-
68
- const figmaIds = elements.map((v) => v.element.id);
69
- const urlSvgs = await getFigmaSvg(mainFigmaFile, figmaIds.join(','));
70
- const promises = [];
71
- for (const ele of elements) {
72
- promises.push(async () => {
73
- const element = ele.element;
74
- const component = ele.component;
75
- console.log(`Exporting ${component.name}`);
76
- let imageData;
77
- try {
78
- imageData = await fetch(urlSvgs[element.id]);
79
- } catch (e) {
80
- console.error(`Could not download SVG for ${component.name}`, e);
81
- throw e;
82
- }
83
- const svg = await imageData.text();
84
- const out = convertSvg(
85
- element as unknown as FrameNode,
86
- svg,
87
- styles,
88
- option.removeAttributes
89
- );
90
-
91
- const outputFolder = component.outputFolder
92
- ? `${genFolder}/${component.outputFolder}`
93
- : genFolder;
94
-
95
- if (!fs.existsSync(outputFolder)) {
96
- fs.mkdirSync(outputFolder);
97
- }
98
- fs.writeFileSync(`${outputFolder}/${component.name}.svg`, out);
99
- });
100
- }
101
- await Promise.all(promises.map((f) => f())).then(() => console.log('Done'));
102
- }
103
-
104
- Promise.all([
105
- main({outFolder: 'src/generated-with-style', removeAttributes: false}),
106
- main({outFolder: 'src/generated-without-style', removeAttributes: true}),
107
- ])
108
- .then(() => console.log('Completed autogenerate'))
109
- .catch((e) => console.error('Failed autogenerate \nError:\n', e));