update to sdv4 with async

primer · Sep 18, 2024 · f678243 · f678243
1 parent 83df85e
commit f678243
Show file tree

Hide file tree

Showing 212 changed files with 5,020 additions and 3,977 deletions.
diff --git a/.changeset/kind-stingrays-collect.md b/.changeset/kind-stingrays-collect.md
@@ -0,0 +1,5 @@
+---
+'@primer/primitives': minor
+---
+
+update to SDv4
diff --git a/.github/workflows/visual_regression_test.yml b/.github/workflows/visual_regression_test.yml
@@ -25,15 +25,14 @@ jobs:
           cache: 'npm'
 
       - name: Install dependencies
-        run: npm ci
+        run: npm ci && npm run install:storybook
 
       - name: Build tokens
         run: npm run build
 
       - name: Build storybook
         working-directory: docs/storybook
         run: |
-          npm ci
           npm run build-storybook
 
       - name: Run storybook
@@ -46,7 +45,7 @@ jobs:
           sleep 5
 
       - name: Run Visual Regression Tests
-        uses: docker://mcr.microsoft.com/playwright:v1.45.1-jammy
+        uses: docker://mcr.microsoft.com/playwright:v1.47.1-jammy
         env:
           STORYBOOK_URL: 'http://172.17.0.1:6006'
         with:

diff --git a/buildConfig.tsconfig.jsonc b/buildConfig.tsconfig.jsonc
diff --git a/docs/storybook/package-lock.json b/docs/storybook/package-lock.json
diff --git a/e2e/storybook.test.ts b/e2e/storybook.test.ts
@@ -1,8 +1,8 @@
 import {type Page, test, expect} from '@playwright/test'
 // eslint-disable-next-line import/extensions, import/no-unresolved
-import data from '../docs/storybook/storybook-static/stories.json'
+import data from '../docs/storybook/storybook-static/stories.json' assert {type: 'json'}
 // eslint-disable-next-line import/extensions, import/no-unresolved
-import colorData from '../dist/docs/functional/themes/light.json'
+import colorData from '../dist/docs/functional/themes/light.json' assert {type: 'json'}
 
 const extractNameAndValue = Object.entries(colorData)
   .map(([_key, details]) => ({

diff --git a/integration/baseline.test.ts b/integration/baseline.test.ts
@@ -1,12 +1,12 @@
-import {PrimerStyleDictionary} from '../src/PrimerStyleDictionary'
+import {PrimerStyleDictionary} from '../src/PrimerStyleDictionary.js'
 import fs from 'fs'
 
-describe('PrimerStyleDictionary', () => {
+describe('PrimerStyleDictionary', async () => {
   const basePath = `./integration`
   const buildPath = `${basePath}/build/baseline`
 
-  beforeAll(() => {
-    const extendedSD = PrimerStyleDictionary.extend({
+  beforeAll(async () => {
+    const extendedSD = await PrimerStyleDictionary.extend({
       source: [`${basePath}/tokens/**/*.json5`],
       platforms: {
         css: {
@@ -39,7 +39,7 @@ describe('PrimerStyleDictionary', () => {
         jsonFlat: {
           prefix: 'PREFIX',
           buildPath: `${buildPath}/json/`,
-          transforms: ['name/cti/pascal'],
+          transforms: ['name/pathToPascalCase'],
           files: [
             {
               options: {
@@ -53,15 +53,15 @@ describe('PrimerStyleDictionary', () => {
       },
     })
 
-    extendedSD.cleanAllPlatforms()
-    extendedSD.buildAllPlatforms()
+    await extendedSD.cleanAllPlatforms()
+    await extendedSD.buildAllPlatforms()
   })
 
   it('runs baseline css/variables format', () => {
     const output = fs.readFileSync(`${buildPath}/css/variables.css`, 'utf8')
     const expectedOutput = `:root {
-  --prefix-base-color-aqua-blue-500: #2C29FF; /* The primary color for interactive elements. */
-  --prefix-fg-color-link-rest-01: #2C29FF;
+  --prefix-base-color-aqua-blue-500: #2c29ff; /* The primary color for interactive elements. */
+  --prefix-fg-color-link-rest-01: #2c29ff;
 }
 `
     expect(output).toBe(expectedOutput)
@@ -74,15 +74,15 @@ describe('PrimerStyleDictionary', () => {
     "color": {
       "aquaBlue": {
         "500": {
-          "value": "#2C29FF",
+          "$value": "#2C29FF",
           "$type": "color",
-          "comment": "The primary color for interactive elements.",
+          "$description": "The primary color for interactive elements.",
           "filePath": "integration/tokens/base.json5",
           "isSource": true,
           "original": {
-            "value": "#2C29FF",
+            "$value": "#2C29FF",
             "$type": "color",
-            "comment": "The primary color for interactive elements."
+            "$description": "The primary color for interactive elements."
           },
           "name": "500",
           "attributes": {},
@@ -98,12 +98,12 @@ describe('PrimerStyleDictionary', () => {
   },
   "fgColor": {
     "link-rest-01": {
-      "value": "#2C29FF",
+      "$value": "#2C29FF",
       "$type": "color",
       "filePath": "integration/tokens/functional.json5",
       "isSource": true,
       "original": {
-        "value": "{base.color.aquaBlue.500}",
+        "$value": "{base.color.aquaBlue.500}",
         "$type": "color"
       },
       "name": "link-rest-01",
@@ -122,8 +122,8 @@ describe('PrimerStyleDictionary', () => {
   it('runs baseline flat json format', () => {
     const output = fs.readFileSync(`${buildPath}/json/flat.json`, 'utf8')
     const expectedOutput = `{
-  "PrefixBaseColorAquaBlue500": "#2C29FF",
-  "PrefixFgColorLinkRest01": "#2C29FF"
+  "PREFIXBaseColorAquaBlue500": "#2C29FF",
+  "PREFIXFgColorLinkRest01": "#2C29FF"
 }
 `
     expect(output).toBe(expectedOutput)

diff --git a/integration/integration.test.ts b/integration/integration.test.ts
@@ -1,16 +1,17 @@
-import {PrimerStyleDictionary} from '../src/PrimerStyleDictionary'
+import {PrimerStyleDictionary} from '../src/PrimerStyleDictionary.js'
 import fs from 'fs'
 
-describe('PrimerStyleDictionary', () => {
+describe('PrimerStyleDictionary', async () => {
   const basePath = `./integration`
-  const buildPath = `${basePath}/build/integreation`
+  const buildPath = `${basePath}/build/integration`
 
-  beforeAll(() => {
-    const extendedSD = PrimerStyleDictionary.extend({
+  beforeAll(async () => {
+    const extendedSD = await PrimerStyleDictionary.extend({
       source: [`${basePath}/tokens/**/*.json5`],
       platforms: {
         advancedCss: {
           prefix: 'PREFIX',
+          usesDtcg: true,
           transforms: [
             'name/pathToKebabCase',
             'color/hex',
@@ -36,6 +37,7 @@ describe('PrimerStyleDictionary', () => {
         },
         commonJs: {
           prefix: 'PREFIX',
+          usesDtcg: true,
           transforms: [
             'color/hex',
             'color/hexMix',
@@ -59,6 +61,7 @@ describe('PrimerStyleDictionary', () => {
         },
         javascriptEsm: {
           prefix: 'PREFIX',
+          usesDtcg: true,
           buildPath: `${buildPath}/js/`,
           transforms: [
             'color/hex',
@@ -82,6 +85,7 @@ describe('PrimerStyleDictionary', () => {
         },
         jsonFigma: {
           prefix: 'PREFIX',
+          usesDtcg: true,
           buildPath: `${buildPath}/json/`,
           transforms: [
             'color/rgbaFloat',
@@ -104,6 +108,7 @@ describe('PrimerStyleDictionary', () => {
         },
         jsonNestedPrefixed: {
           prefix: 'PREFIX',
+          usesDtcg: true,
           buildPath: `${buildPath}/json/`,
           transforms: [
             'color/hex',
@@ -150,8 +155,8 @@ describe('PrimerStyleDictionary', () => {
       },
     })
 
-    extendedSD.cleanAllPlatforms()
-    extendedSD.buildAllPlatforms()
+    await extendedSD.cleanAllPlatforms()
+    await extendedSD.buildAllPlatforms()
   })
 
   it('runs css/advanced format', () => {
@@ -208,30 +213,30 @@ describe('PrimerStyleDictionary', () => {
     const output = fs.readFileSync(`${buildPath}/json/figma.json`, 'utf8')
     const expectedOutput = `[
   {
-    "name": "PREFIX/base/color/aquaBlue/500",
+    "name": "PREFIX/fgColor/link-rest-01",
     "value": {
       "r": 0.17254901960784313,
       "g": 0.1607843137254902,
       "b": 1,
       "a": 1
     },
     "type": "COLOR",
-    "description": "The primary color for interactive elements.",
-    "refId": "PREFIX/base/color/aquaBlue/500",
+    "refId": "PREFIX/fgColor/link-rest-01",
+    "reference": "PREFIX/base/color/aquaBlue/500",
     "mode": "default",
     "scopes": ["ALL_SCOPES"]
   },
   {
-    "name": "PREFIX/fgColor/link-rest-01",
+    "name": "PREFIX/base/color/aquaBlue/500",
     "value": {
       "r": 0.17254901960784313,
       "g": 0.1607843137254902,
       "b": 1,
       "a": 1
     },
     "type": "COLOR",
-    "refId": "PREFIX/fgColor/link-rest-01",
-    "reference": "PREFIX/base/color/aquaBlue/500",
+    "description": "The primary color for interactive elements.",
+    "refId": "PREFIX/base/color/aquaBlue/500",
     "mode": "default",
     "scopes": ["ALL_SCOPES"]
   }