├── .babelrc ├── .circleci └── config.yml ├── .flowconfig ├── .github ├── ISSUE_TEMPLATE.md └── PULL_REQUEST_TEMPLATE.md ├── .gitignore ├── .npmignore ├── LICENSE ├── README.md ├── package.json ├── src ├── __tests__ │ ├── __snapshots__ │ │ └── index.test.js.snap │ └── index.test.js └── index.js ├── webpack.build.js └── yarn.lock /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["@babel/env", "@babel/preset-flow", "@babel/react"] 3 | } 4 | -------------------------------------------------------------------------------- /.circleci/config.yml: -------------------------------------------------------------------------------- 1 | # Javascript Node CircleCI 2.0 configuration file 2 | # 3 | # Check https://circleci.com/docs/2.0/language-javascript/ for more details 4 | # 5 | version: 2.1 6 | jobs: 7 | build: 8 | docker: 9 | - image: circleci/node:lts 10 | working_directory: ~/repo 11 | parallelism: 4 12 | steps: 13 | - checkout 14 | - restore_cache: 15 | name: Restore Yarn Package Cache 16 | keys: 17 | - yarn-packages-{{ checksum "yarn.lock" }} 18 | - run: 19 | name: Install Dependencies 20 | command: yarn install --frozen-lockfile 21 | - save_cache: 22 | name: Save Yarn Package Cache 23 | key: yarn-packages-{{ checksum "yarn.lock" }} 24 | paths: 25 | - ~/.cache/yarn 26 | - run: 27 | name: Type-check 28 | command: yarn run type-check 29 | - run: 30 | name: Test 31 | command: yarn run test --ci --coverage --reporters=default --reporters=jest-junit 32 | environment: 33 | JEST_JUNIT_OUTPUT_DIR: ./reports/junit/ 34 | - run: 35 | name: Setup Code Climate test-reporter 36 | command: | 37 | curl -L https://codeclimate.com/downloads/test-reporter/test-reporter-latest-linux-amd64 > ./cc-test-reporter && \ 38 | chmod +x ./cc-test-reporter 39 | - run: 40 | name: Collect test coverage 41 | command: ./cc-test-reporter after-build -t lcov --debug 42 | - run: 43 | name: Build code 44 | command: npm run build 45 | - run: 46 | name: Bundle code 47 | command: npm run bundle 48 | - store_test_results: 49 | path: ./reports/junit/ 50 | - store_artifacts: 51 | path: ./reports/junit/ 52 | -------------------------------------------------------------------------------- /.flowconfig: -------------------------------------------------------------------------------- 1 | [ignore] 2 | 3 | [include] 4 | 5 | [libs] 6 | 7 | [lints] 8 | 9 | [options] 10 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /.github/PULL_REQUEST_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Runtime data 9 | pids 10 | *.pid 11 | *.seed 12 | *.pid.lock 13 | 14 | # Directory for instrumented libs generated by jscoverage/JSCover 15 | lib-cov 16 | 17 | # Coverage directory used by tools like istanbul 18 | coverage 19 | 20 | # nyc test coverage 21 | .nyc_output 22 | 23 | # Test report directory used by Jest-JUnit 24 | reports/ 25 | 26 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 27 | .grunt 28 | 29 | # Bower dependency directory (https://bower.io/) 30 | bower_components 31 | 32 | # node-waf configuration 33 | .lock-wscript 34 | 35 | # Compiled binary addons (https://nodejs.org/api/addons.html) 36 | build/Release 37 | 38 | # Dependency directories 39 | node_modules/ 40 | jspm_packages/ 41 | 42 | # Typescript v1 declaration files 43 | typings/ 44 | 45 | # Optional npm cache directory 46 | .npm 47 | 48 | # Optional eslint cache 49 | .eslintcache 50 | 51 | # Optional REPL history 52 | .node_repl_history 53 | 54 | # Output of 'npm pack' 55 | *.tgz 56 | 57 | # Yarn Integrity file 58 | .yarn-integrity 59 | 60 | # dotenv environment variables file 61 | .env 62 | 63 | dist/ 64 | example/ 65 | lib/ 66 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | .circleci/ 2 | .github/ 3 | example/ 4 | node_modules/ 5 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2017 Florian Nagel 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # react-figma-embed [![CircleCI](https://circleci.com/gh/nagelflorian/react-figma-embed/tree/master.svg?style=svg)](https://circleci.com/gh/nagelflorian/react-figma-embed/tree/master) [![npm](https://img.shields.io/npm/v/react-figma-embed.svg)](https://www.npmjs.com/package/react-figma-embed) [![Maintainability](https://api.codeclimate.com/v1/badges/b6e196dcd12a5f11c88f/maintainability)](https://codeclimate.com/github/nagelflorian/react-figma-embed/maintainability) [![Test Coverage](https://api.codeclimate.com/v1/badges/b6e196dcd12a5f11c88f/test_coverage)](https://codeclimate.com/github/nagelflorian/react-figma-embed/test_coverage) 2 | 3 | React component to render [Figma live embeds](https://www.figma.com/platform). 4 | 5 | ## Install 6 | 7 | ```console 8 | npm install react-figma-embed --save 9 | ``` 10 | 11 | ## Quick start 12 | 13 | ```js 14 | import React, { Component } from 'react'; 15 | import { render } from 'react-dom'; 16 | import FigmaEmbed from 'react-figma-embed'; 17 | 18 | class App extends Component { 19 | render() { 20 | return ( 21 | 22 | ); 23 | } 24 | } 25 | 26 | render(, document.getElementById('app')); 27 | ``` 28 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-figma-embed", 3 | "version": "1.0.1", 4 | "description": "React component to render figma live embeds", 5 | "main": "lib/index.js", 6 | "files": [ 7 | "dist", 8 | "lib" 9 | ], 10 | "scripts": { 11 | "build:umd": "webpack --devtool source-map --config webpack.build.js", 12 | "build:umd:min": "cross-env MINIFY=1 webpack --devtool source-map --config webpack.build.js", 13 | "build": "babel src/ --out-dir lib/ --ignore __tests__,__mocks__", 14 | "bundle": "mkdir -p dist && npm run build:umd && npm run build:umd:min", 15 | "test": "jest", 16 | "type-check": "node_modules/.bin/flow", 17 | "precommit": "lint-staged" 18 | }, 19 | "keywords": [ 20 | "figma", 21 | "figma-embed", 22 | "figma-live-embed", 23 | "figma-react", 24 | "react-embed" 25 | ], 26 | "author": "Florian Nagel (https://floriannagel.xyz/)", 27 | "license": "MIT", 28 | "repository": { 29 | "type": "git", 30 | "url": "git+https://github.com/nagelflorian/react-figma-embed.git" 31 | }, 32 | "bugs": { 33 | "url": "https://github.com/nagelflorian/react-figma-embed/issues" 34 | }, 35 | "homepage": "https://github.com/nagelflorian/react-figma-embed#readme", 36 | "lint-staged": { 37 | "*.js": [ 38 | "yarn run prettier", 39 | "git add" 40 | ] 41 | }, 42 | "jest": { 43 | "modulePathIgnorePatterns": [ 44 | "/example/" 45 | ] 46 | }, 47 | "peerDependencies": { 48 | "react": "^0.14.7 || ^15.0.0 || ^16.0.0", 49 | "react-dom": "^0.14.7 || ^15.0.0 || ^16.0.0" 50 | }, 51 | "devDependencies": { 52 | "@babel/cli": "^7.7.0", 53 | "@babel/core": "^7.7.0", 54 | "@babel/preset-env": "^7.7.1", 55 | "@babel/preset-flow": "^7.0.0", 56 | "@babel/preset-react": "^7.0.0", 57 | "babel-loader": "^8.0.6", 58 | "cross-env": "^7.0.2", 59 | "flow-bin": "^0.122.0", 60 | "husky": "^4.2.3", 61 | "jest": "^25.2.7", 62 | "jest-junit": "^10.0.0", 63 | "lint-staged": "^9.4.3", 64 | "prettier": "^2.0.2", 65 | "react": "^16.13.1", 66 | "react-test-renderer": "^16.13.1", 67 | "webpack": "^5.94.0", 68 | "webpack-cli": "^3.3.10", 69 | "webpack-dev-server": "^3.9.0" 70 | } 71 | } 72 | -------------------------------------------------------------------------------- /src/__tests__/__snapshots__/index.test.js.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`FigmaEmbed renders the iframe correctly 1`] = ` 4 |