build.js

import StyleDictionary from 'style-dictionary';

const capitalize = (str) => str.charAt(0).toUpperCase() + str.slice(1);

// Strips "px" or "%" units from token values and returns a plain number string.
const toNumber = (val) => parseFloat(String(val).replace('px', '').replace('%', ''));

const hexToRGB = (hex) => {
  const h = hex.replace('#', '');
  return {
    r: (parseInt(h.slice(0, 2), 16) / 255).toFixed(3),
    g: (parseInt(h.slice(2, 4), 16) / 255).toFixed(3),
    b: (parseInt(h.slice(4, 6), 16) / 255).toFixed(3),
  };
};

const fileHeader = (filename) =>
`//
//  ${filename}
//  MDS
//
//  Auto-generated by Style Dictionary. Do not edit manually.
//

import UIKit

`;

StyleDictionary.registerFormat({
  name: 'ios/swift-color-base',
  format: ({ dictionary }) => {
    let output = fileHeader('BaseColor.swift');
    output += '// MARK: - Base Color\n\n';
    output += '@_spi(MDSCatalog) public enum BaseColor {\n';

      for (const token of dictionary.allTokens) {
            const colorName = token.path[2];
            const shade = token.path[token.path.length - 1];
            const hex = token.$value ?? token.value;
            const { r, g, b } = hexToRGB(hex);

            output += `    public static let ${colorName}${shade} = UIColor(red: ${r}, green: ${g}, blue: ${b}, alpha: 1)\n`;
          }

          output += '}\n';
          return output;
    }
});

StyleDictionary.registerFormat({
  name: 'ios/swift-typography',
  format: ({ dictionary }) => {
    let output = fileHeader('BaseTypography.swift');
    output += '// MARK: - Base Typography\n\n';
    output += '@_spi(MDSCatalog) public enum BaseTypography {\n';

    const groups = {};
    for (const token of dictionary.allTokens) {
      const cat = token.path[2];
      if (!groups[cat]) groups[cat] = [];
      groups[cat].push(token);
    }

    for (const [cat, tokens] of Object.entries(groups)) {
      output += `\n    // MARK: ${capitalize(cat)}\n`;
      output += `    public enum ${capitalize(cat)} {\n`;
      for (const token of tokens) {
        const last = token.path[token.path.length - 1];
        let name;
        if (cat === 'size' || cat === 'lineHeight') {
          name = last;
        } else if (last === 'default') {
          name = '`default`';
        } else {
          name = last;
        }
        output += `        public static let ${name}: CGFloat = ${toNumber(token.$value ?? token.value)}\n`;
      }
      output += `    }\n`;
    }

    output += '}\n';
    return output;
  }
});

StyleDictionary.registerFormat({
  name: 'ios/swift-spacing',
  format: ({ dictionary }) => {
    let output = fileHeader('BaseSpacing.swift');
    output += '// MARK: - Base Spacing\n\n';
    output += 'public enum BaseSpacing {\n';

    const groups = {};
    for (const token of dictionary.allTokens) {
      const cat = token.path[1];
      if (!groups[cat]) groups[cat] = [];
      groups[cat].push(token);
    }

    for (const [cat, tokens] of Object.entries(groups)) {
      output += `\n    // MARK: ${capitalize(cat)}\n`;
      output += `    public enum ${capitalize(cat)} {\n`;
      for (const token of tokens) {
        const last = token.path[token.path.length - 1];
        output += `        public static let ${last}: CGFloat = ${toNumber(token.$value ?? token.value)}\n`;
      }
      output += `    }\n`;
    }

    output += '}\n';
    return output;
  }
});

StyleDictionary.registerFormat({
  name: 'ios/swift-radius',
  format: ({ dictionary }) => {
    let output = fileHeader('BaseRadius.swift');
    output += '// MARK: - Base Radius\n\n';
    output += 'public enum BaseRadius {\n';
    const groups = {};
    for (const token of dictionary.allTokens) {
      const cat = token.path[1]; // "base"
      if (!groups[cat]) groups[cat] = [];
      groups[cat].push(token);
    }
    for (const [cat, tokens] of Object.entries(groups)) {
      output += `\n    // MARK: ${capitalize(cat)}\n`;
      output += `    public enum ${capitalize(cat)} {\n`;
      for (const token of tokens) {
        const last = token.path[token.path.length - 1];
        output += `        public static let ${last}: CGFloat = ${toNumber(token.$value ?? token.value)}\n`;
      }
      output += `    }\n`;
    }
    output += '}\n';
    return output;
  }
});

const weightMap = {
  'bold':     { fontName: 'SUIT-Bold',     swiftWeight: '.bold'     },
  'semibold': { fontName: 'SUIT-SemiBold', swiftWeight: '.semibold' },
  'regular':  { fontName: 'SUIT-Regular',  swiftWeight: '.regular'  },
};

const TYPOGRAPHY_REF_PATTERN = /^\{typography\.base\.([^.]+)\.([^.}]+)\}$/;

const refToBaseTypography = (ref, tokenPath, fieldName) => {
  const match = typeof ref === 'string' && ref.match(TYPOGRAPHY_REF_PATTERN);
  if (!match) {
    throw new Error(
      `Token "${tokenPath}": "${fieldName}" 참조가 유효하지 않음 (값: ${JSON.stringify(ref)})\n` +
      `  예상 형식: {typography.base.<category>.<key>}`
    );
  }
  const cat = capitalize(match[1]);
  const key = match[2] === 'default' ? '`default`' : match[2];
  return `BaseTypography.${cat}.${key}`;
};

StyleDictionary.registerFormat({
  name: 'ios/swift-typography-semantic',
  format: ({ dictionary }) => {
    let output = fileHeader('Typography.swift');
    output += '// MARK: - Semantic Typography\n\n';
    output += 'public enum Typography {\n';

    for (const token of dictionary.allTokens) {
      const cat = token.path[1];
      const num = token.path[2];
      const name = `${cat}${num}`;
      const orig = token.original.$value ?? token.original.value;

      const weightRef = orig.fontWeight?.match(TYPOGRAPHY_REF_PATTERN)?.[2];
      const { fontName, swiftWeight } = weightMap[weightRef] ?? weightMap['regular'];

      const tokenPath = token.path.join('.');
      const fontSizeRef = refToBaseTypography(orig.fontSize, tokenPath, 'fontSize');
      const lineHeightRef = refToBaseTypography(orig.lineHeight, tokenPath, 'lineHeight');
      const letterSpacingRef = refToBaseTypography(orig.letterSpacing, tokenPath, 'letterSpacing');

      output += `    public static let ${name} = MDSFont(\n`;
      output += `        font: FontLoader.font(name: "${fontName}", size: ${fontSizeRef}, fallbackWeight: ${swiftWeight}),\n`;
      output += `        lineHeight: ${lineHeightRef},\n`;
      output += `        letterSpacing: ${fontSizeRef} * (${letterSpacingRef} / 100)\n`;
      output += `    )\n`;
    }

    output += '}\n';
    return output;
  }
});

const toSwiftName = (str) => {
  const camel = str.replace(/-([a-z])/g, (_, c) => c.toUpperCase());
  return camel === 'default' ? '`default`' : camel;
};

const resolveBaseTokenPath = (value) => {
  if (typeof value !== 'string') return '';
  const match = value.match(/^\{color\.base\.([^.]+)\.([^.}]+)\}$/);
  if (!match) return '';
  return `color.base.${match[1]}.${match[2]}`;
};

const resolveBaseColorReference = (value) => {
  if (typeof value !== 'string') return null;

    const match = value.match(/^\{color\.base\.([^.]+)\.([^.}]+)\}$/);
    if (!match) return null;
    const colorName = match[1];
    const shade = match[2];
    return `BaseColor.${colorName}${shade}`;
};

const STATE_SUFFIXES = ['hover', 'pressed', 'disabled', 'focused'];
const isStateSuffix = (str) => STATE_SUFFIXES.includes(str);

const parseTokenName = (name) => {
  const parts = name.split('-');
  const last = parts[parts.length - 1];
  if (isStateSuffix(last)) {
    return {
      base: parts.slice(0, -1).join('-'),
      state: last,
    };
  }
  return { base: name, state: null };
};

StyleDictionary.registerFormat({
  name: 'ios/swift-color-base-catalog',
  format: ({ dictionary }) => {
    let output = fileHeader('BaseColorCatalogData.swift');
    output += '// MARK: - Base Color Catalog Data\n\n';
    output += '@_spi(MDSCatalog) public struct BaseColorCatalogEntry: @unchecked Sendable {\n';
    output += '    public let name: String\n';
    output += '    public let color: UIColor\n';
    output += '}\n\n';
    output += '@_spi(MDSCatalog) public enum BaseColorCatalogData {\n';

    const groups = new Map();
    for (const token of dictionary.allTokens) {
      const colorName = token.path[2];
      const shade = token.path[token.path.length - 1];
      if (!groups.has(colorName)) groups.set(colorName, []);
      groups.get(colorName).push(shade);
    }

    for (const [colorName, shades] of groups.entries()) {
      output += `    public static let ${colorName}: [BaseColorCatalogEntry] = [\n`;
      for (const shade of shades) {
        output += `        .init(name: "${colorName}.${shade}", color: BaseColor.${colorName}${shade}),\n`;
      }
      output += `    ]\n`;
    }

    output += '\n    public static let groups: [(paletteName: String, entries: [BaseColorCatalogEntry])] = [\n';
    for (const [colorName] of groups.entries()) {
      output += `        ("${capitalize(colorName)}", ${colorName}),\n`;
    }
    output += '    ]\n';
    output += '}\n';
    return output;
  }
});

StyleDictionary.registerFormat({
  name: 'ios/swift-typography-catalog',
  format: ({ dictionary }) => {
    let output = fileHeader('BaseTypographyCatalogData.swift');
    output += '// MARK: - Base Typography Catalog Data\n\n';
    output += '@_spi(MDSCatalog) public struct BaseTypographyCatalogEntry: Sendable {\n';
    output += '    public let name: String\n';
    output += '    public let value: CGFloat\n';
    output += '}\n\n';
    output += '@_spi(MDSCatalog) public enum BaseTypographyCatalogData {\n';

    const groups = new Map();
    for (const token of dictionary.allTokens) {
      const cat = token.path[2];
      if (!groups.has(cat)) groups.set(cat, []);
      groups.get(cat).push(token);
    }

    for (const [cat, tokens] of groups.entries()) {
      output += `    public static let ${cat}: [BaseTypographyCatalogEntry] = [\n`;
      for (const token of tokens) {
        const last = token.path[token.path.length - 1];
        const swiftKey = last === 'default' ? '`default`' : last;
        output += `        .init(name: "${last}", value: BaseTypography.${capitalize(cat)}.${swiftKey}),\n`;
      }
      output += `    ]\n`;
    }

    output += '\n    public static let groups: [(categoryName: String, entries: [BaseTypographyCatalogEntry])] = [\n';
    for (const [cat] of groups.entries()) {
      output += `        ("${cat}", ${cat}),\n`;
    }
    output += '    ]\n';
    output += '}\n';
    return output;
  }
});

StyleDictionary.registerFormat({
  name: 'ios/swift-color-semantic-datasource',
  format: ({ dictionary }) => {
    let output = '//\n//  ColorTokenDataSource.swift\n//  MDSStoryBook\n//\n';
    output += '//  Auto-generated by Style Dictionary. Do not edit manually.\n//\n\n';
    output += 'import MDS\n\n';
    output += 'enum ColorTokenDataSource {\n';
    output += '    static let sections: [ColorTokenSection] = [\n';

    const level1Map = new Map();
    for (const token of dictionary.allTokens) {
      const level1 = token.path[1];
      const level2 = token.path[2];
      const variant = token.path[3];
      if (!level1Map.has(level1)) level1Map.set(level1, new Map());
      const level2Map = level1Map.get(level1);
      if (!level2Map.has(level2)) level2Map.set(level2, { base: [], state: [] });

      const rawValue = token.original?.$value ?? token.original?.value ?? token.$value ?? token.value;
      const baseTokenPath = resolveBaseTokenPath(rawValue);
      const { base, state } = parseTokenName(variant);
      const level1Cap = capitalize(level1);
      const level2Cap = capitalize(level2);

      if (state) {
        const swiftRef = `SemanticColor.${level1Cap}.${level2Cap}.${toSwiftName(capitalize(base))}.${state}`;
        level2Map.get(level2).state.push({ displayName: `${base} · ${state}`, swiftRef, baseTokenPath });
      } else {
        const swiftRef = `SemanticColor.${level1Cap}.${level2Cap}.${toSwiftName(base)}`;
        level2Map.get(level2).base.push({ displayName: base, swiftRef, baseTokenPath });
      }
    }

    for (const [level1, level2Map] of level1Map.entries()) {
      const level1Cap = capitalize(level1);
      for (const [level2, { base, state }] of level2Map.entries()) {
        const level2Cap = capitalize(level2);
        output += `        ColorTokenSection(title: "${level1Cap} / ${level2Cap}", items: [\n`;
        for (const item of [...base, ...state]) {
          output += `            ColorTokenItem(name: "${item.displayName}", color: ${item.swiftRef}, baseTokenPath: "${item.baseTokenPath}"),\n`;
        }
        output += `        ]),\n`;
      }
    }

    output += '    ]\n}\n';
    return output;
  }
});

StyleDictionary.registerFormat({
  name: 'ios/swift-typography-semantic-datasource',
  format: ({ dictionary }) => {
    let output = '//\n//  TypographyTokenDataSource.swift\n//  MDSStoryBook\n//\n';
    output += '//  Auto-generated by Style Dictionary. Do not edit manually.\n//\n\n';
    output += 'import MDS\n\n';
    output += 'enum TypographyTokenDataSource {\n';
    output += '    static let sections: [TypographyTokenSection] = [\n';

    const groups = new Map();
    for (const token of dictionary.allTokens) {
      const cat = token.path[1];
      const num = token.path[2];
      if (!groups.has(cat)) groups.set(cat, []);
      groups.get(cat).push(num);
    }

    for (const [cat, nums] of groups.entries()) {
      output += `        .init(title: "${capitalize(cat)}", items: [\n`;
      for (const num of nums) {
        output += `            .init(name: "${cat}${num}", mdsFont: Typography.${cat}${num}),\n`;
      }
      output += `        ]),\n`;
    }

    output += '    ]\n}\n';
    return output;
  }
});

StyleDictionary.registerFormat({
  name: 'ios/swift-color-semantic',
  format: ({ dictionary }) => {
    let output = fileHeader('SemanticColor.swift');
    output += '// MARK: - Semantic Color\n\n';
    output += 'public enum SemanticColor {\n';

    const level1Groups = {};
    for (const token of dictionary.allTokens) {
      const level1 = token.path[1];
      if (!level1Groups[level1]) level1Groups[level1] = [];
      level1Groups[level1].push(token);
    }

    for (const [level1, tokens] of Object.entries(level1Groups)) {
      output += `\n    public enum ${capitalize(level1)} {\n`;

      const level2Groups = {};
      for (const token of tokens) {
        const level2 = token.path[2];
        if (!level2Groups[level2]) level2Groups[level2] = [];
        level2Groups[level2].push(token);
      }

      for (const [level2, innerTokens] of Object.entries(level2Groups)) {
        output += `\n        public enum ${capitalize(level2)} {\n`;

        // base 토큰이랑 state 토큰 분리
        const baseTokens = [];
        const stateGroups = {}; // { "default": { hover: token, pressed: token, ... } }

        for (const token of innerTokens) {
          const variant = token.path[3];
          const { base, state } = parseTokenName(variant);

          if (state) {
            if (!stateGroups[base]) stateGroups[base] = {};
            stateGroups[base][state] = token;
          } else {
            baseTokens.push(token);
          }
        }

        // base static let 먼저
        for (const token of baseTokens) {
          const variant = token.path[3];
          const name = toSwiftName(variant);
          const rawValue = token.original?.$value ?? token.original?.value ?? token.$value ?? token.value;
          const baseRef = resolveBaseColorReference(rawValue);
          if (!baseRef) throw new Error(`Cannot resolve base color reference for token "${token.path.join('.')}" (value: ${JSON.stringify(rawValue)})`);
          output += `            public static let ${name} = ${baseRef}\n`;
        }

        // state enum
        for (const [base, states] of Object.entries(stateGroups)) {
          const enumName = toSwiftName(capitalize(base));
          output += `\n            public enum ${enumName} {\n`;
          for (const [state, token] of Object.entries(states)) {
            const rawValue = token.original?.$value ?? token.original?.value ?? token.$value ?? token.value;
            const baseRef = resolveBaseColorReference(rawValue);
            if (!baseRef) throw new Error(`Cannot resolve base color reference for token "${token.path.join('.')}" (value: ${JSON.stringify(rawValue)})`);
            output += `                public static let ${state} = ${baseRef}\n`;
          }
          output += `            }\n`;
        }

        output += `        }\n`;
      }

      output += `    }\n`;
    }

    output += '}\n';
    return output;
  }
});

const sd = new StyleDictionary({
  usesDtcg: true,
  log: { warnings: 'disabled' },
  source: ['tokens/**/*.json'],
  platforms: {
    swift: {
      transforms: [],
      buildPath: 'MDS/Sources/Foundation/Base/',
      files: [
        {
          destination: 'BaseTypography.swift',
          format: 'ios/swift-typography',
          filter: (token) => token.path[0] === 'typography' && typeof (token.$value ?? token.value) !== 'object'
        },
        {
          destination: 'BaseSpacing.swift',
          format: 'ios/swift-spacing',
          filter: (token) => token.path[0] === 'spacing'
        },
        {
          destination: 'BaseColor.swift',
          format: 'ios/swift-color-base',
          filter: (token) => token.path[0] === 'color' && token.path[1] === 'base'
        },
	{
          destination: 'BaseRadius.swift',
          format: 'ios/swift-radius',
          filter: (token) => token.path[0] === 'radius'
        }
      ]
    },
    swiftCatalog: {
      transforms: [],
      buildPath: 'MDS/Sources/Catalog/',
      files: [
        {
          destination: 'BaseColorCatalogData.swift',
          format: 'ios/swift-color-base-catalog',
          filter: (token) => token.path[0] === 'color' && token.path[1] === 'base'
        },
        {
          destination: 'BaseTypographyCatalogData.swift',
          format: 'ios/swift-typography-catalog',
          filter: (token) => token.path[0] === 'typography' && typeof (token.$value ?? token.value) !== 'object'
        }
      ]
    },
    swiftStoryBook: {
      transforms: [],
      buildPath: 'MDSStoryBook/MDSStoryBook/Token/Color/',
      files: [
        {
          destination: 'ColorTokenDataSource.swift',
          format: 'ios/swift-color-semantic-datasource',
          filter: (token) => token.path[0] === 'color' && token.path[1] !== 'base'
        }
      ]
    },
    swiftStoryBookTypography: {
      transforms: [],
      buildPath: 'MDSStoryBook/MDSStoryBook/Token/Typography/',
      files: [
        {
          destination: 'TypographyTokenDataSource.swift',
          format: 'ios/swift-typography-semantic-datasource',
          filter: (token) => token.path[0] === 'typography' && typeof (token.$value ?? token.value) === 'object'
        }
      ]
    },
    swiftSemantic: {
      transforms: [],
      buildPath: 'MDS/Sources/Tokens/',
      files: [
        {
          destination: 'Typography.swift',
          format: 'ios/swift-typography-semantic',
          filter: (token) => token.path[0] === 'typography' && typeof (token.$value ?? token.value) === 'object'
        },
        {
          destination: 'SemanticColor.swift',
          format: 'ios/swift-color-semantic',
          filter: (token) => token.path[0] === 'color' && token.path[1] !== 'base'
        }
      ]
    },
  }
});

await sd.buildAllPlatforms();
console.log('Design tokens built successfully.');