- dockerized lib development

datafe · Jun 6, 2021 · 30ce9b6 · 30ce9b6
1 parent 1bf402b
commit 30ce9b6
Show file tree

Hide file tree

Showing 3 changed files with 82 additions and 26 deletions.
diff --git a/.dockerignore b/.dockerignore
@@ -0,0 +1,5 @@
+node_modules
+build
+.dockerignore
+Dockerfile
+Dockerfile.prod
diff --git a/Dockerfile b/Dockerfile
@@ -0,0 +1,22 @@
+# pull official base image
+FROM node:14.15.1-alpine
+
+# set working directory
+WORKDIR /app
+
+# add `/app/node_modules/.bin` to $PATH
+ENV PATH /app/node_modules/.bin:$PATH
+
+# install app dependencies
+COPY package.json ./
+COPY package-lock.json ./
+RUN npm install
+RUN npm install react react-dom --no-save --silent
+
+# add app
+COPY . ./
+
+# start app
+CMD ["npm", "start"]
+
+
diff --git a/README.md b/README.md
@@ -1,19 +1,19 @@
-
 # ReactGrid MIT
 
 ### Add spreadsheet-like behavior to your React app 🚀
 
-[![MIT license](https://img.shields.io/badge/License-MIT-blue.svg)](https://github.com/silevis/reactgrid/blob/develop/LICENSE) 
-[![Build Status](https://dev.azure.com/Silevis/ReactGrid/_apis/build/status/GitHub-MIT/Upgrade%20version%20and%20publish?branchName=master)](https://dev.azure.com/Silevis/ReactGrid/_build/latest?definitionId=17&branchName=master) 
+[![MIT license](https://img.shields.io/badge/License-MIT-blue.svg)](https://github.com/silevis/reactgrid/blob/develop/LICENSE)
+[![Build Status](https://dev.azure.com/Silevis/ReactGrid/_apis/build/status/GitHub-MIT/Upgrade%20version%20and%20publish?branchName=master)](https://dev.azure.com/Silevis/ReactGrid/_build/latest?definitionId=17&branchName=master)
 [![reactgrid](https://img.shields.io/endpoint?url=https://dashboard.cypress.io/badge/simple/hwrqiy&style=flat&logo=cypress)](https://dashboard.cypress.io/projects/hwrqiy/runs)
 
-[![MIT license](https://david-dm.org/silevis/reactgrid/dev-status.svg)](https://david-dm.org/silevis/reactgrid?type=dev)   [![npm version](https://badge.fury.io/js/%40silevis%2Freactgrid.svg)](https://badge.fury.io/js/%40silevis%2Freactgrid)
+[![MIT license](https://david-dm.org/silevis/reactgrid/dev-status.svg)](https://david-dm.org/silevis/reactgrid?type=dev) [![npm version](https://badge.fury.io/js/%40silevis%2Freactgrid.svg)](https://badge.fury.io/js/%40silevis%2Freactgrid)
 
 <img alt="Sample app" src="https://reactgrid.com/sample.gif"/>
 
 Browse our examples & docs: 👉 [reactgrid.com](https://reactgrid.com/?utm_source=github&utm_medium=reactgridmit&utm_campaign=readme)
 
 Before running ReactGrid you need to have installed:
+
 - react": "^16.13.1"
 - react-dom: "^16.13.1"
 
@@ -34,7 +34,7 @@ Of course you can still **place yours cells anywhere**, but now we will focus on
 import { ReactGrid, Column, Row } from "@silevis/reactgrid";
 ```
 
-###  Import CSS styles
+### Import CSS styles
 
 Import basic CSS styles. This file is necessary to correctly display ReactGrid.
 
@@ -45,7 +45,7 @@ import "@silevis/reactgrid/styles.css";
 ### Create a cell matrix
 
 It's a good idea to separate up our data (people list) from ReactGrid interface (especially `Row` and `Column`).
-We encourage you to use Typescript features to prevent you from the possibly inconsistent data.  
+We encourage you to use Typescript features to prevent you from the possibly inconsistent data.
 
 ```tsx
 interface Person {
@@ -56,28 +56,30 @@ interface Person {
 const getPeople = (): Person[] => [
   { name: "Thomas", surname: "Goldman" },
   { name: "Susie", surname: "Quattro" },
-  { name: "", surname: "" }
+  { name: "", surname: "" },
 ];
 ```
+
 In the next step we have defined an array of ReactGrid's `Column`s stored in `getColumns` function.
 If you are interested how to do more complex operations related with columns like resizing or
-reordering, please browse our [👉 docs](https://reactgrid.com/docs?utm_source=github&utm_medium=reactgriddocs&utm_campaign=docs) 
+reordering, please browse our [👉 docs](https://reactgrid.com/docs?utm_source=github&utm_medium=reactgriddocs&utm_campaign=docs)
 
 ```tsx
 const getColumns = (): Column[] => [
   { columnId: "name", width: 150 },
-  { columnId: "surname", width: 150 }
+  { columnId: "surname", width: 150 },
 ];
 ```
-At the top of the datatable we are going to display static cells that contain `Name` and `Surname` so we can define them now. 
+
+At the top of the datatable we are going to display static cells that contain `Name` and `Surname` so we can define them now.
 
 ```tsx
 const headerRow: Row<HeaderCell> = {
   rowId: "header",
   cells: [
     { type: "header", text: "Name" },
-    { type: "header", text: "Surname" }
-  ]
+    { type: "header", text: "Surname" },
+  ],
 };
 ```
 
@@ -91,9 +93,9 @@ const getRows = (people: Person[]): Row[] => [
     rowId: idx,
     cells: [
       { type: "text", text: person.name },
-      { type: "text", text: person.surname }
-    ]
-  }))
+      { type: "text", text: person.surname },
+    ],
+  })),
 ];
 ```
 
@@ -103,7 +105,7 @@ ReactGrid component was fed with generated `rows` structure and previously defin
 ```tsx
 function App() {
   const [people] = React.useState<Person[]>(getPeople());
-  
+
   const rows = getRows(people);
   const columns = getColumns();
 
@@ -121,7 +123,13 @@ To be able to change any value inside the grid you have to implement your own ha
 Let's start with updating imports:
 
 ```ts
-import { ReactGrid, Column, Row, CellChange, TextCell} from "@silevis/reactgrid";
+import {
+  ReactGrid,
+  Column,
+  Row,
+  CellChange,
+  TextCell,
+} from "@silevis/reactgrid";
 ```
 
 Then define the function that applies changes to data and returns its copy.
@@ -166,26 +174,46 @@ function App() {
 Open live demo on [codesandbox.io](https://codesandbox.io/s/reactgrid-handling-changes-crzfx?file=/src/index.tsx)
 
 ## Other examples:
-* [Creating custom cell template](https://codesandbox.io/s/reactgrid-creating-new-cell-template-pdiux)
-* [Sticky panes](https://codesandbox.io/s/reactgrid-sticky-panes-oikll)
-* [Chevron cell example](https://codesandbox.io/s/reactgrid-group-cell-example-fh1di?file=/src/index.tsx)
-* [Cell highlights](https://codesandbox.io/s/reactgrid-highlights-8o8gq)
-* [Custom styles](https://codesandbox.io/s/reactgrid-custom-styling-buwuw)
-* [and a lot more here](https://reactgrid.com/docs/3.1/2-implementing-core-features/?utm_source=github&utm_medium=reactgriddocs&utm_campaign=docs)
+
+- [Creating custom cell template](https://codesandbox.io/s/reactgrid-creating-new-cell-template-pdiux)
+- [Sticky panes](https://codesandbox.io/s/reactgrid-sticky-panes-oikll)
+- [Chevron cell example](https://codesandbox.io/s/reactgrid-group-cell-example-fh1di?file=/src/index.tsx)
+- [Cell highlights](https://codesandbox.io/s/reactgrid-highlights-8o8gq)
+- [Custom styles](https://codesandbox.io/s/reactgrid-custom-styling-buwuw)
+- [and a lot more here](https://reactgrid.com/docs/3.1/2-implementing-core-features/?utm_source=github&utm_medium=reactgriddocs&utm_campaign=docs)
 
 # Browser support
 
 | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="Edge"  />](http://godban.github.io/browsers-support-badges/) Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox"  />](http://godban.github.io/browsers-support-badges/) Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome"  />](http://godban.github.io/browsers-support-badges/) Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" />](http://godban.github.io/browsers-support-badges/) Safari | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari-ios/safari-ios_48x48.png" alt="iOS Safari" />](http://godban.github.io/browsers-support-badges/) iOS/iPadOs Safari | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/samsung-internet/samsung-internet_48x48.png" alt="Samsung"/>](http://godban.github.io/browsers-support-badges/) Samsung internet | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png" alt="Opera" />](http://godban.github.io/browsers-support-badges/) Opera |
-| :-: | :-: | :-: | :-: | :-: | :-: | :-:|
-| 80+ | 61+ | 57+ | 13.1+ | 13+ | 9+ | 45+ |
+| :---------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------: |
+|                                                                                   80+                                                                                   |                                                                                         61+                                                                                         |                                                                                       57+                                                                                       |                                                                                     13.1+                                                                                      |                                                                                                  13+                                                                                                  |                                                                                                      9+                                                                                                      |                                                                                    45+                                                                                     |
 
 # Docs
 
 Explore ReactGrid docs: [here](https://reactgrid.com/docs?utm_source=github&utm_medium=reactgriddocs&utm_campaign=docs)
 
+# For devs
+
+Buiding image with docker 🐳:
+
+`docker build -t reactgrid-dev .`
+
+Running the container:
+
+```
+docker run \
+ -it \
+ --rm \
+ -v ${PWD}:/app \
+ -v /app/node_modules \
+ -p 3000:3000 \
+ -e CHOKIDAR_USEPOLLING=true \
+ reactgrid-dev
+```
+
 # Licensing
 
-ReactGrid is available in two versions, [MIT](https://github.com/silevis/reactgrid/blob/develop/LICENSE) (this package) which serve 
+ReactGrid is available in two versions, [MIT](https://github.com/silevis/reactgrid/blob/develop/LICENSE) (this package) which serve
 the full interface but is limited in functionality and PRO which is a fully functional version. You can compare versions
 [here](https://reactgrid.com/feature-comparison/?utm_source=github&utm_medium=reactgridfeatures&utm_campaign=licensing).
 
@@ -200,3 +228,4 @@ the full interface but is limited in functionality and PRO which is a fully func
     <img alt="Silevis" src="https://media.licdn.com/dms/image/C4D0BAQGgkonm5f80mA/company-logo_200_200/0?e=2159024400&v=beta&t=l5Nw-CF55OIxVORSAXOw79DlgSiDakhnYLlkBOMj7s8" width="200" />
   </a>
 </p>
+````