diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 0000000..9d08a1a --- /dev/null +++ b/.editorconfig @@ -0,0 +1,9 @@ +root = true + +[*] +charset = utf-8 +indent_style = space +indent_size = 2 +end_of_line = lf +insert_final_newline = true +trim_trailing_whitespace = true diff --git a/.eslintignore b/.eslintignore new file mode 100644 index 0000000..a804767 --- /dev/null +++ b/.eslintignore @@ -0,0 +1,5 @@ +build/ +dist/ +node_modules/ +.snapshots/ +*.min.js \ No newline at end of file diff --git a/.eslintrc b/.eslintrc new file mode 100644 index 0000000..4c6c567 --- /dev/null +++ b/.eslintrc @@ -0,0 +1,34 @@ +{ + "parser": "@typescript-eslint/parser", + "extends": [ + "standard", + "standard-react", + "plugin:prettier/recommended", + "prettier/standard", + "prettier/react", + "plugin:@typescript-eslint/eslint-recommended" + ], + "env": { + "node": true + }, + "parserOptions": { + "ecmaVersion": 2020, + "ecmaFeatures": { + "legacyDecorators": true, + "jsx": true + } + }, + "settings": { + "react": { + "version": "16" + } + }, + "rules": { + "space-before-function-paren": 0, + "react/prop-types": 0, + "react/jsx-handler-names": 0, + "react/jsx-fragments": 0, + "react/no-unused-prop-types": 0, + "import/export": 0 + } +} diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..309c7e7 --- /dev/null +++ b/.gitignore @@ -0,0 +1,19 @@ +# dependencies +node_modules + +# builds +build +dist +.rpt2_cache + +# misc +.DS_Store +.env +.env.local +.env.development.local +.env.test.local +.env.production.local + +npm-debug.log* +yarn-debug.log* +yarn-error.log* \ No newline at end of file diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000..a9646d4 --- /dev/null +++ b/.prettierrc @@ -0,0 +1,10 @@ +{ + "singleQuote": true, + "jsxSingleQuote": true, + "semi": false, + "tabWidth": 2, + "bracketSpacing": true, + "jsxBracketSameLine": false, + "arrowParens": "always", + "trailingComma": "none" +} diff --git a/.travis.yml b/.travis.yml new file mode 100644 index 0000000..c66a67b --- /dev/null +++ b/.travis.yml @@ -0,0 +1,4 @@ +language: node_js +node_js: + - 12 + - 10 diff --git a/README.md b/README.md new file mode 100644 index 0000000..b88dc6d --- /dev/null +++ b/README.md @@ -0,0 +1,30 @@ +# react-extensible-code-viewer + +> A simple and extensible codeviewer component for react + +[![NPM](https://img.shields.io/npm/v/react-extensible-code-viewer.svg)](https://www.npmjs.com/package/react-extensible-code-viewer) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com) + +## Install + +```bash +npm install --save react-extensible-code-viewer +``` + +## Usage + +```tsx +import React, { Component } from 'react' + +import { CodeViewer } from 'react-extensible-code-viewer' +import 'react-extensible-code-viewer/dist/index.css' + +class Example extends Component { + render() { + return + } +} +``` + +## License + +MIT © [JoseRenan](https://github.com/JoseRenan) diff --git a/example/README.md b/example/README.md new file mode 100644 index 0000000..e6b9c76 --- /dev/null +++ b/example/README.md @@ -0,0 +1,5 @@ +This example was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). + +It is linked to the react-extensible-code-viewer package in the parent directory for development purposes. + +You can run `yarn install` and then `yarn start` to test your package. diff --git a/example/package.json b/example/package.json new file mode 100644 index 0000000..d5b6667 --- /dev/null +++ b/example/package.json @@ -0,0 +1,30 @@ +{ + "name": "react-extensible-code-viewer-example", + "homepage": "https://JoseRenan.github.io/react-extensible-code-viewer", + "version": "0.0.0", + "private": true, + "dependencies": { + "react": "link:../node_modules/react", + "react-dom": "link:../node_modules/react-dom", + "react-extensible-code-viewer": "link:..", + "react-scripts": "link:../node_modules/react-scripts" + }, + "scripts": { + "start": "node ../node_modules/react-scripts/bin/react-scripts.js start", + "build": "node ../node_modules/react-scripts/bin/react-scripts.js build", + "test": "node ../node_modules/react-scripts/bin/react-scripts.js test", + "eject": "node ../node_modules/react-scripts/bin/react-scripts.js eject" + }, + "eslintConfig": { + "extends": "react-app" + }, + "browserslist": [ + ">0.2%", + "not dead", + "not ie <= 11", + "not op_mini all" + ], + "devDependencies": { + "tailwindcss": "^1.4.6" + } +} diff --git a/example/public/favicon.ico b/example/public/favicon.ico new file mode 100644 index 0000000..a11777c Binary files /dev/null and b/example/public/favicon.ico differ diff --git a/example/public/index.html b/example/public/index.html new file mode 100644 index 0000000..5c55a9e --- /dev/null +++ b/example/public/index.html @@ -0,0 +1,48 @@ + + + + + + + + + + + + + react-extensible-code-viewer + + + + + +
+ + + + diff --git a/example/public/manifest.json b/example/public/manifest.json new file mode 100644 index 0000000..3302325 --- /dev/null +++ b/example/public/manifest.json @@ -0,0 +1,15 @@ +{ + "short_name": "react-extensible-code-viewer", + "name": "react-extensible-code-viewer", + "icons": [ + { + "src": "favicon.ico", + "sizes": "64x64 32x32 24x24 16x16", + "type": "image/x-icon" + } + ], + "start_url": ".", + "display": "standalone", + "theme_color": "#000000", + "background_color": "#ffffff" +} diff --git a/example/src/App.js b/example/src/App.js new file mode 100644 index 0000000..c79e616 --- /dev/null +++ b/example/src/App.js @@ -0,0 +1,148 @@ +import React, { useState } from 'react' + +import { CodeViewer } from 'react-extensible-code-viewer' +import 'react-extensible-code-viewer/dist/index.css' + +const code = `public class Main { + private int c = 5; + + public static void main(String args[]) { + int a = 1; + int b = 2; + System.out.println(a + b + c + 1); + Main.sayHello() + } + + public static void sayHello() { + System.out.println("Hello 🥺") + } +}` + +const AddCommentButton = ({ onClick }) => ( +
+ + +
+) + +const CommentInput = () => ( +
+