@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.
- package/.release-it.json +1 -1
- package/.storybook/preview.ts +0 -1
- package/CHANGELOG.md +13 -1
- package/__snapshots__/application-topbar--inactive.png +0 -0
- package/__snapshots__/button-button--raised-disabled.png +0 -0
- package/__snapshots__/input-slider--no-icons.png +0 -0
- package/__snapshots__/input-slider--no-value.png +0 -0
- package/__snapshots__/line-corner-line--primary.png +0 -0
- package/__snapshots__/line-example--air.png +0 -0
- package/__snapshots__/line-example--connector.png +0 -0
- package/__snapshots__/line-example--electric.png +0 -0
- package/__snapshots__/line-example--fluid.png +0 -0
- package/__snapshots__/line-horizontal-line--primary.png +0 -0
- package/__snapshots__/line-vertical-line--complex.png +0 -0
- package/__snapshots__/line-vertical-line--primary.png +0 -0
- package/custom-elements.json +764 -399
- package/dist/automation/corner-line/corner-line.d.ts +22 -0
- package/dist/automation/corner-line/corner-line.d.ts.map +1 -0
- package/dist/automation/corner-line/corner-line.js +161 -0
- package/dist/automation/corner-line/corner-line.js.map +1 -0
- package/dist/automation/horizontal-line/horizontal-line.d.ts +15 -0
- package/dist/automation/horizontal-line/horizontal-line.d.ts.map +1 -0
- package/dist/automation/horizontal-line/horizontal-line.js +110 -0
- package/dist/automation/horizontal-line/horizontal-line.js.map +1 -0
- package/dist/automation/index.d.ts +20 -0
- package/dist/automation/index.d.ts.map +1 -0
- package/dist/automation/index.js +42 -0
- package/dist/automation/index.js.map +1 -0
- package/dist/automation/vertical-line/vertical-line.d.ts +15 -0
- package/dist/automation/vertical-line/vertical-line.d.ts.map +1 -0
- package/dist/automation/vertical-line/vertical-line.js +111 -0
- package/dist/automation/vertical-line/vertical-line.js.map +1 -0
- package/dist/components/brilliance-menu/brilliance-menu.d.ts.map +1 -1
- package/dist/components/brilliance-menu/brilliance-menu.js +2 -0
- package/dist/components/brilliance-menu/brilliance-menu.js.map +1 -1
- package/dist/components/slider/slider.css.js +20 -0
- package/dist/components/slider/slider.css.js.map +1 -1
- package/dist/components/slider/slider.d.ts +8 -0
- package/dist/components/slider/slider.d.ts.map +1 -1
- package/dist/components/slider/slider.js +44 -18
- package/dist/components/slider/slider.js.map +1 -1
- package/dist/components/top-bar/top-bar.css.js +5 -1
- package/dist/components/top-bar/top-bar.css.js.map +1 -1
- package/dist/components/top-bar/top-bar.d.ts.map +1 -1
- package/dist/components/top-bar/top-bar.js +8 -8
- package/dist/components/top-bar/top-bar.js.map +1 -1
- package/package.json +18 -25
- package/src/automation/corner-line/corner-line.stories.ts +31 -0
- package/src/automation/corner-line/corner-line.ts +167 -0
- package/src/automation/horizontal-line/horizontal-line.stories.ts +28 -0
- package/src/automation/horizontal-line/horizontal-line.ts +100 -0
- package/src/automation/index.ts +41 -0
- package/src/automation/line.stories.ts +142 -0
- package/src/automation/vertical-line/vertical-line.stories.ts +71 -0
- package/src/automation/vertical-line/vertical-line.ts +104 -0
- package/src/components/brilliance-menu/brilliance-menu.ts +2 -0
- package/src/components/slider/slider.css +20 -0
- package/src/components/slider/slider.stories.ts +20 -1
- package/src/components/slider/slider.ts +43 -19
- package/src/components/top-bar/top-bar.css +4 -0
- package/src/components/top-bar/top-bar.ts +10 -8
- package/src/palettes/variables.css +64 -43
- package/script/svg-instruments/convert-svg.ts +0 -246
- package/script/svg-instruments/environment.d.ts +0 -7
- package/script/svg-instruments/exports.ts +0 -82
- package/script/svg-instruments/figma-types.ts +0 -804
- package/script/svg-instruments/figmaImport.ts +0 -79
- 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));
|