Skip to content

Commit a4a243c

Browse files
hannajoneshannajones
committed
Bug 1828737 - upgrade to Storybook V7 r=reusable-components-reviewers,tgiles
This patch upgrades Storybook to the latest version. Had to do a decent bit of hacking around with our customizations to get them to keep working. Probably the biggest change was we now have to use an [indexer](https://storybook.js.org/docs/api/main-config-indexers) for our markdown stories, and in order to get the information we need we have to do the same transformations that we do in the loader. For that reason I moved a lot of the loader logic out into a utils file. It feels pretty redundant to have the loader and the indexer...but I'm not sure if there's an alternative right now. Also worth noting - I turned off the auto generated docs in favor of our READMEs, which I added args tables to. We don't have these for all our components yet, so we might want to file bugs to start adding them. If we would prefer to keep those docs pages for now I think I can configure Storybook to keep generating them Differential Revision: https://phabricator.services.mozilla.com/D197218
1 parent 16a0b5b commit a4a243c

File tree

17 files changed

+15573
-29703
lines changed

17 files changed

+15573
-29703
lines changed

‎browser/components/storybook/.babelrc.json

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"sourceType": "unambiguous",
3+
"presets": ["@babel/preset-env", "@babel/preset-react"],
4+
"plugins": []
5+
}

‎browser/components/storybook/.storybook/addon-component-status/StatusIndicator.mjs renamed to ‎browser/components/storybook/.storybook/addon-component-status/StatusIndicator.jsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44

55
// eslint-disable-next-line no-unused-vars
66
import React from "react";
7-
import { useParameter } from "@storybook/api";
7+
import { useParameter } from "@storybook/manager-api";
88
import {
99
// eslint-disable-next-line no-unused-vars
1010
Badge,
@@ -85,7 +85,7 @@ export const StatusIndicator = () => {
8585
style={{
8686
display: "flex",
8787
}}
88-
onVisibilityChange={onVisibilityChange}
88+
onVisibleChange={onVisibilityChange}
8989
tooltip={() => (
9090
<div id="statusMessage">
9191
<TooltipMessage

‎browser/components/storybook/.storybook/addon-component-status/preset/manager.mjs

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,9 @@
44

55
/** This file handles registering the Storybook addon */
66

7-
// eslint-disable-next-line no-unused-vars
8-
import React from "react";
9-
import { addons, types } from "@storybook/addons";
7+
import { addons, types } from "@storybook/manager-api";
108
import { ADDON_ID, TOOL_ID } from "../constants.mjs";
11-
import { StatusIndicator } from "../StatusIndicator.mjs";
9+
import { StatusIndicator } from "../StatusIndicator.jsx";
1210

1311
addons.register(ADDON_ID, () => {
1412
addons.add(TOOL_ID, {

‎browser/components/storybook/.storybook/addon-fluent/FluentPanel.jsx

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
/* This Source Code Form is subject to the terms of the Mozilla Public
2+
* License, v. 2.0. If a copy of the MPL was not distributed with this
3+
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
4+
5+
// eslint-disable-next-line no-unused-vars
6+
import React, { useEffect, useState } from "react";
7+
import { addons, useGlobals, useStorybookApi } from "@storybook/manager-api";
8+
// eslint-disable-next-line no-unused-vars
9+
import { AddonPanel, Table, Form } from "@storybook/components";
10+
import { FLUENT_CHANGED, FLUENT_SET_STRINGS } from "./constants.mjs";
11+
// eslint-disable-next-line import/no-unassigned-import
12+
import "./fluent-panel.css";
13+
14+
export const FluentPanel = ({ active }) => {
15+
const [fileName, setFileName] = useState(null);
16+
const [strings, setStrings] = useState([]);
17+
const [{ fluentStrings }, updateGlobals] = useGlobals();
18+
const channel = addons.getChannel();
19+
const api = useStorybookApi();
20+
21+
useEffect(() => {
22+
channel.on(FLUENT_CHANGED, handleFluentChanged);
23+
return () => {
24+
channel.off(FLUENT_CHANGED, handleFluentChanged);
25+
};
26+
}, [channel]);
27+
28+
const handleFluentChanged = (nextStrings, fluentFile) => {
29+
setFileName(fluentFile);
30+
setStrings(nextStrings);
31+
};
32+
33+
const onInput = e => {
34+
let nextStrings = [];
35+
for (let [key, value] of strings) {
36+
if (key == e.target.name) {
37+
let stringValue = e.target.value;
38+
if (stringValue.startsWith(".")) {
39+
stringValue = "\n" + stringValue;
40+
}
41+
nextStrings.push([key, stringValue]);
42+
} else {
43+
nextStrings.push([key, value]);
44+
}
45+
}
46+
let stringified = nextStrings
47+
.map(([key, value]) => `${key} = ${value}`)
48+
.join("\n");
49+
channel.emit(FLUENT_SET_STRINGS, stringified);
50+
updateGlobals({
51+
fluentStrings: { ...fluentStrings, [fileName]: nextStrings },
52+
});
53+
return { fileName, strings };
54+
};
55+
56+
const addonTemplate = () => {
57+
if (strings.length === 0) {
58+
return (
59+
<AddonPanel active={!!active} api={api}>
60+
<div className="addon-panel-body">
61+
<div className="addon-panel-message">
62+
This story is not configured to use Fluent.
63+
</div>
64+
</div>
65+
</AddonPanel>
66+
);
67+
}
68+
69+
return (
70+
<AddonPanel active={!!active} api={api}>
71+
<div className="addon-panel-body">
72+
<Table aria-hidden="false" className="addon-panel-table">
73+
<thead className="addon-panel-table-head">
74+
<tr>
75+
<th>
76+
<span>Identifier</span>
77+
</th>
78+
<th>
79+
<span>String</span>
80+
</th>
81+
</tr>
82+
</thead>
83+
<tbody className="addon-panel-table-body">
84+
{strings.map(([identifier, value]) => (
85+
<tr key={identifier}>
86+
<td>
87+
<span>{identifier}</span>
88+
</td>
89+
<td>
90+
<Form.Textarea
91+
name={identifier}
92+
onInput={onInput}
93+
defaultValue={value
94+
.trim()
95+
.split("\n")
96+
.map(s => s.trim())
97+
.join("\n")}
98+
></Form.Textarea>
99+
</td>
100+
</tr>
101+
))}
102+
</tbody>
103+
</Table>
104+
</div>
105+
</AddonPanel>
106+
);
107+
};
108+
109+
return addonTemplate();
110+
};

‎browser/components/storybook/.storybook/addon-fluent/FluentPanel.mjs

Lines changed: 0 additions & 121 deletions
This file was deleted.

‎browser/components/storybook/.storybook/addon-fluent/PseudoLocalizationButton.mjs renamed to ‎browser/components/storybook/.storybook/addon-fluent/PseudoLocalizationButton.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44

55
// eslint-disable-next-line no-unused-vars
66
import React from "react";
7-
import { useGlobals } from "@storybook/api";
7+
import { useGlobals } from "@storybook/manager-api";
88
import {
99
// eslint-disable-next-line no-unused-vars
1010
Icons,

‎browser/components/storybook/.storybook/addon-fluent/fluent-panel.css

Lines changed: 27 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -15,69 +15,59 @@
1515
font-size: 13px;
1616
}
1717

18-
.addon-panel-table {
19-
border-collapse: collapse;
18+
table.addon-panel-table {
2019
border-spacing: 0;
21-
color: #333333;
22-
font-size: 13px;
23-
line-height: 20px;
2420
text-align: left;
2521
width: 100%;
2622
margin: 0;
2723
}
2824

29-
.addon-panel-table-head {
30-
color: rgba(51,51,51,0.75);
25+
table.addon-panel-table thead.addon-panel-table-head th {
26+
border: none;
27+
color: rgba(46, 52, 56, 0.75);
3128
}
3229

33-
.addon-panel-table-head th {
34-
padding: 10px 15px;
35-
border: none;
36-
vertical-align: top;
30+
@media (prefers-color-scheme: dark) {
31+
table.addon-panel-table thead.addon-panel-table-head th {
32+
color: rgba(201, 205, 207, 0.55)
33+
}
34+
}
35+
36+
table.addon-panel-table thead.addon-panel-table-head tr {
37+
border-top: none;
3738
}
3839

39-
.addon-panel-table-head th:first-of-type, .addon-panel-table-body td:first-of-type {
40+
.addon-panel-table-head th:first-of-type,
41+
.addon-panel-table-body td:first-of-type {
4042
width: 25%;
4143
padding-left: 20px;
44+
border-inline: none;
4245
}
4346

44-
.addon-panel-table-head th:last-of-type, .addon-panel-table-body td:last-of-type {
47+
.addon-panel-table-head th:last-of-type,
48+
.addon-panel-table-body td:last-of-type {
4549
padding-right: 20px;
50+
border-inline-start: none;
4651
}
4752

48-
.addon-panel-table-body {
49-
border-radius: 4px;
50-
}
51-
52-
.addon-panel-table-body tr {
53+
.addon-panel-body {
5354
overflow: hidden;
54-
border-top: 1px solid #e6e6e6;
5555
}
5656

5757
.addon-panel-table-body td {
58-
padding: 10px 15px;
5958
font-weight: bold;
59+
vertical-align: top;
6060
}
6161

62-
.addon-panel-table-body label {
63-
display: flex;
62+
table.addon-panel-table .addon-panel-table-body tr:nth-of-type(2n) {
63+
background-color: unset;
64+
}
65+
66+
.addon-panel-table-body tr:last-of-type td {
67+
border-bottom: none;
6468
}
6569

6670
.addon-panel-table-body textarea {
6771
height: fit-content;
68-
appearance: none;
69-
border: none;
70-
box-sizing: inherit;
71-
display: block;
72-
margin: 0;
73-
background-color: rgb(255, 255, 255);
74-
padding: 6px 10px;
75-
color: #333333;
76-
box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
77-
border-radius: 4px;
78-
line-height: 20px;
79-
flex: 1;
80-
text-align: left;
81-
overflow: visible;
82-
max-height: 400px;
72+
width: 100%;
8373
}

0 commit comments

Comments
 (0)