@atlaskit/primitives 0.0.2 → 0.1.1

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.1",
   "description": "Primitives are token-backed low-level building blocks.",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -38,7 +38,7 @@
   },
   "dependencies": {
     "@atlaskit/ds-explorations": "^2.0.1",
-    "@atlaskit/tokens": "^1.1.0",
+    "@atlaskit/tokens": "^1.2.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1"
   },
@@ -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,

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

@@ -5,14 +5,109 @@
 ```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;
+}
+
+// @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>>>;
 
-export { Stack }
+// @public (undocumented)
+interface StackProps {
+    alignBlock?: AlignBlock;
+    alignInline?: AlignInline;
+    children: ReactNode;
+    grow?: Grow;
+    space?: Space;
+    spread?: Spread;
+    testId?: string;
+}
 
 // (No @packageDocumentation comment for this package)