|
| 1 | +# Design System Module Analysis |
| 2 | + |
| 3 | +## Executive Summary |
| 4 | + |
| 5 | +The `core:designsystem` module is **NOT needed** as a separate module. All its contents are passcode-specific and should be moved into the `mifos-authenticator-passcode` module itself. |
| 6 | + |
| 7 | +## Current State Analysis |
| 8 | + |
| 9 | +### What the `core:designsystem` Module Provides |
| 10 | + |
| 11 | +#### 1. Source Files (3 files, ~100 lines total) |
| 12 | + |
| 13 | +**Color.kt** (5 lines) |
| 14 | +- Single color value: `blueTint = Color(0xFF03A9F4)` |
| 15 | + |
| 16 | +**Font.kt** (30 lines) |
| 17 | +- `LatoFonts()` - Font family composable using Lato font resources |
| 18 | + |
| 19 | +**Type.kt** (65 lines) |
| 20 | +- `Typography()` - Generic typography function |
| 21 | +- `passcodeKeyButtonStyle()` - Passcode-specific text style |
| 22 | +- `skipButtonStyle()` - Passcode-specific text style |
| 23 | +- `forgotButtonStyle()` - Passcode-specific text style |
| 24 | +- `changePasscodeLengthStyle()` - Passcode-specific text style |
| 25 | +- `useTouchIdButtonStyle()` - Passcode-specific text style |
| 26 | + |
| 27 | +#### 2. Resources |
| 28 | + |
| 29 | +**Fonts** (~220 KB total) |
| 30 | +- Lato-Black.ttf (68 KB) |
| 31 | +- Lato-Bold.ttf (72 KB) |
| 32 | +- Lato-Regular.ttf (74 KB) |
| 33 | + |
| 34 | +### Module Dependencies |
| 35 | + |
| 36 | +``` |
| 37 | +core:designsystem |
| 38 | + └── Used by: mifos-authenticator-passcode ONLY |
| 39 | + └── NOT used by: mifos-authenticator-biometrics |
| 40 | + └── NOT used by: cmp-sample-shared (duplicates blueTint instead) |
| 41 | +``` |
| 42 | + |
| 43 | +### Usage Statistics |
| 44 | + |
| 45 | +- **14 import statements** across the passcode module |
| 46 | +- **0 imports** in the biometrics module |
| 47 | +- **Files using designsystem**: 7 files in passcode module |
| 48 | + - PasscodeScreen.kt |
| 49 | + - PasscodeStepIndicator.kt |
| 50 | + - PasscodeLengthSwitch.kt |
| 51 | + - PasscodeButton.kt |
| 52 | + - SystemAuthConfirmDialog.kt |
| 53 | + - PasscodeKeys.kt |
| 54 | + - PasscodeToolbar.kt |
| 55 | + |
| 56 | +## Problems with Current Architecture |
| 57 | + |
| 58 | +### 1. Misleading Purpose |
| 59 | +The README states the designsystem module "provides the foundation for theming," but in reality: |
| 60 | +- All text styles are **passcode-specific** (not generic theme components) |
| 61 | +- Only contains **one color** (not a comprehensive color palette) |
| 62 | +- Not being used by other modules that would benefit from a design system |
| 63 | + |
| 64 | +### 2. Poor Separation of Concerns |
| 65 | +- The module claims to be a "design system" but contains **passcode-specific** button styles |
| 66 | +- Generic design system components would be things like: Button styles, Card styles, Input field styles, Color palettes, etc. |
| 67 | +- Current content: Skip button style, Forgot button style, Passcode key style - all specific to passcode UI |
| 68 | + |
| 69 | +### 3. Module Duplication |
| 70 | +The sample app (`cmp-sample-shared`) **duplicates** the `blueTint` color instead of using the designsystem: |
| 71 | +```kotlin |
| 72 | +// In cmp-sample-shared/src/commonMain/kotlin/cmp/sample/shared/theme/Color.kt |
| 73 | +val blueTint = Color(0xFF03A9F4) // Duplicated! |
| 74 | +``` |
| 75 | + |
| 76 | +### 4. Unnecessary Complexity |
| 77 | +- Adds extra module to build graph |
| 78 | +- Creates unnecessary dependency chain |
| 79 | +- Increases compilation time |
| 80 | +- Makes the codebase harder to navigate |
| 81 | + |
| 82 | +### 5. Not Following Design System Best Practices |
| 83 | +A proper design system module should: |
| 84 | +- Be used by **multiple modules** |
| 85 | +- Contain **generic, reusable** components |
| 86 | +- Provide **comprehensive theming** (colors, typography, spacing, shapes) |
| 87 | +- Be **platform-agnostic** and **module-agnostic** |
| 88 | + |
| 89 | +The current implementation: |
| 90 | +- Used by **one module only** |
| 91 | +- Contains **passcode-specific** styles |
| 92 | +- Has **minimal theming** (1 color, 1 font family) |
| 93 | +- Is **tightly coupled** to passcode functionality |
| 94 | + |
| 95 | +## What's Already in mifos-authenticator-passcode |
| 96 | + |
| 97 | +The passcode module already has: |
| 98 | +- Its own compose resources directory with: |
| 99 | + - `drawable/` - Contains mifos_logo.jpg and ic_delete.xml |
| 100 | + - `values/` - Contains strings.xml with localized strings |
| 101 | +- Complete UI components for passcode functionality |
| 102 | +- All passcode-specific logic and state management |
| 103 | +- Platform-specific implementations where needed |
| 104 | + |
| 105 | +## Recommended Solution |
| 106 | + |
| 107 | +### Move Everything to mifos-authenticator-passcode |
| 108 | + |
| 109 | +**Step 1: Move Source Files** |
| 110 | +``` |
| 111 | +From: core/designsystem/src/commonMain/kotlin/org/mifos/authenticator/core/designsystem/theme/ |
| 112 | +To: mifos-authenticator-passcode/src/commonMain/kotlin/org/mifos/authenticator/passcode/theme/ |
| 113 | +``` |
| 114 | + |
| 115 | +Move these files: |
| 116 | +- Color.kt |
| 117 | +- Font.kt |
| 118 | +- Type.kt |
| 119 | + |
| 120 | +**Step 2: Move Font Resources** |
| 121 | +``` |
| 122 | +From: core/designsystem/src/commonMain/composeResources/font/ |
| 123 | +To: mifos-authenticator-passcode/src/commonMain/composeResources/font/ |
| 124 | +``` |
| 125 | + |
| 126 | +Move these files: |
| 127 | +- Lato-Black.ttf |
| 128 | +- Lato-Bold.ttf |
| 129 | +- Lato-Regular.ttf |
| 130 | + |
| 131 | +**Step 3: Update Package Names** |
| 132 | +Change all imports from: |
| 133 | +```kotlin |
| 134 | +import org.mifos.authenticator.core.designsystem.theme.* |
| 135 | +``` |
| 136 | +To: |
| 137 | +```kotlin |
| 138 | +import org.mifos.authenticator.passcode.theme.* |
| 139 | +``` |
| 140 | + |
| 141 | +**Step 4: Update build.gradle.kts** |
| 142 | +Remove the dependency from `mifos-authenticator-passcode/build.gradle.kts`: |
| 143 | +```kotlin |
| 144 | +// REMOVE THIS LINE: |
| 145 | +implementation(projects.core.designsystem) |
| 146 | +``` |
| 147 | + |
| 148 | +**Step 5: Remove the Module** |
| 149 | +- Remove `include(":core:designsystem")` from `settings.gradle.kts` |
| 150 | +- Delete the `core/designsystem` directory |
| 151 | + |
| 152 | +**Step 6: Update Resource References** |
| 153 | +Update the generated resource references in Font.kt: |
| 154 | +```kotlin |
| 155 | +// Change from: |
| 156 | +import mifos_authenticator.core.designsystem.generated.resources.* |
| 157 | + |
| 158 | +// To: |
| 159 | +import mifos_authenticator.mifos_authenticator_passcode.generated.resources.* |
| 160 | +``` |
| 161 | + |
| 162 | +## Benefits of This Approach |
| 163 | + |
| 164 | +### 1. Single Responsibility |
| 165 | +- The passcode module becomes fully self-contained |
| 166 | +- All passcode-related UI, logic, and theming in one place |
| 167 | +- Easier to understand and maintain |
| 168 | + |
| 169 | +### 2. Better Module Structure |
| 170 | +``` |
| 171 | +mifos-authenticator-passcode/ |
| 172 | + ├── src/commonMain/ |
| 173 | + │ ├── kotlin/org/mifos/authenticator/passcode/ |
| 174 | + │ │ ├── components/ (UI components) |
| 175 | + │ │ ├── screen/ (Screens) |
| 176 | + │ │ ├── theme/ (Theme & styles) ← MOVED HERE |
| 177 | + │ │ ├── utility/ (Utilities) |
| 178 | + │ │ └── PasscodeSaver.kt |
| 179 | + │ └── composeResources/ |
| 180 | + │ ├── drawable/ |
| 181 | + │ ├── font/ ← MOVED HERE |
| 182 | + │ └── values/ |
| 183 | +``` |
| 184 | + |
| 185 | +### 3. Simplified Dependencies |
| 186 | +- One less module to build |
| 187 | +- Faster build times |
| 188 | +- Simpler dependency graph |
| 189 | +- Easier for new contributors to understand |
| 190 | + |
| 191 | +### 4. No Code Duplication |
| 192 | +- Sample app can still use passcode module's theme if needed |
| 193 | +- Or define its own theme (which it's already doing) |
| 194 | + |
| 195 | +### 5. Future-Proof |
| 196 | +If a real design system is needed later: |
| 197 | +- Create it when there are **multiple modules** that need shared theming |
| 198 | +- Make it **generic** with reusable components |
| 199 | +- Use it across **all modules** (passcode, biometrics, etc.) |
| 200 | + |
| 201 | +## Alternative: Keep It But Rename |
| 202 | + |
| 203 | +If you want to keep a separate module for some reason: |
| 204 | + |
| 205 | +**Option A: Rename to `passcode-theme`** |
| 206 | +- More accurate name reflecting its actual purpose |
| 207 | +- Still consolidates passcode-specific theming |
| 208 | +- But still adds unnecessary module complexity |
| 209 | + |
| 210 | +**Option B: Expand to Real Design System** |
| 211 | +- Add generic components (Button, Card, TextField themes) |
| 212 | +- Add comprehensive color palette |
| 213 | +- Add spacing, shapes, elevation systems |
| 214 | +- Have biometrics module use it too |
| 215 | +- But this requires significant work and may not be needed |
| 216 | + |
| 217 | +## Conclusion |
| 218 | + |
| 219 | +**Recommendation: Remove the `core:designsystem` module entirely and move its contents to `mifos-authenticator-passcode`.** |
| 220 | + |
| 221 | +### Why? |
| 222 | +1. It's only used by one module |
| 223 | +2. All content is passcode-specific |
| 224 | +3. Reduces complexity |
| 225 | +4. Makes the codebase more maintainable |
| 226 | +5. Follows the principle of "You Aren't Gonna Need It" (YAGNI) |
| 227 | + |
| 228 | +### When to Create a Design System Module? |
| 229 | +Create it when: |
| 230 | +- **Multiple modules** need shared theming |
| 231 | +- You have **generic, reusable** components |
| 232 | +- You want **consistent branding** across different features |
| 233 | +- The library becomes **large enough** to warrant the abstraction |
| 234 | + |
| 235 | +Currently, none of these conditions are met. |
| 236 | + |
| 237 | +## Implementation Checklist |
| 238 | + |
| 239 | +- [ ] Create `mifos-authenticator-passcode/src/commonMain/kotlin/org/mifos/authenticator/passcode/theme/` directory |
| 240 | +- [ ] Move Color.kt, Font.kt, Type.kt to new location |
| 241 | +- [ ] Create `mifos-authenticator-passcode/src/commonMain/composeResources/font/` directory |
| 242 | +- [ ] Move Lato-*.ttf files to new location |
| 243 | +- [ ] Update package declarations in moved files |
| 244 | +- [ ] Update resource imports in Font.kt |
| 245 | +- [ ] Update all import statements in passcode module (14 files) |
| 246 | +- [ ] Remove `implementation(projects.core.designsystem)` from passcode build.gradle.kts |
| 247 | +- [ ] Remove `include(":core:designsystem")` from settings.gradle.kts |
| 248 | +- [ ] Test build to ensure everything compiles |
| 249 | +- [ ] Run tests to ensure functionality is preserved |
| 250 | +- [ ] Delete `core/designsystem` directory |
| 251 | +- [ ] Update README.md to remove designsystem reference |
| 252 | +- [ ] Commit changes |
| 253 | + |
| 254 | +## Impact Assessment |
| 255 | + |
| 256 | +### Files to Modify |
| 257 | +- 7 files in passcode module (update imports) |
| 258 | +- 1 build.gradle.kts (remove dependency) |
| 259 | +- 1 settings.gradle.kts (remove module) |
| 260 | +- 1 README.md (update documentation) |
| 261 | + |
| 262 | +### Risk Level |
| 263 | +**Low** - This is a straightforward refactoring with no behavioral changes. |
| 264 | + |
| 265 | +### Testing Required |
| 266 | +- Build verification (all platforms) |
| 267 | +- UI testing (passcode screens still render correctly) |
| 268 | +- Sample app verification (still works) |
| 269 | + |
| 270 | +### Breaking Changes |
| 271 | +- None for library users (internal restructuring only) |
| 272 | +- If designsystem was being used externally, this would be breaking |
| 273 | +- Current evidence suggests it's not used externally |
0 commit comments