Skip to content

Commit f9c381b

Browse files
odinrodinr
committed
feat(storybook): add comprehensive styles documentation and stories
- Add MDX documentation page for styles package - Organize stories into logical groups (Basic Usage, Scope Isolation, Advanced Features, Theme System, Utilities) - Add visual demonstrations of class name isolation for micro-frontends - Update Storybook port to 3000 - Remove @material-ui/styles dependency from Storybook ref: equinor/fusion-framework#3698
1 parent 07a06d2 commit f9c381b

File tree

8 files changed

+900
-1
lines changed

8 files changed

+900
-1
lines changed

‎.changeset/storybook-styles-docs.md‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
---
2+
"@equinor/fusion-react-components-stories": patch
3+
---
4+
5+
Add comprehensive Storybook documentation and stories for `@equinor/fusion-react-styles` package.
6+
7+
ref: https://github.com/equinor/fusion-framework/issues/3698
8+
9+
### Added
10+
11+
- **Styles Documentation (`styles.mdx`)**: Comprehensive MDX documentation page showcasing all styling features
12+
- **Story Groups**: Organized stories into logical groups:
13+
- **Basic Usage**: Basic styles, dynamic styles, and theme-based styles
14+
- **Scope Isolation**: Demonstrates critical micro-frontend style isolation with nested and side-by-side `StylesProvider` examples
15+
- **Advanced Features**: Nested selectors, multiple style rules, and style caching
16+
- **Theme System**: Theme composition and `useTheme` hook examples
17+
- **Utilities**: `createStyles` helper examples
18+
- **Visual Demonstrations**: Interactive stories showing:
19+
- Class name generation and isolation
20+
- Dynamic style updates based on props
21+
- Theme integration
22+
- CSS features like nested selectors and hover states
23+
24+
### Changed
25+
26+
- Storybook port updated to 3000
27+
- Removed `@material-ui/styles` dependency from Storybook package
28+

‎storybook/package.json‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,6 @@
3838
"@equinor/fusion-react-styles": "workspace:^",
3939
"@equinor/fusion-react-tabs": "workspace:^",
4040
"@equinor/fusion-react-textarea": "workspace:^",
41-
"@material-ui/styles": "^4.11.5",
4241
"@storybook/addon-docs": "^9.0.6",
4342
"@storybook/addon-links": "^9.0.6",
4443
"@storybook/react-vite": "^9.0.6",

‎storybook/src/stories/styles/advanced-features.stories.tsx‎

Lines changed: 206 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,206 @@
1+
import type { Meta, StoryObj } from '@storybook/react-vite';
2+
import {
3+
StylesProvider,
4+
ThemeProvider,
5+
makeStyles,
6+
theme,
7+
} from '@equinor/fusion-react-styles';
8+
9+
const meta: Meta = {
10+
title: 'ui/Styles/Advanced Features',
11+
component: StylesProvider,
12+
};
13+
14+
export default meta;
15+
16+
// Nested selectors and pseudo-selectors
17+
const nestedStyles = {
18+
root: {
19+
color: 'blue',
20+
padding: '16px',
21+
borderRadius: '8px',
22+
border: '2px solid blue',
23+
transition: 'all 0.3s ease',
24+
// Pseudo-selector
25+
'&:hover': {
26+
color: 'red',
27+
borderColor: 'red',
28+
transform: 'scale(1.05)',
29+
},
30+
'&:focus': {
31+
outline: '2px solid orange',
32+
outlineOffset: '2px',
33+
},
34+
// Nested selector
35+
'& .nested': {
36+
padding: '10px',
37+
backgroundColor: '#f0f0f0',
38+
marginTop: '8px',
39+
borderRadius: '4px',
40+
},
41+
'& .nested:hover': {
42+
backgroundColor: '#e0e0e0',
43+
},
44+
},
45+
};
46+
47+
const NestedComponent = () => {
48+
const useStyles = makeStyles(nestedStyles, { name: 'NestedComponent' });
49+
const classes = useStyles({});
50+
51+
return (
52+
<div className={classes.root} tabIndex={0}>
53+
<h3>Nested Selectors & Pseudo-Selectors</h3>
54+
<p>Hover over this box or focus it to see effects!</p>
55+
<div className="nested">
56+
<strong>Nested element</strong> - hover over me too!
57+
</div>
58+
<div style={{ marginTop: '12px', fontSize: '12px', color: '#666' }}>
59+
Root class: <code>{classes.root}</code>
60+
</div>
61+
</div>
62+
);
63+
};
64+
65+
export const NestedSelectors: StoryObj = {
66+
render: () => (
67+
<ThemeProvider theme={theme}>
68+
<StylesProvider>
69+
<div style={{ padding: '24px' }}>
70+
<h2>Nested Selectors & Pseudo-Selectors</h2>
71+
<p>WHAT: Use CSS features like :hover, :focus, and nested child selectors.</p>
72+
<p>WHY: Full CSS power in JavaScript - no need to write separate CSS files.</p>
73+
<NestedComponent />
74+
</div>
75+
</StylesProvider>
76+
</ThemeProvider>
77+
),
78+
};
79+
80+
// Multiple style rules
81+
const multipleStyles = {
82+
root: {
83+
padding: '20px',
84+
backgroundColor: '#f9f9f9',
85+
borderRadius: '8px',
86+
border: '1px solid #ddd',
87+
},
88+
header: {
89+
fontSize: '24px',
90+
fontWeight: 'bold',
91+
marginBottom: '12px',
92+
color: '#333',
93+
},
94+
content: {
95+
fontSize: '14px',
96+
color: '#666',
97+
lineHeight: '1.6',
98+
marginBottom: '12px',
99+
},
100+
button: {
101+
padding: '10px 20px',
102+
backgroundColor: '#007bff',
103+
color: 'white',
104+
border: 'none',
105+
borderRadius: '4px',
106+
cursor: 'pointer',
107+
fontSize: '14px',
108+
},
109+
footer: {
110+
marginTop: '16px',
111+
paddingTop: '12px',
112+
borderTop: '1px solid #ddd',
113+
fontSize: '12px',
114+
color: '#999',
115+
},
116+
};
117+
118+
const MultipleRulesComponent = () => {
119+
const useStyles = makeStyles(multipleStyles, { name: 'MultipleRulesComponent' });
120+
const classes = useStyles({});
121+
122+
return (
123+
<div className={classes.root}>
124+
<div className={classes.header}>Component with Multiple Style Rules</div>
125+
<div className={classes.content}>
126+
This component demonstrates how one component can have multiple style classes, similar to how you'd use
127+
multiple CSS classes.
128+
</div>
129+
<button className={classes.button} type="button">
130+
Action Button
131+
</button>
132+
<div className={classes.footer}>
133+
<div style={{ marginTop: '8px', fontSize: '11px' }}>
134+
Classes: <code>{classes.root}</code>, <code>{classes.header}</code>,{' '}
135+
<code>{classes.content}</code>, <code>{classes.button}</code>, <code>{classes.footer}</code>
136+
</div>
137+
</div>
138+
</div>
139+
);
140+
};
141+
142+
export const MultipleStyleRules: StoryObj = {
143+
render: () => (
144+
<ThemeProvider theme={theme}>
145+
<StylesProvider>
146+
<div style={{ padding: '24px' }}>
147+
<h2>Multiple Style Rules</h2>
148+
<p>WHAT: One component can have multiple style classes (like CSS classes).</p>
149+
<p>WHY: Components need multiple styles (e.g., root, header, button, footer).</p>
150+
<MultipleRulesComponent />
151+
</div>
152+
</StylesProvider>
153+
</ThemeProvider>
154+
),
155+
};
156+
157+
// Style caching demonstration
158+
const cachedStyles = {
159+
root: {
160+
padding: '16px',
161+
backgroundColor: '#e8f5e9',
162+
borderRadius: '8px',
163+
border: '2px solid #4caf50',
164+
},
165+
};
166+
167+
const CachedComponent = ({ id }: { id: string }) => {
168+
const useStyles = makeStyles(cachedStyles, { name: 'CachedComponent' });
169+
const classes = useStyles({});
170+
171+
return (
172+
<div className={classes.root}>
173+
<strong>Component {id}</strong>
174+
<div style={{ marginTop: '8px', fontSize: '12px' }}>
175+
Class: <code>{classes.root}</code>
176+
</div>
177+
</div>
178+
);
179+
};
180+
181+
export const StyleCaching: StoryObj = {
182+
render: () => (
183+
<ThemeProvider theme={theme}>
184+
<StylesProvider>
185+
<div style={{ padding: '24px' }}>
186+
<h2>Style Caching</h2>
187+
<p>WHAT: Multiple components using the same styles share the same CSS stylesheet.</p>
188+
<p>WHY: Performance optimization - avoids duplicate CSS in the DOM.</p>
189+
<p>
190+
<strong>Example:</strong> 100 Buttons with same styles = 1 stylesheet, not 100.
191+
</p>
192+
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: '16px', marginTop: '16px' }}>
193+
<CachedComponent id="1" />
194+
<CachedComponent id="2" />
195+
<CachedComponent id="3" />
196+
</div>
197+
<div style={{ marginTop: '16px', padding: '12px', backgroundColor: '#fff3cd', borderRadius: '4px' }}>
198+
<strong>Notice:</strong> All three components share the same class name because they use the same styles.
199+
This means they share the same CSS stylesheet, reducing bundle size.
200+
</div>
201+
</div>
202+
</StylesProvider>
203+
</ThemeProvider>
204+
),
205+
};
206+

0 commit comments

Comments
 (0)