update example code

2020-10-16 15:10:34 +07:00
15 changed files with 11191 additions and 8 deletions
--- a/README.md
+++ b/README.md
@ -18,16 +18,21 @@ yarn add @cubetiq/invoice-print
 ## Usage

 ```tsx
-import React, { Component } from 'react'
+import React from 'react'
+import "invoice-print/dist/index.css"
+import { useDoc } from 'invoice-print'
+import { mockDataV2 } from './MockData'

-import MyComponent from '@cubetiq/invoice-print'
-import '@cubetiq/invoice-print/dist/index.css'
+const App = () => {
+  const invoicePrint = useDoc(mockDataV2)
+  return (
+    <div>
+      <button children={"Click Me"} onClick={()=> invoicePrint.print()}/>
+    </div>
+  )
+}

-class Example extends Component {
-  render() {
-    return <MyComponent />
-  }
-}
+export default App
 ```

 ### Contributors
--- a/example/README.md
+++ 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 my-lib package in the parent directory for development purposes.
+
+You can run `yarn install` and then `yarn start` to test your package.
--- a/example/package.json
+++ b/example/package.json
@ -0,0 +1,44 @@
+{
+  "name": "my-lib-example",
+  "homepage": ".",
+  "version": "0.0.0",
+  "private": true,
+  "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"
+  },
+  "dependencies": {
+    "@testing-library/jest-dom": "link:../node_modules/@testing-library/jest-dom",
+    "@testing-library/react": "link:../node_modules/@testing-library/react",
+    "@testing-library/user-event": "link:../node_modules/@testing-library/user-event",
+    "@types/jest": "link:../node_modules/@types/jest",
+    "@types/node": "link:../node_modules/@types/node",
+    "@types/react": "link:../node_modules/@types/react",
+    "@types/react-dom": "link:../node_modules/@types/react-dom",
+    "react": "link:../node_modules/react",
+    "react-dom": "link:../node_modules/react-dom",
+    "react-scripts": "link:../node_modules/react-scripts",
+    "typescript": "link:../node_modules/typescript",
+    "invoice-print": "link:.."
+  },
+  "devDependencies": {
+    "@babel/plugin-syntax-object-rest-spread": "^7.8.3"
+  },
+  "eslintConfig": {
+    "extends": "react-app"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}
--- a/example/public/favicon.ico
+++ b/example/public/favicon.ico
--- a/example/public/index.html
+++ b/example/public/index.html
@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, shrink-to-fit=no"
+    />
+    <meta name="theme-color" content="#000000" />
+
+    <!--
+      manifest.json provides metadata used when your web app is added to the
+      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>my-lib</title>
+  </head>
+
+  <body>
+    <noscript>
+      You need to enable JavaScript to run this app.
+    </noscript>
+
+    <div id="root"></div>
+
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>
--- a/example/public/manifest.json
+++ b/example/public/manifest.json
@ -0,0 +1,15 @@
+{
+  "short_name": "my-lib",
+  "name": "my-lib",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}
--- a/example/src/App.test.tsx
+++ b/example/src/App.test.tsx
@ -0,0 +1,9 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+import App from './App'
+
+it('renders without crashing', () => {
+  const div = document.createElement('div')
+  ReactDOM.render(<App />, div)
+  ReactDOM.unmountComponentAtNode(div)
+})
--- a/example/src/App.tsx
+++ b/example/src/App.tsx
@ -0,0 +1,15 @@
+import React from 'react'
+import "invoice-print/dist/index.css"
+import { useDoc } from 'invoice-print'
+import { mockDataV2 } from './MockData/MockData'
+
+const App = () => {
+  const invoicePrint = useDoc(mockDataV2)
+  return (
+    <div>
+      <button children={"Click Me"} onClick={()=> invoicePrint.print()}/>
+    </div>
+  )
+}
+
+export default App
--- a/example/src/MockData/MockData.ts
+++ b/example/src/MockData/MockData.ts
@ -0,0 +1,81 @@
+import { DataToPrint } from '../../../src'
+
+export const mockDataV2: DataToPrint = {
+  'configs': {
+    title: 'CUBETIQ Coperation Co,Ltd',
+    headline: 'Export Items',
+    logoUrl: 'data:image/png;base64,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',
+    columnsHeader: [
+      {
+        text: 'productName',
+        alignment: 'left',
+        fontSize: 9
+      },
+      {
+        text: 'qty',
+        alignment: 'center',
+        fontSize: 9
+      },
+      {
+        text: 'Tag',
+        alignment: 'center',
+        fontSize: 9
+      }
+    ]
+  },
+  data: {
+    header: {
+      invoiceNumber: 'INV00001',
+      date: '13-10-2020',
+      time: '10:30 AM',
+      staff: 'Sambo',
+      type: 'Adjustment',
+      note: 'Adjustment items from stock, and these are broken'
+    },
+    items: [
+      {
+        productName: 'iMac Pro 2020',
+        qty: 1,
+        tags: 'Broken'
+
+      },
+      {
+        productName: 'MacBook Pro 2020',
+        qty: 1,
+        tags: ''
+      }
+    ],
+    summary: {
+      totalQty: 2,
+      totalAmount: 260,
+      receiveUSD: 300,
+      refundUSD: 20,
+      refundReil: 80000
+    },
+    footer: [
+      {
+        text: 'Powered by CUBETIQ Solution, Tel : 087 686800',
+        fontSize: 7,
+        alignment: 'center',
+        bold: true,
+        margin: [0, 2]
+
+      },
+      {
+        text: 'WIFI-Password: Cubetiqs',
+        fontSize: 10,
+        bold: true,
+        alignment: 'center',
+        margin: [0, 5]
+      },
+      {
+        text: 'Thank for coming !!',
+        fontSize: 7,
+        alignment: 'center',
+        bold: true,
+        margin: [0, 2]
+
+      }
+    ]
+  }
+}
--- a/example/src/index.css
+++ b/example/src/index.css
@ -0,0 +1,14 @@
+body {
+  margin: 0;
+  padding: 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;
+}
--- a/example/src/index.tsx
+++ b/example/src/index.tsx
@ -0,0 +1,7 @@
+import './index.css'
+
+import React from 'react'
+import ReactDOM from 'react-dom'
+import App from './App'
+
+ReactDOM.render(<App />, document.getElementById('root'))
--- a/example/src/react-app-env.d.ts
+++ b/example/src/react-app-env.d.ts
@ -0,0 +1 @@
+/// <reference types="react-scripts" />
--- a/example/src/setupTests.ts
+++ b/example/src/setupTests.ts
@ -0,0 +1,5 @@
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom/extend-expect';
--- a/example/tsconfig.json
+++ b/example/tsconfig.json
@ -0,0 +1,38 @@
+{
+  "compilerOptions": {
+    "outDir": "dist",
+    "module": "esnext",
+    "lib": [
+      "dom",
+      "esnext"
+    ],
+    "moduleResolution": "node",
+    "jsx": "react",
+    "sourceMap": true,
+    "declaration": true,
+    "esModuleInterop": true,
+    "noImplicitReturns": true,
+    "noImplicitThis": true,
+    "noImplicitAny": true,
+    "strictNullChecks": true,
+    "suppressImplicitAnyIndexErrors": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "allowSyntheticDefaultImports": true,
+    "target": "es5",
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true
+  },
+  "include": [
+    "src"
+  ],
+  "exclude": [
+    "node_modules",
+    "build"
+  ]
+}
--- a/example/yarn.lock
+++ b/example/yarn.lock