fix: generation input styles for different names of states

atls · Sep 23, 2024 · e0753d5 · e0753d5
1 parent 0d9e213
commit e0753d5
Showing 1 changed file with 34 additions and 37 deletions.
diff --git a/generators/input/src/style-generators/appearance.style-generator.ts b/generators/input/src/style-generators/appearance.style-generator.ts
@@ -1,4 +1,4 @@
-import type { InputColorSchemes } from '../input-generator.interfaces.js'
+import type { InputColorSchemes }  from '../input-generator.interfaces.js'
 
 import { writeFileSync }           from 'fs'
 
@@ -15,40 +15,33 @@ export class InputAppearanceStyleGenerator {
 
   #variants: Array<string> = []
 
+  #states: Array<string> = []
+
   constructor(private readonly colorSchemes: InputColorSchemes) {
     const allVariants = Object.keys(colorSchemes).reduce<Array<string>>(
       (array, key) => (key.startsWith('input.') ? [...array, key.split('.')[1]] : array),
       []
     )
 
     this.#variants = [...new Set(allVariants)]
+
+    const allStates = Object.keys(this.colorSchemes).reduce<Array<string>>(
+      (array, key) =>
+        key.startsWith(`input.${this.#variants[0]}`) ? [...array, key.split('.')[2]] : array,
+      []
+    )
+
+    this.#states = [...new Set(allStates)]
   }
 
   generateAppearanceStyles(): Record<'appearanceStyles' | 'imports' | 'statefulStyles', string> {
     const statefulStyles = pretty(
       this.#variants.map((variant) => this.generateVariantStatefulStyles(variant)).join('\n\n')
     )
 
-    const appearanceStyles = pretty(`
-      export const appearanceVariant = {
-        ${this.generateVariantAppearanceStyles(this.#variants, 'Default', false)}
-      }
-
-      export const appearanceHover = {
-        ${this.generateVariantAppearanceStyles(this.#variants, 'Hover')}
-      }
-
-      export const appearanceFocus = {
-        ${this.generateVariantAppearanceStyles(this.#variants, 'Focus')}
-      }
-
-      export const appearanceActive = {
-        ${this.generateVariantAppearanceStyles(this.#variants, 'Active')}
-      }
-
-      export const appearanceDisabled = {
-        ${this.generateVariantAppearanceStyles(this.#variants, 'Disabled')}
-      }`)
+    const appearanceStyles = pretty(
+      this.#states.map((state) => this.generateVariantAppearanceStyles(state)).join('\n\n')
+    )
 
     const imports = pretty(
       this.requiredImports
@@ -78,14 +71,7 @@ export class InputAppearanceStyleGenerator {
   private generateVariantStatefulStyles(variant: string): string {
     const lines: Array<string> = []
 
-    const allStates: Array<string> = Object.keys(this.colorSchemes).reduce<Array<string>>(
-      (array, key) => (key.startsWith(`input.${variant}`) ? [...array, key.split('.')[2]] : array),
-      []
-    )
-
-    const uniqueStates = [...new Set(allStates)]
-
-    for (const state of uniqueStates) {
+    for (const state of this.#states) {
       lines.push(`const ${getAppearanceStylesName(variant, state)} = createAppearanceStyles({
         fontColor: vars.colors['input.${variant}.${state}.font'],
         backgroundColor: vars.colors['input.${variant}.${state}.background'],
@@ -96,14 +82,25 @@ export class InputAppearanceStyleGenerator {
     return lines.join('\n\n')
   }
 
-  private generateVariantAppearanceStyles(
-    variants: Array<string>,
-    state: string,
-    addSuffix: boolean = true
-  ): string {
-    const suffix = addSuffix ? state : ''
-    return variants
-      .map((variant) => `${variant}${suffix}: ${getAppearanceStylesName(variant, state)},`)
+  private generateVariantAppearanceStyles(state: string): string {
+    if (state === 'default') {
+      const variantStyles = this.#variants
+        .map((variant) => `${variant}: ${getAppearanceStylesName(variant, 'Default')},`)
+        .join('\n')
+
+      return `export const appearanceVariant = {
+        ${variantStyles}
+      }`
+    }
+
+    const stateName = capitalizeFirstLetter(state)
+
+    const variantStyles = this.#variants
+      .map((variant) => `${variant}${stateName}: ${getAppearanceStylesName(variant, stateName)},`)
       .join('\n')
+
+    return `export const appearance${stateName} = {
+      ${variantStyles}
+    }`
   }
 }