feat: generate effects types from theme

muhammadsammy · Jun 22, 2020 · 3ceb290 · 3ceb290
1 parent 9f7df54
commit 3ceb290
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 20 deletions.
diff --git a/src/generation/ClassesGenerator.ts b/src/generation/ClassesGenerator.ts
@@ -6,6 +6,7 @@ import { IClassesGenerator } from './IGenerator';
 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 isEmpty from 'lodash.isempty';
 
 export class ClassesGenerator implements IClassesGenerator {
@@ -66,6 +67,22 @@ export class ClassesGenerator implements IClassesGenerator {
     return new ClassesGroupTemplateGenerator(Borders, 'Borders', this.configScanner.prefix).generate();
   };
 
+  public effects = (): string => {
+    const Effects = {
+      ...defaultEffects,
+      boxShadow: Object.keys(this.configScanner.themeConfig.boxShadow).map(shadow => {
+        return `shadow${shadow === 'default' ? '' : '-' + shadow}`;
+      }),
+      opacity: this.getGeneratedClassesWithOpacities().opacities,
+    };
+
+    this.allGeneratedClasses.Effects = Effects;
+
+    console.log(Effects);
+
+    return new ClassesGroupTemplateGenerator(Effects, 'Effects', this.configScanner.prefix).generate();
+  };
+
   public getGeneratedClassesWithColors = (
     classPayload: 'bg' | 'placeholder' | 'border' | 'text' | 'divide',
   ): string[] => {

diff --git a/src/generation/IGenerator.ts b/src/generation/IGenerator.ts
@@ -6,7 +6,7 @@ export interface IClassesGenerator {
   // accessibility: () => void;
   backgrounds: () => string;
   borders: () => string;
-  // effects: () => void;
+  effects: () => string;
   // flexBox: () => void;
   // grid: () => void;
   // interactivity: () => void;

diff --git a/src/generation/_definitions.d.ts b/src/generation/_definitions.d.ts
@@ -59,7 +59,7 @@ interface IThemeProps {
   borderWidth: {
     [key: string]: string;
   };
-  boxShadow?: {
+  boxShadow: {
     [key: string]: string;
   };
   backgroundColor?: any;

diff --git a/src/generation/createFile.ts b/src/generation/createFile.ts
@@ -62,8 +62,9 @@ export function createFileWithGeneratedTypes(options: Options): void {
       .replace(/_PREFIX_/g, prefix)
       .replace(/_SEPARATOR_/g, separator)
       .replace(/CUSTOM_FORMS_PLUGIN_TYPE/g, customFormsPluginClassesType)
-      .replace(/___BACKGROUNDS___/g, classesGenerator.backgrounds())
-      .replace(/___BORDERS___/g, classesGenerator.borders())
+      .replace(/___BACKGROUNDS___/g, classesGenerator.backgrounds)
+      .replace(/___BORDERS___/g, classesGenerator.borders)
+      .replace(/___EFFECTS___/g, classesGenerator.effects)
       .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))
@@ -74,7 +75,7 @@ export function createFileWithGeneratedTypes(options: Options): void {
       .replace(/TEXT_COLORS/g, generateTypes(classesGenerator.getGeneratedClassesWithColors('text'), prefix))
       .replace(/TEXT_OPACITIES/g, generateTypes(classesGenerator.getGeneratedClassesWithOpacities().textOpacities, prefix))
       .replace(/PLACERHOLDER_OPACITIES/g, generateTypes(classesGenerator.getGeneratedClassesWithOpacities().placeholderOpacities, prefix))
-      .replace(/OPACITIES/g, generateTypes(classesGenerator.getGeneratedClassesWithOpacities().opacities, prefix))
+      // .replace(/OPACITIES/g, generateTypes(classesGenerator.getGeneratedClassesWithOpacities().opacities, prefix))
       .replace(/BREAKPOINT_EXPORT_STATEMENTS/g, breakpointsExportStatements.join('\n\n'))
       .replace(/PSEUDO_CLASSES_VARIANTS/g, generateTypes(classesGenerator.getGeneratedPseudoClasses()))
       .replace(/IMPORTED_T_CUSTOM_CLASSES/g, importedTCustomClasses)

diff --git a/src/generation/utils/baseTemplateString.ts b/src/generation/utils/baseTemplateString.ts
@@ -204,6 +204,8 @@ ___BACKGROUNDS___
 
 ___BORDERS___
 
+
+
 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';
@@ -450,21 +452,7 @@ export type TTableLayout = '_PREFIX_table-auto' | '_PREFIX_table-fixed';
 
 export type TTables = TBorderCollapse | TTableLayout;
 
-export type TBoxShadow =
-  | '_PREFIX_shadow'
-  | '_PREFIX_shadow-xs'
-  | '_PREFIX_shadow-sm'
-  | '_PREFIX_shadow-md'
-  | '_PREFIX_shadow-lg'
-  | '_PREFIX_shadow-xl'
-  | '_PREFIX_shadow-2xl'
-  | '_PREFIX_shadow-inner'
-  | '_PREFIX_shadow-outline'
-  | '_PREFIX_shadow-none';
-
-export type TOpacity =OPACITIES;
-
-export type TEffects = TBoxShadow | TOpacity;
+___EFFECTS___
 
 export type TTransitionProperty =
   | '_PREFIX_transition-none'