improvements, CPC, globals

.storybook/preview.ts

@@ -1,18 +1,18 @@
 import type { Preview } from "@storybook/react";
+import { background } from "storybook/internal/theming";
 
 const preview: Preview = {
   parameters: {
-    backgrounds: {
-      default: "light",
-    },
-    actions: { argTypesRegex: "^on[A-Z].*" },
     controls: {
       matchers: {
         color: /(background|color)$/i,
         date: /Date$/,
       },
     },
   },
+  initialGlobals: {
+    background: { value: "light" },
+  },
 };
 
 export default preview;

package.json

@@ -34,7 +34,7 @@
     "*.d.ts"
   ],
   "scripts": {
-    "postinstall": "node scripts/welcome.js",
+    "_postinstall": "node scripts/welcome.js",
     "build": "tsup",
     "build:watch": "npm run build -- --watch",
     "test": "echo \"Error: no test specified\" && exit 1",
@@ -46,39 +46,36 @@
     "build-storybook": "storybook build"
   },
   "devDependencies": {
-    "@storybook/addon-essentials": "8.0.0",
-    "@storybook/addon-interactions": "8.0.0",
-    "@storybook/addon-links": "8.0.0",
-    "@storybook/blocks": "8.0.0",
-    "@storybook/components": "8.0.0",
-    "@storybook/core-events": "8.0.0",
-    "@storybook/manager": "8.0.0",
-    "@storybook/manager-api": "8.0.0",
-    "@storybook/preview": "8.0.0",
-    "@storybook/preview-api": "8.0.0",
-    "@storybook/react": "8.0.0",
-    "@storybook/react-vite": "8.0.0",
-    "@storybook/test": "8.0.0",
-    "@storybook/theming": "8.0.0",
-    "@storybook/types": "8.0.0",
+    "@storybook/addon-essentials": "0.0.0-pr-26654-sha-49d01553",
+    "@storybook/addon-interactions": "0.0.0-pr-26654-sha-49d01553",
+    "@storybook/addon-links": "0.0.0-pr-26654-sha-49d01553",
+    "@storybook/blocks": "0.0.0-pr-26654-sha-49d01553",
+    "@storybook/react": "0.0.0-pr-26654-sha-49d01553",
+    "@storybook/react-vite": "0.0.0-pr-26654-sha-49d01553",
+    "@storybook/test": "0.0.0-pr-26654-sha-49d01553",
     "@types/node": "^18.15.0",
     "@types/react": "^18.2.65",
     "@types/react-dom": "^18.2.21",
     "@vitejs/plugin-react": "^4.2.1",
     "auto": "^11.1.1",
     "boxen": "^7.1.1",
     "dedent": "^1.5.1",
-    "npm-run-all": "^4.1.5",
-    "prettier": "^3.2.5",
+    "prettier": "^3.3.3",
     "prompts": "^2.4.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "storybook": "8.0.0",
-    "tsup": "^8.0.2",
-    "typescript": "^5.4.2",
-    "vite": "^5.1.6",
+    "storybook": "0.0.0-pr-26654-sha-49d01553",
+    "tsup": "^8.2.4",
+    "typescript": "^5.5.4",
+    "vite": "^5.3.5",
     "zx": "^7.2.3"
   },
+  "peerDependencies": {
+    "storybook": "^8.3.0 || 0.0.0-pr-26654-sha-49d01553"
+  },
+  "overrides": {
+    "storybook": "0.0.0-pr-26654-sha-49d01553"
+  },
   "publishConfig": {
     "access": "public"
   },
@@ -87,7 +84,7 @@
       "src/index.ts"
     ],
     "managerEntries": [
-      "src/manager.ts"
+      "src/manager.tsx"
     ],
     "previewEntries": [
       "src/preview.ts"
@@ -103,4 +100,4 @@
     ],
     "icon": "https://user-images.githubusercontent.com/321738/63501763-88dbf600-c4cc-11e9-96cd-94adadc2fd72.png"
   }
-}
+}

src/components/List.tsx

@@ -1,6 +1,19 @@
+import { ArrowDownIcon } from "@storybook/icons";
 import React, { Fragment, useState } from "react";
-import { styled, themes, convert } from "@storybook/theming";
-import { Icons, IconsProps } from "@storybook/components";
+import { styled } from "storybook/internal/theming";
+
+type Item = {
+  title: string;
+  description: string;
+};
+
+interface ListItemProps {
+  item: Item;
+}
+
+interface ListProps {
+  items: Item[];
+}
 
 const ListWrapper = styled.ul({
   listStyle: "none",
@@ -9,29 +22,29 @@ const ListWrapper = styled.ul({
   margin: 0,
 });
 
-const Wrapper = styled.div({
+const Wrapper = styled.div(({ theme }) => ({
   display: "flex",
   width: "100%",
-  borderBottom: `1px solid ${convert(themes.normal).appBorderColor}`,
+  borderBottom: `1px solid ${theme.appBorderColor}`,
   "&:hover": {
-    background: convert(themes.normal).background.hoverable,
+    background: theme.background.hoverable,
   },
-});
+}));
 
-const Icon = styled(Icons)<IconsProps>({
+const Icon = styled(ArrowDownIcon)(({ theme }) => ({
   height: 10,
   width: 10,
   minWidth: 10,
-  color: convert(themes.normal).color.mediumdark,
+  color: theme.color.mediumdark,
   marginRight: 10,
   transition: "transform 0.1s ease-in-out",
   alignSelf: "center",
   display: "inline-flex",
-});
+}));
 
-const HeaderBar = styled.div({
-  padding: convert(themes.normal).layoutMargin,
-  paddingLeft: convert(themes.normal).layoutMargin - 3,
+const HeaderBar = styled.div(({ theme }) => ({
+  padding: theme.layoutMargin,
+  paddingLeft: theme.layoutMargin - 3,
   background: "none",
   color: "inherit",
   textAlign: "left",
@@ -41,24 +54,17 @@ const HeaderBar = styled.div({
 
   "&:focus": {
     outline: "0 none",
-    borderLeft: `3px solid ${convert(themes.normal).color.secondary}`,
+    borderLeft: `3px solid ${theme.color.secondary}`,
   },
-});
+}));
 
-const Description = styled.div({
-  padding: convert(themes.normal).layoutMargin,
-  marginBottom: convert(themes.normal).layoutMargin,
-  fontStyle: "italic",
-});
-
-type Item = {
-  title: string;
-  description: string;
-};
-
-interface ListItemProps {
-  item: Item;
-}
+const Description = styled.div(({ theme }) => ({
+  padding: theme.layoutMargin,
+  background: theme.background.content,
+  fontFamily: theme.typography.fonts.mono,
+  whiteSpace: "pre-wrap",
+  textAlign: "left",
+}));
 
 export const ListItem: React.FC<ListItemProps> = ({ item }) => {
   const [open, onToggle] = useState(false);
@@ -68,8 +74,6 @@ export const ListItem: React.FC<ListItemProps> = ({ item }) => {
       <Wrapper>
         <HeaderBar onClick={() => onToggle(!open)} role="button">
           <Icon
-            icon="arrowdown"
-            color={convert(themes.normal).appBorderColor}
             style={{
               transform: `rotate(${open ? 0 : -90}deg)`,
             }}
@@ -82,10 +86,6 @@ export const ListItem: React.FC<ListItemProps> = ({ item }) => {
   );
 };
 
-interface ListProps {
-  items: Item[];
-}
-
 export const List: React.FC<ListProps> = ({ items }) => (
   <ListWrapper>
     {items.map((item, idx) => (