chore: update storybook

.yarnrc.yml

@@ -1,11 +1,17 @@
+compressionLevel: mixed
+
+enableGlobalCache: false
+
 httpProxy: "${http_proxy:-}"
 
 httpsProxy: "${http_proxy:-}"
 
 nodeLinker: node-modules
 
-plugins:
-  - path: .yarn/plugins/@yarnpkg/plugin-workspace-tools.cjs
-    spec: "@yarnpkg/plugin-workspace-tools"
+npmAuthToken: "${NODE_AUTH_TOKEN:-}"
+
+npmPublishAccess: public
+
+npmPublishRegistry: "https://registry.npmjs.com/"
 
-yarnPath: .yarn/releases/yarn-3.6.1.cjs
+yarnPath: .yarn/releases/yarn-4.0.2.cjs

apps/website/docs/components/Actions/_category_.json → apps/website/docs/components/actions/_category_.json

@@ -1,5 +1,6 @@
 {
   "position": 1,
+  "label": "Actions",
   "link": {
     "type": "generated-index",
     "title": "Action Components",

apps/website/docs/components/Actions/Button.mdx → apps/website/docs/components/actions/button/index.mdx

@@ -5,14 +5,14 @@ displayed_sidebar: componentsSidebar
 # Button
 
 import { previewBlock } from "@idealjs/camphora-styled";
-import BrandColorButton from "./button/BrandColorButtons";
+import BrandColorButton from "./BrandColorButtons";
 
 <div className={previewBlock}>
   <BrandColorButton />
 </div>
 
 import CodeBlock from "@theme/CodeBlock";
-import ButtonContent from "!!raw-loader!./button/BrandColorButtons";
+import ButtonContent from "!!raw-loader!./BrandColorButtons";
 
 <CodeBlock language="tsx">
   {ButtonContent}

apps/website/docs/components/Actions/popover/Bottom.tsx → apps/website/docs/components/actions/popover/Bottom.tsx

@@ -2,7 +2,6 @@ import {
   button,
   buttonGhost,
   card,
-  cardContent,
   clickReaction,
   clickReactionInput,
   popover,
@@ -14,10 +13,7 @@ import React from "react";
 
 const id = "popoverBottom";
 
-const popoverWidthSty = {
-  width: "max-content",
-  maxWidth: 300,
-}
+
 
 const Popover = () => {
   return (
@@ -29,16 +25,24 @@ const Popover = () => {
         justifyContent: "center",
       }}
     >
-      <div className={popover} >
+      <div className={popover}>
         <label
           htmlFor={id}
           className={clsx(clickReaction, button, buttonGhost)}
         >
           <input id={id} type="checkbox" className={clickReactionInput} />
           open
         </label>
-        <div className={clsx(popoverContent, popoverBottom)} style={popoverWidthSty}>
-          <div className={clsx(card, cardContent)}>这是一个弹出框！这是一个弹出框！这是一个弹出框！这是一个弹出框！</div>
+        <div
+          className={clsx(popoverContent, popoverBottom)}
+
+        >
+          <div className={clsx(card)}>
+            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Expedita,
+            aperiam excepturi facere alias ut at dolor rem recusandae sunt.
+            Earum pariatur tempora totam. Quaerat natus non doloribus, commodi
+            aut assumenda.
+          </div>
         </div>
       </div>
     </div>

apps/website/docs/components/Actions/popover/BottomEnd.tsx → apps/website/docs/components/actions/popover/BottomEnd.tsx

@@ -2,7 +2,6 @@ import {
   button,
   buttonGhost,
   card,
-  cardContent,
   clickReaction,
   clickReactionInput,
   popover,
@@ -15,10 +14,7 @@ import React from "react";
 
 const id = "popoverBottomEnd";
 
-const popoverWidthSty = {
-  width: "max-content",
-  maxWidth: 300,
-}
+
 
 const Popover = () => {
   return (
@@ -38,8 +34,16 @@ const Popover = () => {
           <input id={id} type="checkbox" className={clickReactionInput} />
           open
         </label>
-        <div className={clsx(popoverContent, popoverBottom, popoverEnd)} style={popoverWidthSty}>
-          <div className={clsx(card, cardContent)}>这是一个弹出框！这是一个弹出框！这是一个弹出框！这是一个弹出框！</div>
+        <div
+          className={clsx(popoverContent, popoverBottom, popoverEnd)}
+
+        >
+          <div className={clsx(card)}>
+            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nisi
+            cupiditate dolor unde corporis qui sunt sequi iste molestiae nam
+            deleniti, maxime quidem distinctio quas aut illum quisquam harum
+            officiis. Beatae?
+          </div>
         </div>
       </div>
     </div>

apps/website/docs/components/actions/popover/BottomFocus.tsx

@@ -0,0 +1,38 @@
+import {
+  button,
+  buttonGhost,
+  card,
+  focusReaction,
+  popover,
+  popoverBottom,
+  popoverContent,
+} from "@idealjs/camphora-styled";
+import clsx from "clsx";
+import React from "react";
+
+const Popover = () => {
+  return (
+    <div
+      style={{
+        height: "100%",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+      }}
+    >
+      <div tabIndex={0} className={clsx(popover, focusReaction)}>
+        <label className={clsx(button, buttonGhost)}>click</label>
+        <div className={clsx(popoverContent, popoverBottom)}>
+          <div className={clsx(card)}>
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum
+            cupiditate, dolore harum in optio culpa commodi est ad itaque eum,
+            hic perferendis numquam quibusdam laboriosam beatae fuga vero!
+            Reprehenderit, fugit?
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Popover;

apps/website/docs/components/Actions/popover/BottomFocus.tsx → apps/website/docs/components/actions/popover/BottomHover.tsx

@@ -2,19 +2,15 @@ import {
   button,
   buttonGhost,
   card,
-  cardContent,
+  hoverReaction,
   popover,
   popoverBottom,
   popoverContent,
-  popoverFocus,
 } from "@idealjs/camphora-styled";
 import clsx from "clsx";
 import React from "react";
 
-const popoverWidthSty = {
-  width: "max-content",
-  maxWidth: 300,
-};
+
 
 const Popover = () => {
   return (
@@ -26,14 +22,17 @@ const Popover = () => {
         justifyContent: "center",
       }}
     >
-      <div tabIndex={0} className={clsx(popover, popoverFocus)}>
-        <label className={clsx(button, buttonGhost)}>click</label>
+      <div className={clsx(popover, hoverReaction)}>
+        <button className={clsx(button, buttonGhost)}>hover</button>
         <div
           className={clsx(popoverContent, popoverBottom)}
-          style={popoverWidthSty}
+
         >
-          <div className={clsx(card, cardContent)}>
-            这是一个弹出框！这是一个弹出框！这是一个弹出框！这是一个弹出框！
+          <div className={clsx(card)}>
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum
+            voluptate vitae illo, facilis atque omnis rem? Blanditiis porro
+            neque veniam sint eaque consequuntur velit asperiores tempora at,
+            vel enim alias.
           </div>
         </div>
       </div>

apps/website/docs/components/Actions/popover/Left.tsx → apps/website/docs/components/actions/popover/Left.tsx

@@ -2,7 +2,6 @@ import {
   button,
   buttonGhost,
   card,
-  cardContent,
   clickReaction,
   clickReactionInput,
   popover,
@@ -14,10 +13,7 @@ import React from "react";
 
 const id = "popoverLeft";
 
-const popoverWidthSty = {
-  width: "max-content",
-  maxWidth: 300,
-}
+
 
 const Popover = () => {
   return (
@@ -37,8 +33,16 @@ const Popover = () => {
           <input id={id} type="checkbox" className={clickReactionInput} />
           open
         </label>
-        <div className={clsx(popoverContent, popoverLeft)} style={popoverWidthSty}>
-          <div className={clsx(card, cardContent)}>这是一个弹出框！这是一个弹出框！这是一个弹出框！这是一个弹出框！</div>
+        <div
+          className={clsx(popoverContent, popoverLeft)}
+
+        >
+          <div className={clsx(card)}>
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum
+            voluptate vitae illo, facilis atque omnis rem? Blanditiis porro
+            neque veniam sint eaque consequuntur velit asperiores tempora at,
+            vel enim alias.
+          </div>
         </div>
       </div>
     </div>

apps/website/docs/components/Actions/popover/LeftEnd.tsx → apps/website/docs/components/actions/popover/LeftEnd.tsx

@@ -2,7 +2,6 @@ import {
   button,
   buttonGhost,
   card,
-  cardContent,
   clickReaction,
   clickReactionInput,
   popover,
@@ -38,8 +37,11 @@ const Popover = () => {
           <input id={id} type="checkbox" className={clickReactionInput} />
           open
         </label>
-        <div className={clsx(popoverContent, popoverLeft, popoverEnd)} style={popoverWidthSty}>
-          <div className={clsx(card, cardContent)}>这是一个弹出框！这是一个弹出框！这是一个弹出框！这是一个弹出框！</div>
+        <div className={clsx(popoverContent, popoverLeft, popoverEnd)} >
+          <div className={clsx(card)}>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum
+            voluptate vitae illo, facilis atque omnis rem? Blanditiis porro
+            neque veniam sint eaque consequuntur velit asperiores tempora at,
+            vel enim alias.</div>
         </div>
       </div>
     </div>

apps/website/docs/components/Actions/popover/LeftHover.tsx → apps/website/docs/components/actions/popover/LeftHover.tsx

@@ -2,10 +2,9 @@ import {
   button,
   buttonGhost,
   card,
-  cardContent,
+  hoverReaction,
   popover,
   popoverContent,
-  popoverHover,
   popoverLeft
 } from "@idealjs/camphora-styled";
 import clsx from "clsx";
@@ -26,10 +25,13 @@ const Popover = () => {
         justifyContent: "center",
       }}
     >
-      <div className={clsx(popover, popoverHover)} >
+      <div className={clsx(popover, hoverReaction)} >
         <button className={clsx(button, buttonGhost)}>hover</button>
-        <div className={clsx(popoverContent, popoverLeft)} style={popoverWidthSty}>
-          <div className={clsx(card, cardContent)}>这是一个弹出框！这是一个弹出框！这是一个弹出框！这是一个弹出框！</div>
+        <div className={clsx(popoverContent, popoverLeft)} >
+          <div className={clsx(card)}>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum
+            voluptate vitae illo, facilis atque omnis rem? Blanditiis porro
+            neque veniam sint eaque consequuntur velit asperiores tempora at,
+            vel enim alias.</div>
         </div>
       </div>
     </div>