React Components styles generations committed

README.md

@@ -68,7 +68,7 @@ Built-in Material 3 stylesheets provide a modern, accessible design out of the b
            <a href="https://www.npmjs.com/package/@syncfusion/react-grid"><img src="https://ej2.syncfusion.com/github/images/npm-logo.png" alt="npm package @syncfusion/react-grid" title="@syncfusion/react-grid" style="height:20px;" />
        </td>
        <td>
-           <a href="components/grids/src/grid">Source</a>
+           <a href="components/grid/src/grid">Source</a>
        </td>
        <td>
            <a href="https://react.syncfusion.com/data-grid/overview">Live demo</a>

components/base/tsconfig.json

@@ -9,14 +9,14 @@
     "moduleResolution": "Node", // Resolve modules using Node-style resolution.
     "noEmitOnError": true, // Prevent emitting JS files if there are errors.
     "noFallthroughCasesInSwitch": true, // Prevent fallthrough in switch cases.
-    "noImplicitAny": true, // Disallow implicit any types.
+    "noImplicitAny": false, // Disallow implicit any types.
     "noImplicitReturns": true, // Ensure functions return a value.
     "noUnusedLocals": true, // Warn on unused local variables.
     "noUnusedParameters": true, // Warn on unused function parameters.
-    "strict": true, // Enable all strict checks.
-    "strictBindCallApply": true, // Enable strict checking of bind, call, and apply methods.
-    "strictFunctionTypes": true, // Enable strict checking of function types.
-    "strictNullChecks": true, // Enable strict null checks.
+    "strict": false, // Enable all strict checks.
+    "strictBindCallApply": false, // Enable strict checking of bind, call, and apply methods.
+    "strictFunctionTypes": false, // Enable strict checking of function types.
+    "strictNullChecks": false, // Enable strict null checks.
     "skipLibCheck": true, // Skip checking of declaration files.
     "sourceMap": true, // Generate source maps.
     "target": "ES2020", // Set ECMAScript version to ES2020.

components/buttons/gulpfile.js

@@ -1,5 +1,7 @@
 var gulp = require('gulp');
 const sass = require('gulp-sass')(require('sass'));
+const glob = require('glob');
+const fs = (global.fs = global.fs || require("fs"));
 
 /**
  * Compile ts files
@@ -45,8 +47,22 @@ gulp.task('styles', function (done) {
       });
 });
 
+/** 
+* Remove css variables for CSS files
+*/
+gulp.task('react-remove-css', function (done) {
+    var getCss = glob.sync('./styles/**/*.css');
+    for (var i = 0; i < getCss.length; i++) {
+        var cssContent = fs.readFileSync(getCss[i], 'utf8');
+        cssContent = cssContent.replace(/(:root\s*{[^}]*})|(\:root, .sf-light-mode\s*{[^}]*})|(\.sf-dark-mode\s*{[^}]*})/g, '');
+        cssContent = cssContent.replace(/^\s*[\r\n]/gm, '');
+        fs.writeFileSync(getCss[i], cssContent, 'utf8');
+    }
+    done();
+});
+
 /**
  * Build ts and scss files
  */
-gulp.task('build', gulp.series('scripts', 'styles'));
+gulp.task('build', gulp.series('scripts', 'styles', 'react-remove-css'));
 

components/buttons/styles/button/material3.scss

@@ -1,2 +1,3 @@
+@import 'react-base/styles/themes/material3.scss';
 @import 'material3-definition.scss';
 @import 'all.scss';

components/buttons/styles/check-box/material3.scss

@@ -1,3 +1,3 @@
-@import '../../base/themes/material3.scss';
+@import 'react-base/styles/themes/material3.scss';
 @import 'material3-definition.scss';
 @import 'all.scss';

components/buttons/styles/chips/material3.scss

@@ -1,3 +1,3 @@
-@import '../../base/themes/material3.scss';
+@import 'react-base/styles/themes/material3.scss';
 @import 'material3-definition.scss';
 @import 'all.scss';

components/buttons/styles/floating-action-button/material3.scss

@@ -1,4 +1,4 @@
-@import '../../base/themes/material3.scss';
+@import 'react-base/styles/themes/material3.scss';
 @import '../button/material3-definition.scss';
 @import 'material3-definition.scss';
 @import 'all.scss';

components/buttons/styles/material3.scss

@@ -1,11 +1,5 @@
-@import '../base/themes/material3.scss';
-@import 'button/material3-definition.scss';
-@import 'button/all.scss';
-@import 'check-box/material3-definition.scss';
-@import 'check-box/all.scss';
-@import 'radio-button/material3-definition.scss';
-@import 'radio-button/all.scss';
-@import 'chips/material3-definition.scss';
-@import 'chips/all.scss';
-@import 'floating-action-button/material3-definition.scss';
-@import 'floating-action-button/all.scss';
+@import 'button/material3.scss';
+@import 'check-box/material3.scss';
+@import 'radio-button/material3.scss';
+@import 'chips/material3.scss';
+@import 'floating-action-button/material3.scss';

components/buttons/styles/radio-button/material3.scss

@@ -1,3 +1,3 @@
-@import '../../base/themes/material3.scss';
+@import 'react-base/styles/themes/material3.scss';
 @import 'material3-definition.scss';
 @import 'all.scss';

components/calendars/gulpfile.js

@@ -1,5 +1,7 @@
 var gulp = require('gulp');
 const sass = require('gulp-sass')(require('sass'));
+const glob = require('glob');
+const fs = (global.fs = global.fs || require("fs"));
 
 /**
  * Compile ts files
@@ -45,8 +47,22 @@ gulp.task('styles', function (done) {
       });
 });
 
+/** 
+* Remove css variables for CSS files
+*/
+gulp.task('react-remove-css', function (done) {
+    var getCss = glob.sync('./styles/**/*.css');
+    for (var i = 0; i < getCss.length; i++) {
+        var cssContent = fs.readFileSync(getCss[i], 'utf8');
+        cssContent = cssContent.replace(/(:root\s*{[^}]*})|(\:root, .sf-light-mode\s*{[^}]*})|(\.sf-dark-mode\s*{[^}]*})/g, '');
+        cssContent = cssContent.replace(/^\s*[\r\n]/gm, '');
+        fs.writeFileSync(getCss[i], cssContent, 'utf8');
+    }
+    done();
+});
+
 /**
  * Build ts and scss files
  */
-gulp.task('build', gulp.series('scripts', 'styles'));
+gulp.task('build', gulp.series('scripts', 'styles', 'react-remove-css'));
 

components/calendars/styles/calendar/material3.scss

@@ -1,4 +1,4 @@
-@import '../../base/themes/material3.scss';
-@import '../../buttons/button/material3-definition.scss';
+@import 'react-base/styles/themes/material3.scss';
+@import 'react-buttons/styles/button/material3-definition.scss';
 @import 'material3-definition.scss';
 @import 'all.scss';

components/calendars/styles/datepicker/material3.scss

@@ -1,5 +1,5 @@
-@import '../../base/themes/material3.scss';
-@import '../../inputs/input/material3-definition.scss';
-@import '../../popups/popup/material3-definition.scss';
+@import 'react-base/styles/themes/material3.scss';
+@import 'react-inputs/styles/input/material3-definition.scss';
+@import 'react-popups/styles/popup/material3-definition.scss';
 @import 'material3-definition.scss';
 @import 'all.scss';

components/calendars/styles/material3.scss

@@ -1,10 +1,3 @@
-@import '../base/themes/material3.scss';
-@import '../buttons/button/material3-definition.scss';
-@import '../inputs/input/material3-definition.scss';
-@import '../popups/popup/material3-definition.scss';
-@import 'calendar/material3-definition.scss';
-@import 'calendar/all.scss';
-@import 'datepicker/material3-definition.scss';
-@import 'datepicker/all.scss';
-@import 'timepicker/material3-definition.scss';
-@import 'timepicker/all.scss';
+@import 'calendar/material3.scss';
+@import 'datepicker/material3.scss';
+@import 'timepicker/material3.scss';

components/calendars/styles/timepicker/material3.scss

@@ -1,5 +1,5 @@
-@import '../../base/themes/material3.scss';
-@import '../../inputs/input/material3-definition.scss';
-@import '../../popups/popup/material3-definition.scss';
+@import 'react-base/styles/themes/material3.scss';
+@import 'react-inputs/styles/input/material3-definition.scss';
+@import 'react-popups/styles/popup/material3-definition.scss';
 @import 'material3-definition.scss';
 @import 'all.scss';

components/dropdowns/gulpfile.js

@@ -1,5 +1,7 @@
 var gulp = require('gulp');
 const sass = require('gulp-sass')(require('sass'));
+const glob = require('glob');
+const fs = (global.fs = global.fs || require("fs"));
 
 /**
  * Compile ts files
@@ -45,8 +47,22 @@ gulp.task('styles', function (done) {
       });
 });
 
+/** 
+* Remove css variables for CSS files
+*/
+gulp.task('react-remove-css', function (done) {
+    var getCss = glob.sync('./styles/**/*.css');
+    for (var i = 0; i < getCss.length; i++) {
+        var cssContent = fs.readFileSync(getCss[i], 'utf8');
+        cssContent = cssContent.replace(/(:root\s*{[^}]*})|(\:root, .sf-light-mode\s*{[^}]*})|(\.sf-dark-mode\s*{[^}]*})/g, '');
+        cssContent = cssContent.replace(/^\s*[\r\n]/gm, '');
+        fs.writeFileSync(getCss[i], cssContent, 'utf8');
+    }
+    done();
+});
+
 /**
  * Build ts and scss files
  */
-gulp.task('build', gulp.series('scripts', 'styles'));
+gulp.task('build', gulp.series('scripts', 'styles', 'react-remove-css'));
 

components/dropdowns/styles/drop-down-base/material3.scss

@@ -1,3 +1,3 @@
-@import '../../base/themes/material3.scss';
+@import 'react-base/styles/themes/material3.scss';
 @import 'material3-definition.scss';
 @import 'all.scss';

components/dropdowns/styles/drop-down-list/material3.scss

@@ -1,3 +1,3 @@
-@import '../../base/themes/material3.scss';
+@import 'react-base/styles/themes/material3.scss';
 @import 'material3-definition.scss';
 @import 'all.scss';

components/dropdowns/styles/material3.scss

@@ -1,5 +1,2 @@
-@import '../base/themes/material3.scss';
-@import 'drop-down-base/material3-definition.scss';
-@import 'drop-down-base/all.scss';
-@import 'drop-down-list/material3-definition.scss';
-@import 'drop-down-list/all.scss';
+@import 'drop-down-base/material3.scss';
+@import 'drop-down-list/material3.scss';

components/grids/gulpfile.js → components/grid/gulpfile.js

@@ -1,5 +1,7 @@
 var gulp = require('gulp');
 const sass = require('gulp-sass')(require('sass'));
+const glob = require('glob');
+const fs = (global.fs = global.fs || require("fs"));
 
 /**
  * Compile ts files
@@ -45,8 +47,22 @@ gulp.task('styles', function (done) {
       });
 });
 
+/** 
+* Remove css variables for CSS files
+*/
+gulp.task('remove-css', function (done) {
+    var getCss = glob.sync('./styles/**/*.css');
+    for (var i = 0; i < getCss.length; i++) {
+        var cssContent = fs.readFileSync(getCss[i], 'utf8');
+        cssContent = cssContent.replace(/(:root\s*{[^}]*})|(\:root, .sf-light-mode\s*{[^}]*})|(\.sf-dark-mode\s*{[^}]*})/g, '');
+        cssContent = cssContent.replace(/^\s*[\r\n]/gm, '');
+        fs.writeFileSync(getCss[i], cssContent, 'utf8');
+    }
+    done();
+});
+
 /**
  * Build ts and scss files
  */
-gulp.task('build', gulp.series('scripts', 'styles'));
+gulp.task('build', gulp.series('scripts', 'styles', 'remove-css'));
 

components/grid/styles/grid/material3.scss

@@ -0,0 +1,15 @@
+@import 'react-base/styles/themes/material3.scss';
+@import 'react-inputs/styles/input/material3-definition.scss';
+@import 'react-inputs/styles/numerictextbox/material3-definition.scss';
+@import 'react-buttons/styles/button/material3-definition.scss';
+@import 'react-buttons/styles/radio-button/material3-definition.scss';
+@import 'react-buttons/styles/check-box/material3-definition.scss';
+@import 'react-dropdowns/styles/drop-down-list/material3-definition.scss';
+@import 'react-popups/styles/spinner/material3-definition.scss';
+@import 'react-popups/styles/tooltip/material3-definition.scss';
+@import 'react-navigations/styles/toolbar/material3-definition.scss';
+@import 'react-navigations/styles/context-menu/material3-definition.scss';
+@import 'react-notifications/styles/skeleton/material3-definition.scss';
+@import 'react-pager/styles/pager/material3-definition.scss';
+@import 'material3-definition.scss';
+@import 'all.scss';

components/grid/styles/material3.scss

@@ -0,0 +1 @@
+@import 'grid/material3.scss';

components/inputs/gulpfile.js

@@ -1,5 +1,7 @@
 var gulp = require('gulp');
 const sass = require('gulp-sass')(require('sass'));
+const glob = require('glob');
+const fs = (global.fs = global.fs || require("fs"));
 
 /**
  * Compile ts files
@@ -45,8 +47,22 @@ gulp.task('styles', function (done) {
       });
 });
 
+/** 
+* Remove css variables for CSS files
+*/
+gulp.task('remove-css', function (done) {
+    var getCss = glob.sync('./styles/**/*.css');
+    for (var i = 0; i < getCss.length; i++) {
+        var cssContent = fs.readFileSync(getCss[i], 'utf8');
+        cssContent = cssContent.replace(/(:root\s*{[^}]*})|(\:root, .sf-light-mode\s*{[^}]*})|(\.sf-dark-mode\s*{[^}]*})/g, '');
+        cssContent = cssContent.replace(/^\s*[\r\n]/gm, '');
+        fs.writeFileSync(getCss[i], cssContent, 'utf8');
+    }
+    done();
+});
+
 /**
  * Build ts and scss files
  */
-gulp.task('build', gulp.series('scripts', 'styles'));
+gulp.task('build', gulp.series('scripts', 'styles', 'remove-css'));
 

components/inputs/styles/input/material3.scss

@@ -1,3 +1,3 @@
-@import '../../base/themes/material3.scss';
+@import 'react-base/styles/themes/material3.scss';
 @import 'material3-definition.scss';
 @import 'all.scss';

components/inputs/styles/material3.scss

@@ -1,9 +1,4 @@
-@import '../base/themes/material3.scss';
-@import 'input/material3-definition.scss';
-@import 'input/all.scss';
-@import 'numerictextbox/material3-definition.scss';
-@import 'numerictextbox/all.scss';
-@import 'textbox/material3-definition.scss';
-@import 'textbox/all.scss';
-@import 'textarea/material3-definition.scss';
-@import 'textarea/all.scss';
+@import 'input/material3.scss';
+@import 'numerictextbox/material3.scss';
+@import 'textbox/material3.scss';
+@import 'textarea/material3.scss';

components/inputs/styles/numerictextbox/material3.scss

@@ -1,4 +1,4 @@
-@import '../../base/themes/material3.scss';
+@import 'react-base/styles/themes/material3.scss';
 @import '../input/material3-definition.scss';
 @import 'material3-definition.scss';
 @import 'all.scss';

components/inputs/styles/textarea/material3.scss

@@ -1,4 +1,4 @@
-@import '../../base/themes/material3.scss';
+@import 'react-base/styles/themes/material3.scss';
 @import '../input/material3-definition.scss';
 @import '../textbox/material3-definition.scss';
 @import 'material3-definition.scss';

components/inputs/styles/textbox/material3.scss

@@ -1,4 +1,4 @@
-@import '../../base/themes/material3.scss';
+@import 'react-base/styles/themes/material3.scss';
 @import '../input/material3-definition.scss';
 @import 'material3-definition.scss';
 @import 'all.scss';