@atlaskit/ds-explorations 5.1.4 → 5.1.5

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/ds-explorations
 
+## 5.1.5
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 5.1.4
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/ds-explorations",
-	"version": "5.1.4",
+	"version": "5.1.5",
 	"description": "DEPRECATED. Use @atlaskit/primitives. An experimental package for exploration and validation of spacing / typography foundations.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -25,7 +25,7 @@
 		"prepare": "yarn ak-postbuild"
 	},
 	"dependencies": {
-		"@atlaskit/tokens": "^11.4.0",
+		"@atlaskit/tokens": "^12.0.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1"
 	},
@@ -34,9 +34,9 @@
 	},
 	"devDependencies": {
 		"@af/formatting": "workspace:^",
-		"@atlaskit/ds-lib": "^6.0.0",
+		"@atlaskit/ds-lib": "^7.0.0",
 		"@atlaskit/primitives": "^18.1.0",
-		"@atlaskit/textfield": "^8.2.0",
+		"@atlaskit/textfield": "^8.3.0",
 		"@atlassian/codegen": "^0.1.0",
 		"@testing-library/react": "^16.3.0",
 		"fs-extra": "^4.0.2",

package/scripts/capitalize.tsx

@@ -0,0 +1,2 @@
+export const capitalize: (str: string) => string = (str: string): string =>
+	str.charAt(0).toUpperCase() + str.slice(1);

package/scripts/codegen-styles.tsx

@@ -8,8 +8,9 @@ import { createColorMapTemplate } from './color-map-template';
 import { createInteractionStylesFromTemplate } from './interaction-codegen';
 
 const colorMapOutputFolder = join(__dirname, '../', 'src', 'internal');
-const colorTokensDependencyPath =
-	require.resolve('../../tokens/src/artifacts/tokens-raw/atlassian-light');
+const colorTokensDependencyPath = require.resolve(
+	'../../tokens/src/artifacts/tokens-raw/atlassian-light',
+);
 
 writeFile(
 	join(colorMapOutputFolder, 'color-map.tsx'),

package/scripts/color-codegen-template.tsx

@@ -1,17 +1,15 @@
 import format from '@af/formatting/sync';
 import { light as tokens } from '@atlaskit/tokens/tokens-raw';
 
-import {
-	capitalize,
-	compose,
-	isAccent,
-	isHovered,
-	isPressed,
-	not,
-	pick,
-	type ShadowDefintion,
-	tokenToStyle,
-} from './utils';
+import { capitalize } from './capitalize';
+import { compose } from './compose';
+import { isAccent } from './is-accent';
+import { isHovered } from './is-hovered';
+import { isPressed } from './is-pressed';
+import { not } from './not';
+import { pick } from './pick';
+import { tokenToStyle } from './token-to-style';
+import type { ShadowDefintion } from './types';
 
 type Token = {
 	token: string;

package/scripts/color-map-template.tsx

@@ -1,7 +1,10 @@
 import format from '@af/formatting/sync';
 import { light as tokens } from '@atlaskit/tokens/tokens-raw';
 
-import { compose, isAccent, not, pick } from './utils';
+import { compose } from './compose';
+import { isAccent } from './is-accent';
+import { not } from './not';
+import { pick } from './pick';
 
 type Token = {
 	token: string;

package/scripts/compose.tsx

@@ -0,0 +1,4 @@
+export const compose: (...fns: ((...any: any[]) => any)[]) => (x: any) => any =
+	(...fns: ((...any: any[]) => any)[]) =>
+	(x: any): any =>
+		fns.reduce((res, fn) => fn(res), x);

package/scripts/dimension-codegen-template.tsx

@@ -1,6 +1,6 @@
 import format from '@af/formatting/sync';
 
-import { capitalize } from './utils';
+import { capitalize } from './capitalize';
 
 const dimensionProperties = {
 	width: {

package/scripts/interaction-codegen.tsx

@@ -1,7 +1,13 @@
 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 } from './capitalize';
+import { compose } from './compose';
+import { isAccent } from './is-accent';
+import { isHovered } from './is-hovered';
+import { isPressed } from './is-pressed';
+import { or } from './or';
+import { pick } from './pick';
 
 type Token = {
 	token: string;

package/scripts/is-accent.tsx

@@ -0,0 +1 @@
+export const isAccent: (str: string) => boolean = (str: string): boolean => str.includes('accent');

package/scripts/is-hovered.tsx

@@ -0,0 +1,2 @@
+export const isHovered: (str: string) => boolean = (str: string): boolean =>
+	str.includes('hovered');

package/scripts/is-pressed.tsx

@@ -0,0 +1,2 @@
+export const isPressed: (str: string) => boolean = (str: string): boolean =>
+	str.includes('pressed');

package/scripts/not.tsx

@@ -0,0 +1,6 @@
+import type { BooleanCallback } from './types';
+
+export const not: <T extends any>(cb: BooleanCallback<T>) => (val: T) => boolean =
+	<T extends any>(cb: BooleanCallback<T>) =>
+	(val: T): boolean =>
+		!cb(val);

package/scripts/or.tsx

@@ -0,0 +1,6 @@
+import type { BooleanCallback } from './types';
+
+export const or: <T extends any>(...fns: BooleanCallback<T>[]) => (val: T) => boolean =
+	<T extends any>(...fns: BooleanCallback<T>[]) =>
+	(val: T): boolean =>
+		fns.some((fn) => fn(val));

package/scripts/pick.tsx

@@ -0,0 +1,4 @@
+export const pick: <T extends any>(key: keyof T) => (obj: T) => T[keyof T] =
+	<T extends any>(key: keyof T) =>
+	(obj: T) =>
+		obj[key];

package/scripts/token-to-style.tsx

@@ -0,0 +1,20 @@
+import type { CSSProperties } from 'react';
+
+import type { ShadowDefintion } from './types';
+
+const constructShadow = (shadowObject: ShadowDefintion) => {
+	return shadowObject
+		.map((shadow) => `${shadow.offset.x}px ${shadow.offset.y}px ${shadow.radius}px ${shadow.color}`)
+		.join(', ');
+};
+
+export const tokenToStyle: (
+	prop: keyof CSSProperties,
+	token: string,
+	fallback: string | ShadowDefintion,
+) => string = (prop: keyof CSSProperties, token: string, fallback: string | ShadowDefintion) => {
+	if (Array.isArray(fallback)) {
+		fallback = constructShadow(fallback);
+	}
+	return `css({\n\t${prop}: token('${token}', '${fallback}')\n})`;
+};

package/scripts/types.tsx

@@ -0,0 +1,16 @@
+export type BooleanCallback<T> = (args: T) => boolean;
+
+export type Token = {
+	token: string;
+	fallback: string;
+};
+
+export type ShadowDefintion = Array<{
+	radius: number;
+	offset: {
+		x: number;
+		y: number;
+	};
+	color: string;
+	opacity: number;
+}>;

package/scripts/utils.tsx

@@ -1,54 +0,0 @@
-import type { CSSProperties } from 'react';
-
-export const tokenToStyle: (
-	prop: keyof CSSProperties,
-	token: string,
-	fallback: string | ShadowDefintion,
-) => string = (prop: keyof CSSProperties, token: string, fallback: string | ShadowDefintion) => {
-	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;
-}>;
-
-const constructShadow = (shadowObject: ShadowDefintion) => {
-	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) => any =
-	(...fns: ((...any: any[]) => any)[]) =>
-	(x: any): any =>
-		fns.reduce((res, fn) => fn(res), x);
-export const pick: <T extends any>(key: keyof T) => (obj: T) => T[keyof T] =
-	<T extends any>(key: keyof T) =>
-	(obj: T) =>
-		obj[key];
-export const isAccent: (str: string) => boolean = (str: string): boolean => str.includes('accent');
-export const isPressed: (str: string) => boolean = (str: string): boolean =>
-	str.includes('pressed');
-export const isHovered: (str: string) => boolean = (str: string): boolean =>
-	str.includes('hovered');
-export const not: <T extends any>(cb: BooleanCallback<T>) => (val: T) => boolean =
-	<T extends any>(cb: BooleanCallback<T>) =>
-	(val: T): boolean =>
-		!cb(val);
-export const or: <T extends any>(...fns: BooleanCallback<T>[]) => (val: T) => boolean =
-	<T extends any>(...fns: BooleanCallback<T>[]) =>
-	(val: T): boolean =>
-		fns.some((fn) => fn(val));
-export const capitalize: (str: string) => string = (str: string): string =>
-	str.charAt(0).toUpperCase() + str.slice(1);