refactor: generate flexbox code with template generator

src/generation/ClassesGenerator.ts

@@ -7,6 +7,7 @@ import { Backgrounds as defaultBackgrounds } from '../classes/Backgrounds';
 import { ClassesGroupTemplateGenerator } from './ClassesGroupTemplateGenerator';
 import { Borders as defaultBorders } from '../classes/Borders';
 import { Effects as defaultEffects } from '../classes/Effects';
+import { FlexBox as defaultFlexBox } from '../classes/Flexbox';
 import isEmpty from 'lodash.isempty';
 
 export class ClassesGenerator implements IClassesGenerator {
@@ -78,11 +79,17 @@ export class ClassesGenerator implements IClassesGenerator {
 
     this.allGeneratedClasses.Effects = Effects;
 
-    console.log(Effects);
-
     return new ClassesGroupTemplateGenerator(Effects, 'Effects', this.configScanner.prefix).generate();
   };
 
+  public flexBox = (): string => {
+    const FlexBox = defaultFlexBox;
+
+    this.allGeneratedClasses.FlexBox = FlexBox;
+
+    return new ClassesGroupTemplateGenerator(FlexBox, 'FlexBox', this.configScanner.prefix).generate();
+  };
+
   public getGeneratedClassesWithColors = (
     classPayload: 'bg' | 'placeholder' | 'border' | 'text' | 'divide',
   ): string[] => {

src/generation/IGenerator.ts

@@ -3,20 +3,20 @@ export interface IGenerator {
 }
 
 export interface IClassesGenerator {
-  // accessibility: () => void;
+  // accessibility: () => string;
   backgrounds: () => string;
   borders: () => string;
   effects: () => string;
-  // flexBox: () => void;
-  // grid: () => void;
-  // interactivity: () => void;
-  // layout: () => void;
-  // sizing: () => void;
-  // spacing: () => void;
-  // SVG: () => void;
-  // tables: () => void;
-  // transforms: () => void;
-  // transitions: () => void;
-  // typography: () => void;
+  flexBox: () => string;
+  // grid: () => string;
+  // interactivity: () => string;
+  // layout: () => string;
+  // sizing: () => string;
+  // spacing: () => string;
+  // SVG: () => string;
+  // tables: () => string;
+  // transforms: () => string;
+  // transitions: () => string;
+  // typography: () => string;
   // generate: () => string;
 }

src/generation/createFile.ts

@@ -65,6 +65,8 @@ export function createFileWithGeneratedTypes(options: Options): void {
       .replace(/___BACKGROUNDS___/g, classesGenerator.backgrounds)
       .replace(/___BORDERS___/g, classesGenerator.borders)
       .replace(/___EFFECTS___/g, classesGenerator.effects)
+      .replace(/___FLEXBOX___/g, classesGenerator.flexBox)
+
       .replace(/MAX_WIDTH_BY_BREAKPOINTS/g, generateTypes(classesGenerator.getGeneratedMaxWidthClasses()))
       .replace(/PADDINGS/g, generateTypes(classesGenerator.getGeneratedClassesWithSpacing().paddings, prefix))
       .replace(/MARGINS/g, generateTypes(classesGenerator.getGeneratedClassesWithSpacing().margins, prefix))

src/generation/utils/baseTemplateString.ts

@@ -204,55 +204,9 @@ ___BACKGROUNDS___
 
 ___BORDERS___
 
+___FLEXBOX___
 
 
-export type TFlexDirection = '_PREFIX_flex-row' | '_PREFIX_flex-row-reverse' | '_PREFIX_flex-col' | '_PREFIX_flex-col-reverse';
-
-export type TFlexWrap = '_PREFIX_flex-no-wrap' | '_PREFIX_flex-wrap' | '_PREFIX_flex-wrap-reverse';
-
-export type TAlignItems = '_PREFIX_items-stretch' | '_PREFIX_items-start' | '_PREFIX_items-center' | '_PREFIX_items-end' | '_PREFIX_items-baseline';
-
-export type TAlignContent = '_PREFIX_content-start' | '_PREFIX_content-center' | '_PREFIX_content-end' | '_PREFIX_content-between' | '_PREFIX_content-around';
-
-export type TAlignSelf = '_PREFIX_self-auto' | '_PREFIX_self-start' | '_PREFIX_self-center' | '_PREFIX_self-end' | '_PREFIX_self-stretch';
-
-export type TJustifyContent = '_PREFIX_justify-start' | '_PREFIX_justify-center' | '_PREFIX_justify-end' | '_PREFIX_justify-between' | '_PREFIX_justify-around' | '_PREFIX_justify-evenly';
-
-export type TFlex = '_PREFIX_flex-initial' | '_PREFIX_flex-1' | '_PREFIX_flex-auto' | '_PREFIX_flex-none';
-
-export type TFlexGrow = '_PREFIX_flex-grow' | '_PREFIX_flex-grow-0';
-
-export type TFlexShrink = '_PREFIX_flex-shrink' | '_PREFIX_flex-shrink-0';
-
-export type TOrder =
-  | '_PREFIX_order-first'
-  | '_PREFIX_order-last'
-  | '_PREFIX_order-none'
-  | '_PREFIX_order-1'
-  | '_PREFIX_order-2'
-  | '_PREFIX_order-3'
-  | '_PREFIX_order-4'
-  | '_PREFIX_order-5'
-  | '_PREFIX_order-6'
-  | '_PREFIX_order-7'
-  | '_PREFIX_order-8'
-  | '_PREFIX_order-9'
-  | '_PREFIX_order-10'
-  | '_PREFIX_order-11'
-  | '_PREFIX_order-12';
-
-export type TFlexBox =
-  | TFlexDirection
-  | TFlexWrap
-  | TAlignItems
-  | TAlignContent
-  | TAlignSelf
-  | TJustifyContent
-  | TFlex
-  | TFlexGrow
-  | TFlexShrink
-  | TOrder;
-
 export type TGrid =
   | TGridTemplateColumns
   | TGridColumnStartEnd