@atlaskit/primitives 0.6.0 → 0.7.0

package/scripts/border-codegen-template.tsx

@@ -0,0 +1,79 @@
+import prettier from 'prettier';
+import parserTypeScript from 'prettier/parser-typescript';
+
+// eslint-disable-next-line @atlassian/tangerine/import/entry-points
+import tokens from '@atlaskit/tokens/src/artifacts/tokens-raw/atlassian-shape';
+
+import { capitalize, constructTokenFunctionCall } from './utils';
+
+type Token = {
+  token: string;
+  fallback: string;
+  isDeprecated: boolean;
+};
+
+const tokenStyles = {
+  width: {
+    objectName: 'borderWidth',
+    filterPrefix: 'border.width.',
+    renamePrefix: 'border.',
+    cssProperty: 'borderWidth',
+    filterFn: <T extends Token>(t: T) =>
+      t.token.startsWith(tokenStyles.width.filterPrefix),
+  },
+  radius: {
+    objectName: 'borderRadius',
+    filterPrefix: 'border.radius.',
+    renamePrefix: 'border.',
+    cssProperty: 'borderRadius',
+    filterFn: <T extends Token>(t: T) =>
+      t.token.startsWith(tokenStyles.radius.filterPrefix),
+  },
+} as const;
+
+const activeTokens = tokens
+  .filter(t => t.attributes.state !== 'deleted')
+  .map(
+    (t): Token => ({
+      token: t.name,
+      fallback: t.value as string,
+      isDeprecated: t.attributes.state === 'deprecated',
+    }),
+  );
+
+export const createBorderStylesFromTemplate = (
+  property: keyof typeof tokenStyles,
+) => {
+  if (!tokenStyles[property]) {
+    throw new Error(`[codegen] Unknown option found "${property}"`);
+  }
+
+  const { filterFn, renamePrefix, objectName } = tokenStyles[property];
+
+  return (
+    prettier.format(
+      `
+export const ${objectName}Map = {
+  ${activeTokens
+    .filter(filterFn)
+    .map(t => {
+      const propName = t.token.replace(renamePrefix, '');
+      return `
+        ${t.isDeprecated ? '// @deprecated' : ''}
+        '${propName}': ${constructTokenFunctionCall(
+        t.token,
+        t.fallback,
+      )}`.trim();
+    })
+    .join(',\n\t')}
+} as const;`,
+      {
+        singleQuote: true,
+        parser: 'typescript',
+        trailingComma: 'all',
+        plugins: [parserTypeScript],
+      },
+    ) +
+    `\nexport type ${capitalize(objectName)} = keyof typeof ${objectName}Map;\n`
+  );
+};

package/scripts/codegen-file-templates/align-self.tsx

@@ -0,0 +1,9 @@
+export const alignSelfMap = {
+  center: 'center',
+  start: 'start',
+  stretch: 'stretch',
+  end: 'end',
+  baseline: 'baseline',
+} as const;
+
+export type AlignSelf = keyof typeof alignSelfMap;

package/scripts/codegen-file-templates/border-style.tsx

@@ -0,0 +1,6 @@
+export const borderStyleMap = {
+  none: 'none',
+  solid: 'solid',
+} as const;
+
+export type BorderStyle = keyof typeof borderStyleMap;

package/scripts/codegen-file-templates/dimensions.tsx

@@ -0,0 +1,17 @@
+export const dimensionMap = {
+  '100%': '100%',
+  'size.100': '16px',
+  'size.200': '24px',
+  'size.300': '32px',
+  'size.400': '40px',
+  'size.500': '48px',
+  'size.600': '96px',
+  'size.1000': '192px',
+} as const;
+
+export type Width = keyof typeof dimensionMap;
+export type Height = keyof typeof dimensionMap;
+export type MinWidth = keyof typeof dimensionMap;
+export type MaxWidth = keyof typeof dimensionMap;
+export type MinHeight = keyof typeof dimensionMap;
+export type MaxHeight = keyof typeof dimensionMap;

package/scripts/codegen-file-templates/display.tsx

@@ -0,0 +1,6 @@
+export type Display =
+  | 'flex'
+  | 'block'
+  | 'inline'
+  | 'inline-block'
+  | 'inline-flex';

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

@@ -0,0 +1,6 @@
+export const flexGrowMap = {
+  '0': 0,
+  '1': 1,
+} as const;
+
+export type FlexGrow = keyof typeof flexGrowMap;

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

@@ -0,0 +1,6 @@
+export const flexShrinkMap = {
+  '0': 0,
+  '1': 1,
+} as const;
+
+export type FlexShrink = keyof typeof flexShrinkMap;

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

@@ -0,0 +1,5 @@
+export const flexMap = {
+  '1': 1,
+} as const;
+
+export type Flex = keyof typeof flexMap;

package/scripts/codegen-file-templates/layer.tsx

@@ -0,0 +1,13 @@
+export const layerMap = {
+  card: 100,
+  navigation: 200,
+  dialog: 300,
+  layer: 400,
+  blanket: 500,
+  modal: 510,
+  flag: 600,
+  spotlight: 700,
+  tooltip: 800,
+} as const;
+
+export type Layer = keyof typeof layerMap;

package/scripts/codegen-file-templates/overflow.tsx

@@ -0,0 +1,20 @@
+export const overflowMap = {
+  auto: 'auto',
+  hidden: 'hidden',
+} as const;
+
+export type Overflow = keyof typeof overflowMap;
+
+export const overflowInlineMap = {
+  auto: 'auto',
+  hidden: 'hidden',
+} as const;
+
+export type OverflowInline = keyof typeof overflowInlineMap;
+
+export const overflowBlockMap = {
+  auto: 'auto',
+  hidden: 'hidden',
+} as const;
+
+export type OverflowBlock = keyof typeof overflowBlockMap;

package/scripts/codegen-file-templates/position.tsx

@@ -0,0 +1,8 @@
+export const positionMap = {
+  absolute: 'absolute',
+  fixed: 'fixed',
+  relative: 'relative',
+  static: 'static',
+} as const;
+
+export type Position = keyof typeof positionMap;

package/scripts/codegen-styles.tsx

@@ -1,139 +1,99 @@
 /* eslint-disable no-console */
-import { writeFile } from 'fs/promises';
+import { readdirSync, writeFileSync } from 'fs';
 import { join } from 'path';
 
-import { createPartialSignedArtifact, createSignedArtifact } from '@af/codegen';
+import { createPartialSignedArtifact } from '@af/codegen';
 
+import { createBorderStylesFromTemplate } from './border-codegen-template';
 import { createColorStylesFromTemplate } from './color-codegen-template';
-import { createColorMapTemplate } from './color-map-template';
-import { createDimensionStylesFromTemplate } from './dimension-codegen-template';
-import { createStylesFromTemplate } from './misc-codegen-template';
+import { createStylesFromFileTemplate } from './misc-codegen-template';
 import { createSpacingStylesFromTemplate } from './spacing-codegen-template';
 
-const colorMapOutputFolder = join(__dirname, '../', 'src', 'internal');
 const colorTokensDependencyPath = require.resolve(
   '../../tokens/src/artifacts/tokens-raw/atlassian-light',
 );
 const spacingTokensDependencyPath = require.resolve(
   '../../tokens/src/artifacts/tokens-raw/atlassian-spacing',
 );
+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));
 
-const primitivesFileNames = {
-  'internal-box': 'base-box.partial.tsx',
-  box: 'box.tsx',
-  inline: 'inline.partial.tsx',
-  stack: 'stack.partial.tsx',
-};
-
-writeFile(
-  join(colorMapOutputFolder, 'color-map.tsx'),
-  createSignedArtifact(createColorMapTemplate(), 'yarn codegen-styles', {
-    description:
-      'The color map is used to map a background color token to a matching text color that will meet contrast.',
-    dependencies: [colorTokensDependencyPath],
-    outputFolder: colorMapOutputFolder,
-  }),
-).then(() => console.log(join(colorMapOutputFolder, 'color-map.tsx')));
-
-// generate colors
-Promise.all(
-  [{ target: primitivesFileNames['internal-box'] }].map(({ target }) => {
-    const targetPath = join(
-      __dirname,
-      '../',
-      'src',
-      'components',
-      'internal',
-      target,
-    );
-
-    const source = createPartialSignedArtifact(
-      options => options.map(createColorStylesFromTemplate).join('\n'),
-      'yarn codegen-styles',
-      {
-        id: 'colors',
-        absoluteFilePath: targetPath,
-        dependencies: [colorTokensDependencyPath],
-      },
-    );
-
-    return writeFile(targetPath, source).then(() =>
-      console.log(`${targetPath} written!`),
-    );
-  }),
-)
-  .then(() => {
-    // generate spacing values
-    return Promise.all(
-      [
-        { path: ['internal', primitivesFileNames['internal-box']] },
-        { path: [primitivesFileNames.inline] },
-        { path: [primitivesFileNames.stack] },
-      ].map(({ path }) => {
-        const targetPath = join(__dirname, '../', 'src', 'components', ...path);
-
-        const source = createPartialSignedArtifact(
-          options => options.map(createSpacingStylesFromTemplate).join('\n'),
-          'yarn codegen-styles',
-          {
-            id: 'spacing',
-            absoluteFilePath: targetPath,
-            dependencies: [spacingTokensDependencyPath],
-          },
-        );
-
-        return writeFile(targetPath, source).then(() =>
-          console.log(`${targetPath} written!`),
-        );
-      }),
-    );
-  })
-  .then(() => {
-    // generate other values
-    return Promise.all(
-      [{ path: ['internal', primitivesFileNames['internal-box']] }].map(
-        ({ path }) => {
-          const targetPath = join(
-            __dirname,
-            '../',
-            'src',
-            'components',
-            ...path,
-          );
-
-          const source = createPartialSignedArtifact(
-            options => options.map(createStylesFromTemplate).join('\n'),
-            'yarn codegen-styles',
-            { id: 'misc', absoluteFilePath: targetPath },
-          );
+new Promise(() => {
+  const targetPath = join(
+    __dirname,
+    '../',
+    'src',
+    'internal',
+    'style-maps.partial.tsx',
+  );
 
-          return writeFile(targetPath, source).then(() =>
-            console.log(`${targetPath} written!`),
-          );
+  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')),
         },
       ),
-    );
-  })
-  .then(() => {
-    const targetPath = join(
-      __dirname,
-      '../',
-      'src',
-      'components',
-      'internal',
-      primitivesFileNames['internal-box'],
-    );
-
-    const source = createPartialSignedArtifact(
-      options => options.map(createDimensionStylesFromTemplate).join('\n'),
-      'yarn codegen-styles',
-      {
-        id: 'dimensions',
-        absoluteFilePath: targetPath,
-      },
-    );
+    // 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,
+        },
+      ),
+  ];
 
-    return writeFile(targetPath, source).then(() =>
-      console.log(`${targetPath} written!`),
-    );
+  sourceFns.forEach(sourceFn => {
+    writeFileSync(targetPath, sourceFn());
   });
+
+  console.log(`${targetPath} written!`);
+});

package/scripts/color-codegen-template.tsx

@@ -8,18 +8,13 @@ import tokens from '@atlaskit/tokens/src/artifacts/tokens-raw/atlassian-light';
 
 import {
   capitalize,
-  compose,
-  isHovered,
-  isPressed,
-  not,
-  pick,
-  ShadowDefintion,
-  tokenToStyle,
+  constructTokenFunctionCall,
+  ShadowDefinition,
 } from './utils';
 
 type Token = {
   token: string;
-  fallback: string | ShadowDefintion;
+  fallback: string | ShadowDefinition;
   isDeprecated: boolean;
 };
 
@@ -61,18 +56,14 @@ const bothTokens = tokens.map((t, i) => [t, legacyTokens[i]]);
 
 const activeTokens = bothTokens
   .filter(([t]) => t.attributes.state !== 'deleted')
-  .map(t => {
-    return t;
-  })
+  .map(t => t)
   .map(
     ([t, legacy]): Token => ({
       token: t.name,
-      fallback: legacy.value as string | ShadowDefintion,
+      fallback: legacy.value as string | ShadowDefinition,
       isDeprecated: t.attributes.state === 'deprecated',
     }),
-  )
-  .filter(compose(pick('token'), not(isPressed)))
-  .filter(compose(pick('token'), not(isHovered)));
+  );
 
 export const createColorStylesFromTemplate = (
   colorProperty: keyof typeof tokenStyles,
@@ -81,13 +72,12 @@ export const createColorStylesFromTemplate = (
     throw new Error(`[codegen] Unknown option found "${colorProperty}"`);
   }
 
-  const { prefix, cssProperty, filterFn, objectName } =
-    tokenStyles[colorProperty];
+  const { prefix, filterFn, objectName } = tokenStyles[colorProperty];
 
   return (
     prettier.format(
       `
-const ${objectName}Map = {
+export const ${objectName}Map = {
   ${activeTokens
     .filter(filterFn)
     // @ts-ignore
@@ -97,7 +87,7 @@ const ${objectName}Map = {
       const propName = t.token.replace(prefix, '');
       return `
         ${t.isDeprecated ? '// @deprecated' : ''}
-        '${propName}': ${tokenToStyle(cssProperty, t.token, t.fallback)}
+        '${propName}': ${constructTokenFunctionCall(t.token, t.fallback)}
       `.trim();
     })
     .join(',\n\t')}

package/scripts/misc-codegen-template.tsx

@@ -1,43 +1,23 @@
-import prettier from 'prettier';
-import parserTypeScript from 'prettier/parser-typescript';
+import { readFileSync } from 'fs';
+import { join } from 'path';
 
-import { 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,
-  },
-};
-
-export const createStylesFromTemplate = (
-  property: keyof typeof styleProperties,
+export const createStylesFromFileTemplate = (
+  property:
+    | 'align-self'
+    | 'border-color'
+    | 'border-radius'
+    | 'border-style'
+    | 'border-width'
+    | 'dimensions'
+    | 'display'
+    | 'flex-grow'
+    | 'flex-shrink'
+    | 'flex'
+    | 'layer'
+    | 'overflow'
+    | 'position',
 ) => {
-  if (!styleProperties[property]) {
-    throw new Error(`[codegen] Unknown option found "${property}"`);
-  }
-
-  return prettier.format(
-    `
-const ${property}Map = {
-  ${Object.keys(styleProperties[property])
-    .map(key => {
-      return `'${key}': css({ zIndex: LAYERS['${key}'] })`;
-    })
-    .join(',\n\t')}
-} as const;`,
-    {
-      singleQuote: true,
-      trailingComma: 'all',
-      parser: 'typescript',
-      plugins: [parserTypeScript],
-    },
-  );
+  const path = join(__dirname, './codegen-file-templates', `${property}.tsx`);
+  const source = readFileSync(path);
+  return source;
 };

package/scripts/spacing-codegen-template.tsx

@@ -3,7 +3,7 @@ import parserTypeScript from 'prettier/parser-typescript';
 
 import { spacing as tokens } from '@atlaskit/tokens/tokens-raw';
 
-import { capitalize, tokenToStyle } from './utils';
+import { capitalize, constructTokenFunctionCall } from './utils';
 
 const spacingProperties: Record<
   string,
@@ -56,12 +56,7 @@ export const createSpacingStylesFromTemplate = (
   return (
     prettier.format(
       `
-  const ${spacingProperty}Map = Object.fromEntries(
-    [
-      '${cssProperties.join("','")}',
-    ].map((property: string) => [
-      property,
-      {
+  export const ${spacingProperty}Map = {
     ${activeTokens
       .sort((a, b) =>
         a.name.localeCompare(b.name, undefined, { numeric: true }),
@@ -70,14 +65,12 @@ export const createSpacingStylesFromTemplate = (
         const propName = propNameFormatter
           ? propNameFormatter(token.name)
           : token.name;
-        return `'${propName}': ${tokenToStyle(
-          '[property]' as any,
+        return `'${propName}': ${constructTokenFunctionCall(
           token.name,
           token.fallback,
         )}`;
       })}
-    } as const,
-  ]));`,
+    } as const;`,
       {
         singleQuote: true,
         trailingComma: 'all',
@@ -90,7 +83,7 @@ export const createSpacingStylesFromTemplate = (
         cssProperty =>
           `\nexport type ${capitalize(
             cssProperty,
-          )} = keyof typeof ${spacingProperty}Map.${cssProperty};`,
+          )} = keyof typeof ${spacingProperty}Map;`,
       )
       .join('') +
       '\n')

package/scripts/utils.tsx

@@ -1,12 +1,12 @@
 import type { CSSProperties } from 'react';
 
-export const tokenCall = (token: string, fallback: string | ShadowDefintion) =>
+export const tokenCall = (token: string, fallback: string | ShadowDefinition) =>
   `token('${token}', '${fallback}')`;
 
 export const tokenToStyle = (
   prop: keyof CSSProperties,
   token: string,
-  fallback: string | ShadowDefintion,
+  fallback: string | ShadowDefinition,
 ) => {
   if (Array.isArray(fallback)) {
     fallback = constructShadow(fallback);
@@ -14,7 +14,18 @@ export const tokenToStyle = (
   return `css({\n\t${prop}: ${tokenCall(token, fallback)}\n})`;
 };
 
-export type ShadowDefintion = Array<{
+export const constructTokenFunctionCall = (
+  token: string,
+  fallback: string | ShadowDefinition,
+) => {
+  if (Array.isArray(fallback)) {
+    fallback = constructShadow(fallback);
+  }
+
+  return `token('${token}', '${fallback}')`;
+};
+
+export type ShadowDefinition = Array<{
   radius: number;
   offset: {
     x: number;
@@ -24,7 +35,7 @@ export type ShadowDefintion = Array<{
   opacity: number;
 }>;
 
-const constructShadow = (shadowObject: ShadowDefintion) => {
+const constructShadow = (shadowObject: ShadowDefinition) => {
   return shadowObject
     .map(
       shadow =>