Skip to content

Commit 41da4bd

Browse files
heloiseluiheloiselui
authored
fix(stackblitz): add styles for FlexGrid, Grid, Layer, and Theme (#20226)
* chore: update story styles and docs setup * chore: update styles file * fix: styles file * refactor: simplify StackBlitz style injection * chore: clean up code * chore: clean up comments
1 parent deae48e commit 41da4bd

File tree

9 files changed

+712
-423
lines changed

9 files changed

+712
-423
lines changed

‎packages/react/previewer/codePreviewer.tsx‎

Lines changed: 68 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,23 @@
66
*/
77

88
import React from 'react';
9-
import StackBlitzSDK from '@stackblitz/sdk';
10-
import sdk, { Project } from '@stackblitz/sdk';
11-
import { index, main, packageJson, style, viteConfig } from './configFiles';
9+
import StackBlitzSDK, { Project } from '@stackblitz/sdk';
10+
import {
11+
index,
12+
main,
13+
packageJson,
14+
style,
15+
viteConfig,
16+
flexGridScss,
17+
} from './configFiles';
1218
import * as carbonComponents from '../src/index';
1319
import * as carbonIconsReact from '@carbon/icons-react';
20+
import {
21+
FlexGridScss,
22+
GridScss,
23+
LayerScss,
24+
ThemeScss,
25+
} from './storybookStyles';
1426

1527
export const stackblitzPrefillConfig = (
1628
code: any,
@@ -76,6 +88,49 @@ export const stackblitzPrefillConfig = (
7688
const iconsNames = Object.keys(carbonIconsReact);
7789
const matchedIcons = findIconImports(iconsNames, storyCode);
7890

91+
// Registry of story scss strings we can inject
92+
const storyScssRegistry: Record<string, { content: string }> = {
93+
FlexGrid: {
94+
content: FlexGridScss,
95+
},
96+
Grid: {
97+
content: GridScss,
98+
},
99+
Layer: {
100+
content: LayerScss,
101+
},
102+
Theme: {
103+
content: ThemeScss,
104+
},
105+
};
106+
107+
// Only include story scss for components actually used
108+
const componentsWithStyles = [
109+
...new Set(matchedComponents.filter((item) => storyScssRegistry[item])),
110+
];
111+
112+
// Detect if we need flexbox grid enabled
113+
const hasFlexboxGridComponent = componentsWithStyles.some(
114+
(component) => component === 'FlexGrid'
115+
);
116+
117+
// Enable flexbox grid only when needed
118+
const carbonBaseScss = hasFlexboxGridComponent ? flexGridScss : style;
119+
120+
// Inline/append the SCSS content for each matched component
121+
const inlinedStoryScss = componentsWithStyles
122+
.map(
123+
(item) => `
124+
${storyScssRegistry[item].content}`
125+
)
126+
.join('\n');
127+
128+
// Final index.scss = base Carbon + (conditionally) inlined story styles
129+
const indexScss = `
130+
${carbonBaseScss}
131+
${inlinedStoryScss}
132+
`;
133+
79134
// Generate App.jsx code
80135
const app = `
81136
import React from 'react';
@@ -87,19 +142,21 @@ export const stackblitzPrefillConfig = (
87142
}
88143
`;
89144

145+
const files: Project['files'] = {
146+
'package.json': packageJson,
147+
'index.html': index,
148+
'vite.config.js': viteConfig,
149+
'src/main.jsx': main,
150+
'src/App.jsx': app,
151+
'src/index.scss': indexScss,
152+
};
153+
90154
const stackblitzFileConfig: Project = {
91155
title: 'Carbon demo',
92156
description:
93157
'Run official live example code for a Carbon component, created by Carbon Design System on StackBlitz',
94158
template: 'node',
95-
files: {
96-
'package.json': packageJson,
97-
'index.html': index,
98-
'vite.config.js': viteConfig,
99-
'src/main.jsx': main,
100-
'src/App.jsx': app,
101-
'src/index.scss': style,
102-
},
159+
files,
103160
};
104161

105162
StackBlitzSDK.openProject(stackblitzFileConfig, {

‎packages/react/previewer/configFiles.tsx‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -75,3 +75,10 @@ export const style: string = `
7575
$font-path: '@ibm/plex'
7676
);
7777
`;
78+
79+
export const flexGridScss: string = `
80+
@use '@carbon/react' with (
81+
$font-path: '@ibm/plex',
82+
$use-flexbox-grid: true
83+
);
84+
`;

‎packages/react/previewer/storybookStyles/index.tsx‎

Lines changed: 236 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,236 @@
1+
export const FlexGridScss = `
2+
@use '@carbon/styles/scss/colors' as *;
3+
4+
// base of project work area
5+
#root > #templates > div:first-child {
6+
inline-size: 100%;
7+
}
8+
9+
// grid styles
10+
.cds--grid .outside {
11+
block-size: 100%;
12+
min-block-size: 80px;
13+
}
14+
15+
.cds--grid .inside {
16+
block-size: 100%;
17+
min-block-size: 80px;
18+
}
19+
20+
// hack to enable zoom feature to trigger
21+
.cds--grid--full-width {
22+
max-inline-size: 100%;
23+
}
24+
25+
.default .cds--col code {
26+
display: flex;
27+
justify-content: center;
28+
}
29+
30+
// template hard-coded styles
31+
#templates .inside {
32+
background-color: $blue-10;
33+
}
34+
35+
#templates .cds--grid [class*='col'] {
36+
background-color: $blue-20;
37+
outline: 1px dashed $blue-40;
38+
}
39+
40+
#templates .cds--grid--condensed,
41+
#templates .cds--row--condensed {
42+
background-color: $warm-gray-100;
43+
color: $gray-10;
44+
}
45+
46+
#templates .cds--grid--condensed [class*='col'],
47+
#templates .cds--row--condensed [class*='col'] {
48+
background: none;
49+
outline: none;
50+
}
51+
52+
#templates .cds--grid--condensed .outside,
53+
#templates .cds--row--condensed .outside {
54+
background-color: $gray-80;
55+
outline: none;
56+
}
57+
58+
#templates .cds--grid--condensed .inside,
59+
#templates .cds--row--condensed .inside {
60+
background: none;
61+
}
62+
63+
#templates .cds--grid--narrow .inside,
64+
#templates .cds--row--narrow .inside {
65+
background-color: $teal-10;
66+
}
67+
68+
#templates .cds--grid--narrow [class*='col'],
69+
#templates .cds--row--narrow [class*='col'] {
70+
background-color: $teal-20;
71+
outline: 1px dashed $teal-40;
72+
}
73+
74+
// css grid
75+
#templates > .cds--css-grid {
76+
border: 1px dashed black;
77+
}
78+
79+
#templates .cds--css-grid .cds--subgrid [class*='col'] {
80+
background-color: rgba(#ffe056, 0.25);
81+
outline: 1px solid #ffe056;
82+
}
83+
84+
#templates .cds--css-grid [class*='col'] {
85+
background-color: #edf4ff;
86+
min-block-size: 80px;
87+
outline: 1px solid #a6c8ff;
88+
}
89+
`;
90+
91+
export const GridScss = `
92+
@use '@carbon/styles/scss/colors' as *;
93+
@use '@carbon/styles/scss/type' as *;
94+
95+
.sb-css-grid-container {
96+
// Gutter modes
97+
.cds--css-grid {
98+
background-color: $blue-20;
99+
outline: 1px dashed $blue-40;
100+
}
101+
102+
.cds--css-grid p {
103+
@include type-style('code-02');
104+
}
105+
106+
.cds--css-grid p:first-of-type {
107+
margin-block-start: 0;
108+
}
109+
110+
// Narrow
111+
.cds--css-grid.cds--css-grid--narrow {
112+
background-color: #d6f9f9;
113+
outline: 1px dashed $green-40;
114+
}
115+
116+
// Condensed
117+
.cds--css-grid.cds--css-grid--condensed {
118+
background-color: $purple-10;
119+
outline: 1px dashed $purple-40;
120+
}
121+
122+
.cds--subgrid {
123+
position: relative;
124+
background: #eef4ff;
125+
outline: 1px solid black;
126+
padding-block: 2rem;
127+
}
128+
129+
.cds--css-grid,
130+
.cds--subgrid--wide {
131+
--grid-mode-color: #97c1ff;
132+
}
133+
134+
.cds--css-grid--narrow,
135+
.cds--subgrid--narrow {
136+
--grid-mode-color: #20d5d2;
137+
138+
background: $green-10;
139+
}
140+
141+
.cds--css-grid--condensed,
142+
.cds--subgrid--condensed {
143+
--grid-mode-color: #bb8eff;
144+
145+
background: $purple-10;
146+
}
147+
148+
.cds--subgrid--narrow {
149+
background: #d6f9f9;
150+
}
151+
152+
.cds--subgrid--condensed {
153+
background: #f7f2ff;
154+
}
155+
156+
.cds--subgrid::before {
157+
@include type-style('code-01');
158+
159+
position: absolute;
160+
display: block;
161+
padding: 0.125rem 0.25rem;
162+
background: var(--grid-mode-color, #97c1ff);
163+
color: $black;
164+
content: 'subgrid';
165+
inset-block-start: 0;
166+
inset-inline-start: 0;
167+
}
168+
169+
// Column
170+
.cds--css-grid-column {
171+
--border-color: #97c1ff;
172+
173+
background: $white;
174+
box-shadow: 0 0 0 1px var(--border-color);
175+
176+
min-block-size: 80px;
177+
}
178+
179+
.cds--css-grid--narrow .cds--css-grid-column,
180+
.cds--subgrid--narrow .cds--css-grid-column {
181+
--border-color: #20d5d2;
182+
}
183+
184+
.cds--css-grid--condensed .cds--css-grid-column,
185+
.cds--subgrid--condensed .cds--css-grid-column {
186+
--border-color: #bb8eff;
187+
}
188+
}
189+
`;
190+
191+
export const LayerScss = `
192+
@use '@carbon/styles/scss/theme';
193+
194+
.example-layer-test-component {
195+
padding: 1rem;
196+
background: theme.$layer;
197+
color: theme.$text-primary;
198+
}
199+
200+
.example-layer-test-component-no-background {
201+
padding: 1rem;
202+
color: theme.$text-primary;
203+
}
204+
`;
205+
206+
export const ThemeScss = `
207+
@use '@carbon/styles/scss/themes';
208+
@use '@carbon/styles/scss/theme';
209+
210+
.theme-section {
211+
padding: 1rem;
212+
background: theme.$background;
213+
color: theme.$text-primary;
214+
}
215+
216+
.theme-layer-example {
217+
padding: 1rem;
218+
background: theme.$background;
219+
color: theme.$text-primary;
220+
}
221+
222+
.theme-layer-header {
223+
margin-block-end: 1rem;
224+
}
225+
226+
.theme-with-layer {
227+
padding: 1rem;
228+
background: theme.$layer;
229+
color: theme.$text-primary;
230+
}
231+
232+
.carbon-storybook-template--annotation--background {
233+
margin: 0 !important; /* stylelint-disable-line declaration-no-important */
234+
min-block-size: 0 !important; /* stylelint-disable-line declaration-no-important */
235+
}
236+
`;

0 commit comments

Comments
 (0)