feat: improve examples project (#2870)

packages/examples/package.json

@@ -14,6 +14,9 @@
   },
   "devDependencies": {
     "@vitejs/plugin-react": "^4.2.1",
+    "autoprefixer": "^10.4.20",
+    "postcss": "^8.4.47",
+    "tailwindcss": "^3.4.12",
     "vite": "^5.0.11"
   },
   "peerDependencies": {

packages/examples/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

packages/examples/src/duplicatedImages/index.jsx → packages/examples/src/examples/duplicated-images/index.jsx

@@ -4,7 +4,7 @@
 import React from 'react';
 import { Document, Page, Image, StyleSheet } from '@react-pdf/renderer';
 
-import Quijote1 from '../../public/quijote1.jpg';
+import Quijote1 from '../../../public/quijote1.jpg';
 
 const styles = StyleSheet.create({
   body: {
@@ -52,12 +52,17 @@ const MyDoc = () => {
   );
 };
 
-const App = () => {
+const DuplicatedImages = () => {
   return (
     <Document>
       <MyDoc />
     </Document>
   );
 };
 
-export default App;
+export default {
+  id: 'duplicated-images',
+  name: 'Duplicated Images',
+  description: '',
+  Document: DuplicatedImages,
+};

packages/examples/src/ellipsis/index.jsx → packages/examples/src/examples/ellipsis/index.jsx

@@ -11,7 +11,7 @@ import {
   Font,
 } from '@react-pdf/renderer';
 
-import RobotoFont from '../../public/Roboto-Regular.ttf';
+import RobotoFont from '../../../public/Roboto-Regular.ttf';
 
 const styles = StyleSheet.create({
   body: {
@@ -48,12 +48,17 @@ const MyDoc = () => {
   );
 };
 
-const App = () => {
+const Ellipsis = () => {
   return (
     <Document>
       <MyDoc />
     </Document>
   );
 };
 
-export default App;
+export default {
+  id: 'ellipsis',
+  name: 'Ellipsis',
+  description: '',
+  Document: Ellipsis,
+};

packages/examples/src/emoji/index.jsx → packages/examples/src/examples/emoji/index.jsx

@@ -23,8 +23,6 @@ const styles = StyleSheet.create({
 Font.registerEmojiSource({
   format: 'png',
   url: 'https://cdnjs.cloudflare.com/ajax/libs/twemoji/14.0.2/72x72/',
-  // url: 'https://cdn.jsdelivr.net/npm/[email protected]/img/apple/64/',
-  // withVariationSelectors: true,
 });
 
 const Emoji = () => (
@@ -37,4 +35,9 @@ const Emoji = () => (
   </Document>
 );
 
-export default Emoji;
+export default {
+  id: 'emoji',
+  name: 'Emoji',
+  description: '',
+  Document: Emoji,
+};

packages/examples/src/fontFamilyFallback/index.jsx → packages/examples/src/examples/font-family-fallback/index.jsx

@@ -4,11 +4,11 @@
 import React from 'react';
 import { Document, Page, Text, StyleSheet, Font } from '@react-pdf/renderer';
 
-import RobotoFont from '../../public/Roboto-Regular.ttf';
-import RobotoBoldFont from '../../public/Roboto-Bold.ttf';
-import RobotItalicFont from '../../public/Roboto-Italic.ttf';
+import RobotoFont from '../../../public/Roboto-Regular.ttf';
+import RobotoBoldFont from '../../../public/Roboto-Bold.ttf';
+import RobotItalicFont from '../../../public/Roboto-Italic.ttf';
 
-import NotoSansArabicFont from '../../public/NotoSansArabic-Regular.ttf';
+import NotoSansArabicFont from '../../../public/NotoSansArabic-Regular.ttf';
 
 const styles = StyleSheet.create({
   body: {
@@ -96,12 +96,17 @@ const MyDoc = () => {
   );
 };
 
-const App = () => {
+const FontFamilyFallback = () => {
   return (
     <Document>
       <MyDoc />
     </Document>
   );
 };
 
-export default App;
+export default {
+  id: 'font-family-fallback',
+  name: 'Font Family Fallback',
+  description: '',
+  Document: FontFamilyFallback,
+};

packages/examples/src/fontWeight/index.jsx → packages/examples/src/examples/font-weight/index.jsx

@@ -4,10 +4,10 @@
 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';
+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: {
@@ -67,12 +67,17 @@ const MyDoc = () => {
   );
 };
 
-const App = () => {
+const FontWeight = () => {
   return (
     <Document>
       <MyDoc />
     </Document>
   );
 };
 
-export default App;
+export default {
+  id: 'font-weight',
+  name: 'Font Weight',
+  description: '',
+  Document: FontWeight,
+};

packages/examples/src/fractals/index.jsx → packages/examples/src/examples/fractals/index.jsx

@@ -19,4 +19,9 @@ const Fractals = () => (
   </Document>
 );
 
-export default Fractals;
+export default {
+  id: 'fractals',
+  name: 'Fractals',
+  description: '',
+  Document: Fractals,
+};

packages/examples/src/goTo/index.jsx → packages/examples/src/examples/go-to/index.jsx

@@ -4,7 +4,7 @@ import { Page, Document, Link, View, Image } from '@react-pdf/renderer';
 const GoTo = () => (
   <Document>
     <Page size="A4">
-      <Link href="#myDest">Link</Link>
+      <Link href="#myDest">Link to Image</Link>
     </Page>
 
     <Page size="A4">
@@ -14,4 +14,9 @@ const GoTo = () => (
   </Document>
 );
 
-export default GoTo;
+export default {
+  id: 'go-to',
+  name: 'Go To',
+  description: '',
+  Document: GoTo,
+};

packages/examples/src/examples/index.js

@@ -0,0 +1,43 @@
+import duplicatedImages from './duplicated-images';
+import ellipsis from './ellipsis';
+import emoji from './emoji';
+import fontFamilyFallback from './font-family-fallback';
+import fontWeight from './font-weight';
+import fractals from './fractals';
+import goTo from './go-to';
+import JpgOrientation from './jpg-orientation';
+import knobs from './knobs';
+import link from './link';
+import mediaQueries from './media-queries';
+import minPresenceAhead from './min-presence-ahead';
+import multilineText from './multiline-text';
+import objectFit from './object-fit';
+import pageWrap from './page-wrap';
+import resume from './resume';
+import svg from './svg';
+import svgTransform from './svg-transform';
+import transformOrigin from './transform-origin';
+
+const EXAMPLES = [
+  duplicatedImages,
+  ellipsis,
+  emoji,
+  fontFamilyFallback,
+  fontWeight,
+  fractals,
+  goTo,
+  JpgOrientation,
+  knobs,
+  link,
+  mediaQueries,
+  minPresenceAhead,
+  multilineText,
+  objectFit,
+  pageWrap,
+  resume,
+  svg,
+  svgTransform,
+  transformOrigin,
+];
+
+export default EXAMPLES;

packages/examples/src/jpgOrientation/index.jsx → packages/examples/src/examples/jpg-orientation/index.jsx

@@ -10,7 +10,7 @@ import Orientation6 from './images/orientation-6.jpeg';
 import Orientation7 from './images/orientation-7.jpeg';
 import Orientation8 from './images/orientation-8.jpeg';
 
-const Emoji = () => (
+const JpgOrientation = () => (
   <Document>
     <Page>
       <View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
@@ -27,4 +27,9 @@ const Emoji = () => (
   </Document>
 );
 
-export default Emoji;
+export default {
+  id: 'jpg-orientation',
+  name: 'Jpg Orientation',
+  description: '',
+  Document: JpgOrientation,
+};

packages/examples/src/knobs/index.jsx → packages/examples/src/examples/knobs/index.jsx

@@ -72,4 +72,9 @@ const Knobs = () => (
   </Document>
 );
 
-export default Knobs;
+export default {
+  id: 'knobs',
+  name: 'Knobs',
+  description: '',
+  Document: Knobs,
+};

packages/examples/src/link/index.jsx → packages/examples/src/examples/link/index.jsx

@@ -24,4 +24,9 @@ const LinkExample = () => (
   </Document>
 );
 
-export default LinkExample;
+export default {
+  id: 'link',
+  name: 'Link',
+  description: '',
+  Document: LinkExample,
+};

packages/examples/src/mediaQueries/index.jsx → packages/examples/src/examples/media-queries/index.jsx

@@ -28,7 +28,7 @@ const MediaComponent = () => (
   </View>
 );
 
-const mediaQueries = () => (
+const MediaQueries = () => (
   <Document>
     <Page style={styles.body} size={[500, 600]}>
       <MediaComponent />
@@ -39,4 +39,9 @@ const mediaQueries = () => (
   </Document>
 );
 
-export default mediaQueries;
+export default {
+  id: 'media-queries',
+  name: 'Media Queries',
+  description: '',
+  Document: MediaQueries,
+};

packages/examples/src/minPresenceAhead/index.jsx → packages/examples/src/examples/min-presence-ahead/index.jsx

@@ -43,4 +43,9 @@ const MinPresenceAhead = () => (
   </Document>
 );
 
-export default MinPresenceAhead;
+export default {
+  id: 'min-presence-ahead',
+  name: 'Min Presence Ahead',
+  description: '',
+  Document: MinPresenceAhead,
+};

packages/examples/src/multilineText/index.jsx → packages/examples/src/examples/multiline-text/index.jsx

@@ -11,17 +11,17 @@ const styles = StyleSheet.create({
   },
 });
 
-const Doc = () => (
+const MultilineText = () => (
   <Document>
     <Page size="A4">
       <View style={styles.body}>
-        <Text style={{ backgroundColor: 'green' }}>
+        <Text style={{ backgroundColor: 'lightgray' }}>
           Single line text with{' '}
           <Text style={styles.highlight}>inline text highlighted</Text> Again
           Black Text
         </Text>
 
-        <Text style={{ backgroundColor: 'green' }}>
+        <Text style={{ backgroundColor: 'lightgray' }}>
           Nested Text with{' '}
           <Text style={styles.highlight}>inline text highlighted</Text> in a
           long, long, long, long, long, long long
@@ -31,4 +31,9 @@ const Doc = () => (
   </Document>
 );
 
-export default Doc;
+export default {
+  id: 'multiline-text',
+  name: 'Multiline Text',
+  description: '',
+  Document: MultilineText,
+};

packages/examples/src/objectFit/index.jsx → packages/examples/src/examples/object-fit/index.jsx

@@ -24,7 +24,7 @@ const styles = StyleSheet.create({
   },
 });
 
-const Quixote = () => (
+const ObjectFit = () => (
   <Document>
     <Page>
       <View style={styles.surrounding}>
@@ -52,4 +52,9 @@ const Quixote = () => (
   </Document>
 );
 
-export default Quixote;
+export default {
+  id: 'object-fit',
+  name: 'Object Fit',
+  description: '',
+  Document: ObjectFit,
+};

packages/examples/src/pageWrap/index.jsx → packages/examples/src/examples/page-wrap/index.jsx

@@ -8,8 +8,8 @@ import {
   StyleSheet,
 } from '@react-pdf/renderer';
 
-import Quijote1 from '../../public/quijote1.jpg';
-import Quijote2 from '../../public/quijote2.png';
+import Quijote1 from '../../../public/quijote1.jpg';
+import Quijote2 from '../../../public/quijote2.png';
 
 Font.register({
   family: 'Oswald',
@@ -64,7 +64,7 @@ const styles = StyleSheet.create({
   },
 });
 
-const Quixote = () => (
+const PageWrap = () => (
   <Document>
     <Page style={styles.body}>
       <Text style={styles.header} fixed>
@@ -241,4 +241,9 @@ const Quixote = () => (
   </Document>
 );
 
-export default Quixote;
+export default {
+  id: 'page-wrap',
+  name: 'Page Wrap',
+  description: '',
+  Document: PageWrap,
+};