feat (ci): add support for code generation in repetitive efforts rela…

…ted to specs and definition (#43)

* add script to generate code based in contracts

.eslintignore

@@ -1 +1,4 @@
-**/*.d.ts
+**/*.d.ts
+docs
+examples
+scripts

lib/components/box/box.dart

@@ -29,6 +29,9 @@ class Box extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    // ignore: todo
+    // TODO: Refactor this to use a loop or other stuff to make everything be grouped together.
+
     const activeBreakpoint = Breakpoints.xs;
     var padding =
         resolveValueForBreakpoint(styleSheet.padding, activeBreakpoint);

lib/core/stylesheet/stylesheet.dart

@@ -21,19 +21,16 @@ const Map<Breakpoints, double?> defaultDoubleEmptyValue = {
 };
 
 class StyleSheet {
-  // States
-  // final StyleSheet? darkMode;
-  // final StyleSheet? disabled;
-  // ===============
-  // Box Style
+// %%[CODER_START]:StyleSheet_attributes%%
+  final Map<Breakpoints, double?> paddingRight;
+  final Map<Breakpoints, double?> paddingLeft;
+  final Map<Breakpoints, double?> paddingTop;
+  final Map<Breakpoints, double> padding;
+  final Map<Breakpoints, String?> backgroundColor;
+// %%[CODER_END]:StyleSheet_attributes%%
   final double? width;
   final double? height;
   final Map<Breakpoints, Color> color;
-  final Map<Breakpoints, String?> backgroundColor;
-  final Map<Breakpoints, double> padding;
-  final Map<Breakpoints, double?> paddingTop;
-  final Map<Breakpoints, double?> paddingLeft;
-  final Map<Breakpoints, double?> paddingRight;
   final Map<Breakpoints, double?> paddingBottom;
   final Map<Breakpoints, double?> paddingVertical;
   final Map<Breakpoints, double?> paddingHorizontal;

lib/core/stylesheet/stylesheet.json

@@ -0,0 +1,22 @@
+{
+  "backgroundColor": {
+    "type": "String?",
+    "default": "defaultStringEmptyValue"
+  },
+  "padding": {
+    "type": "double",
+    "default": "defaultDoubleZeroValue"
+  },
+  "paddingTop": {
+    "type": "double?",
+    "default": "defaultDoubleEmptyValue"
+  },
+  "paddingLeft": {
+    "type": "double?",
+    "default": "defaultDoubleEmptyValue"
+  },
+  "paddingRight": {
+    "type": "double?",
+    "default": "defaultDoubleEmptyValue"
+  }
+}

lib/core/stylesheet/stylesheet.ts

@@ -3,6 +3,13 @@ import { Breakpoints } from '@lib/core/breakpoints/breakpoints';
 type ResponsiveProperty<Type> = Partial<Record<Breakpoints, Type>>;
 
 export interface StyleSheet {
+  // %%[CODER_START]:StyleSheet_attributes%%
+  paddingRight?: ResponsiveProperty<number | string> | string;
+  paddingLeft?: ResponsiveProperty<number | string> | string;
+  paddingTop?: ResponsiveProperty<number | string> | string;
+  padding?: ResponsiveProperty<number | string> | string;
+  backgroundColor?: ResponsiveProperty<string> | string;
+  // %%[CODER_END]:StyleSheet_attributes%%
   srOnly?: boolean;
   borderStyle?: string;
   overflow?: ResponsiveProperty<string> | string;
@@ -23,8 +30,6 @@ export interface StyleSheet {
   border?: ResponsiveProperty<string> | string;
   borderWidth?: ResponsiveProperty<string> | string;
   borderColor?: ResponsiveProperty<string> | string;
-  backgroundColor?: ResponsiveProperty<string> | string;
-  padding?: ResponsiveProperty<number | string> | string;
   margin?: ResponsiveProperty<number | string> | string;
   marginLeft?: ResponsiveProperty<number | string> | string;
   marginRight?: ResponsiveProperty<number | string> | string;

lib/core/theme/theme.json

@@ -0,0 +1,78 @@
+{
+  "colors": {
+    "primary": {
+      "x050": "#FFE8D9",
+      "x100": "#FFD0B5",
+      "x200": "#FFB088",
+      "x300": "#FF9466",
+      "x400": "#F9703E",
+      "x500": "#F35627",
+      "x600": "#DE3A11",
+      "x700": "#C52707",
+      "x800": "#AD1D07",
+      "x900": "#841003"
+    },
+    "accent": {
+      "x050": "#FFE3EC",
+      "x100": "#FFB8D2",
+      "x200": "#FF8CBA",
+      "x300": "#F364A2",
+      "x400": "#E8368F",
+      "x500": "#DA127D",
+      "x600": "#BC0A6F",
+      "x700": "#A30664",
+      "x800": "#870557",
+      "x900": "#620042"
+    },
+    "neutral": {
+      "x000": "#FFFFFF",
+      "x050": "#F7F7F7",
+      "x100": "#E1E1E1",
+      "x200": "#CFCFCF",
+      "x300": "#B1B1B1",
+      "x400": "#9E9E9E",
+      "x500": "#7E7E7E",
+      "x600": "#626262",
+      "x700": "#515151",
+      "x800": "#3B3B3B",
+      "x900": "#222222",
+      "x999": "#111111"
+    },
+    "positive": {
+      "x050": "#E3F9E5",
+      "x100": "#C1F2C7",
+      "x200": "#91E697",
+      "x300": "#51CA58",
+      "x400": "#31B237",
+      "x500": "#18981D",
+      "x600": "#0F8613",
+      "x700": "#0E7817",
+      "x800": "#07600E",
+      "x900": "#014807"
+    },
+    "negative": {
+      "x050": "#FFE3E3",
+      "x100": "#FFBDBD",
+      "x200": "#FF9B9B",
+      "x300": "#F86A6A",
+      "x400": "#EF4E4E",
+      "x500": "#E12D39",
+      "x600": "#CF1124",
+      "x700": "#AB091E",
+      "x800": "#8A041A",
+      "x900": "#610316"
+    },
+    "warning": {
+      "x050": "#FFFBEA",
+      "x100": "#FFF3C4",
+      "x200": "#FCE588",
+      "x300": "#FADB5F",
+      "x400": "#F7C948",
+      "x500": "#F0B429",
+      "x600": "#DE911D",
+      "x700": "#CB6E17",
+      "x800": "#B44D12",
+      "x900": "#8D2B0B"
+    }
+  }
+}

lib/utils/renderCSS.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 function renderCSSValue(cssPropName: any, cssPropValue: any) {
   if (cssPropName.includes('horizontal')) {
     return `

lib/utils/string/capitalize.ts

@@ -1,3 +1,3 @@
-export function capitalize(str: any) {
+export function capitalize(str: string) {
   return str.charAt(0).toUpperCase() + str.slice(1);
 }

package.json

@@ -14,6 +14,7 @@
     "url": "https://github.com/skynexui/components.git"
   },
   "scripts": {
+    "update:contracts": "node ./scripts/coder/coder.js && yarn lint --fix && flutter analyze",
     "setup": "yarn install && flutter pub get",
     "predocs:dev": "yarn export:docs && node ./docs/scripts/docs/generator.js",
     "docs:dev": "cd docs && yarn install && yarn dev",

scripts/bumpFlutter.js

@@ -1,13 +1,15 @@
 const fs = require('fs');
 const pkg = require('../package.json');
+
 console.log(`[Bump Flutter to: ${pkg.version}]`);
 
-const pubspecUpdated = fs.readFileSync('./pubspec.yaml', { encoding: 'utf-8' })
+const pubspecUpdated = fs
+  .readFileSync('./pubspec.yaml', { encoding: 'utf-8' })
   .split('\n')
   .map((line) => {
-    if(line.startsWith('version')) return `version: ${pkg.version}`;
+    if (line.startsWith('version')) return `version: ${pkg.version}`;
     return line;
   })
   .join('\n');
 
-fs.writeFileSync('./pubspec.yaml', pubspecUpdated, { encoding: 'utf-8' });
+fs.writeFileSync('./pubspec.yaml', pubspecUpdated, { encoding: 'utf-8' });

scripts/coder/coder.js

@@ -0,0 +1,7 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+/* eslint-disable no-console */
+console.log('[Coder] running...');
+
+const stylesheetFile = require('./files/stylesheet');
+
+stylesheetFile.generators.StyleSheet_attributes();

scripts/coder/core/core.js

@@ -0,0 +1,56 @@
+/* eslint-disable prefer-regex-literals */
+/* eslint-disable @typescript-eslint/no-var-requires */
+const pathModule = require('path');
+const fs = require('fs');
+
+const demo = `
+// %%[CODER_START]:StyleSheet_attributes%%
+final double? width;
+final double? width;
+final double? width;
+final double? width;
+final double? width;
+final double? width;
+final double? width;
+final double? width;
+final double? width;
+OLAAA
+  // %%[CODER_END]:StyleSheet_attributes%%
+  final double? width;
+  final double? height;
+`;
+
+module.exports = {
+  readFile(filePath, as = 'text') {
+    const output = fs.readFileSync(
+      pathModule.resolve(__dirname, '..', '..', '..', filePath),
+      'utf8'
+    );
+
+    if (as === 'json') return JSON.parse(output);
+
+    return output;
+  },
+  applyContract({ name, contract }, path, callback) {
+    const file = this.readFile(path);
+    let fileOutput = file;
+    const REGEX_CODER_START = new RegExp(
+      `(%%\\[CODER_START\\]:${name}%%)`,
+      'gi'
+    );
+    const REGEX_CODER_CLEAR = new RegExp(
+      `(%%\\[CODER_START\\]:${name}%%)([\\S\\s]*?)%%\\[CODER_END\\]:${name}%%`,
+      'gmi'
+    );
+    fileOutput = fileOutput.replace(
+      REGEX_CODER_CLEAR,
+      `$1 \n// %%[CODER_END]:StyleSheet_attributes%%`
+    );
+
+    Object.entries(contract).forEach(([key, value], index) => {
+      const replacement = callback([key, value], index);
+      fileOutput = fileOutput.replace(REGEX_CODER_START, `$1\n${replacement}`);
+      fs.writeFileSync(path, fileOutput, 'utf8');
+    });
+  },
+};

scripts/coder/files/stylesheet.js

@@ -0,0 +1,31 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+const core = require('../core/core');
+
+const path = './lib/core/stylesheet';
+
+const generators = {
+  StyleSheet_attributes() {
+    const contract = {
+      name: 'StyleSheet_attributes',
+      contract: core.readFile(`${path}/stylesheet.json`, 'json'),
+    };
+    core.applyContract(contract, `${path}/stylesheet.dart`, ([name, value]) => {
+      return `final Map<Breakpoints,${value.type}> ${name};`;
+    });
+
+    core.applyContract(contract, `${path}/stylesheet.ts`, ([name, value]) => {
+      const types = {
+        double: 'number | string',
+      };
+      const type = (
+        types[value.type.replace('?', '')] || value.type.replace('?', '')
+      ).toLowerCase();
+      return `${name}?: ResponsiveProperty<${type}> | string;`;
+    });
+  },
+};
+
+module.exports = {
+  path,
+  generators,
+};