@primer/primitives 7.17.0-rc.61b28bca → 7.17.0-rc.9ef8a8c3

package/src/schemas/shadowTokenSchema.test.ts

@@ -1,163 +0,0 @@
-import {shadowValue, shadowToken} from './shadowToken'
-
-const tokenValue = {
-  color: '#000000',
-  alpha: 0.5,
-  offsetX: '4px',
-  offsetY: '4px',
-  blur: '2px',
-  spread: '2px',
-  inset: false,
-}
-
-describe('Schema: shadowValue', () => {
-  it('parses valid shadow value', () => {
-    expect(shadowValue.safeParse(tokenValue).success).toStrictEqual(true)
-    // without inset
-    expect(
-      shadowValue.safeParse({color: '#000000', alpha: 0.5, offsetX: '4px', offsetY: '4px', blur: '2px', spread: '2px'})
-        .success,
-    ).toStrictEqual(true)
-  })
-
-  it('fails on invalid properties', () => {
-    // additional element
-    expect(
-      shadowValue.safeParse({
-        ...tokenValue,
-        additional: 1000,
-      }).success,
-    ).toStrictEqual(false)
-  })
-
-  it('fails on missing properties', () => {
-    expect(
-      shadowValue.safeParse({
-        alpha: 0.5,
-        offsetX: '4px',
-        offsetY: '4px',
-        blur: '2px',
-        spread: '2px',
-      }).success,
-    ).toStrictEqual(false)
-    expect(
-      shadowValue.safeParse({
-        color: '#000000',
-        offsetX: '4px',
-        offsetY: '4px',
-        blur: '2px',
-        spread: '2px',
-      }).success,
-    ).toStrictEqual(false)
-    expect(
-      shadowValue.safeParse({
-        color: '#000000',
-        alpha: 0.5,
-        offsetY: '4px',
-        blur: '2px',
-        spread: '2px',
-      }).success,
-    ).toStrictEqual(false)
-    expect(
-      shadowValue.safeParse({
-        color: '#000000',
-        alpha: 0.5,
-        offsetY: '4px',
-        blur: '2px',
-        spread: '2px',
-      }).success,
-    ).toStrictEqual(false)
-    expect(
-      shadowValue.safeParse({
-        color: '#000000',
-        alpha: 0.5,
-        offsetX: '4px',
-        offsetY: '4px',
-        spread: '2px',
-      }).success,
-    ).toStrictEqual(false)
-    expect(
-      shadowValue.safeParse({
-        color: '#000000',
-        alpha: 0.5,
-        offsetX: '4px',
-        offsetY: '4px',
-        blur: '2px',
-      }).success,
-    ).toStrictEqual(false)
-  })
-})
-
-describe('Schema: shadowToken', () => {
-  const validToken = {
-    $value: tokenValue,
-    $type: 'shadow',
-    $description: 'a shadowToken token',
-  }
-
-  it('parses valid tokens', () => {
-    expect(shadowToken.safeParse(validToken).success).toStrictEqual(true)
-  })
-
-  it('fails on invalid properties', () => {
-    // additional element
-    expect(
-      shadowValue.safeParse({
-        ...validToken,
-        additional: 1000,
-      }).success,
-    ).toStrictEqual(false)
-    // missing value
-    expect(
-      shadowValue.safeParse({
-        $type: 'shadow',
-      }).success,
-    ).toStrictEqual(false)
-  })
-
-  it('fails on wrong type', () => {
-    expect(
-      shadowToken.safeParse({
-        ...validToken,
-        $type: 'motion',
-      }).success,
-    ).toStrictEqual(false)
-    // undefined
-    expect(
-      shadowToken.safeParse({
-        ...validToken,
-        $type: undefined,
-      }).success,
-    ).toStrictEqual(false)
-    // no type
-    expect(
-      shadowToken.safeParse({
-        $value: tokenValue,
-      }).success,
-    ).toStrictEqual(false)
-  })
-
-  it('fails on wrong value', () => {
-    // invalid string
-    expect(
-      shadowValue.safeParse({
-        ...validToken,
-        $value: 100,
-      }).success,
-    ).toStrictEqual(false)
-    // undefined
-    expect(
-      shadowValue.safeParse({
-        ...validToken,
-        $value: undefined,
-      }).success,
-    ).toStrictEqual(false)
-    // false
-    expect(
-      shadowValue.safeParse({
-        ...validToken,
-        $value: false,
-      }).success,
-    ).toStrictEqual(false)
-  })
-})

package/src/schemas/stringTokenSchema.test.ts

@@ -1,81 +0,0 @@
-import {stringToken} from './stringToken'
-
-describe('Schema: stringToken', () => {
-  const validToken = {
-    $value: 'a string',
-    $type: 'string',
-    $description: 'a string token',
-  }
-
-  it('parses valid string tokens', () => {
-    expect(stringToken.safeParse(validToken).success).toStrictEqual(true)
-  })
-
-  it('fails on invalid properties', () => {
-    // additional element
-    expect(
-      stringToken.safeParse({
-        ...validToken,
-        additional: 1000,
-      }).success,
-    ).toStrictEqual(false)
-    // missing value
-    expect(
-      stringToken.safeParse({
-        $type: 'string',
-      }).success,
-    ).toStrictEqual(false)
-    // missing type
-    expect(
-      stringToken.safeParse({
-        $value: 'a string',
-      }).success,
-    ).toStrictEqual(false)
-  })
-
-  it('fails on wrong type', () => {
-    expect(
-      stringToken.safeParse({
-        ...validToken,
-        $type: 'motion',
-      }).success,
-    ).toStrictEqual(false)
-    // undefined
-    expect(
-      stringToken.safeParse({
-        ...validToken,
-        $type: undefined,
-      }).success,
-    ).toStrictEqual(false)
-    // no type
-    expect(
-      stringToken.safeParse({
-        $value: 'a string',
-      }).success,
-    ).toStrictEqual(false)
-  })
-
-  it('fails on wrong value', () => {
-    // invalid string
-    expect(
-      stringToken.safeParse({
-        ...validToken,
-        $value: 100,
-      }).success,
-    ).toStrictEqual(false)
-    // undefined
-    expect(
-      stringToken.safeParse({
-        ...validToken,
-        $value: undefined,
-      }).success,
-    ).toStrictEqual(false)
-    // boolean value
-    expect(
-      stringToken.safeParse({
-        ...validToken,
-        $value: false,
-      }).success,
-    ).toStrictEqual(false)
-  })
-})

package/src/schemas/tokenNameSchema.test.ts

@@ -1,33 +0,0 @@
-import {tokenName} from './tokenName'
-
-describe('Schema: tokenName', () => {
-  it('parses valid token names', () => {
-    expect(tokenName.safeParse('tokenname').success).toStrictEqual(true)
-    expect(tokenName.safeParse('tokenName').success).toStrictEqual(true)
-    expect(tokenName.safeParse('token-Name').success).toStrictEqual(true)
-    expect(tokenName.safeParse('token-name').success).toStrictEqual(true)
-    expect(tokenName.safeParse('10-name').success).toStrictEqual(true)
-    expect(tokenName.safeParse('token-10').success).toStrictEqual(true)
-    expect(tokenName.safeParse('@').success).toStrictEqual(true)
-    expect(tokenName.safeParse('900').success).toStrictEqual(true)
-  })
-
-  it('fails on invalid token names', () => {
-    expect(tokenName.safeParse('@Token').success).toStrictEqual(false)
-    expect(tokenName.safeParse('#token').success).toStrictEqual(false)
-    expect(tokenName.safeParse('token&name').success).toStrictEqual(false)
-    expect(tokenName.safeParse('token+name').success).toStrictEqual(false)
-    expect(tokenName.safeParse('token/name').success).toStrictEqual(false)
-    expect(tokenName.safeParse('Token Name').success).toStrictEqual(false)
-    expect(tokenName.safeParse('token Name').success).toStrictEqual(false)
-    expect(tokenName.safeParse('Token-Name').success).toStrictEqual(false)
-    expect(tokenName.safeParse('Token_Name').success).toStrictEqual(false)
-    expect(tokenName.safeParse('').success).toStrictEqual(false)
-  })
-
-  it('fails on non-string', () => {
-    expect(tokenName.safeParse(undefined).success).toStrictEqual(false)
-    expect(tokenName.safeParse(false).success).toStrictEqual(false)
-    expect(tokenName.safeParse(10).success).toStrictEqual(false)
-  })
-})

package/src/schemas/typographyTokenSchema.test.ts

@@ -1,58 +0,0 @@
-import {typographyToken, typographyValue} from './typographyToken'
-
-describe('Schema: typographyToken', () => {
-  const validValue = {
-    fontSize: '16px',
-    lineHeight: '24px',
-    fontWeight: 600,
-    fontFamily: 'Helvetica',
-  }
-
-  const validToken = {
-    $value: validValue,
-    $type: 'typography',
-    $description: 'a typography token',
-  }
-
-  it('parses valid tokens', () => {
-    expect(typographyToken.safeParse(validToken).success).toStrictEqual(true)
-  })
-
-  it('parses valid value', () => {
-    expect(typographyValue.safeParse(validValue).success).toStrictEqual(true)
-    // lineHeight is optional
-    expect(typographyValue.safeParse({...validValue, lineHeight: undefined}).success).toStrictEqual(true)
-  })
-
-  it('it fails on missing property', () => {
-    expect(typographyValue.safeParse({...validValue, fontSize: undefined}).success).toStrictEqual(false)
-    expect(typographyValue.safeParse({...validValue, fontWeight: undefined}).success).toStrictEqual(false)
-    expect(typographyValue.safeParse({...validValue, fontFamily: undefined}).success).toStrictEqual(false)
-  })
-
-  it('it fails on invalid fontSize values', () => {
-    expect(typographyValue.safeParse({...validValue, fontSize: '100%'}).success).toStrictEqual(false)
-    expect(typographyValue.safeParse({...validValue, fontSize: '100'}).success).toStrictEqual(false)
-    expect(typographyValue.safeParse({...validValue, fontSize: ''}).success).toStrictEqual(false)
-    expect(typographyValue.safeParse({...validValue, fontSize: 10}).success).toStrictEqual(false)
-  })
-
-  it('it fails on invalid lineHeight values', () => {
-    expect(typographyValue.safeParse({...validValue, lineHeight: '100%'}).success).toStrictEqual(false)
-    expect(typographyValue.safeParse({...validValue, lineHeight: '100'}).success).toStrictEqual(false)
-    expect(typographyValue.safeParse({...validValue, lineHeight: ''}).success).toStrictEqual(false)
-    expect(typographyValue.safeParse({...validValue, lineHeight: 10}).success).toStrictEqual(false)
-  })
-
-  it('it fails on invalid fontWeight values', () => {
-    expect(typographyValue.safeParse({...validValue, fontWeight: '600'}).success).toStrictEqual(false)
-    expect(typographyValue.safeParse({...validValue, fontWeight: 'bold'}).success).toStrictEqual(false)
-    expect(typographyValue.safeParse({...validValue, fontWeight: ''}).success).toStrictEqual(false)
-    expect(typographyValue.safeParse({...validValue, fontWeight: 10}).success).toStrictEqual(false)
-  })
-
-  it('it fails on invalid fontFamily values', () => {
-    expect(typographyValue.safeParse({...validValue, fontFamily: ''}).success).toStrictEqual(false)
-    expect(typographyValue.safeParse({...validValue, fontFamily: 10}).success).toStrictEqual(false)
-  })
-})

package/src/schemas/validTokenTypeSchema.test.ts

@@ -1,32 +0,0 @@
-import {validateType} from './validTokenType'
-
-const token = (type: string) => ({
-  tokenName: {$value: 1, $type: type},
-})
-
-describe('Schema: validateType', () => {
-  it('parses valid token types', () => {
-    expect(validateType.safeParse(token('color')).success).toStrictEqual(true)
-    expect(validateType.safeParse(token('typography')).success).toStrictEqual(true)
-    expect(validateType.safeParse(token('dimension')).success).toStrictEqual(true)
-    expect(validateType.safeParse(token('duration')).success).toStrictEqual(true)
-    expect(validateType.safeParse(token('border')).success).toStrictEqual(true)
-    expect(validateType.safeParse(token('shadow')).success).toStrictEqual(true)
-    expect(validateType.safeParse(token('fontFamily')).success).toStrictEqual(true)
-    expect(validateType.safeParse(token('fontWeight')).success).toStrictEqual(true)
-    expect(validateType.safeParse(token('number')).success).toStrictEqual(true)
-    expect(validateType.safeParse(token('string')).success).toStrictEqual(true)
-    expect(validateType.safeParse(token('custom-viewportRange')).success).toStrictEqual(true)
-  })
-
-  it('fails on invalid token types', () => {
-    expect(validateType.safeParse(token('invalid')).success).toStrictEqual(false)
-    expect(validateType.safeParse(token('')).success).toStrictEqual(false)
-    // @ts-expect-error: needed for test case
-    expect(validateType.safeParse(token(0)).success).toStrictEqual(false)
-    // @ts-expect-error: needed for test case
-    expect(validateType.safeParse(token(undefined)).success).toStrictEqual(false)
-    // @ts-expect-error: needed for test case
-    expect(validateType.safeParse(token(false)).success).toStrictEqual(false)
-  })
-})

package/src/schemas/viewportRangeTokenSchema.test.ts

@@ -1,59 +0,0 @@
-import {viewportRangeToken} from './viewportRangeToken'
-
-describe('Schema: viewportRangeToken', () => {
-  const validToken = {
-    $value: '(max-width: calc({<namespace>.breakpoint.medium} - 0.02px))',
-    $type: 'custom-viewportRange',
-    $description: 'a number token',
-  }
-
-  it('parses valid number tokens', () => {
-    expect(viewportRangeToken.safeParse(validToken).success).toStrictEqual(true)
-  })
-
-  it('fails on invalid properties', () => {
-    // additional element
-    expect(
-      viewportRangeToken.safeParse({
-        ...validToken,
-        additional: 1000,
-      }).success,
-    ).toStrictEqual(false)
-    // invalid value
-    expect(
-      viewportRangeToken.safeParse({
-        ...validToken,
-        value: 1000,
-      }).success,
-    ).toStrictEqual(false)
-    // missing value
-    expect(
-      viewportRangeToken.safeParse({
-        $type: 'number',
-      }).success,
-    ).toStrictEqual(false)
-  })
-
-  it('fails on wrong type', () => {
-    // invalid string
-    expect(
-      viewportRangeToken.safeParse({
-        ...validToken,
-        $type: 'motion',
-      }).success,
-    ).toStrictEqual(false)
-    // undefined
-    expect(
-      viewportRangeToken.safeParse({
-        ...validToken,
-        $type: undefined,
-      }).success,
-    ).toStrictEqual(false)
-    // no type
-    expect(
-      viewportRangeToken.safeParse({
-        $value: '(max-width: calc({<namespace>.breakpoint.medium} - 0.02px))',
-      }).success,
-    ).toStrictEqual(false)
-  })
-})

package/src/transformers/borderToCss.test.ts

@@ -1,58 +0,0 @@
-import {getMockToken} from '../test-utilities'
-import {borderToCss} from './borderToCss'
-
-describe('Transformer: borderToCss', () => {
-  it('transforms `border` token to css border string', () => {
-    const input = getMockToken({
-      value: {
-        color: '#000000',
-        style: 'solid',
-        width: '1px',
-      },
-    })
-
-    const expectedOutput = '#000000 solid 1px'
-    expect(borderToCss.transformer(input, {})).toStrictEqual(expectedOutput)
-  })
-
-  it('throws an error when required values are missing', () => {
-    // missing blur
-    expect(() =>
-      borderToCss.transformer(
-        getMockToken({
-          value: {
-            color: '#000000',
-            style: 'solid',
-          },
-        }),
-        {},
-      ),
-    ).toThrowError()
-
-    // missing spread
-    expect(() =>
-      borderToCss.transformer(
-        getMockToken({
-          value: {
-            color: '#000000',
-            width: '1px',
-          },
-        }),
-        {},
-      ),
-    ).toThrowError()
-
-    // missing offsets
-    expect(() =>
-      borderToCss.transformer(
-        getMockToken({
-          value: {
-            style: 'solid',
-            width: '1px',
-          },
-        }),
-        {},
-      ),
-    ).toThrowError()
-  })
-})

package/src/transformers/colorToHex.test.ts

@@ -1,27 +0,0 @@
-import {getMockToken} from '../test-utilities'
-import {colorToHex} from './colorToHex'
-
-describe('Transformer: colorToHex', () => {
-  it('transforms `hex3`, `hex6`, and `hex8` tokens to hex value', () => {
-    const input = [getMockToken({value: '#123'}), getMockToken({value: '#343434'}), getMockToken({value: '#34343466'})]
-    const expectedOutput = ['#112233', '#343434', '#34343466']
-    expect(input.map(item => colorToHex.transformer(item, {}))).toStrictEqual(expectedOutput)
-  })
-
-  it('transforms `rgb` and `rgba` to hex value', () => {
-    const input = [getMockToken({value: 'rgb(100,200,255)'}), getMockToken({value: 'rgba(100,200,255, .4)'})]
-    const expectedOutput = ['#64c8ff', '#64c8ff66']
-    expect(input.map(item => colorToHex.transformer(item, {}))).toStrictEqual(expectedOutput)
-  })
-
-  it('transforms `color` tokens and ignores alpha value', () => {
-    expect(
-      [
-        getMockToken({value: '#343434', alpha: 0.4}),
-        getMockToken({value: '#34343466', alpha: 0.9}),
-        getMockToken({value: 'rgb(100,200,255)', alpha: 0.4}),
-        getMockToken({value: 'rgba(100,200,255,0.8)', alpha: 0.4}),
-      ].map(item => colorToHex.transformer(item, {})),
-    ).toStrictEqual(['#343434', '#34343466', '#64c8ff', '#64c8ffcc'])
-  })
-})

package/src/transformers/colorToHexAlpha.test.ts

@@ -1,30 +0,0 @@
-import {getMockToken} from '../test-utilities'
-import {colorToHexAlpha} from './colorToHexAlpha'
-
-describe('Transformer: colorToHexAlpha', () => {
-  it('transforms hex3, hex6 `color` tokens with alpha value', () => {
-    const input = [getMockToken({value: '#123', alpha: 0.2}), getMockToken({value: '#343434', alpha: 0.4})]
-    const expectedOutput = ['#11223333', '#34343466']
-    expect(input.map(item => colorToHexAlpha.transformer(item, {}))).toStrictEqual(expectedOutput)
-  })
-
-  it('transforms hex8 `color` tokens with alpha value, ignoring the initial alpha from the hex8', () => {
-    const input = getMockToken({value: '#34343466', alpha: 0.6})
-    expect(colorToHexAlpha.transformer(input, {})).toStrictEqual('#34343499')
-  })
-
-  it('transforms rgb `color` tokens with alpha value', () => {
-    const input = getMockToken({value: 'rgb(100,200,255)', alpha: 0.6})
-    expect(colorToHexAlpha.transformer(input, {})).toStrictEqual('#64c8ff99')
-  })
-
-  it('transforms rgba `color` tokens with alpha value, ignoring the initial alpha from the hex8', () => {
-    const input = getMockToken({value: 'rgba(100,200,255, 0.2)', alpha: 0.6})
-    expect(colorToHexAlpha.transformer(input, {})).toStrictEqual('#64c8ff99')
-  })
-
-  it('transforms rgba `color` tokens with alpha null, ignoring alpha', () => {
-    const input = getMockToken({value: 'rgba(100,200,255, 0.5)', alpha: null})
-    expect(colorToHexAlpha.transformer(input, {})).toStrictEqual('#64c8ff80')
-  })
-})

package/src/transformers/colorToHexMix.test.ts

@@ -1,83 +0,0 @@
-import {getMockToken} from '../test-utilities'
-import {colorToHexMix} from './colorToHexMix'
-
-describe('Transformer: colorToHexMix', () => {
-  it('transforms hex3, hex6 `color` tokens with mix', () => {
-    const input = [
-      getMockToken({
-        value: '#567',
-        mix: {
-          color: '#000',
-          weight: 0.5,
-        },
-      }),
-      getMockToken({
-        value: '#556677',
-        mix: {
-          color: '#000',
-          weight: 0.5,
-        },
-      }),
-    ]
-    const expectedOutput = ['#2b333c', '#2b333c']
-    expect(input.map(item => colorToHexMix.transformer(item, {}))).toStrictEqual(expectedOutput)
-  })
-
-  it('transforms color with mix but ignores alpha property of token', () => {
-    const input = [
-      getMockToken({
-        value: '#556677',
-        alpha: 0.4,
-        mix: {
-          color: '#000',
-          weight: 0.2,
-        },
-      }),
-    ]
-    const expectedOutput = ['#44525f']
-    expect(input.map(item => colorToHexMix.transformer(item, {}))).toStrictEqual(expectedOutput)
-  })
-
-  it('transforms color with mix and merges alpha from hex8', () => {
-    const input = [
-      getMockToken({
-        value: '#55667755',
-        mix: {
-          color: '#000',
-          weight: 0.2,
-        },
-      }),
-      getMockToken({
-        value: '#55667755',
-        mix: {
-          color: '#00000022',
-          weight: 0.2,
-        },
-      }),
-    ]
-    const expectedOutput = ['#51617177', '#3e4a574b']
-    expect(input.map(item => colorToHexMix.transformer(item, {}))).toStrictEqual(expectedOutput)
-  })
-
-  it('ignore mix if undefined or weight or color is undefined', () => {
-    const input = [
-      getMockToken({
-        value: '#556677',
-      }),
-      getMockToken({
-        value: '#556677',
-        mix: {
-          weight: 0.2,
-        },
-      }),
-      getMockToken({
-        value: '#556677',
-        mix: {
-          color: '#000000',
-        },
-      }),
-    ]
-    const expectedOutput = ['#556677', '#556677', '#556677']
-    expect(input.map(item => colorToHexMix.transformer(item, {}))).toStrictEqual(expectedOutput)
-  })
-})

package/src/transformers/colorToRgbAlpha.test.ts

@@ -1,33 +0,0 @@
-import {getMockToken} from '../test-utilities'
-import {colorToRgbAlpha} from './colorToRgbAlpha'
-
-describe('Transformer: colorToRgbAlpha', () => {
-  it('transforms hex3, hex6 `color` tokens with alpha value', () => {
-    const input = [getMockToken({value: '#123', alpha: 0.2}), getMockToken({value: '#343434', alpha: 0.4})]
-    const expectedOutput = ['rgba(17, 34, 51, 0.2)', 'rgba(52, 52, 52, 0.4)']
-    expect(input.map(item => colorToRgbAlpha.transformer(item, {}))).toStrictEqual(expectedOutput)
-  })
-
-  it('transforms hex8 `color` tokens with alpha value, ignoring the initial alpha from the hex8', () => {
-    const input = getMockToken({value: '#34343466', alpha: 0.6})
-    const expectedOutput = 'rgba(52, 52, 52, 0.6)'
-    expect(colorToRgbAlpha.transformer(input, {})).toStrictEqual(expectedOutput)
-  })
-
-  it('transforms rgb `color` tokens with alpha value', () => {
-    const input = getMockToken({value: 'rgb(100,200,255)', alpha: 0.6})
-    const expectedOutput = 'rgba(100, 200, 255, 0.6)'
-    expect(colorToRgbAlpha.transformer(input, {})).toStrictEqual(expectedOutput)
-  })
-
-  it('transforms rgba `color` tokens with alpha value, ignoring the initial alpha from the hex8', () => {
-    const input = getMockToken({value: 'rgba(100,200,255, 0.2)', alpha: 0.6})
-    const expectedOutput = 'rgba(100, 200, 255, 0.6)'
-    expect(colorToRgbAlpha.transformer(input, {})).toStrictEqual(expectedOutput)
-  })
-  it('transforms rgba `color` tokens with alpha null, ignoring alpha', () => {
-    const input = getMockToken({value: 'rgba(100,200,255, 0.5)', alpha: null})
-    const expectedOutput = 'rgba(100,200,255, 0.5)'
-    expect(colorToRgbAlpha.transformer(input, {})).toStrictEqual(expectedOutput)
-  })
-})