@oicl/openbridge-webcomponents 0.0.9 → 0.0.10

Sign up to get free protection for your applications and to get access to all the features.
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));