Add src to dist (#1064)

* copy src to dist for primer/brand ot use

* use tsc and copy type files

.changeset/sweet-apes-bow.md

@@ -0,0 +1,5 @@
+---
+'@primer/primitives': minor
+---
+
+Adds src to dist as "build" so that primer/brand can use it

build.tsconfig.jsonc

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "jsx": "react",
+    "target": "ES2016",
+    "module": "preserve",
+    "lib": ["ESNext", "dom"],
+    "moduleResolution": "Bundler",
+    "esModuleInterop": true,
+    "strict": true,
+    "noImplicitAny": true,
+    "skipLibCheck": false,
+    "typeRoots": ["./src/@types", "./node_modules/", "./node_modules/@types", "types"],
+    "types": ["vitest/globals"],
+    "rootDir": "./src",
+    "outDir": "./dist/build",
+    "declaration": true,
+    "resolveJsonModule": true,
+    "baseUrl": ".",
+    "paths": {
+      "~/*": ["*"],
+      // workaround for: https://github.com/vitest-dev/vitest/issues/4567
+      "rollup/parseAst": ["./node_modules/rollup/dist/parseAst"],
+    },
+  },
+  "include": ["src/**/*.ts"],
+  "exclude": ["**/*.test.ts", "src/test-utilities/*.ts", "vitest.config.ts"],
+}

package.json

@@ -23,10 +23,11 @@
   },
   "homepage": "https://github.com/primer/primitives#readme",
   "scripts": {
-    "build": "npm run clean && npm run build:tokens && npm run build:fallbacks && npm run build:figma",
+    "build": "npm run clean && npm run build:tokens && npm run build:fallbacks && npm run build:figma && npm run build:config",
     "build:tokens": "tsx ./scripts/buildTokens.ts",
     "build:fallbacks": "tsx ./scripts/buildFallbacks.ts",
     "build:figma": "tsx scripts/buildFigma.ts",
+    "build:config": "tsc -p build.tsconfig.jsonc && tsx ./scripts/copyDir.ts src/types dist/build/types",
     "clean": "rm -rf dist",
     "tokenJson:check": "tsx scripts/diffThemes.ts && tsx scripts/diffTokenProps.ts",
     "contrast:check": "tsx scripts/color-contrast.ts",

scripts/copyDir.ts

@@ -0,0 +1,10 @@
+import {copyFromDir} from '~/src/utilities/copyFromDir.js'
+
+const copyDir = async () => {
+  const [from, to] = process.argv.slice(2, 4)
+  const files = await copyFromDir(from, to)
+  // eslint-disable-next-line no-console
+  console.log(`\u001b[36;1m\u001b[1m${files.length} files copied from ${from} to ${to}\u001b[0m`)
+}
+
+await copyDir()

src/formats/typescriptExportDefinition.test.ts

@@ -104,7 +104,7 @@ describe('Format: TypeScript definitions', () => {
        * @description a css border string
        * @format color | style | width
        */
-      type Border = \`\${ColorHex} \${string} \${string}\`;
+      type Border = \`\${string} \${string} \${string}\`;
 
       export type tokens = {
         test: {
@@ -129,15 +129,15 @@ describe('Format: TypeScript definitions', () => {
     const input = getMockFormatterArguments({dictionary})
     const expectedOutput = await format(
       `/**
-      * @description hex string (6 or 8-digit)
-      */
+       * @description hex string (6 or 8-digit)
+       */
       type ColorHex = string;
 
       /**
        * @description a css border string
        * @format color | style | width
        */
-      type Border = \`\${ColorHex} \${string} \${string}\`;
+      type Border = \`\${string} \${string} \${string}\`;
 
       export type tokens = {
         tokens: {

src/formats/typescriptExportDefinition.ts

@@ -137,8 +137,7 @@ const getTokenObjectWithTypes = (tokens: DesignTokens, options: Config & LocalOp
 const getTypeDefinition = (tokens: DesignTokens, options: Config & LocalOptions): string => {
   // extract options
   const {moduleName = `tokens`, tokenTypesPath = `./src/types/`} = options
-
-  const usedTypes = getUsedTokenTypes(tokens, ['ColorHex', 'Shadow', 'Border', 'SizeEm', 'SizeRem', 'SizePx'], options)
+  const usedTypes = getUsedTokenTypes(tokens, ['Shadow', 'ColorHex', 'Border', 'SizeEm', 'SizeRem', 'SizePx'], options)
   const tokenObjectWithTypes = getTokenObjectWithTypes(tokens, options)
   // get token type declaration from file
   const designTokenTypes: string[] = []

src/transformers/fontFamilyToCss.ts

@@ -1,4 +1,4 @@
-import type {PlatformConfig, Transform, TransformedToken} from 'style-dictionary/types'
+import type {Transform, TransformedToken} from 'style-dictionary/types'
 import {isFontFamily} from '../filters/index.js'
 import {getTokenValue} from './utilities/getTokenValue.js'
 import {hasSpaceInString} from './utilities/hasSpaceInString.js'
@@ -34,6 +34,5 @@ export const fontFamilyToCss: Transform = {
   type: 'value',
   transitive: true,
   filter: isFontFamily,
-  transform: (token: TransformedToken, config: PlatformConfig): string =>
-    parseFontFamily(getTokenValue(token, undefined, config)),
+  transform: (token: TransformedToken): string => parseFontFamily(getTokenValue(token)),
 }

src/types/Border.d.ts

@@ -2,4 +2,4 @@
  * @description a css border string
  * @format color | style | width
  */
-type Border = `${ColorHex} ${string} ${string}`
+type Border = `${string} ${string} ${string}`

src/utilities/copyFromDir.ts

@@ -5,17 +5,20 @@ import {copyFile, readdir, mkdir} from 'fs/promises'
  * @description Copies all files from source folder to destination
  * @param source path
  * @param destination path
- * @returns promise
+ * @returns promise of file name array
  */
-export const copyFromDir = async (source: string, destination: string) => {
+export const copyFromDir = async (source: string, destination: string): Promise<string[]> => {
   // adjust trailing slash
   const src = `${source.replace(/\/$/, '')}`
   const dest = `${destination.replace(/\/$/, '')}`
   // create dest if it does not exists
   await mkdir(dest, {recursive: true})
+
   // read files from source
   const files = await readdir(src)
   for (const file of files) {
     copyFile(`${src}/${file}`, `${dest}/${file}`)
   }
+
+  return files
 }