Merge pull request #32 from SuriyaKumar2402/master

Updated react samples

Author: PiramanayagamSyncfusion

README.md

@@ -1,217 +1,26 @@
-# React Sample Configuration
+# Syncfusion React Component Demo Samples
 
-## Adding your sample folder
-Create  new folder in 'src' location and name the folder as control name for example "grid” it is control name.
+Welcome to the demo samples repository for Syncfusion React components! This repository contains a collection of sample applications showcasing the usage of various Syncfusion components in a React environment.
 
-_Note: Do not use whitespace at any cause in folder’s name. Use “-” instead of space._
+## Prerequisites
 
-## Adding the sample
+- [Node.js](https://nodejs.org/en) -  `v10.24.1`
 
-Add the sample component tsx file in the sample folder.Below steps are need to be considered on sample creation
+## Run the samples
 
- * Sample component must extend the "SampleBase" component class from the path "src/common/sample-base" file.
- * Sample tag  must be enclosed between the "control-section" div.
- * In all samples description is need to be added. Add sample description  within the div tag with id as **description**.
+To run the sample applications locally, follow these steps
 
-```javascript
-import * as ReactDOM from 'react-dom';
-import * as React from 'react';
-import { SampleBase } from '../common/sample-base';
-export class Default extends SampleBase<{}, {}> {
-  
-  render() {
-    return (       
-      <div className = 'control-pane'>
-        <div className='control-section'>
-          //sample component tags
-        </div>
-        <div id="description">
-          // sample description
-        </div>
-      </div>
-    )
-  }
-}
+1. Install the required dependencies using npm
 
-```
-Refer the  [sample](https://github.com/syncfusion/ej2-react-samples/blob/master/src/grid/default.tsx) for example sample component.
-
-Note: Do not use whitespace at any cause in file’s name. Use “-” instead of space.
-
-## Adding property section
-To add  the "propertypane”  in the sample use tag `PropertyPane` from "common/property-pane" .Configure your sample properties as like below code snippet.
-
-```
-<PropertyPane title='Properties'>
-                <table id="property" title="Properties" className='property-panel-table' style={{ width: '100%' }}>
-                    <tr>
-                        <td style={{ width: '30%' }}>
-                            <div className="col-md-4" style={{ paddingTop: "8px" }}>
-                                GridLines
-                    </div>
-                        </td>
-                        <td style={{ width: '70%', paddingRight: '10px' }}>
-                            <div>
-                                <select id="ddl" name="ddl" onChange={this.change.bind(this)} className="form-control" style={{ padding: "6px" }} ref={d => this.dropElement = d}>
-                                    <option value="default">Default</option>
-                                    <option value="both">Both</option>
-                                    <option value="none">None</option>
-                                    <option value="horizontal">Horizontal</option>
-                                    <option value="vertical">Vertical</option>
-                                </select>
-                            </div>
-                        </td>
-                    </tr>
-                </table>
-            </PropertyPane>
-
-```
-Refer the [PropertyPanesample](https://github.com/syncfusion/ej2-react-samples/blob/master/src/grid/adaptive.tsx) for propertyPane example.
-
-## Add Routing for your sample
-
-Create the "config.tsx” file inside of your control folder.Configure your "config.tsx file" file as like below code snippet.
-
-```
-export const GridSampleOrder:Object = [
-    { 'path': 'grid/default', 'component':'Default', 'name': 'Default Functionalities', 'order': '01', 'category': 'Grid' },
-    { 'path': 'grid/gridlines', 'component':'GridLines', 'name': 'GridLines', 'order': '01', 'category': 'Grid', hideOnDevice: true }
-]
-
-```
-
-**Fields Description:**
-
- * _path :_ Specifies the sample router path. Path must be same as "sampleFolderName/sampleFileName".
-  
- * _component :_ Specifies the name of the sample component.
-  
- * _name :_ Specifies the sample name to be displayed.
-  
- * _order :_ Specifies the order in which sample to be displayed.
-  
- * _category :_ Specifies the sample category.
-
-*Note: set **hideOnDevice** as true if you want to hide a sample in devices.*
-
-## Configure Sample List
-
-Add your samples in “samplelist.tsx” located in “/src/common” folder
-1.	Import your sampleOrder  array from the component config file.
-2.	Add your samples in samplesList as Like below
-
-```
-import * as React from 'react';
-import { GridSampleOrder } from '../grid/config';
-
-export let samplesList: any = [
-
-    {
-        'name': 'Grid', 'category': 'Grids', 'order': '02', 'path': 'grid', 'samples': GridSampleOrder
-    }
-];
-```
-
-## Adding your control dependency
-
-Add your dependency in “package.json” file inside the dependencies.
-
-Note: Here, '\*' Specifies that install the latest published package form the online. '\*' is recommended for Syncfusion packages.
-
-```
-"dependencies": {
-        "@syncfusion/ej2-react-grids": "*"
-},
-```
-# Using the samples
-
-## Installing
-
-Before installation check `@syncfusion:registry=http://nexus.syncfusion.com/repository/ej2-production/` is available in npmrc file. Then use the below command to install all dependent packages.
-
-```
+```bash
 npm install
 ```
 
-## Build
-
-Use `npm run build` command to compile the source files. It calls the following tasks synchronously,
-
-1. SEO changes
-2. Build
-3. Styles ship
-4. Site-map generate.
-
-### SEO changes
-
-It will set meta data and description for the h1 tag to show our components first in search engine. Use the below command to run it individual. 
-
-```
-gulp SEO-changes
-```
-
-### Build
-
-Use the below command to generate scripts, styles, locale and sample lists.
-
-```
-gulp build
-```
-It runs the following tasks synchronously,
-
-1. Scripts
-2. Styles
-
-#### **Scripts**
-
- It compiles the Typescript files and use the below command to run this task.
-
-```
-gulp scripts
-```
-
-#### **Styles**
-
-`gulp styles` command is used to compile default themes. It calls the following two tasks synchronously.
-
-1. Default theme
-2. Compile styles
-
-#### Default theme
-
-Use the below command to generate default theme files.
-
-```
-gulp default-theme
-```
-
-#### Compile Styles
-It compiles the scss file to css file. To run this task use the below command,
-
-```
-gulp compile-styles
-```
-
-### Styles Shipping
-
-It copies css files for themes from node_modules. Use the below command to run it individual.
+2. Start the development server using gulp
 
-```
-gulp styles-ship
-```
-
-### Site map generation
-
-The below command combines sample of all components and store it in sitemap-demos.xml file to index our components, samples, documents in search engine.
-
-```
-gulp sitemap-generate
+```bash
+gulp serve
 ```
 
-## Running the Sample Browser
+3. Open your web browser and navigate to the specified localhost address to view the samples.
 
-To run your sample browser you can use any of the following command.
-
-```
-gulp serve
-```

gulpfile.js

@@ -159,7 +159,7 @@ gulp.task('build', gulp.series(function (done) {
 }));
 
 gulp.task('react-build', gulp.series(function (done) {
-    runSequence('create-locale','generate-router','styles','scripts','bundle','plnkr-json','cssfile', done);
+    runSequence('create-locale','generate-router','styles','scripts','bundle','cssfile', done);
 }));
 
 gulp.task('bundle', gulp.series(function () {

package.json

@@ -64,10 +64,6 @@
     "tributejs": "^3.7.3"
   },
   "devDependencies": {
-    "@types/react": "^15.0.24",
-    "@types/react-dom": "^15.5.1",
-    "@types/react-router": "^4.0.12",
-    "@types/react-router-dom": "^4.0.5",
     "awesome-typescript-loader": "^3.1.3",
     "browser-sync": "^2.18.13",
     "css-loader": "^0.28.4",
@@ -77,7 +73,6 @@
     "graceful-fs": "^4.2.4",
     "gulp": "^4.0.2",
     "gulp-sass": "^3.1.0",
-    "gulp-typescript": "3.1.6",
     "gulp-webpack": "^1.5.0",
     "gulp4-run-sequence": "^1.0.1",
     "postcss-loader": "2.0.8",
@@ -87,7 +82,6 @@
     "shelljs": "*",
     "source-map-loader": "^0.2.1",
     "style-loader": "^0.18.2",
-    "typescript": "2.3.4",
     "webpack": "^4.41.5"
   },
   "scripts": {