feat(natds-themes): add typescript type definitions generation on build

affects: @naturacosmeticos/natds-themes

DSY-1463

package.json

@@ -80,6 +80,7 @@
     "husky": "4.2.5",
     "jest": "26.4.2",
     "jest-file-snapshot": "0.3.8",
+    "json2ts": "^0.0.7",
     "lerna": "3.22.1",
     "lerna-changelog": "1.0.1",
     "nodemon": "2.0.4",

packages/natds-themes/build/web/index.d.ts

@@ -0,0 +1,247 @@
+
+declare const Themes: Themes.Themes
+declare namespace Themes {
+  export interface Color {
+	primary: string
+	onPrimary: string
+	primaryLight: string
+	onPrimaryLight: string
+	primaryDark: string
+	onPrimaryDark: string
+	secondary: string
+	onSecondary: string
+	secondaryLight: string
+	onSecondaryLight: string
+	secondaryDark: string
+	onSecondaryDark: string
+	background: string
+	onBackground: string
+	surface: string
+	onSurface: string
+	highlight: string
+	highEmphasis: string
+	mediumEmphasis: string
+	lowEmphasis: string
+	link: string
+	onLink: string
+	success: string
+	onSuccess: string
+	warning: string
+	onWarning: string
+	alert: string
+	onAlert: string
+}
+
+export interface BorderRadius {
+	none: number
+	small: number
+	medium: number
+	large: number
+}
+
+export interface Default {
+	fontSize: number
+	fontWeight: number
+	letterSpacing: number
+	lineHeight: number
+}
+
+export interface Button {
+	default: Default
+}
+
+export interface Heading1 {
+	fontSize: number
+	fontWeight: number
+	letterSpacing: number
+}
+
+export interface Heading2 {
+	fontSize: number
+	fontWeight: number
+	letterSpacing: number
+}
+
+export interface Heading3 {
+	fontSize: number
+	fontWeight: number
+	letterSpacing: number
+}
+
+export interface Heading4 {
+	fontSize: number
+	fontWeight: number
+	letterSpacing: number
+}
+
+export interface Heading5 {
+	fontSize: number
+	fontWeight: number
+	letterSpacing: number
+}
+
+export interface Heading6 {
+	fontSize: number
+	fontWeight: number
+	letterSpacing: number
+}
+
+export interface Subtitle1 {
+	fontSize: number
+	fontWeight: number
+	letterSpacing: number
+}
+
+export interface Subtitle2 {
+	fontSize: number
+	fontWeight: number
+	letterSpacing: number
+}
+
+export interface Body1 {
+	fontSize: number
+	fontWeight: number
+	letterSpacing: number
+}
+
+export interface Body2 {
+	fontSize: number
+	fontWeight: number
+	letterSpacing: number
+}
+
+export interface Caption {
+	fontSize: number
+	fontWeight: number
+	letterSpacing: number
+}
+
+export interface Overline {
+	fontSize: number
+	fontWeight: number
+	letterSpacing: number
+}
+
+export interface Opacity {
+	transparent: number
+	lower: number
+	veryLow: number
+	low: number
+	mediumLow: number
+	disabledLow: number
+	disabled: number
+	medium: number
+	mediumHigh: number
+	high: number
+	opaque: number
+}
+
+export interface Size {
+	none: number
+	micro: number
+	tiny: number
+	small: number
+	standard: number
+	semi: number
+	semiX: number
+	medium: number
+	mediumX: number
+	large: number
+	largeX: number
+	largeXX: number
+	largeXXX: number
+	huge: number
+	hugeX: number
+	hugeXX: number
+	hugeXXX: number
+	veryHuge: number
+}
+
+export interface FontFamily {
+	primary: string
+	secondary: string
+	branding: string
+	code: string
+}
+
+export interface LineHeight {
+	reset: number
+	small: number
+	medium: number
+	large: number
+}
+
+export interface FontWeight {
+	regular: number
+	medium: number
+}
+
+export interface Typography {
+	fontFamily: FontFamily
+	lineHeight: LineHeight
+	fontWeight: FontWeight
+}
+
+export interface Spacing {
+	none: number
+	micro: number
+	tiny: number
+	small: number
+	standard: number
+	semi: number
+	large: number
+	xLarge: number
+}
+
+export interface Elevation {
+	none: string
+	micro: string
+	tiny: string
+	small: string
+	medium: string
+	large: string
+	largeX: string
+	largeXX: string
+	huge: string
+	hugeX: string
+	hugeXX: string
+}
+
+export interface Theme {
+	color: Color
+	borderRadius: BorderRadius
+	button: Button
+	heading1: Heading1
+	heading2: Heading2
+	heading3: Heading3
+	heading4: Heading4
+	heading5: Heading5
+	heading6: Heading6
+	subtitle1: Subtitle1
+	subtitle2: Subtitle2
+	body1: Body1
+	body2: Body2
+	caption: Caption
+	overline: Overline
+	opacity: Opacity
+	size: Size
+	typography: Typography
+	spacing: Spacing
+	elevation: Elevation
+}
+
+export interface BrandThemes {
+  dark: Theme
+  light: Theme
+}
+
+export interface Themes {
+  aesop: BrandThemes,
+	avon: BrandThemes,
+	natura: BrandThemes,
+	theBodyShop: BrandThemes,
+
+}
+
+}
+export = Themes

packages/natds-themes/config/shared/config.js

@@ -8,6 +8,7 @@ import { registerThemeFormat, registerThemeProtocolFormat } from '../ios/registe
 import registerAttributeTypeTransformIos from '../ios/registerAttributeTypeTransform';
 import { registerValueStringLiteralTransform } from '../ios/registerValueStringLiteralTransform';
 import { registerTemplateHeaderHelper } from './templateHelpers';
+import { registerTypeDefinitionsAction } from './registerTypeDefinitionsAction';
 import { registerCamelTransform } from './registerCamelTransform';
 import { registerPxTransform } from './registerPxTransform';
 
@@ -42,6 +43,7 @@ export const customFormats = [
 
 export const customActions = [
   registerHtmlCreatePathsAction,
+  registerTypeDefinitionsAction,
 ];
 
 export const customTransforms = [

packages/natds-themes/config/shared/registerTypeDefinitionsAction.js

@@ -0,0 +1,63 @@
+import fs, { existsSync } from 'fs';
+import path from 'path';
+import json2ts from 'json2ts';
+import { brands } from './config';
+
+const buildDefinitionPath = (config) => {
+  const [buildFolder, platformFolder] = config.buildPath.split('/');
+
+  return `${buildFolder}/${platformFolder}/index.d.ts`;
+};
+
+const fixTypeDefinitions = (types) => types
+  .replace('RootObject', 'Theme')
+  .replace(/;/gm, '')
+  .replace(/(BorderRadiu)(\s|\n)/gm, '$1s$2');
+
+const buildThemesInterface = (brandNames) => `
+export interface BrandThemes {
+  dark: Theme
+  light: Theme
+}
+
+export interface Themes {
+  ${brandNames.map((brand) => `${brand}: BrandThemes,\n\t`).join('')}
+}
+`;
+
+const doAction = (dictionary, config) => {
+  const definitionsPath = buildDefinitionPath(config);
+
+  if (existsSync(path.join(__dirname, '../../', definitionsPath))) return false;
+
+  const jsonFile = config.files.find(({ destination }) => destination.includes('.json'));
+  const jsonThemeFile = fs.readFileSync(`${config.buildPath}${jsonFile.destination}`);
+  const typeDefinitions = json2ts.convert(jsonThemeFile);
+
+  const typeDefinitionFixes = fixTypeDefinitions(typeDefinitions);
+
+  const finalDefinition = `
+declare const Themes: Themes.Themes
+declare namespace Themes {
+  ${typeDefinitionFixes}
+  ${buildThemesInterface(brands)}
+}
+export = Themes
+`;
+
+  return fs.writeFileSync(definitionsPath, finalDefinition);
+};
+
+const undoAction = (dictionary, config) => {
+  const definitionsPath = buildDefinitionPath(config);
+
+  return fs.unlinkSync(definitionsPath);
+};
+
+export const registerTypeDefinitionsAction = () => ({
+  do: doAction,
+  name: 'create_type_definitions',
+  undo: undoAction,
+});
+
+export default registerTypeDefinitionsAction;

packages/natds-themes/config/web/buildWebConfig.js

@@ -1,4 +1,5 @@
 export const buildWebConfig = (brand, mode) => ({
+  actions: ['create_type_definitions'],
   buildPath: `build/web/${brand}/`,
   files: [{
     destination: `${mode}.json`,

yarn.lock

@@ -7584,6 +7584,13 @@ json-stringify-safe@^5.0.1, json-stringify-safe@~5.0.1:
   resolved "https://registry.yarnpkg.com/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz#1296a2d58fd45f19a0f6ce01d65701e2c735b6eb"
   integrity sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus=
 
+json2ts@^0.0.7:
+  version "0.0.7"
+  resolved "https://registry.yarnpkg.com/json2ts/-/json2ts-0.0.7.tgz#ab0ee646916a87522093633f1ff0a88474aaf9e5"
+  integrity sha1-qw7mRpFqh1Igk2M/H/CohHSq+eU=
+  dependencies:
+    underscore "^1.8.3"
+
 json5@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/json5/-/json5-1.0.1.tgz#779fb0018604fa854eacbf6252180d83543e3dbe"
@@ -11966,6 +11973,11 @@ underscore@^1.7.0:
   resolved "https://registry.yarnpkg.com/underscore/-/underscore-1.10.2.tgz#73d6aa3668f3188e4adb0f1943bd12cfd7efaaaf"
   integrity sha512-N4P+Q/BuyuEKFJ43B9gYuOj4TQUHXX+j2FqguVOpjkssLUUrnJofCcBccJSCoeturDoZU6GorDTHSvUDlSQbTg==
 
+underscore@^1.8.3:
+  version "1.11.0"
+  resolved "https://registry.yarnpkg.com/underscore/-/underscore-1.11.0.tgz#dd7c23a195db34267186044649870ff1bab5929e"
+  integrity sha512-xY96SsN3NA461qIRKZ/+qox37YXPtSBswMGfiNptr+wrt6ds4HaMw23TP612fEyGekRE6LNRiLYr/aqbHXNedw==
+
 unicode-canonical-property-names-ecmascript@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-1.0.4.tgz#2619800c4c825800efdd8343af7dd9933cbe2818"