@atlaskit/primitives 16.3.0 → 16.4.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 (3) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/package.json +1 -1
  3. package/scripts/codegen-styles.tsx +180 -182
package/CHANGELOG.md CHANGED
@@ -1,5 +1,12 @@
1
1
  # @atlaskit/primitives
2
2
 
3
+ ## 16.4.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [`e45f66913297e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/e45f66913297e) -
8
+ Import emotion box into Forge UI Kit library
9
+
3
10
  ## 16.3.0
4
11
 
5
12
  ### Minor Changes
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/primitives",
3
- "version": "16.3.0",
3
+ "version": "16.4.0",
4
4
  "description": "Primitives are token-backed low-level building blocks.",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
package/scripts/codegen-styles.tsx CHANGED
@@ -29,198 +29,196 @@ const templateFiles = readdirSync(join(__dirname, 'codegen-file-templates'), {
29
29
  .filter((item) => !item.isDirectory())
30
30
  .map((item) => join(__dirname, 'codegen-file-templates', item.name));
31
31
 
32
- const targetPath = join(__dirname, '../', 'src', 'xcss', 'style-maps.partial.tsx');
33
- const xcssCodemodPath = join(
34
- process.cwd(),
35
- '../../../',
36
- 'packages/design-system/css/codemods/0.5.2-primitives-emotion-to-compiled/style-maps.partial.tsx',
37
- );
32
+ // Output paths for partial codegen
33
+ const primitivesOutputs = [
34
+ join(__dirname, '../src/xcss/style-maps.partial.tsx'),
35
+ join(
36
+ __dirname,
37
+ '../../css/codemods/0.5.2-primitives-emotion-to-compiled/style-maps.partial.tsx',
38
+ ),
39
+ ];
38
40
 
39
- const sourceFns = [
41
+ const forgeOutputPath = join(__dirname, '../../../forge/forge-ui/src/components/UIKit/tokens.partial.tsx');
42
+
43
+ // Generate partial sections for @atlaskit/primitives style-maps
44
+ const primitivesSourceFns = [
40
45
  // width, height, minWidth, maxWidth, minHeight, maxHeight
41
- () =>
42
- createPartialSignedArtifact(
43
- (options) => options.map(createStylesFromFileTemplate).join('\n'),
44
- 'yarn workspace @atlaskit/primitives codegen-styles',
45
- {
46
- id: 'dimensions',
47
- absoluteFilePath: targetPath,
48
- dependencies: templateFiles.filter((v) => v.includes('dimensions')),
49
- },
50
- ),
51
- () =>
52
- createPartialSignedArtifact(
53
- (options) => options.map(createStylesFromFileTemplate).join('\n'),
54
- 'yarn workspace @atlaskit/primitives codegen-styles',
55
- {
56
- id: 'dimensions',
57
- absoluteFilePath: xcssCodemodPath,
58
- dependencies: templateFiles.filter((v) => v.includes('dimensions')),
59
- },
60
- ),
46
+ ...primitivesOutputs.map((outputPath) =>
47
+ () =>
48
+ createPartialSignedArtifact(
49
+ (options) => options.map(createStylesFromFileTemplate).join('\n'),
50
+ 'yarn workspace @atlaskit/primitives codegen-styles',
51
+ {
52
+ id: 'dimensions',
53
+ absoluteFilePath: outputPath,
54
+ dependencies: templateFiles.filter((v) => v.includes('dimensions')),
55
+ },
56
+ ),
57
+ ),
61
58
  // padding*, gap*, inset*
62
- () =>
63
- createPartialSignedArtifact(
64
- createSpacingStylesFromTemplate,
65
- 'yarn workspace @atlaskit/primitives codegen-styles',
66
- {
67
- id: 'spacing',
68
- absoluteFilePath: targetPath,
69
- dependencies: [spacingTokensDependencyPath],
70
- },
71
- ),
72
- () =>
73
- createPartialSignedArtifact(
74
- createSpacingStylesFromTemplate,
75
- 'yarn workspace @atlaskit/primitives codegen-styles',
76
- {
77
- id: 'spacing',
78
- absoluteFilePath: xcssCodemodPath,
79
- dependencies: [spacingTokensDependencyPath],
80
- },
81
- ),
59
+ ...primitivesOutputs.map((outputPath) =>
60
+ () =>
61
+ createPartialSignedArtifact(
62
+ createSpacingStylesFromTemplate,
63
+ 'yarn workspace @atlaskit/primitives codegen-styles',
64
+ {
65
+ id: 'spacing',
66
+ absoluteFilePath: outputPath,
67
+ dependencies: [spacingTokensDependencyPath],
68
+ },
69
+ ),
70
+ ),
82
71
  // text color, background-color, border-color
83
- () =>
84
- createPartialSignedArtifact(
85
- (options) => options.map(createColorStylesFromTemplate).join('\n'),
86
- 'yarn workspace @atlaskit/primitives codegen-styles',
87
- {
88
- id: 'colors',
89
- absoluteFilePath: targetPath,
90
- dependencies: [colorTokensDependencyPath],
91
- },
92
- ),
93
- () =>
94
- createPartialSignedArtifact(
95
- (options) => options.map(createColorStylesFromTemplate).join('\n'),
96
- 'yarn workspace @atlaskit/primitives codegen-styles',
97
- {
98
- id: 'colors',
99
- absoluteFilePath: xcssCodemodPath,
100
- dependencies: [colorTokensDependencyPath],
101
- },
102
- ),
72
+ ...primitivesOutputs.map((outputPath) =>
73
+ () =>
74
+ createPartialSignedArtifact(
75
+ (options) => options.map(createColorStylesFromTemplate).join('\n'),
76
+ 'yarn workspace @atlaskit/primitives codegen-styles',
77
+ {
78
+ id: 'colors',
79
+ absoluteFilePath: outputPath,
80
+ dependencies: [colorTokensDependencyPath],
81
+ },
82
+ ),
83
+ ),
103
84
  // inverse color map
104
- () =>
105
- createPartialSignedArtifact(
106
- createInverseColorMapTemplate,
107
- 'yarn workspace @atlaskit/primitives codegen-styles',
108
- {
109
- id: 'inverse-colors',
110
- absoluteFilePath: targetPath,
111
- dependencies: [colorTokensDependencyPath],
112
- },
113
- ),
85
+ ...primitivesOutputs.map((outputPath) =>
86
+ () =>
87
+ createPartialSignedArtifact(
88
+ createInverseColorMapTemplate,
89
+ 'yarn workspace @atlaskit/primitives codegen-styles',
90
+ {
91
+ id: 'inverse-colors',
92
+ absoluteFilePath: outputPath,
93
+ dependencies: [colorTokensDependencyPath],
94
+ },
95
+ ),
96
+ ),
114
97
  // elevation (opacity, shadow, surface)
115
- () =>
116
- createPartialSignedArtifact(
117
- (options) => options.map(createElevationStylesFromTemplate).join('\n'),
118
- 'yarn workspace @atlaskit/primitives codegen-styles',
119
- {
120
- id: 'elevation',
121
- absoluteFilePath: targetPath,
122
- dependencies: [colorTokensDependencyPath],
123
- },
124
- ),
125
- () =>
126
- createPartialSignedArtifact(
127
- (options) => options.map(createElevationStylesFromTemplate).join('\n'),
128
- 'yarn workspace @atlaskit/primitives codegen-styles',
129
- {
130
- id: 'elevation',
131
- absoluteFilePath: xcssCodemodPath,
132
- dependencies: [colorTokensDependencyPath],
133
- },
134
- ),
98
+ ...primitivesOutputs.map((outputPath) =>
99
+ () =>
100
+ createPartialSignedArtifact(
101
+ (options) => options.map(createElevationStylesFromTemplate).join('\n'),
102
+ 'yarn workspace @atlaskit/primitives codegen-styles',
103
+ {
104
+ id: 'elevation',
105
+ absoluteFilePath: outputPath,
106
+ dependencies: [colorTokensDependencyPath],
107
+ },
108
+ ),
109
+ ),
135
110
  // border-width, border-radius
136
- () =>
137
- createPartialSignedArtifact(
138
- (options) => options.map(createShapeStylesFromTemplate).join('\n'),
139
- 'yarn workspace @atlaskit/primitives codegen-styles',
140
- {
141
- id: 'border',
142
- absoluteFilePath: targetPath,
143
- dependencies: [shapeTokensDependencyPath],
144
- },
145
- ),
146
- () =>
147
- createPartialSignedArtifact(
148
- (options) => options.map(createShapeStylesFromTemplate).join('\n'),
149
- 'yarn workspace @atlaskit/primitives codegen-styles',
150
- {
151
- id: 'border',
152
- absoluteFilePath: xcssCodemodPath,
153
- dependencies: [shapeTokensDependencyPath],
154
- },
155
- ),
156
- // border-color, border-radius, border-width, layer',
157
- () =>
158
- createPartialSignedArtifact(
159
- (options) => options.map(createStylesFromFileTemplate).join('\n'),
160
- 'yarn workspace @atlaskit/primitives codegen-styles',
161
- {
162
- id: 'misc',
163
- absoluteFilePath: targetPath,
164
- dependencies: templateFiles,
165
- },
166
- ),
167
- () =>
168
- createPartialSignedArtifact(
169
- (options) => options.map(createStylesFromFileTemplate).join('\n'),
170
- 'yarn workspace @atlaskit/primitives codegen-styles',
171
- {
172
- id: 'misc',
173
- absoluteFilePath: xcssCodemodPath,
174
- dependencies: templateFiles,
175
- },
176
- ),
111
+ ...primitivesOutputs.map((outputPath) =>
112
+ () =>
113
+ createPartialSignedArtifact(
114
+ (options) => options.map(createShapeStylesFromTemplate).join('\n'),
115
+ 'yarn workspace @atlaskit/primitives codegen-styles',
116
+ {
117
+ id: 'border',
118
+ absoluteFilePath: outputPath,
119
+ dependencies: [shapeTokensDependencyPath],
120
+ },
121
+ ),
122
+ ),
123
+ // border-color, border-radius, border-width, layer
124
+ ...primitivesOutputs.map((outputPath) =>
125
+ () =>
126
+ createPartialSignedArtifact(
127
+ (options) => options.map(createStylesFromFileTemplate).join('\n'),
128
+ 'yarn workspace @atlaskit/primitives codegen-styles',
129
+ {
130
+ id: 'misc',
131
+ absoluteFilePath: outputPath,
132
+ dependencies: templateFiles,
133
+ },
134
+ ),
135
+ ),
177
136
  // font*, lineheight
178
- () =>
179
- createPartialSignedArtifact(
180
- createTypographyStylesFromTemplate,
181
- 'yarn workspace @atlaskit/primitives codegen-styles',
182
- {
183
- id: 'typography',
184
- absoluteFilePath: targetPath,
185
- dependencies: templateFiles,
186
- },
187
- ),
188
- () =>
189
- createPartialSignedArtifact(
190
- createTypographyStylesFromTemplate,
191
- 'yarn workspace @atlaskit/primitives codegen-styles',
192
- {
193
- id: 'typography',
194
- absoluteFilePath: xcssCodemodPath,
195
- dependencies: templateFiles,
196
- },
197
- ),
137
+ ...primitivesOutputs.map((outputPath) =>
138
+ () =>
139
+ createPartialSignedArtifact(
140
+ createTypographyStylesFromTemplate,
141
+ 'yarn workspace @atlaskit/primitives codegen-styles',
142
+ {
143
+ id: 'typography',
144
+ absoluteFilePath: outputPath,
145
+ dependencies: templateFiles,
146
+ },
147
+ ),
148
+ ),
198
149
  // font and weight map for text primitive
199
- () =>
200
- createPartialSignedArtifact(
201
- createTextStylesFromTemplate,
202
- 'yarn workspace @atlaskit/primitives codegen-styles',
203
- {
204
- id: 'text',
205
- absoluteFilePath: targetPath,
206
- dependencies: templateFiles,
207
- },
208
- ),
209
- () =>
210
- createPartialSignedArtifact(
211
- createTextStylesFromTemplate,
212
- 'yarn workspace @atlaskit/primitives codegen-styles',
213
- {
214
- id: 'text',
215
- absoluteFilePath: xcssCodemodPath,
216
- dependencies: templateFiles,
217
- },
218
- ),
150
+ ...primitivesOutputs.map((outputPath) =>
151
+ () =>
152
+ createPartialSignedArtifact(
153
+ createTextStylesFromTemplate,
154
+ 'yarn workspace @atlaskit/primitives codegen-styles',
155
+ {
156
+ id: 'text',
157
+ absoluteFilePath: outputPath,
158
+ dependencies: templateFiles,
159
+ },
160
+ ),
161
+ ),
219
162
  ];
220
163
 
221
- sourceFns.forEach((sourceFn) => {
222
- writeFileSync(targetPath, sourceFn());
223
- writeFileSync(xcssCodemodPath, sourceFn());
164
+ /**
165
+ * Generate Forge UI Kit tokens using partial codegen
166
+ *
167
+ * Note: Forge uses a SINGLE codegen block (@codegen-start:forge-tokens) with all tokens,
168
+ * unlike Primitives which uses separate blocks per category. This allows Forge to mix
169
+ * generated token maps with manual utility functions in one file.
170
+ *
171
+ * @see https://developer.atlassian.com/platform/forge/ui-kit/components/xcss/
172
+ */
173
+ const generateForgeTokensContent = (): string => {
174
+ const sections = [
175
+ '/* eslint @repo/internal/codegen/signed-source-integrity: "warn" */',
176
+ createStylesFromFileTemplate('dimensions'),
177
+ '',
178
+ createSpacingStylesFromTemplate(),
179
+ '',
180
+ ...(['text', 'background', 'border'] as const).map(createColorStylesFromTemplate),
181
+ '',
182
+ createInverseColorMapTemplate(),
183
+ '',
184
+ ...(['opacity', 'shadow', 'surface'] as const).map(createElevationStylesFromTemplate),
185
+ '',
186
+ ...(['width', 'radius'] as const).map(createShapeStylesFromTemplate),
187
+ '',
188
+ createStylesFromFileTemplate('layer'),
189
+ '',
190
+ createTypographyStylesFromTemplate(),
191
+ '',
192
+ createTextStylesFromTemplate(),
193
+ ];
194
+
195
+ return sections.join('\n');
196
+ };
197
+
198
+ const forgeSourceFn = () =>
199
+ createPartialSignedArtifact(
200
+ generateForgeTokensContent,
201
+ 'yarn workspace @atlaskit/primitives codegen-styles',
202
+ {
203
+ id: 'forge-tokens',
204
+ absoluteFilePath: forgeOutputPath,
205
+ dependencies: [
206
+ ...templateFiles,
207
+ colorTokensDependencyPath,
208
+ spacingTokensDependencyPath,
209
+ shapeTokensDependencyPath,
210
+ ],
211
+ },
212
+ );
213
+
214
+ // Write all generated files
215
+ primitivesSourceFns.forEach((sourceFn, index) => {
216
+ const outputPath = primitivesOutputs[Math.floor(index / 9)]; // 9 configs per output
217
+ writeFileSync(outputPath, sourceFn());
224
218
  });
225
219
 
226
- console.log(`${targetPath} written!`);
220
+ writeFileSync(forgeOutputPath, forgeSourceFn());
221
+
222
+ console.log('Generated style maps for:');
223
+ primitivesOutputs.forEach((path) => console.log(` - ${path}`));
224
+ console.log(` - ${forgeOutputPath}`);