Update packages, make package.json compatible with StackBlitz, minor polishing

2019-09-18 17:22:16 +03:00 · 2019-09-18 17:22:16 +03:00 · 966a7bad79
--- a/README.md
+++ b/README.md
@ -1,4 +1,6 @@
-This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+## Getting Started with KendoReact
+
+This project complements the [KendoReact documentation](https://www.telerik.com/kendo-react-ui/getting-started/). It was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).

 ## Available Scripts

--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -1,21 +1,24 @@
 {
-  "name": "getting-started",
+  "name": "kendo-react-getting-started",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@progress/kendo-data-query": "^1.5.2",
    "@progress/kendo-drawing": "^1.5.12",
+    "@progress/kendo-react-animation": "^3.4.0",
    "@progress/kendo-react-dateinputs": "^3.4.0",
    "@progress/kendo-react-dialogs": "^3.4.0",
    "@progress/kendo-react-dropdowns": "^3.4.0",
    "@progress/kendo-react-grid": "^3.4.0",
    "@progress/kendo-react-inputs": "^3.4.0",
    "@progress/kendo-react-intl": "^3.4.0",
+    "@progress/kendo-react-popup": "^3.4.0",
    "@progress/kendo-theme-default": "^4.3.2",
    "react": "^16.9.0",
-    "react-dom": "^16.9.0",
-    "react-scripts": "3.1.1",
-    "save": "^2.4.0"
+    "react-dom": "^16.9.0"
+  },
+  "devDependencies": {
+    "react-scripts": "3.1.1"
  },
  "scripts": {
    "start": "react-scripts start",
--- a/public/index.html
+++ b/public/index.html
@ -4,12 +4,11 @@
    <meta charset="utf-8" />
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#5392e4" />
+    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
-    <link rel="apple-touch-icon" href="logo192.png" />
    <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
--- a/public/manifest.json
+++ b/public/manifest.json
@ -1,15 +1,25 @@
 {
-  "short_name": "KendoReact Getting Started",
-  "name": "KendoReact Getting Started",
+  "short_name": "React App",
+  "name": "Create React App Sample",
  "icons": [
    {
      "src": "favicon.ico",
      "sizes": "64x64 32x32 24x24 16x16",
      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
    }	    
  ],
  "start_url": ".",
  "display": "standalone",
-  "theme_color": "#5392e4",
+  "theme_color": "#000000",
  "background_color": "#ffffff"
 }
--- a/src/App.css
+++ b/src/App.css
@ -1,7 +1,3 @@
-html {
-  font-family: sans-serif;
-}
-
-dt {
-  font-weight: bold;
+dt {
+  font-weight: bold;
 }
--- a/src/App.js
+++ b/src/App.js
@ -1,6 +1,6 @@
-import React, { Component } from 'react';
-import './App.css';
+import React, {Component} from 'react';
 import '@progress/kendo-theme-default/dist/all.css';
+import './App.css';
 import categories from './categories.json';
 import products from './products.json';
 import { process } from '@progress/kendo-data-query';
@ -14,14 +14,14 @@ class App extends Component {
    
    this.state = {
      dropdownlistCategory: null,
-      windowVisible: false,
-      gridClickedRow: {},
      gridDataState: {
        sort: [
          { field: "ProductName", dir: "asc" }
        ],
        page: { skip: 0, take: 10 }
-      }
+      },
+      windowVisible: false,
+      gridClickedRow: {}
    }
  }
  
@ -50,12 +50,8 @@ class App extends Component {
  
  render() {
    return (
-      <div id="kendoreact-getting-started">
-        <h1>KendoReact Getting Started</h1>
-        <ul>
-          <li>Select an item from the <strong>DropDownList</strong> to see its ID.</li>
-          <li>Click on a <strong>Grid</strong> row to see product details in a popup <strong>Window</strong>.</li>
-        </ul>
+      <div className="kendo-react-getting-started">
+        <h1>Hello KendoReact!</h1>
        <p>
          <DropDownList
            data={categories}
@ -67,6 +63,20 @@ class App extends Component {
          &nbsp; Selected category ID: <strong>{this.state.dropdownlistCategory}</strong>
        </p>
        
+        <Grid
+          data={process(products, this.state.gridDataState)}
+          pageable={true}
+          sortable={true}
+          {...this.state.gridDataState}
+          onDataStateChange={this.handleGridDataStateChange}
+          style={{ height: "400px" }}
+          onRowClick={this.handleGridRowClick}>
+          <GridColumn field="ProductName" title="Product Name" />
+          <GridColumn field="UnitPrice" title="Price" format="{0:c}" />
+          <GridColumn field="UnitsInStock" title="Units in Stock" />
+          <GridColumn field="Discontinued" cell={checkboxColumn} />
+        </Grid>
+        
        {this.state.windowVisible &&
          <Window
            title="Product Details"
@ -83,19 +93,6 @@ class App extends Component {
          </Window>
        }
        
-        <Grid
-          data={process(products, this.state.gridDataState)}
-          pageable={true}
-          sortable={true}
-          {...this.state.gridDataState}
-          onDataStateChange={this.handleGridDataStateChange}
-          onRowClick={this.handleGridRowClick}
-          style={{ height: "400px" }}>
-          <GridColumn field="ProductName" title="Product Name" />
-          <GridColumn field="UnitPrice" title="Price" format="{0:c}" />
-          <GridColumn field="UnitsInStock" title="Units in Stock" />
-          <GridColumn field="Discontinued" filter="boolean" cell={checkboxColumn} />
-        </Grid>
      </div>
    );
  }
@ -111,4 +108,4 @@ class checkboxColumn extends Component {
  }
 }

-export default App;
+export default App;
--- a/src/App.test.js
+++ b/src/App.test.js
@ -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/src/categories.json
+++ b/src/categories.json
@ -1,10 +1,10 @@
-[
-  {"CategoryID": 1, "CategoryName": "Beverages"},
-  {"CategoryID": 2, "CategoryName": "Condiments"},
-  {"CategoryID": 3, "CategoryName": "Confections"},
-  {"CategoryID": 4, "CategoryName": "Dairy Products"},
-  {"CategoryID": 5, "CategoryName": "Grains/Cereals"},
-  {"CategoryID": 6, "CategoryName": "Meat/Poultry"},
-  {"CategoryID": 7, "CategoryName": "Produce"},
-  {"CategoryID": 8, "CategoryName": "Seafood"}
+[
+  {"CategoryID": 1, "CategoryName": "Beverages"},
+  {"CategoryID": 2, "CategoryName": "Condiments"},
+  {"CategoryID": 3, "CategoryName": "Confections"},
+  {"CategoryID": 4, "CategoryName": "Dairy Products"},
+  {"CategoryID": 5, "CategoryName": "Grains/Cereals"},
+  {"CategoryID": 6, "CategoryName": "Meat/Poultry"},
+  {"CategoryID": 7, "CategoryName": "Produce"},
+  {"CategoryID": 8, "CategoryName": "Seafood"}
 ]
--- a/src/index.css
+++ b/src/index.css
@ -1,5 +1,4 @@
 body {
-  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
    sans-serif;
--- a/src/index.js
+++ b/src/index.js
@ -1,5 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
+import './index.css';
 import App from './App';
 import * as serviceWorker from './serviceWorker';

--- a/src/products.json
+++ b/src/products.json
@ -1,18 +1,18 @@
-[
-  {"ProductID": 1, "ProductName": "Tea", "CategoryID": 1, "QuantityPerUnit": "10 boxes x 20 bags", "UnitPrice": 18.0, "UnitsInStock": 39, "Discontinued": false },
-  {"ProductID": 7, "ProductName": "Dried Pears", "CategoryID": 7, "QuantityPerUnit": "12 - 1 lb pkgs.", "UnitPrice": 30.0, "UnitsInStock": 15, "Discontinued": false },
-  {"ProductID": 8, "ProductName": "Cranberry Sauce", "CategoryID": 2, "QuantityPerUnit": "12 - 12 oz jars", "UnitPrice": 40.0, "UnitsInStock": 6, "Discontinued": false },
-  {"ProductID": 9, "ProductName": "Mishi Kobe Niku", "CategoryID": 6, "QuantityPerUnit": "18 - 500 g pkgs.", "UnitPrice": 97.0, "UnitsInStock": 29, "Discontinued": true },
-  {"ProductID": 14, "ProductName": "Tofu", "CategoryID": 7, "QuantityPerUnit": "40 - 100 g pkgs.", "UnitPrice": 23.25, "UnitsInStock": 35, "Discontinued": false },
-  {"ProductID": 17, "ProductName": "Alice Mutton", "CategoryID": 6, "QuantityPerUnit": "20 - 1 kg tins", "UnitPrice": 39.0, "UnitsInStock": 0, "Discontinued": false},
-  {"ProductID": 19, "ProductName": "Teatime Biscuits", "CategoryID": 3, "QuantityPerUnit": "10 boxes x 12 pieces", "UnitPrice": 9.2, "UnitsInStock": 25, "Discontinued": false },
-  {"ProductID": 40, "ProductName": "Boston Crab Meat", "CategoryID": 8, "QuantityPerUnit": "24 - 4 oz tins", "UnitPrice": 18.4, "UnitsInStock": 123, "Discontinued": false },
-  {"ProductID": 43, "ProductName": "Coffee", "CategoryID": 1, "QuantityPerUnit": "16 - 500 g tins", "UnitPrice": 46.0, "UnitsInStock": 17, "Discontinued": false },
-  {"ProductID": 48, "ProductName": "Chocolate", "CategoryID": 3, "QuantityPerUnit": "10 pkgs.", "UnitPrice": 12.75, "UnitsInStock": 15, "Discontinued": false },
-  {"ProductID": 56, "ProductName": "Gnocchi di nonna Alice", "CategoryID": 5, "QuantityPerUnit": "24 - 250 g pkgs.", "UnitPrice": 38.0, "UnitsInStock": 21, "Discontinued": true },
-  {"ProductID": 57, "ProductName": "Ravioli Angelo", "CategoryID": 5, "QuantityPerUnit": "24 - 250 g pkgs.", "UnitPrice": 19.5, "UnitsInStock": 36, "Discontinued": false },
-  {"ProductID": 60, "ProductName": "Camembert Pierrot", "CategoryID": 4, "QuantityPerUnit": "15 - 300 g rounds", "UnitPrice": 34.0, "UnitsInStock": 19, "Discontinued": true },
-  {"ProductID": 65, "ProductName": "Hot Pepper Sauce", "CategoryID": 2, "QuantityPerUnit": "32 - 8 oz bottles", "UnitPrice": 21.05, "UnitsInStock": 76, "Discontinued": false },
-  {"ProductID": 72, "ProductName": "Mozzarella di Giovanni", "CategoryID": 4, "QuantityPerUnit": "24 - 200 g pkgs.", "UnitPrice": 34.8, "UnitsInStock": 14, "Discontinued": false},
-  {"ProductID": 73,"ProductName": "Röd Kaviar", "CategoryID": 8, "QuantityPerUnit": "24 - 150 g jars", "UnitPrice": 15.0, "UnitsInStock": 101, "Discontinued": true }
+[
+  {"ProductID": 1, "ProductName": "Tea", "CategoryID": 1, "QuantityPerUnit": "10 boxes x 20 bags", "UnitPrice": 18.0, "UnitsInStock": 39, "Discontinued": false },
+  {"ProductID": 7, "ProductName": "Dried Pears", "CategoryID": 7, "QuantityPerUnit": "12 - 1 lb pkgs.", "UnitPrice": 30.0, "UnitsInStock": 15, "Discontinued": false },
+  {"ProductID": 8, "ProductName": "Cranberry Sauce", "CategoryID": 2, "QuantityPerUnit": "12 - 12 oz jars", "UnitPrice": 40.0, "UnitsInStock": 6, "Discontinued": false },
+  {"ProductID": 9, "ProductName": "Mishi Kobe Niku", "CategoryID": 6, "QuantityPerUnit": "18 - 500 g pkgs.", "UnitPrice": 97.0, "UnitsInStock": 29, "Discontinued": true },
+  {"ProductID": 14, "ProductName": "Tofu", "CategoryID": 7, "QuantityPerUnit": "40 - 100 g pkgs.", "UnitPrice": 23.25, "UnitsInStock": 35, "Discontinued": false },
+  {"ProductID": 17, "ProductName": "Alice Mutton", "CategoryID": 6, "QuantityPerUnit": "20 - 1 kg tins", "UnitPrice": 39.0, "UnitsInStock": 0, "Discontinued": false},
+  {"ProductID": 19, "ProductName": "Teatime Biscuits", "CategoryID": 3, "QuantityPerUnit": "10 boxes x 12 pieces", "UnitPrice": 9.2, "UnitsInStock": 25, "Discontinued": false },
+  {"ProductID": 40, "ProductName": "Boston Crab Meat", "CategoryID": 8, "QuantityPerUnit": "24 - 4 oz tins", "UnitPrice": 18.4, "UnitsInStock": 123, "Discontinued": false },
+  {"ProductID": 43, "ProductName": "Coffee", "CategoryID": 1, "QuantityPerUnit": "16 - 500 g tins", "UnitPrice": 46.0, "UnitsInStock": 17, "Discontinued": false },
+  {"ProductID": 48, "ProductName": "Chocolate", "CategoryID": 3, "QuantityPerUnit": "10 pkgs.", "UnitPrice": 12.75, "UnitsInStock": 15, "Discontinued": false },
+  {"ProductID": 56, "ProductName": "Gnocchi di nonna Alice", "CategoryID": 5, "QuantityPerUnit": "24 - 250 g pkgs.", "UnitPrice": 38.0, "UnitsInStock": 21, "Discontinued": true },
+  {"ProductID": 57, "ProductName": "Ravioli Angelo", "CategoryID": 5, "QuantityPerUnit": "24 - 250 g pkgs.", "UnitPrice": 19.5, "UnitsInStock": 36, "Discontinued": false },
+  {"ProductID": 60, "ProductName": "Camembert Pierrot", "CategoryID": 4, "QuantityPerUnit": "15 - 300 g rounds", "UnitPrice": 34.0, "UnitsInStock": 19, "Discontinued": true },
+  {"ProductID": 65, "ProductName": "Hot Pepper Sauce", "CategoryID": 2, "QuantityPerUnit": "32 - 8 oz bottles", "UnitPrice": 21.05, "UnitsInStock": 76, "Discontinued": false },
+  {"ProductID": 72, "ProductName": "Mozzarella di Giovanni", "CategoryID": 4, "QuantityPerUnit": "24 - 200 g pkgs.", "UnitPrice": 34.8, "UnitsInStock": 14, "Discontinued": false},
+  {"ProductID": 73,"ProductName": "Röd Kaviar", "CategoryID": 8, "QuantityPerUnit": "24 - 150 g jars", "UnitPrice": 15.0, "UnitsInStock": 101, "Discontinued": true }
 ]