@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.
- 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));
|