@atlaskit/primitives 0.6.0 → 0.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (62) hide show
  1. package/.eslintrc.js +3 -0
  2. package/CHANGELOG.md +8 -0
  3. package/dist/cjs/components/box.js +3 -40
  4. package/dist/cjs/components/inline.partial.js +1 -0
  5. package/dist/cjs/components/internal/base-box.js +61 -0
  6. package/dist/cjs/components/stack.partial.js +1 -0
  7. package/dist/cjs/internal/style-maps.partial.js +370 -0
  8. package/dist/cjs/internal/xcss.js +17 -7
  9. package/dist/cjs/version.json +1 -1
  10. package/dist/es2019/components/box.js +1 -37
  11. package/dist/es2019/components/inline.partial.js +1 -0
  12. package/dist/es2019/components/internal/base-box.js +52 -0
  13. package/dist/es2019/components/stack.partial.js +1 -0
  14. package/dist/es2019/internal/style-maps.partial.js +341 -0
  15. package/dist/es2019/internal/xcss.js +13 -7
  16. package/dist/es2019/version.json +1 -1
  17. package/dist/esm/components/box.js +2 -40
  18. package/dist/esm/components/inline.partial.js +1 -0
  19. package/dist/esm/components/internal/base-box.js +53 -0
  20. package/dist/esm/components/stack.partial.js +1 -0
  21. package/dist/esm/internal/style-maps.partial.js +340 -0
  22. package/dist/esm/internal/xcss.js +17 -7
  23. package/dist/esm/version.json +1 -1
  24. package/dist/types/components/box.d.ts +1 -1
  25. package/dist/types/components/internal/base-box.d.ts +83 -0
  26. package/dist/types/components/types.d.ts +1 -1
  27. package/dist/types/internal/style-maps.partial.d.ts +396 -0
  28. package/dist/types/internal/xcss.d.ts +5 -5
  29. package/package.json +2 -1
  30. package/report.api.md +206 -327
  31. package/scripts/__tests__/__snapshots__/codegen.test.tsx.snap +313 -363
  32. package/scripts/border-codegen-template.tsx +79 -0
  33. package/scripts/codegen-file-templates/align-self.tsx +9 -0
  34. package/scripts/codegen-file-templates/border-style.tsx +6 -0
  35. package/scripts/codegen-file-templates/dimensions.tsx +17 -0
  36. package/scripts/codegen-file-templates/display.tsx +6 -0
  37. package/scripts/codegen-file-templates/flex-grow.tsx +6 -0
  38. package/scripts/codegen-file-templates/flex-shrink.tsx +6 -0
  39. package/scripts/codegen-file-templates/flex.tsx +5 -0
  40. package/scripts/codegen-file-templates/layer.tsx +13 -0
  41. package/scripts/codegen-file-templates/overflow.tsx +20 -0
  42. package/scripts/codegen-file-templates/position.tsx +8 -0
  43. package/scripts/codegen-styles.tsx +80 -120
  44. package/scripts/color-codegen-template.tsx +9 -19
  45. package/scripts/misc-codegen-template.tsx +20 -40
  46. package/scripts/spacing-codegen-template.tsx +5 -12
  47. package/scripts/utils.tsx +15 -4
  48. package/tmp/api-report-tmp.d.ts +201 -326
  49. package/dist/cjs/components/internal/base-box.partial.js +0 -825
  50. package/dist/cjs/internal/color-map.js +0 -42
  51. package/dist/cjs/internal/style-maps.js +0 -130
  52. package/dist/es2019/components/internal/base-box.partial.js +0 -842
  53. package/dist/es2019/internal/color-map.js +0 -35
  54. package/dist/es2019/internal/style-maps.js +0 -117
  55. package/dist/esm/components/internal/base-box.partial.js +0 -820
  56. package/dist/esm/internal/color-map.js +0 -35
  57. package/dist/esm/internal/style-maps.js +0 -117
  58. package/dist/types/components/internal/base-box.partial.d.ts +0 -521
  59. package/dist/types/internal/color-map.d.ts +0 -36
  60. package/dist/types/internal/style-maps.d.ts +0 -151
  61. package/scripts/color-map-template.tsx +0 -52
  62. package/scripts/dimension-codegen-template.tsx +0 -75
@@ -1,151 +0,0 @@
1
- export declare const backgroundColorMap: {
2
- readonly disabled: "var(--ds-background-disabled)";
3
- readonly input: "var(--ds-background-input)";
4
- readonly 'inverse.subtle': "var(--ds-background-inverse-subtle)";
5
- readonly neutral: "var(--ds-background-neutral)";
6
- readonly 'neutral.subtle': "var(--ds-background-neutral-subtle)";
7
- readonly 'neutral.bold': "var(--ds-background-neutral-bold)";
8
- readonly selected: "var(--ds-background-selected)";
9
- readonly 'selected.bold': "var(--ds-background-selected-bold)";
10
- readonly 'brand.bold': "var(--ds-background-brand-bold)";
11
- readonly danger: "var(--ds-background-danger)";
12
- readonly 'danger.bold': "var(--ds-background-danger-bold)";
13
- readonly warning: "var(--ds-background-warning)";
14
- readonly 'warning.bold': "var(--ds-background-warning-bold)";
15
- readonly success: "var(--ds-background-success)";
16
- readonly 'success.bold': "var(--ds-background-success-bold)";
17
- readonly discovery: "var(--ds-background-discovery)";
18
- readonly 'discovery.bold': "var(--ds-background-discovery-bold)";
19
- readonly information: "var(--ds-background-information)";
20
- readonly 'information.bold': "var(--ds-background-information-bold)";
21
- readonly 'color.blanket': "var(--ds-blanket)";
22
- readonly 'color.blanket.selected': "var(--ds-blanket-selected)";
23
- readonly 'color.blanket.danger': "var(--ds-blanket-danger)";
24
- readonly 'elevation.surface': "var(--ds-surface)";
25
- readonly 'elevation.surface.overlay': "var(--ds-surface-overlay)";
26
- readonly 'elevation.surface.raised': "var(--ds-surface-raised)";
27
- readonly 'elevation.surface.sunken': "var(--ds-surface-sunken)";
28
- };
29
- export declare type BackgroundColor = keyof typeof backgroundColorMap;
30
- export declare const borderColorMap: {
31
- readonly 'color.border': "var(--ds-border)";
32
- readonly disabled: "var(--ds-border-disabled)";
33
- readonly focused: "var(--ds-border-focused)";
34
- readonly input: "var(--ds-border-input)";
35
- readonly inverse: "var(--ds-border-inverse)";
36
- readonly selected: "var(--ds-border-selected)";
37
- readonly brand: "var(--ds-border-brand)";
38
- readonly danger: "var(--ds-border-danger)";
39
- readonly warning: "var(--ds-border-warning)";
40
- readonly success: "var(--ds-border-success)";
41
- readonly discovery: "var(--ds-border-discovery)";
42
- readonly information: "var(--ds-border-information)";
43
- readonly bold: "var(--ds-border-bold)";
44
- };
45
- export declare type BorderColor = keyof typeof borderColorMap;
46
- export declare const borderWidthMap: {
47
- readonly 'size.0': "var(--ds-width-0)";
48
- readonly 'size.050': "var(--ds-width-050)";
49
- readonly 'size.100': "var(--ds-width-100)";
50
- };
51
- export declare type BorderWidth = keyof typeof borderWidthMap;
52
- export declare const borderRadiusMap: {
53
- readonly 'radius.400': "var(--ds-radius-400)";
54
- readonly 'radius.300': "var(--ds-radius-300)";
55
- readonly 'radius.100': "var(--ds-radius-100)";
56
- readonly 'radius.050': "var(--ds-radius-050)";
57
- readonly 'radius.200': "var(--ds-radius-200)";
58
- };
59
- export declare type BorderRadius = keyof typeof borderRadiusMap;
60
- export declare const paddingMap: {
61
- readonly 'space.0': "var(--ds-space-0)";
62
- readonly 'space.025': "var(--ds-space-025)";
63
- readonly 'space.050': "var(--ds-space-050)";
64
- readonly 'space.075': "var(--ds-space-075)";
65
- readonly 'space.100': "var(--ds-space-100)";
66
- readonly 'space.150': "var(--ds-space-150)";
67
- readonly 'space.200': "var(--ds-space-200)";
68
- readonly 'space.250': "var(--ds-space-250)";
69
- readonly 'space.300': "var(--ds-space-300)";
70
- readonly 'space.400': "var(--ds-space-400)";
71
- readonly 'space.500': "var(--ds-space-500)";
72
- readonly 'space.600': "var(--ds-space-600)";
73
- readonly 'space.800': "var(--ds-space-800)";
74
- readonly 'space.1000': "var(--ds-space-1000)";
75
- };
76
- export declare type Padding = keyof typeof paddingMap;
77
- export declare type PaddingBlock = keyof typeof paddingMap;
78
- export declare type PaddingBlockStart = keyof typeof paddingMap;
79
- export declare type PaddingBlockEnd = keyof typeof paddingMap;
80
- export declare type PaddingInline = keyof typeof paddingMap;
81
- export declare type PaddingInlineStart = keyof typeof paddingMap;
82
- export declare type PaddingInlineEnd = keyof typeof paddingMap;
83
- export declare const textColorMap: {
84
- readonly 'color.text': "var(--ds-text)";
85
- readonly 'accent.red': "var(--ds-text-accent-red)";
86
- readonly 'accent.red.bolder': "var(--ds-text-accent-red-bolder)";
87
- readonly 'accent.orange': "var(--ds-text-accent-orange)";
88
- readonly 'accent.orange.bolder': "var(--ds-text-accent-orange-bolder)";
89
- readonly 'accent.yellow': "var(--ds-text-accent-yellow)";
90
- readonly 'accent.yellow.bolder': "var(--ds-text-accent-yellow-bolder)";
91
- readonly 'accent.green': "var(--ds-text-accent-green)";
92
- readonly 'accent.green.bolder': "var(--ds-text-accent-green-bolder)";
93
- readonly 'accent.teal': "var(--ds-text-accent-teal)";
94
- readonly 'accent.teal.bolder': "var(--ds-text-accent-teal-bolder)";
95
- readonly 'accent.blue': "var(--ds-text-accent-blue)";
96
- readonly 'accent.blue.bolder': "var(--ds-text-accent-blue-bolder)";
97
- readonly 'accent.purple': "var(--ds-text-accent-purple)";
98
- readonly 'accent.purple.bolder': "var(--ds-text-accent-purple-bolder)";
99
- readonly 'accent.magenta': "var(--ds-text-accent-magenta)";
100
- readonly 'accent.magenta.bolder': "var(--ds-text-accent-magenta-bolder)";
101
- readonly 'accent.gray': "var(--ds-text-accent-gray)";
102
- readonly 'accent.gray.bolder': "var(--ds-text-accent-gray-bolder)";
103
- readonly disabled: "var(--ds-text-disabled)";
104
- readonly inverse: "var(--ds-text-inverse)";
105
- readonly selected: "var(--ds-text-selected)";
106
- readonly brand: "var(--ds-text-brand)";
107
- readonly danger: "var(--ds-text-danger)";
108
- readonly warning: "var(--ds-text-warning)";
109
- readonly 'warning.inverse': "var(--ds-text-warning-inverse)";
110
- readonly success: "var(--ds-text-success)";
111
- readonly discovery: "var(--ds-text-discovery)";
112
- readonly information: "var(--ds-text-information)";
113
- readonly subtlest: "var(--ds-text-subtlest)";
114
- readonly subtle: "var(--ds-text-subtle)";
115
- };
116
- export declare type TextColor = keyof typeof textColorMap;
117
- export declare const dimensionMap: {
118
- readonly '100%': "100%";
119
- readonly 'size.100': "16px";
120
- readonly 'size.200': "24px";
121
- readonly 'size.300': "32px";
122
- readonly 'size.400': "40px";
123
- readonly 'size.500': "48px";
124
- readonly 'size.600': "96px";
125
- readonly 'size.1000': "192px";
126
- };
127
- export declare type Width = keyof typeof dimensionMap;
128
- export declare type Height = keyof typeof dimensionMap;
129
- export declare type MinWidth = keyof typeof dimensionMap;
130
- export declare type MaxWidth = keyof typeof dimensionMap;
131
- export declare type MinHeight = keyof typeof dimensionMap;
132
- export declare type MaxHeight = keyof typeof dimensionMap;
133
- export declare type TokenisedProps = {
134
- backgroundColor?: BackgroundColor;
135
- borderColor?: BorderColor;
136
- borderWidth?: BorderWidth;
137
- color?: TextColor;
138
- height?: Height;
139
- minHeight?: MinHeight;
140
- minWidth?: MinWidth;
141
- maxHeight?: MaxHeight;
142
- maxWidth?: MaxWidth;
143
- padding?: Padding;
144
- paddingBlock?: Padding;
145
- paddingInline?: Padding;
146
- paddingBlockStart?: Padding;
147
- paddingBlockEnd?: Padding;
148
- paddingInlineStart?: Padding;
149
- paddingInlineEnd?: Padding;
150
- width?: Width;
151
- };
@@ -1,52 +0,0 @@
1
- import prettier from 'prettier';
2
- import parserTypeScript from 'prettier/parser-typescript';
3
-
4
- // eslint-disable-next-line @atlassian/tangerine/import/entry-points
5
- import tokens from '@atlaskit/tokens/src/artifacts/tokens-raw/atlassian-light';
6
-
7
- import { compose, isAccent, not, pick } from './utils';
8
-
9
- type Token = {
10
- token: string;
11
- fallback: string;
12
- };
13
-
14
- const activeTokens = tokens
15
- .filter(
16
- t =>
17
- t.attributes.state !== 'deleted' && t.attributes.state !== 'deprecated',
18
- )
19
- .map(
20
- (t): Token => ({
21
- token: t.name,
22
- fallback: t.value as string,
23
- }),
24
- )
25
- .filter(compose(pick('token'), not(isAccent)))
26
- .filter(t => t.token.includes('background'))
27
- .filter(t => t.token.includes('bold'))
28
- // @ts-ignore
29
- .map(t => ({ ...t, token: t.token.replaceAll('.[default]', '') }));
30
-
31
- export const createColorMapTemplate = () => {
32
- return prettier.format(
33
- `
34
- export default {
35
- ${activeTokens
36
- .map(t => {
37
- // handle the default case eg color.border or color.text
38
- const propName = t.token.replace('color.background.', '');
39
- return `'${propName}': '${
40
- propName.includes('warning') ? 'warning.inverse' : 'inverse'
41
- }'`;
42
- })
43
- .join(',\n\t')}
44
- } as const;`,
45
- {
46
- singleQuote: true,
47
- parser: 'typescript',
48
- trailingComma: 'all',
49
- plugins: [parserTypeScript],
50
- },
51
- );
52
- };
@@ -1,75 +0,0 @@
1
- import prettier from 'prettier';
2
- import parserTypeScript from 'prettier/parser-typescript';
3
-
4
- import { capitalize } from './utils';
5
-
6
- const dimensionProperties = {
7
- width: {
8
- cssProperty: 'width',
9
- },
10
- height: {
11
- cssProperty: 'height',
12
- },
13
- minWidth: {
14
- cssProperty: 'minWidth',
15
- },
16
- maxWidth: {
17
- cssProperty: 'maxWidth',
18
- },
19
- minHeight: {
20
- cssProperty: 'minHeight',
21
- },
22
- maxHeight: {
23
- cssProperty: 'maxHeight',
24
- },
25
- } as const;
26
-
27
- // placeholder adapted from packages/design-system/avatar/src/constants.ts
28
- const dimensions = {
29
- 'size.100': '16px',
30
- 'size.200': '24px',
31
- 'size.300': '32px',
32
- 'size.400': '40px',
33
- 'size.500': '48px',
34
- 'size.600': '96px',
35
- 'size.1000': '192px',
36
- '100%': '100%',
37
- } as const;
38
-
39
- const activeTokens = Object.entries(dimensions).map(([name, value]) => ({
40
- name,
41
- value,
42
- }));
43
-
44
- export const createDimensionStylesFromTemplate = (
45
- spacingProperty: keyof typeof dimensionProperties,
46
- ) => {
47
- if (!dimensionProperties[spacingProperty]) {
48
- throw new Error(`[codegen] Unknown option found "${spacingProperty}"`);
49
- }
50
-
51
- const { cssProperty } = dimensionProperties[spacingProperty];
52
-
53
- return (
54
- prettier.format(
55
- `
56
- const ${spacingProperty}Map = {
57
- ${activeTokens
58
- .sort((a, b) => a.name.localeCompare(b.name, undefined, { numeric: true }))
59
- .map(token => {
60
- return `'${token.name}': css({ ${cssProperty}: '${token.value}' })`;
61
- })
62
- .join(',\n\t')}
63
- } as const;`,
64
- {
65
- singleQuote: true,
66
- trailingComma: 'all',
67
- parser: 'typescript',
68
- plugins: [parserTypeScript],
69
- },
70
- ) +
71
- `\nexport type ${capitalize(
72
- spacingProperty,
73
- )} = keyof typeof ${spacingProperty}Map;\n`
74
- );
75
- };