@atlaskit/primitives 0.0.2 → 0.1.0

package/dist/esm/components/inline.partial.js

@@ -1,2 +1,159 @@
-// eslint-disable-next-line @repo/internal/codegen/signed-source-integrity
-export { default as Inline } from '@atlaskit/ds-explorations/inline';
+/** @jsx jsx */
+import { Children, forwardRef, Fragment, memo } from 'react';
+import { css, jsx } from '@emotion/react';
+var alignItemsMap = {
+  center: css({
+    alignItems: 'center'
+  }),
+  baseline: css({
+    alignItems: 'baseline'
+  }),
+  start: css({
+    alignItems: 'flex-start'
+  }),
+  end: css({
+    alignItems: 'flex-end'
+  })
+};
+var justifyContentMap = {
+  start: css({
+    justifyContent: 'flex-start'
+  }),
+  center: css({
+    justifyContent: 'center'
+  }),
+  end: css({
+    justifyContent: 'flex-end'
+  }),
+  'space-between': css({
+    justifyContent: 'space-between'
+  })
+};
+var flexGrowMap = {
+  hug: css({
+    flexGrow: 0
+  }),
+  fill: css({
+    flexGrow: 1
+  })
+};
+var flexWrapStyles = css({
+  flexWrap: 'wrap'
+});
+
+/**
+ * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ * @codegen <<SignedSource::e0d436d3312290a98dbfd91d90dd6b9e>>
+ * @codegenId spacing
+ * @codegenCommand yarn codegen-styles
+ * @codegenParams ["space"]
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::167d3b69b159ae33e74d4ea5ab7eade6>>
+ */
+var spaceMap = {
+  '0': css({
+    gap: "var(--ds-space-0, 0px)"
+  }),
+  '025': css({
+    gap: "var(--ds-space-025, 2px)"
+  }),
+  '050': css({
+    gap: "var(--ds-space-050, 4px)"
+  }),
+  '075': css({
+    gap: "var(--ds-space-075, 6px)"
+  }),
+  '100': css({
+    gap: "var(--ds-space-100, 8px)"
+  }),
+  '1000': css({
+    gap: "var(--ds-space-1000, 80px)"
+  }),
+  '150': css({
+    gap: "var(--ds-space-150, 12px)"
+  }),
+  '200': css({
+    gap: "var(--ds-space-200, 16px)"
+  }),
+  '250': css({
+    gap: "var(--ds-space-250, 20px)"
+  }),
+  '300': css({
+    gap: "var(--ds-space-300, 24px)"
+  }),
+  '400': css({
+    gap: "var(--ds-space-400, 32px)"
+  }),
+  '500': css({
+    gap: "var(--ds-space-500, 40px)"
+  }),
+  '600': css({
+    gap: "var(--ds-space-600, 48px)"
+  }),
+  '800': css({
+    gap: "var(--ds-space-800, 64px)"
+  })
+};
+/**
+ * @codegenEnd
+ */
+
+var baseStyles = css({
+  display: 'flex',
+  boxSizing: 'border-box',
+  flexDirection: 'row'
+});
+var separatorStyles = css({
+  color: "var(--ds-text-subtle, #42526E)",
+  marginBlock: "var(--ds-space-0, 0px)",
+  marginInline: "-".concat("var(--ds-space-025, 2px)"),
+  pointerEvents: 'none',
+  userSelect: 'none'
+});
+var Separator = function Separator(_ref) {
+  var children = _ref.children;
+  return jsx("span", {
+    css: separatorStyles
+  }, children);
+};
+
+/**
+ * __Inline__
+ *
+ * Inline is a primitive component based on flexbox that manages the horizontal layout of direct children.
+ *
+ *
+ * @example
+ * ```tsx
+ *  <Inline>
+ *    <Box padding="space.100" backgroundColor="neutral"></Box>
+ *    <Box padding="space.100" backgroundColor="neutral"></Box>
+ *  </Inline>
+ * ```
+ *
+ */
+var Inline = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref2, ref) {
+  var alignInline = _ref2.alignInline,
+    alignItems = _ref2.alignBlock,
+    _ref2$shouldWrap = _ref2.shouldWrap,
+    shouldWrap = _ref2$shouldWrap === void 0 ? false : _ref2$shouldWrap,
+    spread = _ref2.spread,
+    grow = _ref2.grow,
+    space = _ref2.space,
+    separator = _ref2.separator,
+    testId = _ref2.testId,
+    rawChildren = _ref2.children;
+  var separatorComponent = typeof separator === 'string' ? jsx(Separator, null, separator) : separator;
+  var children = separatorComponent ? Children.toArray(rawChildren).filter(Boolean).map(function (child, index) {
+    return jsx(Fragment, {
+      key: index
+    }, separator && index > 0 ? separatorComponent : null, child);
+  }) : rawChildren;
+  var justifyContent = spread || alignInline;
+  return jsx("div", {
+    css: [baseStyles, space && spaceMap[space], justifyContent && justifyContentMap[justifyContent], grow && flexGrowMap[grow], alignItems && alignItemsMap[alignItems], shouldWrap && flexWrapStyles],
+    "data-testid": testId,
+    ref: ref
+  }, children);
+}));
+Inline.displayName = 'Inline';
+export default Inline;

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

@@ -1,2 +1,130 @@
-// eslint-disable-next-line @repo/internal/codegen/signed-source-integrity
-export { default as Stack } from '@atlaskit/ds-explorations/stack';
+/** @jsx jsx */
+import { forwardRef, memo } from 'react';
+import { css, jsx } from '@emotion/react';
+var justifyContentMap = {
+  start: css({
+    justifyContent: 'start'
+  }),
+  center: css({
+    justifyContent: 'center'
+  }),
+  end: css({
+    justifyContent: 'end'
+  }),
+  'space-between': css({
+    justifyContent: 'space-between'
+  })
+};
+var alignItemsMap = {
+  start: css({
+    alignItems: 'start'
+  }),
+  center: css({
+    alignItems: 'center'
+  }),
+  end: css({
+    alignItems: 'end'
+  })
+};
+var flexGrowMap = {
+  hug: css({
+    flexGrow: 0
+  }),
+  fill: css({
+    flexGrow: 1
+  })
+};
+
+/**
+ * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ * @codegen <<SignedSource::e0d436d3312290a98dbfd91d90dd6b9e>>
+ * @codegenId spacing
+ * @codegenCommand yarn codegen-styles
+ * @codegenParams ["space"]
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::167d3b69b159ae33e74d4ea5ab7eade6>>
+ */
+var spaceMap = {
+  '0': css({
+    gap: "var(--ds-space-0, 0px)"
+  }),
+  '025': css({
+    gap: "var(--ds-space-025, 2px)"
+  }),
+  '050': css({
+    gap: "var(--ds-space-050, 4px)"
+  }),
+  '075': css({
+    gap: "var(--ds-space-075, 6px)"
+  }),
+  '100': css({
+    gap: "var(--ds-space-100, 8px)"
+  }),
+  '1000': css({
+    gap: "var(--ds-space-1000, 80px)"
+  }),
+  '150': css({
+    gap: "var(--ds-space-150, 12px)"
+  }),
+  '200': css({
+    gap: "var(--ds-space-200, 16px)"
+  }),
+  '250': css({
+    gap: "var(--ds-space-250, 20px)"
+  }),
+  '300': css({
+    gap: "var(--ds-space-300, 24px)"
+  }),
+  '400': css({
+    gap: "var(--ds-space-400, 32px)"
+  }),
+  '500': css({
+    gap: "var(--ds-space-500, 40px)"
+  }),
+  '600': css({
+    gap: "var(--ds-space-600, 48px)"
+  }),
+  '800': css({
+    gap: "var(--ds-space-800, 64px)"
+  })
+};
+/**
+ * @codegenEnd
+ */
+
+var baseStyles = 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__*/memo( /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var alignItems = _ref.alignInline,
+    alignBlock = _ref.alignBlock,
+    spread = _ref.spread,
+    grow = _ref.grow,
+    space = _ref.space,
+    children = _ref.children,
+    testId = _ref.testId;
+  var justifyContent = spread || alignBlock;
+  return jsx("div", {
+    css: [baseStyles, space && spaceMap[space], alignItems && alignItemsMap[alignItems], grow && flexGrowMap[grow], justifyContent && justifyContentMap[justifyContent]],
+    "data-testid": testId,
+    ref: ref
+  }, children);
+}));
+Stack.displayName = 'Stack';
+export default Stack;

package/dist/esm/index.js

@@ -1,3 +1,3 @@
-export { Stack } from './components/stack.partial';
+export { default as Stack } from './components/stack.partial';
 export { Box } from './components/box';
-export { Inline } from './components/inline.partial';
+export { default as Inline } from './components/inline.partial';

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/primitives",
-	"version": "0.0.2",
+	"version": "0.1.0",
 	"sideEffects": false
 }

package/dist/types/components/inline.partial.d.ts

@@ -1 +1,86 @@
-export { default as Inline } from '@atlaskit/ds-explorations/inline';
+/** @jsx jsx */
+import { ReactNode } from 'react';
+export interface InlineProps {
+    /**
+     * Used to align children along the main axis.
+     */
+    alignBlock?: AlignBlock;
+    /**
+     * Used to align children along the cross axis.
+     */
+    alignInline?: AlignInline;
+    /**
+     * Used to set whether children are forced onto one line or will wrap onto multiple lines.
+     */
+    shouldWrap?: boolean;
+    /**
+     * Used to distribute the children along the main axis.
+     */
+    spread?: Spread;
+    /**
+     * Used to set whether the content should grow to fill the available space.
+     */
+    grow?: Grow;
+    /**
+     * Represents the space between each child.
+     */
+    space?: Space;
+    /**
+     * Renders a separator string between each child.
+     */
+    separator?: string;
+    /**
+     * A unique string that appears as data attribute data-testid in the rendered code, serving as a hook for automated tests.
+     */
+    testId?: string;
+    /**
+     * Elements to be rendered inside the Stack.
+     */
+    children: ReactNode;
+}
+export declare type AlignInline = 'start' | 'center' | 'end';
+export declare type AlignBlock = 'start' | 'center' | 'end' | 'baseline';
+export declare type Spread = 'space-between';
+export declare type Grow = 'hug' | 'fill';
+/**
+ * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ * @codegen <<SignedSource::e0d436d3312290a98dbfd91d90dd6b9e>>
+ * @codegenId spacing
+ * @codegenCommand yarn codegen-styles
+ * @codegenParams ["space"]
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::167d3b69b159ae33e74d4ea5ab7eade6>>
+ */
+declare const spaceMap: {
+    '0': import("@emotion/react").SerializedStyles;
+    '025': import("@emotion/react").SerializedStyles;
+    '050': import("@emotion/react").SerializedStyles;
+    '075': import("@emotion/react").SerializedStyles;
+    '100': import("@emotion/react").SerializedStyles;
+    '1000': import("@emotion/react").SerializedStyles;
+    '150': import("@emotion/react").SerializedStyles;
+    '200': import("@emotion/react").SerializedStyles;
+    '250': import("@emotion/react").SerializedStyles;
+    '300': import("@emotion/react").SerializedStyles;
+    '400': import("@emotion/react").SerializedStyles;
+    '500': import("@emotion/react").SerializedStyles;
+    '600': import("@emotion/react").SerializedStyles;
+    '800': import("@emotion/react").SerializedStyles;
+};
+export declare type Space = keyof typeof spaceMap;
+/**
+ * __Inline__
+ *
+ * Inline is a primitive component based on flexbox that manages the horizontal layout of direct children.
+ *
+ *
+ * @example
+ * ```tsx
+ *  <Inline>
+ *    <Box padding="space.100" backgroundColor="neutral"></Box>
+ *    <Box padding="space.100" backgroundColor="neutral"></Box>
+ *  </Inline>
+ * ```
+ *
+ */
+declare const Inline: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<InlineProps & import("react").RefAttributes<HTMLDivElement>>>;
+export default Inline;

package/dist/types/components/stack.partial.d.ts

@@ -1 +1,77 @@
-export { default as Stack } from '@atlaskit/ds-explorations/stack';
+/** @jsx jsx */
+import { ReactNode } from 'react';
+export interface StackProps {
+    /**
+     * Used to align children along the main axis.
+     */
+    alignBlock?: AlignBlock;
+    /**
+     * Used to align children along the cross axis.
+     */
+    alignInline?: AlignInline;
+    /**
+     * Used to distribute the children along the main axis.
+     */
+    spread?: Spread;
+    /**
+     * Used to set whether the content should grow to fill the available space.
+     */
+    grow?: Grow;
+    /**
+     * Represents the space between each child.
+     */
+    space?: Space;
+    /**
+     * A unique string that appears as data attribute data-testid in the rendered code, serving as a hook for automated tests.
+     */
+    testId?: string;
+    /**
+     * Elements to be rendered inside the Stack.
+     */
+    children: ReactNode;
+}
+export declare type AlignInline = 'start' | 'center' | 'end';
+export declare type AlignBlock = 'start' | 'center' | 'end';
+export declare type Spread = 'space-between';
+export declare type Grow = 'hug' | 'fill';
+/**
+ * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ * @codegen <<SignedSource::e0d436d3312290a98dbfd91d90dd6b9e>>
+ * @codegenId spacing
+ * @codegenCommand yarn codegen-styles
+ * @codegenParams ["space"]
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::167d3b69b159ae33e74d4ea5ab7eade6>>
+ */
+declare const spaceMap: {
+    '0': import("@emotion/react").SerializedStyles;
+    '025': import("@emotion/react").SerializedStyles;
+    '050': import("@emotion/react").SerializedStyles;
+    '075': import("@emotion/react").SerializedStyles;
+    '100': import("@emotion/react").SerializedStyles;
+    '1000': import("@emotion/react").SerializedStyles;
+    '150': import("@emotion/react").SerializedStyles;
+    '200': import("@emotion/react").SerializedStyles;
+    '250': import("@emotion/react").SerializedStyles;
+    '300': import("@emotion/react").SerializedStyles;
+    '400': import("@emotion/react").SerializedStyles;
+    '500': import("@emotion/react").SerializedStyles;
+    '600': import("@emotion/react").SerializedStyles;
+    '800': import("@emotion/react").SerializedStyles;
+};
+export declare type Space = keyof typeof spaceMap;
+/**
+ * __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>
+ * ```
+ *
+ */
+declare const Stack: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<StackProps & import("react").RefAttributes<HTMLDivElement>>>;
+export default Stack;

package/dist/types/index.d.ts

@@ -1,3 +1,3 @@
-export { Stack } from './components/stack.partial';
+export { default as Stack } from './components/stack.partial';
 export { Box } from './components/box';
-export { Inline } from './components/inline.partial';
+export { default as Inline } from './components/inline.partial';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/primitives",
-  "version": "0.0.2",
+  "version": "0.1.0",
   "description": "Primitives are token-backed low-level building blocks.",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -49,6 +49,7 @@
     "@af/codegen": "*",
     "@atlaskit/docs": "*",
     "@atlaskit/ds-lib": "*",
+    "@atlaskit/heading": "*",
     "@atlaskit/ssr": "*",
     "@atlaskit/visual-regression": "*",
     "@atlaskit/webdriver-runner": "*",
@@ -86,4 +87,4 @@
     }
   },
   "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.0"
-}
+}

package/report.api.md

@@ -16,14 +16,113 @@
 
 ```ts
 import { default as Box } from '@atlaskit/ds-explorations/box';
-import { default as Inline } from '@atlaskit/ds-explorations/inline';
-import { default as Stack } from '@atlaskit/ds-explorations/stack';
+import { ForwardRefExoticComponent } from 'react';
+import { MemoExoticComponent } from 'react';
+import { ReactNode } from 'react';
+import { RefAttributes } from 'react';
+import { SerializedStyles } from '@emotion/react';
+
+// @public (undocumented)
+type AlignBlock = 'center' | 'end' | 'start';
+
+// @public (undocumented)
+type AlignBlock_2 = 'baseline' | 'center' | 'end' | 'start';
+
+// @public (undocumented)
+type AlignInline = 'center' | 'end' | 'start';
+
+// @public (undocumented)
+type AlignInline_2 = 'center' | 'end' | 'start';
 
 export { Box };
 
-export { Inline };
+// @public (undocumented)
+type Grow = 'fill' | 'hug';
+
+// @public (undocumented)
+type Grow_2 = 'fill' | 'hug';
+
+// @public
+export const Inline: MemoExoticComponent<
+  ForwardRefExoticComponent<InlineProps & RefAttributes<HTMLDivElement>>
+>;
+
+// @public (undocumented)
+interface InlineProps {
+  alignBlock?: AlignBlock_2;
+  alignInline?: AlignInline_2;
+  children: ReactNode;
+  grow?: Grow_2;
+  separator?: string;
+  shouldWrap?: boolean;
+  space?: Space_2;
+  spread?: Spread_2;
+  testId?: string;
+}
 
-export { Stack };
+// @public (undocumented)
+type Space = keyof typeof spaceMap;
+
+// @public (undocumented)
+type Space_2 = keyof typeof spaceMap_2;
+
+// @public
+const spaceMap: {
+  '0': SerializedStyles;
+  '025': SerializedStyles;
+  '050': SerializedStyles;
+  '075': SerializedStyles;
+  '100': SerializedStyles;
+  '1000': SerializedStyles;
+  '150': SerializedStyles;
+  '200': SerializedStyles;
+  '250': SerializedStyles;
+  '300': SerializedStyles;
+  '400': SerializedStyles;
+  '500': SerializedStyles;
+  '600': SerializedStyles;
+  '800': SerializedStyles;
+};
+
+// @public
+const spaceMap_2: {
+  '0': SerializedStyles;
+  '025': SerializedStyles;
+  '050': SerializedStyles;
+  '075': SerializedStyles;
+  '100': SerializedStyles;
+  '1000': SerializedStyles;
+  '150': SerializedStyles;
+  '200': SerializedStyles;
+  '250': SerializedStyles;
+  '300': SerializedStyles;
+  '400': SerializedStyles;
+  '500': SerializedStyles;
+  '600': SerializedStyles;
+  '800': SerializedStyles;
+};
+
+// @public (undocumented)
+type Spread = 'space-between';
+
+// @public (undocumented)
+type Spread_2 = 'space-between';
+
+// @public
+export const Stack: MemoExoticComponent<
+  ForwardRefExoticComponent<StackProps & RefAttributes<HTMLDivElement>>
+>;
+
+// @public (undocumented)
+interface StackProps {
+  alignBlock?: AlignBlock;
+  alignInline?: AlignInline;
+  children: ReactNode;
+  grow?: Grow;
+  space?: Space;
+  spread?: Spread;
+  testId?: string;
+}
 
 // (No @packageDocumentation comment for this package)
 ```

package/scripts/codegen-styles.tsx

@@ -60,8 +60,8 @@ Promise.all(
     return Promise.all(
       [
         { path: ['internal', 'box.partial.tsx'] },
-        // { target: 'stack.partial.tsx' },
-        // { target: 'inline.partial.tsx' },
+        { path: ['inline.partial.tsx'] },
+        { path: ['stack.partial.tsx'] },
       ].map(({ path }) => {
         const targetPath = join(__dirname, '../', 'src', 'components', ...path);
 

package/scripts/spacing-codegen-template.tsx

@@ -30,6 +30,9 @@ const spacingProperties = {
   gap: {
     cssProperty: 'gap',
   },
+  space: {
+    cssProperty: 'gap',
+  },
   columnGap: {
     cssProperty: 'columnGap',
   },
@@ -38,7 +41,10 @@ const spacingProperties = {
   },
 } as const;
 
-const onlySpaceTokens = tokens.filter(token => token.name.startsWith('space.'));
+const spacingTokenPrefix = 'space.';
+const onlySpaceTokens = tokens.filter(token =>
+  token.name.startsWith(spacingTokenPrefix),
+);
 
 const activeTokens = onlySpaceTokens.map(t => ({
   name: t.name,
@@ -61,7 +67,10 @@ const ${spacingProperty}Map = {
   ${activeTokens
     .sort((a, b) => (a.name < b.name ? -1 : 1))
     .map(token => {
-      const propName = token.name;
+      const propName =
+        spacingProperty === 'space'
+          ? token.name.replace(spacingTokenPrefix, '')
+          : token.name;
       return `'${propName}': ${tokenToStyle(
         cssProperty,
         token.name,