├── .npmignore
├── .babelrc
├── .flowconfig
├── .github
├── PULL_REQUEST_TEMPLATE.md
└── ISSUE_TEMPLATE.md
├── src
├── __tests__
│ ├── __snapshots__
│ │ └── index.test.js.snap
│ └── index.test.js
└── index.js
├── LICENSE
├── webpack.build.js
├── README.md
├── .gitignore
├── .circleci
└── config.yml
└── package.json
/.npmignore:
--------------------------------------------------------------------------------
1 | .circleci/
2 | .github/
3 | example/
4 | node_modules/
5 |
--------------------------------------------------------------------------------
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": ["@babel/env", "@babel/preset-flow", "@babel/react"]
3 | }
4 |
--------------------------------------------------------------------------------
/.flowconfig:
--------------------------------------------------------------------------------
1 | [ignore]
2 |
3 | [include]
4 |
5 | [libs]
6 |
7 | [lints]
8 |
9 | [options]
10 |
--------------------------------------------------------------------------------
/.github/PULL_REQUEST_TEMPLATE.md:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE.md:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/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 |
10 | `;
11 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | // @flow
2 |
3 | import * as React from 'react';
4 |
5 | type Props = Object & {
6 | url: string,
7 | };
8 |
9 | const FigmaEmbed = ({ url, ...props }: Props) => {
10 | const src = `https://www.figma.com/embed?embed_host=astra&url=${url}`;
11 |
12 | return (
13 |
14 | );
15 | };
16 |
17 | export default FigmaEmbed;
18 |
--------------------------------------------------------------------------------
/src/__tests__/index.test.js:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import renderer from 'react-test-renderer';
3 | import FigmaEmbed from '../index';
4 |
5 | describe('FigmaEmbed', () => {
6 | it('renders the iframe correctly', () => {
7 | const tree = renderer
8 | .create(
9 |
10 | )
11 | .toJSON();
12 |
13 | expect(tree).toMatchSnapshot();
14 | });
15 | });
16 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/webpack.build.js:
--------------------------------------------------------------------------------
1 | const path = require('path');
2 | const BASE_DIR = process.cwd();
3 | const COMPONENT_NAME = 'FigmaEmbed';
4 | let COMPONENT_FILE = 'react-figma-embed';
5 |
6 | const config = {
7 | mode: 'production',
8 | optimization: {},
9 | };
10 |
11 | function getPackageMain() {
12 | return require(path.resolve(BASE_DIR, 'package.json')).main;
13 | }
14 |
15 | if (process.env.MINIFY) {
16 | config.optimization.minimize = true;
17 | COMPONENT_FILE += '.min';
18 | }
19 |
20 | module.exports = {
21 | ...config,
22 | entry: path.resolve(BASE_DIR, getPackageMain()),
23 | output: {
24 | filename: COMPONENT_FILE + '.js',
25 | path: path.resolve(BASE_DIR, 'dist/'),
26 | library: COMPONENT_NAME,
27 | libraryTarget: 'umd',
28 | },
29 | externals: {
30 | react: 'React',
31 | 'react-dom': 'ReactDOM',
32 | },
33 | module: {
34 | rules: [
35 | {
36 | test: /\.js$/,
37 | exclude: /(node_modules|bower_components)/,
38 | use: {
39 | loader: 'babel-loader',
40 | options: {
41 | presets: ['@babel/preset-env'],
42 | },
43 | },
44 | },
45 | ],
46 | },
47 | plugins: [],
48 | };
49 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # react-figma-embed [](https://circleci.com/gh/nagelflorian/react-figma-embed/tree/master) [](https://www.npmjs.com/package/react-figma-embed) [](https://codeclimate.com/github/nagelflorian/react-figma-embed/maintainability) [](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 |
--------------------------------------------------------------------------------
/.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 |
--------------------------------------------------------------------------------
/.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 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------