@fluentui/react-storybook-addon 0.0.0-nightly-20250331-0406.1
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.
- package/CHANGELOG.md +228 -0
- package/LICENSE +15 -0
- package/README.md +98 -0
- package/package.json +52 -0
- package/preset.js +9 -0
package/CHANGELOG.md
ADDED
|
@@ -0,0 +1,228 @@
|
|
|
1
|
+
# Change Log - @fluentui/react-storybook-addon
|
|
2
|
+
|
|
3
|
+
This log was last generated on Mon, 31 Mar 2025 04:10:57 GMT and should not be manually modified.
|
|
4
|
+
|
|
5
|
+
<!-- Start content -->
|
|
6
|
+
|
|
7
|
+
## [0.0.0-nightly-20250331-0406.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-storybook-addon_v0.0.0-nightly-20250331-0406.1)
|
|
8
|
+
|
|
9
|
+
Mon, 31 Mar 2025 04:10:57 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-storybook-addon_v9.0.0-rc.1..@fluentui/react-storybook-addon_v0.0.0-nightly-20250331-0406.1)
|
|
11
|
+
|
|
12
|
+
### Changes
|
|
13
|
+
|
|
14
|
+
- Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/not available) by fluentui-internal@service.microsoft.com)
|
|
15
|
+
- Bump @fluentui/react-aria to v0.0.0-nightly-20250331-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/82a1096db49902d28f7757b98d5353016efb97fe) by beachball)
|
|
16
|
+
- Bump @fluentui/react-provider to v0.0.0-nightly-20250331-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/82a1096db49902d28f7757b98d5353016efb97fe) by beachball)
|
|
17
|
+
- Bump @fluentui/react-theme to v0.0.0-nightly-20250331-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/82a1096db49902d28f7757b98d5353016efb97fe) by beachball)
|
|
18
|
+
|
|
19
|
+
## [9.0.0-rc.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-storybook-addon_v9.0.0-rc.1)
|
|
20
|
+
|
|
21
|
+
Tue, 20 Sep 2022 20:55:45 GMT
|
|
22
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-storybook-addon_v9.0.0-rc.1..@fluentui/react-storybook-addon_v9.0.0-rc.1)
|
|
23
|
+
|
|
24
|
+
### Patches
|
|
25
|
+
|
|
26
|
+
- Bump @fluentui/react-provider to v9.1.2 ([PR #24869](https://github.com/microsoft/fluentui/pull/24869) by beachball)
|
|
27
|
+
|
|
28
|
+
## [9.0.0-rc.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-storybook-addon_v9.0.0-rc.1)
|
|
29
|
+
|
|
30
|
+
Thu, 15 Sep 2022 09:50:08 GMT
|
|
31
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-storybook-addon_v9.0.0-rc.1..@fluentui/react-storybook-addon_v9.0.0-rc.1)
|
|
32
|
+
|
|
33
|
+
### Patches
|
|
34
|
+
|
|
35
|
+
- Bump @fluentui/react-theme to v9.1.0 ([PR #24808](https://github.com/microsoft/fluentui/pull/24808) by beachball)
|
|
36
|
+
- Bump @fluentui/react-provider to v9.1.1 ([PR #24808](https://github.com/microsoft/fluentui/pull/24808) by beachball)
|
|
37
|
+
|
|
38
|
+
## [9.0.0-rc.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-storybook-addon_v9.0.0-rc.1)
|
|
39
|
+
|
|
40
|
+
Wed, 03 Aug 2022 16:04:10 GMT
|
|
41
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-storybook-addon_v9.0.0-rc.1..@fluentui/react-storybook-addon_v9.0.0-rc.1)
|
|
42
|
+
|
|
43
|
+
### Patches
|
|
44
|
+
|
|
45
|
+
- Bump @fluentui/react-provider to v9.1.0 ([PR #24131](https://github.com/microsoft/fluentui/pull/24131) by beachball)
|
|
46
|
+
|
|
47
|
+
## [9.0.0-rc.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-storybook-addon_v9.0.0-rc.1)
|
|
48
|
+
|
|
49
|
+
Thu, 14 Jul 2022 21:21:13 GMT
|
|
50
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-storybook-addon_v9.0.0-rc.1..@fluentui/react-storybook-addon_v9.0.0-rc.1)
|
|
51
|
+
|
|
52
|
+
### Patches
|
|
53
|
+
|
|
54
|
+
- Bump @fluentui/react-provider to v9.0.3 ([PR #23918](https://github.com/microsoft/fluentui/pull/23918) by beachball)
|
|
55
|
+
|
|
56
|
+
## [9.0.0-rc.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-storybook-addon_v9.0.0-rc.1)
|
|
57
|
+
|
|
58
|
+
Thu, 14 Jul 2022 17:06:26 GMT
|
|
59
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-storybook-addon_v9.0.0-rc.1..@fluentui/react-storybook-addon_v9.0.0-rc.1)
|
|
60
|
+
|
|
61
|
+
### Patches
|
|
62
|
+
|
|
63
|
+
- Bump @fluentui/react-provider to v9.0.2 ([PR #23897](https://github.com/microsoft/fluentui/pull/23897) by beachball)
|
|
64
|
+
|
|
65
|
+
## [9.0.0-rc.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-storybook-addon_v9.0.0-rc.1)
|
|
66
|
+
|
|
67
|
+
Tue, 28 Jun 2022 17:39:54 GMT
|
|
68
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-storybook-addon_v9.0.0-rc.1..@fluentui/react-storybook-addon_v9.0.0-rc.1)
|
|
69
|
+
|
|
70
|
+
### Patches
|
|
71
|
+
|
|
72
|
+
- Bump @fluentui/react-provider to v9.0.1 ([PR #23754](https://github.com/microsoft/fluentui/pull/23754) by beachball)
|
|
73
|
+
|
|
74
|
+
## [9.0.0-rc.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-storybook-addon_v9.0.0-rc.1)
|
|
75
|
+
|
|
76
|
+
Tue, 28 Jun 2022 15:14:23 GMT
|
|
77
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-storybook-addon_v9.0.0-rc.1..@fluentui/react-storybook-addon_v9.0.0-rc.1)
|
|
78
|
+
|
|
79
|
+
### Patches
|
|
80
|
+
|
|
81
|
+
- Bump @fluentui/react-theme to v9.0.0 ([commit](https://github.com/microsoft/fluentui/commit/ba6c5d651559b91c815429c9a9357c4d5a390f3e) by beachball)
|
|
82
|
+
- Bump @fluentui/react-provider to v9.0.0 ([commit](https://github.com/microsoft/fluentui/commit/ba6c5d651559b91c815429c9a9357c4d5a390f3e) by beachball)
|
|
83
|
+
|
|
84
|
+
## [9.0.0-rc.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-storybook-addon_v9.0.0-rc.1)
|
|
85
|
+
|
|
86
|
+
Thu, 23 Jun 2022 14:25:31 GMT
|
|
87
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-storybook-addon_v9.0.0-rc.1..@fluentui/react-storybook-addon_v9.0.0-rc.1)
|
|
88
|
+
|
|
89
|
+
### Changes
|
|
90
|
+
|
|
91
|
+
- Bump @fluentui/react-theme to v9.0.0-rc.10 ([PR #23608](https://github.com/microsoft/fluentui/pull/23608) by beachball)
|
|
92
|
+
- Bump @fluentui/react-provider to v9.0.0-rc.14 ([PR #23608](https://github.com/microsoft/fluentui/pull/23608) by beachball)
|
|
93
|
+
|
|
94
|
+
## [9.0.0-rc.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-storybook-addon_v9.0.0-rc.1)
|
|
95
|
+
|
|
96
|
+
Tue, 31 May 2022 21:28:50 GMT
|
|
97
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-storybook-addon_v9.0.0-rc.1..@fluentui/react-storybook-addon_v9.0.0-rc.1)
|
|
98
|
+
|
|
99
|
+
### Changes
|
|
100
|
+
|
|
101
|
+
- Bump @fluentui/react-provider to v9.0.0-rc.13 ([PR #23325](https://github.com/microsoft/fluentui/pull/23325) by beachball)
|
|
102
|
+
|
|
103
|
+
## [9.0.0-rc.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-storybook-addon_v9.0.0-rc.1)
|
|
104
|
+
|
|
105
|
+
Thu, 26 May 2022 21:01:32 GMT
|
|
106
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-storybook-addon_v9.0.0-rc.1..@fluentui/react-storybook-addon_v9.0.0-rc.1)
|
|
107
|
+
|
|
108
|
+
### Changes
|
|
109
|
+
|
|
110
|
+
- Bump @fluentui/react-provider to v9.0.0-rc.12 ([PR #23267](https://github.com/microsoft/fluentui/pull/23267) by beachball)
|
|
111
|
+
|
|
112
|
+
## [9.0.0-rc.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-storybook-addon_v9.0.0-rc.1)
|
|
113
|
+
|
|
114
|
+
Mon, 23 May 2022 18:56:51 GMT
|
|
115
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-storybook-addon_v9.0.0-rc.1..@fluentui/react-storybook-addon_v9.0.0-rc.1)
|
|
116
|
+
|
|
117
|
+
### Changes
|
|
118
|
+
|
|
119
|
+
- Bump @fluentui/react-theme to v9.0.0-rc.9 ([PR #23146](https://github.com/microsoft/fluentui/pull/23146) by beachball)
|
|
120
|
+
- Bump @fluentui/react-provider to v9.0.0-rc.11 ([PR #23146](https://github.com/microsoft/fluentui/pull/23146) by beachball)
|
|
121
|
+
|
|
122
|
+
## [9.0.0-rc.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-storybook-addon_v9.0.0-rc.1)
|
|
123
|
+
|
|
124
|
+
Mon, 23 May 2022 12:14:24 GMT
|
|
125
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-storybook-addon_v9.0.0-rc.1..@fluentui/react-storybook-addon_v9.0.0-rc.1)
|
|
126
|
+
|
|
127
|
+
### Changes
|
|
128
|
+
|
|
129
|
+
- Bump @fluentui/react-theme to v9.0.0-rc.8 ([PR #23030](https://github.com/microsoft/fluentui/pull/23030) by beachball)
|
|
130
|
+
- Bump @fluentui/react-provider to v9.0.0-rc.10 ([PR #23030](https://github.com/microsoft/fluentui/pull/23030) by beachball)
|
|
131
|
+
|
|
132
|
+
## [9.0.0-rc.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-storybook-addon_v9.0.0-rc.1)
|
|
133
|
+
|
|
134
|
+
Thu, 05 May 2022 18:26:30 GMT
|
|
135
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-storybook-addon_v9.0.0-rc.1..@fluentui/react-storybook-addon_v9.0.0-rc.1)
|
|
136
|
+
|
|
137
|
+
### Changes
|
|
138
|
+
|
|
139
|
+
- Bump @fluentui/react-theme to v9.0.0-rc.7 ([PR #22857](https://github.com/microsoft/fluentui/pull/22857) by beachball)
|
|
140
|
+
- Bump @fluentui/react-provider to v9.0.0-rc.9 ([PR #22857](https://github.com/microsoft/fluentui/pull/22857) by beachball)
|
|
141
|
+
|
|
142
|
+
## [9.0.0-rc.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-storybook-addon_v9.0.0-rc.1)
|
|
143
|
+
|
|
144
|
+
Wed, 04 May 2022 13:26:54 GMT
|
|
145
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-storybook-addon_v9.0.0-rc.1..@fluentui/react-storybook-addon_v9.0.0-rc.1)
|
|
146
|
+
|
|
147
|
+
### Changes
|
|
148
|
+
|
|
149
|
+
- Bump @fluentui/react-theme to v9.0.0-rc.6 ([PR #22786](https://github.com/microsoft/fluentui/pull/22786) by beachball)
|
|
150
|
+
- Bump @fluentui/react-provider to v9.0.0-rc.8 ([PR #22786](https://github.com/microsoft/fluentui/pull/22786) by beachball)
|
|
151
|
+
|
|
152
|
+
## [9.0.0-rc.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-storybook-addon_v9.0.0-rc.1)
|
|
153
|
+
|
|
154
|
+
Mon, 25 Apr 2022 09:32:19 GMT
|
|
155
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-storybook-addon_v9.0.0-rc.1..@fluentui/react-storybook-addon_v9.0.0-rc.1)
|
|
156
|
+
|
|
157
|
+
### Changes
|
|
158
|
+
|
|
159
|
+
- Bump @fluentui/react-provider to v9.0.0-rc.7 ([PR #22601](https://github.com/microsoft/fluentui/pull/22601) by beachball)
|
|
160
|
+
|
|
161
|
+
## [9.0.0-rc.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-storybook-addon_v9.0.0-rc.1)
|
|
162
|
+
|
|
163
|
+
Tue, 19 Apr 2022 19:17:29 GMT
|
|
164
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-storybook-addon_v9.0.0-rc.1..@fluentui/react-storybook-addon_v9.0.0-rc.1)
|
|
165
|
+
|
|
166
|
+
### Changes
|
|
167
|
+
|
|
168
|
+
- Bump @fluentui/react-theme to v9.0.0-rc.5 ([PR #21995](https://github.com/microsoft/fluentui/pull/21995) by beachball)
|
|
169
|
+
- Bump @fluentui/react-provider to v9.0.0-rc.6 ([PR #21995](https://github.com/microsoft/fluentui/pull/21995) by beachball)
|
|
170
|
+
|
|
171
|
+
## [9.0.0-rc.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-storybook-addon_v9.0.0-rc.1)
|
|
172
|
+
|
|
173
|
+
Fri, 04 Mar 2022 05:17:40 GMT
|
|
174
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-storybook-addon_v9.0.0-rc.1..@fluentui/react-storybook-addon_v9.0.0-rc.1)
|
|
175
|
+
|
|
176
|
+
### Changes
|
|
177
|
+
|
|
178
|
+
- Bump @fluentui/react-theme to v9.0.0-rc.4 ([PR #21947](https://github.com/microsoft/fluentui/pull/21947) by beachball)
|
|
179
|
+
- Bump @fluentui/react-provider to v9.0.0-rc.5 ([PR #21947](https://github.com/microsoft/fluentui/pull/21947) by beachball)
|
|
180
|
+
|
|
181
|
+
## [9.0.0-rc.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-storybook-addon_v9.0.0-rc.1)
|
|
182
|
+
|
|
183
|
+
Tue, 01 Mar 2022 02:17:40 GMT
|
|
184
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-storybook-addon_v9.0.0-rc.1..@fluentui/react-storybook-addon_v9.0.0-rc.1)
|
|
185
|
+
|
|
186
|
+
### Changes
|
|
187
|
+
|
|
188
|
+
- Bump @fluentui/react-provider to v9.0.0-rc.4 ([PR #21884](https://github.com/microsoft/fluentui/pull/21884) by beachball)
|
|
189
|
+
|
|
190
|
+
## [9.0.0-rc.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-storybook-addon_v9.0.0-rc.1)
|
|
191
|
+
|
|
192
|
+
Fri, 18 Feb 2022 13:35:38 GMT
|
|
193
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-storybook-addon_v9.0.0-rc.0..@fluentui/react-storybook-addon_v9.0.0-rc.1)
|
|
194
|
+
|
|
195
|
+
### Changes
|
|
196
|
+
|
|
197
|
+
- Bump @fluentui/react-theme to v9.0.0-rc.3 ([PR #21800](https://github.com/microsoft/fluentui/pull/21800) by beachball)
|
|
198
|
+
- Bump @fluentui/react-provider to v9.0.0-rc.3 ([PR #21800](https://github.com/microsoft/fluentui/pull/21800) by beachball)
|
|
199
|
+
|
|
200
|
+
## [9.0.0-rc.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-storybook-addon_v9.0.0-rc.0)
|
|
201
|
+
|
|
202
|
+
Thu, 10 Feb 2022 08:52:26 GMT
|
|
203
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-storybook-addon_v9.0.0-beta.0..@fluentui/react-storybook-addon_v9.0.0-rc.0)
|
|
204
|
+
|
|
205
|
+
### Changes
|
|
206
|
+
|
|
207
|
+
- Bump @fluentui/react-theme to v9.0.0-rc.1 ([commit](https://github.com/microsoft/fluentui/commit/e6c855f6d9019d6c73668d15fc9bc3a13291a6c8) by beachball)
|
|
208
|
+
- Bump @fluentui/react-provider to v9.0.0-rc.1 ([commit](https://github.com/microsoft/fluentui/commit/e6c855f6d9019d6c73668d15fc9bc3a13291a6c8) by beachball)
|
|
209
|
+
|
|
210
|
+
## [9.0.0-beta.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-storybook-addon_v9.0.0-beta.0)
|
|
211
|
+
|
|
212
|
+
Thu, 25 Nov 2021 08:34:17 GMT
|
|
213
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-storybook-addon_v9.0.0-beta.0..@fluentui/react-storybook-addon_v9.0.0-beta.0)
|
|
214
|
+
|
|
215
|
+
### Changes
|
|
216
|
+
|
|
217
|
+
- Bump @fluentui/react-theme to v9.0.0-beta.4 ([PR #20762](https://github.com/microsoft/fluentui/pull/20762) by beachball)
|
|
218
|
+
- Bump @fluentui/react-provider to v9.0.0-beta.5 ([PR #20762](https://github.com/microsoft/fluentui/pull/20762) by beachball)
|
|
219
|
+
|
|
220
|
+
## [9.0.0-beta.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-storybook-addon_v9.0.0-beta.0)
|
|
221
|
+
|
|
222
|
+
Fri, 12 Nov 2021 13:25:34 GMT
|
|
223
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-storybook-addon_v9.0.0-alpha.0..@fluentui/react-storybook-addon_v9.0.0-beta.0)
|
|
224
|
+
|
|
225
|
+
### Changes
|
|
226
|
+
|
|
227
|
+
- Bump @fluentui/react-theme to v9.0.0-beta.3 ([PR #20583](https://github.com/microsoft/fluentui/pull/20583) by beachball)
|
|
228
|
+
- Bump @fluentui/react-provider to v9.0.0-beta.4 ([PR #20583](https://github.com/microsoft/fluentui/pull/20583) by beachball)
|
package/LICENSE
ADDED
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
@fluentui/react-storybook-addon
|
|
2
|
+
|
|
3
|
+
Copyright (c) Microsoft Corporation
|
|
4
|
+
|
|
5
|
+
All rights reserved.
|
|
6
|
+
|
|
7
|
+
MIT License
|
|
8
|
+
|
|
9
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the ""Software""), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
|
|
10
|
+
|
|
11
|
+
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
|
12
|
+
|
|
13
|
+
THE SOFTWARE IS PROVIDED *AS IS*, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
|
14
|
+
|
|
15
|
+
Note: Usage of the fonts and icons referenced in Fluent UI React is subject to the terms listed at https://aka.ms/fluentui-assets-license
|
package/README.md
ADDED
|
@@ -0,0 +1,98 @@
|
|
|
1
|
+
# @fluentui/react-storybook-addon
|
|
2
|
+
|
|
3
|
+
**Storybook addon for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**
|
|
4
|
+
|
|
5
|
+
## ✨ Features
|
|
6
|
+
|
|
7
|
+
### Toolbar/Tools
|
|
8
|
+
|
|
9
|
+
- Adds a Fluent theme switcher:
|
|
10
|
+
- 
|
|
11
|
+
|
|
12
|
+
### Theme Management in Storybook Globals
|
|
13
|
+
|
|
14
|
+
Exports types and utilities to set and consume the correct Fluent theme in Storybook globals. Here's an example picker that sets the Fluent theme in Storybook globals.
|
|
15
|
+
|
|
16
|
+
```tsx
|
|
17
|
+
import * as React from 'react';
|
|
18
|
+
import { themes, setGlobalTheme, FluentStoryContext, THEME_ID } from '@fluentui/react-storybook-addon';
|
|
19
|
+
|
|
20
|
+
// Storybook context which can be accessed, for example, in decorators
|
|
21
|
+
// https://storybook.js.org/docs/react/writing-stories/decorators#context-for-mocking
|
|
22
|
+
export const ThemePicker: React.FC<{ context: FluentStoryContext }> = ({ context }) => {
|
|
23
|
+
const handleChange = e => {
|
|
24
|
+
setGlobalTheme(e.target.value);
|
|
25
|
+
};
|
|
26
|
+
|
|
27
|
+
const selectedTheme = themes.find(theme => theme.id === context.globals[THEME_ID]);
|
|
28
|
+
|
|
29
|
+
return (
|
|
30
|
+
<select onChange={handleChange}>
|
|
31
|
+
{themes.map(theme => (
|
|
32
|
+
<option selected={selectedTheme.id === theme.id} value={theme.id}>
|
|
33
|
+
{theme.label}
|
|
34
|
+
</option>
|
|
35
|
+
))}
|
|
36
|
+
</select>
|
|
37
|
+
);
|
|
38
|
+
};
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
## Getting Started
|
|
42
|
+
|
|
43
|
+
### Installation
|
|
44
|
+
|
|
45
|
+
To install the addon, run:
|
|
46
|
+
|
|
47
|
+
```sh
|
|
48
|
+
yarn add -D @fluentui/react-storybook-addon
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
### Configuration
|
|
52
|
+
|
|
53
|
+
Add the following content to `.storybook/main.js`:
|
|
54
|
+
|
|
55
|
+
```js
|
|
56
|
+
module.exports = {
|
|
57
|
+
addons: ['@fluentui/react-storybook-addon'],
|
|
58
|
+
};
|
|
59
|
+
```
|
|
60
|
+
|
|
61
|
+
## Development
|
|
62
|
+
|
|
63
|
+
1. Run the inner loop from the monorepo root with `yarn workspace @fluentui/react-storybook-addon storybook`.
|
|
64
|
+
|
|
65
|
+
- 💡 This will run the `prestorybook` script that compiles the addon implementation with all of its direct dependencies within the monorepo, so it can be consumed by the local Storybook.
|
|
66
|
+
|
|
67
|
+
2. After making any changes to the implementation, manually run `yarn workspace @fluentui/react-storybook-addon build` to reflect those changes in your local Storybook.
|
|
68
|
+
|
|
69
|
+
## Parameter Configuration
|
|
70
|
+
|
|
71
|
+
Three custom optional parameters can be set to alter the behavior of the addon:
|
|
72
|
+
|
|
73
|
+
1. `dir` - Determines whether to render the story in `ltr` or `rtl` mode. Default is `undefined`.
|
|
74
|
+
2. `fluentTheme` - Determines whether to render the story theme in `web-light`, `web-dark`, `teams-high-contrast`, `teams-dark`, or `teams-light`. Setting this parameter will disable the ability to dynamically change the theme within the story canvas or doc.
|
|
75
|
+
3. `mode` - When set to `vr-test`, this removes the injected padding and background theme that's automatically applied from the rendered story. Default is `default`.
|
|
76
|
+
|
|
77
|
+
```js
|
|
78
|
+
import { FluentParameters, parameters } from '@fluentui/react-storybook-addon';
|
|
79
|
+
import { Button } from '@fluentui/react-components';
|
|
80
|
+
|
|
81
|
+
export const Button = () => <Button>Hello World</Button>;
|
|
82
|
+
|
|
83
|
+
export const ButtonDarkMode = {
|
|
84
|
+
render: Button,
|
|
85
|
+
parameters: { fluentTheme: 'web-dark' } as FluentParameters, // Story renders in Dark mode.
|
|
86
|
+
};
|
|
87
|
+
|
|
88
|
+
export const ButtonHighContrast = {
|
|
89
|
+
render: Button,
|
|
90
|
+
parameters: { fluentTheme: 'teams-high-contrast', mode: 'vr-test' } as FluentParameters, // Story renders in High Contrast mode without injected padding and background style.
|
|
91
|
+
};
|
|
92
|
+
|
|
93
|
+
export const ButtonRTL = {
|
|
94
|
+
render: Button,
|
|
95
|
+
// Parameters identity function will have all TS type annotations built in for intellisense.
|
|
96
|
+
parameters: parameters({ fluentTheme: 'web-light', dir: 'rtl', mode: 'vr-test' }), // Story renders in RTL, Web light mode and without injected padding and background style.
|
|
97
|
+
};
|
|
98
|
+
```
|
package/package.json
ADDED
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@fluentui/react-storybook-addon",
|
|
3
|
+
"version": "0.0.0-nightly-20250331-0406.1",
|
|
4
|
+
"description": "fluentui react storybook addon",
|
|
5
|
+
"main": "lib-commonjs/index.js",
|
|
6
|
+
"module": "lib/index.js",
|
|
7
|
+
"typings": "./dist/index.d.ts",
|
|
8
|
+
"sideEffects": false,
|
|
9
|
+
"repository": {
|
|
10
|
+
"type": "git",
|
|
11
|
+
"url": "https://github.com/microsoft/fluentui"
|
|
12
|
+
},
|
|
13
|
+
"license": "MIT",
|
|
14
|
+
"devDependencies": {
|
|
15
|
+
"@fluentui/eslint-plugin": "*",
|
|
16
|
+
"@fluentui/scripts-api-extractor": "*"
|
|
17
|
+
},
|
|
18
|
+
"dependencies": {
|
|
19
|
+
"@fluentui/react-aria": "0.0.0-nightly-20250331-0406.1",
|
|
20
|
+
"@fluentui/react-provider": "0.0.0-nightly-20250331-0406.1",
|
|
21
|
+
"@fluentui/react-theme": "0.0.0-nightly-20250331-0406.1",
|
|
22
|
+
"@swc/helpers": "^0.5.1"
|
|
23
|
+
},
|
|
24
|
+
"peerDependencies": {
|
|
25
|
+
"@storybook/components": "^7.6.20",
|
|
26
|
+
"@storybook/manager-api": "^7.6.20",
|
|
27
|
+
"@storybook/react": "^7.6.20",
|
|
28
|
+
"@storybook/theming": "^7.6.20",
|
|
29
|
+
"@types/react-dom": ">=16.9.0 <19.0.0",
|
|
30
|
+
"@types/react": ">=16.14.0 <19.0.0",
|
|
31
|
+
"react-dom": ">=16.14.0 <19.0.0",
|
|
32
|
+
"react": ">=16.14.0 <19.0.0"
|
|
33
|
+
},
|
|
34
|
+
"beachball": {},
|
|
35
|
+
"exports": {
|
|
36
|
+
".": {
|
|
37
|
+
"types": "./dist/index.d.ts",
|
|
38
|
+
"node": "./lib-commonjs/index.js",
|
|
39
|
+
"import": "./lib/index.js",
|
|
40
|
+
"require": "./lib-commonjs/index.js"
|
|
41
|
+
},
|
|
42
|
+
"./preset": "./preset.js",
|
|
43
|
+
"./package.json": "./package.json"
|
|
44
|
+
},
|
|
45
|
+
"files": [
|
|
46
|
+
"*.md",
|
|
47
|
+
"dist/*.d.ts",
|
|
48
|
+
"lib",
|
|
49
|
+
"lib-commonjs",
|
|
50
|
+
"preset.js"
|
|
51
|
+
]
|
|
52
|
+
}
|
package/preset.js
ADDED
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
function previewAnnotations(entry = []) {
|
|
2
|
+
return [...entry, require.resolve('./lib/preset/preview')];
|
|
3
|
+
}
|
|
4
|
+
|
|
5
|
+
function managerEntries(entry = []) {
|
|
6
|
+
return [...entry, require.resolve('./lib/preset/manager')];
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
module.exports = { managerEntries, previewAnnotations };
|