v24.2.3 is released

Author: pipeline

README.md

@@ -1,25 +1,217 @@
-# Syncfusion React Component Demo Samples
+# React Sample Configuration
 
-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.
+## Adding your sample folder
+Create  new folder in 'src' location and name the folder as control name for example "grid” it is control name.
 
-## Prerequisites
+_Note: Do not use whitespace at any cause in folder’s name. Use “-” instead of space._
 
-- [Node.js](https://nodejs.org/en) -  `v16+`
+## Adding the sample
 
-## Run the samples
+Add the sample component tsx file in the sample folder.Below steps are need to be considered on sample creation
 
-To run the sample applications locally, follow these steps
+ * 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**.
 
-1. Install the required dependencies using npm
+```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>
+    )
+  }
+}
 
-```bash
+```
+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.
+
+```
 npm install
 ```
 
-2. Start the development server using gulp
+## Build
 
-```bash
-gulp serve
+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
 ```
 
-3. Open your web browser and navigate to the specified localhost address to view the samples.
+### 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.
+
+```
+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
+```
+
+## Running the Sample Browser
+
+To run your sample browser you can use any of the following command.
+
+```
+gulp serve
+```

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@syncfusion/ej2-react-samples",
-  "version": "24.1.41",
+  "version": "24.2.3",
   "description": "Examples of React UI Components",
   "author": "Syncfusion Inc.",
   "license": "SEE LICENSE IN license",
@@ -49,8 +49,7 @@
     "react-router": "6.16.0",
     "react-router-dom": "6.16.0",
     "marked": "5.1.2",
-    "codemirror": "5.65.15",
-    "browser-sync": "^2.29.3"
+    "codemirror": "5.65.15"
   },
   "devDependencies": {
     "@microsoft/signalr": "7.0.11",
@@ -77,10 +76,11 @@
     "source-map-loader": "1.0.2",
     "style-loader": "2.0.0",
     "typescript": "5.2.2",
+    "sass": "^1.63.6",
+    "browser-sync": "^2.29.3",
     "webpack": "^4.41.5",
     "webpack-cli": "^4.1.0",
-    "webpack-stream": "^6.0.0",
-    "sass": "^1.63.6"
+    "webpack-stream": "^6.0.0"
   },
   "scripts": {
     "build": "gulp build",

src/diagram/activity-functional.tsx

@@ -25,7 +25,9 @@ import {
 import { CheckBoxComponent } from "@syncfusion/ej2-react-buttons";
 import { multiParentData } from './diagram-data';
 
-const SAMPLE_CSS = `.image-pattern-style {
+const SAMPLE_CSS = `
+/* For orientation and subtree alignment in property panel*/
+.image-pattern-style {
     background-color: white;
     background-size: contain;
     background-repeat: no-repeat;
@@ -57,8 +59,6 @@ const SAMPLE_CSS = `.image-pattern-style {
     border-width: 2px;
 }
 
-
-
 .diagram-control-pane .col-xs-6 {
     padding-left: 0px;
     padding-right: 0px;

src/diagram/activity.tsx

@@ -25,7 +25,9 @@ import {
 import { CheckBoxComponent } from "@syncfusion/ej2-react-buttons";
 import { multiParentData } from './diagram-data';
 
-const SAMPLE_CSS = `.image-pattern-style {
+const SAMPLE_CSS = `
+/* For orientation and subtree alignment in property panel*/
+.image-pattern-style {
     background-color: white;
     background-size: contain;
     background-repeat: no-repeat;

src/diagram/complex-hierarchical-tree-functional.tsx

@@ -117,7 +117,9 @@ let decoratorshape = [
   { shape: 'DoubleArrow', text: 'Double Arrow' }
 ];
 
-const SAMPLE_CSS = `.image-pattern-style {
+const SAMPLE_CSS = `
+/* For connector type and style change in property panel*/
+.image-pattern-style {
         background-color: white;
         background-size: contain;
         background-repeat: no-repeat;
@@ -148,15 +150,6 @@ const SAMPLE_CSS = `.image-pattern-style {
         border-color: #006CE6;
         border-width: 2px;
     }
-
-    .e-colorpicker-wrapper .e-split-btn-wrapper .e-split-colorpicker.e-split-btn .e-selected-color .e-split-preview{
-        width: 100px!important;
-        margin-left: -40px!important;
-    }
-    .e-colorpicker-wrapper .e-split-btn-wrapper .e-split-colorpicker.e-split-btn{
-        width: 110px!important;
-    }
-
     label{
       display: inline-block;
       font-size: 13px;

src/diagram/complex-hierarchical-tree.tsx

@@ -102,7 +102,9 @@ let connectors: ConnectorModel[] = [
   }
 ];
 
-const SAMPLE_CSS = `.image-pattern-style {
+const SAMPLE_CSS = `
+/* For connector type and style change in property panel*/
+.image-pattern-style {
         background-color: white;
         background-size: contain;
         background-repeat: no-repeat;
@@ -134,14 +136,6 @@ const SAMPLE_CSS = `.image-pattern-style {
         border-width: 2px;
     }
 
-    .e-colorpicker-wrapper .e-split-btn-wrapper .e-split-colorpicker.e-split-btn .e-selected-color .e-split-preview{
-        width: 100px!important;
-        margin-left: -40px!important;
-    }
-    .e-colorpicker-wrapper .e-split-btn-wrapper .e-split-colorpicker.e-split-btn{
-        width: 110px!important;
-    }
-
     label{
       display: inline-block;
       font-size: 13px;