Skip to content

Commit

Permalink
Merge pull request #330 from chromaui/norbert/cpc
Browse files Browse the repository at this point in the history
Align with Storybook 8.2 core package layout
  • Loading branch information
ghengeveld authored Sep 9, 2024
2 parents 6b99afb + a7fb32f commit 63bd4f7
Show file tree
Hide file tree
Showing 88 changed files with 2,997 additions and 2,308 deletions.
1 change: 1 addition & 0 deletions .eslintrc.cjs
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ module.exports = {
root: true,
extends: ["@storybook/eslint-config-storybook", "plugin:storybook/recommended"],
rules: {
'import/no-unresolved': 'off',
"@typescript-eslint/explicit-module-boundary-types": "off",
"eslint-comments/disable-enable-pair": "off",
"simple-import-sort/imports": "error",
Expand Down
17 changes: 2 additions & 15 deletions .storybook/main.ts
Original file line number Diff line number Diff line change
Expand Up @@ -14,30 +14,17 @@ const configFileMap = {

const config: StorybookConfig = {
addons: [
{
name: "@storybook/addon-essentials",
options: {
backgrounds: false,
viewport: false,
},
},
"@storybook/addon-interactions",
"@storybook/addon-designs",
"@storybook/addon-mdx-gfm",
{
name: useDistVersion ? "../dist/preset.js" : "../src/dev.ts",
options: {
configFile: configFileMap[CHROMATIC_BASE_URL || '"https://www.chromatic.com"'],
},
},
"@storybook/addon-mdx-gfm",
],
docs: {
autodocs: "tag",
},
framework: {
name: "@storybook/react-vite",
options: {},
},
framework: "@storybook/react-vite",
logLevel: "debug",
staticDirs: ["../public"],
stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
Expand Down
10 changes: 5 additions & 5 deletions .storybook/preview.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,10 @@
import { action } from "@storybook/addon-actions";
import { ManagerContext } from "@storybook/manager-api";
import type { Decorator, Loader, Preview } from "@storybook/react";
import { fn } from "@storybook/test";
import { HttpResponse, graphql } from "msw";
import { initialize, mswLoader } from "msw-storybook-addon";
import React from "react";
import { ManagerContext } from "storybook/internal/manager-api";
import {
Global,
ThemeProvider,
Expand All @@ -10,10 +13,7 @@ import {
styled,
themes,
useTheme,
} from "@storybook/theming";
import { HttpResponse, graphql } from "msw";
import { initialize, mswLoader } from "msw-storybook-addon";
import React from "react";
} from "storybook/internal/theming";

import { AuthProvider } from "../src/AuthContext";
import { baseModes } from "../src/modes";
Expand Down
40 changes: 17 additions & 23 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -59,33 +59,27 @@
"react-confetti": "^6.1.0",
"strip-ansi": "^7.1.0"
},
"peerDependencies": {
"storybook": "^8.2.0"
},
"devDependencies": {
"@emotion/weak-memoize": "^0.3.1",
"@graphql-codegen/cli": "^4.0.1",
"@graphql-codegen/client-preset": "^4.0.1",
"@graphql-typed-document-node/core": "^3.2.0",
"@storybook/addon-actions": "^8.0.0",
"@storybook/addon-designs": "^8.0.0",
"@storybook/addon-essentials": "^8.0.0",
"@storybook/addon-interactions": "^8.0.0",
"@storybook/addon-mdx-gfm": "^8.0.0",
"@storybook/blocks": "^8.0.0",
"@storybook/channels": "^8.0.0",
"@storybook/client-logger": "^8.0.0",
"@storybook/components": "^8.0.0",
"@storybook/core-events": "^8.0.0",
"@mdx-js/rollup": "^3.0.1",
"@storybook/addon-actions": "^8.2.9",
"@storybook/addon-designs": "^8.0.3",
"@storybook/addon-essentials": "^8.2.9",
"@storybook/addon-interactions": "^8.2.9",
"@storybook/addon-mdx-gfm": "^8.2.9",
"@storybook/blocks": "^8.2.9",
"@storybook/eslint-config-storybook": "^3.1.2",
"@storybook/icons": "^1.2.8",
"@storybook/manager": "^8.0.0",
"@storybook/manager-api": "^8.0.0",
"@storybook/preview": "^8.0.0",
"@storybook/react": "^8.0.0",
"@storybook/react-vite": "^8.0.0",
"@storybook/telemetry": "^8.0.0",
"@storybook/test": "^8.0.0",
"@storybook/icons": "^1.2.10",
"@storybook/react": "^8.2.9",
"@storybook/react-vite": "^8.2.9",
"@storybook/test": "^8.2.9",
"@storybook/testing-library": "^0.2.2",
"@storybook/theming": "^8.0.0",
"@storybook/types": "^8.0.0",
"@types/jsonfile": "^6.1.1",
"@types/node": "^18.15.0",
"@types/pluralize": "^0.0.29",
Expand All @@ -102,10 +96,10 @@
"eslint": "^8.42.0",
"eslint-plugin-jest": "^27.2.1",
"eslint-plugin-simple-import-sort": "^10.0.0",
"eslint-plugin-storybook": "^0.6.15",
"eslint-plugin-storybook": "^0.8.0",
"graphql": "^16.8.1",
"msw": "^2.0.0",
"msw-storybook-addon": "2.0.0--canary.122.b3ed3b1.0",
"msw-storybook-addon": "^2.0.3",
"npm-run-all": "^4.1.5",
"pluralize": "^8.0.0",
"polished": "^4.2.2",
Expand All @@ -116,7 +110,7 @@
"react-dom": "^16.14.0",
"react-joyride": "^2.7.2",
"rimraf": "^3.0.2",
"storybook": "^8.0.0",
"storybook": "^8.2.9",
"ts-dedent": "^2.2.0",
"tsup": "^6.6.3",
"typescript": "^4.9.5",
Expand Down
4 changes: 2 additions & 2 deletions src/Panel.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import type { API } from "@storybook/manager-api";
import { useChannel, useStorybookState } from "@storybook/manager-api";
import React, { useCallback, useEffect, useState } from "react";
import type { API } from "storybook/internal/manager-api";
import { useChannel, useStorybookState } from "storybook/internal/manager-api";

import { AuthProvider } from "./AuthContext";
import { Spinner } from "./components/design-system";
Expand Down
1 change: 0 additions & 1 deletion src/buildSteps.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
// eslint-disable-next-line import/no-unresolved
import { TaskName } from "chromatic/node";
import { filesize } from "filesize";

Expand Down
2 changes: 1 addition & 1 deletion src/components/Accordions.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import {
StopIcon as Stop,
TimerIcon as Timer,
} from "@storybook/icons";
import { styled } from "@storybook/theming";
import { styled } from "storybook/internal/theming";

import { IconButton } from "./IconButton";

Expand Down
2 changes: 1 addition & 1 deletion src/components/ActionButton.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { styled, type Theme } from "@storybook/theming";
import { darken, lighten } from "polished";
import { ComponentProps } from "react";
import { styled, type Theme } from "storybook/internal/theming";

import { IconButton } from "./IconButton";

Expand Down
4 changes: 2 additions & 2 deletions src/components/Badge.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { Badge as BaseBadge } from "@storybook/components";
import { styled } from "@storybook/theming";
import { ReactNode } from "react";
import { Badge as BaseBadge } from "storybook/internal/components";
import { styled } from "storybook/internal/theming";

type BadgeProps = React.ComponentProps<typeof BaseBadge>;

Expand Down
2 changes: 1 addition & 1 deletion src/components/Box.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { styled } from "@storybook/theming";
import { styled } from "storybook/internal/theming";

export const Box = styled.div<{ warning?: boolean }>(
({ theme }) => ({
Expand Down
4 changes: 2 additions & 2 deletions src/components/BrowserSelector.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { WithTooltip } from "@storybook/components";
import { ChevronDownIcon } from "@storybook/icons";
import { styled, useTheme } from "@storybook/theming";
import React, { ComponentProps } from "react";
import { WithTooltip } from "storybook/internal/components";
import { styled, useTheme } from "storybook/internal/theming";

import { Browser, BrowserInfo, ComparisonResult } from "../gql/graphql";
import { aggregateResult } from "../utils/aggregateResult";
Expand Down
2 changes: 1 addition & 1 deletion src/components/BuildProgressBarInline.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { styled } from "@storybook/theming";
import React from "react";
import { styled } from "storybook/internal/theming";

import { LocalBuildProgress } from "../types";
import { BuildProgressLabel } from "./BuildProgressLabel";
Expand Down
4 changes: 2 additions & 2 deletions src/components/Button.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { Button as BaseButton } from "@storybook/components";
import { css, styled } from "@storybook/theming";
import { Button as BaseButton } from "storybook/internal/components";
import { css, styled } from "storybook/internal/theming";

export const Button = styled(BaseButton)<{
link?: boolean;
Expand Down
2 changes: 1 addition & 1 deletion src/components/ButtonStack.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { styled } from "@storybook/theming";
import { styled } from "storybook/internal/theming";

export const ButtonStack = styled.div(() => ({
display: "flex",
Expand Down
4 changes: 2 additions & 2 deletions src/components/Code.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { Code as SBCode } from "@storybook/components";
import { styled } from "@storybook/theming";
import { Code as SBCode } from "storybook/internal/components";
import { styled } from "storybook/internal/theming";

export const Code = styled(SBCode)(({ theme }) => ({
color: theme.base === "light" ? theme.color.darker : theme.color.lighter,
Expand Down
2 changes: 1 addition & 1 deletion src/components/Container.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { styled } from "@storybook/theming";
import { styled } from "storybook/internal/theming";

export const Container = styled.div({
display: "flex",
Expand Down
2 changes: 1 addition & 1 deletion src/components/Eyebrow.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { styled } from "@storybook/theming";
import { styled } from "storybook/internal/theming";

export const Eyebrow = styled.div(({ theme }) => ({
background: theme.background.app,
Expand Down
2 changes: 1 addition & 1 deletion src/components/Heading.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { styled } from "@storybook/theming";
import { styled } from "storybook/internal/theming";

export const Heading = styled.h1(({ theme }) => ({
marginTop: 0,
Expand Down
4 changes: 2 additions & 2 deletions src/components/IconButton.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { IconButton as BaseIconButton } from "@storybook/components";
import { styled, type Theme } from "@storybook/theming";
import { ComponentProps } from "react";
import { IconButton as BaseIconButton } from "storybook/internal/components";
import { styled, type Theme } from "storybook/internal/theming";

const getStatusStyles = (theme: Theme, status?: IconButtonProps["status"]) =>
(status &&
Expand Down
4 changes: 2 additions & 2 deletions src/components/ModeSelector.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { WithTooltip } from "@storybook/components";
import { ChevronDownIcon, DiamondIcon } from "@storybook/icons";
import { styled, useTheme } from "@storybook/theming";
import React from "react";
import { WithTooltip } from "storybook/internal/components";
import { styled, useTheme } from "storybook/internal/theming";

import { ComparisonResult, TestMode } from "../gql/graphql";
import { aggregateResult } from "../utils/aggregateResult";
Expand Down
2 changes: 1 addition & 1 deletion src/components/Placeholder.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { styled } from "@storybook/theming";
import { styled } from "storybook/internal/theming";

export const Placeholder = styled.div<{
width?: number;
Expand Down
2 changes: 1 addition & 1 deletion src/components/Screen.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { CloseIcon } from "@storybook/icons";
import { styled } from "@storybook/theming";
import pluralize from "pluralize";
import React, { ReactNode, useCallback, useState } from "react";
import { styled } from "storybook/internal/theming";

import { CONFIG_INFO, CONFIG_INFO_DISMISSED } from "../constants";
import { Configuration } from "../screens/VisualTests/Configuration";
Expand Down
6 changes: 3 additions & 3 deletions src/components/SidebarBottom.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { type API, type State, useStorybookState } from "@storybook/manager-api";
import { styled } from "@storybook/theming";
import type { API_FilterFunction } from "@storybook/types";
import React, { useCallback, useEffect } from "react";
import { type API, type State, useStorybookState } from "storybook/internal/manager-api";
import { styled } from "storybook/internal/theming";
import type { API_FilterFunction } from "storybook/internal/types";

import { ADDON_ID, ENABLE_FILTER } from "../constants";
import { SidebarToggleButton } from "./SidebarToggleButton";
Expand Down
4 changes: 2 additions & 2 deletions src/components/SidebarToggleButton.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { Badge as BaseBadge } from "@storybook/components";
import { css, styled } from "@storybook/theming";
import pluralize from "pluralize";
import React, { ComponentProps } from "react";
import { Badge as BaseBadge } from "storybook/internal/components";
import { css, styled } from "storybook/internal/theming";

import { IconButton } from "./IconButton";

Expand Down
9 changes: 2 additions & 7 deletions src/components/SidebarTop.tsx
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import { FailedIcon, PassedIcon } from "@storybook/icons";
import { type API, useStorybookState } from "@storybook/manager-api";
import { color } from "@storybook/theming";
import pluralize from "pluralize";
import React, { useCallback, useContext, useEffect, useRef } from "react";
import { type API, useStorybookState } from "storybook/internal/manager-api";
import { color } from "storybook/internal/theming";

import {
ADDON_ID,
Expand Down Expand Up @@ -98,7 +98,6 @@ export const SidebarTop = ({ api }: SidebarTopProps) => {
subHeadline: "Check the visual test addon to see the progress of your build.",
},
icon: <PassedIcon color={color.positive} />,
// @ts-expect-error `duration` and `onClick` require a newer version of Storybook
duration: 8_000,
onClick: clickNotification,
});
Expand All @@ -116,7 +115,6 @@ export const SidebarTop = ({ api }: SidebarTopProps) => {
subHeadline: "Aborted by user.",
},
icon: <FailedIcon color={color.negative} />,
// @ts-expect-error `duration` and `onClick` require a newer version of Storybook
duration: 8_000,
onClick: clickNotification,
});
Expand All @@ -142,7 +140,6 @@ export const SidebarTop = ({ api }: SidebarTopProps) => {
: "No visual changes detected",
},
icon: <PassedIcon color={color.positive} />,
// @ts-expect-error `duration` and `onClick` require a newer version of Storybook
duration: 8_000,
onClick: clickNotification,
});
Expand All @@ -159,7 +156,6 @@ export const SidebarTop = ({ api }: SidebarTopProps) => {
subHeadline: "Check the Storybook process on the command line for more details.",
},
icon: <FailedIcon color={color.negative} />,
// @ts-expect-error `duration` and `onClick` require a newer version of Storybook
onClick: clickNotification,
});
}
Expand All @@ -173,7 +169,6 @@ export const SidebarTop = ({ api }: SidebarTopProps) => {
"Your account has insufficient snapshots remaining to run this build. Visit your billing page to find out more.",
},
icon: <FailedIcon color={color.negative} />,
// @ts-expect-error `duration` and `onClick` require a newer version of Storybook
onClick: clickNotification,
});
}
Expand Down
4 changes: 2 additions & 2 deletions src/components/SidebarTopButton.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { WithTooltip } from "@storybook/components";
import { PlayIcon, StopAltIcon } from "@storybook/icons";
import { keyframes, styled } from "@storybook/theming";
import React, { ComponentProps } from "react";
import { WithTooltip } from "storybook/internal/components";
import { keyframes, styled } from "storybook/internal/theming";

import { LocalBuildProgress } from "../types";
import { BuildProgressLabel } from "./BuildProgressLabel";
Expand Down
2 changes: 1 addition & 1 deletion src/components/SnapshotImage.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { PhotoIcon, ShareAltIcon } from "@storybook/icons";
import { styled, useTheme } from "@storybook/theming";
import React, { ComponentProps } from "react";
import { styled, useTheme } from "storybook/internal/theming";

import { CaptureImage, CaptureOverlayImage, ComparisonResult, Test } from "../gql/graphql";
import { Spinner } from "./design-system";
Expand Down
2 changes: 1 addition & 1 deletion src/components/SnapshotImageThumb.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { CheckIcon } from "@storybook/icons";
import { styled } from "@storybook/theming";
import React from "react";
import { styled } from "storybook/internal/theming";

const Wrapper = styled.div<{ status?: "positive" }>(({ status, theme }) => ({
position: "relative",
Expand Down
5 changes: 2 additions & 3 deletions src/components/Stack.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import type { CSSObject } from "@storybook/theming";
import { styled } from "@storybook/theming";
import type { CSSObject } from "storybook/internal/theming";
import { styled } from "storybook/internal/theming";

// @ts-expect-error TODO fix overload
export const Stack = styled.div<Pick<CSSObject, "alignItems" | "textAlign">>((props) => ({
display: "flex",
flexDirection: "column",
Expand Down
2 changes: 1 addition & 1 deletion src/components/StatusDot.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { css, styled } from "@storybook/theming";
import React from "react";
import { css, styled } from "storybook/internal/theming";

import { ComparisonResult, TestStatus } from "../gql/graphql";

Expand Down
2 changes: 1 addition & 1 deletion src/components/SuffixInput.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { styled } from "@storybook/theming";
import React, { ComponentProps, ReactNode } from "react";
import { styled } from "storybook/internal/theming";

import { Input } from "./design-system";

Expand Down
2 changes: 1 addition & 1 deletion src/components/Text.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { styled } from "@storybook/theming";
import { styled } from "storybook/internal/theming";

export const Text = styled.div<{
center?: boolean;
Expand Down
Loading

0 comments on commit 63bd4f7

Please sign in to comment.