@atlaskit/primitives 7.0.0 → 7.0.2

package/scripts/elevation-codegen-template.tsx

@@ -1,86 +1,74 @@
 import format from '@af/formatting/sync';
 import { CURRENT_SURFACE_CSS_VAR } from '@atlaskit/tokens';
-import {
-  legacyLightTokens as legacyTokens,
-  light as tokens,
-} from '@atlaskit/tokens/tokens-raw';
+import { legacyLightTokens as legacyTokens, light as tokens } from '@atlaskit/tokens/tokens-raw';
 
-import {
-  capitalize,
-  constructTokenFunctionCall,
-  type ShadowDefinition,
-} from './utils';
+import { capitalize, constructTokenFunctionCall, type ShadowDefinition } from './utils';
 
 type Token = {
-  token: string;
-  fallback: string | ShadowDefinition;
-  isDeprecated: boolean;
+	token: string;
+	fallback: string | ShadowDefinition;
+	isDeprecated: boolean;
 };
 
 // NB: Fallback CSS variables can be deleted when tokens are no longer behind a feature flag
 const tokenStyles = {
-  opacity: {
-    objectName: 'opacity',
-    prefix: 'opacity.',
-    cssProperty: 'opacity',
-    filterFn: <T extends Token>(t: T) =>
-      t.token.startsWith(tokenStyles.opacity.prefix),
-  },
-  shadow: {
-    objectName: 'shadow',
-    prefix: 'elevation.shadow.',
-    cssProperty: 'boxShadow',
-    filterFn: <T extends Token>(t: T) =>
-      t.token.startsWith(tokenStyles.shadow.prefix),
-  },
-  surface: {
-    objectName: 'surfaceColor',
-    prefix: 'elevation.surface.',
-    cssProperty: CURRENT_SURFACE_CSS_VAR,
-    filterFn: <T extends Token>(t: T) =>
-      t.token.startsWith(tokenStyles.surface.prefix),
-  },
+	opacity: {
+		objectName: 'opacity',
+		prefix: 'opacity.',
+		cssProperty: 'opacity',
+		filterFn: <T extends Token>(t: T) => t.token.startsWith(tokenStyles.opacity.prefix),
+	},
+	shadow: {
+		objectName: 'shadow',
+		prefix: 'elevation.shadow.',
+		cssProperty: 'boxShadow',
+		filterFn: <T extends Token>(t: T) => t.token.startsWith(tokenStyles.shadow.prefix),
+	},
+	surface: {
+		objectName: 'surfaceColor',
+		prefix: 'elevation.surface.',
+		cssProperty: CURRENT_SURFACE_CSS_VAR,
+		filterFn: <T extends Token>(t: T) => t.token.startsWith(tokenStyles.surface.prefix),
+	},
 } as const;
 
 const bothTokens = tokens.map((t, i) => [t, legacyTokens[i]]);
 
 const activeTokens = bothTokens
-  .filter(([t]) => t.attributes.state !== 'deleted')
-  .map(t => t)
-  .map(
-    ([t, legacy]): Token => ({
-      token: t.name,
-      fallback: legacy.value as string | ShadowDefinition,
-      isDeprecated: t.attributes.state === 'deprecated',
-    }),
-  );
+	.filter(([t]) => t.attributes.state !== 'deleted')
+	.map((t) => t)
+	.map(
+		([t, legacy]): Token => ({
+			token: t.name,
+			fallback: legacy.value as string | ShadowDefinition,
+			isDeprecated: t.attributes.state === 'deprecated',
+		}),
+	);
 
-export const createElevationStylesFromTemplate = (
-  property: keyof typeof tokenStyles,
-) => {
-  if (!tokenStyles[property]) {
-    throw new Error(`[codegen] Unknown option found "${property}"`);
-  }
+export const createElevationStylesFromTemplate = (property: keyof typeof tokenStyles) => {
+	if (!tokenStyles[property]) {
+		throw new Error(`[codegen] Unknown option found "${property}"`);
+	}
 
-  const { filterFn, objectName } = tokenStyles[property];
+	const { filterFn, objectName } = tokenStyles[property];
 
-  return (format(
-      `
+	return (
+		format(
+			`
 export const ${objectName}Map = {
   ${activeTokens
-    .filter(filterFn)
-    // @ts-ignore
-    .map(t => ({ ...t, token: t.token.replaceAll('.[default]', '') }))
-    .map(t => {
-      return `
+		.filter(filterFn)
+		// @ts-ignore
+		.map((t) => ({ ...t, token: t.token.replaceAll('.[default]', '') }))
+		.map((t) => {
+			return `
         ${t.isDeprecated ? '// @deprecated' : ''}
         '${t.token}': ${constructTokenFunctionCall(t.token, t.fallback)}
       `.trim();
-    })
-    .join(',\n\t')}
+		})
+		.join(',\n\t')}
 } as const;`,
-      'typescript',
-    ) +
-    `\nexport type ${capitalize(objectName)} = keyof typeof ${objectName}Map;\n`
-  );
+			'typescript',
+		) + `\nexport type ${capitalize(objectName)} = keyof typeof ${objectName}Map;\n`
+	);
 };

package/scripts/inverse-color-map-template.tsx

@@ -4,43 +4,38 @@ import { light as tokens } from '@atlaskit/tokens/tokens-raw';
 import { compose, isAccent, not, pick } from './utils';
 
 type Token = {
-  token: string;
-  fallback: string;
+	token: string;
+	fallback: string;
 };
 
 const activeTokens = tokens
-  .filter(
-    t =>
-      t.attributes.state !== 'deleted' && t.attributes.state !== 'deprecated',
-  )
-  .map(
-    (t): Token => ({
-      token: t.name,
-      fallback: t.value as string,
-    }),
-  )
-  .filter(compose(pick('token'), not(isAccent)))
-  .filter(t => t.token.includes('background'))
-  .filter(t => t.token.includes('bold'))
-  // @ts-ignore
-  .map(t => ({ ...t, token: t.token.replaceAll('.[default]', '') }));
+	.filter((t) => t.attributes.state !== 'deleted' && t.attributes.state !== 'deprecated')
+	.map(
+		(t): Token => ({
+			token: t.name,
+			fallback: t.value as string,
+		}),
+	)
+	.filter(compose(pick('token'), not(isAccent)))
+	.filter((t) => t.token.includes('background'))
+	.filter((t) => t.token.includes('bold'))
+	// @ts-ignore
+	.map((t) => ({ ...t, token: t.token.replaceAll('.[default]', '') }));
 
 export const createInverseColorMapTemplate = () => {
-  return format(
-    `
+	return format(
+		`
 export const inverseColorMap = {
   ${activeTokens
-    .map(t => {
-      // handle the default case eg color.border or color.text
-      const propName = t.token;
-      return `'${propName}': '${
-        propName.includes('warning')
-          ? 'color.text.warning.inverse'
-          : 'color.text.inverse'
-      }'`;
-    })
-    .join(',\n\t')}
+		.map((t) => {
+			// handle the default case eg color.border or color.text
+			const propName = t.token;
+			return `'${propName}': '${
+				propName.includes('warning') ? 'color.text.warning.inverse' : 'color.text.inverse'
+			}'`;
+		})
+		.join(',\n\t')}
 } as const;`,
-    'typescript',
-  );
+		'typescript',
+	);
 };

package/scripts/misc-codegen-template.tsx

@@ -2,14 +2,9 @@ import { readFileSync } from 'fs';
 import { join } from 'path';
 
 export const createStylesFromFileTemplate = (
-  property:
-    | 'border-color'
-    | 'border-radius'
-    | 'border-width'
-    | 'dimensions'
-    | 'layer',
+	property: 'border-color' | 'border-radius' | 'border-width' | 'dimensions' | 'layer',
 ) => {
-  const path = join(__dirname, './codegen-file-templates', `${property}.tsx`);
-  const source = readFileSync(path);
-  return source;
+	const path = join(__dirname, './codegen-file-templates', `${property}.tsx`);
+	const source = readFileSync(path);
+	return source;
 };

package/scripts/spacing-codegen-template.tsx

@@ -6,40 +6,34 @@ import { constructTokenFunctionCall } from './utils';
 const spacingTokenPrefix = 'space.';
 const negativeSuffix = '.negative';
 const positiveSpaceTokens = tokens
-  .filter(token => token.name.startsWith(spacingTokenPrefix))
-  .filter(token => !token.name.includes(negativeSuffix))
-  .map(t => ({
-    name: t.cleanName, // Need to use cleanName to avoid getting '[default]' in the token names
-    fallback: t.value,
-  }));
+	.filter((token) => token.name.startsWith(spacingTokenPrefix))
+	.filter((token) => !token.name.includes(negativeSuffix))
+	.map((t) => ({
+		name: t.cleanName, // Need to use cleanName to avoid getting '[default]' in the token names
+		fallback: t.value,
+	}));
 
 const negativeSpaceTokens = tokens
-  .filter(token => token.name.startsWith(spacingTokenPrefix))
-  .filter(token => token.name.includes(negativeSuffix))
-  .map(t => ({
-    name: t.cleanName,
-    fallback: t.value,
-  }));
+	.filter((token) => token.name.startsWith(spacingTokenPrefix))
+	.filter((token) => token.name.includes(negativeSuffix))
+	.map((t) => ({
+		name: t.cleanName,
+		fallback: t.value,
+	}));
 
 export const createSpacingStylesFromTemplate = () => {
-  const output = [
-    `export const positiveSpaceMap = {\n${positiveSpaceTokens
-      .map(
-        ({ name, fallback }) =>
-          `'${name}': ${constructTokenFunctionCall(name, fallback)},`,
-      )
-      .join('\n')}}`,
-    `export type Space = keyof typeof positiveSpaceMap;\n`,
-    `export const negativeSpaceMap = {\n${negativeSpaceTokens
-      .map(
-        ({ name, fallback }) =>
-          `'${name}': ${constructTokenFunctionCall(name, fallback)},`,
-      )
-      .join('\n')}}`,
-    `export type NegativeSpace = keyof typeof negativeSpaceMap;\n`,
-    `export const allSpaceMap = { ...positiveSpaceMap, ...negativeSpaceMap };\n`,
-    `export type AllSpace = keyof typeof allSpaceMap;\n`,
-  ].join('\n');
+	const output = [
+		`export const positiveSpaceMap = {\n${positiveSpaceTokens
+			.map(({ name, fallback }) => `'${name}': ${constructTokenFunctionCall(name, fallback)},`)
+			.join('\n')}}`,
+		`export type Space = keyof typeof positiveSpaceMap;\n`,
+		`export const negativeSpaceMap = {\n${negativeSpaceTokens
+			.map(({ name, fallback }) => `'${name}': ${constructTokenFunctionCall(name, fallback)},`)
+			.join('\n')}}`,
+		`export type NegativeSpace = keyof typeof negativeSpaceMap;\n`,
+		`export const allSpaceMap = { ...positiveSpaceMap, ...negativeSpaceMap };\n`,
+		`export type AllSpace = keyof typeof allSpaceMap;\n`,
+	].join('\n');
 
-  return format(output, 'typescript');
+	return format(output, 'typescript');
 };

package/scripts/typography-codegen-template.tsx

@@ -4,90 +4,84 @@ import { typographyAdg3 as tokens } from '@atlaskit/tokens/tokens-raw';
 import { capitalize, constructTokenFunctionCall } from './utils';
 
 type Token = {
-  name: string;
-  fallback: string;
+	name: string;
+	fallback: string;
 };
 
 const activeTokens: Token[] = tokens
-  .filter(t => t.attributes.state === 'active')
-  .map(t => ({
-    name: t.name,
-    fallback: t.value,
-  }));
+	.filter((t) => t.attributes.state === 'active')
+	.map((t) => ({
+		name: t.name,
+		fallback: t.value,
+	}));
 
 const typographyProperties = [
-  {
-    objectName: 'fontSize',
-    cssProperty: 'font',
-    prefix: 'font.body',
-    filterFn: <T extends Token>(t: T) => t.name.startsWith('font.body'),
-  },
-  {
-    objectName: 'fontWeight',
-    cssProperty: 'fontWeight',
-    prefix: 'font.weight.',
-    filterFn: <T extends Token>(t: T) => t.name.startsWith('font.weight'),
-  },
-  {
-    objectName: 'fontFamily',
-    cssProperty: 'fontFamily',
-    prefix: 'font.family.',
-    filterFn: <T extends Token>(t: T) => t.name.startsWith('font.family'),
-  },
+	{
+		objectName: 'fontSize',
+		cssProperty: 'font',
+		prefix: 'font.body',
+		filterFn: <T extends Token>(t: T) => t.name.startsWith('font.body'),
+	},
+	{
+		objectName: 'fontWeight',
+		cssProperty: 'fontWeight',
+		prefix: 'font.weight.',
+		filterFn: <T extends Token>(t: T) => t.name.startsWith('font.weight'),
+	},
+	{
+		objectName: 'fontFamily',
+		cssProperty: 'fontFamily',
+		prefix: 'font.family.',
+		filterFn: <T extends Token>(t: T) => t.name.startsWith('font.family'),
+	},
 ] as const;
 
 const bodySizeMap = {
-  'body.small': 'small',
-  'body.UNSAFE_small': 'UNSAFE_small',
-  body: 'medium',
-  'body.large': 'large',
+	'body.small': 'small',
+	'body.UNSAFE_small': 'UNSAFE_small',
+	body: 'medium',
+	'body.large': 'large',
 };
 
 const removeVerbosity = (name: string): string => {
-  const partialRemove = ['font.body'];
-  if (partialRemove.some(s => name.includes(s))) {
-    // @ts-expect-error Indexing bodySizeMap
-    return bodySizeMap[name.replace('font.', '')];
-  }
+	const partialRemove = ['font.body'];
+	if (partialRemove.some((s) => name.includes(s))) {
+		// @ts-expect-error Indexing bodySizeMap
+		return bodySizeMap[name.replace('font.', '')];
+	}
 
-  const fullRemove = ['font.weight'];
-  const removeIndex = fullRemove.findIndex(s => name.includes(s));
-  if (removeIndex > -1) {
-    return name.replace(`${fullRemove[removeIndex]}.`, '');
-  }
+	const fullRemove = ['font.weight'];
+	const removeIndex = fullRemove.findIndex((s) => name.includes(s));
+	if (removeIndex > -1) {
+		return name.replace(`${fullRemove[removeIndex]}.`, '');
+	}
 
-  return name;
+	return name;
 };
 
 export const createTypographyStylesFromTemplate = () => {
-  return typographyProperties
-    .map(typographyProperty => {
-      const { filterFn, objectName } = typographyProperty;
+	return typographyProperties
+		.map((typographyProperty) => {
+			const { filterFn, objectName } = typographyProperty;
 
-      return (
-        format(
-          `
+			return (
+				format(
+					`
 export const ${objectName}Map = {
 ${activeTokens
-  .filter(filterFn)
-  .map(t => ({ ...t, name: t.name.replace(/\.\[default\]/g, '') }))
-  .sort((a, b) => (a.name < b.name ? -1 : 1))
-  .map(token => {
-    return `
-      '${removeVerbosity(token.name)}': ${constructTokenFunctionCall(
-      token.name,
-      token.fallback,
-    )}
+	.filter(filterFn)
+	.map((t) => ({ ...t, name: t.name.replace(/\.\[default\]/g, '') }))
+	.sort((a, b) => (a.name < b.name ? -1 : 1))
+	.map((token) => {
+		return `
+      '${removeVerbosity(token.name)}': ${constructTokenFunctionCall(token.name, token.fallback)}
     `.trim();
-  })
-  .join(',\n\t')}
+	})
+	.join(',\n\t')}
 };`,
-          'typescript',
-        ) +
-        `\nexport type ${capitalize(
-          objectName,
-        )} = keyof typeof ${objectName}Map;\n`
-      );
-    })
-    .join('\n');
+					'typescript',
+				) + `\nexport type ${capitalize(objectName)} = keyof typeof ${objectName}Map;\n`
+			);
+		})
+		.join('\n');
 };

package/scripts/utils.tsx

@@ -1,69 +1,62 @@
 import type { CSSProperties } from 'react';
 
 export const tokenCall = (token: string, fallback: string | ShadowDefinition) =>
-  `token('${token}', '${fallback}')`;
+	`token('${token}', '${fallback}')`;
 
 export const tokenToStyle = (
-  prop: keyof CSSProperties,
-  token: string,
-  fallback: string | ShadowDefinition,
+	prop: keyof CSSProperties,
+	token: string,
+	fallback: string | ShadowDefinition,
 ) => {
-  if (Array.isArray(fallback)) {
-    fallback = constructShadow(fallback);
-  }
-  return `css({\n\t${prop}: ${tokenCall(token, fallback)}\n})`;
+	if (Array.isArray(fallback)) {
+		fallback = constructShadow(fallback);
+	}
+	return `css({\n\t${prop}: ${tokenCall(token, fallback)}\n})`;
 };
 
-export const constructTokenFunctionCall = (
-  token: string,
-  fallback: string | ShadowDefinition,
-) => {
-  if (Array.isArray(fallback)) {
-    fallback = constructShadow(fallback);
-  }
+export const constructTokenFunctionCall = (token: string, fallback: string | ShadowDefinition) => {
+	if (Array.isArray(fallback)) {
+		fallback = constructShadow(fallback);
+	}
 
-  return `token('${token}', '${fallback}')`;
+	return `token('${token}', '${fallback}')`;
 };
 
 export type ShadowDefinition = Array<{
-  radius: number;
-  offset: {
-    x: number;
-    y: number;
-  };
-  color: string;
-  opacity: number;
+	radius: number;
+	offset: {
+		x: number;
+		y: number;
+	};
+	color: string;
+	opacity: number;
 }>;
 
 const constructShadow = (shadowObject: ShadowDefinition) => {
-  return shadowObject
-    .map(
-      shadow =>
-        `${shadow.offset.x}px ${shadow.offset.y}px ${shadow.radius}px ${shadow.color}`,
-    )
-    .join(', ');
+	return shadowObject
+		.map((shadow) => `${shadow.offset.x}px ${shadow.offset.y}px ${shadow.radius}px ${shadow.color}`)
+		.join(', ');
 };
 
 type BooleanCallback<T> = (args: T) => boolean;
 
 export const compose =
-  (...fns: ((...any: any[]) => any)[]) =>
-  (x: any) =>
-    fns.reduce((res, fn) => fn(res), x);
+	(...fns: ((...any: any[]) => any)[]) =>
+	(x: any) =>
+		fns.reduce((res, fn) => fn(res), x);
 export const pick =
-  <T extends any>(key: keyof T) =>
-  (obj: T) =>
-    obj[key];
+	<T extends any>(key: keyof T) =>
+	(obj: T) =>
+		obj[key];
 export const isAccent = (str: string) => str.includes('accent');
 export const isPressed = (str: string) => str.includes('pressed');
 export const isHovered = (str: string) => str.includes('hovered');
 export const not =
-  <T extends any>(cb: BooleanCallback<T>) =>
-  (val: T) =>
-    !cb(val);
+	<T extends any>(cb: BooleanCallback<T>) =>
+	(val: T) =>
+		!cb(val);
 export const or =
-  <T extends any>(...fns: BooleanCallback<T>[]) =>
-  (val: T) =>
-    fns.some(fn => fn(val));
-export const capitalize = (str: string) =>
-  str.charAt(0).toUpperCase() + str.slice(1);
+	<T extends any>(...fns: BooleanCallback<T>[]) =>
+	(val: T) =>
+		fns.some((fn) => fn(val));
+export const capitalize = (str: string) => str.charAt(0).toUpperCase() + str.slice(1);