feat: generate layout types from theme config

muhammadsammy · Jun 27, 2020 · d127695 · d127695
1 parent 4c4b550
commit d127695
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 88 deletions.
diff --git a/src/generation/ClassesGenerator.ts b/src/generation/ClassesGenerator.ts
@@ -14,9 +14,10 @@ import { Typography as defaultTypography } from '../classes/Typography';
 import { Transitions as defaultTransitions } from '../classes/Transitions';
 import { Transforms as defaultTransforms } from '../classes/Transforms';
 import { Interactivity as defaultInteractivity } from '../classes/Interactivity';
+import { Accessibility } from '../classes/Accessibility';
+import { Layout as defaultLayout } from '../classes/Layout';
 import { SVG as defaultSVG } from '../classes/SVG';
 import isEmpty from 'lodash.isempty';
-import { Accessibility } from '../classes/Accessibility';
 
 export class ClassesGenerator implements IClassesGenerator {
   private readonly configScanner: ConfigScanner;
@@ -28,6 +29,25 @@ export class ClassesGenerator implements IClassesGenerator {
 
   // TODO: add theme.extend
 
+  public layout = (): string => {
+    const Layout = {
+      ...defaultLayout,
+      objectPosition: Object.keys(this.configScanner.themeConfig.objectPosition).map(x => 'object-' + x),
+      topRightBottomLeft: Object.keys(this.configScanner.themeConfig.inset).flatMap(insetValue => {
+        return ['inset', 'inset-x', 'inset-y', 'top', 'right', 'bottom', 'left'].map(side =>
+          insetValue.startsWith('-') ? `-${side}-${insetValue.substring(1)}` : `${side}-${insetValue}`,
+        );
+      }),
+      zIndex: Object.keys(this.configScanner.themeConfig.zIndex).flatMap(zIndexValue =>
+        zIndexValue.startsWith('-') ? `-z-${zIndexValue.substring(1)}` : `z-${zIndexValue}`,
+      ),
+    };
+
+    this.allGeneratedClasses.Layout = Layout;
+
+    return new ClassesGroupTemplateGenerator(Layout, 'Layout', this.configScanner.prefix).generate();
+  };
+
   public backgrounds = (): string => {
     const Backgrounds = {
       ...defaultBackgrounds,

diff --git a/src/generation/IGenerator.ts b/src/generation/IGenerator.ts
@@ -13,7 +13,7 @@ export interface IClassesGenerator {
   grid: () => string;
   spacing: () => string;
   interactivity: () => string;
-  // layout: () => string;
+  layout: () => string;
   // sizing: () => string;
   SVG: () => string;
   transforms: () => string;

diff --git a/src/generation/createFile.ts b/src/generation/createFile.ts
@@ -75,6 +75,7 @@ export function createFileWithGeneratedTypes(options: Options): void {
       .replace(/___INTERACTIVITY___/g, classesGenerator.interactivity)
       .replace(/___SVG___/g, classesGenerator.SVG)
       .replace(/___ACCESSIBILITY___/g, classesGenerator.accessibility)
+      .replace(/___LAYOUT___/g, classesGenerator.layout)
 
       .replace(/MAX_WIDTH_BY_BREAKPOINTS/g, generateTypes(classesGenerator.getGeneratedMaxWidthByBreakpointsClasses()))
       .replace(/WIDTH_SPACINGS/g, generateTypes(classesGenerator.getGeneratedClassesWithSpacing().widths, prefix))

diff --git a/src/generation/utils/baseTemplateString.ts b/src/generation/utils/baseTemplateString.ts
@@ -4,92 +4,7 @@ import classnamesLib from 'classnames';
 
 T_CUSTOM_CLASSES_IMPORT_STATEMENT
 
-export type TBoxSizing = '_PREFIX_box-border' | '_PREFIX_box-content';
-
-export type TDisplay =
-  | '_PREFIX_block'
-  | '_PREFIX_inline-block'
-  | '_PREFIX_inline'
-  | '_PREFIX_flex'
-  | '_PREFIX_inline-flex'
-  | '_PREFIX_grid'
-  | '_PREFIX_inline-grid'
-  | '_PREFIX_table'
-  | '_PREFIX_table-row'
-  | '_PREFIX_table-cell'
-  | '_PREFIX_hidden';
-
-export type TContainer = '_PREFIX_container';
-
-export type TFloat = '_PREFIX_float-right' | '_PREFIX_float-left' | '_PREFIX_float-none' | '_PREFIX_clearfix';
-
-export type TClear = '_PREFIX_clear-left' | '_PREFIX_clear-right' | '_PREFIX_clear-both' | '_PREFIX_clear-none';
-
-export type TObjectFit = '_PREFIX_object-contain' | '_PREFIX_object-cover' | '_PREFIX_object-fill' | '_PREFIX_object-none' | '_PREFIX_object-scale-down';
-
-export type TObjectPosition =
-  | '_PREFIX_object-bottom'
-  | '_PREFIX_object-center'
-  | '_PREFIX_object-left'
-  | '_PREFIX_object-left-bottom'
-  | '_PREFIX_object-left-top'
-  | '_PREFIX_object-right'
-  | '_PREFIX_object-right-bottom'
-  | '_PREFIX_object-right-top'
-  | '_PREFIX_object-top';
-
-export type TOverflow =
-  | '_PREFIX_overflow-auto'
-  | '_PREFIX_overflow-hidden'
-  | '_PREFIX_overflow-visible'
-  | '_PREFIX_overflow-scroll'
-  | '_PREFIX_overflow-x-auto'
-  | '_PREFIX_overflow-y-auto'
-  | '_PREFIX_overflow-x-hidden'
-  | '_PREFIX_overflow-y-hidden'
-  | '_PREFIX_overflow-x-visible'
-  | '_PREFIX_overflow-y-visible'
-  | '_PREFIX_overflow-x-scroll'
-  | '_PREFIX_overflow-y-scroll'
-  | '_PREFIX_scrolling-touch'
-  | '_PREFIX_scrolling-auto';
-
-export type TPosition = '_PREFIX_static' | '_PREFIX_fixed' | '_PREFIX_absolute' | '_PREFIX_relative' | '_PREFIX_sticky';
-
-export type TTopRightBottomLeft =
-  | '_PREFIX_inset-0'
-  | '_PREFIX_inset-y-0'
-  | '_PREFIX_inset-x-0'
-  | '_PREFIX_inset-x-y'
-  | '_PREFIX_top-0'
-  | '_PREFIX_right-0'
-  | '_PREFIX_bottom-0'
-  | '_PREFIX_left-0'
-  | '_PREFIX_inset-auto'
-  | '_PREFIX_inset-y-auto'
-  | '_PREFIX_inset-x-auto'
-  | '_PREFIX_top-auto'
-  | '_PREFIX_bottom-auto'
-  | '_PREFIX_left-auto'
-  | '_PREFIX_right-auto';
-
-export type TVisibility = '_PREFIX_visible' | '_PREFIX_invisible';
-
-export type TZIndex = '_PREFIX_z-0' | '_PREFIX_z-10' | '_PREFIX_z-20' | '_PREFIX_z-30' | '_PREFIX_z-40' | '_PREFIX_z-50' | '_PREFIX_z-auto';
-
-export type TLayout =
-  | TBoxSizing
-  | TDisplay
-  | TContainer
-  | TFloat
-  | TClear
-  | TObjectFit
-  | TObjectPosition
-  | TOverflow
-  | TPosition
-  | TTopRightBottomLeft
-  | TVisibility
-  | TZIndex;
+___LAYOUT___
 
 ___TYPOGRAPHY___