@mindvalley/design-system 3.4.2 → 4.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mindvalley/design-system",
-  "version": "3.4.2",
+  "version": "4.0.0",
   "description": "Resources, components, design guidelines and tooling for Mindvalley's design system",
   "keywords": [
     "design-system",
@@ -42,6 +42,10 @@
       "types": "./dist/tailwind/*.d.ts",
       "default": "./dist/tailwind/*.js"
     },
+    "./typography/*": {
+      "types": "./dist/typography/*.d.ts",
+      "default": "./dist/typography/*"
+    },
     "./dist/*": "./dist/*"
   },
   "peerDependencies": {
@@ -65,12 +69,21 @@
     "test:watch": "jest --watch",
     "watch": "webpack --mode development --watch",
     "type-check": "tsc --noEmit",
-    "build:types": "tsc --emitDeclarationOnly"
+    "build:types": "tsc --emitDeclarationOnly -p tsconfig.build.json",
+    "format": "biome format --write ./src",
+    "format:check": "biome format ./src",
+    "lint": "biome lint ./src",
+    "lint:fix": "biome lint --write ./src",
+    "check": "biome check --write ./src",
+    "check:ci": "biome ci ./src",
+    "check:staged": "biome check --staged",
+    "check:changed": "biome check --changed"
   },
   "devDependencies": {
     "@babel/core": "^7.22.9",
     "@babel/preset-env": "^7.22.9",
     "@babel/preset-typescript": "^7.27.1",
+    "@biomejs/biome": "^2.3.4",
     "@commitlint/cli": "^17.7.1",
     "@commitlint/config-conventional": "^17.7.0",
     "@figma-export/cli": "^6.2.3",
@@ -81,6 +94,7 @@
     "@types/jest": "^30.0.0",
     "@types/lodash.kebabcase": "^4.1.9",
     "@types/node": "^24.1.0",
+    "@types/svg-sprite": "^0.0.39",
     "@types/tailwindcss": "^3.0.11",
     "@types/tinycolor2": "^1.4.6",
     "babel-jest": "^30.1.2",
@@ -100,7 +114,7 @@
     "semantic-release": "^25.0.1",
     "semantic-release-github-pullrequest": "github:njausteve/semantic-release-github-pullrequest",
     "semantic-release-unsquash": "^0.1.2",
-    "style-dictionary": "^3.8.0",
+    "style-dictionary": "^5.0.4",
     "svg-sprite": "^2.0.2",
     "tailwindcss": "^3.4.17",
     "tinycolor2": "^1.6.0",

package/docs/token-validation.md

@@ -1,298 +0,0 @@
-# Design Token Validation with Zod
-
-This document describes the **internal** token validation system implemented using Zod for runtime validation and TypeScript type inference. These utilities are used during the build process and are not exported to package consumers.
-
-## Overview
-
-The Mindvalley Design System uses Supernova to manage design tokens. These tokens are automatically pushed to the repository in JSON format. To ensure type safety and catch issues early, we've implemented a validation system using Zod that:
-
-- Validates token structure at build time
-- Provides TypeScript types derived from the same schemas
-- Offers clear error messages when tokens don't match expected structure
-- Handles the complex, nested structures that Supernova generates
-
-## Architecture
-
-### Core Files
-
-- `src/types/token-schemas.ts` - Zod schemas defining token structure
-- `src/types/token-validation.ts` - Validation utilities and functions
-- `src/types/index.d.ts` - TypeScript type exports
-
-### Token Structure
-
-Supernova generates tokens with varying levels of nesting:
-
-```json
-{
-  "color": {
-    "primary": {
-      "500": {
-        "value": "#ff0000ff",
-        "type": "color"
-      }
-    },
-    "black": {
-      "value": "#000000ff",
-      "type": "color"
-    }
-  }
-}
-```
-
-## For Package Consumers
-
-If you're using the `@mindvalley/design-system` npm package, the validation happens at build time and you receive:
-
-- Type-safe `ColorTokens` interface for the colors object
-- `TypographyToken` and `TypographySet` types from the Tailwind plugin
-- Pre-validated, transformed tokens ready for use
-
-The examples below are for **contributors and maintainers** working on the design system itself.
-
-## Usage Guide (Internal Development)
-
-### 1. Basic Validation
-
-```typescript
-import { validateTokenFile } from './types/token-validation';
-
-const result = validateTokenFile('src/tokens/brands/mindvalley/colors.json');
-if (result.success) {
-  console.log('Tokens are valid!', result.data);
-} else {
-  console.error('Validation failed:', result.errors);
-}
-```
-
-### 2. Type-Safe Token Access
-
-```typescript
-import { ColorToken } from './types/token-schemas';
-import { validateColorToken } from './types/token-validation';
-
-// Runtime validation with automatic type inference
-try {
-  const token: ColorToken = validateColorToken(unknownData);
-  // TypeScript knows token.value is a hex string
-  console.log(token.value);
-} catch (error) {
-  console.error('Invalid color token:', error);
-}
-```
-
-### 3. Batch Validation
-
-```typescript
-import { validateAllTokens, getValidationSummary } from './types/token-validation';
-
-// Validate all tokens in the project
-const summary = getValidationSummary('./src/tokens');
-console.log(`Valid: ${summary.valid}, Invalid: ${summary.invalid}`);
-
-if (summary.invalid > 0) {
-  summary.errors.forEach(error => {
-    console.error(`❌ ${error.file}:`, error.errors);
-  });
-}
-```
-
-### 4. CI/CD Integration
-
-Add to your `package.json`:
-
-```json
-{
-  "scripts": {
-    "validate-tokens": "ts-node src/scripts/validate-tokens.ts",
-    "prebuild": "npm run validate-tokens"
-  }
-}
-```
-
-Create `src/scripts/validate-tokens.ts`:
-
-```typescript
-import { getValidationSummary } from '../types/token-validation';
-
-const summary = getValidationSummary('./src/tokens');
-
-if (summary.invalid > 0) {
-  console.error('Token validation failed!');
-  summary.errors.forEach(error => {
-    console.error(`❌ ${error.file}:`, error.errors.join('\n  '));
-  });
-  process.exit(1);
-}
-
-console.log('✅ All tokens validated successfully!');
-```
-
-### 5. Type Guards
-
-```typescript
-import { isColorToken, isTypographyToken } from './types/token-validation';
-
-function processToken(token: unknown) {
-  if (isColorToken(token)) {
-    // TypeScript knows this is a ColorToken
-    return createColorVariable(token.value);
-  } else if (isTypographyToken(token)) {
-    // TypeScript knows this is a TypographyToken
-    return createTypographyStyles(token.value);
-  }
-}
-```
-
-### 6. Error Handling
-
-```typescript
-import { safeValidate, ColorFileSchema, formatZodError } from './types/token-validation';
-
-function handleSupernovaWebhook(payload: unknown) {
-  const result = safeValidate(ColorFileSchema, payload);
-  
-  if (!result.success) {
-    const errors = formatZodError(result.errors);
-    
-    // Log structured errors
-    console.error('Token validation failed:', {
-      errors,
-      timestamp: new Date().toISOString(),
-      source: 'supernova-webhook'
-    });
-    
-    // Alert team
-    notifySlack({
-      channel: '#design-system',
-      message: `Token validation failed: ${errors.join(', ')}`
-    });
-    
-    return;
-  }
-  
-  // Process valid tokens
-  updateTokens(result.data);
-}
-```
-
-## Testing
-
-### Unit Tests
-
-```typescript
-import { ColorTokenSchema } from './types/token-schemas';
-
-describe('Color Token Validation', () => {
-  it('should accept valid color tokens', () => {
-    const validToken = {
-      value: '#ff0000ff',
-      type: 'color'
-    };
-    
-    expect(() => ColorTokenSchema.parse(validToken)).not.toThrow();
-  });
-  
-  it('should reject invalid hex values', () => {
-    const invalidToken = {
-      value: 'not-a-color',
-      type: 'color'
-    };
-    
-    expect(() => ColorTokenSchema.parse(invalidToken)).toThrow();
-  });
-});
-```
-
-### Integration Tests
-
-```typescript
-import { validateAllTokens } from './types/token-validation';
-
-describe('Token File Validation', () => {
-  it('should validate all production tokens', () => {
-    const results = validateAllTokens('./src/tokens');
-    const failures = results.filter(r => !r.success);
-    
-    expect(failures).toHaveLength(0);
-  });
-});
-```
-
-## Schema Flexibility
-
-The schemas are designed to handle Supernova's complex output:
-
-- **Nested structures**: Tokens can be nested at varying levels
-- **Optional properties**: Some tokens have optional fields like `comment`
-- **Mixed structures**: Different brands may have slightly different structures
-- **Type variations**: Properties like `textCase` can be strings or objects
-
-## Extending the System
-
-### Adding New Token Types
-
-1. Add the schema in `token-schemas.ts`:
-
-   ```typescript
-   export const NewTokenSchema = z.object({
-     value: z.string(),
-     type: z.literal('newtype'),
-     metadata: z.object({
-       // Define metadata structure
-     }).optional()
-   });
-   ```
-
-2. Add to file schema mapping in `token-validation.ts`:
-
-```typescript
-const FILE_SCHEMA_MAP = {
-  // existing mappings...
-  'newtokens.json': NewTokenFileSchema
-};
-```
-
-### Custom Validation Rules
-
-```typescript
-const CustomColorSchema = ColorTokenSchema.refine(
-  (token) => token.value.length === 9, // RGBA with alpha
-  { message: 'Colors must include alpha channel' }
-);
-```
-
-## Troubleshooting
-
-### Common Issues
-
-1. **"Invalid input" errors**: Check if Supernova changed the token structure
-2. **Missing properties**: Some tokens may have optional fields
-3. **Type mismatches**: Use the flexible schemas that accept `z.any()` for complex nested structures
-
-### Debugging
-
-```typescript
-import { validateTokenFile, getErrorReport } from './types/token-validation';
-
-const result = validateTokenFile('path/to/tokens.json');
-if (!result.success) {
-  // Get detailed error report
-  console.log(getErrorReport(result.errors));
-}
-```
-
-## Best Practices
-
-1. **Run validation in CI/CD**: Catch issues before they reach production
-2. **Validate after Supernova updates**: Add webhook handlers that validate incoming tokens
-3. **Use type guards**: Leverage TypeScript's type narrowing with `isColorToken()` etc.
-4. **Keep schemas updated**: When Supernova changes output format, update schemas accordingly
-5. **Test with real data**: Always test schemas against actual token files
-
-## Future Improvements
-
-- Add schema versioning to handle Supernova format changes
-- Create a CLI tool for token validation
-- Add visual regression tests for token changes
-- Implement token transformation pipelines with validation