From b4bd447083928653c88acb94f6cea23cd2f96817 Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Mon, 19 Jun 2023 22:42:39 +0900 Subject: [PATCH 01/35] add client switch --- testing/report/src/index.ts | 19 +++++++++++-------- 1 file changed, 11 insertions(+), 8 deletions(-) diff --git a/testing/report/src/index.ts b/testing/report/src/index.ts index 177e420d..76e1632e 100644 --- a/testing/report/src/index.ts +++ b/testing/report/src/index.ts @@ -4,7 +4,8 @@ import assert from "assert"; import ora from "ora"; import { mapper } from "@design-sdk/figma-remote"; import { convert } from "@design-sdk/figma-node-conversion"; -import { Client } from "@figma-api/community/fs"; +import { Client as ClientFS } from "@figma-api/community/fs"; +import { Client as ClientS3 } from "@figma-api/community"; import type { Frame } from "@design-sdk/figma-remote-types"; import { htmlcss } from "@codetest/codegen"; import { Worker as ScreenshotWorker } from "@codetest/screenshot"; @@ -104,13 +105,15 @@ async function report() { config.localarchive.images ); - const client = Client({ - paths: { - files: config.localarchive.files, - images: config.localarchive.images, - }, - baseURL: `http://localhost:${FS_SERVER_PORT}`, - }); + const client = config.localarchive + ? ClientFS({ + paths: { + files: config.localarchive.files, + images: config.localarchive.images, + }, + baseURL: `http://localhost:${FS_SERVER_PORT}`, + }) + : ClientS3(); // Start the server await fileserver_start(FS_SERVER_PORT); From f3b910d9bfa69c8c82fb1ac272ccc6b6371a1729 Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Tue, 20 Jun 2023 04:26:06 +0900 Subject: [PATCH 02/35] wip - adding progress --- testing/report/src/index.ts | 44 ++++++++++++++++++++++++++----------- 1 file changed, 31 insertions(+), 13 deletions(-) diff --git a/testing/report/src/index.ts b/testing/report/src/index.ts index 76e1632e..03b1108c 100644 --- a/testing/report/src/index.ts +++ b/testing/report/src/index.ts @@ -2,6 +2,7 @@ import path from "path"; import fs from "fs/promises"; import assert from "assert"; import ora from "ora"; +import Progress from "cli-progress"; import { mapper } from "@design-sdk/figma-remote"; import { convert } from "@design-sdk/figma-node-conversion"; import { Client as ClientFS } from "@figma-api/community/fs"; @@ -57,6 +58,7 @@ interface ReportConfig { // disable logging console.log = () => {}; console.warn = () => {}; +console.error = () => {}; function fsserver(path: string) { // fileserver for puppeteer to load local files @@ -93,7 +95,9 @@ async function report() { `sample file not found at ${config.sample} nor ${samples_path}` ); - const samples = JSON.parse(await fs.readFile(samples_path, "utf-8")); + const samples: Array<{ id: string; name: string }> = JSON.parse( + await fs.readFile(samples_path, "utf-8") + ); // create .coverage folder const coverage_path = config.outDir ?? path.join(cwd, ".coverage"); @@ -115,9 +119,11 @@ async function report() { }) : ClientS3(); - // Start the server - await fileserver_start(FS_SERVER_PORT); - console.info(`serve running at http://localhost:${FS_SERVER_PORT}/`); + if (config.localarchive) { + // Start the server + await fileserver_start(FS_SERVER_PORT); + console.info(`serve running at http://localhost:${FS_SERVER_PORT}/`); + } const ssworker = new ScreenshotWorker({}); await ssworker.launch(); @@ -125,6 +131,11 @@ async function report() { // setup the dir await mkdir(coverage_path); + const bar = new Progress.SingleBar({ + forceRedraw: true, + }); + bar.start(samples.length, 0); + let i = 0; for (const c of samples) { i++; @@ -136,10 +147,12 @@ async function report() { const { data } = await client.file(filekey); file = data; if (!file) { + bar.increment(); continue; } } catch (e) { // file not found + bar.increment(); continue; } @@ -160,7 +173,7 @@ async function report() { }) ).data.images; } catch (e) { - console.error("exports not ready for", filekey, e.message); + bar.increment(); continue; } @@ -168,9 +181,9 @@ async function report() { for (const frame of frames) { ii++; - const spinner = ora( - `[${i}/${samples.length}] Running coverage for ${c.id}/${frame.id} (${ii}/${frames.length})` - ).start(); + const spinner = ora({ + text: `[${i}/${samples.length}] Running coverage for ${c.id}/${frame.id} (${ii}/${frames.length})`, + }).start(); // create .coverage/:id/:node folder const coverage_node_path = path.join(coverage_set_path, frame.id); @@ -324,14 +337,11 @@ async function report() { // wrie report.json await fs.writeFile(report_file, JSON.stringify(report, null, 2)); - - spinner.text = `report file for ${frame.id} ➡ ${report_file}`; - spinner.succeed(); + spinner.succeed(`report file for ${frame.id} ➡ ${report_file}`); } catch (e) { // could be codegen error spinner.fail(`error on ${frame.id} : ${e.message}`); logger.log("error", e); - console.error(e); } } @@ -341,11 +351,19 @@ async function report() { if (files.length === 0) { await fs.rmdir(coverage_set_path); } + + bar.increment(); + console.info(""); } // cleaup + // terminate puppeteer await ssworker.terminate(); - await fileserver_close(); + + // terminate local file server + if (config.localarchive) { + await fileserver_close(); + } } report(); From a052fde8bc3b1ff77f51dd6d7ace048c549e4ea9 Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Tue, 20 Jun 2023 04:26:21 +0900 Subject: [PATCH 03/35] mv --- testing/report/src/{index.ts => report.ts} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename testing/report/src/{index.ts => report.ts} (100%) diff --git a/testing/report/src/index.ts b/testing/report/src/report.ts similarity index 100% rename from testing/report/src/index.ts rename to testing/report/src/report.ts From 00b74a42daf1ea7fbb450a1d1b74117ecb41c46d Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Tue, 20 Jun 2023 04:33:32 +0900 Subject: [PATCH 04/35] add report bin cli --- testing/report/package.json | 13 ++++++++----- testing/report/src/bin.ts | 25 ++++++++++++++++++++++++ testing/report/src/report.ts | 37 ++++++++++++++++++------------------ 3 files changed, 52 insertions(+), 23 deletions(-) create mode 100644 testing/report/src/bin.ts diff --git a/testing/report/package.json b/testing/report/package.json index 00376398..63bc4b11 100644 --- a/testing/report/package.json +++ b/testing/report/package.json @@ -2,16 +2,17 @@ "name": "@codetest/report", "version": "0.0.0", "private": true, - "bin": "./dist/index.js", + "bin": "./dist/bin.js", "scripts": { "clean": "rm -rf ./dist", - "build": "ncc build src/index.ts -s -o dist", - "dev": "ts-node src/index.ts", - "start": "node dist/index.js" + "build": "ncc build src/bin.ts -s -o dist", + "report": "node dist/bin.js" }, "devDependencies": { + "@types/cli-progress": "^3.11.0", "@types/node": "^20.2.5", "@types/serve-handler": "^6.1.1", + "@types/yargs": "^17.0.24", "@vercel/ncc": "^0.36.1", "ts-node": "^10.9.1", "ts-node-dev": "^2.0.0", @@ -21,9 +22,11 @@ "dependencies": { "@figma-api/community": "^0.0.7", "axios-cache-interceptor": "^1.1.1", + "cli-progress": "^3.12.0", "minimist": "^1.2.8", "ora": "^5.4.0", "serve-handler": "^6.1.5", - "winston": "^3.9.0" + "winston": "^3.9.0", + "yargs": "^17.2.1" } } diff --git a/testing/report/src/bin.ts b/testing/report/src/bin.ts new file mode 100644 index 00000000..a9b0bfc2 --- /dev/null +++ b/testing/report/src/bin.ts @@ -0,0 +1,25 @@ +// cli for report generation + +import yargs from "yargs"; +import { hideBin } from "yargs/helpers"; +import path from "path"; +import { report, GenerateReportOptions } from "./report"; + +const argv = yargs(hideBin(process.argv)) + .option("port", { + alias: "p", + description: "The local fs server port", + type: "number", + default: 8000, + }) + .option("config", { + description: "The path to the reports.config.js file", + type: "string", + default: path.join(process.cwd(), "report.config.js"), + }) + .help() + .alias("help", "h").argv as GenerateReportOptions; + +if (require.main === module) { + report({ port: argv.port, config: argv.config }); +} diff --git a/testing/report/src/report.ts b/testing/report/src/report.ts index 03b1108c..dac2cae9 100644 --- a/testing/report/src/report.ts +++ b/testing/report/src/report.ts @@ -23,7 +23,20 @@ import { createServer } from "http"; import { promisify } from "util"; import handler from "serve-handler"; -const FS_SERVER_PORT = 8000; +export interface GenerateReportOptions { + port: number; + config: string; +} + +interface ReportConfig { + sample: string; + outDir?: string; + localarchive?: { + files: string; + images: string; + }; + skipIfReportExists?: boolean; +} const logger = winston.createLogger({ transports: [ @@ -45,16 +58,6 @@ const exists = async (path: string) => { const mkdir = async (path: string) => !(await exists(path)) && (await fs.mkdir(path)); -interface ReportConfig { - sample: string; - outDir?: string; - localarchive?: { - files: string; - images: string; - }; - skipIfReportExists?: boolean; -} - // disable logging console.log = () => {}; console.warn = () => {}; @@ -79,11 +82,11 @@ function fsserver(path: string) { }; } -async function report() { +export async function report(options: GenerateReportOptions) { console.info("Starting report"); const cwd = process.cwd(); // read the config - const config: ReportConfig = require(path.join(cwd, "report.config.js")); + const config: ReportConfig = require(options.config); // load the sample file const samples_path = (await exists(config.sample)) @@ -115,14 +118,14 @@ async function report() { files: config.localarchive.files, images: config.localarchive.images, }, - baseURL: `http://localhost:${FS_SERVER_PORT}`, + baseURL: `http://localhost:${options.port}`, }) : ClientS3(); if (config.localarchive) { // Start the server - await fileserver_start(FS_SERVER_PORT); - console.info(`serve running at http://localhost:${FS_SERVER_PORT}/`); + await fileserver_start(options.port); + console.info(`serve running at http://localhost:${options.port}/`); } const ssworker = new ScreenshotWorker({}); @@ -365,5 +368,3 @@ async function report() { await fileserver_close(); } } - -report(); From b023e5a8752fedea341f2b16ecb3d71a2438ff56 Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Tue, 20 Jun 2023 04:34:00 +0900 Subject: [PATCH 05/35] optional env config --- testing/report/report.config.js | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/testing/report/report.config.js b/testing/report/report.config.js index 2eba836d..b3728fd6 100644 --- a/testing/report/report.config.js +++ b/testing/report/report.config.js @@ -9,9 +9,10 @@ const { OUTDIR, LOCAL_ARCHIVE_FILES, LOCAL_ARCHIVE_IMAGES } = process.env; module.exports = { sample: path.join(__dirname, "../../data/figma-archives/prod/meta.json"), outDir: OUTDIR, - localarchive: { - files: LOCAL_ARCHIVE_FILES, - images: LOCAL_ARCHIVE_IMAGES, - }, - skipIfReportExists: true, + localarchive: !!LOCAL_ARCHIVE_FILES && + !!LOCAL_ARCHIVE_IMAGES && { + files: LOCAL_ARCHIVE_FILES, + images: LOCAL_ARCHIVE_IMAGES, + }, + skipIfReportExists: false, }; From 1addc917121e98174f805d2bf4e0b858a360b0c6 Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Tue, 20 Jun 2023 06:23:16 +0900 Subject: [PATCH 06/35] fix reports --- testing/report/package.json | 6 ++---- testing/report/src/report.ts | 20 +++++++------------- 2 files changed, 9 insertions(+), 17 deletions(-) diff --git a/testing/report/package.json b/testing/report/package.json index 63bc4b11..4718b462 100644 --- a/testing/report/package.json +++ b/testing/report/package.json @@ -2,14 +2,13 @@ "name": "@codetest/report", "version": "0.0.0", "private": true, - "bin": "./dist/bin.js", + "bin": "./dist/index.js", "scripts": { "clean": "rm -rf ./dist", "build": "ncc build src/bin.ts -s -o dist", - "report": "node dist/bin.js" + "report": "node dist/index.js" }, "devDependencies": { - "@types/cli-progress": "^3.11.0", "@types/node": "^20.2.5", "@types/serve-handler": "^6.1.1", "@types/yargs": "^17.0.24", @@ -22,7 +21,6 @@ "dependencies": { "@figma-api/community": "^0.0.7", "axios-cache-interceptor": "^1.1.1", - "cli-progress": "^3.12.0", "minimist": "^1.2.8", "ora": "^5.4.0", "serve-handler": "^6.1.5", diff --git a/testing/report/src/report.ts b/testing/report/src/report.ts index dac2cae9..0ebe6c8c 100644 --- a/testing/report/src/report.ts +++ b/testing/report/src/report.ts @@ -2,7 +2,6 @@ import path from "path"; import fs from "fs/promises"; import assert from "assert"; import ora from "ora"; -import Progress from "cli-progress"; import { mapper } from "@design-sdk/figma-remote"; import { convert } from "@design-sdk/figma-node-conversion"; import { Client as ClientFS } from "@figma-api/community/fs"; @@ -23,6 +22,8 @@ import { createServer } from "http"; import { promisify } from "util"; import handler from "serve-handler"; +const CI = process.env.CI; + export interface GenerateReportOptions { port: number; config: string; @@ -108,9 +109,10 @@ export async function report(options: GenerateReportOptions) { console.info(`Loaded ${samples.length} samples`); console.info(`Configuration used - ${JSON.stringify(config, null, 2)}`); - const { listen: fileserver_start, close: fileserver_close } = fsserver( - config.localarchive.images - ); + const { listen: fileserver_start, close: fileserver_close } = + config.localarchive + ? fsserver(config.localarchive.images) + : { listen: () => {}, close: () => {} }; const client = config.localarchive ? ClientFS({ @@ -134,11 +136,6 @@ export async function report(options: GenerateReportOptions) { // setup the dir await mkdir(coverage_path); - const bar = new Progress.SingleBar({ - forceRedraw: true, - }); - bar.start(samples.length, 0); - let i = 0; for (const c of samples) { i++; @@ -150,12 +147,10 @@ export async function report(options: GenerateReportOptions) { const { data } = await client.file(filekey); file = data; if (!file) { - bar.increment(); continue; } } catch (e) { // file not found - bar.increment(); continue; } @@ -176,7 +171,6 @@ export async function report(options: GenerateReportOptions) { }) ).data.images; } catch (e) { - bar.increment(); continue; } @@ -186,6 +180,7 @@ export async function report(options: GenerateReportOptions) { const spinner = ora({ text: `[${i}/${samples.length}] Running coverage for ${c.id}/${frame.id} (${ii}/${frames.length})`, + isEnabled: !CI, }).start(); // create .coverage/:id/:node folder @@ -355,7 +350,6 @@ export async function report(options: GenerateReportOptions) { await fs.rmdir(coverage_set_path); } - bar.increment(); console.info(""); } From 97b99b3f889ac925c6573826ff7aabc09a60d896 Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Tue, 20 Jun 2023 06:23:28 +0900 Subject: [PATCH 07/35] add ci reports --- ci/report/.gitignore | 1 + ci/report/index.js | 23 +++++++++++++++++++++++ ci/report/report.config.js | 7 +++++++ ci/report/sample.json | 12 ++++++++++++ 4 files changed, 43 insertions(+) create mode 100644 ci/report/.gitignore create mode 100644 ci/report/index.js create mode 100644 ci/report/report.config.js create mode 100644 ci/report/sample.json diff --git a/ci/report/.gitignore b/ci/report/.gitignore new file mode 100644 index 00000000..c5cb1afa --- /dev/null +++ b/ci/report/.gitignore @@ -0,0 +1 @@ +.coverage \ No newline at end of file diff --git a/ci/report/index.js b/ci/report/index.js new file mode 100644 index 00000000..64b2e64a --- /dev/null +++ b/ci/report/index.js @@ -0,0 +1,23 @@ +const path = require("path"); +const child_process = require("child_process"); + +const DIR_TESTING = path.join(__dirname, "..", "..", "testing"); +const DIR_TESTING_REPORT = path.join(DIR_TESTING, "report"); +const CONFIG_FILE = path.join(__dirname, "report.config.js"); + +// run the report ci +child_process + .spawn(`npm run report --`, ["--config", CONFIG_FILE], { + shell: true, + cwd: DIR_TESTING_REPORT, + }) + .stdout.on("data", (data) => { + console.log(`${data}`); + }) + .on("error", (err) => { + console.info(err); + process.exit(1); + }) + .on("exit", (code) => { + process.exit(code); + }); diff --git a/ci/report/report.config.js b/ci/report/report.config.js new file mode 100644 index 00000000..5711d37c --- /dev/null +++ b/ci/report/report.config.js @@ -0,0 +1,7 @@ +const path = require("path"); + +module.exports = { + sample: path.join(__dirname, "sample.json"), + outDir: path.join(__dirname, ".coverage"), + skipIfReportExists: false, +}; diff --git a/ci/report/sample.json b/ci/report/sample.json new file mode 100644 index 00000000..71098e8f --- /dev/null +++ b/ci/report/sample.json @@ -0,0 +1,12 @@ +[ +{"id": "1035203688168086460", "name": "Material 3 Design Kit", "description": "

Introducing Material Design 3

Meet Material Design 3, Material Design’s most personal design system yet. The Material 3 Design Kit provides a comprehensive introduction to the design system, with styles and components to help you get started.


Visualize dynamic color in your UI

The Material 3 Design Kit is built to work with the Material Theme Builder Figma plugin. Select an image or color to visualize dynamic color in your UI.


Looking for icons? Try the Google Icons Library


Suggestions and/or feedback?

Email m3-design-kit-feedback@google.com

Fill out this Google feedback form

or ping us @materialdesign on Twitter.


Changelog


03.28.23 V1.8

Major updates:

⚠ New tonal surfaces and fixed accents are here!

The latest update introduces Surfaces based on tone values, these are no longer read-only overlays. Surfaces 1–5 will remain in the gm3 design kit and material theme builder for current users, but we recommend migrating to new surface tokens as soon as possible.

Fixed accents add a new set of colors that will remain consistent across light and dark themes.

⚠ We added prototyping to components!


Additional updates: 

  • Date Pickers range date text has updated to on-secondary-container color role

Bugs adressed: 

  • Added text styles that were missing on the Search component
  • Fixed padding and constraints on Top App Bar
  • Fixed some small discrepancies in Dialogs


02.09.23 V1.7

Components and Styles Added: 

  • Side Sheets

Updates:

  • a11y update to the Date Picker

Bugs addressed: 

  • Added Absolute Position to Camera Cutout element inside status bar
  • Date Picker day layer names fixed
  • Changed Status Bar and Bottom Handle constraints to scale correctly within Device Frames
  • Nav Drawer - there were text properties set up but not in use, causing component to appear as 'invalid'


12.15.22 V1.6

Components and Styles Added: 

  • Search bar and modal
  • Custom variants for Progress Indicators
  • Avatar imagery with metadata

Updates:

  • Cover art refresh
  • Component properties added to multiple components

Bugs addressed: 

  • Textfields label color
  • Incorrect opacity on disabled filter chip
  • Incorrect Type style on \"Title-large\": from 'regular' to 'medium'
  • Typo on the Body/Large styles page: from 0.15 to 0.5
  • Outline pressed button icon was secondary color, updated to use primary color


10.18.22 V1.5

Huge update 🎉

Components and Styles Added: 

  • Badge
  • Small FABs
  • Progress indicators
  • Checkboxes
  • Tabs
  • Dividers
  • Segmented buttons
  • Bottom sheets 
  • Time pickers
  • Date pickers
  • Sliders
  • Lists
  • Snackbars
  • Navigation drawers (Dark)
  • Outline-variant color role
  • Keyboards added

Bugs addressed: 

  • Removed Top App Bar elevation on scroll
  • Icon buttons now reflect 48dp size for tap target
  • State layers for switches are now color roles and several other bug fixes
  • Fixed minor Text Style issues and deleted excess Text Styles
  • Fixed Nav bar active label color

Updates: 

  • Components updated to have nested new components (ex: badges, dividers)
  • Components updated to include outline-variant color role (ex: outline card)
  • Disabled FABs removed
  • Hex values removed — color roles only
  • Top app bar now leverages 48dp icon buttons
  • Restructured all Chips components
  • Restructured all Fab components
  • Text fields updated w/icon button 
  • Improved several components with auto layout 


07.01.22 V1.4

  • Fixed the switches component 
  • Fixed a bug where the chips were mislabeled
  • Fixed a bug with the surface value of elevated cards and elevated chips
  • Fixed label of on-surface value in dark mode
  • Fixed a bug in navigation bars where the badge was shifting between active and inactive states
  • Updated color role structure


05.11.22 V1.3

  • New Material 3 components, including Icon Buttons, Switches, and Bottom App Bars 
  • Fixed a bug where users would be asked to install Google Sans
  • Fixed a bug where Assistive and Filter chips contained a conflict error


02.14.22 V1.2

  • 🎉Our top request - the design kit now includes Text Fields! 
  • Updated chips to include missing variants
  • Fixed a bug in Dialogs which prevented the component from working correctly


11.10.21 V1.1

  • Updated links under color and typography
  • Added additional color roles under .read-only to allow for state opacity tokens, fixing a bug where some states’ colors would not update when using the Theme Builder plugin.


10.27.21 V1

  • Kit release
", "version_id": "300251", "version": "15", "created_at": "2021-10-27T14:49:52.407Z", "duplicate_count": 304043, "like_count": 12274, "thumbnail_url": "https://s3-alpha.figma.com/hub/file/3248391748/c8266c68-b5d6-4fc2-9fc6-d41b3cc8af6f-cover.png", "redirect_canvas_url": "/community/file/1035203688168086460/canvas", "community_publishers": ["2555098"], "publisher": {"id": "2555098", "profile_handle": "materialdesign", "follower_count": 27922, "following_count": 0, "primary_user_id": "771462962926009319", "name": "Material Design", "img_url": "https://s3-alpha.figma.com/profile/77d92d28-8203-4dbb-9a95-9d81cacbc6ce", "badges": ["figma_partner"]}, "support_contact": "materialdesignteam@gmail.com", "creator": {"id": "771462962926009319", "handle": "Material Design", "img_url": "https://s3-alpha.figma.com/profile/77d92d28-8203-4dbb-9a95-9d81cacbc6ce"}, "tags": ["android", "google", "material", "material design", "mobile", "stickersheet", "system", "ui kit"], "badges": [], "related_content": {"content": ["1164313362327941158", "1215441112935711382", "1199784060037728858"], "types": ["by_creator"]}}, +{"id": "778763161265841481", "name": "Material 2 Design Kit", "description": "

Customize and Create

Material Design's Baseline Design Kit provides all you need to create beautiful apps, complete with components and theming guidance.


Suggestions and/or feedback? Ping us @materialdesign on Twitter.


Changelog

10.27.21

  • This kit is no longer updated by the Material Design team. For the newest iteration of the Material Design Kit, please use the Material 3 Design Kit. For more details about Material Design 3, check out Material.io


08.24.21 V1.3

  • Fixed a bug that prevented users from theming the full kit


07.14.21 V1.2

     Updates:

  • Updated Snackbar
  • Updated Switches
  • Updated Sliders
  • Updated Text Fields
  • Updated Button + Chip elevation
  • Updated Switches


06.28.21 V1.1

     Updates:

  • Added autolayout to components
", "version_id": "69467", "version": "8", "created_at": "2019-11-19T23:26:46.362Z", "duplicate_count": 341590, "like_count": 7721, "thumbnail_url": "https://s3-alpha.figma.com/hub/file/1243826780/733e5f32-55ba-4d02-adf9-54d6e041dcff-cover.png", "redirect_canvas_url": "/community/file/778763161265841481/canvas", "community_publishers": ["2555098"], "publisher": {"id": "2555098", "profile_handle": "materialdesign", "follower_count": 27922, "following_count": 0, "primary_user_id": "771462962926009319", "name": "Material Design", "img_url": "https://s3-alpha.figma.com/profile/77d92d28-8203-4dbb-9a95-9d81cacbc6ce", "badges": ["figma_partner"]}, "support_contact": null, "creator": {"id": "771462962926009319", "handle": "Material Design", "img_url": "https://s3-alpha.figma.com/profile/77d92d28-8203-4dbb-9a95-9d81cacbc6ce"}, "tags": ["android", "google", "material", "mobile", "stickersheet", "system", "ui kit"], "badges": [], "related_content": {"content": ["1035203688168086460", "1164313362327941158", "1215441112935711382"], "types": ["by_creator"]}}, +{"id": "890095002328610853", "name": "SALY - 3D Illustration Pack", "description": "

Collection of high-quality 3D illustrations, hand-crafted and full of personalities. FREE to use for your exploration or personal project.


Over 30 illustrations and will keep updated in the future. Enjoy!


Work Inquiry: talk@hellozea.com


------------------------------


Changelog:


v1.7.3 (23 September 2021):


  • Added 3 more illustrations


v1.6.3 (11 May 2021):


  • Added 1 more illustrations


v1.5.3 (4 May 2021):


  • Added 10 more illustrations, wow!
  • Added my email for work inquiry
  • Minor fix here and there


v1.4.2 (11 January 2021):


  • Happy new year guys!
  • Added 7 more illustrations, wow!
  • Minor fix here and there


v1.3.2 (12 Dec 2020):


  • Added 3 more illustrations
  • Add License Agreement card
  • Add Social Media card


v1.2.1:


  • Fix the thumbnail


v1.2.0:


  • Added 3 more illustrations


v1.1.0:


  • Added 2 more illustrations
  • Minor fix


v1.0.0:


  • Initial release!
", "version_id": "60438", "version": "12", "created_at": "2020-09-22T04:39:45.719Z", "duplicate_count": 213111, "like_count": 7766, "thumbnail_url": "https://s3-alpha.figma.com/hub/file/1151541105/360c7092-f558-420d-b37f-9ff98ef61d7a-cover.png", "redirect_canvas_url": "/community/file/890095002328610853/canvas", "community_publishers": ["2523672"], "publisher": {"id": "2523672", "profile_handle": "zea", "follower_count": 464, "following_count": 6, "primary_user_id": "770168073021644197", "name": "Alzea", "img_url": "https://s3-alpha.figma.com/profile/9bb40d6d-f1d7-433c-b300-d2fe1b13016e", "badges": []}, "support_contact": null, "creator": {"id": "770168073021644197", "handle": "Alzea", "img_url": "https://s3-alpha.figma.com/profile/9bb40d6d-f1d7-433c-b300-d2fe1b13016e"}, "tags": [], "badges": [], "related_content": {"content": [], "types": ["by_creator"]}}, +{"id": "1211752161700087083", "name": "iPadOS 16 UI Kit for Figma", "description": "

About ✨

I'm excited to share this year's iPadOS 16 UI Kit for Figma with the community! This file contains hundreds of components, templates, demos, and everything else needed to help you start designing for iPadOS. Each component uses the latest version of Auto Layout, supports Component Properties, variants, Light and Dark Mode, and much more.


I can't wait to see what you'll create with these components!

", "version_id": "289240", "version": "3", "created_at": "2023-02-26T19:10:28.613Z", "duplicate_count": 1009, "like_count": 256, "thumbnail_url": "https://s3-alpha.figma.com/hub/file/3160180469/45404798-1c5a-46e5-ae29-065bb0ab2b9e-cover.png", "redirect_canvas_url": "/community/file/1211752161700087083/canvas", "community_publishers": ["938"], "publisher": {"id": "938", "profile_handle": "joey", "follower_count": 12182, "following_count": 1, "primary_user_id": "623995712489101040", "name": "Joey Banks", "img_url": "https://s3-alpha.figma.com/profile/a96c6fbe-fc35-48df-a1b7-41511b1695f5", "badges": []}, "support_contact": "support@baselinedesign.io", "creator": {"id": "623995712489101040", "handle": "Joey Banks", "img_url": "https://s3-alpha.figma.com/profile/a96c6fbe-fc35-48df-a1b7-41511b1695f5"}, "tags": ["apple", "appstore", "ios", "ipados", "keyboard", "library", "lockscreen", "message", "safari", "settings"], "badges": [], "related_content": {"content": ["1121065701252736567", "834093248798603357", "984106517828363349"], "types": ["by_creator"]}}, +{"id": "1208110531299974704", "name": "coolicons PRO | 1.320+ Carefully Designed Icons | Duotone, Duocolor, Line Icons", "description": "

coolicons PRO | 1.320+ Carefully Designed Icons


Three Styles: Line, Duotone, Duocolor, organized in Variants!


coolicons PRO is a carefully designed collection of 1.320+ icons with a focus on simplicity and consistency. Perfectly suited for web, application and mobile design.


✨ 1.320+ Icons

coolicons PRO comes in three styles, Duotone, Duocolor, Line Icons, that are empowered by Figma's Variants, allowing you to swap styles effortlessly.


🌈  Full Customization with coolicons PRO

Includes all source icons with live corners, duotone and duocolor icons. Easily change stroke weight or corner radius of any icon.


❤️ Created in Figma, Made for Figma!

All icons respect Figma’s component overrides like stroke and color changes. Crafted pixel precise with a 2px stroke and neatly organized in variants.


✅ 24×24 Grid

Each icon has been carefully crafted with love and attention to detail, ensuring that every icon is visually consistent.


🌚 Choose your Side! Dark or Light?

All three icon styles are also placed separately on their own pages in dark or light themes. Bulk select the icons you want and convert them into components.


Support my work and get coolicons PRO


🌈 Visit coolicons.cool


💛 Made by Kryston Schwarze

", "version_id": "283741", "version": "16", "created_at": "2023-02-16T17:59:56.268Z", "duplicate_count": 704, "like_count": 178, "thumbnail_url": "https://s3-alpha.figma.com/hub/file/3118795253/51085a27-6a7f-496b-a399-49a9406920bd-cover.png", "redirect_canvas_url": "/community/file/1208110531299974704/canvas", "community_publishers": ["684894"], "publisher": {"id": "684894", "profile_handle": "kryston", "follower_count": 356, "following_count": 35, "primary_user_id": "618721935786092171", "name": "Kryston Schwarze", "img_url": "https://s3-alpha.figma.com/profile/e657ec1e-096e-47fc-ac28-10a1b8be0b90", "badges": []}, "support_contact": "kryston.schwarze@gmail.com", "creator": {"id": "618721935786092171", "handle": "Kryston Schwarze", "img_url": "https://s3-alpha.figma.com/profile/e657ec1e-096e-47fc-ac28-10a1b8be0b90"}, "tags": ["assets", "coolicons", "dark", "duocolor", "duotone", "icon libary", "icons", "icon set", "light", "line icons", "variants"], "badges": [], "related_content": {"content": ["800815864899415771", "788675347108478517", "788671198471043636"], "types": ["by_creator"]}}, +{"id": "984106517828363349", "name": "iOS 15 UI Kit for Figma", "description": "

iOS 16 UI Kit for Figma is now available!

figma.com/@joey


About

I'm unbelievably excited to share this year's iOS 15 UI Kit on the Figma Community, where my goal was to include everything one might need to begin designing.


Months of fun, nerdy, creating went into this and every component has been recreated and refactored to now work even better with Figma's Variants and updated Auto Layout features.


If you found this file helpful, I’d love to know. Say hi over on Twitter (I’m @joeyabanks)—please share any bugs or mistakes you find, too! 🙏

", "version_id": "155797", "version": "84", "created_at": "2021-06-08T14:47:57.666Z", "duplicate_count": 211264, "like_count": 7650, "thumbnail_url": "https://s3-alpha.figma.com/hub/file/2007993206/9b5e7117-1d28-4c26-8015-8d027af2e21b-cover.png", "redirect_canvas_url": "/community/file/984106517828363349/canvas", "community_publishers": ["938"], "publisher": {"id": "938", "profile_handle": "joey", "follower_count": 12182, "following_count": 1, "primary_user_id": "623995712489101040", "name": "Joey Banks", "img_url": "https://s3-alpha.figma.com/profile/a96c6fbe-fc35-48df-a1b7-41511b1695f5", "badges": []}, "support_contact": null, "creator": {"id": "623995712489101040", "handle": "Joey Banks", "img_url": "https://s3-alpha.figma.com/profile/a96c6fbe-fc35-48df-a1b7-41511b1695f5"}, "tags": ["apple", "browser", "home screen", "ios", "ios 15", "iphone", "keyboard", "lockscreen", "safari"], "badges": [], "related_content": {"content": ["1121065701252736567", "1211752161700087083", "834093248798603357"], "types": ["by_creator"]}}, +{"id": "1217481301531252836", "name": "Abstract 8K Wallpapers", "description": "

Give life to your your presentations with these handcrafted 8K wallpapers generated from 3D. Not AI, just lots of time moving pixels until I work with my overlords. Made and curated by Meng To.


Growing Library

There are 51 high-res wallpapers in different themes. I will keep adding new wallpapers via updates. Feel free to suggest more versions of your favorite ones!


Zoom in and paste your design on top

Need a presentation for your site & socials that’s beautiful and will complement your designs? Shift+2 any wallpaper, put your UI layouts, buttons, menus, cards on top and share with the world.


Blur the heck out of them to get good colors

Blur the whole thing or just the corners like in this background by using alpha masking. Wallpapers are fun!


Or, just use them

Turn these huge wallpapers into hundreds of viable backgrounds for your phone, desktop and presentations.


Commercial License

You can use these images for your commercial projects.


Updates

  • March 30, 2023: New WWDC 23 Collection (3) and added to iPhone 14 (4).
", "version_id": "301599", "version": "4", "created_at": "2023-03-14T14:36:01.985Z", "duplicate_count": 878, "like_count": 124, "thumbnail_url": "https://s3-alpha.figma.com/hub/file/3259775176/cb37919c-a2fa-4a2b-b4ee-757944160441-cover.png", "redirect_canvas_url": "/community/file/1217481301531252836/canvas", "community_publishers": ["38397"], "publisher": {"id": "38397", "profile_handle": "mengto", "follower_count": 233, "following_count": 4, "primary_user_id": "363355749660579106", "name": "Meng To", "img_url": "https://s3-alpha.figma.com/profile/948ce70c-57b0-4ea0-a257-8290137ba1be", "badges": []}, "support_contact": "shadownessguy@gmail.com", "creator": {"id": "363355749660579106", "handle": "Meng To", "img_url": "https://s3-alpha.figma.com/profile/948ce70c-57b0-4ea0-a257-8290137ba1be"}, "tags": ["3d", "abstract", "background", "wallpaper"], "badges": [], "related_content": {"content": ["1217619565147809091", "1066455834796929496", "1010544184877672084"], "types": ["by_creator"]}}, +{"id": "1217053085715485107", "name": "Medica - Online Doctor Appointment & Consultation App UI Kit", "description": "

Hello GUIs,

I just released a new product.


Medica is a Premium & High Quality UI Kit with All Full Features of Online Doctor Appointment & Consultation App. Medica came with unique style and niche, you can easily edit and customize all elements with design components which can speed up design process for your projects. Everything is integrated with the design system, so you only need to change the color, logo, text, and so on in the design system, then the entire design screen will automatically change.


Medica support for iOS/Android (design system included) and 212 screens which is 100% editable & customizable. Designs are available in Figma. In addition, the design is also equipped with a version of Light & Dark Theme.


Medica is designed in a trendy and modern way, with all layers well organized. Medica is equipped with a design system with hundred of components. The Design System has been equipped with typography, iconography, color styles, components, variants, elements, buttons, input forms, alerts, avatars, checkboxes, chips, grids, toggles, and many others.


In addition, the application design in figma has been designed with fully auto layout, so it is very adaptive if you want to edit, delete, or add some parts. You can also resize the artboard, and the design will be responsive according to the size of the artboard you want. If you are not familiar with auto layout, you can turn it off by right-clicking the layer, and selecting remove auto layout.


Medica UI Kit is suitable for:

  • Online Doctor Appointment App
  • Online Doctor Consultation App
  • Health App
  • Medical App
  • Pharmacy & Medicine App
  • Hospital & Clinic App
  • Healthcare App
  • Articles & Health News App
  • Chatting / MessengerApp


Main App Features:

  • Online Doctor Appointment & Consultation App with Complete Features & Details
  • Search & Filter, Doctor Details, Doctor Rating & Review Features
  • Doctor Consultation Flow with Multiple Payment Methods
  • Doctor Consultation Management (Booking, Reschedule, Cancellation, Leave A Review, & Book Again)
  • Online Consultation with Doctor (Messaging/Live Chat, Voice Call, & Video Call)
  • Consultation History & Saved Consultation Records)
  • Health News & Articles with Bookmark Features
  • Onboarding, Sign up, Sign in, Forgot & Reset Password, Account Setup, Notification, Help Center (FAQ & Customer Support), Profile, Settings, & More


What's Inside:

  • 210+ Ready-made Screens
  • 230+ Components & Variants
  • 65+ Color Styles
  • 25+ Text Styles
  • 700+ Free Icons
  • 100% Auto Layout
  • And much more


Product Highlights:

  • 210+ Screens (iOS/Android Support)
  • 100% Editable & Customizable
  • Compatibility: Figma
  • Light & Dark Theme Included
  • Design System & Hundred of Components
  • Fully Auto Layout
  • Well Organized Layers System
  • Unique, Stylish & Modern
  • Used Google Free Fonts
  • Used Grid System
  • Pixel Perfect Design
  • Global Styleguide
  • Easily Drag & Drop Design


Note: All images/photos in the preview are included 😊

Assets: Unsplash, unDraw, Freepik


---------------------------------------------------------------------------------------------------


Get more awesome products! 👇👇👇

MunirSr


Want to donate?

Buy Me a Coffee: 👇

Buy Me a Coffee


---------------------------------------------------------------------------------------------------


🛈 Additional Information

This product was created and published by MunirSr. If you see someone else selling this product on the website or elsewhere, in any way, it is illegal and violates copyright. Please report it to me. Thank you 😊


---------------------------------------------------------------------------------------------------


Make your project more awesome!

Connect with me: sobakhul.munir527@gmail.com


More you can find me at:

Linkedin | Instagram | Dribbble | Behance | Linktr.ee

", "version_id": "288789", "version": "1", "created_at": "2023-03-13T10:14:27.384Z", "duplicate_count": 1212, "like_count": 130, "thumbnail_url": "https://s3-alpha.figma.com/hub/file/3155990013/ff452531-5b76-427d-a287-d46050ba20b2-cover.png", "redirect_canvas_url": "/community/file/1217053085715485107/canvas", "community_publishers": ["2389308"], "publisher": {"id": "2389308", "profile_handle": "MunirSr", "follower_count": 3639, "following_count": 1, "primary_user_id": "763822967356589666", "name": "Sobakhul Munir Siroj", "img_url": "https://s3-alpha.figma.com/profile/be510c7a-6bfc-4ae7-8098-3887c3553599", "badges": []}, "support_contact": "sobakhul.munir527@gmail.com", "creator": {"id": "763822967356589666", "handle": "Sobakhul Munir Siroj", "img_url": "https://s3-alpha.figma.com/profile/be510c7a-6bfc-4ae7-8098-3887c3553599"}, "tags": ["clinic app", "design system", "doctor app", "doctor appointment app", "doctor consultation app", "free", "health app", "medical app", "medicine app", "mobile", "portfolio", "ui kit"], "badges": [], "related_content": {"content": ["1223314222511062706", "1218823989467855715", "1218605363755606732"], "types": ["by_creator"]}}, +{"id": "1209986153083335158", "name": "UI Prep Design System 7.0", "description": "

⭐️ 5.0 Gumroad rating

Battle-Tested, No Fluff Design System

Jump-start every new project with components and styles you’re confident in. This design system will help you work faster while teaching you best practices along the way!

👉 Learn more at uiprep.com

👉 Preview the full system here

👉 Demo part of the system here


What's included

Purchase includes full UI Prep Design System (light theme)

✅ Latest features! Use auto layout, properties, and variants like a pro

✅ Free updates! Receive all future updates for free

✅ Quick start guide! Tutorial videos to help you customize & use the system asap

✅ Playground! Test area where you can play with 3 sample components


Loved and trusted by solo designers, teams, and students

⭐️ “UI Prep has been instrumental in our agency work. I’m a firm believer in efficiencies and never starting projects from scratch, and UI Prep helps us start at 60% instead of 0%. It’s comprehensive, organized, and very thoughtfully designed. I could not recommend this more.” - Jon Moore, Principal Product Designer at Innovatemap

⭐️ “I would highly recommend this UI Kit! It was a well organized design system with variety of components to select from and simple to get started! The document guides were helpful and the emojis made it feel personal and friendly. This kit has dynamic components and easy to customize my designs. Overall, a great product!” - Jason Lopez, UX/UI Designer at H&R Block

⭐️ “UI Prep's kit is extremely thorough and well-organized. I'm excited about being able to swap instances so easily and utilizing the grid layouts while designing responsively. I highly recommend the kit to any designer that wants to save time and create beautiful, cohesive work.” - Renee Bruhn, Student at Design Lab

⭐️ \"This is a fantastic design system. Best thing on Gumroad!\" - Christopher Yellen, UX/UI Designer at Fidelity

", "version_id": "286637", "version": "7", "created_at": "2023-02-21T22:12:59.347Z", "duplicate_count": 1815, "like_count": 233, "thumbnail_url": "https://s3-alpha.figma.com/hub/file/3142881685/3fc7cb02-b4a9-4156-b854-ea3618a3a22f-cover.png", "redirect_canvas_url": "/community/file/1209986153083335158/canvas", "community_publishers": ["1573407"], "publisher": {"id": "1573407", "profile_handle": "mollyhellmuth", "follower_count": 1437, "following_count": 2, "primary_user_id": "712234545496602821", "name": "Molly Hellmuth", "img_url": "https://s3-alpha.figma.com/profile/97b054c6-33aa-4fe0-9703-ec33b28bbd56", "badges": []}, "support_contact": "molly@quantidesign.io", "creator": {"id": "712234545496602821", "handle": "Molly Hellmuth", "img_url": "https://s3-alpha.figma.com/profile/97b054c6-33aa-4fe0-9703-ec33b28bbd56"}, "tags": ["auto layout", "components", "design system", "library", "light theme", "properties", "responsive", "style guide", "table", "ui kit", "ui prep", "variants"], "badges": [], "related_content": {"content": ["882723790480307828", "888102678933348280", "880199211770085867"], "types": ["by_creator"]}}, +{"id": "1209701993929426029", "name": "❖ Untitled UI – Figma UI kit and design system", "description": "

#1 Design product on Gumroad with 1,300+ ★★★★★ ratings


👉 Check out the 100% free version of Untitled UI


Untitled UI is the largest and best-selling Figma UI kit and design system in the world. Join 50,000+ designers, kickstart any project, save thousands of hours, and level up as a designer.


👉 Learn more at untitledui.com

👉 Preview Untitled UI PRO in Figma and compare us to the competition


Every purchase includes Untitled UI PRO LITE, a premium and lightweight version of the full Untitled UI PRO kit.


👉 Preview Untitled UI PRO LITE in Figma


—————


Save thousands of design hours


Tired of wasting thousands of hours starting from scratch on every project and rebuilding the same components? Untitled UI comes packed full with everything you need to design modern and beautiful UI and websites.


500+ global styles

  • Smart, scalable typography system for any project
  • HUGE practical and accessible color system


10,000+ components and variants

  • Meticulously crafted with 100% Auto Layout 4.0, smart variants, and component properties (new)
  • Updated with the latest Figma features announced at Config 2022
  • Hover and click interactions for faster prototyping (new)
  • We’ve thought of everything you need so you don’t have to – the largest and best Figma UI kit in the world today


420+ ready-to-go desktop and mobile page examples

  • Key focus on examples you'll actually use in real projects - landing pages, common pages, dashboard, and settings pages
  • Mix-and-match sections and variants to design websites and dashboards in minutes


Every purchase includes Untitled UI PRO LITE

  • Untitled UI PRO LITE is a premium and lightweight version of the full Untitled UI PRO kit
  • PRO LITE is 55% lighter, faster, and is designed to include everything you need and nothing you don't


—————


Become a better designer


Are you ready to level up your design workflow? We want to help you complete projects 10x faster, take on more clients, and free up your time to work on more important things. Untitled UI has everything you need.


Every component is meticulously crafted with 100% Auto Layout 4.0, super-smart variants, hover and click interactions, and with accessibility in mind. Swap out variants in seconds, like magic. We’ve thought of everything so you can start designing right away.


—————


Scale is easy, but quality is rare


The most popular Figma UI kits on the market today lack in size, flexibility, or quality — usually all three. Untitled UI was built to solve this. We’ve built this design system to be professional quality, while neutral and flexible enough for any project.


👉 Preview Untitled UI in Figma and compare us to the competition


Seriously, compare us to other UI kits. We even wrote a blog post to make it easy: 24 Best Figma UI Kits and Design Systems


—————


This UI kit is perfect for:


  • Freelance Designers — Deliver high-quality projects faster, take on more clients and increase your income.
  • Design Teams — Get everyone on the same page with a single library. Design faster consistently.
  • Beginners & Students — Learn how professional design systems are built and learn Figma best practices. Master Auto Layout 4.0 and variants faster.
  • Startups — Short on time or budget? Design and prototype faster, with an entire library of ready-to-go components. Save hundreds of hours on that MVP.


—————


What are you waiting for?


Untitled UI is packed full of everything you need to kickstart that awesome project.


👉 Learn more at untitledui.com

👉 Learn what's new on our changelog


—————


Why we created Untitled UI


This project started out of necessity. We tried a bunch of Figma UI kits, but found they lacked in size, flexibility, or quality — usually all three — and we ended up having to remake all the poor-quality components.


We needed an “ultimate starter” kit for new freelance projects and design systems, rather than having to start from scratch each time. We were sick of rebuilding the same common components over and over again... which is not only a waste of time, but the most boring part of the design process.


Untitled UI was built to solve this. We’ve thought of everything you need to design modern and beautiful UI and websites and have wrapped it into one neatly organized package.


You can use this UI kit in unlimited projects. In fact, we designed it this way — to be as neutral, flexible, and scalable as possible to use as a kick-starter for any project.


—————


Any questions?


Check out our Frequently Asked Questions page on our website.


Note: Untitled UI is not affiliated with Figma or Figma's team, nor is it endorsed by Figma.

", "version_id": "300817", "version": "11", "created_at": "2023-02-21T03:23:50.525Z", "duplicate_count": 1793, "like_count": 192, "thumbnail_url": "https://s3-alpha.figma.com/hub/file/3253465680/301b18eb-18d0-42e2-9d5b-d55be3a68d24-cover.png", "redirect_canvas_url": "/community/file/1209701993929426029/canvas", "community_publishers": ["1339065"], "publisher": {"id": "1339065", "profile_handle": "designer", "follower_count": 2924, "following_count": 1, "primary_user_id": "693707883872464537", "name": "Jordan Hughes", "img_url": "https://s3-alpha.figma.com/profile/910a809b-359c-4c9f-9a82-febd85377bbe", "badges": []}, "support_contact": "hi@jordanhughes.co", "creator": {"id": "693707883872464537", "handle": "Jordan Hughes", "img_url": "https://s3-alpha.figma.com/profile/910a809b-359c-4c9f-9a82-febd85377bbe"}, "tags": ["asset library", "design system", "icon library", "icons", "library", "ui kit", "untitled", "untitledui", "untitled ui", "wireframe", "wireframe kit"], "badges": [], "related_content": {"content": ["1020079203222518115", "1209707891179706483", "1114001199549197320"], "types": ["by_creator"]}} +] \ No newline at end of file From 5672674e76444779f7468a568652de6adbc0fb31 Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Tue, 20 Jun 2023 06:33:05 +0900 Subject: [PATCH 08/35] add codetest report workflow --- .github/workflows/codetest-report.yml | 31 +++++++++++++++++++++++++++ 1 file changed, 31 insertions(+) create mode 100644 .github/workflows/codetest-report.yml diff --git a/.github/workflows/codetest-report.yml b/.github/workflows/codetest-report.yml new file mode 100644 index 00000000..38e91b6a --- /dev/null +++ b/.github/workflows/codetest-report.yml @@ -0,0 +1,31 @@ +name: "@codetest/report" + +on: + release: + types: [published] + +jobs: + report: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v2 + - uses: actions/setup-node@v2 + - name: build report tools + run: | + yarn --frozen-lockfile + cd testing/report + yarn build + - name: run report + run: | + node ci/report + - name: upload report to s3 + uses: jakejarvis/s3-sync-action + with: + args: --acl public-read --follow-symlinks --delete + env: + AWS_S3_BUCKET: "s3://codetest-reports" + AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID_S3_CODETEST_REPORTS }} + AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY_S3_CODETEST_REPORTS }} + AWS_REGION: "us-west-1" + SOURCE_DIR: "/ci/report/.coverage" + DEST_DIR: "/${{ github.event.release.tag_name }}" From 32521542142e30e81381c31067b9625029b88e8f Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Tue, 20 Jun 2023 06:35:47 +0900 Subject: [PATCH 09/35] update uses --- .github/workflows/codetest-report.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/codetest-report.yml b/.github/workflows/codetest-report.yml index 38e91b6a..b22ffc51 100644 --- a/.github/workflows/codetest-report.yml +++ b/.github/workflows/codetest-report.yml @@ -19,7 +19,7 @@ jobs: run: | node ci/report - name: upload report to s3 - uses: jakejarvis/s3-sync-action + uses: jakejarvis/s3-sync-action@master with: args: --acl public-read --follow-symlinks --delete env: From 867c1b46a1548cd7644574d07034edd5de1c0934 Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Tue, 20 Jun 2023 06:57:52 +0900 Subject: [PATCH 10/35] fix path resolution --- .github/workflows/codetest-report.yml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/.github/workflows/codetest-report.yml b/.github/workflows/codetest-report.yml index b22ffc51..1fc24d5a 100644 --- a/.github/workflows/codetest-report.yml +++ b/.github/workflows/codetest-report.yml @@ -27,5 +27,5 @@ jobs: AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID_S3_CODETEST_REPORTS }} AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY_S3_CODETEST_REPORTS }} AWS_REGION: "us-west-1" - SOURCE_DIR: "/ci/report/.coverage" - DEST_DIR: "/${{ github.event.release.tag_name }}" + SOURCE_DIR: "ci/report/.coverage" + DEST_DIR: "${{ github.event.release.tag_name }}" From 553bb58245cf6361ec5bc40813f9ed78718e81cf Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Tue, 20 Jun 2023 07:39:21 +0900 Subject: [PATCH 11/35] split --- testing/report/src/report.ts | 125 +++++++++-------------------- testing/report/src/serve.ts | 22 +++++ testing/report/src/utils/exists.ts | 10 +++ testing/report/src/utils/sync.ts | 37 +++++++++ 4 files changed, 108 insertions(+), 86 deletions(-) create mode 100644 testing/report/src/serve.ts create mode 100644 testing/report/src/utils/exists.ts create mode 100644 testing/report/src/utils/sync.ts diff --git a/testing/report/src/report.ts b/testing/report/src/report.ts index 0ebe6c8c..effeddf3 100644 --- a/testing/report/src/report.ts +++ b/testing/report/src/report.ts @@ -18,9 +18,9 @@ import { } from "@design-sdk/asset-repository"; import { RemoteImageRepositories } from "@design-sdk/figma-remote/asset-repository"; import winston from "winston"; -import { createServer } from "http"; -import { promisify } from "util"; -import handler from "serve-handler"; +import { fsserver } from "./serve"; +import { sync } from "./utils/sync"; +import { exists } from "./utils/exists"; const CI = process.env.CI; @@ -47,43 +47,33 @@ const logger = winston.createLogger({ setupCache(axios); -const exists = async (path: string) => { - try { - await fs.access(path); - return true; - } catch (e) { - return false; - } -}; - const mkdir = async (path: string) => !(await exists(path)) && (await fs.mkdir(path)); -// disable logging -console.log = () => {}; -console.warn = () => {}; -console.error = () => {}; - -function fsserver(path: string) { - // fileserver for puppeteer to load local files - const fileserver = createServer((request, response) => { - return handler(request, response, { - public: path, - symlinks: true, - }); - }); - - // Promisify the listen and close methods - const listen = promisify(fileserver.listen.bind(fileserver)); - const close = promisify(fileserver.close.bind(fileserver)); - - return { - listen, - close, - }; +const noconsole = () => { + // disable logging + console.log = () => {}; + console.warn = () => {}; + console.error = () => {}; +}; + +function setImageRepository(filekey: string) { + // TODO: + + MainImageRepository.instance = new RemoteImageRepositories(filekey, {}); + MainImageRepository.instance.register( + new ImageRepository( + "fill-later-assets", + "grida://assets-reservation/images/" + ) + ); } export async function report(options: GenerateReportOptions) { + if (CI) { + noconsole(); + } + console.info("Starting report"); const cwd = process.cwd(); // read the config @@ -176,22 +166,25 @@ export async function report(options: GenerateReportOptions) { let ii = 0; for (const frame of frames) { + const { x: width, y: height } = frame.size; + const { id: fid } = frame; + ii++; const spinner = ora({ - text: `[${i}/${samples.length}] Running coverage for ${c.id}/${frame.id} (${ii}/${frames.length})`, + text: `[${i}/${samples.length}] Running coverage for ${c.id}/${fid} (${ii}/${frames.length})`, isEnabled: !CI, }).start(); // create .coverage/:id/:node folder - const coverage_node_path = path.join(coverage_set_path, frame.id); + const coverage_node_path = path.join(coverage_set_path, fid); await mkdir(coverage_node_path); // report.json const report_file = path.join(coverage_node_path, "report.json"); if (config.skipIfReportExists) { if (await exists(report_file)) { - spinner.succeed(`Skipping - report for ${frame.id} already exists`); + spinner.succeed(`Skipping - report for ${fid} already exists`); continue; } } @@ -204,50 +197,15 @@ export async function report(options: GenerateReportOptions) { filekey ); - const width = frame.size.x; - const height = frame.size.y; - - // TODO: - MainImageRepository.instance = new RemoteImageRepositories(filekey, {}); - MainImageRepository.instance.register( - new ImageRepository( - "fill-later-assets", - "grida://assets-reservation/images/" - ) - ); + setImageRepository(filekey); try { // image A (original) - const exported = exports[frame.id]; + const exported = exports[fid]; const image_a_rel = "./a.png"; const image_a = path.join(coverage_node_path, image_a_rel); - // download the exported image with url - // if the exported is local fs path, then use copy instead - if (await exists(exported)) { - try { - // Check if image_a exists and remove - try { - await fs.lstat(image_a); // use stat to check if file exists (even broken one) - await fs.unlink(image_a); - } catch (e) { - // Handle file not found error - if (e.code !== "ENOENT") { - throw e; - } - } - - await fs.symlink(exported, image_a); - } catch (e) { - // TODO: symlink still fails with "EEXIST: file already exists, symlink" - // we need to handle this. - // reason? - unknown - } - } else if (exported.startsWith("http")) { - const dl = await axios.get(exported, { responseType: "arraybuffer" }); - await fs.writeFile(image_a, dl.data); - } else { - throw new Error(`File not found - ${exported}`); - } + + await sync(exported, image_a); if (!(await exists(image_a))) { spinner.fail(`Image A not found - ${image_a} from (${exported})`); @@ -257,7 +215,7 @@ export async function report(options: GenerateReportOptions) { // codegen const code = await htmlcss( { - id: frame.id, + id: fid, name: frame.name, entry: _converted, }, @@ -305,18 +263,13 @@ export async function report(options: GenerateReportOptions) { const diff_file = path.join(coverage_node_path, "diff.png"); // write diff.png await fs.writeFile(diff_file, diff.getBuffer(false)); - // const { diff, score } = await ssim( - // image_a, - // image_b, - // coverage_node_path - // ); const report = { community_id: filekey, filekey: "unknown", type: "FRAME", name: frame.name, - id: frame.id, + id: fid, width, height, image_a: image_a_rel, @@ -328,17 +281,17 @@ export async function report(options: GenerateReportOptions) { }, engine: { name: "@codetest/codegen", - version: "2023.1.1", + version: "2023.0.0.1", framework: "preview", }, }; // wrie report.json await fs.writeFile(report_file, JSON.stringify(report, null, 2)); - spinner.succeed(`report file for ${frame.id} ➡ ${report_file}`); + spinner.succeed(`report file for ${fid} ➡ ${report_file}`); } catch (e) { // could be codegen error - spinner.fail(`error on ${frame.id} : ${e.message}`); + spinner.fail(`error on ${fid} : ${e.message}`); logger.log("error", e); } } diff --git a/testing/report/src/serve.ts b/testing/report/src/serve.ts new file mode 100644 index 00000000..50cce711 --- /dev/null +++ b/testing/report/src/serve.ts @@ -0,0 +1,22 @@ +import { createServer } from "http"; +import { promisify } from "util"; +import handler from "serve-handler"; + +export function fsserver(path: string) { + // fileserver for puppeteer to load local files + const fileserver = createServer((request, response) => { + return handler(request, response, { + public: path, + symlinks: true, + }); + }); + + // Promisify the listen and close methods + const listen = promisify(fileserver.listen.bind(fileserver)); + const close = promisify(fileserver.close.bind(fileserver)); + + return { + listen, + close, + }; +} diff --git a/testing/report/src/utils/exists.ts b/testing/report/src/utils/exists.ts new file mode 100644 index 00000000..b1aee75b --- /dev/null +++ b/testing/report/src/utils/exists.ts @@ -0,0 +1,10 @@ +import fs from "fs/promises"; + +export const exists = async (path: string) => { + try { + await fs.access(path); + return true; + } catch (e) { + return false; + } +}; diff --git a/testing/report/src/utils/sync.ts b/testing/report/src/utils/sync.ts new file mode 100644 index 00000000..1e7e50e3 --- /dev/null +++ b/testing/report/src/utils/sync.ts @@ -0,0 +1,37 @@ +import fs from "fs/promises"; +import { exists } from "./exists"; +import axios from "axios"; + +/** + * download the 'a' with url + * if 'a' is local fs path, then use symlink instead + * @param a + * @param b + */ +export async function sync(a: string, b: string) { + if (await exists(a)) { + try { + // Check if b exists and remove + try { + await fs.lstat(b); // use stat to check if file exists (even broken one) + await fs.unlink(b); + } catch (e) { + // Handle file not found error + if (e.code !== "ENOENT") { + throw e; + } + } + + await fs.symlink(a, b); + } catch (e) { + // TODO: symlink still fails with "EEXIST: file already exists, symlink" + // we need to handle this. + // reason? - unknown + } + } else if (a.startsWith("http")) { + const dl = await axios.get(a, { responseType: "arraybuffer" }); + await fs.writeFile(b, dl.data); + } else { + throw new Error(`File not found - ${a}`); + } +} From 99753682ff64cc249dedbb1bd3055b0a3a545917 Mon Sep 17 00:00:00 2001 From: Universe Date: Tue, 20 Jun 2023 08:02:51 +0900 Subject: [PATCH 12/35] Update Bucket name --- .github/workflows/codetest-report.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/codetest-report.yml b/.github/workflows/codetest-report.yml index 1fc24d5a..6b07f9b8 100644 --- a/.github/workflows/codetest-report.yml +++ b/.github/workflows/codetest-report.yml @@ -23,7 +23,7 @@ jobs: with: args: --acl public-read --follow-symlinks --delete env: - AWS_S3_BUCKET: "s3://codetest-reports" + AWS_S3_BUCKET: "codetest-reports" AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID_S3_CODETEST_REPORTS }} AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY_S3_CODETEST_REPORTS }} AWS_REGION: "us-west-1" From 0f0dfeebc213fc88f3adff6e1e7e20763726e080 Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Tue, 20 Jun 2023 08:13:28 +0900 Subject: [PATCH 13/35] split node report --- testing/report/package.json | 1 + testing/report/src/report.ts | 269 ++++++++++++++++++++--------------- yarn.lock | 5 + 3 files changed, 161 insertions(+), 114 deletions(-) diff --git a/testing/report/package.json b/testing/report/package.json index 4718b462..4c1ae59d 100644 --- a/testing/report/package.json +++ b/testing/report/package.json @@ -23,6 +23,7 @@ "axios-cache-interceptor": "^1.1.1", "minimist": "^1.2.8", "ora": "^5.4.0", + "p-map": "^6.0.0", "serve-handler": "^6.1.5", "winston": "^3.9.0", "yargs": "^17.2.1" diff --git a/testing/report/src/report.ts b/testing/report/src/report.ts index effeddf3..095f9331 100644 --- a/testing/report/src/report.ts +++ b/testing/report/src/report.ts @@ -1,7 +1,9 @@ -import path from "path"; import fs from "fs/promises"; +import path from "path"; import assert from "assert"; import ora from "ora"; +import winston from "winston"; +import pMap from "p-map"; import { mapper } from "@design-sdk/figma-remote"; import { convert } from "@design-sdk/figma-node-conversion"; import { Client as ClientFS } from "@figma-api/community/fs"; @@ -17,13 +19,16 @@ import { MainImageRepository, } from "@design-sdk/asset-repository"; import { RemoteImageRepositories } from "@design-sdk/figma-remote/asset-repository"; -import winston from "winston"; import { fsserver } from "./serve"; import { sync } from "./utils/sync"; import { exists } from "./utils/exists"; const CI = process.env.CI; +type ClientInterface = + | ReturnType + | ReturnType; + export interface GenerateReportOptions { port: number; config: string; @@ -69,6 +74,136 @@ function setImageRepository(filekey: string) { ); } +async function reportNode({ + node, + filekey, + out, + client, + ssworker, + exports, +}: { + node: Frame; + filekey: string; + out: string; + client: ClientInterface; + ssworker: ScreenshotWorker; + exports: Record; +}) { + const report_file = path.join(out, "report.json"); + + const { x: width, y: height } = node.size; + const { id: fid } = node; + + const _mapped = mapper.mapFigmaRemoteToFigma(node); + const _converted = convert.intoReflectNode(_mapped, null, "rest", filekey); + + setImageRepository(filekey); + + try { + // image A (original) + const exported = exports[fid]; + const image_a_rel = "./a.png"; + const image_a = path.join(out, image_a_rel); + + await sync(exported, image_a); + + if (!(await exists(image_a))) { + return { + error: `Image A not found - ${image_a} from (${exported})`, + }; + } + + // codegen + const code = await htmlcss( + { + id: fid, + name: node.name, + entry: _converted, + }, + async ({ keys, hashes }) => { + const { data: exports } = await client.fileImages(filekey, { + ids: keys, + }); + + const { data: images } = await client.fileImageFills(filekey); + + const map = { + ...exports.images, + ...images.meta.images, + }; + + // transform the path for local file url + return Object.keys(map).reduce((acc, key) => { + const path = map[key]; + const url = path.startsWith("http") ? path : `file://${path}`; + return { + ...acc, + [key]: url, + }; + }, {}); + } + ); + + // write index.html + const html_file = path.join(out, "index.html"); + await fs.writeFile(html_file, code); + + const screenshot_buffer = await ssworker.screenshot({ + htmlcss: code, + viewport: { + width: Math.round(width), + height: Math.round(height), + }, + }); + + const image_b_rel = "./b.png"; + const image_b = path.join(out, image_b_rel); + await fs.writeFile(image_b, screenshot_buffer); + + const diff = await resemble(image_a, image_b); + const diff_file = path.join(out, "diff.png"); + // write diff.png + await fs.writeFile(diff_file, diff.getBuffer(false)); + + const report = { + community_id: filekey, + filekey: "unknown", + type: "FRAME", + name: node.name, + id: fid, + width, + height, + image_a: image_a_rel, + image_b: image_b_rel, + reported_at: new Date().toISOString(), + diff: { + hitmap: diff_file, + percent: diff.rawMisMatchPercentage, + }, + engine: { + name: "@codetest/codegen", + version: "2023.0.0.1", + framework: "preview", + }, + }; + + // wrie report.json + await fs.writeFile(report_file, JSON.stringify(report, null, 2)); + + return { report }; + } catch (e) { + logger.log("error", e); + console.info(e); + return { + error: e.message, + }; + } +} + +function reportFile() { + // +} + export async function report(options: GenerateReportOptions) { if (CI) { noconsole(); @@ -166,133 +301,41 @@ export async function report(options: GenerateReportOptions) { let ii = 0; for (const frame of frames) { - const { x: width, y: height } = frame.size; - const { id: fid } = frame; - ii++; const spinner = ora({ - text: `[${i}/${samples.length}] Running coverage for ${c.id}/${fid} (${ii}/${frames.length})`, + text: `[${i}/${samples.length}] Running coverage for ${c.id}/${frame.id} (${ii}/${frames.length})`, isEnabled: !CI, }).start(); // create .coverage/:id/:node folder - const coverage_node_path = path.join(coverage_set_path, fid); + const coverage_node_path = path.join(coverage_set_path, frame.id); await mkdir(coverage_node_path); // report.json const report_file = path.join(coverage_node_path, "report.json"); if (config.skipIfReportExists) { if (await exists(report_file)) { - spinner.succeed(`Skipping - report for ${fid} already exists`); + spinner.succeed(`Skipping - report for ${frame.id} already exists`); continue; } } - const _mapped = mapper.mapFigmaRemoteToFigma(frame); - const _converted = convert.intoReflectNode( - _mapped, - null, - "rest", - filekey - ); - - setImageRepository(filekey); - - try { - // image A (original) - const exported = exports[fid]; - const image_a_rel = "./a.png"; - const image_a = path.join(coverage_node_path, image_a_rel); - - await sync(exported, image_a); - - if (!(await exists(image_a))) { - spinner.fail(`Image A not found - ${image_a} from (${exported})`); - continue; - } - - // codegen - const code = await htmlcss( - { - id: fid, - name: frame.name, - entry: _converted, - }, - async ({ keys, hashes }) => { - const { data: exports } = await client.fileImages(filekey, { - ids: keys, - }); - - const { data: images } = await client.fileImageFills(filekey); - - const map = { - ...exports.images, - ...images.meta.images, - }; - - // transform the path for local file url - return Object.keys(map).reduce((acc, key) => { - const path = map[key]; - const url = path.startsWith("http") ? path : `file://${path}`; - return { - ...acc, - [key]: url, - }; - }, {}); - } - ); - - // write index.html - const html_file = path.join(coverage_node_path, "index.html"); - await fs.writeFile(html_file, code); - - const screenshot_buffer = await ssworker.screenshot({ - htmlcss: code, - viewport: { - width: Math.round(width), - height: Math.round(height), - }, - }); - - const image_b_rel = "./b.png"; - const image_b = path.join(coverage_node_path, image_b_rel); - await fs.writeFile(image_b, screenshot_buffer); - - const diff = await resemble(image_a, image_b); - const diff_file = path.join(coverage_node_path, "diff.png"); - // write diff.png - await fs.writeFile(diff_file, diff.getBuffer(false)); - - const report = { - community_id: filekey, - filekey: "unknown", - type: "FRAME", - name: frame.name, - id: fid, - width, - height, - image_a: image_a_rel, - image_b: image_b_rel, - reported_at: new Date().toISOString(), - diff: { - hitmap: diff_file, - percent: diff.rawMisMatchPercentage, - }, - engine: { - name: "@codetest/codegen", - version: "2023.0.0.1", - framework: "preview", - }, - }; - - // wrie report.json - await fs.writeFile(report_file, JSON.stringify(report, null, 2)); - spinner.succeed(`report file for ${fid} ➡ ${report_file}`); - } catch (e) { - // could be codegen error - spinner.fail(`error on ${fid} : ${e.message}`); - logger.log("error", e); + const result = await reportNode({ + filekey, + node: frame, + out: coverage_node_path, + exports, + client, + ssworker, + }); + + if (result.report) { + spinner.succeed(`report file for ${frame.id} ➡ ${report_file}`); + } else if (result.error) { + spinner.fail(`error on ${frame.id} : ${result.error}`); + } else { + spinner.fail(); } } @@ -302,8 +345,6 @@ export async function report(options: GenerateReportOptions) { if (files.length === 0) { await fs.rmdir(coverage_set_path); } - - console.info(""); } // cleaup diff --git a/yarn.lock b/yarn.lock index 6b6e585b..a53bea6e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -20201,6 +20201,11 @@ p-map@^4.0.0: dependencies: aggregate-error "^3.0.0" +p-map@^6.0.0: + version "6.0.0" + resolved "https://registry.yarnpkg.com/p-map/-/p-map-6.0.0.tgz#4d9c40d3171632f86c47601b709f4b4acd70fed4" + integrity sha512-T8BatKGY+k5rU+Q/GTYgrEf2r4xRMevAN5mtXc2aPc4rS1j3s+vWTaO2Wag94neXuCAUAs8cxBL9EeB5EA6diw== + p-pipe@^3.1.0: version "3.1.0" resolved "https://registry.npmjs.org/p-pipe/-/p-pipe-3.1.0.tgz" From ee6c4942f6e9765866e47d55aea6523e1795c603 Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Tue, 20 Jun 2023 08:37:31 +0900 Subject: [PATCH 14/35] split file report --- testing/report/src/report.ts | 225 ++++++++++++++++++++++------------- 1 file changed, 143 insertions(+), 82 deletions(-) diff --git a/testing/report/src/report.ts b/testing/report/src/report.ts index 095f9331..45b83a3a 100644 --- a/testing/report/src/report.ts +++ b/testing/report/src/report.ts @@ -1,3 +1,4 @@ +import os from "os"; import fs from "fs/promises"; import path from "path"; import assert from "assert"; @@ -8,7 +9,7 @@ import { mapper } from "@design-sdk/figma-remote"; import { convert } from "@design-sdk/figma-node-conversion"; import { Client as ClientFS } from "@figma-api/community/fs"; import { Client as ClientS3 } from "@figma-api/community"; -import type { Frame } from "@design-sdk/figma-remote-types"; +import type { Document, Frame } from "@design-sdk/figma-remote-types"; import { htmlcss } from "@codetest/codegen"; import { Worker as ScreenshotWorker } from "@codetest/screenshot"; import { resemble } from "@codetest/diffview"; @@ -25,6 +26,8 @@ import { exists } from "./utils/exists"; const CI = process.env.CI; +setupCache(axios); + type ClientInterface = | ReturnType | ReturnType; @@ -50,8 +53,6 @@ const logger = winston.createLogger({ ], }); -setupCache(axios); - const mkdir = async (path: string) => !(await exists(path)) && (await fs.mkdir(path)); @@ -62,6 +63,13 @@ const noconsole = () => { console.error = () => {}; }; +async function cleanIfDirectoryEmpty(dir: string) { + const items = await fs.readdir(dir); + if (items.length === 0) { + await fs.rmdir(dir); + } +} + function setImageRepository(filekey: string) { // TODO: @@ -200,15 +208,135 @@ async function reportNode({ } } -function reportFile() { +async function reportFile({ + fileinfo, + client, + ssworker, + out, + config, + metadata, +}: { + fileinfo: { + id: string; + name: string; + }; + out: string; + config: ReportConfig; + client: ClientInterface; + ssworker: ScreenshotWorker; + metadata: { + index: number; + sampleSize: number; + }; +}) { + const { id: filekey } = fileinfo; + + const file = await getFile(client, filekey); + if (!file) { + return; + } + + await mkdir(out); + + const frames: ReadonlyArray = filterFrames(file.document); + + const exports = await exporedNodesMap( + client, + filekey, + ...frames.map((f) => f.id) + ); + + if (!exports) { + return; + } + + let ii = 0; + for (const frame of frames) { + ii++; + + const spinner = ora({ + text: `[${metadata.index}/${metadata.sampleSize}] Running coverage for ${fileinfo.id}/${frame.id} (${ii}/${frames.length})`, + isEnabled: !CI, + }).start(); + + // create .coverage/:id/:node folder + const coverage_node_path = path.join(out, frame.id); + await mkdir(coverage_node_path); + + // report.json + const report_file = path.join(coverage_node_path, "report.json"); + if (config.skipIfReportExists) { + if (await exists(report_file)) { + spinner.succeed(`Skipping - report for ${frame.id} already exists`); + continue; + } + } + + const result = await reportNode({ + filekey, + node: frame, + out: coverage_node_path, + exports, + client, + ssworker, + }); + + if (result.report) { + spinner.succeed(`report file for ${frame.id} ➡ ${report_file}`); + } else if (result.error) { + spinner.fail(`error on ${frame.id} : ${result.error}`); + } else { + spinner.fail(); + } + } + + // cleaup + // if the coverage is empty, remove the folder + cleanIfDirectoryEmpty(out); // } +async function exporedNodesMap( + client: ClientInterface, + filekey: string, + ...ids: string[] +) { + try { + return ( + await client.fileImages(filekey, { + ids, + }) + ).data.images; + } catch (e) { + return; + } +} + +async function getFile(client: ClientInterface, filekey: string) { + try { + const { data } = await client.file(filekey); + return data; + } catch (e) { + // file not found + return; + } +} + +function filterFrames(document: Document) { + return document.children + .filter((c) => c.type === "CANVAS") + .map((c) => c["children"]) + .flat() + .filter((c) => c.type === "FRAME"); +} + export async function report(options: GenerateReportOptions) { if (CI) { noconsole(); } + const concurrency = os.cpus().length; + console.info("Starting report"); const cwd = process.cwd(); // read the config @@ -265,86 +393,19 @@ export async function report(options: GenerateReportOptions) { for (const c of samples) { i++; - const { id: filekey } = c; - let file; - let exports: { [key: string]: string }; - try { - const { data } = await client.file(filekey); - file = data; - if (!file) { - continue; - } - } catch (e) { - // file not found - continue; - } - // create .coverage/:id folder const coverage_set_path = path.join(coverage_path, c.id); - await mkdir(coverage_set_path); - - const frames: ReadonlyArray = file.document.children - .filter((c) => c.type === "CANVAS") - .map((c) => c["children"]) - .flat() - .filter((c) => c.type === "FRAME"); - - try { - exports = ( - await client.fileImages(filekey, { - ids: frames.map((f) => f.id), - }) - ).data.images; - } catch (e) { - continue; - } - - let ii = 0; - for (const frame of frames) { - ii++; - - const spinner = ora({ - text: `[${i}/${samples.length}] Running coverage for ${c.id}/${frame.id} (${ii}/${frames.length})`, - isEnabled: !CI, - }).start(); - - // create .coverage/:id/:node folder - const coverage_node_path = path.join(coverage_set_path, frame.id); - await mkdir(coverage_node_path); - - // report.json - const report_file = path.join(coverage_node_path, "report.json"); - if (config.skipIfReportExists) { - if (await exists(report_file)) { - spinner.succeed(`Skipping - report for ${frame.id} already exists`); - continue; - } - } - - const result = await reportNode({ - filekey, - node: frame, - out: coverage_node_path, - exports, - client, - ssworker, - }); - - if (result.report) { - spinner.succeed(`report file for ${frame.id} ➡ ${report_file}`); - } else if (result.error) { - spinner.fail(`error on ${frame.id} : ${result.error}`); - } else { - spinner.fail(); - } - } - - // cleaup - // if the coverage is empty, remove the folder - const files = await fs.readdir(coverage_set_path); - if (files.length === 0) { - await fs.rmdir(coverage_set_path); - } + await reportFile({ + fileinfo: c, + out: coverage_set_path, + config, + client, + ssworker, + metadata: { + index: i, + sampleSize: samples.length, + }, + }); } // cleaup From 9a7ef883335b840835fb41a95f7e6b742fedb175 Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Tue, 20 Jun 2023 09:13:30 +0900 Subject: [PATCH 15/35] add multi page queue support for screenshot worker --- testing/testing-screenshot/index.ts | 94 +++++++++++++++-------------- 1 file changed, 48 insertions(+), 46 deletions(-) diff --git a/testing/testing-screenshot/index.ts b/testing/testing-screenshot/index.ts index a3ddc7d2..9bd0a8fd 100644 --- a/testing/testing-screenshot/index.ts +++ b/testing/testing-screenshot/index.ts @@ -1,3 +1,4 @@ +import os from "os"; import puppeteer, { Browser, Page, PuppeteerLaunchOptions } from "puppeteer"; interface ScreenshotOptions { @@ -10,73 +11,74 @@ interface ScreenshotOptions { export class Worker { private browser: Browser; - private page: Page; - private readonly options; + private pages: Page[] = []; + private pageInUse: boolean[] = []; + private maxPages: number; + private readonly options: PuppeteerLaunchOptions; - constructor({ options }: { options?: PuppeteerLaunchOptions }) { - this.browser = null; - this.page = null; - this.options = options ?? { + constructor( + options: PuppeteerLaunchOptions = {}, + // not the best way to determine max pages, but it's a start + maxPages: number = os.cpus().length * 4 + ) { + this.maxPages = maxPages; + this.options = { headless: "new", args: ["--no-sandbox"], ignoreDefaultArgs: ["--disable-extensions"], + ...options, }; } async launch() { - if (this.browser) { - return this.browser; - } this.browser = await puppeteer.launch(this.options); - this.page = await this.browser.newPage(); - return this.browser; - } - - async relaunch() { - await this.close(); - return this.launch(); + // Open the first page upfront + this.pages.push(await this.browser.newPage()); + this.pageInUse.push(false); } - async screenshot({ htmlcss, viewport }: ScreenshotOptions) { - try { - if (!this.browser || !this.page || this.page.isClosed()) { - await this.relaunch(); + async allocatePage() { + let pageIndex = this.pageInUse.findIndex((inUse) => !inUse); + if (pageIndex === -1) { + if (this.pages.length < this.maxPages) { + const newPage = await this.browser.newPage(); + this.pages.push(newPage); + this.pageInUse.push(true); // The new page will be in use immediately + pageIndex = this.pages.length - 1; + } else { + // Wait for a page to be available + while (pageIndex === -1) { + await new Promise((resolve) => setTimeout(resolve, 100)); // Poll every 100ms + pageIndex = this.pageInUse.findIndex((inUse) => !inUse); + } } - await this.page.setViewport(viewport); - await this.page.setContent(htmlcss, { waitUntil: "networkidle0" }); - const buffer = await this.page.screenshot({ - type: "png", - // support transparency - omitBackground: true, - }); - return buffer; - } catch (error) { - console.log(`Failed to take screenshot: ${error.message}`); - await this.relaunch(); - // After relaunch, retry taking screenshot or rethrow the error - return this.screenshot({ htmlcss, viewport }); } + this.pageInUse[pageIndex] = true; // Mark the page as in use + return this.pages[pageIndex]; } - async close() { - if (this.browser) { - try { - await this.browser.close(); - } catch (e) { - console.log(`Failed to close browser: ${e.message}`); - } - this.browser = null; - this.page = null; - } + async screenshot(options: ScreenshotOptions) { + const page = await this.allocatePage(); + + await page.setViewport(options.viewport); + await page.setContent(options.htmlcss, { waitUntil: "networkidle0" }); + const buffer = await page.screenshot({ + type: "png", + omitBackground: true, + }); + + this.pageInUse[this.pages.indexOf(page)] = false; // Mark the page as no longer in use + return buffer; } - terminate() { - this.close(); + async terminate() { + await Promise.all(this.pages.map((page) => page.close())); + await this.browser.close(); } } export async function screenshot(options: ScreenshotOptions) { - const worker = new Worker({}); + const worker = new Worker(); await worker.launch(); const buffer = await worker.screenshot(options); await worker.terminate(); From b946904121772faabc518768c671f4ea41358eff Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Tue, 20 Jun 2023 09:14:04 +0900 Subject: [PATCH 16/35] faster report generation --- testing/report/src/report.ts | 48 ++++++++++++++++++++---------------- 1 file changed, 27 insertions(+), 21 deletions(-) diff --git a/testing/report/src/report.ts b/testing/report/src/report.ts index 45b83a3a..893fdeb9 100644 --- a/testing/report/src/report.ts +++ b/testing/report/src/report.ts @@ -337,7 +337,6 @@ export async function report(options: GenerateReportOptions) { const concurrency = os.cpus().length; - console.info("Starting report"); const cwd = process.cwd(); // read the config const config: ReportConfig = require(options.config); @@ -359,8 +358,11 @@ export async function report(options: GenerateReportOptions) { // create .coverage folder const coverage_path = config.outDir ?? path.join(cwd, ".coverage"); - console.info(`Loaded ${samples.length} samples`); - console.info(`Configuration used - ${JSON.stringify(config, null, 2)}`); + console.info("Starting report", { + concurrency, + size: samples.length, + config: JSON.stringify(config, null, 2), + }); const { listen: fileserver_start, close: fileserver_close } = config.localarchive @@ -383,30 +385,34 @@ export async function report(options: GenerateReportOptions) { console.info(`serve running at http://localhost:${options.port}/`); } - const ssworker = new ScreenshotWorker({}); + const ssworker = new ScreenshotWorker(); await ssworker.launch(); // setup the dir await mkdir(coverage_path); let i = 0; - for (const c of samples) { - i++; - - // create .coverage/:id folder - const coverage_set_path = path.join(coverage_path, c.id); - await reportFile({ - fileinfo: c, - out: coverage_set_path, - config, - client, - ssworker, - metadata: { - index: i, - sampleSize: samples.length, - }, - }); - } + + await pMap( + samples, + async (c) => { + i++; + // create .coverage/:id folder + const coverage_set_path = path.join(coverage_path, c.id); + await reportFile({ + fileinfo: c, + out: coverage_set_path, + config, + client, + ssworker, + metadata: { + index: i, + sampleSize: samples.length, + }, + }); + }, + { concurrency } + ); // cleaup // terminate puppeteer From efc67891e8af3088e10a4b2e195a98258b394993 Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Tue, 20 Jun 2023 10:11:32 +0900 Subject: [PATCH 17/35] even faster report generation with nested concurrency and direct screenshot saver --- testing/report/src/report.ts | 114 +++++++++++++++++----------- testing/testing-screenshot/index.ts | 17 +++-- 2 files changed, 81 insertions(+), 50 deletions(-) diff --git a/testing/report/src/report.ts b/testing/report/src/report.ts index 893fdeb9..e31efa98 100644 --- a/testing/report/src/report.ts +++ b/testing/report/src/report.ts @@ -2,8 +2,8 @@ import os from "os"; import fs from "fs/promises"; import path from "path"; import assert from "assert"; -import ora from "ora"; import winston from "winston"; +import chalk from "chalk"; import pMap from "p-map"; import { mapper } from "@design-sdk/figma-remote"; import { convert } from "@design-sdk/figma-node-conversion"; @@ -63,6 +63,8 @@ const noconsole = () => { console.error = () => {}; }; +const log = console.info; + async function cleanIfDirectoryEmpty(dir: string) { const items = await fs.readdir(dir); if (items.length === 0) { @@ -156,18 +158,17 @@ async function reportNode({ const html_file = path.join(out, "index.html"); await fs.writeFile(html_file, code); - const screenshot_buffer = await ssworker.screenshot({ + const image_b_rel = "./b.png"; + const image_b = path.join(out, image_b_rel); + await ssworker.screenshot({ htmlcss: code, viewport: { width: Math.round(width), height: Math.round(height), }, + path: image_b, }); - const image_b_rel = "./b.png"; - const image_b = path.join(out, image_b_rel); - await fs.writeFile(image_b, screenshot_buffer); - const diff = await resemble(image_a, image_b); const diff_file = path.join(out, "diff.png"); // write diff.png @@ -215,6 +216,7 @@ async function reportFile({ out, config, metadata, + concurrency = 1, }: { fileinfo: { id: string; @@ -224,6 +226,7 @@ async function reportFile({ config: ReportConfig; client: ClientInterface; ssworker: ScreenshotWorker; + concurrency?: number; metadata: { index: number; sampleSize: number; @@ -250,45 +253,55 @@ async function reportFile({ return; } - let ii = 0; - for (const frame of frames) { - ii++; - - const spinner = ora({ - text: `[${metadata.index}/${metadata.sampleSize}] Running coverage for ${fileinfo.id}/${frame.id} (${ii}/${frames.length})`, - isEnabled: !CI, - }).start(); - - // create .coverage/:id/:node folder - const coverage_node_path = path.join(out, frame.id); - await mkdir(coverage_node_path); - - // report.json - const report_file = path.join(coverage_node_path, "report.json"); - if (config.skipIfReportExists) { - if (await exists(report_file)) { - spinner.succeed(`Skipping - report for ${frame.id} already exists`); - continue; - } - } - - const result = await reportNode({ - filekey, - node: frame, - out: coverage_node_path, - exports, - client, - ssworker, - }); + await pMap( + frames, + async (frame) => { + try { + // create .coverage/:id/:node folder + const coverage_node_path = path.join(out, frame.id); + await mkdir(coverage_node_path); + + // report.json + const report_file = path.join(coverage_node_path, "report.json"); + if (config.skipIfReportExists) { + if (await exists(report_file)) { + log( + chalk.green( + `☑ ${fileinfo.id}/${frame.id} Skipping - report for already exists` + ) + ); + return; + } + } + + const result = await reportNode({ + filekey, + node: frame, + out: coverage_node_path, + exports, + client, + ssworker, + }); - if (result.report) { - spinner.succeed(`report file for ${frame.id} ➡ ${report_file}`); - } else if (result.error) { - spinner.fail(`error on ${frame.id} : ${result.error}`); - } else { - spinner.fail(); - } - } + if (result.report) { + log( + chalk.green( + `☑ ${fileinfo.id}/${frame.id} Reported ➡ ${report_file}` + ) + ); + } else if (result.error) { + log(chalk.red(`☒ ${fileinfo.id}/${frame.id} Error: ${result.error}`)); + } else { + log(chalk.red(`☒ ${fileinfo.id}/${frame.id} Unknown Error`)); + } + } catch (e) { + log( + chalk.red(`☒ ${fileinfo.id}/${frame.id} System Error: ${e.message}}`) + ); + } + }, + { concurrency } + ); // cleaup // if the coverage is empty, remove the folder @@ -335,6 +348,8 @@ export async function report(options: GenerateReportOptions) { noconsole(); } + const starttime = Date.now(); + const concurrency = os.cpus().length; const cwd = process.cwd(); @@ -409,9 +424,10 @@ export async function report(options: GenerateReportOptions) { index: i, sampleSize: samples.length, }, + concurrency: concurrency, }); }, - { concurrency } + { concurrency: concurrency } ); // cleaup @@ -422,4 +438,12 @@ export async function report(options: GenerateReportOptions) { if (config.localarchive) { await fileserver_close(); } + + const endtime = Date.now(); + + log( + chalk.bgGreen( + `✓ Done in ${(endtime - starttime) / 1000}s. Coverage at ${coverage_path}` + ) + ); } diff --git a/testing/testing-screenshot/index.ts b/testing/testing-screenshot/index.ts index 9bd0a8fd..3ca68f34 100644 --- a/testing/testing-screenshot/index.ts +++ b/testing/testing-screenshot/index.ts @@ -7,6 +7,7 @@ interface ScreenshotOptions { width: number; height: number; }; + path?: string; } export class Worker { @@ -19,7 +20,7 @@ export class Worker { constructor( options: PuppeteerLaunchOptions = {}, // not the best way to determine max pages, but it's a start - maxPages: number = os.cpus().length * 4 + maxPages: number = os.cpus().length * 8 ) { this.maxPages = maxPages; this.options = { @@ -32,9 +33,10 @@ export class Worker { async launch() { this.browser = await puppeteer.launch(this.options); - // Open the first page upfront - this.pages.push(await this.browser.newPage()); - this.pageInUse.push(false); + (await this.browser.pages()).forEach((page) => { + this.pages.push(page); + this.pageInUse.push(false); + }); } async allocatePage() { @@ -65,9 +67,14 @@ export class Worker { const buffer = await page.screenshot({ type: "png", omitBackground: true, + path: options.path, + }); + + // clear the page after use + page.setContent("", { timeout: 1000 }).finally(() => { + this.pageInUse[this.pages.indexOf(page)] = false; // Mark the page as no longer in use }); - this.pageInUse[this.pages.indexOf(page)] = false; // Mark the page as no longer in use return buffer; } From a5906d6d64af1029c56ff5aaafc55c841f8d99b2 Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Tue, 20 Jun 2023 10:40:26 +0900 Subject: [PATCH 18/35] improved logging & concurrency adjustment --- testing/report/src/report.ts | 26 ++++++++++++-------------- 1 file changed, 12 insertions(+), 14 deletions(-) diff --git a/testing/report/src/report.ts b/testing/report/src/report.ts index e31efa98..dd59e04b 100644 --- a/testing/report/src/report.ts +++ b/testing/report/src/report.ts @@ -256,6 +256,8 @@ async function reportFile({ await pMap( frames, async (frame) => { + const logsuffix = fixStr(`${fileinfo.id}/${frame.id}`, 32); + try { // create .coverage/:id/:node folder const coverage_node_path = path.join(out, frame.id); @@ -266,9 +268,7 @@ async function reportFile({ if (config.skipIfReportExists) { if (await exists(report_file)) { log( - chalk.green( - `☑ ${fileinfo.id}/${frame.id} Skipping - report for already exists` - ) + chalk.green(`☑ ${logsuffix} Skipping - report for already exists`) ); return; } @@ -284,20 +284,14 @@ async function reportFile({ }); if (result.report) { - log( - chalk.green( - `☑ ${fileinfo.id}/${frame.id} Reported ➡ ${report_file}` - ) - ); + log(chalk.green(`☑ ${logsuffix} Reported ➡ ${report_file}`)); } else if (result.error) { - log(chalk.red(`☒ ${fileinfo.id}/${frame.id} Error: ${result.error}`)); + log(chalk.red(`☒ ${logsuffix} Error: ${result.error}`)); } else { - log(chalk.red(`☒ ${fileinfo.id}/${frame.id} Unknown Error`)); + log(chalk.red(`☒ ${logsuffix} Unknown Error`)); } } catch (e) { - log( - chalk.red(`☒ ${fileinfo.id}/${frame.id} System Error: ${e.message}}`) - ); + log(chalk.red(`☒ ${logsuffix} System Error: ${e.message}}`)); } }, { concurrency } @@ -427,7 +421,7 @@ export async function report(options: GenerateReportOptions) { concurrency: concurrency, }); }, - { concurrency: concurrency } + { concurrency: 4 } ); // cleaup @@ -447,3 +441,7 @@ export async function report(options: GenerateReportOptions) { ) ); } + +function fixStr(str, n = 80) { + return str.length > n ? str.substring(0, n) : str.padEnd(n); +} From 2f04d10632153b7d3ab8646186376f98714da5e9 Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Tue, 20 Jun 2023 10:40:36 +0900 Subject: [PATCH 19/35] action steps split --- .github/workflows/codetest-report.yml | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/.github/workflows/codetest-report.yml b/.github/workflows/codetest-report.yml index 6b07f9b8..7d1a30bb 100644 --- a/.github/workflows/codetest-report.yml +++ b/.github/workflows/codetest-report.yml @@ -10,10 +10,12 @@ jobs: steps: - uses: actions/checkout@v2 - uses: actions/setup-node@v2 - - name: build report tools + - name: setup run: | yarn --frozen-lockfile - cd testing/report + - name: build report tools + working-directory: testing/report + run: | yarn build - name: run report run: | From 88a43e5d8fac950070924104493b053506cdc391 Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Wed, 21 Jun 2023 01:46:15 +0900 Subject: [PATCH 20/35] split files --- testing/report/src/client.ts | 58 ++++++++ testing/report/src/config.ts | 9 ++ testing/report/src/report-frame.ts | 223 ++++++++++++++++++++++++++++ testing/report/src/report.ts | 209 +++----------------------- testing/testing-screenshot/index.ts | 2 +- 5 files changed, 312 insertions(+), 189 deletions(-) create mode 100644 testing/report/src/client.ts create mode 100644 testing/report/src/config.ts create mode 100644 testing/report/src/report-frame.ts diff --git a/testing/report/src/client.ts b/testing/report/src/client.ts new file mode 100644 index 00000000..3741b848 --- /dev/null +++ b/testing/report/src/client.ts @@ -0,0 +1,58 @@ +import { Client as ClientFS } from "@figma-api/community/fs"; +import { Client as ClientS3 } from "@figma-api/community"; +import { ReportConfig } from "./config"; +import type { FileResponse } from "@design-sdk/figma-remote-types"; + +type ClientInterface = + | ReturnType + | ReturnType; + +export class Client { + private readonly client: ClientInterface; + constructor(local?: { paths: ReportConfig["localarchive"]; port: number }) { + this.client = local + ? ClientFS({ + paths: { + files: local.paths.files, + images: local.paths.images, + }, + baseURL: `http://localhost:${local.port}`, + }) + : ClientS3(); + } + + async getFile(filekey: string) { + try { + const { data } = await this.client.file(filekey); + return data; + } catch (e) { + // file not found + return; + } + } + + async getFiles( + ...filekeys: string[] + ): Promise<{ [key: string]: FileResponse }> { + // Fetch all files concurrently and await the result array + const results = await Promise.all( + filekeys.map((filekey) => this.getFile(filekey)) + ); + + // Construct a new map from the filekeys and the result array + return filekeys.reduce((map, key, index) => { + return { + ...map, + [key]: results[index], + }; + }, {}); + } + // + get fileImages() { + return this.client.fileImages; + } + + get fileImageFills() { + return this.client.fileImageFills; + } +} diff --git a/testing/report/src/config.ts b/testing/report/src/config.ts new file mode 100644 index 00000000..284974c0 --- /dev/null +++ b/testing/report/src/config.ts @@ -0,0 +1,9 @@ +export interface ReportConfig { + sample: string; + outDir?: string; + localarchive?: { + files: string; + images: string; + }; + skipIfReportExists?: boolean; +} diff --git a/testing/report/src/report-frame.ts b/testing/report/src/report-frame.ts new file mode 100644 index 00000000..ef18d876 --- /dev/null +++ b/testing/report/src/report-frame.ts @@ -0,0 +1,223 @@ +import fs from "fs/promises"; +import path from "path"; +import { Worker as ScreenshotWorker } from "@codetest/screenshot"; +import type { + FileImageResponse, + FileImageFillsResponse, + Frame, +} from "@design-sdk/figma-remote-types"; +import { htmlcss } from "@codetest/codegen"; +import { resemble } from "@codetest/diffview"; +import { Client } from "./client"; +import { mapper } from "@design-sdk/figma-remote"; +import { convert } from "@design-sdk/figma-node-conversion"; +import { + ImageRepository, + MainImageRepository, +} from "@design-sdk/asset-repository"; +import { RemoteImageRepositories } from "@design-sdk/figma-remote/asset-repository"; +import { sync } from "./utils/sync"; +import { exists } from "./utils/exists"; +import winston from "winston"; + +const logger = winston.createLogger({ + transports: [ + new winston.transports.File({ filename: "code.log", level: "error" }), + ], +}); + +function cvt(node: Frame, filekey: string) { + const _mapped = mapper.mapFigmaRemoteToFigma(node); + const _converted = convert.intoReflectNode(_mapped, null, "rest", filekey); + return _converted; +} + +function setImageRepository(filekey: string) { + // TODO: + + MainImageRepository.instance = new RemoteImageRepositories(filekey, {}); + MainImageRepository.instance.register( + new ImageRepository( + "fill-later-assets", + "grida://assets-reservation/images/" + ) + ); +} + +export class FrameReporter { + readonly filekey: string; + readonly out: string; + readonly node: Frame; + readonly client: Client; + readonly ssworker: ScreenshotWorker; + readonly exported: string; + + get reportFilePath() { + return path.join(this.out, "report.json"); + } + + get htmlFilePath() { + return path.join(this.out, "report.html"); + } + + get aPath() { + return path.join(this.out, "a.png"); + } + + get bPath() { + return path.join(this.out, "b.png"); + } + + get diffPath() { + return path.join(this.out, "diff.png"); + } + + get width() { + return this.node.size.x; + } + + get height() { + return this.node.size.y; + } + + get fid() { + return this.node.id; + } + + constructor({ + node, + filekey, + out, + client, + ssworker, + exported, + }: { + node: Frame; + filekey: string; + out: string; + client: Client; + ssworker: ScreenshotWorker; + exported: string; + }) { + this.node = node; + this.filekey = filekey; + this.out = out; + this.client = client; + this.ssworker = ssworker; + this.exported = exported; + } + + async code() { + setImageRepository(this.filekey); + return await htmlcss( + { + id: this.fid, + name: this.node.name, + entry: cvt(this.node, this.filekey), + }, + async ({ keys, hashes }) => { + const assets = await Promise.all([ + this.client.fileImages(this.filekey, { + ids: keys, + }), + this.client.fileImageFills(this.filekey), + ]); + + const [exports, images] = assets.map((a) => a.data); + + const map = { + ...(exports as FileImageResponse).images, + ...(images as FileImageFillsResponse).meta.images, + }; + + return map; + } + ); + } + + async report() { + try { + try { + await this.syncA(); + } catch (e) { + return { + error: e.message, + }; + } + + const code = await this.code(); + // write index.html + await fs.writeFile(this.htmlFilePath, code); + + // screenshot + await this.ss(code, this.bPath); + + // diff + const diff = await this.diff(); + + const report = { + community_id: this.filekey, + filekey: "unknown", + type: "FRAME", + name: this.node.name, + id: this.fid, + width: this.width, + height: this.height, + image_a: "./a.png", + image_b: "./b.png", + reported_at: new Date().toISOString(), + diff: { + hitmap: "./diff.png", + percent: diff.rawMisMatchPercentage, + }, + engine: { + name: "@codetest/codegen", + version: "2023.0.0.1", + framework: "preview", + }, + }; + + // wrie report.json + await fs.writeFile(this.reportFilePath, JSON.stringify(report, null, 2)); + + return { report }; + } catch (e) { + logger.log("error", e); + console.info(e); + return { + error: e.message, + }; + } + } + + async ss(code: string, path: string) { + await this.ssworker.screenshot({ + htmlcss: code, + viewport: { + width: Math.round(this.width), + height: Math.round(this.height), + }, + path: path, + }); + } + + async diff() { + const diff = await resemble(this.aPath, this.bPath); + const diff_file = path.join(this.out, "diff.png"); + // write diff.png + await fs.writeFile(diff_file, diff.getBuffer(false)); + + return diff; + } + + async syncA() { + // image A (original) + + await sync(this.exported, this.aPath); + if (!(await exists(this.aPath))) { + throw new Error( + `Image A not found - ${this.aPath} from (${this.exported})` + ); + } + } +} diff --git a/testing/report/src/report.ts b/testing/report/src/report.ts index dd59e04b..a91ac3db 100644 --- a/testing/report/src/report.ts +++ b/testing/report/src/report.ts @@ -5,48 +5,25 @@ import assert from "assert"; import winston from "winston"; import chalk from "chalk"; import pMap from "p-map"; -import { mapper } from "@design-sdk/figma-remote"; -import { convert } from "@design-sdk/figma-node-conversion"; -import { Client as ClientFS } from "@figma-api/community/fs"; -import { Client as ClientS3 } from "@figma-api/community"; import type { Document, Frame } from "@design-sdk/figma-remote-types"; -import { htmlcss } from "@codetest/codegen"; import { Worker as ScreenshotWorker } from "@codetest/screenshot"; -import { resemble } from "@codetest/diffview"; import axios from "axios"; import { setupCache } from "axios-cache-interceptor"; -import { - ImageRepository, - MainImageRepository, -} from "@design-sdk/asset-repository"; -import { RemoteImageRepositories } from "@design-sdk/figma-remote/asset-repository"; import { fsserver } from "./serve"; -import { sync } from "./utils/sync"; import { exists } from "./utils/exists"; +import { ReportConfig } from "./config"; +import { Client } from "./client"; +import { FrameReporter } from "./report-frame"; const CI = process.env.CI; setupCache(axios); -type ClientInterface = - | ReturnType - | ReturnType; - export interface GenerateReportOptions { port: number; config: string; } -interface ReportConfig { - sample: string; - outDir?: string; - localarchive?: { - files: string; - images: string; - }; - skipIfReportExists?: boolean; -} - const logger = winston.createLogger({ transports: [ new winston.transports.File({ filename: "error.log", level: "error" }), @@ -72,143 +49,6 @@ async function cleanIfDirectoryEmpty(dir: string) { } } -function setImageRepository(filekey: string) { - // TODO: - - MainImageRepository.instance = new RemoteImageRepositories(filekey, {}); - MainImageRepository.instance.register( - new ImageRepository( - "fill-later-assets", - "grida://assets-reservation/images/" - ) - ); -} - -async function reportNode({ - node, - filekey, - out, - client, - ssworker, - exports, -}: { - node: Frame; - filekey: string; - out: string; - client: ClientInterface; - ssworker: ScreenshotWorker; - exports: Record; -}) { - const report_file = path.join(out, "report.json"); - - const { x: width, y: height } = node.size; - const { id: fid } = node; - - const _mapped = mapper.mapFigmaRemoteToFigma(node); - const _converted = convert.intoReflectNode(_mapped, null, "rest", filekey); - - setImageRepository(filekey); - - try { - // image A (original) - const exported = exports[fid]; - const image_a_rel = "./a.png"; - const image_a = path.join(out, image_a_rel); - - await sync(exported, image_a); - - if (!(await exists(image_a))) { - return { - error: `Image A not found - ${image_a} from (${exported})`, - }; - } - - // codegen - const code = await htmlcss( - { - id: fid, - name: node.name, - entry: _converted, - }, - async ({ keys, hashes }) => { - const { data: exports } = await client.fileImages(filekey, { - ids: keys, - }); - - const { data: images } = await client.fileImageFills(filekey); - - const map = { - ...exports.images, - ...images.meta.images, - }; - - // transform the path for local file url - return Object.keys(map).reduce((acc, key) => { - const path = map[key]; - const url = path.startsWith("http") ? path : `file://${path}`; - return { - ...acc, - [key]: url, - }; - }, {}); - } - ); - - // write index.html - const html_file = path.join(out, "index.html"); - await fs.writeFile(html_file, code); - - const image_b_rel = "./b.png"; - const image_b = path.join(out, image_b_rel); - await ssworker.screenshot({ - htmlcss: code, - viewport: { - width: Math.round(width), - height: Math.round(height), - }, - path: image_b, - }); - - const diff = await resemble(image_a, image_b); - const diff_file = path.join(out, "diff.png"); - // write diff.png - await fs.writeFile(diff_file, diff.getBuffer(false)); - - const report = { - community_id: filekey, - filekey: "unknown", - type: "FRAME", - name: node.name, - id: fid, - width, - height, - image_a: image_a_rel, - image_b: image_b_rel, - reported_at: new Date().toISOString(), - diff: { - hitmap: diff_file, - percent: diff.rawMisMatchPercentage, - }, - engine: { - name: "@codetest/codegen", - version: "2023.0.0.1", - framework: "preview", - }, - }; - - // wrie report.json - await fs.writeFile(report_file, JSON.stringify(report, null, 2)); - - return { report }; - } catch (e) { - logger.log("error", e); - console.info(e); - return { - error: e.message, - }; - } -} - async function reportFile({ fileinfo, client, @@ -224,7 +64,7 @@ async function reportFile({ }; out: string; config: ReportConfig; - client: ClientInterface; + client: Client; ssworker: ScreenshotWorker; concurrency?: number; metadata: { @@ -234,7 +74,7 @@ async function reportFile({ }) { const { id: filekey } = fileinfo; - const file = await getFile(client, filekey); + const file = await client.getFile(filekey); if (!file) { return; } @@ -273,16 +113,17 @@ async function reportFile({ return; } } - - const result = await reportNode({ + const reporter = new FrameReporter({ filekey, node: frame, out: coverage_node_path, - exports, + exported: exports[frame.id], client, ssworker, }); + const result = await reporter.report(); + if (result.report) { log(chalk.green(`☑ ${logsuffix} Reported ➡ ${report_file}`)); } else if (result.error) { @@ -304,7 +145,7 @@ async function reportFile({ } async function exporedNodesMap( - client: ClientInterface, + client: Client, filekey: string, ...ids: string[] ) { @@ -319,15 +160,11 @@ async function exporedNodesMap( } } -async function getFile(client: ClientInterface, filekey: string) { - try { - const { data } = await client.file(filekey); - return data; - } catch (e) { - // file not found - return; - } -} +// files fetcher process +// once file is fetched, extract target nodes and put it to node queue +// +// downloader process +// screenshot process function filterFrames(document: Document) { return document.children @@ -378,15 +215,11 @@ export async function report(options: GenerateReportOptions) { ? fsserver(config.localarchive.images) : { listen: () => {}, close: () => {} }; - const client = config.localarchive - ? ClientFS({ - paths: { - files: config.localarchive.files, - images: config.localarchive.images, - }, - baseURL: `http://localhost:${options.port}`, - }) - : ClientS3(); + const client = new Client( + config.localarchive + ? { paths: config.localarchive, port: options.port } + : null + ); if (config.localarchive) { // Start the server @@ -421,7 +254,7 @@ export async function report(options: GenerateReportOptions) { concurrency: concurrency, }); }, - { concurrency: 4 } + { concurrency: 1 } ); // cleaup diff --git a/testing/testing-screenshot/index.ts b/testing/testing-screenshot/index.ts index 3ca68f34..a9103847 100644 --- a/testing/testing-screenshot/index.ts +++ b/testing/testing-screenshot/index.ts @@ -20,7 +20,7 @@ export class Worker { constructor( options: PuppeteerLaunchOptions = {}, // not the best way to determine max pages, but it's a start - maxPages: number = os.cpus().length * 8 + maxPages: number = os.cpus().length * 4 ) { this.maxPages = maxPages; this.options = { From cc940380e55a6803501db5d5c23ee2d23b910833 Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Wed, 21 Jun 2023 02:11:56 +0900 Subject: [PATCH 21/35] split --- testing/report/src/report-frame.ts | 3 ++- testing/report/src/report.ts | 13 ++----------- testing/report/src/utils/padstr.ts | 3 +++ 3 files changed, 7 insertions(+), 12 deletions(-) create mode 100644 testing/report/src/utils/padstr.ts diff --git a/testing/report/src/report-frame.ts b/testing/report/src/report-frame.ts index ef18d876..b4ed92a6 100644 --- a/testing/report/src/report-frame.ts +++ b/testing/report/src/report-frame.ts @@ -33,7 +33,8 @@ function cvt(node: Frame, filekey: string) { } function setImageRepository(filekey: string) { - // TODO: + // FIXME: - using global instance is very dangerous since we are running on multiple threads. + // Somehow, for some reason, this approach is still valid - because we are using custom resolver. MainImageRepository.instance = new RemoteImageRepositories(filekey, {}); MainImageRepository.instance.register( diff --git a/testing/report/src/report.ts b/testing/report/src/report.ts index a91ac3db..a7a67bd2 100644 --- a/testing/report/src/report.ts +++ b/testing/report/src/report.ts @@ -11,6 +11,7 @@ import axios from "axios"; import { setupCache } from "axios-cache-interceptor"; import { fsserver } from "./serve"; import { exists } from "./utils/exists"; +import { pad } from "./utils/padstr"; import { ReportConfig } from "./config"; import { Client } from "./client"; import { FrameReporter } from "./report-frame"; @@ -96,7 +97,7 @@ async function reportFile({ await pMap( frames, async (frame) => { - const logsuffix = fixStr(`${fileinfo.id}/${frame.id}`, 32); + const logsuffix = pad(`${fileinfo.id}/${frame.id}`, 32); try { // create .coverage/:id/:node folder @@ -160,12 +161,6 @@ async function exporedNodesMap( } } -// files fetcher process -// once file is fetched, extract target nodes and put it to node queue -// -// downloader process -// screenshot process - function filterFrames(document: Document) { return document.children .filter((c) => c.type === "CANVAS") @@ -274,7 +269,3 @@ export async function report(options: GenerateReportOptions) { ) ); } - -function fixStr(str, n = 80) { - return str.length > n ? str.substring(0, n) : str.padEnd(n); -} diff --git a/testing/report/src/utils/padstr.ts b/testing/report/src/utils/padstr.ts new file mode 100644 index 00000000..d2da23cc --- /dev/null +++ b/testing/report/src/utils/padstr.ts @@ -0,0 +1,3 @@ +export function pad(str, n = 80) { + return str.length > n ? str.substring(0, n) : str.padEnd(n); +} From c496ea8441718c18502a873da0b411f8e4ed909a Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Thu, 22 Jun 2023 01:17:50 +0900 Subject: [PATCH 22/35] adjust pupeteer concurrency and performance benchmark test --- testing/testing-screenshot/index.ts | 2 +- .../tests/pupeteer-performance.js | 111 ++++++++++++++++++ 2 files changed, 112 insertions(+), 1 deletion(-) create mode 100644 testing/testing-screenshot/tests/pupeteer-performance.js diff --git a/testing/testing-screenshot/index.ts b/testing/testing-screenshot/index.ts index a9103847..74366e22 100644 --- a/testing/testing-screenshot/index.ts +++ b/testing/testing-screenshot/index.ts @@ -20,7 +20,7 @@ export class Worker { constructor( options: PuppeteerLaunchOptions = {}, // not the best way to determine max pages, but it's a start - maxPages: number = os.cpus().length * 4 + maxPages: number = os.cpus().length * 2 ) { this.maxPages = maxPages; this.options = { diff --git a/testing/testing-screenshot/tests/pupeteer-performance.js b/testing/testing-screenshot/tests/pupeteer-performance.js new file mode 100644 index 00000000..3ced51a5 --- /dev/null +++ b/testing/testing-screenshot/tests/pupeteer-performance.js @@ -0,0 +1,111 @@ +const puppeteer = require("puppeteer"); +const tmp = require("tmp"); +const path = require("path"); + +const url = "https://example.com"; // Replace with your test URL + +const takeScreenshot = async (page, filename) => { + await page.goto(url); + await page.screenshot({ path: filename }); +}; + +const measureConcurrency = async (concurrency, tmpDir) => { + const browser = await puppeteer.launch({ headless: "new" }); + const pages = await Promise.all( + Array(concurrency) + .fill() + .map(() => browser.newPage()) + ); + + const start = Date.now(); + + const promises = pages.map((page, i) => + takeScreenshot( + page, + path.join(tmpDir, `screenshot_${concurrency}_${i}.png`) + ) + ); + + await Promise.all(promises); + + const duration = Date.now() - start; + const averageDuration = duration / concurrency; + + await browser.close(); + + return averageDuration; +}; + +const testConcurrencies = async (tmpDir) => { + let concurrency = 1; + let lastAverageDuration = Infinity; + let optimalConcurrency; + let optimalAverageDuration = Infinity; + + let increaseCount = 0; + const maxIncreases = 5; // Number of increases to allow before stopping + + while (true) { + const averageDuration = await measureConcurrency(concurrency, tmpDir); + console.log( + `Tested concurrency ${concurrency}: ${Math.ceil( + averageDuration + )}ms per page` + ); + + if (averageDuration < optimalAverageDuration) { + optimalConcurrency = concurrency; + optimalAverageDuration = averageDuration; + } + + // If average duration per page starts increasing, increment the counter + if (averageDuration > lastAverageDuration) { + increaseCount++; + } + + // Stop if we've seen increases in average duration maxIncreases times + if (increaseCount >= maxIncreases) { + break; + } + + lastAverageDuration = averageDuration; + concurrency++; + } + + console.log( + `Optimal concurrency for this run is ${optimalConcurrency}: ${Math.ceil( + optimalAverageDuration + )}ms per page` + ); + + return optimalConcurrency; +}; + +async function test() { + const testRuns = 5; // Number of times to run the entire test + const optimalConcurrencies = []; + + for (let i = 0; i < testRuns; i++) { + console.log(`Running test ${i + 1} of ${testRuns}`); + const tmpDir = tmp.dirSync({ unsafeCleanup: true }); // Create a new temporary directory + optimalConcurrencies.push(await testConcurrencies(tmpDir.name)); + tmpDir.removeCallback(); // Clean up the temporary directory + } + + const counts = optimalConcurrencies.reduce((acc, concurrency) => { + acc[concurrency] = (acc[concurrency] || 0) + 1; + return acc; + }, {}); + + const mostCommonConcurrency = Object.keys(counts).reduce((a, b) => + counts[a] > counts[b] ? a : b + ); + + console.log( + `Most commonly observed optimal concurrency is ${mostCommonConcurrency}` + ); +} + +if (require.main === module) { + test(); +} From 376ba3bd821221969a686ed99d6fc8b66ba5b533 Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Thu, 22 Jun 2023 01:18:31 +0900 Subject: [PATCH 23/35] add multiple workers for better performance --- testing/report/package.json | 2 + testing/report/src/report.ts | 235 ++++++++++++++-------------------- testing/report/src/samples.ts | 94 ++++++++++++++ yarn.lock | 38 ++++++ 4 files changed, 231 insertions(+), 138 deletions(-) create mode 100644 testing/report/src/samples.ts diff --git a/testing/report/package.json b/testing/report/package.json index 4c1ae59d..efec199f 100644 --- a/testing/report/package.json +++ b/testing/report/package.json @@ -9,6 +9,7 @@ "report": "node dist/index.js" }, "devDependencies": { + "@types/better-queue": "^3.8.3", "@types/node": "^20.2.5", "@types/serve-handler": "^6.1.1", "@types/yargs": "^17.0.24", @@ -21,6 +22,7 @@ "dependencies": { "@figma-api/community": "^0.0.7", "axios-cache-interceptor": "^1.1.1", + "better-queue": "^3.8.12", "minimist": "^1.2.8", "ora": "^5.4.0", "p-map": "^6.0.0", diff --git a/testing/report/src/report.ts b/testing/report/src/report.ts index a7a67bd2..f9cad7c9 100644 --- a/testing/report/src/report.ts +++ b/testing/report/src/report.ts @@ -4,8 +4,6 @@ import path from "path"; import assert from "assert"; import winston from "winston"; import chalk from "chalk"; -import pMap from "p-map"; -import type { Document, Frame } from "@design-sdk/figma-remote-types"; import { Worker as ScreenshotWorker } from "@codetest/screenshot"; import axios from "axios"; import { setupCache } from "axios-cache-interceptor"; @@ -15,6 +13,8 @@ import { pad } from "./utils/padstr"; import { ReportConfig } from "./config"; import { Client } from "./client"; import { FrameReporter } from "./report-frame"; +import Queue from "better-queue"; +import { SamplesResolver, Task } from "./samples"; const CI = process.env.CI; @@ -32,7 +32,10 @@ const logger = winston.createLogger({ }); const mkdir = async (path: string) => - !(await exists(path)) && (await fs.mkdir(path)); + !(await exists(path)) && + (await fs.mkdir(path, { + recursive: true, + })); const noconsole = () => { // disable logging @@ -43,130 +46,89 @@ const noconsole = () => { const log = console.info; -async function cleanIfDirectoryEmpty(dir: string) { - const items = await fs.readdir(dir); - if (items.length === 0) { - await fs.rmdir(dir); +class ReportsHandler { + public tasks: Queue; + + constructor( + readonly config: ReportConfig, + readonly out: string, + readonly client: Client, + readonly ssworker: ScreenshotWorker, + readonly timeout: number, + readonly concurrency: number + ) { + this.tasks = new Queue( + (task: Task, cb: () => void) => this.handle(task, cb), + { concurrent: concurrency, maxTimeout: timeout } + ); + // prevent from starting + this.tasks.pause(); } -} - -async function reportFile({ - fileinfo, - client, - ssworker, - out, - config, - metadata, - concurrency = 1, -}: { - fileinfo: { - id: string; - name: string; - }; - out: string; - config: ReportConfig; - client: Client; - ssworker: ScreenshotWorker; - concurrency?: number; - metadata: { - index: number; - sampleSize: number; - }; -}) { - const { id: filekey } = fileinfo; - - const file = await client.getFile(filekey); - if (!file) { - return; - } - - await mkdir(out); - const frames: ReadonlyArray = filterFrames(file.document); + async handle(task: Task, cb: () => void) { + if (task === null) { + // end-of-data token + console.log("End of data token received, no more tasks to process"); + console.log("Closed reporter"); + return; + } + + const { filekey, node, a } = task; + + const logsuffix = pad(`${filekey}/${node.id}`, 32); + + try { + // create .coverage/:id/:node folder + const coverage_node_path = path.join(this.out, filekey, node.id); + await mkdir(coverage_node_path); + + // report.json + const report_file = path.join(coverage_node_path, "report.json"); + if (this.config.skipIfReportExists) { + if (await exists(report_file)) { + log( + chalk.green(`☑ ${logsuffix} Skipping - report for already exists`) + ); + return; + } + } - const exports = await exporedNodesMap( - client, - filekey, - ...frames.map((f) => f.id) - ); + const reporter = new FrameReporter({ + filekey: filekey, + node: node, + out: coverage_node_path, + exported: a, + client: this.client, + ssworker: this.ssworker, + }); - if (!exports) { - return; - } + const result = await reporter.report(); - await pMap( - frames, - async (frame) => { - const logsuffix = pad(`${fileinfo.id}/${frame.id}`, 32); - - try { - // create .coverage/:id/:node folder - const coverage_node_path = path.join(out, frame.id); - await mkdir(coverage_node_path); - - // report.json - const report_file = path.join(coverage_node_path, "report.json"); - if (config.skipIfReportExists) { - if (await exists(report_file)) { - log( - chalk.green(`☑ ${logsuffix} Skipping - report for already exists`) - ); - return; - } - } - const reporter = new FrameReporter({ - filekey, - node: frame, - out: coverage_node_path, - exported: exports[frame.id], - client, - ssworker, - }); - - const result = await reporter.report(); - - if (result.report) { - log(chalk.green(`☑ ${logsuffix} Reported ➡ ${report_file}`)); - } else if (result.error) { - log(chalk.red(`☒ ${logsuffix} Error: ${result.error}`)); - } else { - log(chalk.red(`☒ ${logsuffix} Unknown Error`)); - } - } catch (e) { - log(chalk.red(`☒ ${logsuffix} System Error: ${e.message}}`)); + if (result.report) { + log(chalk.green(`☑ ${logsuffix} Reported ➡ ${report_file}`)); + } else if (result.error) { + log(chalk.red(`☒ ${logsuffix} Error: ${result.error}`)); + } else { + log(chalk.red(`☒ ${logsuffix} Unknown Error`)); } - }, - { concurrency } - ); + } catch (e) { + log(chalk.red(`☒ ${logsuffix} System Error: ${e.message}}`)); + } - // cleaup - // if the coverage is empty, remove the folder - cleanIfDirectoryEmpty(out); - // -} + cb(); + } -async function exporedNodesMap( - client: Client, - filekey: string, - ...ids: string[] -) { - try { - return ( - await client.fileImages(filekey, { - ids, - }) - ).data.images; - } catch (e) { - return; + async start() { + this.tasks.resume(); } -} -function filterFrames(document: Document) { - return document.children - .filter((c) => c.type === "CANVAS") - .map((c) => c["children"]) - .flat() - .filter((c) => c.type === "FRAME"); + async join() { + return new Promise((resolve) => { + this.tasks.on("drain", () => { + resolve(); + }); + }); + } } export async function report(options: GenerateReportOptions) { @@ -222,36 +184,33 @@ export async function report(options: GenerateReportOptions) { console.info(`serve running at http://localhost:${options.port}/`); } - const ssworker = new ScreenshotWorker(); + const ssworker = new ScreenshotWorker({}, 20); await ssworker.launch(); // setup the dir await mkdir(coverage_path); - let i = 0; + const reportHandler = new ReportsHandler( + config, + coverage_path, + client, + ssworker, + 60 * 1000, + concurrency + ); - await pMap( + const samplesResolver = new SamplesResolver( samples, - async (c) => { - i++; - // create .coverage/:id folder - const coverage_set_path = path.join(coverage_path, c.id); - await reportFile({ - fileinfo: c, - out: coverage_set_path, - config, - client, - ssworker, - metadata: { - index: i, - sampleSize: samples.length, - }, - concurrency: concurrency, - }); - }, - { concurrency: 1 } + client, + reportHandler.tasks, + concurrency * 8 ); + samplesResolver.start(); + reportHandler.start(); + + await reportHandler.join(); + // cleaup // terminate puppeteer await ssworker.terminate(); diff --git a/testing/report/src/samples.ts b/testing/report/src/samples.ts new file mode 100644 index 00000000..6ea7c7a8 --- /dev/null +++ b/testing/report/src/samples.ts @@ -0,0 +1,94 @@ +// files fetcher process +// once file is fetched, extract target nodes and put it to node queue +// +// downloader process +// screenshot process + +import Queue from "better-queue"; +import pMap from "p-map"; +import { Client } from "./client"; +import type { Document, Frame } from "@design-sdk/figma-remote-types"; + +export interface Task { + filekey: string; + node: Frame; + a: string; +} + +function filterFrames(document: Document) { + return document.children + .filter((c) => c.type === "CANVAS") + .map((c) => c["children"]) + .flat() + .filter((c) => c.type === "FRAME"); +} + +async function exporedNodesMap( + client: Client, + filekey: string, + ...ids: string[] +) { + try { + return ( + await client.fileImages(filekey, { + ids, + }) + ).data.images; + } catch (e) { + return; + } +} + +export class SamplesResolver { + constructor( + readonly samples: { id: string }[], + readonly client: Client, + readonly outqueue: Queue, + readonly concurrency: number + ) {} + + async resolve(sample: { id: string }) { + const { id: filekey } = sample; + try { + const file = await this.client.getFile(filekey); + if (!file) { + return; + } + + const frames: ReadonlyArray = filterFrames(file.document); + + const exports = await exporedNodesMap( + this.client, + filekey, + ...frames.map((f) => f.id) + ); + + return frames.map((frame) => { + const task: Task = { + filekey, + node: frame, + a: exports[frame.id], + }; + return task; + }); + } catch (e) { + return; + } + } + + async start() { + // wait 10 seconds before starting + await new Promise((resolve) => setTimeout(resolve, 10000)); + await pMap( + this.samples, + async (sample) => { + const tasks = await this.resolve(sample); + tasks?.filter(Boolean)?.forEach((task) => { + this.outqueue.push(task); + }); + }, + { concurrency: this.concurrency } // Set as needed + ); + this.outqueue.push(null); // end-of-data token + } +} diff --git a/yarn.lock b/yarn.lock index a53bea6e..13b97767 100644 --- a/yarn.lock +++ b/yarn.lock @@ -8747,6 +8747,13 @@ resolved "https://registry.npmjs.org/@types/base16/-/base16-1.0.2.tgz" integrity sha512-oYO/U4VD1DavwrKuCSQWdLG+5K22SLPem2OQaHmFcQuwHoVeGC+JGVRji2MUqZUAIQZHEonOeVfAX09hYiLsdg== +"@types/better-queue@^3.8.3": + version "3.8.3" + resolved "https://registry.yarnpkg.com/@types/better-queue/-/better-queue-3.8.3.tgz#69dd8ba158749749df0cb48ef05ab4d62145575a" + integrity sha512-xCWSF5i1CJMq271mGjK4MrAzIEFNFKVv/eMtL8eUyD4rOOcx1SBs2zhcQxVkWjCz2TVMQOUUxwkgWyDDyvw+rw== + dependencies: + "@types/node" "*" + "@types/body-parser@*": version "1.19.2" resolved "https://registry.npmjs.org/@types/body-parser/-/body-parser-1.19.2.tgz" @@ -10700,6 +10707,20 @@ better-opn@^2.1.1: dependencies: open "^7.0.3" +better-queue-memory@^1.0.1: + version "1.0.4" + resolved "https://registry.yarnpkg.com/better-queue-memory/-/better-queue-memory-1.0.4.tgz#f390d6b30bb3b36aaf2ce52b37a483e8a7a81a22" + integrity sha512-SWg5wFIShYffEmJpI6LgbL8/3Dqhku7xI1oEiy6FroP9DbcZlG0ZDjxvPdP9t7hTGW40IpIcC6zVoGT1oxjOuA== + +better-queue@^3.8.12: + version "3.8.12" + resolved "https://registry.yarnpkg.com/better-queue/-/better-queue-3.8.12.tgz#15c18923d0f9778be94f19c3ef2bd85c632d0db3" + integrity sha512-D9KZ+Us+2AyaCz693/9AyjTg0s8hEmkiM/MB3i09cs4MdK1KgTSGJluXRYmOulR69oLZVo2XDFtqsExDt8oiLA== + dependencies: + better-queue-memory "^1.0.1" + node-eta "^0.9.0" + uuid "^9.0.0" + big-integer@^1.6.16, big-integer@^1.6.7: version "1.6.51" resolved "https://registry.npmjs.org/big-integer/-/big-integer-1.6.51.tgz" @@ -13999,6 +14020,13 @@ fastparse@^1.1.2: resolved "https://registry.npmjs.org/fastparse/-/fastparse-1.1.2.tgz" integrity sha512-483XLLxTVIwWK3QTrMGRqUfUpoOs/0hbQrl2oz4J0pAcm3A3bu84wxTFqGqkJzewCLdME38xJLJAxBABfQT8sQ== +fastq@^1.15.0: + version "1.15.0" + resolved "https://registry.yarnpkg.com/fastq/-/fastq-1.15.0.tgz#d04d07c6a2a68fe4599fea8d2e103a937fae6b3a" + integrity sha512-wBrocU2LCXXa+lWBt8RoIRD89Fi8OdABODa/kEnyeyjS5aZO5/GNvI5sEINADqP/h8M29UHTHUb53sUu5Ihqdw== + dependencies: + reusify "^1.0.4" + fastq@^1.6.0: version "1.13.0" resolved "https://registry.npmjs.org/fastq/-/fastq-1.13.0.tgz" @@ -19291,6 +19319,11 @@ node-dir@^0.1.10: dependencies: minimatch "^3.0.2" +node-eta@^0.9.0: + version "0.9.0" + resolved "https://registry.yarnpkg.com/node-eta/-/node-eta-0.9.0.tgz#9fb0b099bcd2a021940e603c64254dc003d9a7a8" + integrity sha512-mTCTZk29tmX1OGfVkPt63H3c3VqXrI2Kvua98S7iUIB/Gbp0MNw05YtUomxQIxnnKMyRIIuY9izPcFixzhSBrA== + node-fetch-npm@^2.0.2: version "2.0.4" resolved "https://registry.npmjs.org/node-fetch-npm/-/node-fetch-npm-2.0.4.tgz" @@ -25178,6 +25211,11 @@ uuid@^3.3.2: resolved "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz" integrity sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A== +uuid@^9.0.0: + version "9.0.0" + resolved "https://registry.yarnpkg.com/uuid/-/uuid-9.0.0.tgz#592f550650024a38ceb0c562f2f6aa435761efb5" + integrity sha512-MXcSTerfPa4uqyzStbRoTgt5XIe3x5+42+q1sDuy3R5MDk66URdLMOZe5aPX/SQd+kuYAh0FdP/pO28IkQyTeg== + uvu@^0.5.0: version "0.5.6" resolved "https://registry.yarnpkg.com/uvu/-/uvu-0.5.6.tgz#2754ca20bcb0bb59b64e9985e84d2e81058502df" From 27acf27ef5fd5d5d551c8b9f61db770b37aec147 Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Wed, 5 Jul 2023 13:30:37 +0900 Subject: [PATCH 24/35] opt --- testing/report/src/bin.ts | 5 +++++ testing/report/src/report-frame.ts | 6 ++++-- 2 files changed, 9 insertions(+), 2 deletions(-) diff --git a/testing/report/src/bin.ts b/testing/report/src/bin.ts index a9b0bfc2..31608942 100644 --- a/testing/report/src/bin.ts +++ b/testing/report/src/bin.ts @@ -23,3 +23,8 @@ const argv = yargs(hideBin(process.argv)) if (require.main === module) { report({ port: argv.port, config: argv.config }); } + +process.on("unhandledRejection", (reason, promise) => { + console.info("Unhandled Rejection at:", promise, "reason:", reason); + process.exit(1); +}); diff --git a/testing/report/src/report-frame.ts b/testing/report/src/report-frame.ts index b4ed92a6..ee0ed2d9 100644 --- a/testing/report/src/report-frame.ts +++ b/testing/report/src/report-frame.ts @@ -138,15 +138,17 @@ export class FrameReporter { async report() { try { + let code: string; try { - await this.syncA(); + // sync the 'a' image and generate the code at the same time. + const comparisons = Promise.all([this.syncA(), this.code()]); + code = (await comparisons)[1]; } catch (e) { return { error: e.message, }; } - const code = await this.code(); // write index.html await fs.writeFile(this.htmlFilePath, code); From cb5648eef0f673204c852a107a1ef5c6963f8dab Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Wed, 5 Jul 2023 13:30:56 +0900 Subject: [PATCH 25/35] update samples --- ci/report/.gitignore | 2 +- ci/report/report.config.js | 2 +- ci/report/{sample.json => samples-10.json} | 0 ci/report/samples-50.json | 52 ++++++++++++++++++++++ 4 files changed, 54 insertions(+), 2 deletions(-) rename ci/report/{sample.json => samples-10.json} (100%) create mode 100644 ci/report/samples-50.json diff --git a/ci/report/.gitignore b/ci/report/.gitignore index c5cb1afa..f84149b9 100644 --- a/ci/report/.gitignore +++ b/ci/report/.gitignore @@ -1 +1 @@ -.coverage \ No newline at end of file +.coverage* \ No newline at end of file diff --git a/ci/report/report.config.js b/ci/report/report.config.js index 5711d37c..0fed0e7d 100644 --- a/ci/report/report.config.js +++ b/ci/report/report.config.js @@ -1,7 +1,7 @@ const path = require("path"); module.exports = { - sample: path.join(__dirname, "sample.json"), + sample: path.join(__dirname, "samples-10.json"), outDir: path.join(__dirname, ".coverage"), skipIfReportExists: false, }; diff --git a/ci/report/sample.json b/ci/report/samples-10.json similarity index 100% rename from ci/report/sample.json rename to ci/report/samples-10.json diff --git a/ci/report/samples-50.json b/ci/report/samples-50.json new file mode 100644 index 00000000..092f56f0 --- /dev/null +++ b/ci/report/samples-50.json @@ -0,0 +1,52 @@ +[ +{"id": "1035203688168086460", "name": "Material 3 Design Kit", "description": "

Introducing Material Design 3

Meet Material Design 3, Material Design’s most personal design system yet. The Material 3 Design Kit provides a comprehensive introduction to the design system, with styles and components to help you get started.


Visualize dynamic color in your UI

The Material 3 Design Kit is built to work with the Material Theme Builder Figma plugin. Select an image or color to visualize dynamic color in your UI.


Looking for icons? Try the Google Icons Library


Suggestions and/or feedback?

Email m3-design-kit-feedback@google.com

Fill out this Google feedback form

or ping us @materialdesign on Twitter.


Changelog


03.28.23 V1.8

Major updates:

⚠ New tonal surfaces and fixed accents are here!

The latest update introduces Surfaces based on tone values, these are no longer read-only overlays. Surfaces 1–5 will remain in the gm3 design kit and material theme builder for current users, but we recommend migrating to new surface tokens as soon as possible.

Fixed accents add a new set of colors that will remain consistent across light and dark themes.

⚠ We added prototyping to components!


Additional updates: 

  • Date Pickers range date text has updated to on-secondary-container color role

Bugs adressed: 

  • Added text styles that were missing on the Search component
  • Fixed padding and constraints on Top App Bar
  • Fixed some small discrepancies in Dialogs


02.09.23 V1.7

Components and Styles Added: 

  • Side Sheets

Updates:

  • a11y update to the Date Picker

Bugs addressed: 

  • Added Absolute Position to Camera Cutout element inside status bar
  • Date Picker day layer names fixed
  • Changed Status Bar and Bottom Handle constraints to scale correctly within Device Frames
  • Nav Drawer - there were text properties set up but not in use, causing component to appear as 'invalid'


12.15.22 V1.6

Components and Styles Added: 

  • Search bar and modal
  • Custom variants for Progress Indicators
  • Avatar imagery with metadata

Updates:

  • Cover art refresh
  • Component properties added to multiple components

Bugs addressed: 

  • Textfields label color
  • Incorrect opacity on disabled filter chip
  • Incorrect Type style on \"Title-large\": from 'regular' to 'medium'
  • Typo on the Body/Large styles page: from 0.15 to 0.5
  • Outline pressed button icon was secondary color, updated to use primary color


10.18.22 V1.5

Huge update 🎉

Components and Styles Added: 

  • Badge
  • Small FABs
  • Progress indicators
  • Checkboxes
  • Tabs
  • Dividers
  • Segmented buttons
  • Bottom sheets 
  • Time pickers
  • Date pickers
  • Sliders
  • Lists
  • Snackbars
  • Navigation drawers (Dark)
  • Outline-variant color role
  • Keyboards added

Bugs addressed: 

  • Removed Top App Bar elevation on scroll
  • Icon buttons now reflect 48dp size for tap target
  • State layers for switches are now color roles and several other bug fixes
  • Fixed minor Text Style issues and deleted excess Text Styles
  • Fixed Nav bar active label color

Updates: 

  • Components updated to have nested new components (ex: badges, dividers)
  • Components updated to include outline-variant color role (ex: outline card)
  • Disabled FABs removed
  • Hex values removed — color roles only
  • Top app bar now leverages 48dp icon buttons
  • Restructured all Chips components
  • Restructured all Fab components
  • Text fields updated w/icon button 
  • Improved several components with auto layout 


07.01.22 V1.4

  • Fixed the switches component 
  • Fixed a bug where the chips were mislabeled
  • Fixed a bug with the surface value of elevated cards and elevated chips
  • Fixed label of on-surface value in dark mode
  • Fixed a bug in navigation bars where the badge was shifting between active and inactive states
  • Updated color role structure


05.11.22 V1.3

  • New Material 3 components, including Icon Buttons, Switches, and Bottom App Bars 
  • Fixed a bug where users would be asked to install Google Sans
  • Fixed a bug where Assistive and Filter chips contained a conflict error


02.14.22 V1.2

  • 🎉Our top request - the design kit now includes Text Fields! 
  • Updated chips to include missing variants
  • Fixed a bug in Dialogs which prevented the component from working correctly


11.10.21 V1.1

  • Updated links under color and typography
  • Added additional color roles under .read-only to allow for state opacity tokens, fixing a bug where some states’ colors would not update when using the Theme Builder plugin.


10.27.21 V1

  • Kit release
", "version_id": "300251", "version": "15", "created_at": "2021-10-27T14:49:52.407Z", "duplicate_count": 304043, "like_count": 12274, "thumbnail_url": "https://s3-alpha.figma.com/hub/file/3248391748/c8266c68-b5d6-4fc2-9fc6-d41b3cc8af6f-cover.png", "redirect_canvas_url": "/community/file/1035203688168086460/canvas", "community_publishers": ["2555098"], "publisher": {"id": "2555098", "profile_handle": "materialdesign", "follower_count": 27922, "following_count": 0, "primary_user_id": "771462962926009319", "name": "Material Design", "img_url": "https://s3-alpha.figma.com/profile/77d92d28-8203-4dbb-9a95-9d81cacbc6ce", "badges": ["figma_partner"]}, "support_contact": "materialdesignteam@gmail.com", "creator": {"id": "771462962926009319", "handle": "Material Design", "img_url": "https://s3-alpha.figma.com/profile/77d92d28-8203-4dbb-9a95-9d81cacbc6ce"}, "tags": ["android", "google", "material", "material design", "mobile", "stickersheet", "system", "ui kit"], "badges": [], "related_content": {"content": ["1164313362327941158", "1215441112935711382", "1199784060037728858"], "types": ["by_creator"]}}, +{"id": "778763161265841481", "name": "Material 2 Design Kit", "description": "

Customize and Create

Material Design's Baseline Design Kit provides all you need to create beautiful apps, complete with components and theming guidance.


Suggestions and/or feedback? Ping us @materialdesign on Twitter.


Changelog

10.27.21

  • This kit is no longer updated by the Material Design team. For the newest iteration of the Material Design Kit, please use the Material 3 Design Kit. For more details about Material Design 3, check out Material.io


08.24.21 V1.3

  • Fixed a bug that prevented users from theming the full kit


07.14.21 V1.2

     Updates:

  • Updated Snackbar
  • Updated Switches
  • Updated Sliders
  • Updated Text Fields
  • Updated Button + Chip elevation
  • Updated Switches


06.28.21 V1.1

     Updates:

  • Added autolayout to components
", "version_id": "69467", "version": "8", "created_at": "2019-11-19T23:26:46.362Z", "duplicate_count": 341590, "like_count": 7721, "thumbnail_url": "https://s3-alpha.figma.com/hub/file/1243826780/733e5f32-55ba-4d02-adf9-54d6e041dcff-cover.png", "redirect_canvas_url": "/community/file/778763161265841481/canvas", "community_publishers": ["2555098"], "publisher": {"id": "2555098", "profile_handle": "materialdesign", "follower_count": 27922, "following_count": 0, "primary_user_id": "771462962926009319", "name": "Material Design", "img_url": "https://s3-alpha.figma.com/profile/77d92d28-8203-4dbb-9a95-9d81cacbc6ce", "badges": ["figma_partner"]}, "support_contact": null, "creator": {"id": "771462962926009319", "handle": "Material Design", "img_url": "https://s3-alpha.figma.com/profile/77d92d28-8203-4dbb-9a95-9d81cacbc6ce"}, "tags": ["android", "google", "material", "mobile", "stickersheet", "system", "ui kit"], "badges": [], "related_content": {"content": ["1035203688168086460", "1164313362327941158", "1215441112935711382"], "types": ["by_creator"]}}, +{"id": "890095002328610853", "name": "SALY - 3D Illustration Pack", "description": "

Collection of high-quality 3D illustrations, hand-crafted and full of personalities. FREE to use for your exploration or personal project.


Over 30 illustrations and will keep updated in the future. Enjoy!


Work Inquiry: talk@hellozea.com


------------------------------


Changelog:


v1.7.3 (23 September 2021):


  • Added 3 more illustrations


v1.6.3 (11 May 2021):


  • Added 1 more illustrations


v1.5.3 (4 May 2021):


  • Added 10 more illustrations, wow!
  • Added my email for work inquiry
  • Minor fix here and there


v1.4.2 (11 January 2021):


  • Happy new year guys!
  • Added 7 more illustrations, wow!
  • Minor fix here and there


v1.3.2 (12 Dec 2020):


  • Added 3 more illustrations
  • Add License Agreement card
  • Add Social Media card


v1.2.1:


  • Fix the thumbnail


v1.2.0:


  • Added 3 more illustrations


v1.1.0:


  • Added 2 more illustrations
  • Minor fix


v1.0.0:


  • Initial release!
", "version_id": "60438", "version": "12", "created_at": "2020-09-22T04:39:45.719Z", "duplicate_count": 213111, "like_count": 7766, "thumbnail_url": "https://s3-alpha.figma.com/hub/file/1151541105/360c7092-f558-420d-b37f-9ff98ef61d7a-cover.png", "redirect_canvas_url": "/community/file/890095002328610853/canvas", "community_publishers": ["2523672"], "publisher": {"id": "2523672", "profile_handle": "zea", "follower_count": 464, "following_count": 6, "primary_user_id": "770168073021644197", "name": "Alzea", "img_url": "https://s3-alpha.figma.com/profile/9bb40d6d-f1d7-433c-b300-d2fe1b13016e", "badges": []}, "support_contact": null, "creator": {"id": "770168073021644197", "handle": "Alzea", "img_url": "https://s3-alpha.figma.com/profile/9bb40d6d-f1d7-433c-b300-d2fe1b13016e"}, "tags": [], "badges": [], "related_content": {"content": [], "types": ["by_creator"]}}, +{"id": "1211752161700087083", "name": "iPadOS 16 UI Kit for Figma", "description": "

About ✨

I'm excited to share this year's iPadOS 16 UI Kit for Figma with the community! This file contains hundreds of components, templates, demos, and everything else needed to help you start designing for iPadOS. Each component uses the latest version of Auto Layout, supports Component Properties, variants, Light and Dark Mode, and much more.


I can't wait to see what you'll create with these components!

", "version_id": "289240", "version": "3", "created_at": "2023-02-26T19:10:28.613Z", "duplicate_count": 1009, "like_count": 256, "thumbnail_url": "https://s3-alpha.figma.com/hub/file/3160180469/45404798-1c5a-46e5-ae29-065bb0ab2b9e-cover.png", "redirect_canvas_url": "/community/file/1211752161700087083/canvas", "community_publishers": ["938"], "publisher": {"id": "938", "profile_handle": "joey", "follower_count": 12182, "following_count": 1, "primary_user_id": "623995712489101040", "name": "Joey Banks", "img_url": "https://s3-alpha.figma.com/profile/a96c6fbe-fc35-48df-a1b7-41511b1695f5", "badges": []}, "support_contact": "support@baselinedesign.io", "creator": {"id": "623995712489101040", "handle": "Joey Banks", "img_url": "https://s3-alpha.figma.com/profile/a96c6fbe-fc35-48df-a1b7-41511b1695f5"}, "tags": ["apple", "appstore", "ios", "ipados", "keyboard", "library", "lockscreen", "message", "safari", "settings"], "badges": [], "related_content": {"content": ["1121065701252736567", "834093248798603357", "984106517828363349"], "types": ["by_creator"]}}, +{"id": "1208110531299974704", "name": "coolicons PRO | 1.320+ Carefully Designed Icons | Duotone, Duocolor, Line Icons", "description": "

coolicons PRO | 1.320+ Carefully Designed Icons


Three Styles: Line, Duotone, Duocolor, organized in Variants!


coolicons PRO is a carefully designed collection of 1.320+ icons with a focus on simplicity and consistency. Perfectly suited for web, application and mobile design.


✨ 1.320+ Icons

coolicons PRO comes in three styles, Duotone, Duocolor, Line Icons, that are empowered by Figma's Variants, allowing you to swap styles effortlessly.


🌈  Full Customization with coolicons PRO

Includes all source icons with live corners, duotone and duocolor icons. Easily change stroke weight or corner radius of any icon.


❤️ Created in Figma, Made for Figma!

All icons respect Figma’s component overrides like stroke and color changes. Crafted pixel precise with a 2px stroke and neatly organized in variants.


✅ 24×24 Grid

Each icon has been carefully crafted with love and attention to detail, ensuring that every icon is visually consistent.


🌚 Choose your Side! Dark or Light?

All three icon styles are also placed separately on their own pages in dark or light themes. Bulk select the icons you want and convert them into components.


Support my work and get coolicons PRO


🌈 Visit coolicons.cool


💛 Made by Kryston Schwarze

", "version_id": "283741", "version": "16", "created_at": "2023-02-16T17:59:56.268Z", "duplicate_count": 704, "like_count": 178, "thumbnail_url": "https://s3-alpha.figma.com/hub/file/3118795253/51085a27-6a7f-496b-a399-49a9406920bd-cover.png", "redirect_canvas_url": "/community/file/1208110531299974704/canvas", "community_publishers": ["684894"], "publisher": {"id": "684894", "profile_handle": "kryston", "follower_count": 356, "following_count": 35, "primary_user_id": "618721935786092171", "name": "Kryston Schwarze", "img_url": "https://s3-alpha.figma.com/profile/e657ec1e-096e-47fc-ac28-10a1b8be0b90", "badges": []}, "support_contact": "kryston.schwarze@gmail.com", "creator": {"id": "618721935786092171", "handle": "Kryston Schwarze", "img_url": "https://s3-alpha.figma.com/profile/e657ec1e-096e-47fc-ac28-10a1b8be0b90"}, "tags": ["assets", "coolicons", "dark", "duocolor", "duotone", "icon libary", "icons", "icon set", "light", "line icons", "variants"], "badges": [], "related_content": {"content": ["800815864899415771", "788675347108478517", "788671198471043636"], "types": ["by_creator"]}}, +{"id": "984106517828363349", "name": "iOS 15 UI Kit for Figma", "description": "

iOS 16 UI Kit for Figma is now available!

figma.com/@joey


About

I'm unbelievably excited to share this year's iOS 15 UI Kit on the Figma Community, where my goal was to include everything one might need to begin designing.


Months of fun, nerdy, creating went into this and every component has been recreated and refactored to now work even better with Figma's Variants and updated Auto Layout features.


If you found this file helpful, I’d love to know. Say hi over on Twitter (I’m @joeyabanks)—please share any bugs or mistakes you find, too! 🙏

", "version_id": "155797", "version": "84", "created_at": "2021-06-08T14:47:57.666Z", "duplicate_count": 211264, "like_count": 7650, "thumbnail_url": "https://s3-alpha.figma.com/hub/file/2007993206/9b5e7117-1d28-4c26-8015-8d027af2e21b-cover.png", "redirect_canvas_url": "/community/file/984106517828363349/canvas", "community_publishers": ["938"], "publisher": {"id": "938", "profile_handle": "joey", "follower_count": 12182, "following_count": 1, "primary_user_id": "623995712489101040", "name": "Joey Banks", "img_url": "https://s3-alpha.figma.com/profile/a96c6fbe-fc35-48df-a1b7-41511b1695f5", "badges": []}, "support_contact": null, "creator": {"id": "623995712489101040", "handle": "Joey Banks", "img_url": "https://s3-alpha.figma.com/profile/a96c6fbe-fc35-48df-a1b7-41511b1695f5"}, "tags": ["apple", "browser", "home screen", "ios", "ios 15", "iphone", "keyboard", "lockscreen", "safari"], "badges": [], "related_content": {"content": ["1121065701252736567", "1211752161700087083", "834093248798603357"], "types": ["by_creator"]}}, +{"id": "1217481301531252836", "name": "Abstract 8K Wallpapers", "description": "

Give life to your your presentations with these handcrafted 8K wallpapers generated from 3D. Not AI, just lots of time moving pixels until I work with my overlords. Made and curated by Meng To.


Growing Library

There are 51 high-res wallpapers in different themes. I will keep adding new wallpapers via updates. Feel free to suggest more versions of your favorite ones!


Zoom in and paste your design on top

Need a presentation for your site & socials that’s beautiful and will complement your designs? Shift+2 any wallpaper, put your UI layouts, buttons, menus, cards on top and share with the world.


Blur the heck out of them to get good colors

Blur the whole thing or just the corners like in this background by using alpha masking. Wallpapers are fun!


Or, just use them

Turn these huge wallpapers into hundreds of viable backgrounds for your phone, desktop and presentations.


Commercial License

You can use these images for your commercial projects.


Updates

  • March 30, 2023: New WWDC 23 Collection (3) and added to iPhone 14 (4).
", "version_id": "301599", "version": "4", "created_at": "2023-03-14T14:36:01.985Z", "duplicate_count": 878, "like_count": 124, "thumbnail_url": "https://s3-alpha.figma.com/hub/file/3259775176/cb37919c-a2fa-4a2b-b4ee-757944160441-cover.png", "redirect_canvas_url": "/community/file/1217481301531252836/canvas", "community_publishers": ["38397"], "publisher": {"id": "38397", "profile_handle": "mengto", "follower_count": 233, "following_count": 4, "primary_user_id": "363355749660579106", "name": "Meng To", "img_url": "https://s3-alpha.figma.com/profile/948ce70c-57b0-4ea0-a257-8290137ba1be", "badges": []}, "support_contact": "shadownessguy@gmail.com", "creator": {"id": "363355749660579106", "handle": "Meng To", "img_url": "https://s3-alpha.figma.com/profile/948ce70c-57b0-4ea0-a257-8290137ba1be"}, "tags": ["3d", "abstract", "background", "wallpaper"], "badges": [], "related_content": {"content": ["1217619565147809091", "1066455834796929496", "1010544184877672084"], "types": ["by_creator"]}}, +{"id": "1217053085715485107", "name": "Medica - Online Doctor Appointment & Consultation App UI Kit", "description": "

Hello GUIs,

I just released a new product.


Medica is a Premium & High Quality UI Kit with All Full Features of Online Doctor Appointment & Consultation App. Medica came with unique style and niche, you can easily edit and customize all elements with design components which can speed up design process for your projects. Everything is integrated with the design system, so you only need to change the color, logo, text, and so on in the design system, then the entire design screen will automatically change.


Medica support for iOS/Android (design system included) and 212 screens which is 100% editable & customizable. Designs are available in Figma. In addition, the design is also equipped with a version of Light & Dark Theme.


Medica is designed in a trendy and modern way, with all layers well organized. Medica is equipped with a design system with hundred of components. The Design System has been equipped with typography, iconography, color styles, components, variants, elements, buttons, input forms, alerts, avatars, checkboxes, chips, grids, toggles, and many others.


In addition, the application design in figma has been designed with fully auto layout, so it is very adaptive if you want to edit, delete, or add some parts. You can also resize the artboard, and the design will be responsive according to the size of the artboard you want. If you are not familiar with auto layout, you can turn it off by right-clicking the layer, and selecting remove auto layout.


Medica UI Kit is suitable for:

  • Online Doctor Appointment App
  • Online Doctor Consultation App
  • Health App
  • Medical App
  • Pharmacy & Medicine App
  • Hospital & Clinic App
  • Healthcare App
  • Articles & Health News App
  • Chatting / MessengerApp


Main App Features:

  • Online Doctor Appointment & Consultation App with Complete Features & Details
  • Search & Filter, Doctor Details, Doctor Rating & Review Features
  • Doctor Consultation Flow with Multiple Payment Methods
  • Doctor Consultation Management (Booking, Reschedule, Cancellation, Leave A Review, & Book Again)
  • Online Consultation with Doctor (Messaging/Live Chat, Voice Call, & Video Call)
  • Consultation History & Saved Consultation Records)
  • Health News & Articles with Bookmark Features
  • Onboarding, Sign up, Sign in, Forgot & Reset Password, Account Setup, Notification, Help Center (FAQ & Customer Support), Profile, Settings, & More


What's Inside:

  • 210+ Ready-made Screens
  • 230+ Components & Variants
  • 65+ Color Styles
  • 25+ Text Styles
  • 700+ Free Icons
  • 100% Auto Layout
  • And much more


Product Highlights:

  • 210+ Screens (iOS/Android Support)
  • 100% Editable & Customizable
  • Compatibility: Figma
  • Light & Dark Theme Included
  • Design System & Hundred of Components
  • Fully Auto Layout
  • Well Organized Layers System
  • Unique, Stylish & Modern
  • Used Google Free Fonts
  • Used Grid System
  • Pixel Perfect Design
  • Global Styleguide
  • Easily Drag & Drop Design


Note: All images/photos in the preview are included 😊

Assets: Unsplash, unDraw, Freepik


---------------------------------------------------------------------------------------------------


Get more awesome products! 👇👇👇

MunirSr


Want to donate?

Buy Me a Coffee: 👇

Buy Me a Coffee


---------------------------------------------------------------------------------------------------


🛈 Additional Information

This product was created and published by MunirSr. If you see someone else selling this product on the website or elsewhere, in any way, it is illegal and violates copyright. Please report it to me. Thank you 😊


---------------------------------------------------------------------------------------------------


Make your project more awesome!

Connect with me: sobakhul.munir527@gmail.com


More you can find me at:

Linkedin | Instagram | Dribbble | Behance | Linktr.ee

", "version_id": "288789", "version": "1", "created_at": "2023-03-13T10:14:27.384Z", "duplicate_count": 1212, "like_count": 130, "thumbnail_url": "https://s3-alpha.figma.com/hub/file/3155990013/ff452531-5b76-427d-a287-d46050ba20b2-cover.png", "redirect_canvas_url": "/community/file/1217053085715485107/canvas", "community_publishers": ["2389308"], "publisher": {"id": "2389308", "profile_handle": "MunirSr", "follower_count": 3639, "following_count": 1, "primary_user_id": "763822967356589666", "name": "Sobakhul Munir Siroj", "img_url": "https://s3-alpha.figma.com/profile/be510c7a-6bfc-4ae7-8098-3887c3553599", "badges": []}, "support_contact": "sobakhul.munir527@gmail.com", "creator": {"id": "763822967356589666", "handle": "Sobakhul Munir Siroj", "img_url": "https://s3-alpha.figma.com/profile/be510c7a-6bfc-4ae7-8098-3887c3553599"}, "tags": ["clinic app", "design system", "doctor app", "doctor appointment app", "doctor consultation app", "free", "health app", "medical app", "medicine app", "mobile", "portfolio", "ui kit"], "badges": [], "related_content": {"content": ["1223314222511062706", "1218823989467855715", "1218605363755606732"], "types": ["by_creator"]}}, +{"id": "1209986153083335158", "name": "UI Prep Design System 7.0", "description": "

⭐️ 5.0 Gumroad rating

Battle-Tested, No Fluff Design System

Jump-start every new project with components and styles you’re confident in. This design system will help you work faster while teaching you best practices along the way!

👉 Learn more at uiprep.com

👉 Preview the full system here

👉 Demo part of the system here


What's included

Purchase includes full UI Prep Design System (light theme)

✅ Latest features! Use auto layout, properties, and variants like a pro

✅ Free updates! Receive all future updates for free

✅ Quick start guide! Tutorial videos to help you customize & use the system asap

✅ Playground! Test area where you can play with 3 sample components


Loved and trusted by solo designers, teams, and students

⭐️ “UI Prep has been instrumental in our agency work. I’m a firm believer in efficiencies and never starting projects from scratch, and UI Prep helps us start at 60% instead of 0%. It’s comprehensive, organized, and very thoughtfully designed. I could not recommend this more.” - Jon Moore, Principal Product Designer at Innovatemap

⭐️ “I would highly recommend this UI Kit! It was a well organized design system with variety of components to select from and simple to get started! The document guides were helpful and the emojis made it feel personal and friendly. This kit has dynamic components and easy to customize my designs. Overall, a great product!” - Jason Lopez, UX/UI Designer at H&R Block

⭐️ “UI Prep's kit is extremely thorough and well-organized. I'm excited about being able to swap instances so easily and utilizing the grid layouts while designing responsively. I highly recommend the kit to any designer that wants to save time and create beautiful, cohesive work.” - Renee Bruhn, Student at Design Lab

⭐️ \"This is a fantastic design system. Best thing on Gumroad!\" - Christopher Yellen, UX/UI Designer at Fidelity

", "version_id": "286637", "version": "7", "created_at": "2023-02-21T22:12:59.347Z", "duplicate_count": 1815, "like_count": 233, "thumbnail_url": "https://s3-alpha.figma.com/hub/file/3142881685/3fc7cb02-b4a9-4156-b854-ea3618a3a22f-cover.png", "redirect_canvas_url": "/community/file/1209986153083335158/canvas", "community_publishers": ["1573407"], "publisher": {"id": "1573407", "profile_handle": "mollyhellmuth", "follower_count": 1437, "following_count": 2, "primary_user_id": "712234545496602821", "name": "Molly Hellmuth", "img_url": "https://s3-alpha.figma.com/profile/97b054c6-33aa-4fe0-9703-ec33b28bbd56", "badges": []}, "support_contact": "molly@quantidesign.io", "creator": {"id": "712234545496602821", "handle": "Molly Hellmuth", "img_url": "https://s3-alpha.figma.com/profile/97b054c6-33aa-4fe0-9703-ec33b28bbd56"}, "tags": ["auto layout", "components", "design system", "library", "light theme", "properties", "responsive", "style guide", "table", "ui kit", "ui prep", "variants"], "badges": [], "related_content": {"content": ["882723790480307828", "888102678933348280", "880199211770085867"], "types": ["by_creator"]}}, +{"id": "1209701993929426029", "name": "❖ Untitled UI – Figma UI kit and design system", "description": "

#1 Design product on Gumroad with 1,300+ ★★★★★ ratings


👉 Check out the 100% free version of Untitled UI


Untitled UI is the largest and best-selling Figma UI kit and design system in the world. Join 50,000+ designers, kickstart any project, save thousands of hours, and level up as a designer.


👉 Learn more at untitledui.com

👉 Preview Untitled UI PRO in Figma and compare us to the competition


Every purchase includes Untitled UI PRO LITE, a premium and lightweight version of the full Untitled UI PRO kit.


👉 Preview Untitled UI PRO LITE in Figma


—————


Save thousands of design hours


Tired of wasting thousands of hours starting from scratch on every project and rebuilding the same components? Untitled UI comes packed full with everything you need to design modern and beautiful UI and websites.


500+ global styles

  • Smart, scalable typography system for any project
  • HUGE practical and accessible color system


10,000+ components and variants

  • Meticulously crafted with 100% Auto Layout 4.0, smart variants, and component properties (new)
  • Updated with the latest Figma features announced at Config 2022
  • Hover and click interactions for faster prototyping (new)
  • We’ve thought of everything you need so you don’t have to – the largest and best Figma UI kit in the world today


420+ ready-to-go desktop and mobile page examples

  • Key focus on examples you'll actually use in real projects - landing pages, common pages, dashboard, and settings pages
  • Mix-and-match sections and variants to design websites and dashboards in minutes


Every purchase includes Untitled UI PRO LITE

  • Untitled UI PRO LITE is a premium and lightweight version of the full Untitled UI PRO kit
  • PRO LITE is 55% lighter, faster, and is designed to include everything you need and nothing you don't


—————


Become a better designer


Are you ready to level up your design workflow? We want to help you complete projects 10x faster, take on more clients, and free up your time to work on more important things. Untitled UI has everything you need.


Every component is meticulously crafted with 100% Auto Layout 4.0, super-smart variants, hover and click interactions, and with accessibility in mind. Swap out variants in seconds, like magic. We’ve thought of everything so you can start designing right away.


—————


Scale is easy, but quality is rare


The most popular Figma UI kits on the market today lack in size, flexibility, or quality — usually all three. Untitled UI was built to solve this. We’ve built this design system to be professional quality, while neutral and flexible enough for any project.


👉 Preview Untitled UI in Figma and compare us to the competition


Seriously, compare us to other UI kits. We even wrote a blog post to make it easy: 24 Best Figma UI Kits and Design Systems


—————


This UI kit is perfect for:


  • Freelance Designers — Deliver high-quality projects faster, take on more clients and increase your income.
  • Design Teams — Get everyone on the same page with a single library. Design faster consistently.
  • Beginners & Students — Learn how professional design systems are built and learn Figma best practices. Master Auto Layout 4.0 and variants faster.
  • Startups — Short on time or budget? Design and prototype faster, with an entire library of ready-to-go components. Save hundreds of hours on that MVP.


—————


What are you waiting for?


Untitled UI is packed full of everything you need to kickstart that awesome project.


👉 Learn more at untitledui.com

👉 Learn what's new on our changelog


—————


Why we created Untitled UI


This project started out of necessity. We tried a bunch of Figma UI kits, but found they lacked in size, flexibility, or quality — usually all three — and we ended up having to remake all the poor-quality components.


We needed an “ultimate starter” kit for new freelance projects and design systems, rather than having to start from scratch each time. We were sick of rebuilding the same common components over and over again... which is not only a waste of time, but the most boring part of the design process.


Untitled UI was built to solve this. We’ve thought of everything you need to design modern and beautiful UI and websites and have wrapped it into one neatly organized package.


You can use this UI kit in unlimited projects. In fact, we designed it this way — to be as neutral, flexible, and scalable as possible to use as a kick-starter for any project.


—————


Any questions?


Check out our Frequently Asked Questions page on our website.


Note: Untitled UI is not affiliated with Figma or Figma's team, nor is it endorsed by Figma.

", "version_id": "300817", "version": "11", "created_at": "2023-02-21T03:23:50.525Z", "duplicate_count": 1793, "like_count": 192, "thumbnail_url": "https://s3-alpha.figma.com/hub/file/3253465680/301b18eb-18d0-42e2-9d5b-d55be3a68d24-cover.png", "redirect_canvas_url": "/community/file/1209701993929426029/canvas", "community_publishers": ["1339065"], "publisher": {"id": "1339065", "profile_handle": "designer", "follower_count": 2924, "following_count": 1, "primary_user_id": "693707883872464537", "name": "Jordan Hughes", "img_url": "https://s3-alpha.figma.com/profile/910a809b-359c-4c9f-9a82-febd85377bbe", "badges": []}, "support_contact": "hi@jordanhughes.co", "creator": {"id": "693707883872464537", "handle": "Jordan Hughes", "img_url": "https://s3-alpha.figma.com/profile/910a809b-359c-4c9f-9a82-febd85377bbe"}, "tags": ["asset library", "design system", "icon library", "icons", "library", "ui kit", "untitled", "untitledui", "untitled ui", "wireframe", "wireframe kit"], "badges": [], "related_content": {"content": ["1020079203222518115", "1209707891179706483", "1114001199549197320"], "types": ["by_creator"]}}, +{"id": "784448220678228461", "name": "Figma auto layout playground", "description": "

Auto Layout lets you create dynamic frames that respond to their content.


With the new updates, you can stretch in any direction, control padding independently, and distribute objects evenly—all in an easier to use interface.


Read more about the evolution of Auto Layout and how we got to where we are today.


Updated with keyboard shortcuts.

", "version_id": "189479", "version": "27", "created_at": "2019-12-05T15:57:10.151Z", "duplicate_count": 197168, "like_count": 8499, "thumbnail_url": "https://s3-alpha.figma.com/hub/file/2289110755/25975e56-1021-4a82-9ad1-443f881aab85-cover.png", "redirect_canvas_url": "/community/file/784448220678228461/canvas", "community_publishers": ["2480257"], "publisher": {"id": "2480257", "profile_handle": "figma", "follower_count": 25680, "following_count": 54, "primary_user_id": "768244674400796816", "name": "Figma", "img_url": "https://s3-alpha.figma.com/profile/c82ecc52-1c47-405d-980b-904ff54c6577", "badges": []}, "support_contact": null, "creator": {"id": "768244674400796816", "handle": "Figma", "img_url": "https://s3-alpha.figma.com/profile/c82ecc52-1c47-405d-980b-904ff54c6577"}, "tags": [], "badges": [], "related_content": {"content": ["1128717174121908164", "921066411285098081", "911187952265027575"], "types": ["by_remixes"]}}, +{"id": "800815864899415771", "name": "coolicons | Free Iconset", "description": "

coolicons | Free Iconset


coolicons is a carefully designed collection of 440+ icons with a focus on simplicity and consistency. Perfectly suited for web, application and mobile design.


Support my work and get coolicons PRO



🚀 Visit coolicons.cool


💾 Visit the Github Project


💙 Created by Kryston Schwarze

😊 If you like, you can buy me a coffee

", "version_id": "284782", "version": "80", "created_at": "2020-01-19T19:56:20.631Z", "duplicate_count": 183699, "like_count": 6015, "thumbnail_url": "https://s3-alpha.figma.com/hub/file/3118841934/1e270003-71d7-49f7-9011-e5a1c1805e01-cover.png", "redirect_canvas_url": "/community/file/800815864899415771/canvas", "community_publishers": ["684894"], "publisher": {"id": "684894", "profile_handle": "kryston", "follower_count": 356, "following_count": 35, "primary_user_id": "618721935786092171", "name": "Kryston Schwarze", "img_url": "https://s3-alpha.figma.com/profile/e657ec1e-096e-47fc-ac28-10a1b8be0b90", "badges": []}, "support_contact": "kryston.schwarze@gmail.com", "creator": {"id": "618721935786092171", "handle": "Kryston Schwarze", "img_url": "https://s3-alpha.figma.com/profile/e657ec1e-096e-47fc-ac28-10a1b8be0b90"}, "tags": ["cool", "free", "icons", "icon set", "mobile", "ui", "ui kit", "ux", "web", "web design"], "badges": [], "related_content": {"content": ["1208110531299974704", "788675347108478517", "788671198471043636"], "types": ["by_creator"]}}, +{"id": "858143367356468985", "name": "iOS 14 UI Kit for Figma", "description": "

iOS 15 is here!

Download my latest file, the iOS 15 UI Kit for Figma Community.


About

I found myself frequently trying to locate many misplaced common iOS/iPadOS system-level interface elements, so decided to build and collect them all in one place.


All of the elements here are named for easy instance-swapping, have constraints applied, and use auto layout where appropriate.


Have suggestions? Let me know! @joeyabanks on Twitter.


Made with lots of 💛.

-Joey

", "version_id": "39160", "version": "77", "created_at": "2020-06-26T00:35:22.309Z", "duplicate_count": 192686, "like_count": 5588, "thumbnail_url": "https://s3-alpha.figma.com/hub/file/908520859/1fe1c6f3-e6c4-4c01-83d1-78296fa91a69-cover.png", "redirect_canvas_url": "/community/file/858143367356468985/canvas", "community_publishers": ["938"], "publisher": {"id": "938", "profile_handle": "joey", "follower_count": 12182, "following_count": 1, "primary_user_id": "623995712489101040", "name": "Joey Banks", "img_url": "https://s3-alpha.figma.com/profile/a96c6fbe-fc35-48df-a1b7-41511b1695f5", "badges": []}, "support_contact": null, "creator": {"id": "623995712489101040", "handle": "Joey Banks", "img_url": "https://s3-alpha.figma.com/profile/a96c6fbe-fc35-48df-a1b7-41511b1695f5"}, "tags": ["14", "alert", "apple", "dark", "emoji", "ios", "iphone", "kit", "light", "mobile", "switch", "ui kit"], "badges": [], "related_content": {"content": ["1121065701252736567", "1211752161700087083", "834093248798603357"], "types": ["by_creator"]}}, +{"id": "1173191692359768703", "name": "500 Vector Hand Drawn", "description": "

Vector Hand Drawn is a collection of hand-crafted vector shapes ready to use. Perfect for adding a handmade touch to your work within seconds! Use for products, marketing, social media graphics, annotating, mood boards, collages, cards, quotes, products, 

and more!


Made with lots of love and attention to the details for your projects. Includes more than 500 individual vector shapes, available in 2 styles (smooth & brush), high-res, customizable stroke¹, and easy to use in any design tools.


What’s included?

  • 566 Smooth and brush styles shapes. all vector!
  • Customizable stroke size¹
  • Ready to use.


License

The License includes unlimited personal and commercial projects. If you need an Extended Commercial License for a team, please get in touch for pricing details.


Kindly note that you may use the files to create artwork such as logos, branding, packaging, etc. However, you may not resell, give away, or include the actual files as part of your end product for sale or in editable format. You may not create derivative works, or resell or sub-license the licensed files in any way that is directly competitive with the original licensed files. If you have any questions about licensing, or would like to inquire a special license, such as a Large Volume Commercial Use License, or an E-Pub License, please get in touch.


Get in touch

↪ Email: sajadabedi@outlook.com

↪ Follow me on Twitter: @sajadabedi



—

1. Stroke sizes are only customizable for Smooth shapes in Figma. In case you need to customize the Brush and Brush Alt, Please get in touch and I will send you the Adobe Illustrator files where you can customize them.

", "version_id": "284124", "version": "5", "created_at": "2022-11-12T09:24:56.301Z", "duplicate_count": 849, "like_count": 279, "thumbnail_url": "https://s3-alpha.figma.com/hub/file/3122446808/bc8affff-841b-44ae-8554-63d9bf592601-cover.png", "redirect_canvas_url": "/community/file/1173191692359768703/canvas", "community_publishers": ["27682"], "publisher": {"id": "27682", "profile_handle": "sajad", "follower_count": 55, "following_count": 19, "primary_user_id": "356258955888311105", "name": "Sajad", "img_url": "https://s3-alpha.figma.com/profile/cc239e78-4894-4130-aece-8ba7b40775ea", "badges": []}, "support_contact": "sajadxabedi@gmail.com", "creator": {"id": "356258955888311105", "handle": "Sajad", "img_url": "https://s3-alpha.figma.com/profile/cc239e78-4894-4130-aece-8ba7b40775ea"}, "tags": ["abstract", "annotation", "arrows", "brush", "drawing", "hand-drawn", "handwritten", "highlight", "icons", "objects", "shapes", "vector"], "badges": [], "related_content": {"content": ["1018477313212753754", "967664403773808206", "1222756511423646439"], "types": ["by_creator", "by_tags"]}}, +{"id": "831698976089873405", "name": "Ant Design Open Source", "description": "", "version_id": "202488", "version": "198", "created_at": "2020-04-14T01:14:48.117Z", "duplicate_count": 123162, "like_count": 6661, "thumbnail_url": "https://s3-alpha.figma.com/hub/file/2403780110/bd68c2c9-90df-4997-9a05-f697585ef9e6-cover.png", "redirect_canvas_url": "/community/file/831698976089873405/canvas", "community_publishers": ["1241"], "publisher": {"id": "1241", "profile_handle": "MrBiscuit", "follower_count": 3976, "following_count": 62, "primary_user_id": "405240457298389341", "name": "Mr.Biscuit", "img_url": "https://s3-alpha.figma.com/profile/e191e8c7-d5c2-4dea-97fe-ed352229e128", "badges": []}, "support_contact": null, "creator": {"id": "405240457298389341", "handle": "Mr.Biscuit", "img_url": "https://s3-alpha.figma.com/profile/e191e8c7-d5c2-4dea-97fe-ed352229e128"}, "tags": ["ados", "ant", "antd", "ant design", "atomic", "components", "design system", "ui kit"], "badges": [], "related_content": {"content": ["1159361577023569082", "1075548076968592561", "1043462750779677742"], "types": ["by_remixes"]}}, +{"id": "878585965681562011", "name": "Material Design Icons", "description": "

Material icons are delightful, beautifully crafted symbols for common actions and items. Download on desktop to use them in your digital products for Android, iOS, and web.


Recommended for use as a team library. All icons are organized in 24px frames and converted into components. All 5 themes are included in this file:


Filled

Outlined

Rounded

Two-tone

Sharp


material.io/resources/icons


Our icons are free for everyone to use. Please don’t try to sell them. Available under Apache license version 2.0


NEW! Update 08.09.2020

fix -- inaccurate names of some icons

fix -- some icons were not components

", "version_id": "11525", "version": "2", "created_at": "2020-08-21T10:26:57.555Z", "duplicate_count": 177935, "like_count": 4622, "thumbnail_url": "https://s3-alpha.figma.com/hub/file/450093333/1c8da3c8-f9e3-49da-a5a1-23744ac8c736-cover.png", "redirect_canvas_url": "/community/file/878585965681562011/canvas", "community_publishers": ["460165"], "publisher": {"id": "460165", "profile_handle": "smrkv", "follower_count": 118, "following_count": 8, "primary_user_id": "572015760274440605", "name": "smrkv", "img_url": "https://s3-alpha.figma.com/profile/21bddb2d-74ce-43b2-9ebe-88000d84daaa", "badges": []}, "support_contact": null, "creator": {"id": "572015760274440605", "handle": "smrkv", "img_url": "https://s3-alpha.figma.com/profile/21bddb2d-74ce-43b2-9ebe-88000d84daaa"}, "tags": ["design", "design system", "google", "icons", "icon set", "kit", "library", "material", "material design", "ui"], "badges": [], "related_content": {"content": ["1215238043409842578", "1041232203418471601", "1062416533290758163"], "types": ["by_remixes"]}}, +{"id": "768365747273056340", "name": "iOS/iPadOS 13 Design UI Kit", "description": "iOS/iPadOS 13 UI Kit\n\nApple UI Design Resources for iOS and iPadOS.\nComprehensive UI resources that depict the full range of controls, views, and glyphs available to developers using the Apple iOS SDK.\n\nThese resources help you design apps that match the iOS design language. Icon and glyph production files are preconfigured to automate asset production using Figma.", "version_id": "606", "version": "10", "created_at": "2019-10-22T06:51:09.696Z", "duplicate_count": 174127, "like_count": 3596, "thumbnail_url": "https://s3-alpha.figma.com/hub/file/200430207/28773041-9331-4641-a323-7119207010e7-cover", "redirect_canvas_url": "/community/file/768365747273056340/canvas", "community_publishers": ["5998"], "publisher": {"id": "5998", "profile_handle": "juanarreguin", "follower_count": 145, "following_count": 6, "primary_user_id": "283707351487349720", "name": "Juan Arreguin", "img_url": "https://s3-alpha.figma.com/profile/75dccd80-659b-4aa8-94d8-c319c56da3d1", "badges": []}, "support_contact": null, "creator": {"id": "283707351487349720", "handle": "Juan Arreguin", "img_url": "https://s3-alpha.figma.com/profile/75dccd80-659b-4aa8-94d8-c319c56da3d1"}, "tags": ["13", "apple", "design system", "ios", "ios13", "ipad", "iphone", "kit", "mobile", "system", "ui", "ui kit"], "badges": [], "related_content": {"content": ["988873972764555714", "1135945397758151839", "1077296325350308947"], "types": ["by_remixes"]}}, +{"id": "1121065701252736567", "name": "iOS 16 UI Kit for Figma", "description": "

Last Updated ⚡️

March 20, 2023


About ✨

Now with Dynamic Island!

I'm beyond excited to share this year's iOS 16 UI Kit for Figma with the community! This file contains hundreds of components, templates, demos, and everything else needed to help you start designing for iOS. Each component has been created with the latest version of Auto Layout, supports Component Properties, variants, Light and Dark Mode, and much more.


Learn More 🎓

Schedule a training

If you're interested in learning more about how this UI kit was created or the best ways to use Figma, I offer 1:1 learning sessions!


Support 🙏

Purchase support & changelog

If this iOS 16 UI Kit was helpful to you or your team, your support would genuinely mean the world to me. With the purchase of this kit, you'll receive everything that's included for free, along with email updates for component updates, changelog notes, and several Loom walkthroughs and demos. 🎬


I can't wait to see what you'll create with it! If you found this file helpful, I'd love to know! Say hi over on Twitter (I'm @joeyabanks).

", "version_id": "296315", "version": "40", "created_at": "2022-06-21T13:14:51.569Z", "duplicate_count": 112981, "like_count": 5448, "thumbnail_url": "https://s3-alpha.figma.com/hub/file/3218164839/69677b32-c7d3-429b-a407-9bd9acf4441a-cover.png", "redirect_canvas_url": "/community/file/1121065701252736567/canvas", "community_publishers": ["938"], "publisher": {"id": "938", "profile_handle": "joey", "follower_count": 12182, "following_count": 1, "primary_user_id": "623995712489101040", "name": "Joey Banks", "img_url": "https://s3-alpha.figma.com/profile/a96c6fbe-fc35-48df-a1b7-41511b1695f5", "badges": []}, "support_contact": "joeybanks23@gmail.com", "creator": {"id": "623995712489101040", "handle": "Joey Banks", "img_url": "https://s3-alpha.figma.com/profile/a96c6fbe-fc35-48df-a1b7-41511b1695f5"}, "tags": ["apple", "calendar", "design system", "dynamic", "ios", "ios 16", "island", "keyboard", "lockscreen", "message", "safari", "ui"], "badges": [], "related_content": {"content": ["1222904741096273952", "1223649906596645010", "1220427486954383059"], "types": ["by_remixes"]}}, +{"id": "1207810684945289418", "name": "Doodles and Scribbles", "description": "

Doodles and Scribbles is a collection of fun, vector illustrations to add some personality to your projects. With over 100 options, there's a ton or possibilities. Keep your eyes peeled for some surprising variants as well!

", "version_id": "284316", "version": "7", "created_at": "2023-02-15T22:08:27.326Z", "duplicate_count": 1418, "like_count": 366, "thumbnail_url": "https://s3-alpha.figma.com/hub/file/3124183786/a5461ce6-c877-4619-8dcb-7e586b9ae992-cover.png", "redirect_canvas_url": "/community/file/1207810684945289418/canvas", "community_publishers": ["2223031"], "publisher": {"id": "2223031", "profile_handle": "Micah", "follower_count": 131, "following_count": 4, "primary_user_id": "755517615186202273", "name": "Micah Lanier", "img_url": "https://s3-alpha.figma.com/profile/9e2237b1-56c0-4e17-981b-391e96bed856", "badges": []}, "support_contact": "studio.micah@gmail.com", "creator": {"id": "755517615186202273", "handle": "Micah Lanier", "img_url": "https://s3-alpha.figma.com/profile/9e2237b1-56c0-4e17-981b-391e96bed856"}, "tags": ["arrows", "blob", "collection", "content reel", "doodles", "illustration", "landing page", "line", "mockup", "resource", "scribble", "vector"], "badges": [], "related_content": {"content": ["849353769466663442", "829741575478342595"], "types": ["by_creator"]}}, +{"id": "1207881392795122938", "name": "50+ Abstract geometric shapes", "description": "

Hello, I’m Yan, nice meeting you! 😊


You might see my “100+ abstract shapes/elements” file before. I hope you find this file is inspirational and helpful.


• All of shapes are made with Figma.

• You can edit any parts to cater to your projects

• You can learn how I made different shapes and effects by applying the color of lights, shadows, layers, and lines in Figma

• You can leverage this resource to create your amazing stuff.


Hope you enjoy it as much as I do ! ❤️

", "version_id": "282631", "version": "3", "created_at": "2023-02-16T02:49:25.390Z", "duplicate_count": 393, "like_count": 173, "thumbnail_url": "https://s3-alpha.figma.com/hub/file/3112712990/0d0da084-c5be-4d56-9216-a4d28ccc6765-cover.png", "redirect_canvas_url": "/community/file/1207881392795122938/canvas", "community_publishers": ["3763610"], "publisher": {"id": "3763610", "profile_handle": "yanliu", "follower_count": 1028, "following_count": 10, "primary_user_id": "823369290152226987", "name": "Yan Liu", "img_url": "https://s3-alpha.figma.com/profile/09e3ec0f-db40-4123-9e3a-84c791f1763f", "badges": []}, "support_contact": "yanliudesignlife@gmail.com", "creator": {"id": "823369290152226987", "handle": "Yan Liu", "img_url": "https://s3-alpha.figma.com/profile/09e3ec0f-db40-4123-9e3a-84c791f1763f"}, "tags": ["abstract", "geometric", "geometric shaps", "graphic design", "shapes", "simple shape", "ui kit", "visual"], "badges": [], "related_content": {"content": ["1127302394641561751", "1112098897788975788", "1097964499926853798"], "types": ["by_creator"]}}, +{"id": "887892609124245416", "name": "Lo-fi Wireframe Kit FREE DEMO", "description": "

To purchase the FULL VERSION, click here: Lo-fi Wireframe Kit ->


Please enjoy this free demo of Lo-fi Wireframe Kit! The free demo includes 5+ unique UI elements, text and color styles, and a preview of everything you get with the full version. 


The full version includes:

  • Over 100 components including buttons, text fields, tabs, dialogs, and multiple variations.
  • Flexible components that work for both mobile and desktop.
  • Robust UI components with several variations and options for fast wireframing.
  • Makes full use of Figma's design features like color styles, text styles, auto layout, constraints, variants, and properties.
  • Easily customize colors and typography.
  • Over 200 icons are included in the library from Feather Icons.
  • Markup components for stickies, annotations, and flow chart lines.


Full version UI element list:

  • Buttons
  • Icon Buttons
  • Button Group
  • Pills (free)
  • Text Elements (free)
  • Text Fields
  • Dropdowns
  • Radio
  • Checkbox
  • Switch
  • Range Slider
  • Lists
  • Accordions (free)
  • Horizontal Tabs
  • Vertical Tabs
  • Mobile Navigation
  • Top App bar
  • Cards
  • Snackbars
  • Banners
  • Dialogs
  • Tooltips
  • Image/media placeholders (free)
  • Tables
  • Loaders
  • Cursors
  • Annotations (free)
  • Flow Lines (free)
  • Devices


Why use Figma?

I've used several standalone wireframing tools before, but I've always come across limitations. It might not have an element I need, prototyping capabilities, or good collaboration. By combining this kit with Figma's native features, you get prototyping, sharing, commenting, and real time collaboration — no more jumping between tools.


Feedback and help

Want to leave feedback? Found a bug? Feel free to email or contact me on Twitter.

", "version_id": "302177", "version": "16", "created_at": "2020-09-16T02:48:14.264Z", "duplicate_count": 166346, "like_count": 3998, "thumbnail_url": "https://s3-alpha.figma.com/hub/file/3263890833/176bace8-3d2d-4e9e-a52d-9a8749de011e-cover.png", "redirect_canvas_url": "/community/file/887892609124245416/canvas", "community_publishers": ["705703"], "publisher": {"id": "705703", "profile_handle": "davewhitley", "follower_count": 125, "following_count": 7, "primary_user_id": "621743905473225657", "name": "Dave Whitley", "img_url": "https://s3-alpha.figma.com/profile/25a37905-8abc-45fe-9919-2ace9a53451e", "badges": []}, "support_contact": "drw158@gmail.com", "creator": {"id": "621743905473225657", "handle": "Dave Whitley", "img_url": "https://s3-alpha.figma.com/profile/25a37905-8abc-45fe-9919-2ace9a53451e"}, "tags": ["desktop", "flow", "kit", "lo fi", "mobile", "mockup", "prototype", "sketch", "ui kit", "ux kit", "wireframe"], "badges": [], "related_content": {"content": ["1138383211797105648", "990412699885509595", "1061734063201026854"], "types": ["by_remixes"]}}, +{"id": "886554014393250663", "name": "Free Icon Pack 1600+ icons", "description": "

>> Donate for corgi’s food <<

", "version_id": "246946", "version": "46", "created_at": "2020-09-12T10:09:08.405Z", "duplicate_count": 182372, "like_count": 3243, "thumbnail_url": "https://s3-alpha.figma.com/hub/file/2823129023/d99085f3-21aa-435e-b105-9b1f52f5fe35-cover.png", "redirect_canvas_url": "/community/file/886554014393250663/canvas", "community_publishers": ["1891080"], "publisher": {"id": "1891080", "profile_handle": "Leonid", "follower_count": 156, "following_count": 3, "primary_user_id": "735205186788041733", "name": "Leonid Tsvetkov", "img_url": "https://s3-alpha.figma.com/profile/38cc0b35-876a-41a1-9c2e-fef716b4fe31", "badges": []}, "support_contact": "ntrtd@ya.ru", "creator": {"id": "735205186788041733", "handle": "Leonid Tsvetkov", "img_url": "https://s3-alpha.figma.com/profile/38cc0b35-876a-41a1-9c2e-fef716b4fe31"}, "tags": ["download", "free", "icon pack", "icons", "icon set", "interface", "set", "ui", "ux", "web"], "badges": [], "related_content": {"content": ["1074955480886541120", "871326473979106389", "929628466119715777"], "types": ["by_creator"]}}, +{"id": "855517047816771255", "name": "Figma Charts & Infographics UI kit", "description": "

Figma chart templates & Graphs UI kit. Contains most common data visualization patterns from simple bar charts, to complicated heatmaps and financial candlesticks.

Preview full version • Get license • Website


", "version_id": "220441", "version": "8", "created_at": "2020-06-18T18:39:18.935Z", "duplicate_count": 141194, "like_count": 3755, "thumbnail_url": "https://s3-alpha.figma.com/hub/file/2577480512/3ad61b77-1c16-486f-848e-cc364dd0f68f-cover.png", "redirect_canvas_url": "/community/file/855517047816771255/canvas", "community_publishers": ["179081"], "publisher": {"id": "179081", "profile_handle": "templates", "follower_count": 3508, "following_count": 0, "primary_user_id": "464443699919434908", "name": "Setproduct", "img_url": "https://s3-alpha.figma.com/profile/7e076460-c319-461c-ab2a-7f675d0c154f", "badges": []}, "support_contact": null, "creator": {"id": "464443699919434908", "handle": "Setproduct", "img_url": "https://s3-alpha.figma.com/profile/7e076460-c319-461c-ab2a-7f675d0c154f"}, "tags": ["app", "chart", "dashboard", "design", "graph", "infographic", "template", "ui", "ui kit", "ux", "web"], "badges": [], "related_content": {"content": ["1179529792420893296", "1083755632649209596", "976950603997167821"], "types": ["by_remixes"]}}, +{"id": "1209707891179706483", "name": "❖ Untitled UI Icons – 4,600+ essential Figma icons", "description": "

#1 icon library on Gumroad with 450+ ★★★★★ ratings


Untitled UI Icons are a clean, consistent, and neutral icon library crafted specifically for modern UI design. Made for Figma, in Figma.


👉 Preview Untitled UI Icons in Figma

👉 Learn more at untitledui.com/icons


🎉 We won Product Hunt #1 Product of the Week. Thanks for the support! 🎉



—————


4,600+ essential Figma UI icons + 4x styles


We searched everywhere for the \"ultimate\" icon set for modern UI design to use across all our projects... We couldn't find an icon library for Figma we loved so we made one.


  • Made for Figma, in Figma. 100% compatible with Figma's latest 2022 component properties and override features. Say goodbye to Illustrator.
  • Crafted specifically for modern UI design. Clean, consistent, and professionally crafted. Purposefully not overly stylized and neutral enough for any project.
  • 4x flexible styles. Choose between minimal line, modern duocolor or duotone, or solid icon styles. Switch styles and maintain icon overrides in Figma like magic.
  • 4,600+ and counting. Packed full with everything you need to design modern and beautiful UI and websites. No more custom icons.
  • Neatly organized + IconJar. The entire library is neatly organized alphabetically across 19 categories. We've also included an IconJar library with super-smart tags for quick search.
  • Smooth corners by default. Untitled UI Icons use beautiful and naturally continuously 60% variable curves on all corners. We stress these tiny details because once you see it, you can't unsee it.
  • 2px stroke weight default. 2px stroke weight by default for visually-balanced icons across sizes. Plus, master icons with live corners are included, so you can tweak corners for your own custom libraries.
  • Optimized SVG output. No unnecessary layers or shapes. SVG outputs are optimized for minimal file size, no unnecessary attributes, and infinite scalability.
  • Use in unlimited projects. In fact, we designed it this way — to be as neutral, flexible, and scalable as possible to use as a single \"ultimate\" library for any project.
  • Lifetime updates. No subscriptions or \"upgrades\". Pay once and get lifetime updates forever. We're always making improvements to Untitled UI products.


—————


Not all icon libraries are equal


There are hundreds of icon libraries, but the majority of them are low-quality, designed for Illustrator, or simply too small — usually all three. We couldn't find an icon library for Figma we loved so we made one.


We’ve built this icon library to be professional quality, while neutral and flexible enough for any project.


—————


What are you waiting for?


Untitled UI Icons is the last icon library you'll need and comes packed full with everything you need to design modern and beautiful UI and websites.


👉 Learn more at untitledui.com/icons

👉 Learn what's new on our changelog


—————


Why do I need a high-quality icon library?


Nothing stands out more in modern UI design than inconsistent icons. There are hundreds of icon libraries floating around the internet today, but the majority of them are low quality, buggy, overly stylized, or simply too small — usually all of these.


You don’t realize the power of a high-quality icon library until you start using one. A good icon library saves you time and money usually spent on meticulously creating icons one-by-one, or even worse, constantly fixing existing icons so they're more consistent and optically balanced.


A good way to frame it is to ask the question, “will this icon library save me a few hours of work in a project?” If the answer is YES, it’s probably worth the investment. Then it becomes an asset you can use in unlimited future projects.


We’ve thought of everything you need for modern UI design and have wrapped it into one neatly organized package. Better yet, it's made for Figma, in Figma, which means they're carefully designed to be 100% compatible with Figma's latest 2022 component properties and override features.


You can use this icon library in unlimited projects. In fact, we designed it this way — Untitled UI Icons are designed to be 100% Figma native, consistent, professional quality, and neutral enough for any UI or web design project.


—————


How are Untitled UI Icons different?


We get it. There are hundreds of icon packs. Why did we create another one?


When we were building Untitled UI, we looked at dozens and dozens of open source and best-selling icon libraries. Some were good, but we found the vast majority lacked in quality, were overly stylized, or simply too small.


The main problem was that not a single one was set up to respect component overrides in Figma. For example, when you use an icon in a component and change the stroke color, as soon as you swap out that icon instance, you'll lose those overrides and have to add the stroke color again. The same goes for fill colors, stroke weights, opacity etc.


We realized we needed an “ultimate” icon library that was professional quality, but also big enough and neutral enough for any project, and designed to work seamlessly with Figma. We couldn't find an icon library we loved so we made one. Untitled UI Icons are made for Figma, in Figma, and tick all the boxes we were looking for. Basically, we made it for ourselves.


—————


Any questions?


Check out our Frequently Asked Questions page on our website.


Note: Untitled UI is not affiliated with Figma or Figma's team, nor is it endorsed by Figma.

", "version_id": "298984", "version": "4", "created_at": "2023-02-21T03:47:16.541Z", "duplicate_count": 689, "like_count": 120, "thumbnail_url": "https://s3-alpha.figma.com/hub/file/3236764040/975326f8-a00b-4888-9cd1-aab4c3bda9c1-cover.png", "redirect_canvas_url": "/community/file/1209707891179706483/canvas", "community_publishers": ["1339065"], "publisher": {"id": "1339065", "profile_handle": "designer", "follower_count": 2924, "following_count": 1, "primary_user_id": "693707883872464537", "name": "Jordan Hughes", "img_url": "https://s3-alpha.figma.com/profile/910a809b-359c-4c9f-9a82-febd85377bbe", "badges": []}, "support_contact": "hi@jordanhughes.co", "creator": {"id": "693707883872464537", "handle": "Jordan Hughes", "img_url": "https://s3-alpha.figma.com/profile/910a809b-359c-4c9f-9a82-febd85377bbe"}, "tags": ["assets", "design system", "free icons", "icon library", "icons", "icon set", "line icons", "streamline", "ui kit", "untitled ui"], "badges": [], "related_content": {"content": ["1020079203222518115", "1209701993929426029", "1114001199549197320"], "types": ["by_creator"]}}, +{"id": "903303571898472063", "name": "Figma Variants Playground", "description": "

Variants are a new way to create, organize, and use components. If you’ve ever created multiple variations of a component, you’ll want to give variants a try. This playground will walk you through everything you need to know to start working with them!

", "version_id": "15017", "version": "12", "created_at": "2020-10-28T15:25:54.096Z", "duplicate_count": 108127, "like_count": 4736, "thumbnail_url": "https://s3-alpha.figma.com/hub/file/537594407/53c4f4dd-f1bf-4392-91df-1df6369a89ed-cover.png", "redirect_canvas_url": "/community/file/903303571898472063/canvas", "community_publishers": ["2480257"], "publisher": {"id": "2480257", "profile_handle": "figma", "follower_count": 25680, "following_count": 54, "primary_user_id": "768244674400796816", "name": "Figma", "img_url": "https://s3-alpha.figma.com/profile/c82ecc52-1c47-405d-980b-904ff54c6577", "badges": []}, "support_contact": null, "creator": {"id": "768244674400796816", "handle": "Figma", "img_url": "https://s3-alpha.figma.com/profile/c82ecc52-1c47-405d-980b-904ff54c6577"}, "tags": ["components", "playground", "variants"], "badges": [], "related_content": {"content": ["1065233457055446010", "966514329878157914", "1220450893350820612"], "types": ["by_remixes"]}}, +{"id": "931906394678748246", "name": "Basil Icons", "description": "

Really big set of icons, perfectly fitting to any design. Black minimalistic shapes are presented in two styles: outline and solid. 500 pieces were gathered in 9 the most used categories to help you in search of what you need.


Explore All Craftwork Products ↗

", "version_id": "117781", "version": "4", "created_at": "2021-01-15T13:43:18.472Z", "duplicate_count": 122313, "like_count": 3988, "thumbnail_url": "https://s3-alpha.figma.com/hub/file/1752518746/a39cb1b6-ce01-4e91-848e-4b0a31ad5f9f-cover.png", "redirect_canvas_url": "/community/file/931906394678748246/canvas", "community_publishers": ["1630"], "publisher": {"id": "1630", "profile_handle": "craftwork", "follower_count": 2004, "following_count": 0, "primary_user_id": null, "name": "Craftwork", "img_url": "https://s3-alpha.figma.com/profile/f3675c72-95ed-446b-bb87-b72c74585252", "badges": []}, "support_contact": null, "creator": {"id": "411812113701066823", "handle": "Denis Shepovalov", "img_url": "https://s3-alpha.figma.com/profile/903bec58-848b-4b96-b38e-384462a551ec"}, "tags": ["design", "glyph", "icons", "minimal", "outline", "pictogram", "set", "shapes", "soild", "vector", "web"], "badges": [], "related_content": {"content": ["1078025791565516324", "1114477110260013470", "1117009397494901135"], "types": ["by_remixes"]}}, +{"id": "836596421863073964", "name": "Mobile UI kit", "description": "Speed up your design workflow and create a beautiful app with Figma’s fully customizable mobile UI kit.", "version_id": "6657", "version": "1", "created_at": "2020-04-27T13:35:30.181Z", "duplicate_count": 163738, "like_count": 2945, "thumbnail_url": "https://s3-alpha.figma.com/hub/file/309380907/da91b3a4-5fbb-4f59-a6ac-1edc7d049c3b-cover", "redirect_canvas_url": "/community/file/836596421863073964/canvas", "community_publishers": ["830496"], "publisher": {"id": "830496", "profile_handle": "tg", "follower_count": 537, "following_count": 27, "primary_user_id": "639491196713802396", "name": "Toni Gemayel", "img_url": "https://s3-alpha.figma.com/profile/3ce255d0-67f1-4da6-a3b7-3631b3cd8e6c", "badges": []}, "support_contact": null, "creator": {"id": "639491196713802396", "handle": "Toni Gemayel", "img_url": "https://s3-alpha.figma.com/profile/3ce255d0-67f1-4da6-a3b7-3631b3cd8e6c"}, "tags": ["kit", "mobile", "ui"], "badges": [], "related_content": {"content": ["1222027401509754471", "1222330127373036647", "1087534826859049236"], "types": ["by_remixes"]}}, +{"id": "775789888359782610", "name": "Device Mockups", "description": "

This file is depreciated and is no longer being actively updated. Please checkout the NEW UPDATED version in Figma Community that includes 43+ new and updated devices, including that latest devices from Apple and Google.


Get the New file ->


---


Nominated as a Community Awards Finalist for the \"Favorite graphic resources for Figma\" category .


---


A complete collection of pixel-perfect device mockups available in Figma. All devices are fully vectorize and infinitely scalable with easily swappable background images.


Includes the following devices:


Apple:

  • iPhone SE
  • iPhone 11 Pro
  • iPhone 12 Mini (New Oct 2020)
  • iPhone 12 Pro (New Oct 2020)
  • iPhone 12 Pro Max (New Oct 2020)
  • iPad 10.5
  • iPad Pro 11
  • Macbook Pro


Google:

  • Google Pixel 2 XL
  • Google Pixel 2
  • Google Pixel 4
  • Google Pixel 4a (New Aug 2020)
  • Google Pixel 5 (New Oct 2020)


Samsung:

  • Samsung Galaxy S20 5G
  • Samsung Galaxy A50
  • Samsung Galaxy Note20 5G (New Aug 2020)
  • Samsung Galaxy Note20 Ultra 5G (New Aug 2020)


OnePlus:

  • OnePlus 7T Pro 5G
  • OnePlus 8 Pro


Sony:

  • Sony Xperia 1 II 6.5 (New Sep 2020)
", "version_id": "284781", "version": "35", "created_at": "2019-11-11T18:32:02.863Z", "duplicate_count": 114607, "like_count": 3996, "thumbnail_url": "https://s3-alpha.figma.com/hub/file/3127246528/14fe2374-67aa-4276-90f3-4095691ff996-cover.png", "redirect_canvas_url": "/community/file/775789888359782610/canvas", "community_publishers": ["32663"], "publisher": {"id": "32663", "profile_handle": "koy", "follower_count": 206, "following_count": 14, "primary_user_id": "959421576083432580", "name": "Koy Carraway", "img_url": "https://s3-alpha.figma.com/profile/f875d840-22db-414d-b54f-9a44c0eb1ab7", "badges": []}, "support_contact": "kcarraway@fleetio.com", "creator": {"id": "363036213616062148", "handle": "Koy Carraway", "img_url": "https://s3-alpha.figma.com/profile/3ad2d4af-a751-4dc3-a469-d354b41bfff7"}, "tags": ["apple", "galaxy", "google", "ipad", "iphone", "iphone 12", "macbook", "mockup", "note20", "oneplus", "pixel", "samsung"], "badges": [], "related_content": {"content": ["1169548836051552164", "1203272401458200840", "1131887180480890075"], "types": ["by_remixes"]}}, +{"id": "1215248354808482218", "name": "central icon system", "description": "

Welcome to the central icon system



✦ What?



A collection of icons that will make your product design easier and faster. With over 581 symbols in 30 variations each, you have more than 17,400 icons at your disposal.


✦ Why?


Our icons are simple and versatile. You can adjust them to fit your brand and style: stroke width, border radius, line or filled version. All variations can be accessed directly through the Figma property panel. Whatever you choose, our icons will look crisp and clean on any device and screen size.


✦ How?


Each icon variation is hand crafted in Figma for Figma to make sure every change of a property corresponds to the icon system. This ensures consistency and quality across the entire set. Our icons are designed on a 24x24 px grid and is based on an enhanced grid system to make sure every icon is consistent to the core.


The central icon system is not just another icon set. It’s a tool that will help you create better products faster.


Made by iconists


www.iconists.co


twitter @iconists


instagram @theiconists


Andreas Storm @avstorm


Martin David @srioz

", "version_id": "302552", "version": "13", "created_at": "2023-03-08T10:43:06.007Z", "duplicate_count": 1145, "like_count": 195, "thumbnail_url": "https://s3-alpha.figma.com/hub/file/3267093841/42ee2790-192f-4d37-a5fa-e27ad6a815fe-cover.png", "redirect_canvas_url": "/community/file/1215248354808482218/canvas", "community_publishers": ["28905", "198724", "1212071983410015861"], "publisher": {"id": "1212071983410015861", "profile_handle": "iconists", "follower_count": 37, "following_count": 2, "primary_user_id": "1212071983206592537", "name": "iconists", "img_url": "https://s3-alpha.figma.com/profile/f063ce70-7ad4-46ec-88d2-fc1dc3ce9022", "badges": []}, "support_contact": "martinoliverdavid@gmail.com", "creator": {"id": "1212071983206592537", "handle": "iconists", "img_url": "https://s3-alpha.figma.com/profile/f063ce70-7ad4-46ec-88d2-fc1dc3ce9022"}, "tags": ["components", "design system", "glyph", "iconography", "icons", "icon set", "icon system", "pictogram", "properties", "symbols", "variants"], "badges": [], "related_content": {"content": ["1071404388941871350", "1085155066176261708", "1218589809425735347"], "types": ["by_tags"]}}, +{"id": "1209371598104774338", "name": "Device Mockups Ultimate Collection", "description": "

🎉 Enjoy 25% OFF for a Limited Time 🎉


---


Introducing the Device Mockups Ultimate Collection - the ultimate resource for designers looking for high-quality device mockups. With over 43+ photo-realistic devices, including phones, tablets, desktops, and monitors, all built with scalable vectors and exact manufacturer specs, your designs will look stunningly accurate. Plus, with a growing library, lifetime access to new devices, fully editable vectors, smart image fills, easy exports, and commercial usage allowed, this Figma resource is a must-have for any designer.


Device List

Mobile Devices (25)

  • Apple iPhone 14 Pro
  • Apple iPhone 14 Pro Max
  • Apple iPhone 14
  • Apple iPhone 13 Pro
  • Apple iPhone 13 Pro Max
  • Apple iPhone 13
  • Apple iPhone 13 Mini
  • Apple iPhone SE
  • Apple iPhone 12 | 12 Pro
  • Apple iPhone 12 Pro Max
  • Apple iPhone 12 Mini
  • Apple iPhone 11 Pro
  • Google Pixel 7 Pro
  • Google Pixel 6 Pro
  • Google Pixel 5
  • Google Pixel 4a
  • Google Pixel 4
  • Google Pixel 2
  • Google Pixel 2XL
  • Samsung Galaxy A50
  • Samsung Galaxy S20 5G
  • Samsung Galaxy Note20 5G
  • Samsung Galaxy Note20 Ultra 5G
  • OnePlus 8 Pro
  • OnePlus 7T Pro 5G
  • Sony Xperia 1 II 6.5


Tablet Devices (10)

  • Apple iPad Air (5th Gen)
  • Apple iPad Mini
  • Apple iPad
  • Apple iPad Pro 11
  • Apple iPad Air 4
  • Google Pixel Slate
  • Samsung Galaxy Tab S7
  • Samsung Galaxy Tab A 8.0
  • Amazon Fire HD 10
  • Microsoft Surface Pro X


Laptops, Desktops, and Monitors (8)

  • Apple iMac 24-inch
  • Apple Studio Display
  • Apple Pro Display XDR
  • Apple MacBook Air M2
  • Apple MacBook Pro 16-inch
  • Apple MacBook Air
  • Apple MacBook Pro 15-inch
  • Google Pixelbook Go


Links & Helpful Resources:

🗺️ Roadmap

📱 Device Requests

🛟 Support & Feedback

📋 Changelog

", "version_id": "292224", "version": "19", "created_at": "2023-02-20T05:30:58.022Z", "duplicate_count": 693, "like_count": 184, "thumbnail_url": "https://s3-alpha.figma.com/hub/file/3185265794/0ec68060-c158-4a13-80c3-dc6336c28260-cover.png", "redirect_canvas_url": "/community/file/1209371598104774338/canvas", "community_publishers": ["32663"], "publisher": {"id": "32663", "profile_handle": "koy", "follower_count": 206, "following_count": 14, "primary_user_id": "959421576083432580", "name": "Koy Carraway", "img_url": "https://s3-alpha.figma.com/profile/f875d840-22db-414d-b54f-9a44c0eb1ab7", "badges": []}, "support_contact": "koycarraway@me.com", "creator": {"id": "959421576083432580", "handle": "Koy Carraway", "img_url": "https://s3-alpha.figma.com/profile/f875d840-22db-414d-b54f-9a44c0eb1ab7"}, "tags": ["app design", "apple", "device", "device frames", "device mockup", "marketing", "mockup", "presentation", "product design", "realistic", "showcase", "vector"], "badges": [], "related_content": {"content": ["775789888359782610", "812721945562507554", "775789656970237137"], "types": ["by_creator"]}}, +{"id": "1216002297485668740", "name": "Taxio - Taxi Booking App UI Kit", "description": "

Hello GUIs,

I just released a new product.


Taxio is a Premium & High Quality UI Kit with All Full Features of Taxi Booking App. Taxio came with unique style and niche, you can easily edit and customize all elements with design components which can speed up design process for your projects. Everything is integrated with the design system, so you only need to change the color, logo, text, and so on in the design system, then the entire design screen will automatically change.


Taxio support for iOS/Android (design system included) and 180 screens which is 100% editable & customizable. Designs are available in Figma. In addition, the design is also equipped with a version of Light & Dark Theme.


Taxio is designed in a trendy and modern way, with all layers well organized. Taxio is equipped with a design system with hundred of components. The Design System has been equipped with typography, iconography, color styles, components, variants, elements, buttons, input forms, alerts, avatars, checkboxes, chips, grids, toggles, and many others.


In addition, the application design in figma has been designed with fully auto layout, so it is very adaptive if you want to edit, delete, or add some parts. If you are not familiar with auto layout, you can turn it off by right-clicking the layer, and selecting remove auto layout.


Taxio UI Kit is suitable for:

  • Online Cab / Taxi Booking App
  • Rideshare App
  • Online Transportation App
  • Online Car Booking
  • Online Booking Service App
  • Messenger App (Chatting & Call)
  • E-Wallet App
  • Map / GPS App


Main App Features:

  • Taxi Booking with GPS & Real Time Driver Tracking
  • Taxi Booking Management (History, Completed, Active, & Cancel Booking Features)
  • Fare Taxi Summary, Driver & Vehicle Details, & Review/Rating Features
  • Secure Multiple Payment Methods & Promo/Special Offers Features
  • In-App Messaging/Chatting Features (Chat & Calls Management)
  • E-Wallet (Top Up, Transaction History, & E-Receipt Features)
  • Onboarding, Sign up, Sign in, Forgot & Reset Password, Account Setup, Notification, Search, Help Center (FAQ & Contact Support), Profile, Settings, & More


What's Inside:

  • 180 Ready-made Screens
  • 220+ Components & Variants
  • 70+ Color Styles
  • 25+ Text Styles
  • 700+ Free Icons
  • 100% Auto Layout
  • And much more


Product Highlights:

  • 180 Screens (iOS/Android Support)
  • 100% Editable & Customizable
  • Compatibility: Figma
  • Light & Dark Theme Included
  • Design System & Hundred of Components
  • Fully Auto Layout
  • Well Organized Layers System
  • Unique, Stylish & Modern
  • Used Google Free Fonts
  • Used Grid System
  • Pixel Perfect Design
  • Global Styleguide
  • Easily Drag & Drop Design


Note: All images/photos in the preview are included 😊

Assets: Unsplash, unDraw, Freepik


---------------------------------------------------------------------------------------------------


Get more awesome products! 👇👇👇

MunirSr


Want to donate?

Buy Me a Coffee: 👇

Buy Me a Coffee


---------------------------------------------------------------------------------------------------


🛈 Additional Information

This product was created and published by MunirSr. If you see someone else selling this product on the website or elsewhere, in any way, it is illegal and violates copyright. Please report it to me. Thank you 😊


---------------------------------------------------------------------------------------------------


Make your project more awesome!

Connect with me: sobakhul.munir527@gmail.com


More you can find me at:

Linkedin | Instagram | Dribbble | Behance | Linktr.ee

", "version_id": "287020", "version": "1", "created_at": "2023-03-10T12:38:59.948Z", "duplicate_count": 571, "like_count": 60, "thumbnail_url": "https://s3-alpha.figma.com/hub/file/3146072207/beaec5ea-5032-45dd-a6c8-f554b48b9ea5-cover.png", "redirect_canvas_url": "/community/file/1216002297485668740/canvas", "community_publishers": ["2389308"], "publisher": {"id": "2389308", "profile_handle": "MunirSr", "follower_count": 3639, "following_count": 1, "primary_user_id": "763822967356589666", "name": "Sobakhul Munir Siroj", "img_url": "https://s3-alpha.figma.com/profile/be510c7a-6bfc-4ae7-8098-3887c3553599", "badges": []}, "support_contact": "sobakhul.munir527@gmail.com", "creator": {"id": "763822967356589666", "handle": "Sobakhul Munir Siroj", "img_url": "https://s3-alpha.figma.com/profile/be510c7a-6bfc-4ae7-8098-3887c3553599"}, "tags": ["cab booking app", "car booking app", "design system", "driver booking app", "free", "mobile", "online transportation app", "portfolio", "rideshare app", "taxi app", "taxi booking app", "ui kit"], "badges": [], "related_content": {"content": ["1223314222511062706", "1218823989467855715", "1218605363755606732"], "types": ["by_creator"]}}, +{"id": "1209167957500972561", "name": "Cosmic Icons - 550 icons with tags", "description": "

📣 Updates!


  • Preview components located on the first page now work correctly - check them out!


-----------------------------


Set of bold and geometric icons ready to make your project neat and clean. Every icon has plenty of tags to help you search the list quickly and find what you need without a hustle. Sounds good to you? Purchase a license for yourself and start using them right away.


What's in it for you? 📦


  • 550 icons in 16 categories made on a 24px grid
  • Every icon has plenty of tags to boost searching
  • Both personal and commercial license
  • Free, life-time updates, even if the price goes up


Try before you buy! 🛒


You can duplicate a free sample (first page of the file) to experiment with a couple of icons and find out if they work for you and your project. After purchase, you will get access to the entire library.


Meet the creator 👨‍🚀


Hey! I'm Daniel, and I have been speaking to you all the time. I hope you will find my icons helpful! Psst... Remember to tell your figmates about it!


Want to chat casually? Find me on LinkedIn

Want to send an official e-mail? Send at d.wodziczka@gmail.com

Want to request an icon? Check our development board

", "version_id": "296526", "version": "12", "created_at": "2023-02-19T16:01:46.319Z", "duplicate_count": 364, "like_count": 114, "thumbnail_url": "https://s3-alpha.figma.com/hub/file/3220109699/6b4d7be0-b8ae-47b5-8227-af098a3ffa35-cover.png", "redirect_canvas_url": "/community/file/1209167957500972561/canvas", "community_publishers": ["852955035141615265"], "publisher": {"id": "852955035141615265", "profile_handle": "wodziczka", "follower_count": 41, "following_count": 16, "primary_user_id": "852955035099402531", "name": "Daniel Wodziczka", "img_url": "https://s3-alpha.figma.com/profile/24e91ffe-4757-4413-a34c-c66dbc5d3c53", "badges": []}, "support_contact": "d.wodziczka@gmail.com", "creator": {"id": "852955035099402531", "handle": "Daniel Wodziczka", "img_url": "https://s3-alpha.figma.com/profile/24e91ffe-4757-4413-a34c-c66dbc5d3c53"}, "tags": ["iconate", "icon bundle", "icon list", "iconly", "iconography", "icon pack", "icons", "icon set", "kit", "library"], "badges": [], "related_content": {"content": ["942053544758339202", "1184089105981266541", "920101630987096609"], "types": ["by_creator"]}}, +{"id": "805195278314519508", "name": "❖ Base Gallery", "description": "Uber's Base design system was created to promote a centralized library of reusable UI components for Designers and Engineers.", "version_id": "287331", "version": "22", "created_at": "2020-01-31T21:58:34.157Z", "duplicate_count": 70179, "like_count": 3794, "thumbnail_url": "https://s3-alpha.figma.com/hub/file/3148211725/5176c453-2166-421a-89ba-175383b78cc4-cover.png", "redirect_canvas_url": "/community/file/805195278314519508/canvas", "community_publishers": ["11", "154994"], "publisher": {"id": "11", "profile_handle": "uber", "follower_count": 6171, "following_count": 0, "primary_user_id": null, "name": "Uber", "img_url": "https://s3-alpha.figma.com/profile/945806be-85b8-425a-9054-3fee73a8f315", "badges": []}, "support_contact": "jjura@uber.com", "creator": {"id": "796482260607165102", "handle": "Anton Chang", "img_url": "https://s3-alpha.figma.com/profile/9975f549-57f3-47d1-b4b2-24ccb2e204bb"}, "tags": ["design system", "uber"], "badges": [], "related_content": {"content": ["1117713433579648873", "1080118111304550979", "1002371580953957519"], "types": ["by_remixes"]}}, +{"id": "883778082594341562", "name": "Free 75+ illustrations - Surface Pack", "description": "

Hey there,

If you haven’t seen our other stuff, well then go check it out here


About

Over 75 free illustrations for your design/product.


As Usual

No attribution is needed.

All vectors and all yours.

Free for commercial use.


Who are we?

We’re a team of designers, artists and innovators with a business eye who help you create great products.


If you want more of the good stuff or need custom illustrations or end to end design solutions for your product reach out to us hey@thetreetop.org or go to our website thetreetop.org.

", "version_id": "47284", "version": "15", "created_at": "2020-09-04T18:18:34.692Z", "duplicate_count": 88493, "like_count": 3736, "thumbnail_url": "https://s3-alpha.figma.com/hub/file/999638089/3e3e3e7f-8982-4cd7-a0a0-64a991d793b0-cover.png", "redirect_canvas_url": "/community/file/883778082594341562/canvas", "community_publishers": ["883306018996947820"], "publisher": {"id": "883306018996947820", "profile_handle": "treetop", "follower_count": 589, "following_count": 0, "primary_user_id": "883306018968769284", "name": "Treetop", "img_url": "https://s3-alpha.figma.com/profile/3b573f22-fb20-4e54-ad19-3c3efd2c4352", "badges": []}, "support_contact": null, "creator": {"id": "883306018968769284", "handle": "Treetop", "img_url": "https://s3-alpha.figma.com/profile/3b573f22-fb20-4e54-ad19-3c3efd2c4352"}, "tags": ["art", "color", "design system", "drawing", "graphic", "icons", "illustration", "mobile design", "ui kit", "vector", "web design", "wireframe"], "badges": [], "related_content": {"content": ["1223364746123203340", "1184671927990073585", "1075690399778279660"], "types": ["by_remixes"]}}, +{"id": "894552273937682724", "name": "Landify - Landing Page UI Kit v2", "description": "

Landify V2 (Free Version)

Create your landing page design faster with the Landify UI kit. The kit contains 170+ blocks and 500+ components. It's fully customisable, with well-organized layers, text, color, and effect styles. It is crafted with a vision to support any web project, creating a block system that helps with all the use cases.


✨ Learn more at landify.design ✨


💡 Idea:

Recently, I received quite a few website design projects from multiple domains with a shorter deadlines. It was challenging to work on it with a short deadline and provide numerous variations to the founders. Then the spark came; why not create a landing page UI kit? So, here it is.


❓ What's Next?

Now, Landify v2 is crafted for all three breakpoints – desktop, tablet, and mobile. The upcoming release will also have a few more blocks and a few new categories.


------------------------------------------


Please share your thoughts if you have suggestions, feedback, or ideas to improve the Landify UI Kit.


💡 Give Feedback | Roadmap


------------------------------------------

V2.1 (01 Jul 2022):


V2.0 (22 Jan 2022):

  • 178 blocks from 15 categories
  • 500+ components
  • 5 ready-to-use sample pages
  • Replaced Bootstrap with the utility classes from Tailwind CSS
  • Organised Figma pages by each category


V1.1 (25 Apr 2021):

  • With variants and auto layout 3.0
  • Organised buttons with variants
  • Font changed to Inter


V1.0 (4 Oct 2020):

  • 90+ Blocks for 13 categories based on the use case
  • 140+ components
  • Well organized Colors, Typography, Styles, and Effects.
  • Easily Customizable to your brand colors/fonts etc.
  • Use of Bootstrap Grid
", "version_id": "207673", "version": "5", "created_at": "2020-10-04T11:51:22.085Z", "duplicate_count": 85650, "like_count": 3316, "thumbnail_url": "https://s3-alpha.figma.com/hub/file/2446788237/8d2223c5-96c4-4498-ba57-c2d29f3e2371-cover.png", "redirect_canvas_url": "/community/file/894552273937682724/canvas", "community_publishers": ["1613479"], "publisher": {"id": "1613479", "profile_handle": "aravinddesign", "follower_count": 158, "following_count": 1, "primary_user_id": "715188871965176077", "name": "Aravind Little Jack", "img_url": "https://s3-alpha.figma.com/profile/82467afc-5898-484e-a1b0-82d67c0b92c3", "badges": []}, "support_contact": null, "creator": {"id": "715188871965176077", "handle": "Aravind Little Jack", "img_url": "https://s3-alpha.figma.com/profile/82467afc-5898-484e-a1b0-82d67c0b92c3"}, "tags": ["components", "design system", "kit", "landify", "landing page", "landing page uikit", "styles", "template", "ui kit", "web", "website", "website ui kit"], "badges": [], "related_content": {"content": ["1101804623897735018", "1182490254812994736", "1137061127714776255"], "types": ["by_remixes"]}}, +{"id": "880534892514982400", "name": "Material Design UI kit - Components library", "description": "

Material Design System for Figma is based on 100% guidelines compliance and contains an impressive amount of ready-to-use components to accelerate the application development, save time and money. Includes 1000+ dark & light UI components / 120 templates / 1000+ material icons.

👉 Discover more Figma templates

", "version_id": "10844", "version": "2", "created_at": "2020-08-26T19:31:17.921Z", "duplicate_count": 118203, "like_count": 2424, "thumbnail_url": "https://s3-alpha.figma.com/hub/file/436219562/e6f0f5b1-2a8b-4f34-ae4e-fdb6228e031a-cover", "redirect_canvas_url": "/community/file/880534892514982400/canvas", "community_publishers": ["179081"], "publisher": {"id": "179081", "profile_handle": "templates", "follower_count": 3508, "following_count": 0, "primary_user_id": "464443699919434908", "name": "Setproduct", "img_url": "https://s3-alpha.figma.com/profile/7e076460-c319-461c-ab2a-7f675d0c154f", "badges": []}, "support_contact": null, "creator": {"id": "464443699919434908", "handle": "Setproduct", "img_url": "https://s3-alpha.figma.com/profile/7e076460-c319-461c-ab2a-7f675d0c154f"}, "tags": ["android", "components", "dashboard", "design", "design system", "desktop", "kit", "material", "system", "template", "ui", "ui kit"], "badges": [], "related_content": {"content": ["975107427506382587", "1215359335483983427", "1135938473120192664"], "types": ["by_remixes"]}}, +{"id": "1216056004395666907", "name": "Bobo - Chatbot Messenger App UI Kit", "description": "

Hello GUIs,

I just released a new product.


Bobo is a Premium & High Quality UI Kit with All Full Features of Chatbot App. Bobo came with unique style and niche, you can easily edit and customize all elements with design components which can speed up design process for your projects. Everything is integrated with the design system, so you only need to change the color, logo, text, and so on in the design system, then the entire design screen will automatically change.


Bobo support for iOS/Android (design system included) and 86 screens which is 100% editable & customizable. Designs are available in Figma. In addition, the design is also equipped with a version of Light & Dark Theme.


Bobo is designed in a trendy and modern way, with all layers well organized. Bobo is equipped with a design system with hundred of components. The Design System has been equipped with typography, iconography, color styles, components, variants, elements, buttons, input forms, alerts, avatars, checkboxes, chips, grids, toggles, and many others.


In addition, the application design in figma has been designed with fully auto layout, so it is very adaptive if you want to edit, delete, or add some parts. If you are not familiar with auto layout, you can turn it off by right-clicking the layer, and selecting remove auto layout.


Bobo UI Kit is suitable for:

  • Chat Bot App
  • Messenger App
  • Chatting App
  • Chatbot Artificial Intelligence App


What's Inside:

  • 80+ Ready-made Screens
  • 140+ Components & Variants
  • 70+ Color Styles
  • 25+ Text Styles
  • 700+ Free Icons
  • 100% Auto Layout
  • And much more


Product Highlights:

  • 80+ Screens (iOS/Android Support)
  • 100% Editable & Customizable
  • Compatibility: Figma
  • Light & Dark Theme Included
  • Design System & Hundred of Components
  • Fully Auto Layout
  • Well Organized Layers System
  • Unique, Stylish & Modern
  • Used Google Free Fonts
  • Used Grid System
  • Pixel Perfect Design
  • Global Styleguide
  • Easily Drag & Drop Design


Note: All images/photos in the preview are included 😊


---------------------------------------------------------------------------------------------------


Get more awesome products! 👇👇👇

MunirSr


Want to donate?

Buy Me a Coffee: 👇

Buy Me a Coffee


---------------------------------------------------------------------------------------------------


🛈 Additional Information

This product was created and published by MunirSr. If you see someone else selling this product on the website or elsewhere, in any way, it is illegal and violates copyright. Please report it to me. Thank you 😊


---------------------------------------------------------------------------------------------------


Make your project more awesome!

Connect with me: sobakhul.munir527@gmail.com


More you can find me at:

Linkedin | Instagram | Dribbble | Behance | Linktr.ee

", "version_id": "287227", "version": "1", "created_at": "2023-03-10T16:12:24.673Z", "duplicate_count": 750, "like_count": 65, "thumbnail_url": "https://s3-alpha.figma.com/hub/file/3147264209/64e656be-498c-463e-bb5b-3c0fd8986540-cover.png", "redirect_canvas_url": "/community/file/1216056004395666907/canvas", "community_publishers": ["2389308"], "publisher": {"id": "2389308", "profile_handle": "MunirSr", "follower_count": 3639, "following_count": 1, "primary_user_id": "763822967356589666", "name": "Sobakhul Munir Siroj", "img_url": "https://s3-alpha.figma.com/profile/be510c7a-6bfc-4ae7-8098-3887c3553599", "badges": []}, "support_contact": "sobakhul.munir527@gmail.com", "creator": {"id": "763822967356589666", "handle": "Sobakhul Munir Siroj", "img_url": "https://s3-alpha.figma.com/profile/be510c7a-6bfc-4ae7-8098-3887c3553599"}, "tags": ["artificial intelligence", "chat assistant app", "chatbot ai app", "chat bot app", "chatbot app", "chatting app", "design system", "free", "messenger app", "mobile", "portfolio", "ui kit"], "badges": [], "related_content": {"content": ["1223314222511062706", "1218823989467855715", "1218605363755606732"], "types": ["by_creator"]}}, +{"id": "931512007012650048", "name": "Unicons - Shared Library Ready", "description": "

Reorganized and Shared Library Ready version of Unicons from Iconscout -https://www.figma.com/community/file/902916014302207596


-


You can just Publish and start using it on your designs.

", "version_id": "18622", "version": "2", "created_at": "2021-01-14T11:36:09.126Z", "duplicate_count": 101700, "like_count": 2644, "thumbnail_url": "https://s3-alpha.figma.com/hub/file/626214190/6e220bcf-c8cd-4dae-934c-e4f271d6f331-cover.png", "redirect_canvas_url": "/community/file/931512007012650048/canvas", "community_publishers": ["211587"], "publisher": {"id": "211587", "profile_handle": "FlavioSantos", "follower_count": 53, "following_count": 7, "primary_user_id": "484725639618061826", "name": "Flávio Santos", "img_url": "https://s3-alpha.figma.com/profile/273a5784-ac24-46d1-b61f-37d174ba3141", "badges": []}, "support_contact": null, "creator": {"id": "484725639618061826", "handle": "Flávio Santos", "img_url": "https://s3-alpha.figma.com/profile/273a5784-ac24-46d1-b61f-37d174ba3141"}, "tags": ["collection", "icon design", "icon pack", "icons", "library", "outline", "shared library", "unicons"], "badges": [], "related_content": {"content": ["1054240665233371805", "1087565899543119131", "1030525705341775283"], "types": ["by_remixes"]}}, +{"id": "1014241558898418245", "name": "Material Design Icons", "description": "

This is the official Material Design icon stickersheet managed by Google Fonts team!


Material Design Icons are available in five styles. The icons are crafted based on the core design principles and metrics of Material Design guidelines. Our icons are free for everyone to use. It’s available under Apache license version 2.0. In this file, over 2000 Material Design icons are built as components in 5 variants: Filled, Outlined, Sharp, Rounded, Two-tone.


You can access our icons directly on fonts.google.com/icons. 

", "version_id": "266363", "version": "7", "created_at": "2021-08-30T18:33:51.342Z", "duplicate_count": 79351, "like_count": 3293, "thumbnail_url": "https://s3-alpha.figma.com/hub/file/2981282860/291e6b94-5df7-45ea-95a8-7e8b87a68279-cover.png", "redirect_canvas_url": "/community/file/1014241558898418245/canvas", "community_publishers": ["976570569365632935"], "publisher": {"id": "976570569365632935", "profile_handle": "googlefonts", "follower_count": 3227, "following_count": 0, "primary_user_id": null, "name": "Google Fonts", "img_url": "https://s3-alpha.figma.com/profile/2a630f4b-138d-4be7-bf2b-40d3647c209e", "badges": ["figma_partner"]}, "support_contact": "leesehee@google.com", "creator": {"id": "732629410291744805", "handle": "Victor Buholzer", "img_url": "https://www.gravatar.com/avatar/74a167a95c1b56f0a32cbe911176b8ac?size=240&default=https%3A%2F%2Fs3-alpha.figma.com%2Fstatic%2Fuser_v_v2.png"}, "tags": ["google", "google fonts", "icons", "material design", "system icons", "ui icons", "variants"], "badges": [], "related_content": {"content": ["1113950611695632368"], "types": ["by_creator"]}}, +{"id": "830510773896272856", "name": "User Flow Kit", "description": "Design user flows on Figma with User Flow Kit, a set of components with a variety of arrow styles and cards with basic desktop layouts.\n\nStrong kudos to @danial for the responsive arrow designs. I wouldn't have been able to do this without his contribution!\n\nContact me on Twitter at @jvrlvs if you have any suggestions 👋", "version_id": "6207", "version": "4", "created_at": "2020-04-10T18:33:18.641Z", "duplicate_count": 75917, "like_count": 2854, "thumbnail_url": "https://s3-alpha.figma.com/hub/file/299404204/cc64dc1e-fe40-43d7-8a0e-05de05227062-cover", "redirect_canvas_url": "/community/file/830510773896272856/canvas", "community_publishers": ["871451"], "publisher": {"id": "871451", "profile_handle": "javi", "follower_count": 411, "following_count": 11, "primary_user_id": "644847218054907523", "name": "Javier Alaves", "img_url": "https://s3-alpha.figma.com/profile/8f864941-7ec9-4488-8812-41dc20d93b6f", "badges": []}, "support_contact": null, "creator": {"id": "644847218054907523", "handle": "Javier Alaves", "img_url": "https://s3-alpha.figma.com/profile/8f864941-7ec9-4488-8812-41dc20d93b6f"}, "tags": ["arrows", "flow", "kit", "prototyping", "ui design", "user", "ux design"], "badges": [], "related_content": {"content": ["1108075486606639409", "1147357255414887080", "976759961830649991"], "types": ["by_remixes"]}}, +{"id": "832911648132248625", "name": "Spotify Ways of Working", "description": "We're excited to open up the music box and describe how we've shaped Figma to suit our needs and culture at Spotify. We hope this information will be useful for other design teams seeking more organisation for their work in Figma.", "version_id": "6489", "version": "3", "created_at": "2020-04-17T09:33:31.662Z", "duplicate_count": 44809, "like_count": 4345, "thumbnail_url": "https://s3-alpha.figma.com/hub/file/303936394/d869e53c-b17a-40dc-9569-f0c4f2adf010-cover", "redirect_canvas_url": "/community/file/832911648132248625/canvas", "community_publishers": ["1653"], "publisher": {"id": "1653", "profile_handle": "spotify", "follower_count": 8126, "following_count": 0, "primary_user_id": null, "name": "Spotify", "img_url": "https://s3-alpha.figma.com/profile/6cb976b4-d5ce-43b9-8aa8-64bddd19e13d", "badges": []}, "support_contact": null, "creator": {"id": "737693600188199127", "handle": "Cliona O'Sullivan", "img_url": "https://s3-alpha.figma.com/profile/b06d98f0-39c3-403d-99d6-b716ee2bc025"}, "tags": [], "badges": [], "related_content": {"content": ["1197482290095874483", "1028912647506326393"], "types": ["by_remixes"]}}, +{"id": "852445385275060830", "name": "🍏 iOS design system — Free UI kit", "description": "

3300+ variants of 100+ components to craft perfectly shaped iOS apps. Powered by Figma auto-layout 3.0, Apple’s native styleguides, and free Apple’s SF Pro font with the original latest SF Symbols. Customizable mobile design system with 320 ready-to-use app layouts.

👉 Discover more Figma templates

", "version_id": "99242", "version": "2", "created_at": "2020-06-10T07:13:37.518Z", "duplicate_count": 90087, "like_count": 1957, "thumbnail_url": "https://s3-alpha.figma.com/hub/file/1591731872/392ec641-02ad-4998-887f-aec1c47ad2c8-cover.png", "redirect_canvas_url": "/community/file/852445385275060830/canvas", "community_publishers": ["179081"], "publisher": {"id": "179081", "profile_handle": "templates", "follower_count": 3508, "following_count": 0, "primary_user_id": "464443699919434908", "name": "Setproduct", "img_url": "https://s3-alpha.figma.com/profile/7e076460-c319-461c-ab2a-7f675d0c154f", "badges": []}, "support_contact": null, "creator": {"id": "464443699919434908", "handle": "Setproduct", "img_url": "https://s3-alpha.figma.com/profile/7e076460-c319-461c-ab2a-7f675d0c154f"}, "tags": ["app", "design", "free", "ios", "iphone", "layout", "mobile", "system", "template", "ui", "ui kit", "ux"], "badges": [], "related_content": {"content": ["1163704724906470942", "1140342776323371589", "1121331285828146970"], "types": ["by_remixes"]}}, +{"id": "1204216495486020583", "name": "Home Designer - Imperial System", "description": "

IMPORTANT: THIS IS THE IMPERIAL SYSTEM VERSION. PLEASE DOWNLOAD THE OTHER VERSION FOR MILLIMETERS AND METERS. THIS FILE USES INCHES AND FEET.


Plan your perfect space right in Figma. Hundreds of true-to-size objects for designing a spectacular space.

", "version_id": "288246", "version": "24", "created_at": "2023-02-06T00:06:25.782Z", "duplicate_count": 326, "like_count": 117, "thumbnail_url": "https://s3-alpha.figma.com/hub/file/3152341188/e80e5f14-c475-4591-8831-54304544c30b-cover.png", "redirect_canvas_url": "/community/file/1204216495486020583/canvas", "community_publishers": ["1040871"], "publisher": {"id": "1040871", "profile_handle": "thejmoore", "follower_count": 641, "following_count": 0, "primary_user_id": "668116906486561661", "name": "Jon Moore", "img_url": "https://s3-alpha.figma.com/profile/7877caba-4de2-4f5f-867e-10d2b934c646", "badges": []}, "support_contact": "jon.moore@innovatemap.com", "creator": {"id": "668116906486561661", "handle": "Jon Moore", "img_url": "https://s3-alpha.figma.com/profile/7877caba-4de2-4f5f-867e-10d2b934c646"}, "tags": ["apartment", "architecture", "blueprint", "floor", "floor plan", "floorplanning", "furniture", "home", "house", "interior", "interior design"], "badges": [], "related_content": {"content": ["1204978049714158492", "1214601013410613826", "1200222759181998104"], "types": ["by_creator"]}}, +{"id": "1202590530137253284", "name": "The Ultimate Figma Project Setup and UXR Kit", "description": "

Over the years of using Figma, I often started a project with a blank file. I organized the space all over again and created various utilities depending on the project's requirements. I created personas and built another version of the Customer Journey Map, Kanban board, or any extras like visual comments. Today I’m no longer starting from scratch.


Now I have the THE ULTIMATE FIGMA SET PROJECT SETUP & UXR Kit, which includes everything I need to organize a Figma file for a new project quickly. And I’m not just talking about design. What‘s inside? Take a look!


See movie on YouTube


Project Setup

This part includes: 

  • File Cover (5 versions), 
  • Project Header (3 levels),
  • Webcard (3 versions),
  • Post-its (4 versions),
  • Review Form,
  • Design comments (5 versions),
  • Flow Comments (4 versions),
  • Component Box,
  • Library Box,
  • Layout grid.

Skipping such obvious elements as the Cover template, you’ll find everything here to get your work file ready in minutes and make it look impressive. Take care of header structure and excellent documentation of your work thanks to comments and web carts, or organize new local components in an attractive form. With this section, you will give the impression of an organized designer who can focus on design and doesn’t have to worry about presenting your work.


Task Management

This part includes:

  • Kanban Board,
  • Task cards (5 versions),
  • Task Template,
  • OKR and SMART goal templates.

I can’t count all the task management apps I’ve used. Todoist, Things, a Asana. Nothing worked for me in the long term. The rush and change of habits often made a good system no longer work. That’s how I came up with the idea of making tasks as close to a design as possible. And I created a Kanban board component with task templates: design, presentation, research, etc. Moving them between columns was easy and besides, and I could quickly see how many things I had completed. This is very encouraging! The links to tasks, pages, and presentations were also helpful because I could quickly get to past materials.


Project Documentation

This part includes:

  • Starter documentation,
  • User Story, 
  • Business Canvas Model,
  • Lean Canvas, 
  • Competitive analysis, 
  • Story mapping.

The amount of information related to projects grows every day. You don’t know when which one will be useful to you, which can inspire you and increase your creative thinking. Usually, when you work in Figma - jumping between Google Docs, Miro, Jira, Slides, and files on your laptop is just exhausting. Why not have the most important things next to the design? You can have basic design information or expanded ones like Lean Canvas, Competitive analysis, or Story mapping. A quick look at them can refresh your creative process, especially when you get stuck.


Research

This part includes:

  • Empathy Map, 
  • Customer Journey Map,
  • Research Interview,
  • User Testing Plan,
  • Persona,
  • Research Flow Steps.

Many questions and doubts are often in your head while working on a project. I usually wrote them down in different places. In Moleskine, files in the cloud, and cards on my desk. And I usually quickly lost connection with them. That’s how the idea to move research documentation closer to design came about. With the Research Planner template, I could build the foundation for the next tests. With the Interview template, I could write down questions to ask participants without getting distracted from design work. Similarly — persona or Customer Journey Map. Thanks to that, after some time I felt that my files in Figma became comprehensive and helped me a lot when I was presenting my work. I could easily refer to particular data and my argumentation became stronger and more confident.

", "version_id": "277529", "version": "4", "created_at": "2023-02-01T12:25:25.434Z", "duplicate_count": 446, "like_count": 110, "thumbnail_url": "https://s3-alpha.figma.com/hub/file/3070587830/01624e39-f9bf-41fc-a841-ba614987dd61-cover.png", "redirect_canvas_url": "/community/file/1202590530137253284/canvas", "community_publishers": ["3749623"], "publisher": {"id": "3749623", "profile_handle": "aleksander_pro", "follower_count": 147, "following_count": 29, "primary_user_id": "822790805580109362", "name": "Michał Aleksander", "img_url": "https://s3-alpha.figma.com/profile/005b1f8a-b23d-47d3-b4e9-bccffc0f64b6", "badges": []}, "support_contact": "michal@aleksander.pro", "creator": {"id": "822790805580109362", "handle": "Michał Aleksander", "img_url": "https://s3-alpha.figma.com/profile/005b1f8a-b23d-47d3-b4e9-bccffc0f64b6"}, "tags": ["canvas", "documentation", "kanban", "lean", "research", "setup", "template", "ux"], "badges": [], "related_content": {"content": ["1210908075535334958", "967038079551866922", "965525436098683782"], "types": ["by_creator"]}}, +{"id": "900479694578549256", "name": "Mobile Wireframe UI Kit", "description": "

Mobile Wireframe Kit

This wireframe kit contains a collection of commonly used system components to mock up your mobile (phone) ideas quickly, before investing in the full design. Use it to share ideas, iterate, prototype, and get buy in before you build.


What's included?

  • Android and iOS medium-fidelity components
  • Handwriting font (Kalam) versions of those components for lower-fidelity wireframes
  • A handful of very generic/platform agnostic placeholder components
  • Top navs
  • Tab bars
  • Keyboards
  • Alerts/messages
  • Icons and symbols
  • Controls and inputs (toggle switch, segmented controller, buttons, checkboxes, radio buttons)
  • Date picker
  • Lists
  • Floating action buttons
  • Buttons with and without icons
  • Increment spinners


Before you start

You'll need to install SF Pro from Apple to customize the iOS components, which you can download here.


What isn't included?

This kit only contains components for mobile devices, not tablet or desktop.

", "version_id": "39107", "version": "5", "created_at": "2020-10-20T20:24:49.288Z", "duplicate_count": 95613, "like_count": 1731, "thumbnail_url": "https://s3-alpha.figma.com/hub/file/908157817/f6780ccf-bc0b-4bb7-ba09-31e63627a29c-cover.png", "redirect_canvas_url": "/community/file/900479694578549256/canvas", "community_publishers": ["199306"], "publisher": {"id": "199306", "profile_handle": "1", "follower_count": 509, "following_count": 53, "primary_user_id": "476961500878855530", "name": "アンドリュー", "img_url": "https://s3-alpha.figma.com/profile/677fd5cb-188c-4bb9-a7c5-661234cc87df", "badges": []}, "support_contact": null, "creator": {"id": "476961500878855530", "handle": "アンドリュー", "img_url": "https://s3-alpha.figma.com/profile/677fd5cb-188c-4bb9-a7c5-661234cc87df"}, "tags": ["android", "ios", "iphone", "low fidelity", "material design", "mobile", "pixel", "wireframe"], "badges": [], "related_content": {"content": ["1223626761798663268", "1223330592664849099", "1221203998887810905"], "types": ["by_remixes"]}}, +{"id": "1209181953593935396", "name": "Scribbles - 400+ hand-drawn vectors", "description": "

Get 400+ different hand-made vectors to bring life and creativity to your designs in Figma or brainstorming sessions in FigJam.


About the Scribbles component library ✍️


In the Scribbles library you'll find 100 components each with 4 different pen style variants for making the lines thinner, chonkier or more textured. Some even have additional variants for length and direction so your hand-made additions can feel truly organic.


There's arrows of all different lengths and styles, basic shapes, squiggles, dividers, accents, simple icons and even some text callouts to help you express your ideas – all for just $5!


What's included

  • 100 components
  • 4 pen style variants per component – Regular, Thin, Chonky & Textured
  • Some components with additional variants for length, direction or alternative shapes
  • Styles for black, white, primary and secondary colors (to make it easy to match your brand)
  • Sticker sheet & the component library


\"Why is this only $5? That's like 1 cent per vector!?\"

I believe adding organic touches to our digital environments makes the web feel more human, and I've kept the price intentionally low on this resource to make it easy for anyone to add a hand-made touch to their digital work without having to draw or image trace a single thing (cos who has time for that when you're in the flow!?)


I hope you'll consider adding Scribbles to your design toolkit!

", "version_id": "286155", "version": "4", "created_at": "2023-02-19T16:57:23.249Z", "duplicate_count": 355, "like_count": 146, "thumbnail_url": "https://s3-alpha.figma.com/hub/file/3138529049/820a1be9-03f9-4d6e-a24c-b9e51825e946-cover.png", "redirect_canvas_url": "/community/file/1209181953593935396/canvas", "community_publishers": ["1203632585373189122"], "publisher": {"id": "1203632585373189122", "profile_handle": "charliprangley", "follower_count": 29, "following_count": 2, "primary_user_id": "1203632585184928777", "name": "Charli", "img_url": "https://s3-alpha.figma.com/profile/5b9aeb6b-9050-4d6c-8ae0-463eb9af7ddc", "badges": []}, "support_contact": "charli@charlimarie.com", "creator": {"id": "1203632585184928777", "handle": "Charli", "img_url": "https://s3-alpha.figma.com/profile/5b9aeb6b-9050-4d6c-8ae0-463eb9af7ddc"}, "tags": ["arrows", "component library", "design system", "doodles", "drawing", "hand drawn", "hand drawn vectors", "handmade", "handmade vectors", "organic vector", "scribble", "vector library"], "badges": [], "related_content": {"content": ["1213818142294950701", "1114930608793798350", "1206731303459021699"], "types": ["by_creator", "by_tags"]}}, +{"id": "1211744623968867617", "name": "Designely - Brand Guidelines", "description": "

Modern Branding Guidelines - Print & Digital

Need a Branding Guidelines document for your client?

Our Brand Guidelines template allows you to add your logo, and images and edit your brand colours and typography and you’re good to go.

Please don’t waste your time, we’ve done all the hard work for you.

Prototype in Figma or export and send to clients as a pdf.



 ➡️ The template is lifetime access with updates!

", "version_id": "284854", "version": "2", "created_at": "2023-02-26T18:40:31.478Z", "duplicate_count": 554, "like_count": 59, "thumbnail_url": "https://s3-alpha.figma.com/hub/file/3128711583/7d50ea16-849c-45cd-a057-9a8edbc41c9b-cover.png", "redirect_canvas_url": "/community/file/1211744623968867617/canvas", "community_publishers": ["866639911109209140"], "publisher": {"id": "866639911109209140", "profile_handle": "designely", "follower_count": 163, "following_count": 5, "primary_user_id": "866639911087817340", "name": "Agatha Sakowicz", "img_url": "https://s3-alpha.figma.com/profile/e9bf31ed-f991-4456-b19e-bddf494cd992", "badges": []}, "support_contact": "agathasakowicz@gmail.com", "creator": {"id": "866639911087817340", "handle": "Agatha Sakowicz", "img_url": "https://s3-alpha.figma.com/profile/e9bf31ed-f991-4456-b19e-bddf494cd992"}, "tags": ["book", "brand", "branding", "deck", "guidelines", "logo", "presentation"], "badges": [], "related_content": {"content": ["1211745813012367650", "1211743870199873823", "1215666248567959489"], "types": ["by_creator"]}}, +{"id": "1215522045161191128", "name": "AllPay - Finance, Banking, & E-Wallet App UI Kit", "description": "

Hello GUIs,

I just released a new product.


AllPay is a Premium & High Quality UI Kit with All Full Features of Finance, Banking, E-Wallet, Payment, & Money Management App. AllPay came with unique style and niche, you can easily edit and customize all elements with design components which can speed up design process for your projects. Everything is integrated with the design system, so you only need to change the color, logo, text, and so on in the design system, then the entire design screen will automatically change.


AllPay support for iOS/Android (design system included) and 172 screens which is 100% editable & customizable. Designs are available in Figma. In addition, the design is also equipped with a version of Light & Dark Theme.


AllPay is designed in a trendy and modern way, with all layers well organized. AllPay is equipped with a design system with hundred of components. The Design System has been equipped with typography, iconography, color styles, components, variants, elements, buttons, input forms, alerts, avatars, checkboxes, chips, grids, toggles, and many others.


In addition, the application design in figma has been designed with fully auto layout, so it is very adaptive if you want to edit, delete, or add some parts. If you are not familiar with auto layout, you can turn it off by right-clicking the layer, and selecting remove auto layout.


AllPay UI Kit is suitable for:

  • Digital Finance App
  • Mobile Banking App
  • Digital Wallet / E-Wallet App
  • Money Management App
  • Financial Technology / Fintech App
  • Payment App


Main App Features:

  • CORE Banking Features & Peer-to-Peer (P2P) Payments (Transfer, Request Money, In & Out Payment Tracking, Top Up)
  • Advanced Security & Fraud Alerts (OTP SMS, PIN, Password, Biometric Fingerprint, Face Recognition, & Two-Factor Authentication)
  • Bill Payments (Electricity, Internet/Wi-Fi, Water, Insurance, Health, Television, Instalment, & many more)
  • QR Code Payments (Scan and Pay for Orders, Bills, Purchase Products, & more)
  • Statistics & Insights (Transaction Tracking, Chart/Graph, Income and Expense Management)
  • Cards Management (Debit Card/Credit Card, M-Card, E-Card, & X-Card)
  • Onboarding, Sign up, Sign in, Reset Password, Account Setup, Profile & Settings, Special Offers (Promo, Discounts, Cashback)


What's Inside:

  • 170+ Ready-made Screens
  • 225+ Components & Variants
  • 60+ Color Styles
  • 25+ Text Styles
  • 700+ Free Icons
  • 100% Auto Layout
  • And much more


Product Highlights:

  • 170+ Screens (iOS/Android Support)
  • 100% Editable & Customizable
  • Compatibility: Figma
  • Light & Dark Theme Included
  • Design System & Hundred of Components
  • Fully Auto Layout
  • Well Organized Layers System
  • Unique, Stylish & Modern
  • Used Google Free Fonts
  • Used Grid System
  • Pixel Perfect Design
  • Global Styleguide
  • Easily Drag & Drop Design


Note: All images/photos in the preview are included 😊

Assets: Unsplash, unDraw


---------------------------------------------------------------------------------------------------


Get more awesome products! 👇👇👇

MunirSr


Want to donate?

Buy Me a Coffee: 👇

Buy Me a Coffee


---------------------------------------------------------------------------------------------------


🛈 Additional Information

This product was created and published by MunirSr. If you see someone else selling this product on the website or elsewhere, in any way, it is illegal and violates copyright. Please report it to me. Thank you 😊


---------------------------------------------------------------------------------------------------


Make your project more awesome!

Connect with me: sobakhul.munir527@gmail.com


More you can find me at:

Linkedin | Instagram | Dribbble | Behance | Linktr.ee

", "version_id": "285949", "version": "1", "created_at": "2023-03-09T04:50:38.870Z", "duplicate_count": 604, "like_count": 53, "thumbnail_url": "https://s3-alpha.figma.com/hub/file/3137034043/b66e3048-7ec8-4bc9-8f8f-097c3fbf45f2-cover.png", "redirect_canvas_url": "/community/file/1215522045161191128/canvas", "community_publishers": ["2389308"], "publisher": {"id": "2389308", "profile_handle": "MunirSr", "follower_count": 3639, "following_count": 1, "primary_user_id": "763822967356589666", "name": "Sobakhul Munir Siroj", "img_url": "https://s3-alpha.figma.com/profile/be510c7a-6bfc-4ae7-8098-3887c3553599", "badges": []}, "support_contact": "sobakhul.munir527@gmail.com", "creator": {"id": "763822967356589666", "handle": "Sobakhul Munir Siroj", "img_url": "https://s3-alpha.figma.com/profile/be510c7a-6bfc-4ae7-8098-3887c3553599"}, "tags": ["design system", "digital wallet app", "e-wallet app", "finance app", "fintech app", "free", "mobile", "mobile banking app", "money management app", "payment app", "portfolio", "ui kit"], "badges": [], "related_content": {"content": ["1223314222511062706", "1218823989467855715", "1218605363755606732"], "types": ["by_creator"]}}, +{"id": "912837788133317724", "name": "MUI for Figma (Community, Material UI, Joy UI, MUI X)", "description": "

This is a community version of MUI for Figma, a UI kit with handcrafted components for Figma.


This community version covers Material UI, the components that are following the Material Design guidelines.


The documentation of the kit: https://mui.com/figma/getting-started/


For designers that want to ask for help or report improvement opportunities: open a new GitHub issue.


You can also preview the full version of MUI for Figma, see these two files:

  • Material UI: the components that are following the Material Design guidelines.
  • Joy UI: the components that are following the Joy Design guidelines


Both files aim to support: MUI X, the advanced & customizable components, e.g. data grid.

", "version_id": "298536", "version": "48", "created_at": "2020-11-23T22:51:28.396Z", "duplicate_count": 80303, "like_count": 1845, "thumbnail_url": "https://s3-alpha.figma.com/hub/file/3233064752/09b8e348-1e04-4e6e-89a3-789c612ac26c-cover.png", "redirect_canvas_url": "/community/file/912837788133317724/canvas", "community_publishers": ["911937038911164764", "670676"], "publisher": {"id": "911937038911164764", "profile_handle": "mui_org", "follower_count": 396, "following_count": 0, "primary_user_id": null, "name": "MUI", "img_url": "https://s3-alpha.figma.com/profile/204f3be0-8b22-4a7d-9253-cf6a6697dae8", "badges": []}, "support_contact": "figma@mui.com", "creator": {"id": "834802856297975815", "handle": "Olivier Tassinari", "img_url": "https://s3-alpha.figma.com/profile/60510d9d-086a-4099-acf9-5c5598191dfa"}, "tags": ["material", "material design", "mui"], "badges": [], "related_content": {"content": ["1083401278147893772", "1222722936604183198", "1176232478193015917"], "types": ["by_remixes"]}}, +{"id": "1171268006329210940", "name": "🌎 Every Map", "description": "

Every map of the world. Includes every country of the world, as well as common regional maps for continents and global areas.


Follow me on Twitter for more resources like this!


https://twitter.com/thejmoore


---


Afghanistan, Albania, Algeria, Andorra, Angola, Antigua and Barbuda, Argentina, Armenia, Australia, Austria, Azerbaijan, Bahamas, Bahrain, Bangladesh, Barbados, Belarus, Belgium, Belize, Benin, Bhutan, Bolivia, Bosnia and Herzegovina, Botswana, Brazil, Brunei, Bulgaria, Burkina Faso, Burundi, Côte d'Ivoire, Cabo Verde, Cambodia, Cameroon, Canada, Central African Republic, Chad, Chile, China, Colombia, Comoros, Congo (Congo-Brazzaville), Costa Rica, Croatia, Cuba, Cyprus, Czechia (Czech Republic), Democratic Republic of the Congo, Denmark, Djibouti, Dominica, Dominican Republic, Ecuador, Egypt, El Salvador, Equatorial Guinea, Eritrea, Estonia, \"Eswatini (fmr. \"\"Swaziland\"\")\", Ethiopia, Fiji, Finland, France, Gabon, Gambia, Georgia, Germany, Ghana, Greece, Grenada, Guatemala, Guinea, Guinea-Bissau, Guyana, Haiti, Holy See, Honduras, Hungary, Iceland, India, Indonesia, Iran, Iraq, Ireland, Israel, Italy, Jamaica, Japan, Jordan, Kazakhstan, Kenya, Kiribati, Kuwait, Kyrgyzstan, Laos, Latvia, Lebanon, Lesotho, Liberia, Libya, Liechtenstein, Lithuania, Luxembourg, Madagascar, Malawi, Malaysia, Maldives, Mali, Malta, Marshall Islands, Mauritania, Mauritius, Mexico, Micronesia, Moldova, Monaco, Mongolia, Montenegro, Morocco, Mozambique, Myanmar (formerly Burma), Namibia, Nauru, Nepal, Netherlands, New Zealand, Nicaragua, Niger, Nigeria, North Korea, North Macedonia, Norway, Oman, Pakistan, Palau, Palestine State, Panama, Papua New Guinea, Paraguay, Peru, Philippines, Poland, Portugal, Qatar, Romania, Russia, Rwanda, Saint Kitts and Nevis, Saint Lucia, Saint Vincent and the Grenadines, Samoa, San Marino, Sao Tome and Principe, Saudi Arabia, Senegal, Serbia, Seychelles, Sierra Leone, Singapore, Slovakia, Slovenia, Solomon Islands, Somalia, South Africa, South Korea, South Sudan, Spain, Sri Lanka, Sudan, Suriname, Sweden, Switzerland, Syria, Tajikistan, Tanzania, Thailand, Timor-Leste, Togo, Tonga, Trinidad and Tobago, Tunisia, Turkey, Turkmenistan, Tuvalu, Uganda, Ukraine, United Arab Emirates, United Kingdom, United States of America, Uruguay, Uzbekistan, Vanuatu, Venezuela, Vietnam, Yemen, Zambia, Zimbabwe

", "version_id": "269724", "version": "16", "created_at": "2022-11-07T02:00:53.812Z", "duplicate_count": 411, "like_count": 114, "thumbnail_url": "https://s3-alpha.figma.com/hub/file/3004766778/1ffc9356-9446-4992-8bdb-af209ffbe0f7-cover.png", "redirect_canvas_url": "/community/file/1171268006329210940/canvas", "community_publishers": ["1040871"], "publisher": {"id": "1040871", "profile_handle": "thejmoore", "follower_count": 641, "following_count": 0, "primary_user_id": "668116906486561661", "name": "Jon Moore", "img_url": "https://s3-alpha.figma.com/profile/7877caba-4de2-4f5f-867e-10d2b934c646", "badges": []}, "support_contact": "jon.moore@innovatemap.com", "creator": {"id": "668116906486561661", "handle": "Jon Moore", "img_url": "https://s3-alpha.figma.com/profile/7877caba-4de2-4f5f-867e-10d2b934c646"}, "tags": ["asia", "australia", "countries", "country", "europe", "globe", "map", "middle east", "russia", "usa", "world"], "badges": [], "related_content": {"content": ["1204978049714158492", "1204216495486020583", "1214601013410613826"], "types": ["by_creator"]}} +] \ No newline at end of file From f8ba05f575246ae106fb29665e91ae875f2ce8a7 Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Fri, 7 Jul 2023 19:58:59 +0900 Subject: [PATCH 26/35] add report ci modes --- .github/workflows/codetest-report.yml | 4 +- ci/report/README.md | 0 ci/report/configs/report.config.max.js | 7 + .../report.config.med.js} | 0 ci/report/configs/report.config.min.js | 7 + ci/report/index.js | 23 -- ci/report/package-lock.json | 355 ++++++++++++++++++ ci/report/package.json | 9 + ci/report/report.js | 58 +++ ci/report/samples-5.json | 7 + 10 files changed, 446 insertions(+), 24 deletions(-) create mode 100644 ci/report/README.md create mode 100644 ci/report/configs/report.config.max.js rename ci/report/{report.config.js => configs/report.config.med.js} (100%) create mode 100644 ci/report/configs/report.config.min.js delete mode 100644 ci/report/index.js create mode 100644 ci/report/package-lock.json create mode 100644 ci/report/package.json create mode 100644 ci/report/report.js create mode 100644 ci/report/samples-5.json diff --git a/.github/workflows/codetest-report.yml b/.github/workflows/codetest-report.yml index 7d1a30bb..e4eeeba4 100644 --- a/.github/workflows/codetest-report.yml +++ b/.github/workflows/codetest-report.yml @@ -18,8 +18,10 @@ jobs: run: | yarn build - name: run report + working-directory: ci/report run: | - node ci/report + npm ci + node report.js - name: upload report to s3 uses: jakejarvis/s3-sync-action@master with: diff --git a/ci/report/README.md b/ci/report/README.md new file mode 100644 index 00000000..e69de29b diff --git a/ci/report/configs/report.config.max.js b/ci/report/configs/report.config.max.js new file mode 100644 index 00000000..7a9ae274 --- /dev/null +++ b/ci/report/configs/report.config.max.js @@ -0,0 +1,7 @@ +const path = require("path"); + +module.exports = { + sample: path.join(__dirname, "samples-50.json"), + outDir: path.join(__dirname, ".coverage"), + skipIfReportExists: false, +}; diff --git a/ci/report/report.config.js b/ci/report/configs/report.config.med.js similarity index 100% rename from ci/report/report.config.js rename to ci/report/configs/report.config.med.js diff --git a/ci/report/configs/report.config.min.js b/ci/report/configs/report.config.min.js new file mode 100644 index 00000000..d401139a --- /dev/null +++ b/ci/report/configs/report.config.min.js @@ -0,0 +1,7 @@ +const path = require("path"); + +module.exports = { + sample: path.join(__dirname, "samples-5.json"), + outDir: path.join(__dirname, ".coverage"), + skipIfReportExists: false, +}; diff --git a/ci/report/index.js b/ci/report/index.js deleted file mode 100644 index 64b2e64a..00000000 --- a/ci/report/index.js +++ /dev/null @@ -1,23 +0,0 @@ -const path = require("path"); -const child_process = require("child_process"); - -const DIR_TESTING = path.join(__dirname, "..", "..", "testing"); -const DIR_TESTING_REPORT = path.join(DIR_TESTING, "report"); -const CONFIG_FILE = path.join(__dirname, "report.config.js"); - -// run the report ci -child_process - .spawn(`npm run report --`, ["--config", CONFIG_FILE], { - shell: true, - cwd: DIR_TESTING_REPORT, - }) - .stdout.on("data", (data) => { - console.log(`${data}`); - }) - .on("error", (err) => { - console.info(err); - process.exit(1); - }) - .on("exit", (code) => { - process.exit(code); - }); diff --git a/ci/report/package-lock.json b/ci/report/package-lock.json new file mode 100644 index 00000000..9c1a56bb --- /dev/null +++ b/ci/report/package-lock.json @@ -0,0 +1,355 @@ +{ + "name": "@ci/report", + "version": "0.0.0", + "lockfileVersion": 2, + "requires": true, + "packages": { + "": { + "name": "@ci/report", + "version": "0.0.0", + "dependencies": { + "@actions/core": "^1.10.0", + "@actions/github": "^5.1.1" + } + }, + "node_modules/@actions/core": { + "version": "1.10.0", + "license": "MIT", + "dependencies": { + "@actions/http-client": "^2.0.1", + "uuid": "^8.3.2" + } + }, + "node_modules/@actions/github": { + "version": "5.1.1", + "license": "MIT", + "dependencies": { + "@actions/http-client": "^2.0.1", + "@octokit/core": "^3.6.0", + "@octokit/plugin-paginate-rest": "^2.17.0", + "@octokit/plugin-rest-endpoint-methods": "^5.13.0" + } + }, + "node_modules/@actions/http-client": { + "version": "2.1.0", + "license": "MIT", + "dependencies": { + "tunnel": "^0.0.6" + } + }, + "node_modules/@octokit/auth-token": { + "version": "2.5.0", + "license": "MIT", + "dependencies": { + "@octokit/types": "^6.0.3" + } + }, + "node_modules/@octokit/core": { + "version": "3.6.0", + "license": "MIT", + "dependencies": { + "@octokit/auth-token": "^2.4.4", + "@octokit/graphql": "^4.5.8", + "@octokit/request": "^5.6.3", + "@octokit/request-error": "^2.0.5", + "@octokit/types": "^6.0.3", + "before-after-hook": "^2.2.0", + "universal-user-agent": "^6.0.0" + } + }, + "node_modules/@octokit/endpoint": { + "version": "6.0.12", + "license": "MIT", + "dependencies": { + "@octokit/types": "^6.0.3", + "is-plain-object": "^5.0.0", + "universal-user-agent": "^6.0.0" + } + }, + "node_modules/@octokit/graphql": { + "version": "4.8.0", + "license": "MIT", + "dependencies": { + "@octokit/request": "^5.6.0", + "@octokit/types": "^6.0.3", + "universal-user-agent": "^6.0.0" + } + }, + "node_modules/@octokit/openapi-types": { + "version": "12.11.0", + "license": "MIT" + }, + "node_modules/@octokit/plugin-paginate-rest": { + "version": "2.21.3", + "license": "MIT", + "dependencies": { + "@octokit/types": "^6.40.0" + }, + "peerDependencies": { + "@octokit/core": ">=2" + } + }, + "node_modules/@octokit/plugin-rest-endpoint-methods": { + "version": "5.16.2", + "license": "MIT", + "dependencies": { + "@octokit/types": "^6.39.0", + "deprecation": "^2.3.1" + }, + "peerDependencies": { + "@octokit/core": ">=3" + } + }, + "node_modules/@octokit/request": { + "version": "5.6.3", + "license": "MIT", + "dependencies": { + "@octokit/endpoint": "^6.0.1", + "@octokit/request-error": "^2.1.0", + "@octokit/types": "^6.16.1", + "is-plain-object": "^5.0.0", + "node-fetch": "^2.6.7", + "universal-user-agent": "^6.0.0" + } + }, + "node_modules/@octokit/request-error": { + "version": "2.1.0", + "license": "MIT", + "dependencies": { + "@octokit/types": "^6.0.3", + "deprecation": "^2.0.0", + "once": "^1.4.0" + } + }, + "node_modules/@octokit/types": { + "version": "6.41.0", + "license": "MIT", + "dependencies": { + "@octokit/openapi-types": "^12.11.0" + } + }, + "node_modules/before-after-hook": { + "version": "2.2.3", + "license": "Apache-2.0" + }, + "node_modules/deprecation": { + "version": "2.3.1", + "license": "ISC" + }, + "node_modules/is-plain-object": { + "version": "5.0.0", + "license": "MIT", + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/node-fetch": { + "version": "2.6.12", + "license": "MIT", + "dependencies": { + "whatwg-url": "^5.0.0" + }, + "engines": { + "node": "4.x || >=6.0.0" + }, + "peerDependencies": { + "encoding": "^0.1.0" + }, + "peerDependenciesMeta": { + "encoding": { + "optional": true + } + } + }, + "node_modules/once": { + "version": "1.4.0", + "license": "ISC", + "dependencies": { + "wrappy": "1" + } + }, + "node_modules/tr46": { + "version": "0.0.3", + "license": "MIT" + }, + "node_modules/tunnel": { + "version": "0.0.6", + "license": "MIT", + "engines": { + "node": ">=0.6.11 <=0.7.0 || >=0.7.3" + } + }, + "node_modules/universal-user-agent": { + "version": "6.0.0", + "license": "ISC" + }, + "node_modules/uuid": { + "version": "8.3.2", + "license": "MIT", + "bin": { + "uuid": "dist/bin/uuid" + } + }, + "node_modules/webidl-conversions": { + "version": "3.0.1", + "license": "BSD-2-Clause" + }, + "node_modules/whatwg-url": { + "version": "5.0.0", + "license": "MIT", + "dependencies": { + "tr46": "~0.0.3", + "webidl-conversions": "^3.0.0" + } + }, + "node_modules/wrappy": { + "version": "1.0.2", + "license": "ISC" + } + }, + "dependencies": { + "@actions/core": { + "version": "1.10.0", + "requires": { + "@actions/http-client": "^2.0.1", + "uuid": "^8.3.2" + } + }, + "@actions/github": { + "version": "5.1.1", + "requires": { + "@actions/http-client": "^2.0.1", + "@octokit/core": "^3.6.0", + "@octokit/plugin-paginate-rest": "^2.17.0", + "@octokit/plugin-rest-endpoint-methods": "^5.13.0" + } + }, + "@actions/http-client": { + "version": "2.1.0", + "requires": { + "tunnel": "^0.0.6" + } + }, + "@octokit/auth-token": { + "version": "2.5.0", + "requires": { + "@octokit/types": "^6.0.3" + } + }, + "@octokit/core": { + "version": "3.6.0", + "requires": { + "@octokit/auth-token": "^2.4.4", + "@octokit/graphql": "^4.5.8", + "@octokit/request": "^5.6.3", + "@octokit/request-error": "^2.0.5", + "@octokit/types": "^6.0.3", + "before-after-hook": "^2.2.0", + "universal-user-agent": "^6.0.0" + } + }, + "@octokit/endpoint": { + "version": "6.0.12", + "requires": { + "@octokit/types": "^6.0.3", + "is-plain-object": "^5.0.0", + "universal-user-agent": "^6.0.0" + } + }, + "@octokit/graphql": { + "version": "4.8.0", + "requires": { + "@octokit/request": "^5.6.0", + "@octokit/types": "^6.0.3", + "universal-user-agent": "^6.0.0" + } + }, + "@octokit/openapi-types": { + "version": "12.11.0" + }, + "@octokit/plugin-paginate-rest": { + "version": "2.21.3", + "requires": { + "@octokit/types": "^6.40.0" + } + }, + "@octokit/plugin-rest-endpoint-methods": { + "version": "5.16.2", + "requires": { + "@octokit/types": "^6.39.0", + "deprecation": "^2.3.1" + } + }, + "@octokit/request": { + "version": "5.6.3", + "requires": { + "@octokit/endpoint": "^6.0.1", + "@octokit/request-error": "^2.1.0", + "@octokit/types": "^6.16.1", + "is-plain-object": "^5.0.0", + "node-fetch": "^2.6.7", + "universal-user-agent": "^6.0.0" + } + }, + "@octokit/request-error": { + "version": "2.1.0", + "requires": { + "@octokit/types": "^6.0.3", + "deprecation": "^2.0.0", + "once": "^1.4.0" + } + }, + "@octokit/types": { + "version": "6.41.0", + "requires": { + "@octokit/openapi-types": "^12.11.0" + } + }, + "before-after-hook": { + "version": "2.2.3" + }, + "deprecation": { + "version": "2.3.1" + }, + "is-plain-object": { + "version": "5.0.0" + }, + "node-fetch": { + "version": "2.6.12", + "requires": { + "whatwg-url": "^5.0.0" + } + }, + "once": { + "version": "1.4.0", + "requires": { + "wrappy": "1" + } + }, + "tr46": { + "version": "0.0.3" + }, + "tunnel": { + "version": "0.0.6" + }, + "universal-user-agent": { + "version": "6.0.0" + }, + "uuid": { + "version": "8.3.2" + }, + "webidl-conversions": { + "version": "3.0.1" + }, + "whatwg-url": { + "version": "5.0.0", + "requires": { + "tr46": "~0.0.3", + "webidl-conversions": "^3.0.0" + } + }, + "wrappy": { + "version": "1.0.2" + } + } +} diff --git a/ci/report/package.json b/ci/report/package.json new file mode 100644 index 00000000..c48b878d --- /dev/null +++ b/ci/report/package.json @@ -0,0 +1,9 @@ +{ + "name": "@ci/report", + "version": "0.0.0", + "private": true, + "dependencies": { + "@actions/core": "^1.10.0", + "@actions/github": "^5.1.1" + } +} diff --git a/ci/report/report.js b/ci/report/report.js new file mode 100644 index 00000000..6631eb86 --- /dev/null +++ b/ci/report/report.js @@ -0,0 +1,58 @@ +const path = require("path"); +const child_process = require("child_process"); +const core = require("@actions/core"); +const github = require("@actions/github"); + +const context = github.context; +const commitHash = context.sha; + +let releaseName, releaseVersion, pullRequestNumber; + +if (context.eventName === "release") { + releaseName = context.payload.release.name; + releaseVersion = context.payload.release.tag_name; +} else if (context.eventName === "pull_request") { + pullRequestNumber = context.payload.pull_request.number; +} + +/** + * get the report mode + * max | med | min + */ +function get_report_mode() { + if (context.eventName === "release") { + return "max"; + } else if (context.eventName === "pull_request") { + if ( + context.payload.action === "opened" || + context.payload.pull_request.merged + ) { + return "med"; + } else if (context.payload.action === "synchronize") { + return "min"; + } + } +} + +const mode = get_report_mode(); + +const DIR_TESTING = path.join(__dirname, "..", "..", "testing"); +const DIR_TESTING_REPORT = path.join(DIR_TESTING, "report"); +const CONFIG_FILE = path.join(__dirname, `configs/report.config.${mode}.js`); + +// run the report ci +child_process + .spawn(`npm run report --`, ["--config", CONFIG_FILE], { + shell: true, + cwd: DIR_TESTING_REPORT, + }) + .stdout.on("data", (data) => { + console.log(`${data}`); + }) + .on("error", (err) => { + console.info(err); + process.exit(1); + }) + .on("exit", (code) => { + process.exit(code); + }); diff --git a/ci/report/samples-5.json b/ci/report/samples-5.json new file mode 100644 index 00000000..d3f515fa --- /dev/null +++ b/ci/report/samples-5.json @@ -0,0 +1,7 @@ +[ +{"id": "1035203688168086460", "name": "Material 3 Design Kit", "description": "

Introducing Material Design 3

Meet Material Design 3, Material Design’s most personal design system yet. The Material 3 Design Kit provides a comprehensive introduction to the design system, with styles and components to help you get started.


Visualize dynamic color in your UI

The Material 3 Design Kit is built to work with the Material Theme Builder Figma plugin. Select an image or color to visualize dynamic color in your UI.


Looking for icons? Try the Google Icons Library


Suggestions and/or feedback?

Email m3-design-kit-feedback@google.com

Fill out this Google feedback form

or ping us @materialdesign on Twitter.


Changelog


03.28.23 V1.8

Major updates:

⚠ New tonal surfaces and fixed accents are here!

The latest update introduces Surfaces based on tone values, these are no longer read-only overlays. Surfaces 1–5 will remain in the gm3 design kit and material theme builder for current users, but we recommend migrating to new surface tokens as soon as possible.

Fixed accents add a new set of colors that will remain consistent across light and dark themes.

⚠ We added prototyping to components!


Additional updates: 

  • Date Pickers range date text has updated to on-secondary-container color role

Bugs adressed: 

  • Added text styles that were missing on the Search component
  • Fixed padding and constraints on Top App Bar
  • Fixed some small discrepancies in Dialogs


02.09.23 V1.7

Components and Styles Added: 

  • Side Sheets

Updates:

  • a11y update to the Date Picker

Bugs addressed: 

  • Added Absolute Position to Camera Cutout element inside status bar
  • Date Picker day layer names fixed
  • Changed Status Bar and Bottom Handle constraints to scale correctly within Device Frames
  • Nav Drawer - there were text properties set up but not in use, causing component to appear as 'invalid'


12.15.22 V1.6

Components and Styles Added: 

  • Search bar and modal
  • Custom variants for Progress Indicators
  • Avatar imagery with metadata

Updates:

  • Cover art refresh
  • Component properties added to multiple components

Bugs addressed: 

  • Textfields label color
  • Incorrect opacity on disabled filter chip
  • Incorrect Type style on \"Title-large\": from 'regular' to 'medium'
  • Typo on the Body/Large styles page: from 0.15 to 0.5
  • Outline pressed button icon was secondary color, updated to use primary color


10.18.22 V1.5

Huge update 🎉

Components and Styles Added: 

  • Badge
  • Small FABs
  • Progress indicators
  • Checkboxes
  • Tabs
  • Dividers
  • Segmented buttons
  • Bottom sheets 
  • Time pickers
  • Date pickers
  • Sliders
  • Lists
  • Snackbars
  • Navigation drawers (Dark)
  • Outline-variant color role
  • Keyboards added

Bugs addressed: 

  • Removed Top App Bar elevation on scroll
  • Icon buttons now reflect 48dp size for tap target
  • State layers for switches are now color roles and several other bug fixes
  • Fixed minor Text Style issues and deleted excess Text Styles
  • Fixed Nav bar active label color

Updates: 

  • Components updated to have nested new components (ex: badges, dividers)
  • Components updated to include outline-variant color role (ex: outline card)
  • Disabled FABs removed
  • Hex values removed — color roles only
  • Top app bar now leverages 48dp icon buttons
  • Restructured all Chips components
  • Restructured all Fab components
  • Text fields updated w/icon button 
  • Improved several components with auto layout 


07.01.22 V1.4

  • Fixed the switches component 
  • Fixed a bug where the chips were mislabeled
  • Fixed a bug with the surface value of elevated cards and elevated chips
  • Fixed label of on-surface value in dark mode
  • Fixed a bug in navigation bars where the badge was shifting between active and inactive states
  • Updated color role structure


05.11.22 V1.3

  • New Material 3 components, including Icon Buttons, Switches, and Bottom App Bars 
  • Fixed a bug where users would be asked to install Google Sans
  • Fixed a bug where Assistive and Filter chips contained a conflict error


02.14.22 V1.2

  • 🎉Our top request - the design kit now includes Text Fields! 
  • Updated chips to include missing variants
  • Fixed a bug in Dialogs which prevented the component from working correctly


11.10.21 V1.1

  • Updated links under color and typography
  • Added additional color roles under .read-only to allow for state opacity tokens, fixing a bug where some states’ colors would not update when using the Theme Builder plugin.


10.27.21 V1

  • Kit release
", "version_id": "300251", "version": "15", "created_at": "2021-10-27T14:49:52.407Z", "duplicate_count": 304043, "like_count": 12274, "thumbnail_url": "https://s3-alpha.figma.com/hub/file/3248391748/c8266c68-b5d6-4fc2-9fc6-d41b3cc8af6f-cover.png", "redirect_canvas_url": "/community/file/1035203688168086460/canvas", "community_publishers": ["2555098"], "publisher": {"id": "2555098", "profile_handle": "materialdesign", "follower_count": 27922, "following_count": 0, "primary_user_id": "771462962926009319", "name": "Material Design", "img_url": "https://s3-alpha.figma.com/profile/77d92d28-8203-4dbb-9a95-9d81cacbc6ce", "badges": ["figma_partner"]}, "support_contact": "materialdesignteam@gmail.com", "creator": {"id": "771462962926009319", "handle": "Material Design", "img_url": "https://s3-alpha.figma.com/profile/77d92d28-8203-4dbb-9a95-9d81cacbc6ce"}, "tags": ["android", "google", "material", "material design", "mobile", "stickersheet", "system", "ui kit"], "badges": [], "related_content": {"content": ["1164313362327941158", "1215441112935711382", "1199784060037728858"], "types": ["by_creator"]}}, +{"id": "778763161265841481", "name": "Material 2 Design Kit", "description": "

Customize and Create

Material Design's Baseline Design Kit provides all you need to create beautiful apps, complete with components and theming guidance.


Suggestions and/or feedback? Ping us @materialdesign on Twitter.


Changelog

10.27.21

  • This kit is no longer updated by the Material Design team. For the newest iteration of the Material Design Kit, please use the Material 3 Design Kit. For more details about Material Design 3, check out Material.io


08.24.21 V1.3

  • Fixed a bug that prevented users from theming the full kit


07.14.21 V1.2

     Updates:

  • Updated Snackbar
  • Updated Switches
  • Updated Sliders
  • Updated Text Fields
  • Updated Button + Chip elevation
  • Updated Switches


06.28.21 V1.1

     Updates:

  • Added autolayout to components
", "version_id": "69467", "version": "8", "created_at": "2019-11-19T23:26:46.362Z", "duplicate_count": 341590, "like_count": 7721, "thumbnail_url": "https://s3-alpha.figma.com/hub/file/1243826780/733e5f32-55ba-4d02-adf9-54d6e041dcff-cover.png", "redirect_canvas_url": "/community/file/778763161265841481/canvas", "community_publishers": ["2555098"], "publisher": {"id": "2555098", "profile_handle": "materialdesign", "follower_count": 27922, "following_count": 0, "primary_user_id": "771462962926009319", "name": "Material Design", "img_url": "https://s3-alpha.figma.com/profile/77d92d28-8203-4dbb-9a95-9d81cacbc6ce", "badges": ["figma_partner"]}, "support_contact": null, "creator": {"id": "771462962926009319", "handle": "Material Design", "img_url": "https://s3-alpha.figma.com/profile/77d92d28-8203-4dbb-9a95-9d81cacbc6ce"}, "tags": ["android", "google", "material", "mobile", "stickersheet", "system", "ui kit"], "badges": [], "related_content": {"content": ["1035203688168086460", "1164313362327941158", "1215441112935711382"], "types": ["by_creator"]}}, +{"id": "890095002328610853", "name": "SALY - 3D Illustration Pack", "description": "

Collection of high-quality 3D illustrations, hand-crafted and full of personalities. FREE to use for your exploration or personal project.


Over 30 illustrations and will keep updated in the future. Enjoy!


Work Inquiry: talk@hellozea.com


------------------------------


Changelog:


v1.7.3 (23 September 2021):


  • Added 3 more illustrations


v1.6.3 (11 May 2021):


  • Added 1 more illustrations


v1.5.3 (4 May 2021):


  • Added 10 more illustrations, wow!
  • Added my email for work inquiry
  • Minor fix here and there


v1.4.2 (11 January 2021):


  • Happy new year guys!
  • Added 7 more illustrations, wow!
  • Minor fix here and there


v1.3.2 (12 Dec 2020):


  • Added 3 more illustrations
  • Add License Agreement card
  • Add Social Media card


v1.2.1:


  • Fix the thumbnail


v1.2.0:


  • Added 3 more illustrations


v1.1.0:


  • Added 2 more illustrations
  • Minor fix


v1.0.0:


  • Initial release!
", "version_id": "60438", "version": "12", "created_at": "2020-09-22T04:39:45.719Z", "duplicate_count": 213111, "like_count": 7766, "thumbnail_url": "https://s3-alpha.figma.com/hub/file/1151541105/360c7092-f558-420d-b37f-9ff98ef61d7a-cover.png", "redirect_canvas_url": "/community/file/890095002328610853/canvas", "community_publishers": ["2523672"], "publisher": {"id": "2523672", "profile_handle": "zea", "follower_count": 464, "following_count": 6, "primary_user_id": "770168073021644197", "name": "Alzea", "img_url": "https://s3-alpha.figma.com/profile/9bb40d6d-f1d7-433c-b300-d2fe1b13016e", "badges": []}, "support_contact": null, "creator": {"id": "770168073021644197", "handle": "Alzea", "img_url": "https://s3-alpha.figma.com/profile/9bb40d6d-f1d7-433c-b300-d2fe1b13016e"}, "tags": [], "badges": [], "related_content": {"content": [], "types": ["by_creator"]}}, +{"id": "1211752161700087083", "name": "iPadOS 16 UI Kit for Figma", "description": "

About ✨

I'm excited to share this year's iPadOS 16 UI Kit for Figma with the community! This file contains hundreds of components, templates, demos, and everything else needed to help you start designing for iPadOS. Each component uses the latest version of Auto Layout, supports Component Properties, variants, Light and Dark Mode, and much more.


I can't wait to see what you'll create with these components!

", "version_id": "289240", "version": "3", "created_at": "2023-02-26T19:10:28.613Z", "duplicate_count": 1009, "like_count": 256, "thumbnail_url": "https://s3-alpha.figma.com/hub/file/3160180469/45404798-1c5a-46e5-ae29-065bb0ab2b9e-cover.png", "redirect_canvas_url": "/community/file/1211752161700087083/canvas", "community_publishers": ["938"], "publisher": {"id": "938", "profile_handle": "joey", "follower_count": 12182, "following_count": 1, "primary_user_id": "623995712489101040", "name": "Joey Banks", "img_url": "https://s3-alpha.figma.com/profile/a96c6fbe-fc35-48df-a1b7-41511b1695f5", "badges": []}, "support_contact": "support@baselinedesign.io", "creator": {"id": "623995712489101040", "handle": "Joey Banks", "img_url": "https://s3-alpha.figma.com/profile/a96c6fbe-fc35-48df-a1b7-41511b1695f5"}, "tags": ["apple", "appstore", "ios", "ipados", "keyboard", "library", "lockscreen", "message", "safari", "settings"], "badges": [], "related_content": {"content": ["1121065701252736567", "834093248798603357", "984106517828363349"], "types": ["by_creator"]}}, +{"id": "1208110531299974704", "name": "coolicons PRO | 1.320+ Carefully Designed Icons | Duotone, Duocolor, Line Icons", "description": "

coolicons PRO | 1.320+ Carefully Designed Icons


Three Styles: Line, Duotone, Duocolor, organized in Variants!


coolicons PRO is a carefully designed collection of 1.320+ icons with a focus on simplicity and consistency. Perfectly suited for web, application and mobile design.


✨ 1.320+ Icons

coolicons PRO comes in three styles, Duotone, Duocolor, Line Icons, that are empowered by Figma's Variants, allowing you to swap styles effortlessly.


🌈  Full Customization with coolicons PRO

Includes all source icons with live corners, duotone and duocolor icons. Easily change stroke weight or corner radius of any icon.


❤️ Created in Figma, Made for Figma!

All icons respect Figma’s component overrides like stroke and color changes. Crafted pixel precise with a 2px stroke and neatly organized in variants.


✅ 24×24 Grid

Each icon has been carefully crafted with love and attention to detail, ensuring that every icon is visually consistent.


🌚 Choose your Side! Dark or Light?

All three icon styles are also placed separately on their own pages in dark or light themes. Bulk select the icons you want and convert them into components.


Support my work and get coolicons PRO


🌈 Visit coolicons.cool


💛 Made by Kryston Schwarze

", "version_id": "283741", "version": "16", "created_at": "2023-02-16T17:59:56.268Z", "duplicate_count": 704, "like_count": 178, "thumbnail_url": "https://s3-alpha.figma.com/hub/file/3118795253/51085a27-6a7f-496b-a399-49a9406920bd-cover.png", "redirect_canvas_url": "/community/file/1208110531299974704/canvas", "community_publishers": ["684894"], "publisher": {"id": "684894", "profile_handle": "kryston", "follower_count": 356, "following_count": 35, "primary_user_id": "618721935786092171", "name": "Kryston Schwarze", "img_url": "https://s3-alpha.figma.com/profile/e657ec1e-096e-47fc-ac28-10a1b8be0b90", "badges": []}, "support_contact": "kryston.schwarze@gmail.com", "creator": {"id": "618721935786092171", "handle": "Kryston Schwarze", "img_url": "https://s3-alpha.figma.com/profile/e657ec1e-096e-47fc-ac28-10a1b8be0b90"}, "tags": ["assets", "coolicons", "dark", "duocolor", "duotone", "icon libary", "icons", "icon set", "light", "line icons", "variants"], "badges": [], "related_content": {"content": ["800815864899415771", "788675347108478517", "788671198471043636"], "types": ["by_creator"]}}, +] \ No newline at end of file From 5e786a13c712d397623d1e6e6151d1903b791721 Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Fri, 7 Jul 2023 20:00:35 +0900 Subject: [PATCH 27/35] update dest and trigger --- .github/workflows/codetest-report.yml | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/.github/workflows/codetest-report.yml b/.github/workflows/codetest-report.yml index e4eeeba4..1c1650f3 100644 --- a/.github/workflows/codetest-report.yml +++ b/.github/workflows/codetest-report.yml @@ -3,6 +3,8 @@ name: "@codetest/report" on: release: types: [published] + pull_request: + types: [opened, synchronize, closed] jobs: report: @@ -32,4 +34,5 @@ jobs: AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY_S3_CODETEST_REPORTS }} AWS_REGION: "us-west-1" SOURCE_DIR: "ci/report/.coverage" - DEST_DIR: "${{ github.event.release.tag_name }}" + # dest dir is commit hash + DEST_DIR: "${{ github.sha }}" From 97a866a1775a639af2d9d57b54c4ab15fed00d50 Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Fri, 7 Jul 2023 20:06:02 +0900 Subject: [PATCH 28/35] update dirs --- ci/report/configs/report.config.max.js | 4 ++-- ci/report/configs/report.config.med.js | 4 ++-- ci/report/configs/report.config.min.js | 4 ++-- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/ci/report/configs/report.config.max.js b/ci/report/configs/report.config.max.js index 7a9ae274..ca129478 100644 --- a/ci/report/configs/report.config.max.js +++ b/ci/report/configs/report.config.max.js @@ -1,7 +1,7 @@ const path = require("path"); module.exports = { - sample: path.join(__dirname, "samples-50.json"), - outDir: path.join(__dirname, ".coverage"), + sample: path.join(__dirname, "../samples-50.json"), + outDir: path.join(__dirname, "../.coverage"), skipIfReportExists: false, }; diff --git a/ci/report/configs/report.config.med.js b/ci/report/configs/report.config.med.js index 0fed0e7d..19287c3c 100644 --- a/ci/report/configs/report.config.med.js +++ b/ci/report/configs/report.config.med.js @@ -1,7 +1,7 @@ const path = require("path"); module.exports = { - sample: path.join(__dirname, "samples-10.json"), - outDir: path.join(__dirname, ".coverage"), + sample: path.join(__dirname, "../samples-10.json"), + outDir: path.join(__dirname, "../.coverage"), skipIfReportExists: false, }; diff --git a/ci/report/configs/report.config.min.js b/ci/report/configs/report.config.min.js index d401139a..2aded039 100644 --- a/ci/report/configs/report.config.min.js +++ b/ci/report/configs/report.config.min.js @@ -1,7 +1,7 @@ const path = require("path"); module.exports = { - sample: path.join(__dirname, "samples-5.json"), - outDir: path.join(__dirname, ".coverage"), + sample: path.join(__dirname, "../samples-5.json"), + outDir: path.join(__dirname, "../.coverage"), skipIfReportExists: false, }; From 7f608ac891d587c789428af76fcf51c2b7b19e46 Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Fri, 7 Jul 2023 20:09:59 +0900 Subject: [PATCH 29/35] fix json --- ci/report/samples-5.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ci/report/samples-5.json b/ci/report/samples-5.json index d3f515fa..c60a48ec 100644 --- a/ci/report/samples-5.json +++ b/ci/report/samples-5.json @@ -3,5 +3,5 @@ {"id": "778763161265841481", "name": "Material 2 Design Kit", "description": "

Customize and Create

Material Design's Baseline Design Kit provides all you need to create beautiful apps, complete with components and theming guidance.


Suggestions and/or feedback? Ping us @materialdesign on Twitter.


Changelog

10.27.21

  • This kit is no longer updated by the Material Design team. For the newest iteration of the Material Design Kit, please use the Material 3 Design Kit. For more details about Material Design 3, check out Material.io


08.24.21 V1.3

  • Fixed a bug that prevented users from theming the full kit


07.14.21 V1.2

     Updates:

  • Updated Snackbar
  • Updated Switches
  • Updated Sliders
  • Updated Text Fields
  • Updated Button + Chip elevation
  • Updated Switches


06.28.21 V1.1

     Updates:

  • Added autolayout to components
", "version_id": "69467", "version": "8", "created_at": "2019-11-19T23:26:46.362Z", "duplicate_count": 341590, "like_count": 7721, "thumbnail_url": "https://s3-alpha.figma.com/hub/file/1243826780/733e5f32-55ba-4d02-adf9-54d6e041dcff-cover.png", "redirect_canvas_url": "/community/file/778763161265841481/canvas", "community_publishers": ["2555098"], "publisher": {"id": "2555098", "profile_handle": "materialdesign", "follower_count": 27922, "following_count": 0, "primary_user_id": "771462962926009319", "name": "Material Design", "img_url": "https://s3-alpha.figma.com/profile/77d92d28-8203-4dbb-9a95-9d81cacbc6ce", "badges": ["figma_partner"]}, "support_contact": null, "creator": {"id": "771462962926009319", "handle": "Material Design", "img_url": "https://s3-alpha.figma.com/profile/77d92d28-8203-4dbb-9a95-9d81cacbc6ce"}, "tags": ["android", "google", "material", "mobile", "stickersheet", "system", "ui kit"], "badges": [], "related_content": {"content": ["1035203688168086460", "1164313362327941158", "1215441112935711382"], "types": ["by_creator"]}}, {"id": "890095002328610853", "name": "SALY - 3D Illustration Pack", "description": "

Collection of high-quality 3D illustrations, hand-crafted and full of personalities. FREE to use for your exploration or personal project.


Over 30 illustrations and will keep updated in the future. Enjoy!


Work Inquiry: talk@hellozea.com


------------------------------


Changelog:


v1.7.3 (23 September 2021):


  • Added 3 more illustrations


v1.6.3 (11 May 2021):


  • Added 1 more illustrations


v1.5.3 (4 May 2021):


  • Added 10 more illustrations, wow!
  • Added my email for work inquiry
  • Minor fix here and there


v1.4.2 (11 January 2021):


  • Happy new year guys!
  • Added 7 more illustrations, wow!
  • Minor fix here and there


v1.3.2 (12 Dec 2020):


  • Added 3 more illustrations
  • Add License Agreement card
  • Add Social Media card


v1.2.1:


  • Fix the thumbnail


v1.2.0:


  • Added 3 more illustrations


v1.1.0:


  • Added 2 more illustrations
  • Minor fix


v1.0.0:


  • Initial release!
", "version_id": "60438", "version": "12", "created_at": "2020-09-22T04:39:45.719Z", "duplicate_count": 213111, "like_count": 7766, "thumbnail_url": "https://s3-alpha.figma.com/hub/file/1151541105/360c7092-f558-420d-b37f-9ff98ef61d7a-cover.png", "redirect_canvas_url": "/community/file/890095002328610853/canvas", "community_publishers": ["2523672"], "publisher": {"id": "2523672", "profile_handle": "zea", "follower_count": 464, "following_count": 6, "primary_user_id": "770168073021644197", "name": "Alzea", "img_url": "https://s3-alpha.figma.com/profile/9bb40d6d-f1d7-433c-b300-d2fe1b13016e", "badges": []}, "support_contact": null, "creator": {"id": "770168073021644197", "handle": "Alzea", "img_url": "https://s3-alpha.figma.com/profile/9bb40d6d-f1d7-433c-b300-d2fe1b13016e"}, "tags": [], "badges": [], "related_content": {"content": [], "types": ["by_creator"]}}, {"id": "1211752161700087083", "name": "iPadOS 16 UI Kit for Figma", "description": "

About ✨

I'm excited to share this year's iPadOS 16 UI Kit for Figma with the community! This file contains hundreds of components, templates, demos, and everything else needed to help you start designing for iPadOS. Each component uses the latest version of Auto Layout, supports Component Properties, variants, Light and Dark Mode, and much more.


I can't wait to see what you'll create with these components!

", "version_id": "289240", "version": "3", "created_at": "2023-02-26T19:10:28.613Z", "duplicate_count": 1009, "like_count": 256, "thumbnail_url": "https://s3-alpha.figma.com/hub/file/3160180469/45404798-1c5a-46e5-ae29-065bb0ab2b9e-cover.png", "redirect_canvas_url": "/community/file/1211752161700087083/canvas", "community_publishers": ["938"], "publisher": {"id": "938", "profile_handle": "joey", "follower_count": 12182, "following_count": 1, "primary_user_id": "623995712489101040", "name": "Joey Banks", "img_url": "https://s3-alpha.figma.com/profile/a96c6fbe-fc35-48df-a1b7-41511b1695f5", "badges": []}, "support_contact": "support@baselinedesign.io", "creator": {"id": "623995712489101040", "handle": "Joey Banks", "img_url": "https://s3-alpha.figma.com/profile/a96c6fbe-fc35-48df-a1b7-41511b1695f5"}, "tags": ["apple", "appstore", "ios", "ipados", "keyboard", "library", "lockscreen", "message", "safari", "settings"], "badges": [], "related_content": {"content": ["1121065701252736567", "834093248798603357", "984106517828363349"], "types": ["by_creator"]}}, -{"id": "1208110531299974704", "name": "coolicons PRO | 1.320+ Carefully Designed Icons | Duotone, Duocolor, Line Icons", "description": "

coolicons PRO | 1.320+ Carefully Designed Icons


Three Styles: Line, Duotone, Duocolor, organized in Variants!


coolicons PRO is a carefully designed collection of 1.320+ icons with a focus on simplicity and consistency. Perfectly suited for web, application and mobile design.


✨ 1.320+ Icons

coolicons PRO comes in three styles, Duotone, Duocolor, Line Icons, that are empowered by Figma's Variants, allowing you to swap styles effortlessly.


🌈  Full Customization with coolicons PRO

Includes all source icons with live corners, duotone and duocolor icons. Easily change stroke weight or corner radius of any icon.


❤️ Created in Figma, Made for Figma!

All icons respect Figma’s component overrides like stroke and color changes. Crafted pixel precise with a 2px stroke and neatly organized in variants.


✅ 24×24 Grid

Each icon has been carefully crafted with love and attention to detail, ensuring that every icon is visually consistent.


🌚 Choose your Side! Dark or Light?

All three icon styles are also placed separately on their own pages in dark or light themes. Bulk select the icons you want and convert them into components.


Support my work and get coolicons PRO


🌈 Visit coolicons.cool


💛 Made by Kryston Schwarze

", "version_id": "283741", "version": "16", "created_at": "2023-02-16T17:59:56.268Z", "duplicate_count": 704, "like_count": 178, "thumbnail_url": "https://s3-alpha.figma.com/hub/file/3118795253/51085a27-6a7f-496b-a399-49a9406920bd-cover.png", "redirect_canvas_url": "/community/file/1208110531299974704/canvas", "community_publishers": ["684894"], "publisher": {"id": "684894", "profile_handle": "kryston", "follower_count": 356, "following_count": 35, "primary_user_id": "618721935786092171", "name": "Kryston Schwarze", "img_url": "https://s3-alpha.figma.com/profile/e657ec1e-096e-47fc-ac28-10a1b8be0b90", "badges": []}, "support_contact": "kryston.schwarze@gmail.com", "creator": {"id": "618721935786092171", "handle": "Kryston Schwarze", "img_url": "https://s3-alpha.figma.com/profile/e657ec1e-096e-47fc-ac28-10a1b8be0b90"}, "tags": ["assets", "coolicons", "dark", "duocolor", "duotone", "icon libary", "icons", "icon set", "light", "line icons", "variants"], "badges": [], "related_content": {"content": ["800815864899415771", "788675347108478517", "788671198471043636"], "types": ["by_creator"]}}, +{"id": "1208110531299974704", "name": "coolicons PRO | 1.320+ Carefully Designed Icons | Duotone, Duocolor, Line Icons", "description": "

coolicons PRO | 1.320+ Carefully Designed Icons


Three Styles: Line, Duotone, Duocolor, organized in Variants!


coolicons PRO is a carefully designed collection of 1.320+ icons with a focus on simplicity and consistency. Perfectly suited for web, application and mobile design.


✨ 1.320+ Icons

coolicons PRO comes in three styles, Duotone, Duocolor, Line Icons, that are empowered by Figma's Variants, allowing you to swap styles effortlessly.


🌈  Full Customization with coolicons PRO

Includes all source icons with live corners, duotone and duocolor icons. Easily change stroke weight or corner radius of any icon.


❤️ Created in Figma, Made for Figma!

All icons respect Figma’s component overrides like stroke and color changes. Crafted pixel precise with a 2px stroke and neatly organized in variants.


✅ 24×24 Grid

Each icon has been carefully crafted with love and attention to detail, ensuring that every icon is visually consistent.


🌚 Choose your Side! Dark or Light?

All three icon styles are also placed separately on their own pages in dark or light themes. Bulk select the icons you want and convert them into components.


Support my work and get coolicons PRO


🌈 Visit coolicons.cool


💛 Made by Kryston Schwarze

", "version_id": "283741", "version": "16", "created_at": "2023-02-16T17:59:56.268Z", "duplicate_count": 704, "like_count": 178, "thumbnail_url": "https://s3-alpha.figma.com/hub/file/3118795253/51085a27-6a7f-496b-a399-49a9406920bd-cover.png", "redirect_canvas_url": "/community/file/1208110531299974704/canvas", "community_publishers": ["684894"], "publisher": {"id": "684894", "profile_handle": "kryston", "follower_count": 356, "following_count": 35, "primary_user_id": "618721935786092171", "name": "Kryston Schwarze", "img_url": "https://s3-alpha.figma.com/profile/e657ec1e-096e-47fc-ac28-10a1b8be0b90", "badges": []}, "support_contact": "kryston.schwarze@gmail.com", "creator": {"id": "618721935786092171", "handle": "Kryston Schwarze", "img_url": "https://s3-alpha.figma.com/profile/e657ec1e-096e-47fc-ac28-10a1b8be0b90"}, "tags": ["assets", "coolicons", "dark", "duocolor", "duotone", "icon libary", "icons", "icon set", "light", "line icons", "variants"], "badges": [], "related_content": {"content": ["800815864899415771", "788675347108478517", "788671198471043636"], "types": ["by_creator"]}} ] \ No newline at end of file From 44d82c3b749ac8b302438f01d93e7829341b736f Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Fri, 7 Jul 2023 20:19:30 +0900 Subject: [PATCH 30/35] add comment --- .github/workflows/codetest-report.yml | 10 +++++++++ ci/report/comment.js | 29 +++++++++++++++++++++++++++ 2 files changed, 39 insertions(+) create mode 100644 ci/report/comment.js diff --git a/.github/workflows/codetest-report.yml b/.github/workflows/codetest-report.yml index 1c1650f3..ee18e894 100644 --- a/.github/workflows/codetest-report.yml +++ b/.github/workflows/codetest-report.yml @@ -20,11 +20,13 @@ jobs: run: | yarn build - name: run report + id: report working-directory: ci/report run: | npm ci node report.js - name: upload report to s3 + id: upload uses: jakejarvis/s3-sync-action@master with: args: --acl public-read --follow-symlinks --delete @@ -36,3 +38,11 @@ jobs: SOURCE_DIR: "ci/report/.coverage" # dest dir is commit hash DEST_DIR: "${{ github.sha }}" + - name: comment + id: comment + env: + GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} + working-directory: ci/report + run: | + npm ci + node comment.js diff --git a/ci/report/comment.js b/ci/report/comment.js new file mode 100644 index 00000000..765c7540 --- /dev/null +++ b/ci/report/comment.js @@ -0,0 +1,29 @@ +const github = require("@actions/github"); +const octokit = github.getOctokit(process.env.GITHUB_TOKEN); +const context = github.context; + +const STEP = "test"; + +let message; + +if (context.payload.pull_request && context.eventName === "pull_request") { + const conclusion = steps[STEP].conclusion; + + switch (conclusion) { + case "success": + message = "Your PR passed all tests :tada:"; + break; + case "failure": + message = "Your PR failed some tests :x:"; + break; + case "skipped": + break; + } + + // add a comment to the PR + await octokit.issues.createComment({ + ...context.repo, + issue_number: context.payload.pull_request.number, + body: message, + }); +} From 1ea3605edbae1ac2a554887a1f2426013c7a1d0b Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Fri, 7 Jul 2023 20:22:10 +0900 Subject: [PATCH 31/35] update comment --- ci/report/comment.js | 10 +++++++--- ci/report/report.js | 1 - 2 files changed, 7 insertions(+), 4 deletions(-) diff --git a/ci/report/comment.js b/ci/report/comment.js index 765c7540..1e74610f 100644 --- a/ci/report/comment.js +++ b/ci/report/comment.js @@ -1,17 +1,21 @@ const github = require("@actions/github"); const octokit = github.getOctokit(process.env.GITHUB_TOKEN); const context = github.context; +const { sha } = context; -const STEP = "test"; +const STEP_REPORT = "report"; +const STEP_UPLOAD = "upload"; + +const report_url = `https://code.grida.co/reports/${sha}`; let message; if (context.payload.pull_request && context.eventName === "pull_request") { - const conclusion = steps[STEP].conclusion; + const conclusion = steps[STEP_REPORT].conclusion; switch (conclusion) { case "success": - message = "Your PR passed all tests :tada:"; + message = `Report available at ${report_url} :tada:`; break; case "failure": message = "Your PR failed some tests :x:"; diff --git a/ci/report/report.js b/ci/report/report.js index 6631eb86..a2739aef 100644 --- a/ci/report/report.js +++ b/ci/report/report.js @@ -4,7 +4,6 @@ const core = require("@actions/core"); const github = require("@actions/github"); const context = github.context; -const commitHash = context.sha; let releaseName, releaseVersion, pullRequestNumber; From 2f18e737c67c1b6fcc3d5d6cb7b3c15ef9943f0f Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Fri, 7 Jul 2023 20:36:39 +0900 Subject: [PATCH 32/35] fix comment --- ci/report/comment.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/ci/report/comment.js b/ci/report/comment.js index 1e74610f..876d2f19 100644 --- a/ci/report/comment.js +++ b/ci/report/comment.js @@ -6,7 +6,7 @@ const { sha } = context; const STEP_REPORT = "report"; const STEP_UPLOAD = "upload"; -const report_url = `https://code.grida.co/reports/${sha}`; +const report_url = `https://code.grida.co/tests/reports/${sha}`; let message; @@ -25,7 +25,7 @@ if (context.payload.pull_request && context.eventName === "pull_request") { } // add a comment to the PR - await octokit.issues.createComment({ + octokit.issues.createComment({ ...context.repo, issue_number: context.payload.pull_request.number, body: message, From f98f10ce0640c8e5992f62801dacd4dba0169c55 Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Fri, 7 Jul 2023 20:58:03 +0900 Subject: [PATCH 33/35] fix comment --- .github/workflows/codetest-report.yml | 1 + ci/report/comment.js | 6 ++---- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/.github/workflows/codetest-report.yml b/.github/workflows/codetest-report.yml index ee18e894..2e9a2d2a 100644 --- a/.github/workflows/codetest-report.yml +++ b/.github/workflows/codetest-report.yml @@ -42,6 +42,7 @@ jobs: id: comment env: GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} + STATUS: ${{ steps.report.outputs.STATUS }} working-directory: ci/report run: | npm ci diff --git a/ci/report/comment.js b/ci/report/comment.js index 876d2f19..219e9dd7 100644 --- a/ci/report/comment.js +++ b/ci/report/comment.js @@ -3,15 +3,12 @@ const octokit = github.getOctokit(process.env.GITHUB_TOKEN); const context = github.context; const { sha } = context; -const STEP_REPORT = "report"; -const STEP_UPLOAD = "upload"; - const report_url = `https://code.grida.co/tests/reports/${sha}`; let message; if (context.payload.pull_request && context.eventName === "pull_request") { - const conclusion = steps[STEP_REPORT].conclusion; + const conclusion = process.env.STATUS || "unknown"; switch (conclusion) { case "success": @@ -21,6 +18,7 @@ if (context.payload.pull_request && context.eventName === "pull_request") { message = "Your PR failed some tests :x:"; break; case "skipped": + case "unknown": break; } From 7778ba3863844c4838f11088f2c091caa945896c Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Fri, 7 Jul 2023 21:25:49 +0900 Subject: [PATCH 34/35] fix comment --- ci/report/comment.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ci/report/comment.js b/ci/report/comment.js index 219e9dd7..8389bb97 100644 --- a/ci/report/comment.js +++ b/ci/report/comment.js @@ -23,7 +23,7 @@ if (context.payload.pull_request && context.eventName === "pull_request") { } // add a comment to the PR - octokit.issues.createComment({ + octokit.rest.issues.createComment({ ...context.repo, issue_number: context.payload.pull_request.number, body: message, From 4091531c1900dd869eae416a23c60dc0d2a74a33 Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Fri, 10 Nov 2023 18:12:46 +0900 Subject: [PATCH 35/35] trigger ci --- ci/report/README.md | 3 +++ yarn.lock | 7 ------- 2 files changed, 3 insertions(+), 7 deletions(-) diff --git a/ci/report/README.md b/ci/report/README.md index e69de29b..ae76fcb6 100644 --- a/ci/report/README.md +++ b/ci/report/README.md @@ -0,0 +1,3 @@ +# Reports Generating + +This modules enables reports generation based on the current engine, enabling developers to visually track the engine features visually, by comparing the generated outputs, compared using vision diff. diff --git a/yarn.lock b/yarn.lock index eb59b640..c979743d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -14020,13 +14020,6 @@ fastparse@^1.1.2: resolved "https://registry.npmjs.org/fastparse/-/fastparse-1.1.2.tgz" integrity sha512-483XLLxTVIwWK3QTrMGRqUfUpoOs/0hbQrl2oz4J0pAcm3A3bu84wxTFqGqkJzewCLdME38xJLJAxBABfQT8sQ== -fastq@^1.15.0: - version "1.15.0" - resolved "https://registry.yarnpkg.com/fastq/-/fastq-1.15.0.tgz#d04d07c6a2a68fe4599fea8d2e103a937fae6b3a" - integrity sha512-wBrocU2LCXXa+lWBt8RoIRD89Fi8OdABODa/kEnyeyjS5aZO5/GNvI5sEINADqP/h8M29UHTHUb53sUu5Ihqdw== - dependencies: - reusify "^1.0.4" - fastq@^1.6.0: version "1.13.0" resolved "https://registry.npmjs.org/fastq/-/fastq-1.13.0.tgz"