@telus-uds/system-theme-tokens 2.66.0 → 3.0.0

package/.eslintrc.cjs

@@ -0,0 +1,20 @@
+const path = require('path')
+const base = require('../../eslintrc.base.cjs')
+
+base.rules['import/no-extraneous-dependencies'] = [
+  'error',
+  { packageDir: [__dirname, path.join(__dirname, '../..')] }
+]
+
+base.rules['import/extensions'] = 'off'
+
+base.parser = '@babel/eslint-parser'
+
+base.parserOptions = {
+  requireConfigFile: false,
+  babelOptions: {
+    plugins: ['@babel/plugin-syntax-import-assertions']
+  }
+}
+
+module.exports = base

package/CHANGELOG.md

@@ -1,12 +1,21 @@
 # Change Log - @telus-uds/system-theme-tokens
 
-This log was last generated on Thu, 31 Oct 2024 05:02:44 GMT and should not be manually modified.
+<!-- This log was last generated on Fri, 22 Nov 2024 23:40:07 GMT and should not be manually modified. -->
 
 <!-- Start content -->
 
+## 3.0.0
+
+Fri, 22 Nov 2024 23:40:07 GMT
+
+### Major changes
+
+- Upgrade `react-native` and many other dependencies and refactor to ESM-only builds (shahzaibkhalidmalik@outlook.com)
+- Bump @telus-uds/system-constants to v2.0.0
+
 ## 2.66.0
 
-Thu, 31 Oct 2024 05:02:44 GMT
+Thu, 31 Oct 2024 05:09:12 GMT
 
 ### Minor changes
 

package/appearances.js

@@ -1,4 +1,4 @@
-const { viewports } = require('@telus-uds/system-constants')
+import { viewports } from '@telus-uds/system-constants'
 
 /*
  * shared appearances
@@ -76,7 +76,7 @@ const checked = {
 
 const disabled = { values: [true], type: 'state' }
 
-module.exports = {
+export default {
   // system-wide appearances
   system: {
     viewport: {

package/bin/android/build.js

@@ -1,20 +1,26 @@
-const { writeFile, rm, mkdir } = require('fs/promises')
-const { resolve } = require('path')
-const chalk = require('chalk')
+import { writeFile, rm, mkdir } from 'fs/promises'
+import { resolve, dirname } from 'path'
+import { fileURLToPath } from 'url'
+import chalk from 'chalk'
 
-const components = require('../../components')
-const tokensTemplate = require('./templates/component')
-const modelsTemplate = require('./templates/model')
-const packageJson = require('../../package.json')
-const tokenTypes = require('./tokens')
-const { customEnums } = require('./types')
+import components from '../../components.js'
+import tokensTemplate from './templates/component.js'
+import modelsTemplate from './templates/model.js'
+// TODO: Prettier doesn't yet support import assertions
+// eslint-disable-next-line prettier/prettier
+import packageJson from '../../package.json' with { type: 'json' }
+import tokenTypes from './tokens.js'
+import { customEnums } from './types.js'
 
 // eslint-disable-next-line no-console
 const log = (message, colour = chalk.grey) => console.log(colour(message))
 
-async function build({ author = 'Telus' } = {}) {
+export default async function build({ author = 'Telus' } = {}) {
   log(chalk.grey('Beginning system-theme-tokens/android build:'))
 
+  const __filename = fileURLToPath(import.meta.url)
+  const __dirname = dirname(__filename)
+
   const { version } = packageJson
   const credit = `Created by ${author} from @telus-uds/system-theme-tokens ${version}`
   const outputDir = resolve(__dirname, '../../generated/android')
@@ -64,5 +70,3 @@ async function build({ author = 'Telus' } = {}) {
 
   log(chalk.grey('✔️  Completed system-theme-tokens/android build.'))
 }
-
-module.exports = build

package/bin/android/templates/component.js

@@ -1,8 +1,7 @@
-const tokenTypes = require('../tokens')
-const getImports = require('./imports')
-const { customEnums } = require('../types')
-
-const headerTemplate = require('./header')
+import tokenTypes from '../tokens.js'
+import getImports from './imports.js'
+import { customEnums } from '../types.js'
+import headerTemplate from './header.js'
 
 function getKotlinType(tokenType) {
   const { type, nullable } = tokenTypes[tokenType]
@@ -46,7 +45,7 @@ function getKotlinDefault(tokenType) {
   return ` = ${formatDefaultValue(defaultValue, type)}`
 }
 
-function componentTemplate({ componentName, credit, tokens }) {
+export default function componentTemplate({ componentName, credit, tokens }) {
   const header = headerTemplate({
     packageName: `com.telus.udsnative.components.${componentName.toLowerCase()}`,
     credit,
@@ -63,5 +62,3 @@ ${Object.entries(tokens)
 ): Tokens
 `
 }
-
-module.exports = componentTemplate

package/bin/android/templates/header.js

@@ -14,8 +14,6 @@ function formatImports(imports = []) {
     : ''
 }
 
-function headerTemplate({ packageName, imports }) {
+export default function headerTemplate({ packageName, imports }) {
   return `${formatPackage(packageName)}${formatImports(imports)}`
 }
-
-module.exports = headerTemplate

package/bin/android/templates/imports.js

@@ -1,5 +1,5 @@
-const { composeTypes, customTypes, customEnums } = require('../types')
-const tokenTypes = require('../tokens')
+import { composeTypes, customTypes, customEnums } from '../types.js'
+import tokenTypes from '../tokens.js'
 
 function mapImports(source, path) {
   // This pattern holds for everything so far; if there are exceptions, could add an object of them here
@@ -10,7 +10,7 @@ const composeImports = mapImports(composeTypes, 'androidx.compose.ui.unit.')
 const udsImports = mapImports({ ...customTypes, ...customEnums }, 'com.telus.udsnative.models.')
 const allImports = { ...composeImports, ...udsImports }
 
-function getImports(tokensValues, imports = []) {
+export default function getImports(tokensValues, imports = []) {
   tokensValues.forEach((token) => {
     const { type: tokenType } = tokenTypes[token]
     const importPath = allImports[tokenType]
@@ -24,5 +24,3 @@ function getImports(tokensValues, imports = []) {
 
   return imports
 }
-
-module.exports = getImports

package/bin/android/templates/model.js

@@ -1,6 +1,6 @@
-const headerTemplate = require('./header')
+import headerTemplate from './header.js'
 
-function modelTemplate({ type, values }) {
+export default function modelTemplate({ type, values }) {
   const valuesKeys = Object.keys(values)
 
   const header = headerTemplate({ packageName: 'com.telus.udsnative.models' })
@@ -10,5 +10,3 @@ ${valuesKeys.map((valueKey) => `    ${valueKey}`).join(',\n')}
 }
 `
 }
-
-module.exports = modelTemplate

package/bin/android/tokens.js

@@ -1,6 +1,6 @@
-const deepMerge = require('lodash.merge')
-const iosTokens = require('../ios/tokens')
-const { types } = require('./types')
+import deepMerge from 'lodash.merge'
+import iosTokens from '../ios/tokens.js'
+import { types } from './types.js'
 
 const nilToNull = (tokens) =>
   Object.fromEntries(
@@ -10,7 +10,7 @@ const nilToNull = (tokens) =>
     ])
   )
 
-const androidTokens = deepMerge({}, nilToNull(iosTokens), {
+export default deepMerge({}, nilToNull(iosTokens), {
   size: {
     // Gson sometimes has trouble deserializing Dp Optional; might need to use Int or Double?
     type: types.Dp
@@ -51,5 +51,3 @@ const androidTokens = deepMerge({}, nilToNull(iosTokens), {
     type: types.Double
   }
 })
-
-module.exports = androidTokens

package/bin/android/types.js

@@ -1,5 +1,5 @@
 // Built-in Kotlin primitive types:
-const kotlinTypes = {
+export const kotlinTypes = {
   Double: 'Double', // Numbers to use in calculations
   Int: 'Int', // Integers to use as indexes etc
   String: 'String', // Arbitrary strings without an existing enum
@@ -7,20 +7,20 @@ const kotlinTypes = {
 }
 
 // These types are available as imports from androidx.compose
-const composeTypes = {
+export const composeTypes = {
   Dp: 'Dp',
   TextUnit: 'TextUnit'
 }
 
 // These types are pre-defined in universal-design-system-android
-const customTypes = {
+export const customTypes = {
   Color: 'UDSColor', // Custom class for objects with red, green, blue, alpha
   PaletteGradient: 'PaletteGradient', // Custom class
   Shadow: 'Shadow'
 }
 
 // These are enum types generated here
-const customEnums = {
+export const customEnums = {
   TextAlignment: 'TextAlignmentToken',
   TextLine: 'TextLineToken',
   TextLineStyle: 'TextLineStyleToken',
@@ -34,17 +34,9 @@ const customEnums = {
   TextTransform: 'TextTransformToken'
 }
 
-const types = {
+export const types = {
   ...kotlinTypes,
   ...composeTypes,
   ...customEnums,
   ...customTypes
 }
-
-module.exports = {
-  types,
-  kotlinTypes,
-  composeTypes,
-  customEnums,
-  customTypes
-}

package/bin/build-android.js

@@ -1,6 +1,6 @@
 #!/usr/bin/env node
 
-require('dotenv').config()
-const buildAndroid = require('./android/build')
+import 'dotenv/config'
+import buildAndroid from './android/build.js'
 
 buildAndroid()

package/bin/build-ios.js

@@ -1,6 +1,6 @@
 #!/usr/bin/env node
 
-require('dotenv').config()
-const buildIos = require('./ios/build')
+import 'dotenv/config'
+import buildIos from './ios/build.js'
 
 buildIos()

package/bin/ios/build.js

@@ -1,20 +1,28 @@
-const { writeFile, rm, mkdir } = require('fs/promises')
-const { resolve } = require('path')
-const chalk = require('chalk')
+// Import necessary modules using ESM syntax
+import { writeFile, rm, mkdir } from 'fs/promises'
+import {resolve, dirname } from 'path'
+import chalk from 'chalk'
 
-const components = require('../../components')
-const tokensTemplate = require('./templates/component')
-const modelsTemplate = require('./templates/model')
-const packageJson = require('../../package.json')
-const tokenTypes = require('./tokens')
-const { customEnums } = require('./types')
+import { fileURLToPath } from 'url'
+
+import components from '../../components.js'
+import tokensTemplate from './templates/component.js'
+import modelsTemplate from './templates/model.js'
+// TODO: Prettier doesn't yet support import assertions
+// eslint-disable-next-line prettier/prettier
+import packageJson from '../../package.json' with { type: 'json' }
+import tokenTypes from './tokens.js'
+import { customEnums } from './types.js'
 
 // eslint-disable-next-line no-console
 const log = (message, colour = chalk.grey) => console.log(colour(message))
 
-async function build({ author = 'Telus' } = {}) {
+export default async function build({ author = 'Telus' } = {}) {
   log(chalk.grey('Beginning system-theme-tokens/ios build:'))
 
+  const __filename = fileURLToPath(import.meta.url)
+  const __dirname = dirname(__filename)
+
   const { version } = packageJson
   const credit = `Created by ${author} from @telus-uds/system-theme-tokens ${version}`
   const outputDir = resolve(__dirname, '../../generated/ios')
@@ -64,5 +72,3 @@ async function build({ author = 'Telus' } = {}) {
 
   log(chalk.grey('✔️  Completed system-theme-tokens/ios build.'))
 }
-
-module.exports = build

package/bin/ios/templates/component.js

@@ -1,6 +1,5 @@
-const tokenTypes = require('../tokens')
-
-const headerTemplate = require('./header')
+import tokenTypes from '../tokens.js'
+import headerTemplate from './header.js'
 
 function getSwiftType(tokenType) {
   const { type, nullable } = tokenTypes[tokenType]
@@ -11,7 +10,7 @@ function getSwiftDefault(tokenType) {
   return ` = ${tokenTypes[tokenType].default}`
 }
 
-function componentTemplate({ componentName, fileName, credit, tokens }) {
+export default function componentTemplate({ componentName, fileName, credit, tokens }) {
   const tokensEntries = Object.entries(tokens)
   const header = headerTemplate({ fileName, credit, imports: ['SwiftUI'] })
 
@@ -42,5 +41,3 @@ ${tokensEntries
 }
 `
 }
-
-module.exports = componentTemplate

package/bin/ios/templates/header.js

@@ -21,8 +21,6 @@ ${imports.map((importName) => `import ${importName}`).join('\n')}
     : ''
 }
 
-function headerTemplate({ fileName, credit, imports }) {
+export default function headerTemplate({ fileName, credit, imports }) {
   return `${formatName(fileName)}${formatCredit(credit)}${formatImports(imports)}`
 }
-
-module.exports = headerTemplate

package/bin/ios/templates/model.js

@@ -1,6 +1,6 @@
-const headerTemplate = require('./header')
+import headerTemplate from './header.js'
 
-function modelTemplate({ type, values, fileName, credit }) {
+export default function modelTemplate({ type, values, fileName, credit }) {
   const valuesKeys = Object.keys(values)
 
   const header = headerTemplate({ fileName, credit, imports: ['SwiftUI'] })
@@ -10,5 +10,3 @@ ${valuesKeys.map((valueKey) => `  case ${valueKey}`).join('\n')}
 }
 `
 }
-
-module.exports = modelTemplate

package/bin/ios/tokens.js

@@ -1,8 +1,8 @@
-const deepMerge = require('lodash.merge')
-const rnTokens = require('../../tokens')
-const { types } = require('./types')
+import deepMerge from 'lodash.merge'
+import rnTokens from '../../tokens.js'
+import { types } from './types.js'
 
-const iosTokens = deepMerge({}, rnTokens, {
+export default deepMerge({}, rnTokens, {
   size: {
     type: types.Double
   },
@@ -103,5 +103,3 @@ const iosTokens = deepMerge({}, rnTokens, {
     default: '.none'
   }
 })
-
-module.exports = iosTokens

package/bin/ios/types.js

@@ -1,5 +1,5 @@
 // Built-in Swift primitive types:
-const swiftTypes = {
+export const swiftTypes = {
   CGFloat: 'CGFloat', // Numbers to pass to APIs that expect 32-bit or 64-bit floats depending on system
   Double: 'Double', // Numbers to pass to APIs that always expect 64-bit floats
   Int: 'Int', // Signed integer that is 32 bit or 64 bit depending on platform
@@ -8,19 +8,19 @@ const swiftTypes = {
 }
 
 // These types are available as imports from SwiftUi
-const swiftUiTypes = {
+export const swiftUiTypes = {
   TextAlignment: 'TextAlignment',
   Color: 'Color'
 }
 
 // These types are pre-defined in universal-design-system-ios:
 // See https://github.com/telus/universal-design-system-ios/tree/main/Sources/UDSNative/Models
-const customStructs = {
+export const customStructs = {
   Shadow: 'Shadow', // Custom UDS struct
   PaletteGradient: 'PaletteGradient' // Custom UDS struct
 }
 
-const customEnums = {
+export const customEnums = {
   TextLine: 'TextLineToken',
   TextLineStyle: 'TextLineStyleToken',
   BorderStyle: 'BorderStyleToken',
@@ -33,17 +33,9 @@ const customEnums = {
   TextTransform: 'TextTransformToken'
 }
 
-const types = {
+export const types = {
   ...swiftTypes,
   ...swiftUiTypes,
   ...customEnums,
   ...customStructs
 }
-
-module.exports = {
-  types,
-  swiftTypes,
-  swiftUiTypes,
-  customEnums,
-  customStructs
-}

package/components.js

@@ -1,5 +1,5 @@
 // Define the required components and their supported tokens
-module.exports = {
+export default {
   ActionCard: {
     actionIcon: 'icon',
     actionIconColor: 'color',

package/index.js

@@ -2,8 +2,9 @@
  * Make sure nothing in this directory references node-specific APIs
  * at least `components` will be accessed in the browser for proptype validation
  */
-module.exports = {
-  components: require('./components'),
-  appearances: require('./appearances'),
-  tokens: require('./tokens')
-}
+
+import components from './components.js'
+import appearances from './appearances.js'
+import tokens from './tokens.js'
+
+export { components, appearances, tokens }

package/package.json

@@ -1,10 +1,11 @@
 {
   "name": "@telus-uds/system-theme-tokens",
-  "version": "2.66.0",
+  "version": "3.0.0",
   "description": "Theme token schema for UDS",
   "keywords": [
     "system"
   ],
+  "type": "module",
   "author": "TELUS Digital",
   "homepage": "https://github.com/telus/universal-design-system#readme",
   "license": "MIT",
@@ -24,13 +25,22 @@
     "url": "https://github.com/telus/universal-design-system/issues"
   },
   "main": "index.js",
+  "exports": {
+    ".": {
+      "import": "./index.js",
+      "default": "./index.js"
+    },
+    "./package.json": "./package.json"
+  },
   "standard-engine": {
     "skip": true
   },
   "dependencies": {
-    "@telus-uds/system-constants": "^1.3.0"
+    "@telus-uds/system-constants": "^2.0.0"
   },
   "devDependencies": {
+    "@babel/eslint-parser": "^7.25.9",
+    "@babel/plugin-syntax-import-attributes": "^7.26.0",
     "chalk": "^4.1.2",
     "dotenv": "^10.0.0",
     "lodash.merge": "^4.6.2"

package/tokens.js

@@ -1,4 +1,4 @@
-const { fontBasePixels, viewports } = require('@telus-uds/system-constants')
+import { fontBasePixels, viewports } from '@telus-uds/system-constants'
 
 /*
  * Simulates an object that has every positive integer as a property
@@ -377,4 +377,4 @@ const tokenTypes = applyDynamicTypes({
   }
 })
 
-module.exports = tokenTypes
+export default tokenTypes