@atlaskit/primitives 0.7.0 → 0.8.0

package/report.api.md

@@ -31,7 +31,6 @@ import { ReactElement } from 'react';
 import { ReactNode } from 'react';
 import { RefAttributes } from 'react';
 import { SerializedStyles } from '@emotion/serialize';
-import { SerializedStyles as SerializedStyles_2 } from '@emotion/react';
 
 // @public (undocumented)
 type AlignBlock = 'baseline' | 'center' | 'end' | 'start';
@@ -315,6 +314,15 @@ type Display = 'block' | 'flex' | 'inline' | 'inline-block' | 'inline-flex';
 // @public (undocumented)
 type Flex = keyof typeof flexMap;
 
+// @public (undocumented)
+type FlexDirection = keyof typeof flexDirectionMap;
+
+// @public (undocumented)
+const flexDirectionMap: {
+  readonly row: 'row';
+  readonly column: 'column';
+};
+
 // @public (undocumented)
 type FlexGrow = keyof typeof flexGrowMap;
 
@@ -339,10 +347,7 @@ const flexShrinkMap: {
 };
 
 // @public (undocumented)
-type Gap = keyof typeof inlineSpaceMap.gap;
-
-// @public (undocumented)
-type Gap_2 = keyof typeof stackSpaceMap.gap;
+type Gap = keyof typeof spaceMap;
 
 // @public (undocumented)
 type Grow = 'fill' | 'hug';
@@ -390,26 +395,6 @@ export interface InlineProps<T extends ElementType = 'div'> {
   testId?: string;
 }
 
-// @public
-const inlineSpaceMap: {
-  [k: string]: {
-    readonly '0': SerializedStyles_2;
-    readonly '025': SerializedStyles_2;
-    readonly '050': SerializedStyles_2;
-    readonly '075': SerializedStyles_2;
-    readonly '100': SerializedStyles_2;
-    readonly '150': SerializedStyles_2;
-    readonly '200': SerializedStyles_2;
-    readonly '250': SerializedStyles_2;
-    readonly '300': SerializedStyles_2;
-    readonly '400': SerializedStyles_2;
-    readonly '500': SerializedStyles_2;
-    readonly '600': SerializedStyles_2;
-    readonly '800': SerializedStyles_2;
-    readonly '1000': SerializedStyles_2;
-  };
-};
-
 // @public (undocumented)
 type InlineStyles = SerializedStyles & {
   [inlineTag]: true;
@@ -529,7 +514,7 @@ type PublicBoxPropsBase = {
 };
 
 // @public (undocumented)
-type RowGap = keyof typeof inlineSpaceMap.rowGap;
+type RowGap = keyof typeof spaceMap;
 
 // @public (undocumented)
 type SafeCSSObject = CSSPseudos &
@@ -554,6 +539,24 @@ const shadowMap: {
   readonly raised: 'var(--ds-shadow-raised)';
 };
 
+// @public (undocumented)
+const spaceMap: {
+  readonly 'space.0': 'var(--ds-space-0)';
+  readonly 'space.025': 'var(--ds-space-025)';
+  readonly 'space.050': 'var(--ds-space-050)';
+  readonly 'space.075': 'var(--ds-space-075)';
+  readonly 'space.100': 'var(--ds-space-100)';
+  readonly 'space.150': 'var(--ds-space-150)';
+  readonly 'space.200': 'var(--ds-space-200)';
+  readonly 'space.250': 'var(--ds-space-250)';
+  readonly 'space.300': 'var(--ds-space-300)';
+  readonly 'space.400': 'var(--ds-space-400)';
+  readonly 'space.500': 'var(--ds-space-500)';
+  readonly 'space.600': 'var(--ds-space-600)';
+  readonly 'space.800': 'var(--ds-space-800)';
+  readonly 'space.1000': 'var(--ds-space-1000)';
+};
+
 // @public (undocumented)
 type Spread = 'space-between';
 
@@ -586,31 +589,11 @@ export interface StackProps<T extends ElementType = 'div'> {
   children: ReactNode;
   grow?: Grow_2;
   ref?: ComponentPropsWithRef<T>['ref'];
-  space?: Gap_2;
+  space?: Gap;
   spread?: Spread_2;
   testId?: string;
 }
 
-// @public
-const stackSpaceMap: {
-  [k: string]: {
-    readonly '0': SerializedStyles_2;
-    readonly '025': SerializedStyles_2;
-    readonly '050': SerializedStyles_2;
-    readonly '075': SerializedStyles_2;
-    readonly '100': SerializedStyles_2;
-    readonly '150': SerializedStyles_2;
-    readonly '200': SerializedStyles_2;
-    readonly '250': SerializedStyles_2;
-    readonly '300': SerializedStyles_2;
-    readonly '400': SerializedStyles_2;
-    readonly '500': SerializedStyles_2;
-    readonly '600': SerializedStyles_2;
-    readonly '800': SerializedStyles_2;
-    readonly '1000': SerializedStyles_2;
-  };
-};
-
 // @public (undocumented)
 type TextColor = keyof typeof textColorMap;
 
@@ -659,6 +642,7 @@ type TokenisedProps = {
   borderWidth?: BorderWidth;
   display?: Display;
   flex?: Flex;
+  flexDirection?: FlexDirection;
   flexGrow?: FlexGrow;
   flexShrink?: FlexShrink;
   height?: Height;

package/scripts/codegen-file-templates/flex-direction.tsx

@@ -0,0 +1,6 @@
+export const flexDirectionMap = {
+  row: 'row',
+  column: 'column',
+} as const;
+
+export type FlexDirection = keyof typeof flexDirectionMap;

package/scripts/codegen-styles.tsx

@@ -2,7 +2,7 @@
 import { readdirSync, writeFileSync } from 'fs';
 import { join } from 'path';
 
-import { createPartialSignedArtifact } from '@af/codegen';
+import { createPartialSignedArtifact } from '@atlassian/codegen';
 
 import { createBorderStylesFromTemplate } from './border-codegen-template';
 import { createColorStylesFromTemplate } from './color-codegen-template';
@@ -18,82 +18,81 @@ const spacingTokensDependencyPath = require.resolve(
 const shapeTokensDependencyPath = require.resolve(
   '../../tokens/src/artifacts/tokens-raw/atlassian-shape',
 );
+
 const templateFiles = readdirSync(join(__dirname, 'codegen-file-templates'), {
   withFileTypes: true,
 })
   .filter(item => !item.isDirectory())
   .map(item => join(__dirname, 'codegen-file-templates', item.name));
 
-new Promise(() => {
-  const targetPath = join(
-    __dirname,
-    '../',
-    'src',
-    'internal',
-    'style-maps.partial.tsx',
-  );
-
-  const sourceFns = [
-    // width, height, minWidth, maxWidth, minHeight, maxHeight
-    () =>
-      createPartialSignedArtifact(
-        options => options.map(createStylesFromFileTemplate).join('\n'),
-        'yarn codegen-styles',
-        {
-          id: 'dimensions',
-          absoluteFilePath: targetPath,
-          dependencies: templateFiles.filter(v => v.includes('dimensions')),
-        },
-      ),
-    // padding, paddingBlock, paddingBlockStart, paddingBlockEnd, paddingInline, paddingInlineStart, paddingInlineEnd, gap, rowGap
-    () =>
-      createPartialSignedArtifact(
-        options => options.map(createSpacingStylesFromTemplate).join('\n'),
-        'yarn codegen-styles',
-        {
-          id: 'spacing',
-          absoluteFilePath: targetPath,
-          dependencies: [spacingTokensDependencyPath],
-        },
-      ),
-    // text color, background-color, border-color, shadow
-    () =>
-      createPartialSignedArtifact(
-        options => options.map(createColorStylesFromTemplate).join('\n'),
-        'yarn codegen-styles',
-        {
-          id: 'colors',
-          absoluteFilePath: targetPath,
-          dependencies: [colorTokensDependencyPath],
-        },
-      ),
-    // border-width, border-radius
-    () =>
-      createPartialSignedArtifact(
-        options => options.map(createBorderStylesFromTemplate).join('\n'),
-        'yarn codegen-styles',
-        {
-          id: 'border',
-          absoluteFilePath: targetPath,
-          dependencies: [shapeTokensDependencyPath],
-        },
-      ),
-    // align-self, border-color, border-radius, border-style, border-width, display, flex-grow, flex-shrink, flex, layer, overflow, position',
-    () =>
-      createPartialSignedArtifact(
-        options => options.map(createStylesFromFileTemplate).join('\n'),
-        'yarn codegen-styles',
-        {
-          id: 'misc',
-          absoluteFilePath: targetPath,
-          dependencies: templateFiles,
-        },
-      ),
-  ];
+const targetPath = join(
+  __dirname,
+  '../',
+  'src',
+  'internal',
+  'style-maps.partial.tsx',
+);
 
-  sourceFns.forEach(sourceFn => {
-    writeFileSync(targetPath, sourceFn());
-  });
+const sourceFns = [
+  // width, height, minWidth, maxWidth, minHeight, maxHeight
+  () =>
+    createPartialSignedArtifact(
+      options => options.map(createStylesFromFileTemplate).join('\n'),
+      'yarn codegen-styles',
+      {
+        id: 'dimensions',
+        absoluteFilePath: targetPath,
+        dependencies: templateFiles.filter(v => v.includes('dimensions')),
+      },
+    ),
+  // padding, paddingBlock, paddingBlockStart, paddingBlockEnd, paddingInline, paddingInlineStart, paddingInlineEnd, gap, rowGap
+  () =>
+    createPartialSignedArtifact(
+      options => options.map(createSpacingStylesFromTemplate).join('\n'),
+      'yarn codegen-styles',
+      {
+        id: 'spacing',
+        absoluteFilePath: targetPath,
+        dependencies: [spacingTokensDependencyPath],
+      },
+    ),
+  // text color, background-color, border-color, shadow
+  () =>
+    createPartialSignedArtifact(
+      options => options.map(createColorStylesFromTemplate).join('\n'),
+      'yarn codegen-styles',
+      {
+        id: 'colors',
+        absoluteFilePath: targetPath,
+        dependencies: [colorTokensDependencyPath],
+      },
+    ),
+  // border-width, border-radius
+  () =>
+    createPartialSignedArtifact(
+      options => options.map(createBorderStylesFromTemplate).join('\n'),
+      'yarn codegen-styles',
+      {
+        id: 'border',
+        absoluteFilePath: targetPath,
+        dependencies: [shapeTokensDependencyPath],
+      },
+    ),
+  // align-self, border-color, border-radius, border-style, border-width, display, flex-grow, flex-shrink, flex, layer, overflow, position',
+  () =>
+    createPartialSignedArtifact(
+      options => options.map(createStylesFromFileTemplate).join('\n'),
+      'yarn codegen-styles',
+      {
+        id: 'misc',
+        absoluteFilePath: targetPath,
+        dependencies: templateFiles,
+      },
+    ),
+];
 
-  console.log(`${targetPath} written!`);
+sourceFns.forEach(sourceFn => {
+  writeFileSync(targetPath, sourceFn());
 });
+
+console.log(`${targetPath} written!`);

package/scripts/misc-codegen-template.tsx

@@ -10,6 +10,7 @@ export const createStylesFromFileTemplate = (
     | 'border-width'
     | 'dimensions'
     | 'display'
+    | 'flex-direction'
     | 'flex-grow'
     | 'flex-shrink'
     | 'flex'

package/scripts/spacing-codegen-template.tsx

@@ -23,13 +23,8 @@ const spacingProperties: Record<
       'paddingInlineEnd',
     ],
   },
-  inlineSpace: {
+  space: {
     cssProperties: ['gap', 'rowGap'],
-    propNameFormatter: tokenName => tokenName.replace(spacingTokenPrefix, ''),
-  },
-  stackSpace: {
-    cssProperties: ['gap'],
-    propNameFormatter: tokenName => tokenName.replace(spacingTokenPrefix, ''),
   },
 } as const;
 

package/stack/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@atlaskit/primitives/stack",
-  "main": "../dist/cjs/components/stack.partial.js",
-  "module": "../dist/esm/components/stack.partial.js",
-  "module:es2019": "../dist/es2019/components/stack.partial.js",
+  "main": "../dist/cjs/components/stack.js",
+  "module": "../dist/esm/components/stack.js",
+  "module:es2019": "../dist/es2019/components/stack.js",
   "sideEffects": false,
-  "types": "../dist/types/components/stack.partial.d.ts",
+  "types": "../dist/types/components/stack.d.ts",
   "typesVersions": {
     ">=4.0 <4.5": {
       "*": [
-        "../dist/types-ts4.0/components/stack.partial.d.ts"
+        "../dist/types-ts4.0/components/stack.d.ts"
       ]
     }
   }

package/tmp/api-report-tmp.d.ts

@@ -20,7 +20,6 @@ import { ReactElement } from 'react';
 import { ReactNode } from 'react';
 import { RefAttributes } from 'react';
 import { SerializedStyles } from '@emotion/serialize';
-import { SerializedStyles as SerializedStyles_2 } from '@emotion/react';
 
 // @public (undocumented)
 type AlignBlock = 'baseline' | 'center' | 'end' | 'start';
@@ -290,6 +289,15 @@ type Display = 'block' | 'flex' | 'inline' | 'inline-block' | 'inline-flex';
 // @public (undocumented)
 type Flex = keyof typeof flexMap;
 
+// @public (undocumented)
+type FlexDirection = keyof typeof flexDirectionMap;
+
+// @public (undocumented)
+const flexDirectionMap: {
+    readonly row: "row";
+    readonly column: "column";
+};
+
 // @public (undocumented)
 type FlexGrow = keyof typeof flexGrowMap;
 
@@ -314,10 +322,7 @@ const flexShrinkMap: {
 };
 
 // @public (undocumented)
-type Gap = keyof typeof inlineSpaceMap.gap;
-
-// @public (undocumented)
-type Gap_2 = keyof typeof stackSpaceMap.gap;
+type Gap = keyof typeof spaceMap;
 
 // @public (undocumented)
 type Grow = 'fill' | 'hug';
@@ -347,26 +352,6 @@ export interface InlineProps<T extends ElementType = 'div'> {
     testId?: string;
 }
 
-// @public
-const inlineSpaceMap: {
-    [k: string]: {
-        readonly '0': SerializedStyles_2;
-        readonly '025': SerializedStyles_2;
-        readonly '050': SerializedStyles_2;
-        readonly '075': SerializedStyles_2;
-        readonly '100': SerializedStyles_2;
-        readonly '150': SerializedStyles_2;
-        readonly '200': SerializedStyles_2;
-        readonly '250': SerializedStyles_2;
-        readonly '300': SerializedStyles_2;
-        readonly '400': SerializedStyles_2;
-        readonly '500': SerializedStyles_2;
-        readonly '600': SerializedStyles_2;
-        readonly '800': SerializedStyles_2;
-        readonly '1000': SerializedStyles_2;
-    };
-};
-
 // @public (undocumented)
 type InlineStyles = SerializedStyles & {
     [inlineTag]: true;
@@ -486,7 +471,7 @@ type PublicBoxPropsBase = {
 };
 
 // @public (undocumented)
-type RowGap = keyof typeof inlineSpaceMap.rowGap;
+type RowGap = keyof typeof spaceMap;
 
 // @public (undocumented)
 type SafeCSSObject = CSSPseudos & TokenisedProps & Omit<CSSPropertiesWithMultiValues, keyof TokenisedProps>;
@@ -506,6 +491,24 @@ const shadowMap: {
     readonly raised: "var(--ds-shadow-raised)";
 };
 
+// @public (undocumented)
+const spaceMap: {
+    readonly 'space.0': "var(--ds-space-0)";
+    readonly 'space.025': "var(--ds-space-025)";
+    readonly 'space.050': "var(--ds-space-050)";
+    readonly 'space.075': "var(--ds-space-075)";
+    readonly 'space.100': "var(--ds-space-100)";
+    readonly 'space.150': "var(--ds-space-150)";
+    readonly 'space.200': "var(--ds-space-200)";
+    readonly 'space.250': "var(--ds-space-250)";
+    readonly 'space.300': "var(--ds-space-300)";
+    readonly 'space.400': "var(--ds-space-400)";
+    readonly 'space.500': "var(--ds-space-500)";
+    readonly 'space.600': "var(--ds-space-600)";
+    readonly 'space.800': "var(--ds-space-800)";
+    readonly 'space.1000': "var(--ds-space-1000)";
+};
+
 // @public (undocumented)
 type Spread = 'space-between';
 
@@ -523,31 +526,11 @@ export interface StackProps<T extends ElementType = 'div'> {
     children: ReactNode;
     grow?: Grow_2;
     ref?: ComponentPropsWithRef<T>['ref'];
-    space?: Gap_2;
+    space?: Gap;
     spread?: Spread_2;
     testId?: string;
 }
 
-// @public
-const stackSpaceMap: {
-    [k: string]: {
-        readonly '0': SerializedStyles_2;
-        readonly '025': SerializedStyles_2;
-        readonly '050': SerializedStyles_2;
-        readonly '075': SerializedStyles_2;
-        readonly '100': SerializedStyles_2;
-        readonly '150': SerializedStyles_2;
-        readonly '200': SerializedStyles_2;
-        readonly '250': SerializedStyles_2;
-        readonly '300': SerializedStyles_2;
-        readonly '400': SerializedStyles_2;
-        readonly '500': SerializedStyles_2;
-        readonly '600': SerializedStyles_2;
-        readonly '800': SerializedStyles_2;
-        readonly '1000': SerializedStyles_2;
-    };
-};
-
 // @public (undocumented)
 type TextColor = keyof typeof textColorMap;
 
@@ -596,6 +579,7 @@ type TokenisedProps = {
     borderWidth?: BorderWidth;
     display?: Display;
     flex?: Flex;
+    flexDirection?: FlexDirection;
     flexGrow?: FlexGrow;
     flexShrink?: FlexShrink;
     height?: Height;

package/dist/cjs/components/stack.partial.js

@@ -1,118 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _react = require("react");
-var _react2 = require("@emotion/react");
-/* eslint-disable @repo/internal/styles/no-exported-styles */
-/** @jsx jsx */
-
-var justifyContentMap = {
-  start: (0, _react2.css)({
-    justifyContent: 'start'
-  }),
-  center: (0, _react2.css)({
-    justifyContent: 'center'
-  }),
-  end: (0, _react2.css)({
-    justifyContent: 'end'
-  }),
-  'space-between': (0, _react2.css)({
-    justifyContent: 'space-between'
-  })
-};
-var alignItemsMap = {
-  start: (0, _react2.css)({
-    alignItems: 'start'
-  }),
-  center: (0, _react2.css)({
-    alignItems: 'center'
-  }),
-  end: (0, _react2.css)({
-    alignItems: 'end'
-  })
-};
-var flexGrowMap = {
-  hug: (0, _react2.css)({
-    flexGrow: 0
-  }),
-  fill: (0, _react2.css)({
-    width: '100%',
-    flexGrow: 1
-  })
-};
-
-/**
- * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::4eb2c996d6ce5791acad51e2b226635f>>
- * @codegenId spacing
- * @codegenCommand yarn codegen-styles
- * @codegenParams ["stackSpace"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::167d3b69b159ae33e74d4ea5ab7eade6>>
- */
-var stackSpaceMap = Object.fromEntries(['gap'].map(function (property) {
-  return [property, {
-    '0': (0, _react2.css)((0, _defineProperty2.default)({}, property, "var(--ds-space-0, 0px)")),
-    '025': (0, _react2.css)((0, _defineProperty2.default)({}, property, "var(--ds-space-025, 2px)")),
-    '050': (0, _react2.css)((0, _defineProperty2.default)({}, property, "var(--ds-space-050, 4px)")),
-    '075': (0, _react2.css)((0, _defineProperty2.default)({}, property, "var(--ds-space-075, 6px)")),
-    '100': (0, _react2.css)((0, _defineProperty2.default)({}, property, "var(--ds-space-100, 8px)")),
-    '150': (0, _react2.css)((0, _defineProperty2.default)({}, property, "var(--ds-space-150, 12px)")),
-    '200': (0, _react2.css)((0, _defineProperty2.default)({}, property, "var(--ds-space-200, 16px)")),
-    '250': (0, _react2.css)((0, _defineProperty2.default)({}, property, "var(--ds-space-250, 20px)")),
-    '300': (0, _react2.css)((0, _defineProperty2.default)({}, property, "var(--ds-space-300, 24px)")),
-    '400': (0, _react2.css)((0, _defineProperty2.default)({}, property, "var(--ds-space-400, 32px)")),
-    '500': (0, _react2.css)((0, _defineProperty2.default)({}, property, "var(--ds-space-500, 40px)")),
-    '600': (0, _react2.css)((0, _defineProperty2.default)({}, property, "var(--ds-space-600, 48px)")),
-    '800': (0, _react2.css)((0, _defineProperty2.default)({}, property, "var(--ds-space-800, 64px)")),
-    '1000': (0, _react2.css)((0, _defineProperty2.default)({}, property, "var(--ds-space-1000, 80px)"))
-  }];
-}));
-/**
- * @codegenEnd
- */
-
-var baseStyles = (0, _react2.css)({
-  display: 'flex',
-  boxSizing: 'border-box',
-  flexDirection: 'column'
-});
-
-/**
- * __Stack__
- *
- * Stack is a primitive component based on flexbox that manages the vertical layout of direct children.
- *
- * @example
- * ```tsx
- *  <Stack>
- *    <Box padding="space.100" backgroundColor="neutral"></Box>
- *    <Box padding="space.100" backgroundColor="neutral"></Box>
- *  </Stack>
- * ```
- *
- */
-var Stack = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
-  var as = _ref.as,
-    alignItems = _ref.alignInline,
-    alignBlock = _ref.alignBlock,
-    spread = _ref.spread,
-    grow = _ref.grow,
-    space = _ref.space,
-    children = _ref.children,
-    testId = _ref.testId;
-  var Component = as || 'div';
-  var justifyContent = spread || alignBlock;
-  return (0, _react2.jsx)(Component, {
-    css: [baseStyles, space && stackSpaceMap.gap[space], alignItems && alignItemsMap[alignItems], grow && flexGrowMap[grow], justifyContent && justifyContentMap[justifyContent]],
-    "data-testid": testId,
-    ref: ref
-  }, children);
-}));
-Stack.displayName = 'Stack';
-var _default = Stack;
-exports.default = _default;