Skip to content

Commit cadcfa9

Browse files
committed
chore(storybook): 🔧 fix issue with stories
1 parent 0ee5e70 commit cadcfa9

File tree

7 files changed

+159
-438
lines changed

7 files changed

+159
-438
lines changed

.storybook/main.js

+1-8
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,5 @@
11
module.exports = {
2-
features: {
3-
previewCsfV3: true,
4-
},
5-
// core: { builder: "storybook-builder-vite" },
6-
// async viteFinal(config, { configType }) {
7-
// // customize the Vite config here
8-
// return config;
9-
// },
2+
features: { previewCsfV3: true },
103
stories: ["../src/*/stories/*.stories.@(ts|tsx)"],
114
addons: [
125
"@storybook/addon-essentials",

.storybook/manager.js

-16
This file was deleted.

package.json

+10-13
Original file line numberDiff line numberDiff line change
@@ -83,16 +83,16 @@
8383
},
8484
"dependencies": {
8585
"@react-aria/live-announcer": "^3.0.1",
86-
"@renderlesskit/react": "^0.6.0",
86+
"@renderlesskit/react": "^0.6.1",
8787
"lodash": "^4.17.21",
8888
"reakit": "^1.3.9",
8989
"reakit-system": "^0.15.2",
9090
"reakit-utils": "^0.15.2",
9191
"reakit-warning": "^0.6.2",
92-
"tailwind-merge": "^0.6.0"
92+
"tailwind-merge": "^0.7.0"
9393
},
9494
"devDependencies": {
95-
"@babel/cli": "7.15.4",
95+
"@babel/cli": "7.15.7",
9696
"@babel/core": "^7.15.5",
9797
"@babel/plugin-proposal-class-properties": "7.14.5",
9898
"@babel/plugin-proposal-logical-assignment-operators": "^7.14.5",
@@ -116,8 +116,8 @@
116116
"@testing-library/user-event": "^13.2.1",
117117
"@types/jest": "^27.0.1",
118118
"@types/jest-axe": "^3.5.2",
119-
"@types/node": "^16.9.1",
120-
"@types/react": "^17.0.21",
119+
"@types/node": "^16.9.4",
120+
"@types/react": "^17.0.22",
121121
"@types/react-dom": "^17.0.9",
122122
"@types/tailwindcss": "^2.2.1",
123123
"@types/testing-library__jest-dom": "^5.14.1",
@@ -140,12 +140,12 @@
140140
"eslint-config-react-app": "^6.0.0",
141141
"eslint-plugin-flowtype": "^6.0.1",
142142
"eslint-plugin-import": "^2.24.2",
143-
"eslint-plugin-jest": "^24.4.0",
143+
"eslint-plugin-jest": "^24.4.2",
144144
"eslint-plugin-jsx-a11y": "^6.4.1",
145145
"eslint-plugin-prettier": "^4.0.0",
146-
"eslint-plugin-react": "^7.25.1",
146+
"eslint-plugin-react": "^7.25.3",
147147
"eslint-plugin-react-hooks": "^4.2.0",
148-
"eslint-plugin-testing-library": "^4.12.2",
148+
"eslint-plugin-testing-library": "^4.12.3",
149149
"focus-visible": "^5.2.0",
150150
"fs-extra": "^10.0.0",
151151
"gacp": "^2.10.2",
@@ -163,20 +163,17 @@
163163
"prettier": "2.4.1",
164164
"react": "^17.0.2",
165165
"react-dom": "^17.0.2",
166-
"react-hook-form": "^7.15.3",
166+
"react-hook-form": "^7.15.4",
167167
"react-icons": "^4.2.0",
168168
"reakit-test-utils": "^0.15.2",
169169
"release-it": "^14.11.5",
170170
"rimraf": "^3.0.2",
171171
"sort-package-json": "^1.51.0",
172-
"storybook-addon-pseudo-states": "^1.0.0",
173-
"storybook-builder-vite": "^0.0.12",
174172
"tailwindcss": "2.2.15",
175173
"ts-morph": "^12.0.0",
176174
"ts-node": "^10.2.1",
177175
"tsd": "^0.17.0",
178-
"typescript": "^4.4.3",
179-
"vite": "^2.5.7"
176+
"typescript": "^4.4.3"
180177
},
181178
"peerDependencies": {
182179
"deepmerge": "4.x",

postcss.config.js

+6-6
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
module.exports = {
2-
plugins: {
3-
tailwindcss: {},
4-
"postcss-flexbugs-fixes": {},
5-
"postcss-focus-visible": {},
6-
autoprefixer: { flexbox: "no-2009" },
7-
},
2+
plugins: [
3+
require("tailwindcss"),
4+
require("postcss-flexbugs-fixes"),
5+
require("postcss-focus-visible"),
6+
require("autoprefixer"),
7+
],
88
};

src/button/stories/Button.stories.tsx

+1-17
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
import { useState, useEffect } from "react";
22
import { ComponentStory, ComponentMeta } from "@storybook/react";
3-
// @ts-ignore
4-
import { withPseudoState } from "storybook-addon-pseudo-states/dist/withPseudoState";
53

64
import {
75
Button,
@@ -39,7 +37,6 @@ export default {
3937

4038
export const Default: Story = {
4139
args: { children: "Continue", size: "md", variant: "solid" },
42-
decorators: [withPseudoState],
4340
parameters: { options: { showPanel: true } },
4441
};
4542

@@ -128,7 +125,7 @@ export const ButtonStack: Story = {
128125
Continue
129126
</Button>
130127
<Button {...args} size="xl" variant="ghost">
131-
Continue
128+
Continues
132129
</Button>
133130
</div>
134131
</div>
@@ -140,22 +137,9 @@ export const ButtonStack: Story = {
140137
size: { table: { disable: true } },
141138
variant: { table: { disable: true } },
142139
},
143-
decorators: [withPseudoState],
144140
parameters: { options: { showPanel: true } },
145141
};
146142

147-
export const HoverStack: Story = {
148-
...ButtonStack,
149-
parameters: { options: { showPanel: false }, pseudo: { hover: true } },
150-
};
151-
export const ActiveStack: Story = {
152-
...ButtonStack,
153-
parameters: { options: { showPanel: false }, pseudo: { active: true } },
154-
};
155-
export const FocusStack: Story = {
156-
...ButtonStack,
157-
parameters: { options: { showPanel: false }, pseudo: { focusVisible: true } },
158-
};
159143
export const DisabledStack: Story = {
160144
...ButtonStack,
161145
args: { disabled: true },

src/checkbox/stories/Checkbox.stories.tsx

+21-38
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
11
import { twMerge as cx } from "tailwind-merge";
22
import { useEffect, useMemo, useState } from "react";
33
import { ComponentMeta, ComponentStory } from "@storybook/react";
4-
// @ts-ignore
5-
import { withPseudoState } from "storybook-addon-pseudo-states/dist/withPseudoState";
64

75
import {
86
CheckboxIcon,
@@ -27,27 +25,27 @@ type Story = ComponentStory<typeof Checkbox>;
2725
export default {
2826
title: "Forms/Checkbox",
2927
component: Checkbox,
30-
argTypes: {
31-
label: { control: { type: "text" } },
32-
description: { control: { type: "text" } },
33-
...createControls("checkbox", {
34-
ignore: [
35-
"unstable_system",
36-
"unstable_clickOnEnter",
37-
"unstable_clickOnSpace",
38-
"wrapElement",
39-
"focusable",
40-
"as",
41-
"setState",
42-
"checked",
43-
"value",
44-
"defaultState",
45-
"state",
46-
"onStateChange",
47-
"icon",
48-
],
49-
}),
50-
},
28+
// argTypes: {
29+
// label: { control: { type: "text" } },
30+
// description: { control: { type: "text" } },
31+
// ...createControls("checkbox", {
32+
// ignore: [
33+
// "unstable_system",
34+
// "unstable_clickOnEnter",
35+
// "unstable_clickOnSpace",
36+
// "wrapElement",
37+
// "focusable",
38+
// "as",
39+
// "setState",
40+
// "checked",
41+
// "value",
42+
// "defaultState",
43+
// "state",
44+
// "onStateChange",
45+
// "icon",
46+
// ],
47+
// }),
48+
// },
5149
parameters: {
5250
layout: "centered",
5351
},
@@ -119,22 +117,9 @@ export const CheckboxStack: Story = {
119117
disabled: { table: { disable: false } },
120118
size: { table: { disable: true } },
121119
},
122-
decorators: [withPseudoState],
123120
parameters: { options: { showPanel: true } },
124121
};
125122

126-
export const HoverStack: Story = {
127-
...CheckboxStack,
128-
parameters: { options: { showPanel: false }, pseudo: { hover: true } },
129-
};
130-
export const ActiveStack: Story = {
131-
...CheckboxStack,
132-
parameters: { options: { showPanel: false }, pseudo: { active: true } },
133-
};
134-
export const FocusStack: Story = {
135-
...CheckboxStack,
136-
parameters: { options: { showPanel: false }, pseudo: { focusVisible: true } },
137-
};
138123
export const DisabledStack: Story = {
139124
...CheckboxStack,
140125
args: { disabled: true },
@@ -182,7 +167,6 @@ export const WithLabelStack: Story = {
182167
disabled: { table: { disable: false } },
183168
size: { table: { disable: true } },
184169
},
185-
decorators: [withPseudoState],
186170
parameters: { options: { showPanel: true } },
187171
};
188172

@@ -263,7 +247,6 @@ export const WithDescriptionStack: Story = {
263247
disabled: { table: { disable: false } },
264248
size: { table: { disable: true } },
265249
},
266-
decorators: [withPseudoState],
267250
parameters: { options: { showPanel: true } },
268251
};
269252

0 commit comments

Comments
 (0)