React Components styles generations committed

Author: Balaji-Perumal

README.md

@@ -9,17 +9,21 @@
     "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.
+    "typeRoots": [
+      "./node_modules/@types",
+      "./node_modules/@testing-library"
+    ], // Specify root directory for type declarations.
     "types": [
       "node",
       "react",
@@ -31,6 +35,11 @@
       "DOM.Iterable"
     ] // Include libraries for ES2020 and DOM.
   },
+  "include": [
+    "src",
+    "spec",
+    "samples"
+  ], // Include only the provided directory for compilation.
   "exclude": [
     "node_modules",
     "dist",
@@ -39,4 +48,4 @@
     "test-report"
   ], // Exclude these directories from compilation.
   "compileOnSave": false // Disable Compile-on-Save.
-}
+}

components/base/tsconfig.json

@@ -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/gulpfile.js

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

components/buttons/styles/button/material3.scss

@@ -1,3 +1,3 @@
-@import '../../base/themes/material3.scss';
+@import 'react-base/styles/material3-definition.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/material3-definition.scss';
 @import 'material3-definition.scss';
 @import 'all.scss';

components/buttons/styles/chips/material3.scss

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

components/buttons/styles/floating-action-button/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/material3.scss

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

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

@@ -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'));