Skip to content

feat(storybook): working stories #4265

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 9 commits into from
Mar 7, 2025
Merged

feat(storybook): working stories #4265

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
557c8c9
feat(sotrybook): wokring stories
krisantrobus Mar 6, 2025
4a4dc23
feat(pr): polish for review
krisantrobus Mar 7, 2025
e8bfbdc
Merge branch 'upgrade-react-19' of github.com:twilio-labs/paste into …
krisantrobus Mar 7, 2025
f2bf8ca
feat(pr): polish for review
krisantrobus Mar 7, 2025
7a0a364
feat(ci): vix inherited versions for CI
krisantrobus Mar 7, 2025
c3b65a8
feat(ci): yarn lock
krisantrobus Mar 7, 2025
fe21f3a
feat(ci): yarn lock
krisantrobus Mar 7, 2025
4429109
feat(ci): yarn lock
krisantrobus Mar 7, 2025
33857c6
fix(theme): fix vbroken storybook
krisantrobus Mar 7, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion .eslintrc.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ module.exports = {
parserOptions: {
project: "./tsconfig.json",
},
plugins: ["eslint-comments", "jest", "unicorn", "promise", "@emotion/eslint-plugin", "paste-internal"],
plugins: ["eslint-comments", "jest", "unicorn", "promise", "@emotion/eslint-plugin", "paste-internal", "storybook"],
extends: [
"twilio-react",
"twilio-ts",
Expand Down Expand Up @@ -206,6 +206,7 @@ module.exports = {
// We don't use jasmine and this clashes with danger js
"jest/no-jasmine-globals": "off",
"jest/no-conditional-expect": "off",
// '@next/next/no-html-link-for-pages': [2, path.join(__dirname, 'custom-pages')],
},
overrides: [
{
Expand Down
3 changes: 2 additions & 1 deletion .storybook/addons/google-analytics/register.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
const { addons } = require("@storybook/addons");
const { addons } = require("@storybook/manager-api");

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

They deprecated the other package

const isChromatic = require("chromatic/isChromatic").default;
const { STORY_ERRORED, STORY_MISSING, STORY_RENDERED } = require("@storybook/core-events");
const ReactGA = require("react-ga");
Expand Down
7 changes: 7 additions & 0 deletions .storybook/main.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import path from "path";
import type { StorybookConfig } from "@storybook/react-vite";
import { mergeConfig } from "vite";
import turbosnap from "vite-plugin-turbosnap";

const config: StorybookConfig = {
stories: [
"../packages/**/*.stories.@(js|jsx|ts|tsx|mdx)",
Expand All @@ -22,7 +23,9 @@ const config: StorybookConfig = {
typescript: {
// enable type checking
check: true,
reactDocgen: "react-docgen-typescript",
},

async viteFinal(config, { configType }) {
const isTest = process.env.NODE_ENV === "test";
return mergeConfig(config, {
Expand Down Expand Up @@ -57,5 +60,9 @@ const config: StorybookConfig = {
},
});
},

docs: {
autodocs: false,
},
Comment on lines +64 to +66
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Kept this option in as we can set true to create docs. It's pretty cool, creates a prop tables and gives a preview of all storybooks. I disabled though because they could be pretty long depending on how many stories a component has and could potentially hit the chromatic length limit and fail our tests. We can investigate in future but we didn't have it origionally so not required

};
export default config;
1 change: 0 additions & 1 deletion .storybook/preview.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -281,7 +281,6 @@ export const decorators = [

export const parameters = {
isTestEnvironment,
actions: { argTypesRegex: "^on[A-Z].*" },
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

deprecated

viewport: {
viewports: INITIAL_VIEWPORTS,
},
Expand Down
33 changes: 18 additions & 15 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -121,17 +121,16 @@
"@octokit/graphql-schema": "^14.39.1",
"@percy/cli": "^1.10.1",
"@percy/cypress": "^3.1.2",
"@storybook/addon-a11y": "7.6.4",
"@storybook/addon-actions": "7.6.4",
"@storybook/addon-essentials": "7.6.4",
"@storybook/addon-interactions": "7.6.4",
"@storybook/addon-links": "7.6.4",
"@storybook/addons": "7.6.4",
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

depricated

"@storybook/cli": "7.6.4",
"@storybook/react": "7.6.4",
"@storybook/react-vite": "7.6.4",
"@storybook/test-runner": "0.16.0",
"@storybook/testing-library": "0.2.2",
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

depricated

"@storybook/addon-a11y": "^8.6.4",
"@storybook/addon-actions": "^8.6.4",
"@storybook/addon-essentials": "^8.6.4",
"@storybook/addon-interactions": "^8.6.4",
"@storybook/addon-links": "^8.6.4",
"@storybook/cli": "^8.6.4",
"@storybook/manager-api": "^8.6.4",
"@storybook/react": "^8.6.4",
"@storybook/react-vite": "^8.6.4",
"@storybook/test-runner": "^0.22.0",
"@swc/core": "^1.2.160",
"@swc/jest": "^0.2.20",
"@testing-library/jest-dom": "^5.16.5",
Expand Down Expand Up @@ -176,14 +175,14 @@
"eslint-config-twilio-ts": "2.0.0",
"eslint-plugin-cypress": "2.12.1",
"eslint-plugin-eslint-comments": "3.2.0",
"eslint-plugin-import": "2.26.0",
"eslint-plugin-import": "2.27.2",
"eslint-plugin-jest": "26.1.3",
"eslint-plugin-jsx-a11y": "6.5.1",
"eslint-plugin-prettier": "4.2.1",
"eslint-plugin-promise": "6.0.0",
"eslint-plugin-react": "7.29.4",
"eslint-plugin-react-hooks": "4.4.0",
"eslint-plugin-storybook": "^0.6.15",
"eslint-plugin-storybook": "0.8.0",
"eslint-plugin-unicorn": "40.1.0",
"evergreen-ui": "^7.0.0",
"git-branch-is": "^3.0.0",
Expand Down Expand Up @@ -213,7 +212,7 @@
"search-in-file": "^1.2.2",
"shelljs": "^0.8.5",
"start-server-and-test": "^2.0.3",
"storybook": "7.6.4",
"storybook": "^8.6.4",
"terser": "^5.14.2",
"theo": "^8.1.5",
"tslib": "^2.0.3",
Expand Down Expand Up @@ -242,5 +241,9 @@
"last 2 versions",
"not dead",
"not IE 11"
]
],
"devDependencies": {
"@storybook/test": "^8.6.4",
"@storybook/types": "^8.6.4"
}
}
8 changes: 1 addition & 7 deletions packages/paste-core/components/sidebar/stories/full-composition/docs.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,17 +24,11 @@ import {
SidebarNavigationItem,
SidebarPushContentWrapper,
} from "../../src";
import { AppSwitcher } from "./components/AppSwitcher";
import { NotificationsDialog } from "./components/NotificationsDialog";
import { SearchBox } from "./components/SearchBox";
import { SupportMenu } from "./components/SupportMenu";
import { UpgradeBadge } from "./components/UpgradeBadge";
import { UserDialogExample } from "./components/UserDialogSegment";
import { WorkspaceSwitcherMenu } from "./components/WorkspaceSwitcher";

// eslint-disable-next-line import/no-default-export
export default {
title: "Components/Sidebar/FullCompositions",
title: "Components/Sidebar/Docs",
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We already had another storybook with the same name and the new version failed to compile with it. This is for the docs site so more appropriately named

};

/* eslint-disable react/jsx-max-depth */
Expand Down
3 changes: 1 addition & 2 deletions packages/paste-website/.eslintrc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@
"root": true,
"rules": {
"import/no-default-export": "off",
"react/display-name": "off",
"react/react-in-jsx-scope": "off"
"react/display-name": "off"
}
}
Loading
Loading