├── examples ├── create-react-app │ ├── .env.example │ ├── public │ │ ├── robots.txt │ │ ├── favicon.ico │ │ ├── logo192.png │ │ ├── logo512.png │ │ ├── manifest.json │ │ └── index.html │ ├── src │ │ ├── setupTests.js │ │ ├── index.js │ │ ├── App.test.js │ │ ├── index.css │ │ ├── App.css │ │ ├── App.js │ │ └── logo.svg │ ├── .gitignore │ ├── package.json │ └── README.md └── fetch-from-url │ ├── .env.example │ ├── src │ ├── Fetch.css │ ├── index.js │ ├── index.css │ └── Fetch.js │ ├── .gitignore │ ├── public │ ├── manifest.json │ ├── index.html │ └── data.json │ ├── package.json │ └── README.md ├── tslint.json ├── .prettierrc ├── .npmignore ├── jest.config.js ├── src ├── renderers │ ├── delimiter │ │ ├── __snapshots__ │ │ │ └── index.test.tsx.snap │ │ ├── index.tsx │ │ └── index.test.tsx │ ├── raw │ │ ├── index.tsx │ │ ├── __snapshots__ │ │ │ └── index.test.tsx.snap │ │ └── index.test.tsx │ ├── header │ │ ├── __snapshots__ │ │ │ └── index.test.tsx.snap │ │ ├── index.tsx │ │ └── index.test.tsx │ ├── paragraph │ │ ├── __snapshots__ │ │ │ └── index.test.tsx.snap │ │ ├── index.tsx │ │ └── index.test.tsx │ ├── code │ │ ├── index.tsx │ │ ├── __snapshots__ │ │ │ └── index.test.tsx.snap │ │ └── index.test.tsx │ ├── embed │ │ ├── __snapshots__ │ │ │ └── index.test.tsx.snap │ │ ├── index.test.tsx │ │ └── index.tsx │ ├── quote │ │ ├── index.test.tsx │ │ ├── __snapshots__ │ │ │ └── index.test.tsx.snap │ │ └── index.tsx │ ├── list │ │ ├── index.tsx │ │ ├── index.test.tsx │ │ └── __snapshots__ │ │ │ └── index.test.tsx.snap │ ├── image │ │ ├── __snapshots__ │ │ │ └── index.test.tsx.snap │ │ ├── index.tsx │ │ └── index.test.tsx │ └── table │ │ ├── index.tsx │ │ ├── index.test.tsx │ │ └── __snapshots__ │ │ └── index.test.tsx.snap ├── index.tsx ├── __snapshots__ │ └── index.test.tsx.snap └── index.test.tsx ├── .github ├── ISSUE_TEMPLATE.md ├── workflows │ ├── continuous-integration.yml │ └── codeql-analysis.yml └── CONTRIBUTING.md ├── docs └── PUBLISH.md ├── LICENSE ├── package.json ├── .gitignore ├── README.md └── tsconfig.json /examples/create-react-app/.env.example: -------------------------------------------------------------------------------- 1 | SKIP_PREFLIGHT_CHECK=true -------------------------------------------------------------------------------- /examples/fetch-from-url/.env.example: -------------------------------------------------------------------------------- 1 | SKIP_PREFLIGHT_CHECK=true -------------------------------------------------------------------------------- /tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["tslint:recommended", "tslint-config-prettier"] 3 | } 4 | -------------------------------------------------------------------------------- /examples/fetch-from-url/src/Fetch.css: -------------------------------------------------------------------------------- 1 | .Fetch { 2 | margin: 0 auto; 3 | max-width: 960px; 4 | } -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "printWidth": 120, 3 | "trailingComma": "all", 4 | "singleQuote": true 5 | } 6 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | src 2 | examples 3 | jest.config.js 4 | tsconfig.json 5 | tslint.json 6 | .prettierrc 7 | .gitignore 8 | .github -------------------------------------------------------------------------------- /examples/create-react-app/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | preset: 'ts-jest', 3 | testEnvironment: 'node', 4 | testPathIgnorePatterns : [ 5 | "examples/*" 6 | ] 7 | }; -------------------------------------------------------------------------------- /examples/create-react-app/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/moveyourdigital/editorjs-blocks-react-renderer/HEAD/examples/create-react-app/public/favicon.ico -------------------------------------------------------------------------------- /examples/create-react-app/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/moveyourdigital/editorjs-blocks-react-renderer/HEAD/examples/create-react-app/public/logo192.png -------------------------------------------------------------------------------- /examples/create-react-app/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/moveyourdigital/editorjs-blocks-react-renderer/HEAD/examples/create-react-app/public/logo512.png -------------------------------------------------------------------------------- /src/renderers/delimiter/__snapshots__/index.test.tsx.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[` when receives a Delimiter block renders a
tag 1`] = ` 4 |
7 | `; 8 | -------------------------------------------------------------------------------- /examples/create-react-app/src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /examples/create-react-app/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | 6 | ReactDOM.render( 7 | 8 | 9 | , 10 | document.getElementById('root') 11 | ); 12 | -------------------------------------------------------------------------------- /examples/fetch-from-url/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import Fetch from './Fetch'; 5 | 6 | ReactDOM.render( 7 | 8 | 9 | , 10 | document.getElementById('root') 11 | ); 12 | -------------------------------------------------------------------------------- /examples/create-react-app/src/App.test.js: -------------------------------------------------------------------------------- 1 | import { render, screen } from '@testing-library/react'; 2 | import App from './App'; 3 | 4 | test('renders learn react link', () => { 5 | render(); 6 | const linkElement = screen.getByText(/learn react/i); 7 | expect(linkElement).toBeInTheDocument(); 8 | }); 9 | -------------------------------------------------------------------------------- /src/renderers/raw/index.tsx: -------------------------------------------------------------------------------- 1 | import HTMLReactParser from 'html-react-parser'; 2 | import React from 'react'; 3 | import { RenderFn } from '../..'; 4 | 5 | export interface RawBlockData { 6 | html: string; 7 | } 8 | 9 | const Raw: RenderFn = ({ data }) => { 10 | return <>{data?.html && HTMLReactParser(data.html)}; 11 | }; 12 | 13 | export default Raw; 14 | -------------------------------------------------------------------------------- /src/renderers/delimiter/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { RenderFnWithoutData } from '../..'; 3 | 4 | const Delimiter: RenderFnWithoutData = ({ className = '' }) => { 5 | const props: { 6 | [s: string]: string; 7 | } = {}; 8 | 9 | if (className) { 10 | props.className = className; 11 | } 12 | 13 | return
; 14 | }; 15 | 16 | export default Delimiter; 17 | -------------------------------------------------------------------------------- /src/renderers/raw/__snapshots__/index.test.tsx.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[` when receives a raw block renders content as HTML 1`] = ` 4 |
14 | Any HTML code 15 |
16 | `; 17 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | ### Purpose 2 | 3 | 6 | 7 | - New feature 8 | - New renderer 9 | - Bug fix 10 | - Documentation 11 | - Refactoring 12 | - Test Case 13 | - Other 14 | 15 | ### Description 16 | 17 | 20 | 21 | ### Possible solution 22 | 23 | 26 | -------------------------------------------------------------------------------- /src/renderers/delimiter/index.test.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { create } from 'react-test-renderer'; 3 | import Delimiter from '.'; 4 | 5 | describe('', () => { 6 | describe('when receives a Delimiter block', () => { 7 | it('renders a
tag', () => { 8 | expect(create().toJSON()).toMatchSnapshot(); 9 | }); 10 | }); 11 | }); 12 | -------------------------------------------------------------------------------- /src/renderers/header/__snapshots__/index.test.tsx.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`
when receives a header block with className renders a

1`] = ` 4 |

7 | Editor.js 8 |

9 | `; 10 | 11 | exports[`
when receives an header level 2 block renders a

tag 1`] = ` 12 |

13 | Editor.js 14 |

15 | `; 16 | -------------------------------------------------------------------------------- /src/renderers/paragraph/__snapshots__/index.test.tsx.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[` when receives a paragraph block renders a

tag 1`] = ` 4 |

5 | Hey. Meet the new 6 | 7 | Editor 8 | 9 | . On this page you can see it in action — try to edit this text. Source code of the page contains the example of connection and configuration. 10 |

11 | `; 12 | -------------------------------------------------------------------------------- /docs/PUBLISH.md: -------------------------------------------------------------------------------- 1 | # How to publish a new version? 2 | 3 | 1. Run tests (if there are any) 4 | 2. Update `version` in `package.json` according to Semver 5 | 3. Create a git tag according to Semver 6 | 4. Push the package to Github 7 | 5. Push the package to npm `npm publish` 8 | 6. Create release notes for every update 9 | 10 | Source: [How to publish packages to npm (the way the industry does things)](https://zellwk.com/blog/publish-to-npm/) -------------------------------------------------------------------------------- /examples/create-react-app/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /examples/fetch-from-url/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /examples/create-react-app/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /examples/fetch-from-url/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | 15 | img { 16 | width: 100%; 17 | height: auto; 18 | } -------------------------------------------------------------------------------- /src/renderers/raw/index.test.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { create } from 'react-test-renderer'; 3 | import Raw, { RawBlockData } from '.'; 4 | 5 | describe('', () => { 6 | describe('when receives a raw block', () => { 7 | const data: RawBlockData = { 8 | html: '
Any HTML code
', 9 | }; 10 | 11 | it('renders content as HTML', () => { 12 | expect(create().toJSON()).toMatchSnapshot(); 13 | }); 14 | }); 15 | }); 16 | -------------------------------------------------------------------------------- /src/renderers/paragraph/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import HTMLReactParser from 'html-react-parser'; 3 | import { RenderFn } from '../..'; 4 | 5 | export interface ParagraphBlockData { 6 | text: string; 7 | } 8 | 9 | const Paragraph: RenderFn = ({ data, className = '' }) => { 10 | const props: { 11 | [s: string]: string; 12 | } = {}; 13 | 14 | if (className) { 15 | props.className = className; 16 | } 17 | 18 | return

{data?.text && HTMLReactParser(data.text)}

; 19 | }; 20 | 21 | export default Paragraph; 22 | -------------------------------------------------------------------------------- /src/renderers/code/index.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { RenderFn } from '../..'; 3 | 4 | export interface CodeBlockData { 5 | code: string; 6 | lang?: string; 7 | } 8 | 9 | const Code: RenderFn = ({ data, className = '' }) => { 10 | const props: { 11 | [s: string]: string; 12 | } = {}; 13 | 14 | if (className) { 15 | props.className = className; 16 | } 17 | 18 | if (data?.lang) props.lang = data.lang; 19 | 20 | return 
{data?.code && {`${data.code}`}}
; 21 | }; 22 | 23 | export default Code; 24 | -------------------------------------------------------------------------------- /src/renderers/embed/__snapshots__/index.test.tsx.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[` when receives a Embed block with actions renders a
block with 53 | ) : ( 54 | 55 | {data?.source} 56 | 57 | )} 58 | {data?.caption &&
{HTMLReactParser(data.caption)}
} 59 |
60 | ); 61 | }; 62 | 63 | export default Embed; 64 | -------------------------------------------------------------------------------- /src/renderers/image/__snapshots__/index.test.tsx.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[` when receives a Image block with actions renders a
block with and
1`] = ` 4 |
7 | Deep in the <b>universe</b> 11 |
12 | Deep in the 13 | 14 | universe 15 | 16 |
17 |
18 | `; 19 | 20 | exports[` when receives a Image block without actions renders a
block with and
1`] = ` 21 |
22 | Deep in the universe 26 |
27 | Deep in the universe 28 |
29 |
30 | `; 31 | 32 | exports[` when receives a Image block without name renders a
block with and
1`] = ` 33 |
34 | Deep in the universe 38 |
39 | Deep in the universe 40 |
41 |
42 | `; 43 | 44 | exports[` when receives a SimpleImage block renders a
block with and
1`] = ` 45 |
46 | Deep in the universe 50 |
51 | Deep in the universe 52 |
53 |
54 | `; 55 | -------------------------------------------------------------------------------- /src/renderers/image/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import HTMLReactParser from 'html-react-parser'; 3 | import { RenderFn } from '../..'; 4 | 5 | export interface ImageBlockData { 6 | file?: { 7 | url: string; 8 | name?: string; 9 | }; 10 | url?: string; 11 | caption: string; 12 | withBorder: boolean; 13 | withBackground: boolean; 14 | stretched: boolean; 15 | [s: string]: any; 16 | } 17 | 18 | export interface ImageBlockConfig { 19 | actionsClassNames?: { 20 | [s: string]: string; 21 | }; 22 | } 23 | 24 | const Image: RenderFn = ({ 25 | data, 26 | className = '', 27 | actionsClassNames = { 28 | stretched: 'image-block--stretched', 29 | withBorder: 'image-block--with-border', 30 | withBackground: 'image-block--with-background', 31 | }, 32 | }) => { 33 | const classNames: string[] = []; 34 | if (className) classNames.push(className); 35 | 36 | Object.keys(actionsClassNames).forEach((actionName) => { 37 | if (data && data[actionName] === true && actionName in actionsClassNames) { 38 | // @ts-ignore 39 | classNames.push(actionsClassNames[actionName]); 40 | } 41 | }); 42 | 43 | const figureprops: { 44 | [s: string]: string; 45 | } = {}; 46 | 47 | if (classNames.length > 0) { 48 | figureprops.className = classNames.join(' '); 49 | } 50 | 51 | return ( 52 |
53 | {data?.file?.url && {data.caption} 54 | {data?.url && {data.caption}} 55 | {data?.caption &&
{HTMLReactParser(data.caption)}
} 56 |
57 | ); 58 | }; 59 | 60 | export default Image; 61 | -------------------------------------------------------------------------------- /examples/fetch-from-url/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /examples/create-react-app/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /src/renderers/table/index.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import HTMLReactParser from 'html-react-parser'; 3 | import { RenderFn } from '../..'; 4 | 5 | type Row = string[]; 6 | type Content = Row[]; 7 | 8 | export interface TableBlockData { 9 | content: Content; 10 | withHeadings?: boolean; 11 | header?: string[]; 12 | footer?: string[]; 13 | caption?: string; 14 | } 15 | 16 | const THead: FC<{ 17 | row: Row; 18 | }> = ({ row }) => ( 19 | 20 | 21 | {row?.map((cell, i) => ( 22 | 23 | {HTMLReactParser(cell)} 24 | 25 | ))} 26 | 27 | 28 | ); 29 | 30 | const Tr: FC<{ 31 | row: Row; 32 | withHeadings: boolean; 33 | }> = ({ row, withHeadings }) => ( 34 | 35 | {row.map((cell, i) => 36 | i === 0 && withHeadings ? ( 37 | 38 | {HTMLReactParser(cell)} 39 | 40 | ) : ( 41 | {HTMLReactParser(cell)} 42 | ), 43 | )} 44 | 45 | ); 46 | 47 | const Table: RenderFn = ({ data, className = '' }) => { 48 | const tableprops: { 49 | [s: string]: string; 50 | } = {}; 51 | 52 | if (className) { 53 | tableprops.className = className; 54 | } 55 | 56 | const content = data?.withHeadings ? data?.content.slice(1) : data?.content; 57 | const header = data?.withHeadings ? data?.content[0] : data?.header; 58 | const withRowHeadings = !!data?.header; 59 | 60 | return ( 61 | 62 | <> 63 | {data?.caption && } 64 | {header && } 65 | 66 | 67 | {content?.map((row, i) => ( 68 | 69 | ))} 70 | 71 | {data?.footer && ( 72 | 73 | 74 | 75 | )} 76 |
{HTMLReactParser(data.caption)}
77 | ); 78 | }; 79 | 80 | export default Table; 81 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "editorjs-blocks-react-renderer", 3 | "version": "1.3.0", 4 | "description": "EditorJS blocks render to semanticly beautiful html5 tags via React.", 5 | "keywords": [ 6 | "editorjs", 7 | "editor.js", 8 | "editor", 9 | "react", 10 | "render", 11 | "next.js", 12 | "nextjs", 13 | "gatsby", 14 | "renderer", 15 | "html5", 16 | "html", 17 | "blocks" 18 | ], 19 | "main": "dist/index.js", 20 | "types": "dist/index.d.ts", 21 | "scripts": { 22 | "start": "tsc -w", 23 | "build": "tsc", 24 | "test": "jest --coverage", 25 | "test:watch": "jest --watch", 26 | "format": "prettier --write \"src/**/*.tsx\"", 27 | "lint": "tslint -p tsconfig.json", 28 | "prepublishOnly": "npm run format && npm run lint && npm t && npm run build", 29 | "update:latest": "npm-check-updates -u" 30 | }, 31 | "repository": { 32 | "type": "git", 33 | "url": "git+https://github.com/moveyourdigital/editorjs-blocks-react-renderer.git" 34 | }, 35 | "author": "Vitor Carvalho ", 36 | "license": "MIT", 37 | "bugs": { 38 | "url": "https://github.com/moveyourdigital/editorjs-blocks-react-renderer/issues" 39 | }, 40 | "homepage": "https://github.com/moveyourdigital/editorjs-blocks-react-renderer#README.md", 41 | "files": [ 42 | "dist/**/*" 43 | ], 44 | "devDependencies": { 45 | "@types/jest": "^28.1.6", 46 | "@types/node": "^18.6.4", 47 | "@types/react": "^17.0.48", 48 | "@types/react-dom": "^17.0.17", 49 | "@types/react-test-renderer": "^17.0.2", 50 | "jest": "^28.1.3", 51 | "npm-check-updates": "^16.0.5", 52 | "prettier": "^2.5.1", 53 | "react": "^17.0.2", 54 | "react-dom": "^17.0.2", 55 | "react-test-renderer": "^17.0.2", 56 | "ts-jest": "^28.0.7", 57 | "tslint": "^6.1.3", 58 | "tslint-config-prettier": "^1.18.0", 59 | "typescript": "^4.5.2" 60 | }, 61 | "dependencies": { 62 | "html-react-parser": "^1.4.14" 63 | }, 64 | "peerDependencies": { 65 | "react": ">=17", 66 | "react-dom": ">=17" 67 | }, 68 | "engines": { 69 | "node": ">=16" 70 | } 71 | } 72 | -------------------------------------------------------------------------------- /.github/CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing to EditorJS Blocks React Renderer 2 | 3 | The following is a set of guidelines for contributing to this repository. 4 | 5 | ## Code of Conduct 6 | We expect participants to adhere to the following set of rules. 7 | 8 | ## Open Development 9 | All work on this repository happens directly on GitHub. Both core team members and external contributors send pull requests which go through the same review process. 10 | 11 | ## Branch Organization 12 | We maintain master branch for development of new features. If you want to push a bugfix of the last version, please open a pull request against the last tag version commit and another to the master, if needed. 13 | 14 | ## Bugs 15 | We are using GitHub Issues for bug tracking. Please, provide reproduction steps for the bug. Before that, make sure the bug is not already reported in the Issues section. 16 | 17 | ## Proposing a Change 18 | If you want to introduce a new renderer or augment the public API you are free to either open a Pull Request with the change or an issue, which will be opened for further discussions. 19 | 20 | If your change breaks the current public API, our recommendation is to start a thread in a new Issue. 21 | 22 | ## Your First Pull Request 23 | Working on your first Pull Request? You can learn how from this free video series: 24 | 25 | [How to Contribute to an Open Source Project on GitHub](https://egghead.io/courses/how-to-contribute-to-an-open-source-project-on-github) 26 | 27 | 28 | ## Sending a Pull Request 29 | The core team is monitoring for pull requests. We will review your pull request and either merge it, request changes to it, or close it with an explanation. 30 | 31 | **Before submitting a pull request**, please make sure the following is done: 32 | 33 | 1) Fork the repository and create your branch from the correct branch/tag. 34 | 2) Run `npm install` in the repository root. 35 | 3) Add or change tests as needed. 36 | 4) Ensure the test suite passes with `npm test`. Tip: run `npm run test:watch` during development. 37 | 5) Run `npm test -- -u` to update the jest snapshots and commit these changes as well (if there are any updates). 38 | 6) Run `npm run list && npm run format` and commit any changes. 39 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | lerna-debug.log* 8 | 9 | # Diagnostic reports (https://nodejs.org/api/report.html) 10 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json 11 | 12 | # Runtime data 13 | pids 14 | *.pid 15 | *.seed 16 | *.pid.lock 17 | 18 | # Directory for instrumented libs generated by jscoverage/JSCover 19 | lib-cov 20 | 21 | # Coverage directory used by tools like istanbul 22 | coverage 23 | *.lcov 24 | 25 | # nyc test coverage 26 | .nyc_output 27 | 28 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 29 | .grunt 30 | 31 | # Bower dependency directory (https://bower.io/) 32 | bower_components 33 | 34 | # node-waf configuration 35 | .lock-wscript 36 | 37 | # Compiled binary addons (https://nodejs.org/api/addons.html) 38 | build/Release 39 | 40 | # Dependency directories 41 | node_modules/ 42 | jspm_packages/ 43 | 44 | # TypeScript v1 declaration files 45 | typings/ 46 | 47 | # TypeScript cache 48 | *.tsbuildinfo 49 | 50 | # Optional npm cache directory 51 | .npm 52 | 53 | # Optional eslint cache 54 | .eslintcache 55 | 56 | # Microbundle cache 57 | .rpt2_cache/ 58 | .rts2_cache_cjs/ 59 | .rts2_cache_es/ 60 | .rts2_cache_umd/ 61 | 62 | # Optional REPL history 63 | .node_repl_history 64 | 65 | # Output of 'npm pack' 66 | *.tgz 67 | 68 | # Yarn Integrity file 69 | .yarn-integrity 70 | 71 | # dotenv environment variables file 72 | .env 73 | .env.test 74 | 75 | # parcel-bundler cache (https://parceljs.org/) 76 | .cache 77 | 78 | # Next.js build output 79 | .next 80 | 81 | # Nuxt.js build / generate output 82 | .nuxt 83 | 84 | # Gatsby files 85 | .cache/ 86 | # Comment in the public line in if your project uses Gatsby and *not* Next.js 87 | # https://nextjs.org/blog/next-9-1#public-directory-support 88 | # public 89 | 90 | # vuepress build output 91 | .vuepress/dist 92 | 93 | # Serverless directories 94 | .serverless/ 95 | 96 | # FuseBox cache 97 | .fusebox/ 98 | 99 | # DynamoDB Local files 100 | .dynamodb/ 101 | 102 | # TernJS port file 103 | .tern-port 104 | 105 | # MacOS 106 | .DS_Store 107 | 108 | # Distribution 109 | dist/ -------------------------------------------------------------------------------- /src/renderers/list/index.test.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { create } from 'react-test-renderer'; 3 | import List, { ListBlockData } from '.'; 4 | 5 | describe('', () => { 6 | describe.each([ 7 | ['unordered', '