feat: generate interactivity classes types from theme config

muhammadsammy · Jun 25, 2020 · 7cb6062 · 7cb6062
1 parent 599a2e3
commit 7cb6062
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 21 deletions.
diff --git a/src/generation/ClassesGenerator.ts b/src/generation/ClassesGenerator.ts
@@ -13,6 +13,7 @@ import { Grid as defaultGrid } from '../classes/Grid';
 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 isEmpty from 'lodash.isempty';
 
 export class ClassesGenerator implements IClassesGenerator {
@@ -140,6 +141,17 @@ export class ClassesGenerator implements IClassesGenerator {
     return new ClassesGroupTemplateGenerator(Transforms, 'Transforms', this.configScanner.prefix).generate();
   };
 
+  public interactivity = (): string => {
+    const Interactivity = {
+      ...defaultInteractivity,
+      cursor: Object.keys(this.configScanner.themeConfig.cursor).map(x => 'cursor-' + x),
+    };
+
+    this.allGeneratedClasses.Interactivity = Interactivity;
+
+    return new ClassesGroupTemplateGenerator(Interactivity, 'Interactivity', this.configScanner.prefix).generate();
+  };
+
   public flexBox = (): string => {
     const FlexBox = {
       ...defaultFlexBox,

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

diff --git a/src/generation/createFile.ts b/src/generation/createFile.ts
@@ -72,6 +72,7 @@ export function createFileWithGeneratedTypes(options: Options): void {
       .replace(/___TABLES___/g, classesGenerator.tables)
       .replace(/___TRANSITIONS___/g, classesGenerator.transitions)
       .replace(/___TRANSFORMS___/g, classesGenerator.transforms)
+      .replace(/___INTERACTIVITY___/g, classesGenerator.interactivity)
 
       .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
@@ -137,26 +137,7 @@ ___TRANSITIONS___
 
 ___TRANSFORMS___
 
-export type TAppearance = '_PREFIX_appearance-none';
-
-export type TCursor =
-  | '_PREFIX_cursor-auto'
-  | '_PREFIX_cursor-default'
-  | '_PREFIX_cursor-pointer'
-  | '_PREFIX_cursor-wait'
-  | '_PREFIX_cursor-text'
-  | '_PREFIX_cursor-move'
-  | '_PREFIX_cursor-not-allowed';
-
-export type TOutline = '_PREFIX_outline-none';
-
-export type TPointerEvents = '_PREFIX_pointer-events-none' | '_PREFIX_pointer-events-auto';
-
-export type TResize = '_PREFIX_resize-none' | '_PREFIX_resize' | '_PREFIX_resize-y' | '_PREFIX_resize-x';
-
-export type TUserSelect = '_PREFIX_select-none' | '_PREFIX_select-text' | '_PREFIX_select-all' | '_PREFIX_select-auto';
-
-export type TInteractivity = TAppearance | TCursor | TOutline | TPointerEvents | TResize | TUserSelect;
+___INTERACTIVITY___
 
 export type TFill = '_PREFIX_fill-current';