Merge pull request #36 from elementsinteractive/feature/android-json-…

…config

feat!: adds json configuration file for android generation

.vscode/settings.json

@@ -17,7 +17,7 @@
     "javascript",
     "typescript"
   ],
-  "editor.formatOnSave": false,
+  "editor.formatOnSave": true,
   "[typescript]": {
     "editor.formatOnSave": true,
     "editor.codeActionsOnSave": {

README.md

@@ -60,11 +60,33 @@ elements-design-tokens <platform>
 elements-design-tokens android
 ```
 
-| Flag                          | Short Flag | Description                       |
-| ----------------------------- | ---------- | --------------------------------- |
-| --input \[input\]             | -i         | JSON file with design tokens      |
-| --package \[package\]         | -p         | Kotlin package name               |
-| --destination \[destination\] | -d         | Where to write the generated code |
+| Flag                | Short Flag | Description                                      |
+| ------------------- | ---------- | ------------------------------------------------ |
+| --input \[input\]   | -i         | JSON file with design tokens                     |
+| --config \[config\] | -c         | JSON file with configuration for the theme files |
+
+#### Config file
+
+Contains configuration for the different theme files. Including where to store the file and which packageName to use
+
+```json
+{
+  "theme": {
+    "typography": {
+      "destination": "",
+      "packageName": ""
+    },
+    "colors: {
+      "destination": "",
+      "packageName": ""
+    },
+    "spacings": {
+      "destination": "",
+      "packageName": ""
+    }
+  }
+}
+```
 
 ### iOS
 
@@ -76,4 +98,4 @@ elements-design-tokens ios
 | ----------------------------- | ---------- | --------------------------------- |
 | --input \[input\]             | -i         | JSON file with design tokens      |
 | --theme \[theme\]             | -t         | Theme name, ex. LightTheme        |
-| --destination \[destination\] | -d         | Where to write the generated code |
+| --destination \[destination\] | -d         | Where to write the generated code |

src/android/__tests__/__snapshots__/android.test.ts.snap

@@ -7,7 +7,7 @@ Array [
 `;
 
 exports[`android can setup with default config 2`] = `
-"package nl.makerstreet.design
+"package nl.makerstreet.design.colors
 
 /**
  * ⚠️ DO NOT MODIFY ⚠️
@@ -67,7 +67,7 @@ val lightGray = Color(0xfff4f4f4)
 `;
 
 exports[`android can setup with default config 3`] = `
-"package nl.makerstreet.design
+"package nl.makerstreet.design.spacings
 
 /**
  * ⚠️ DO NOT MODIFY ⚠️
@@ -89,7 +89,7 @@ object Spacings {
 `;
 
 exports[`android can setup with default config 4`] = `
-"package nl.makerstreet.design
+"package nl.makerstreet.design.typography
 
 /**
  * ⚠️ DO NOT MODIFY ⚠️

src/android/__tests__/android.test.ts

@@ -1,26 +1,30 @@
 import StyleDictionaryPackage from 'style-dictionary'
 import { clearOutput, fileExists, fileToString } from '../../common/helpers'
 import { createConfig } from '../config'
+import { ColorFilename, SpacingFilename, TypeFilename } from '../constants'
+import { readJsonFileAsOptions } from '../helpers'
 import { styleDictionaryRegistrations } from '../styleDictionaryRegistrations'
-
-const androidColorFile = 'src/android/__tests__/__output/Color.kt'
-const androidSpacingFile = 'src/android/__tests__/__output/Spacing.kt'
-const androidTypeFile = 'src/android/__tests__/__output/Type.kt'
+import { AndroidJsonOptions } from '../types'
 
 describe('android', () => {
   var config = {
-    packageName: 'nl.makerstreet.design',
+    configPath: 'src/android/__tests__/config.json',
     input: 'src/__tests__/tokens.json',
-    destination: 'src/android/__tests__/__output',
   }
 
   let StyleDictionaryExtended
 
+  let options: AndroidJsonOptions
+
   beforeAll(() => {
-    styleDictionaryRegistrations(config)
+    const { input, configPath } = config
+
+    options = readJsonFileAsOptions(configPath)
+
+    styleDictionaryRegistrations(options)
 
     StyleDictionaryExtended = StyleDictionaryPackage.extend(
-      createConfig(config),
+      createConfig(input, options),
     )
   })
 
@@ -35,7 +39,11 @@ describe('android', () => {
       StyleDictionaryExtended.transformGroup['tokens-android'],
     ).toMatchSnapshot()
 
-    const files = [androidColorFile, androidSpacingFile, androidTypeFile]
+    const colorFile = `${options.theme.colors.destination}/${ColorFilename}`
+    const spacingFile = `${options.theme.spacings.destination}/${SpacingFilename}`
+    const typeFile = `${options.theme.typography.destination}/${TypeFilename}`
+
+    const files = [colorFile, spacingFile, typeFile]
 
     files.forEach(path => {
       expect(fileExists(path)).toBeTruthy()

src/android/__tests__/config.json

@@ -0,0 +1,16 @@
+{
+  "theme": {
+    "typography": {
+      "destination": "src/android/__tests__/__output/base",
+      "packageName": "nl.makerstreet.design.typography"
+    },
+    "colors": {
+      "destination": "src/android/__tests__/__output/light",
+      "packageName": "nl.makerstreet.design.colors"
+    },
+    "spacings": {
+      "destination": "src/android/__tests__/__output/base",
+      "packageName": "nl.makerstreet.design.spacings"
+    }
+  }
+}

src/android/config.ts

@@ -1,12 +1,12 @@
 import { AndroidConfig } from '../design.types'
 import { TEMPLATES } from './constants'
+import { AndroidJsonOptions } from './types'
 
-export const createConfig = (config: AndroidConfig) => {
-  const { input, destination } = config
+export const createConfig = (input: string, options: AndroidJsonOptions) => {
+  const { theme } = options
 
-  const templateInfo = TEMPLATES(destination)
-
-  const { colorsTemplate, spacingsTemplate, typographyTemplate } = templateInfo
+  const { colorsTemplate, spacingsTemplate, typographyTemplate } =
+    TEMPLATES(theme)
 
   return {
     source: [input],

src/android/constants.ts

@@ -1,23 +1,31 @@
 import { join } from 'path'
+import { AndroidTheme } from './types'
 
-export const TEMPLATES = (destination: string) => ({
+export const ColorFilename = 'Color.kt'
+export const SpacingFilename = 'Spacing.kt'
+export const TypeFilename = 'Type.kt'
+
+export const TEMPLATES = (theme: AndroidTheme) => ({
   typographyTemplate: {
     source: join(__dirname, './templates/typographies.ejs'),
-    destination: `${destination}/Type.kt`,
+    destination: `${theme.typography.destination}/${TypeFilename}`,
     filter: 'isTypography',
     formatter: 'android/compose/typography',
+    packageName: theme.typography.packageName,
   },
   spacingsTemplate: {
     source: join(__dirname, './templates/spacings.ejs'),
-    destination: `${destination}/Spacing.kt`,
+    destination: `${theme.spacings.destination}/${SpacingFilename}`,
     filter: 'isSpacing',
     formatter: 'android/spacings',
+    packageName: theme.spacings.packageName,
   },
   colorsTemplate: {
     source: join(__dirname, './templates/colors.ejs'),
-    destination: `${destination}/Color.kt`,
+    destination: `${theme.colors.destination}/${ColorFilename}`,
     filter: 'color',
     formatter: 'android/compose/colors',
+    packageName: theme.colors.packageName,
   },
   headerTemplate: join(__dirname, './templates/header.ejs'),
 })

src/android/formatters/__tests__/colorFormatter.test.ts

@@ -4,11 +4,15 @@ import createFormatArgs from 'style-dictionary/lib/utils/createFormatArgs'
 import { TEMPLATES } from '../../constants'
 import { colorFormatter } from '../colorFormatter'
 import { FormatterConfig } from '../../types'
-import { PROPERTIES, HEADER } from '../../../common/formatters/__tests__/constants'
+import {
+  PROPERTIES,
+  HEADER,
+} from '../../../common/formatters/__tests__/constants'
+import { DUMMY_ANDROID_THEME } from './constants'
 
 describe('colorFormatter', () => {
   it('can handle dictionary with color tokens', () => {
-    const { colorsTemplate } = TEMPLATES('')
+    const { colorsTemplate } = TEMPLATES(DUMMY_ANDROID_THEME)
 
     const colorConfig: FormatterConfig = {
       template: colorsTemplate.source,

src/android/formatters/__tests__/constants.ts

@@ -0,0 +1,16 @@
+import { AndroidTheme } from '../../types'
+
+export const DUMMY_ANDROID_THEME: AndroidTheme = {
+  typography: {
+    destination: '',
+    packageName: '',
+  },
+  spacings: {
+    destination: '',
+    packageName: '',
+  },
+  colors: {
+    destination: '',
+    packageName: '',
+  },
+}

src/android/formatters/__tests__/spacingFormatter.test.ts

@@ -4,11 +4,15 @@ import createFormatArgs from 'style-dictionary/lib/utils/createFormatArgs'
 import { TEMPLATES } from '../../constants'
 import { FormatterConfig } from '../../types'
 import { spacingFormatter } from '../spacingFormatter'
-import { PROPERTIES, HEADER } from '../../../common/formatters/__tests__/constants'
+import {
+  PROPERTIES,
+  HEADER,
+} from '../../../common/formatters/__tests__/constants'
+import { DUMMY_ANDROID_THEME } from './constants'
 
 describe('spacingFormatter', () => {
   it('can handle dictionary with spacing tokens', () => {
-    const { spacingsTemplate } = TEMPLATES('')
+    const { spacingsTemplate } = TEMPLATES(DUMMY_ANDROID_THEME)
 
     const spacingConfig: FormatterConfig = {
       template: spacingsTemplate.source,

src/android/formatters/__tests__/typographyFormatter.test.ts

@@ -4,11 +4,15 @@ import createFormatArgs from 'style-dictionary/lib/utils/createFormatArgs'
 import { TEMPLATES } from '../../constants'
 import { FormatterConfig } from '../../types'
 import { typographyFormatter } from '../typographyFormatter'
-import { PROPERTIES, HEADER } from '../../../common/formatters/__tests__/constants'
+import {
+  PROPERTIES,
+  HEADER,
+} from '../../../common/formatters/__tests__/constants'
+import { DUMMY_ANDROID_THEME } from './constants'
 
 describe('typographyFormatter', () => {
   it('can handle dictionary with typography tokens', () => {
-    const { typographyTemplate } = TEMPLATES('')
+    const { typographyTemplate } = TEMPLATES(DUMMY_ANDROID_THEME)
 
     const typographyConfig: FormatterConfig = {
       template: typographyTemplate.source,

src/android/helpers.ts

@@ -0,0 +1,5 @@
+import { fileToJSON } from '../common/helpers'
+import { AndroidJsonOptions } from './types'
+
+export const readJsonFileAsOptions = (configPath: string) =>
+  fileToJSON(configPath) as AndroidJsonOptions

src/android/index.ts

@@ -2,14 +2,23 @@ import StyleDictionaryPackage from 'style-dictionary'
 
 import { AndroidConfig } from '../design.types'
 import { createConfig } from './config'
+import { readJsonFileAsOptions } from './helpers'
 import { styleDictionaryRegistrations } from './styleDictionaryRegistrations'
 
-export const setup = (config: AndroidConfig) => {
-  console.log('Setting up Android', config)
+export const setup = (androidConfig: AndroidConfig) => {
+  console.log('Setting up Android', androidConfig)
 
-  styleDictionaryRegistrations(config)
+  const { configPath, input } = androidConfig
 
-  const StyleDictionary = StyleDictionaryPackage.extend(createConfig(config))
+  const options = readJsonFileAsOptions(configPath)
+
+  console.log('Using options', options)
+
+  styleDictionaryRegistrations(options)
+
+  const StyleDictionary = StyleDictionaryPackage.extend(
+    createConfig(input, options),
+  )
 
   console.log('Building for platform Android')
 

src/android/styleDictionaryRegistrations.ts

@@ -1,15 +1,15 @@
 import StyleDictionaryPackage from 'style-dictionary'
-import { AndroidConfig } from '../design.types'
 import { useTemplate } from '../utils'
 import { TEMPLATES } from './constants'
 import { colorFormatter } from './formatters/colorFormatter'
 import { spacingFormatter } from './formatters/spacingFormatter'
 import { typographyFormatter } from './formatters/typographyFormatter'
+import { AndroidJsonOptions } from './types'
 
-export const styleDictionaryRegistrations = (config: AndroidConfig) => {
-  const { packageName, destination } = config
+export const styleDictionaryRegistrations = (options: AndroidJsonOptions) => {
+  const { theme } = options
 
-  const templateInfo = TEMPLATES(destination)
+  const templateInfo = TEMPLATES(theme)
 
   const {
     headerTemplate,
@@ -28,7 +28,7 @@ export const styleDictionaryRegistrations = (config: AndroidConfig) => {
     formatter: typographyFormatter({
       template: typographyTemplate.source,
       header,
-      packageName,
+      packageName: typographyTemplate.packageName,
     }),
   })
 
@@ -37,7 +37,7 @@ export const styleDictionaryRegistrations = (config: AndroidConfig) => {
     formatter: spacingFormatter({
       template: spacingsTemplate.source,
       header,
-      packageName,
+      packageName: spacingsTemplate.packageName,
     }),
   })
 
@@ -46,7 +46,7 @@ export const styleDictionaryRegistrations = (config: AndroidConfig) => {
     formatter: colorFormatter({
       template: colorsTemplate.source,
       header,
-      packageName,
+      packageName: colorsTemplate.packageName,
     }),
   })
 

src/android/types.ts

@@ -3,3 +3,20 @@ export type FormatterConfig = {
   header: string
   packageName: string
 }
+
+export type ThemeFileOptions = {
+  destination: string
+  packageName: string
+}
+
+export type AndroidTheme = {
+  typography: ThemeFileOptions
+
+  colors: ThemeFileOptions
+
+  spacings: ThemeFileOptions
+}
+
+export type AndroidJsonOptions = {
+  theme: AndroidTheme
+}