@atlaskit/ds-explorations 3.5.2 → 4.0.1

package/scripts/interaction-codegen.tsx

@@ -1,100 +1,87 @@
 import format from '@af/formatting/sync';
 import { light as tokens } from '@atlaskit/tokens/tokens-raw';
 
-import {
-  capitalize,
-  compose,
-  isAccent,
-  isHovered,
-  isPressed,
-  or,
-  pick,
-} from './utils';
+import { capitalize, compose, isAccent, isHovered, isPressed, or, pick } from './utils';
 
 type Token = {
-  token: string;
-  fallback: string;
+	token: string;
+	fallback: string;
 };
 
 // NB: Fallback CSS variables can be deleted when tokens are no longer behind a feature flag
 const colors = {
-  text: {
-    prefix: 'color.text.',
-    cssProperty: 'color',
-    filterFn: <T extends Token>(t: T) => t.token.startsWith(colors.text.prefix),
-  },
-  background: {
-    prefix: 'color.background.',
-    cssProperty: 'backgroundColor',
-    filterFn: <T extends Token>(t: T) =>
-      t.token.startsWith(colors.background.prefix) ||
-      t.token.startsWith('elevation.surface') ||
-      t.token.startsWith('color.blanket'),
-  },
-  border: {
-    prefix: 'color.border.',
-    cssProperty: 'borderColor',
-    filterFn: <T extends Token>(t: T) =>
-      t.token.startsWith(colors.border.prefix),
-  },
+	text: {
+		prefix: 'color.text.',
+		cssProperty: 'color',
+		filterFn: <T extends Token>(t: T) => t.token.startsWith(colors.text.prefix),
+	},
+	background: {
+		prefix: 'color.background.',
+		cssProperty: 'backgroundColor',
+		filterFn: <T extends Token>(t: T) =>
+			t.token.startsWith(colors.background.prefix) ||
+			t.token.startsWith('elevation.surface') ||
+			t.token.startsWith('color.blanket'),
+	},
+	border: {
+		prefix: 'color.border.',
+		cssProperty: 'borderColor',
+		filterFn: <T extends Token>(t: T) => t.token.startsWith(colors.border.prefix),
+	},
 } as const;
 
 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'), or(isAccent, isPressed, isHovered)));
+	.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'), or(isAccent, isPressed, isHovered)));
 
 const pressedTokens = activeTokens.filter(compose(pick('token'), isPressed));
 const hoveredTokens = activeTokens.filter(compose(pick('token'), isHovered));
 
-export const createInteractionStylesFromTemplate = (
-  colorProperty: keyof typeof colors,
-) => {
-  if (!colors[colorProperty]) {
-    throw new Error(`[codegen] Unknown option found "${colorProperty}"`);
-  }
+export const createInteractionStylesFromTemplate = (colorProperty: keyof typeof colors) => {
+	if (!colors[colorProperty]) {
+		throw new Error(`[codegen] Unknown option found "${colorProperty}"`);
+	}
 
-  const { prefix, cssProperty, filterFn } = colors[colorProperty];
+	const { prefix, cssProperty, filterFn } = colors[colorProperty];
 
-  return (format(
-      `
+	return (
+		format(
+			`
 const ${colorProperty}ActiveColorMap = {
   ${pressedTokens
-    .filter(filterFn)
-    // @ts-ignore
-    .map((t) => ({ ...t, token: t.token.replaceAll('.[default]', '') }))
-    .map((t) => {
-      // handle the default case eg color.border or color.text
-      const propName = t.token.replace(prefix, '').replace('.pressed', '');
-      return `'${propName}': css({\n\t':active': { ${cssProperty}: token('${t.token}') }\n})`;
-    })
-    .join(',\n\t')}
+		.filter(filterFn)
+		// @ts-ignore
+		.map((t) => ({ ...t, token: t.token.replaceAll('.[default]', '') }))
+		.map((t) => {
+			// handle the default case eg color.border or color.text
+			const propName = t.token.replace(prefix, '').replace('.pressed', '');
+			return `'${propName}': css({\n\t':active': { ${cssProperty}: token('${t.token}') }\n})`;
+		})
+		.join(',\n\t')}
 };
 
 const ${colorProperty}HoverColorMap = {
   ${hoveredTokens
-    .filter(filterFn)
-    // @ts-ignore
-    .map((t) => ({ ...t, token: t.token.replaceAll('.[default]', '') }))
-    .map((t) => {
-      // handle the default case eg color.border or color.text
-      const propName = t.token.replace(prefix, '').replace('.hovered', '');
-      return `'${propName}': css({\n\t':hover': { ${cssProperty}: token('${t.token}') }\n})`;
-    })
-    .join(',\n\t')}
+		.filter(filterFn)
+		// @ts-ignore
+		.map((t) => ({ ...t, token: t.token.replaceAll('.[default]', '') }))
+		.map((t) => {
+			// handle the default case eg color.border or color.text
+			const propName = t.token.replace(prefix, '').replace('.hovered', '');
+			return `'${propName}': css({\n\t':hover': { ${cssProperty}: token('${t.token}') }\n})`;
+		})
+		.join(',\n\t')}
 };`,
-      'typescript',
-    ) +
-    `\ntype Interaction${capitalize(
-      colorProperty,
-    )}Color = keyof typeof ${colorProperty}HoverColorMap;\n`
-  );
+			'typescript',
+		) +
+		`\ntype Interaction${capitalize(
+			colorProperty,
+		)}Color = keyof typeof ${colorProperty}HoverColorMap;\n`
+	);
 };

package/scripts/misc-codegen-template.tsx

@@ -3,35 +3,33 @@ import format from '@af/formatting/sync';
 import type { Layer } from '../src/constants';
 
 const styleProperties: Record<'layer', Record<Layer, number>> = {
-  layer: {
-    card: 100,
-    navigation: 200,
-    dialog: 300,
-    layer: 400,
-    blanket: 500,
-    modal: 510,
-    flag: 600,
-    spotlight: 700,
-    tooltip: 800,
-  },
+	layer: {
+		card: 100,
+		navigation: 200,
+		dialog: 300,
+		layer: 400,
+		blanket: 500,
+		modal: 510,
+		flag: 600,
+		spotlight: 700,
+		tooltip: 800,
+	},
 };
 
-export const createStylesFromTemplate = (
-  property: keyof typeof styleProperties,
-) => {
-  if (!styleProperties[property]) {
-    throw new Error(`[codegen] Unknown option found "${property}"`);
-  }
+export const createStylesFromTemplate = (property: keyof typeof styleProperties) => {
+	if (!styleProperties[property]) {
+		throw new Error(`[codegen] Unknown option found "${property}"`);
+	}
 
-  return format(
-    `
+	return format(
+		`
 const ${property}Map = {
   ${Object.keys(styleProperties[property])
-    .map((key) => {
-      return `'${key}': css({ zIndex: LAYERS['${key}'] })`;
-    })
-    .join(',\n\t')}
+		.map((key) => {
+			return `'${key}': css({ zIndex: LAYERS['${key}'] })`;
+		})
+		.join(',\n\t')}
 };`,
-    'typescript',
-  );
+		'typescript',
+	);
 };

package/scripts/utils.tsx

@@ -1,55 +1,51 @@
 import type { CSSProperties } from 'react';
 
 export const tokenToStyle = (
-  prop: keyof CSSProperties,
-  token: string,
-  fallback: string | ShadowDefintion,
+	prop: keyof CSSProperties,
+	token: string,
+	fallback: string | ShadowDefintion,
 ) => {
-  if (Array.isArray(fallback)) {
-    fallback = constructShadow(fallback);
-  }
-  return `css({\n\t${prop}: token('${token}', '${fallback}')\n})`;
+	if (Array.isArray(fallback)) {
+		fallback = constructShadow(fallback);
+	}
+	return `css({\n\t${prop}: token('${token}', '${fallback}')\n})`;
 };
 
 export type ShadowDefintion = 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: ShadowDefintion) => {
-  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);

package/src/components/__tests__/unit/interaction-suface.test.tsx

@@ -2,75 +2,74 @@ import React from 'react';
 
 import { act, fireEvent, render } from '@testing-library/react';
 
-import { Box } from '@atlaskit/primitives';
+import { Box, Text } from '@atlaskit/primitives';
 import { token } from '@atlaskit/tokens';
 
-import {
-  UNSAFE_InteractionSurface as InteractionSurface,
-  UNSAFE_Text as Text,
-} from '../../../index';
+import { UNSAFE_InteractionSurface as InteractionSurface } from '../../../index';
 
 describe('InteractionSurface component', () => {
-  it('should render by itself', () => {
-    const { getByTestId } = render(
-      <InteractionSurface testId="basic">
-        <></>
-      </InteractionSurface>,
-    );
-    expect(getByTestId('basic')).toBeInTheDocument();
-  });
-  it('should render given a neutral hover interaction by default', () => {
-    const { getByTestId } = render(
-      <div style={{ position: 'relative' }}>
-        <InteractionSurface testId="surface">hello</InteractionSurface>
-      </div>,
-    );
+	it('should render by itself', () => {
+		const { getByTestId } = render(
+			<InteractionSurface testId="basic">
+				<></>
+			</InteractionSurface>,
+		);
+		expect(getByTestId('basic')).toBeInTheDocument();
+	});
+	it('should render given a neutral hover interaction by default', () => {
+		const { getByTestId } = render(
+			// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+			<div style={{ position: 'relative' }}>
+				<InteractionSurface testId="surface">hello</InteractionSurface>
+			</div>,
+		);
 
-    const surfaceElement = getByTestId('surface');
-    expect(getComputedStyle(surfaceElement).backgroundColor).toBe('');
-    act(() => {
-      fireEvent.mouseOver(surfaceElement);
-      expect(surfaceElement).toHaveStyle(
-        `background-color: ${token('color.background.neutral.bold.hovered')}`,
-      );
-    });
-  });
+		const surfaceElement = getByTestId('surface');
+		expect(getComputedStyle(surfaceElement).backgroundColor).toBe('');
+		act(() => {
+			fireEvent.mouseOver(surfaceElement);
+			expect(surfaceElement).toHaveStyle(
+				`background-color: ${token('color.background.neutral.bold.hovered')}`,
+			);
+		});
+	});
 
-  it('should render given a brand hover interaction by if set as brand', () => {
-    const { getByTestId } = render(
-      <div style={{ position: 'relative' }}>
-        <InteractionSurface appearance="brand.bold" testId="surface">
-          hello
-        </InteractionSurface>
-      </div>,
-    );
+	it('should render given a brand hover interaction by if set as brand', () => {
+		const { getByTestId } = render(
+			// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+			<div style={{ position: 'relative' }}>
+				<InteractionSurface appearance="brand.bold" testId="surface">
+					hello
+				</InteractionSurface>
+			</div>,
+		);
 
-    const surfaceElement = getByTestId('surface');
-    expect(getComputedStyle(surfaceElement).backgroundColor).toBe('');
-    act(() => {
-      fireEvent.mouseOver(surfaceElement);
-      expect(surfaceElement).toHaveStyle(
-        `background-color: ${token('color.background.brand.bold.hovered')}`,
-      );
-    });
-  });
+		const surfaceElement = getByTestId('surface');
+		expect(getComputedStyle(surfaceElement).backgroundColor).toBe('');
+		act(() => {
+			fireEvent.mouseOver(surfaceElement);
+			expect(surfaceElement).toHaveStyle(
+				`background-color: ${token('color.background.brand.bold.hovered')}`,
+			);
+		});
+	});
 
-  it('should render an inherited hover state if a Box context is present', () => {
-    const { getByTestId } = render(
-      <Box backgroundColor="color.background.brand.bold">
-        <InteractionSurface testId="surface">
-          <Text>hello</Text>
-        </InteractionSurface>
-      </Box>,
-    );
+	it('should render an inherited hover state if a Box context is present', () => {
+		const { getByTestId } = render(
+			<Box backgroundColor="color.background.brand.bold">
+				<InteractionSurface testId="surface">
+					<Text>hello</Text>
+				</InteractionSurface>
+			</Box>,
+		);
 
-    const surfaceElement = getByTestId('surface');
-    expect(getComputedStyle(surfaceElement).backgroundColor).toBe('');
-    act(() => {
-      fireEvent.mouseOver(surfaceElement);
-      expect(surfaceElement).toHaveStyle(
-        `background-color: ${token('color.background.brand.bold.hovered')}`,
-      );
-    });
-  });
+		const surfaceElement = getByTestId('surface');
+		expect(getComputedStyle(surfaceElement).backgroundColor).toBe('');
+		act(() => {
+			fireEvent.mouseOver(surfaceElement);
+			expect(surfaceElement).toHaveStyle(
+				`background-color: ${token('color.background.brand.bold.hovered')}`,
+			);
+		});
+	});
 });