Skip to content

Commit 5fba21e

Browse files
pfultonpfulton
authored
feat: allow story-level params to be passed to RTL decorator (#1986)
* Provides the ability to pass a story-level parameter to set the language direction global * Updates our "Autodocs" template to remove the stories list for a given component
1 parent 37baa4c commit 5fba21e

File tree

5 files changed

+124
-4
lines changed

5 files changed

+124
-4
lines changed

‎tools/preview/DocumentationTemplate.mdx

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
{/* DocumentationTemplate.mdx */}
2+
3+
import { Meta, Title, Subtitle, Description, Primary, Controls, Stories } from '@storybook/blocks';
4+
5+
{/*
6+
* 👇 The isTemplate property is required to tell Storybook that this is a template
7+
* See https://storybook.js.org/docs/react/api/doc-block-meta
8+
* to learn how to use
9+
*/}
10+
11+
<Meta isTemplate />
12+
13+
<Title />
14+
15+
<Primary />
16+
17+
## Properties
18+
19+
The component accepts the following inputs (properties):
20+
21+
<Controls />

‎tools/preview/decorators/index.js

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,11 @@ export { withContextWrapper } from "./contextsWrapper.js";
99
**/
1010
export const withTextDirectionWrapper = makeDecorator({
1111
name: "withTextDirectionWrapper",
12-
parameterName: "context",
12+
parameterName: "textDecoration",
1313
wrapper: (StoryFn, context) => {
14-
const { globals } = context;
15-
const textDirection = globals.textDirection;
14+
const { globals, parameters } = context;
15+
const defaultDirection = "ltr"
16+
const textDirection = parameters.textDirection || globals.textDirection || defaultDirection;
1617

1718
// Shortkeys for the global types
1819
document.addEventListener("keydown", (e) => {
@@ -21,7 +22,7 @@ export const withTextDirectionWrapper = makeDecorator({
2122
document.documentElement.dir = "rtl";
2223
break;
2324
case "n":
24-
document.documentElement.dir = "ltr";
25+
document.documentElement.dir = defaultDirection;
2526
break;
2627
}
2728
});

‎tools/preview/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@
3333
"@storybook/addon-docs": "^7.0.20",
3434
"@storybook/addon-essentials": "^7.0.20",
3535
"@storybook/api": "^7.0.20",
36+
"@storybook/blocks": "^7.0.20",
3637
"@storybook/client-api": "^7.0.20",
3738
"@storybook/components": "^7.0.20",
3839
"@storybook/core-events": "^7.0.20",

‎tools/preview/preview.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import isChromatic from "chromatic/isChromatic";
22

3+
import DocumentationTemplate from './DocumentationTemplate.mdx';
34
import {
45
withContextWrapper,
56
withTextDirectionWrapper,
@@ -209,6 +210,7 @@ export const parameters = {
209210
},
210211
},
211212
docs: {
213+
page: DocumentationTemplate,
212214
story: {
213215
inline: true,
214216
iframeHeight: "200px",

‎yarn.lock

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3006,6 +3006,34 @@
30063006
ts-dedent "^2.0.0"
30073007
util-deprecate "^1.0.2"
30083008

3009+
"@storybook/blocks@^7.0.20":
3010+
version "7.0.24"
3011+
resolved "https://registry.yarnpkg.com/@storybook/blocks/-/blocks-7.0.24.tgz#43696ea35ca2d4b20feb9837a0663333aec21da5"
3012+
integrity sha512-76pe4QC3WZBVxBt/RomGubW5xzbh4uF7LVn1Vonfujf4GaHgIDzu7KtLIjgM3NmDJCsp3PNfbgA1EKzWrPQz2A==
3013+
dependencies:
3014+
"@storybook/channels" "7.0.24"
3015+
"@storybook/client-logger" "7.0.24"
3016+
"@storybook/components" "7.0.24"
3017+
"@storybook/core-events" "7.0.24"
3018+
"@storybook/csf" "^0.1.0"
3019+
"@storybook/docs-tools" "7.0.24"
3020+
"@storybook/global" "^5.0.0"
3021+
"@storybook/manager-api" "7.0.24"
3022+
"@storybook/preview-api" "7.0.24"
3023+
"@storybook/theming" "7.0.24"
3024+
"@storybook/types" "7.0.24"
3025+
"@types/lodash" "^4.14.167"
3026+
color-convert "^2.0.1"
3027+
dequal "^2.0.2"
3028+
lodash "^4.17.21"
3029+
markdown-to-jsx "^7.1.8"
3030+
memoizerific "^1.11.3"
3031+
polished "^4.2.2"
3032+
react-colorful "^5.1.2"
3033+
telejson "^7.0.3"
3034+
ts-dedent "^2.0.0"
3035+
util-deprecate "^1.0.2"
3036+
30093037
"@storybook/builder-manager@7.0.24":
30103038
version "7.0.24"
30113039
resolved "https://registry.yarnpkg.com/@storybook/builder-manager/-/builder-manager-7.0.24.tgz#0a88b6583de68d9cfc3107c4a5250a193f454ad8"
@@ -3232,6 +3260,20 @@
32323260
use-resize-observer "^9.1.0"
32333261
util-deprecate "^1.0.2"
32343262

3263+
"@storybook/components@7.0.24":
3264+
version "7.0.24"
3265+
resolved "https://registry.yarnpkg.com/@storybook/components/-/components-7.0.24.tgz#0676fa8d2085217786ccf994bc890dab0fa3d9c2"
3266+
integrity sha512-Pu7zGurCyWyiuFl2Pb5gybHA0f4blmHuVqccbMqnUw4Ew80BRu8AqfhNqN2hNdxFCx0mmy0baRGVftx76rNZ0w==
3267+
dependencies:
3268+
"@storybook/client-logger" "7.0.24"
3269+
"@storybook/csf" "^0.1.0"
3270+
"@storybook/global" "^5.0.0"
3271+
"@storybook/theming" "7.0.24"
3272+
"@storybook/types" "7.0.24"
3273+
memoizerific "^1.11.3"
3274+
use-resize-observer "^9.1.0"
3275+
util-deprecate "^1.0.2"
3276+
32353277
"@storybook/components@^7.0.9":
32363278
version "7.0.12"
32373279
resolved "https://registry.yarnpkg.com/@storybook/components/-/components-7.0.12.tgz#fe363ffd09e8643ff3e640e9208bbf02853c7c4c"
@@ -3442,6 +3484,19 @@
34423484
doctrine "^3.0.0"
34433485
lodash "^4.17.21"
34443486

3487+
"@storybook/docs-tools@7.0.24":
3488+
version "7.0.24"
3489+
resolved "https://registry.yarnpkg.com/@storybook/docs-tools/-/docs-tools-7.0.24.tgz#388a0bab7c2d179b571045929f264a2b984e38ee"
3490+
integrity sha512-vmDHmHB1B5CWsYQ7CEtfz4vdf36VK/EZdNQUox9kdN935Dks7KSuGcDdXiRlWc78e94/A9+1mJQpyfwtn3E8fQ==
3491+
dependencies:
3492+
"@babel/core" "^7.12.10"
3493+
"@storybook/core-common" "7.0.24"
3494+
"@storybook/preview-api" "7.0.24"
3495+
"@storybook/types" "7.0.24"
3496+
"@types/doctrine" "^0.0.3"
3497+
doctrine "^3.0.0"
3498+
lodash "^4.17.21"
3499+
34453500
"@storybook/global@^5.0.0":
34463501
version "5.0.0"
34473502
resolved "https://registry.yarnpkg.com/@storybook/global/-/global-5.0.0.tgz#b793d34b94f572c1d7d9e0f44fac4e0dbc9572ed"
@@ -3489,6 +3544,27 @@
34893544
telejson "^7.0.3"
34903545
ts-dedent "^2.0.0"
34913546

3547+
"@storybook/manager-api@7.0.24":
3548+
version "7.0.24"
3549+
resolved "https://registry.yarnpkg.com/@storybook/manager-api/-/manager-api-7.0.24.tgz#29a357a35c661a0e86567ef6f0f8afeca3b3bced"
3550+
integrity sha512-cBpgDWq8reFgyrv4fBZlZJQyWYb9cDW0LDe476rWn/29uXNvYMNsHRwveLNgSA8Oy1NdyQCgf4ZgcYvY3wpvMA==
3551+
dependencies:
3552+
"@storybook/channels" "7.0.24"
3553+
"@storybook/client-logger" "7.0.24"
3554+
"@storybook/core-events" "7.0.24"
3555+
"@storybook/csf" "^0.1.0"
3556+
"@storybook/global" "^5.0.0"
3557+
"@storybook/router" "7.0.24"
3558+
"@storybook/theming" "7.0.24"
3559+
"@storybook/types" "7.0.24"
3560+
dequal "^2.0.2"
3561+
lodash "^4.17.21"
3562+
memoizerific "^1.11.3"
3563+
semver "^7.3.7"
3564+
store2 "^2.14.2"
3565+
telejson "^7.0.3"
3566+
ts-dedent "^2.0.0"
3567+
34923568
"@storybook/manager@7.0.24":
34933569
version "7.0.24"
34943570
resolved "https://registry.yarnpkg.com/@storybook/manager/-/manager-7.0.24.tgz#7c9420d448a88574b696d2bd9c2ae11e7d33de22"
@@ -3607,6 +3683,15 @@
36073683
memoizerific "^1.11.3"
36083684
qs "^6.10.0"
36093685

3686+
"@storybook/router@7.0.24":
3687+
version "7.0.24"
3688+
resolved "https://registry.yarnpkg.com/@storybook/router/-/router-7.0.24.tgz#510b91d161d822f276300fded7b254ed3e2594f3"
3689+
integrity sha512-SRCV+srCZUbko/V0phVN8jY8ilrxQWWAY/gegwNlIYaNqLJSyYqIj739VDmX+deXl6rOEpFLZreClVXWiDU9+w==
3690+
dependencies:
3691+
"@storybook/client-logger" "7.0.24"
3692+
memoizerific "^1.11.3"
3693+
qs "^6.10.0"
3694+
36103695
"@storybook/store@7.0.20":
36113696
version "7.0.20"
36123697
resolved "https://registry.yarnpkg.com/@storybook/store/-/store-7.0.20.tgz#1a2192d696560cbe89bb5330f183fcd4ab26d5d7"
@@ -3650,6 +3735,16 @@
36503735
"@storybook/global" "^5.0.0"
36513736
memoizerific "^1.11.3"
36523737

3738+
"@storybook/theming@7.0.24":
3739+
version "7.0.24"
3740+
resolved "https://registry.yarnpkg.com/@storybook/theming/-/theming-7.0.24.tgz#5e74f20bda1cdb9ba2a4a0c7a96ca014cdee5532"
3741+
integrity sha512-CMeCCfqffJ/D5rBl1HpAM/e5Vw0h7ucT+CLzP0ALtLrguz9ZzOiIZYgMj17KpfvWqje7HT+DwEtNkSrnJ01FNQ==
3742+
dependencies:
3743+
"@emotion/use-insertion-effect-with-fallbacks" "^1.0.0"
3744+
"@storybook/client-logger" "7.0.24"
3745+
"@storybook/global" "^5.0.0"
3746+
memoizerific "^1.11.3"
3747+
36533748
"@storybook/types@7.0.12":
36543749
version "7.0.12"
36553750
resolved "https://registry.yarnpkg.com/@storybook/types/-/types-7.0.12.tgz#e3942135a3ff7a8932c2be449c078727d579d24d"

0 commit comments

Comments
 (0)