update example code
This commit is contained in:
Chantha
parent
98ba682a10
commit
38d6720e96
21
README.md
21
README.md
@ -18,16 +18,21 @@ yarn add @cubetiq/invoice-print
|
|||||||
## Usage
|
## Usage
|
||||||
|
|
||||||
```tsx
|
```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'
|
const App = () => {
|
||||||
import '@cubetiq/invoice-print/dist/index.css'
|
const invoicePrint = useDoc(mockDataV2)
|
||||||
|
return (
|
||||||
class Example extends Component {
|
<div>
|
||||||
render() {
|
<button children={"Click Me"} onClick={()=> invoicePrint.print()}/>
|
||||||
return <MyComponent />
|
</div>
|
||||||
}
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export default App
|
||||||
```
|
```
|
||||||
|
|
||||||
### Contributors
|
### Contributors
|
||||||
|
|||||||
5
example/README.md
Normal file
5
example/README.md
Normal file
@ -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.
|
||||||
44
example/package.json
Normal file
44
example/package.json
Normal file
@ -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"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
BIN
example/public/favicon.ico
Normal file
BIN
example/public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.8 KiB |
48
example/public/index.html
Normal file
48
example/public/index.html
Normal file
@ -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>
|
||||||
15
example/public/manifest.json
Normal file
15
example/public/manifest.json
Normal file
@ -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"
|
||||||
|
}
|
||||||
9
example/src/App.test.tsx
Normal file
9
example/src/App.test.tsx
Normal file
@ -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)
|
||||||
|
})
|
||||||
15
example/src/App.tsx
Normal file
15
example/src/App.tsx
Normal file
@ -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
|
||||||
81
example/src/MockData/MockData.ts
Normal file
81
example/src/MockData/MockData.ts
Normal file
@ -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]
|
||||||
|
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
14
example/src/index.css
Normal file
14
example/src/index.css
Normal file
@ -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;
|
||||||
|
}
|
||||||
7
example/src/index.tsx
Normal file
7
example/src/index.tsx
Normal file
@ -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'))
|
||||||
1
example/src/react-app-env.d.ts
vendored
Normal file
1
example/src/react-app-env.d.ts
vendored
Normal file
@ -0,0 +1 @@
|
|||||||
|
/// <reference types="react-scripts" />
|
||||||
5
example/src/setupTests.ts
Normal file
5
example/src/setupTests.ts
Normal file
@ -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';
|
||||||
38
example/tsconfig.json
Normal file
38
example/tsconfig.json
Normal file
@ -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"
|
||||||
|
]
|
||||||
|
}
|
||||||
10896
example/yarn.lock
Normal file
10896
example/yarn.lock
Normal file
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue
Block a user