fix: examples as dev environment

.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
 ```
 

.gitignore

@@ -6,3 +6,4 @@ coverage
 .idea
 .DS_Store
 .cache
+.parcel-cache

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"

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,
+  },
+};

packages/examples/package.json

@@ -6,13 +6,15 @@
   "author": "Diego Muracciole <[email protected]>",
   "homepage": "https://github.com/diegomura/react-pdf#readme",
   "repository": "[email protected]: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",

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 (
+    <Page style={styles.body}>
+      <Image style={styles.image} src={Quijote1} />
+      <Image style={styles.image2} src={Quijote1} />
+      <Image style={styles.image} src={Quijote1} />
+      <Image style={styles.image2} src={Quijote1} />
+    </Page>
+  )
+}
+
+const App = () => {
+  return (
+    <Document>
+      <MyDoc />
+    </Document>
+  )
+}
+
+export default App

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 (
+    <Page style={styles.body}>
+      <View style={{ width: 70 }}>
+        <Text style={styles.text}>And here here</Text>
+      </View>
+    </Page>
+  )
+}
+
+const App = () => {
+  return (
+    <Document>
+      <MyDoc />
+    </Document>
+  )
+}
+
+export default App

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 (
+    <Page style={styles.body}>
+      <Text style={styles.regular}>Regular text</Text>
+      <Text style={styles.medium}>Medium text</Text>
+      <Text style={styles.bold}>Bold text</Text>
+      <Text style={styles.black}>Black text</Text>
+    </Page>
+  );
+};
+
+const App = () => {
+  return (
+    <Document>
+      <MyDoc />
+    </Document>
+  );
+};
+
+export default App;

packages/examples/src/fractals/Fractal.js → packages/examples/src/fractals/Fractal.jsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import { Text, View, StyleSheet } from '@react-pdf/renderer';
 
 const palette = [

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 = () => (
+  <Document>
+    <Page size="A4">
+      <Fractal steps={18} />
+    </Page>
+
+    <Page orientation="landscape" size="A4">
+      <Fractal steps={14} />
+    </Page>
+
+    <Page size="B4">
+      <Fractal steps={10} />
+    </Page>
+  </Document>
+)
+
+export default Fractals

packages/examples/src/goTo/index.js → packages/examples/src/goTo/index.jsx

@@ -1,17 +1,17 @@
+import React from 'react';
 import { Page, Document, Link, View, Image } from '@react-pdf/renderer';
 
-export default () => (
+const GoTo = () => (
   <Document>
     <Page size="A4">
       <Link href="#myDest">Link</Link>
     </Page>
 
     <Page size="A4">
       <View style={{ height: 300, backgroundColor: 'black' }} />
-      <Image
-        id="myDest"
-        src="http://qnimate.com/wp-content/uploads/2014/03/images2.jpg"
-      />
+      <Image id="myDest" src="https://react-pdf.org/images/logo.png" />
     </Page>
   </Document>
 );
+
+export default GoTo;