diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md index 05444126a..e40ab6be2 100644 --- a/.github/CONTRIBUTING.md +++ b/.github/CONTRIBUTING.md @@ -30,12 +30,12 @@ git clone https://github.com/diegomura/react-pdf.git cd react-pdf ``` -### 2. Install Node 14 +### 2. Install Node 18 If you have `nvm` installed all you have to do is ```sh -nvm install 14 +nvm install 18 nvm use ``` diff --git a/.gitignore b/.gitignore index 938e2a5a3..d660a7570 100644 --- a/.gitignore +++ b/.gitignore @@ -6,3 +6,4 @@ coverage .idea .DS_Store .cache +.parcel-cache diff --git a/package.json b/package.json index 7c97f4ca1..4e3be6eee 100644 --- a/package.json +++ b/package.json @@ -17,7 +17,7 @@ "prepublish": "lerna run build", "lint": "eslint packages", "test": "jest", - "examples": "lerna run start --scope @react-pdf/examples", + "dev": "lerna run dev --scope @react-pdf/examples", "changeset": "changeset", "version-packages": "changeset version", "release": "changeset publish" diff --git a/packages/examples/.eslintrc.js b/packages/examples/.eslintrc.js new file mode 100644 index 000000000..756c5d38d --- /dev/null +++ b/packages/examples/.eslintrc.js @@ -0,0 +1,7 @@ +module.exports = { + extends: ['../../.eslintrc.js', 'plugin:react/recommended'], + rules: { + 'react/prop-types': 0, + 'jsx-a11y/anchor-is-valid': 0, + }, +}; diff --git a/packages/examples/babel.config.js b/packages/examples/babel.config.js deleted file mode 100644 index 27f83582f..000000000 --- a/packages/examples/babel.config.js +++ /dev/null @@ -1 +0,0 @@ -module.exports = { extends: '../../babel.config.js' }; diff --git a/packages/examples/package.json b/packages/examples/package.json index cb9f51e4f..f386381cc 100644 --- a/packages/examples/package.json +++ b/packages/examples/package.json @@ -6,13 +6,15 @@ "author": "Diego Muracciole ", "homepage": "https://github.com/diegomura/react-pdf#readme", "repository": "git@github.com:diegomura/react-pdf.git", - "main": "lib", "scripts": { - "test": "jest" + "dev": "vite ./src --open" }, "dependencies": { - "@react-pdf/renderer": "^3.1.15", - "camelcase": "^6.2.0" + "@react-pdf/renderer": "^3.1.15" + }, + "devDependencies": { + "@vitejs/plugin-react": "^4.2.1", + "vite": "^5.0.11" }, "peerDependencies": { "react": "^16.8.6 || ^17.0.0", diff --git a/packages/examples/public/Cairo-Regular.ttf b/packages/examples/public/Cairo-Regular.ttf new file mode 100644 index 000000000..d64275177 Binary files /dev/null and b/packages/examples/public/Cairo-Regular.ttf differ diff --git a/packages/examples/public/NotoSans-Regular.ttf b/packages/examples/public/NotoSans-Regular.ttf deleted file mode 100644 index ff376d133..000000000 Binary files a/packages/examples/public/NotoSans-Regular.ttf and /dev/null differ diff --git a/packages/examples/public/Rubik-Regular.ttf b/packages/examples/public/Rubik-Regular.ttf new file mode 100644 index 000000000..06a67a2da Binary files /dev/null and b/packages/examples/public/Rubik-Regular.ttf differ diff --git a/packages/examples/public/chart.svg b/packages/examples/public/chart.svg deleted file mode 100644 index 029a78b53..000000000 --- a/packages/examples/public/chart.svg +++ /dev/null @@ -1,52 +0,0 @@ - - - Created with Highcharts 6.2.0 - - - - - - - - - - - - - - - - - - - - - - - - - USD - USD - - - - - EUR - EUR - - - - - CHF - CHF - - - - - - - - - - diff --git a/packages/examples/public/font.ttc b/packages/examples/public/font.ttc deleted file mode 100644 index 816fee694..000000000 Binary files a/packages/examples/public/font.ttc and /dev/null differ diff --git a/packages/examples/public/keifont.ttf b/packages/examples/public/keifont.ttf deleted file mode 100644 index 2d4b3c85b..000000000 Binary files a/packages/examples/public/keifont.ttf and /dev/null differ diff --git a/packages/examples/public/miller-banner.ttf b/packages/examples/public/miller-banner.ttf deleted file mode 100644 index 4b0f49aac..000000000 Binary files a/packages/examples/public/miller-banner.ttf and /dev/null differ diff --git a/packages/examples/public/test.jpg b/packages/examples/public/test.jpg deleted file mode 100644 index 47da53161..000000000 Binary files a/packages/examples/public/test.jpg and /dev/null differ diff --git a/packages/examples/public/test2.jpg b/packages/examples/public/test2.jpg deleted file mode 100644 index d33ecbdd2..000000000 Binary files a/packages/examples/public/test2.jpg and /dev/null differ diff --git a/packages/examples/src/duplicatedImages/index.jsx b/packages/examples/src/duplicatedImages/index.jsx new file mode 100644 index 000000000..120f668de --- /dev/null +++ b/packages/examples/src/duplicatedImages/index.jsx @@ -0,0 +1,63 @@ +/* eslint react/prop-types: 0 */ +/* eslint react/jsx-sort-props: 0 */ + +import React from 'react' +import { Document, Page, Image, StyleSheet } from '@react-pdf/renderer' + +import Quijote1 from '../../public/quijote1.jpg' + +const styles = StyleSheet.create({ + body: { + paddingTop: 35, + paddingBottom: 65, + paddingHorizontal: 35, + }, + image: { + marginVertical: 15, + marginHorizontal: 0, + width: 520, + height: 200, + backgroundColor: 'red', + objectFit: 'fill', + objectPositionX: 'center', + objectPositionY: 'center', + borderWith: 2, + padding: 2, + borderColor: 'blue', + borderStyle: 'solid', + }, + image2: { + marginVertical: 15, + marginHorizontal: 0, + width: 300, + backgroundColor: 'green', + objectFit: 'fill', + objectPositionX: 'center', + objectPositionY: 'center', + borderWith: 2, + padding: 2, + borderColor: 'blue', + borderStyle: 'solid', + }, +}) + +const MyDoc = () => { + return ( + + + + + + + ) +} + +const App = () => { + return ( + + + + ) +} + +export default App diff --git a/packages/examples/src/ellipsis/index.jsx b/packages/examples/src/ellipsis/index.jsx new file mode 100644 index 000000000..07b0f0eb5 --- /dev/null +++ b/packages/examples/src/ellipsis/index.jsx @@ -0,0 +1,52 @@ +/* eslint react/prop-types: 0 */ +/* eslint react/jsx-sort-props: 0 */ + +import React from 'react' +import { Document, Page, Text, View, StyleSheet, Font } from '@react-pdf/renderer' + +import RobotoFont from "../../public/Roboto-Regular.ttf"; + +const styles = StyleSheet.create({ + body: { + paddingTop: 35, + paddingBottom: 65, + paddingHorizontal: 35, + }, + text: { + fontSize: 15, + maxLines: 1, + fontColor: '#000000', + textOverflow: 'ellipsis', + fontFamily: 'Roboto' + }, +}) + +Font.register({ + family: "Roboto", + fonts: [ + { + src: RobotoFont, + fontWeight: 400, + }, + ] +}); + +const MyDoc = () => { + return ( + + + And here here + + + ) +} + +const App = () => { + return ( + + + + ) +} + +export default App diff --git a/packages/examples/src/fontWeight/index.jsx b/packages/examples/src/fontWeight/index.jsx new file mode 100644 index 000000000..f941a3dd2 --- /dev/null +++ b/packages/examples/src/fontWeight/index.jsx @@ -0,0 +1,85 @@ +/* eslint react/prop-types: 0 */ +/* eslint react/jsx-sort-props: 0 */ + +import React from "react"; +import { + Document, + Page, + Text, + StyleSheet, + Font, +} from "@react-pdf/renderer"; + +import RobotoFont from "../../public/Roboto-Regular.ttf"; +import RobotoFontMedium from "../../public/Roboto-Medium.ttf"; +import RobotoFontBold from "../../public/Roboto-Bold.ttf"; +import RobotoFontBlack from "../../public/Roboto-Black.ttf"; + +const styles = StyleSheet.create({ + body: { + paddingTop: 35, + paddingBottom: 45, + paddingHorizontal: 35, + position: "relative", + }, + regular: { + fontFamily: 'Roboto', + fontWeight: 400, + }, + medium: { + fontFamily: 'Roboto', + fontWeight: 500, + }, + bold: { + fontWeight: 600, + fontFamily: 'Roboto', + }, + black: { + fontWeight: 900, + fontFamily: 'Roboto', + } +}); + +Font.register({ + family: "Roboto", + fonts: [ + { + src: RobotoFont, + fontWeight: 400, + }, + { + src: RobotoFontMedium, + fontWeight: 500, + }, + { + src: RobotoFontBold, + fontWeight: 700 + }, + { + src: RobotoFontBlack, + fontWeight: 900 + } + ] +}); + + +const MyDoc = () => { + return ( + + Regular text + Medium text + Bold text + Black text + + ); +}; + +const App = () => { + return ( + + + + ); +}; + +export default App; diff --git a/packages/examples/src/fractals/Fractal.js b/packages/examples/src/fractals/Fractal.jsx similarity index 97% rename from packages/examples/src/fractals/Fractal.js rename to packages/examples/src/fractals/Fractal.jsx index 8f27151a2..f18b56942 100644 --- a/packages/examples/src/fractals/Fractal.js +++ b/packages/examples/src/fractals/Fractal.jsx @@ -1,3 +1,4 @@ +import React from 'react'; import { Text, View, StyleSheet } from '@react-pdf/renderer'; const palette = [ diff --git a/packages/examples/src/fractals/index.js b/packages/examples/src/fractals/index.js deleted file mode 100644 index 700c8dea4..000000000 --- a/packages/examples/src/fractals/index.js +++ /dev/null @@ -1,24 +0,0 @@ -import { Page, Document } from '@react-pdf/renderer'; - -import Fractal from './Fractal'; - -export default () => ( - - - - - - - - - - - - - -); diff --git a/packages/examples/src/fractals/index.jsx b/packages/examples/src/fractals/index.jsx new file mode 100644 index 000000000..d2a08ba7c --- /dev/null +++ b/packages/examples/src/fractals/index.jsx @@ -0,0 +1,22 @@ +import React from 'react' +import { Page, Document } from '@react-pdf/renderer' + +import Fractal from './Fractal' + +const Fractals = () => ( + + + + + + + + + + + + + +) + +export default Fractals diff --git a/packages/examples/src/fractals/output.pdf b/packages/examples/src/fractals/output.pdf deleted file mode 100644 index d4c6f134b..000000000 Binary files a/packages/examples/src/fractals/output.pdf and /dev/null differ diff --git a/packages/examples/src/fractals/thumb.png b/packages/examples/src/fractals/thumb.png deleted file mode 100644 index 18d7b76b7..000000000 Binary files a/packages/examples/src/fractals/thumb.png and /dev/null differ diff --git a/packages/examples/src/goTo/index.js b/packages/examples/src/goTo/index.jsx similarity index 65% rename from packages/examples/src/goTo/index.js rename to packages/examples/src/goTo/index.jsx index 3aa8688a3..755ab865b 100644 --- a/packages/examples/src/goTo/index.js +++ b/packages/examples/src/goTo/index.jsx @@ -1,6 +1,7 @@ +import React from 'react'; import { Page, Document, Link, View, Image } from '@react-pdf/renderer'; -export default () => ( +const GoTo = () => ( Link @@ -8,10 +9,9 @@ export default () => ( - + ); + +export default GoTo; diff --git a/packages/examples/src/goTo/output.pdf b/packages/examples/src/goTo/output.pdf deleted file mode 100644 index d0ba31907..000000000 Binary files a/packages/examples/src/goTo/output.pdf and /dev/null differ diff --git a/packages/examples/src/index.css b/packages/examples/src/index.css new file mode 100644 index 000000000..dbaf4fdc7 --- /dev/null +++ b/packages/examples/src/index.css @@ -0,0 +1,41 @@ +@font-face { + font-family: Cairo; + src: url("../public/Cairo-Regular.ttf"); +} +@font-face { + font-family: Rubik; + src: url("../public/Rubik-Regular.ttf"); +} + +body { + margin: 0; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', + 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', + sans-serif; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +code { + font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', + monospace; +} + +iframe { + width: 100vw; + height: 100vh; +} + +.cairo { + font-family: Cairo; + direction: rtl; +} + +.rubik { + font-family: Rubik; + /* direction: rtl; */ +} + +svg { + background-color: white; +} diff --git a/packages/examples/src/index.html b/packages/examples/src/index.html new file mode 100644 index 000000000..512a6ff49 --- /dev/null +++ b/packages/examples/src/index.html @@ -0,0 +1,13 @@ + + + + + + + Vite + React + + +
+ + + diff --git a/packages/examples/src/index.js b/packages/examples/src/index.js deleted file mode 100644 index ceeb408d3..000000000 --- a/packages/examples/src/index.js +++ /dev/null @@ -1,60 +0,0 @@ -import { useState } from 'react'; -import ReactDOM from 'react-dom'; -import { PDFViewer } from '@react-pdf/renderer'; - -import Svg from './svg'; -import GoTo from './goTo'; -import Text from './text'; -import Knobs from './knobs'; -import Resume from './resume'; -import Fractals from './fractals'; -import PageWrap from './pageWrap'; - -const MOUNT_ELEMENT = document.getElementById('root'); - -const EXAMPLES = { - svg: Svg, - goTo: GoTo, - text: Text, - knobs: Knobs, - resume: Resume, - pageWrap: PageWrap, - fractals: Fractals, -}; - -const Viewer = () => { - const [example, setExample] = useState('pageWrap'); - - console.log(example); - - const handleExampleChange = e => { - setExample(e.target.dataset.name); - }; - - const Document = EXAMPLES[example]; - - return ( -
-

Examples

- - - - - - -
- ); -}; - -ReactDOM.render(, MOUNT_ELEMENT); diff --git a/packages/examples/src/index.jsx b/packages/examples/src/index.jsx new file mode 100644 index 000000000..b9f32f652 --- /dev/null +++ b/packages/examples/src/index.jsx @@ -0,0 +1,26 @@ +import React from 'react'; +import { createRoot } from 'react-dom/client'; + +import { PDFViewer } from '@react-pdf/renderer' + +import Document from './pageWrap' + +import './index.css' + +const DocumentWrapper = () => { + return ( + <> + + + + + ) +} + +const MOUNT_ELEMENT = document.createElement('div'); + +document.body.appendChild(MOUNT_ELEMENT); + +const root = createRoot(MOUNT_ELEMENT); // createRoot(container!) if you use TypeScript + +root.render(); diff --git a/packages/examples/src/knobs/index.js b/packages/examples/src/knobs/index.jsx similarity index 92% rename from packages/examples/src/knobs/index.js rename to packages/examples/src/knobs/index.jsx index 541f20f71..bd4e8ac8f 100644 --- a/packages/examples/src/knobs/index.js +++ b/packages/examples/src/knobs/index.jsx @@ -1,3 +1,4 @@ +import React from 'react'; import { Document, Page, View, Text, StyleSheet } from '@react-pdf/renderer'; const styles = StyleSheet.create({ @@ -38,7 +39,7 @@ const styles = StyleSheet.create({ const Knob = ({ value }) => ( - {value} + {value} ); @@ -53,7 +54,7 @@ const Select = props => ( ); -export default () => ( +const Knobs = () => (