feat: update script to also regenerate colorTheme for storybook

react/.storybook/colorThemes/index.ts

@@ -1,47 +1,73 @@
-import { theme as AskGovTheme } from './AskGov/theme'
-import { theme as BbBearTheme } from './BbBear/theme'
-import { theme as Care360Theme } from './Care360/theme'
+import { theme as armouryTheme } from './Armoury/theme'
+import { theme as askGovTheme } from './AskGov/theme'
+import { theme as betaDarkTheme } from './BETA dark/theme'
+import { theme as bbBearTheme } from './BbBear/theme'
+import { theme as calSgTheme } from './CalSG/theme'
+import { theme as care360Theme } from './Care360/theme'
+import { theme as careersTheme } from './Careers/theme'
+import { theme as distributeTheme } from './Distribute/theme'
+import { theme as erpxTheme } from './ERPX/theme'
+import { theme as engageTheme } from './Engage/theme'
+import { theme as formTheme } from './Form/theme'
+import { theme as govsgTheme } from './Govsg/theme'
+import { theme as isomerTheme } from './Isomer/theme'
+import { theme as messageTheme } from './Message/theme'
+import { theme as pairTheme } from './Pair/theme'
+import { theme as paySgTheme } from './PaySG/theme'
+import { theme as phonebookTheme } from './Phonebook/theme'
+import { theme as pinPointTheme } from './PinPoint/theme'
+import { theme as postmanTheme } from './Postman/theme'
+import { theme as redeemTheme } from './Redeem/theme'
+import { theme as scamShieldTheme } from './ScamShield/theme'
+import { theme as tealsTheme } from './TEALS/theme'
+import { theme as vaultTheme } from './Vault/theme'
+import { theme as activesgTheme } from './activesg/theme'
+import { theme as byosTheme } from './byos/theme'
 import { theme as defaultTheme } from './default/theme'
+import { theme as folkTheme } from './folk/theme'
 import { theme as forestTheme } from './forest/theme'
-import { theme as FormTheme } from './Form/theme'
+import { theme as fynderTheme } from './fynder/theme'
 import { theme as hichewTheme } from './hichew/theme'
-import { theme as IsomerTheme } from './Isomer/theme'
 import { theme as jujubeTheme } from './jujube/theme'
-import { theme as PostmanTheme } from './Postman/theme'
+import { theme as lettersgTheme } from './lettersg/theme'
 import { theme as pslTheme } from './psl/theme'
-import { theme as RedeemTheme } from './Redeem/theme'
-import { theme as ScamShieldTheme } from './ScamShield/theme'
-import { theme as VaultTheme } from './Vault/theme'
+import { theme as sgidSingpassTheme } from './sgid-singpass/theme'
 import { theme as whaleTheme } from './whale/theme'
-import { theme as byosTheme } from './byos/theme'
-import { theme as calSgTheme } from './CalSG/theme'
-import { theme as distributeTheme } from './Distribute/theme'
-import { theme as folkTheme } from './folk/theme'
-import { theme as pairTheme } from './Pair/theme'
-import { theme as paySgTheme } from './PaySG/theme'
-import { theme as pinPointTheme } from './PinPoint/theme'
 
 export const THEME_MAP: Record<string, typeof defaultTheme> = {
-  default: defaultTheme,
-  AskGov: AskGovTheme,
+  armoury: armouryTheme,
+  askGov: askGovTheme,
+  betaDark: betaDarkTheme,
+  bbBear: bbBearTheme,
+  calSg: calSgTheme,
+  care360: care360Theme,
+  careers: careersTheme,
+  distribute: distributeTheme,
+  erpx: erpxTheme,
+  engage: engageTheme,
+  form: formTheme,
+  govsg: govsgTheme,
+  isomer: isomerTheme,
+  message: messageTheme,
+  pair: pairTheme,
+  paySg: paySgTheme,
+  phonebook: phonebookTheme,
+  pinPoint: pinPointTheme,
+  postman: postmanTheme,
+  redeem: redeemTheme,
+  scamShield: scamShieldTheme,
+  teals: tealsTheme,
+  vault: vaultTheme,
+  activesg: activesgTheme,
   byos: byosTheme,
-  CalSG: calSgTheme,
-  Care360: Care360Theme,
-  Distribute: distributeTheme,
+  default: defaultTheme,
   folk: folkTheme,
-  Form: FormTheme,
-  Isomer: IsomerTheme,
-  Pair: pairTheme,
-  PinPoint: pinPointTheme,
-  PaySG: paySgTheme,
-  Redeem: RedeemTheme,
-  Postman: PostmanTheme,
-  ScamShield: ScamShieldTheme,
-  Vault: VaultTheme,
   forest: forestTheme,
-  BbBear: BbBearTheme,
-  whale: whaleTheme,
+  fynder: fynderTheme,
   hichew: hichewTheme,
   jujube: jujubeTheme,
+  lettersg: lettersgTheme,
   psl: pslTheme,
+  sgidSingpass: sgidSingpassTheme,
+  whale: whaleTheme,
 }

token-gen/scripts/move-to-storybook.js

@@ -4,6 +4,7 @@
 const fs = require('fs')
 const path = require('path')
 const { execSync } = require('child_process')
+const { camelCase } = require('lodash')
 
 // src: token-gen/themes/<PRODUCT>
 // dest: react/.storybook/colorThemes/<PRODUCT>
@@ -55,3 +56,18 @@ export const theme = extendTheme(baseTheme, {
     fs.writeFileSync(themeFile, content)
   }
 })
+
+
+// react/.storybook/colorThemes/index.ts
+const storybookColorThemeDest = path.join(__dirname, '../../react/.storybook/colorThemes/index.ts')
+let storybookColorThemeIndex = ``
+// Create index theme file for Storybook
+products.forEach(product => {
+  storybookColorThemeIndex += `import { theme as ${camelCase(product)}Theme } from './${product}/theme'\n`
+})
+storybookColorThemeIndex += `\nexport const THEME_MAP: Record<string, typeof defaultTheme> = {`
+products.forEach(product => {
+  storybookColorThemeIndex += `\n  ${camelCase(product)}: ${camelCase(product)}Theme,`
+})
+storybookColorThemeIndex += `\n}\n`
+fs.writeFileSync(storybookColorThemeDest, storybookColorThemeIndex)