feat: manually mirror opencoze's code from bytedance

Change-Id: I09a73aadda978ad9511264a756b2ce51f5761adf

frontend/packages/components/mouse-pad-selector/stories/demo.stories.tsx

@@ -0,0 +1,57 @@
+/*
+ * Copyright 2025 coze-dev Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+ 
+import { useState, useRef } from 'react';
+
+import { GuidingPopover } from '../src/with-guiding-popover';
+import { MousePadSelector, InteractiveType } from '../src';
+
+const DemoComponent = () => {
+  const [value, setValue] = useState(InteractiveType.Mouse);
+  const handleChange = (v1: InteractiveType) => {
+    console.log('innerDomRef is ', innerDomRef?.current);
+    setValue(v1);
+  };
+  const innerDomRef = useRef(null);
+
+  return (
+    <GuidingPopover>
+      <MousePadSelector
+        value={value}
+        onChange={handleChange}
+        ref={innerDomRef}
+      />
+    </GuidingPopover>
+  );
+};
+
+export default {
+  title: 'Example/MousePadSelector',
+  component: DemoComponent,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+    layout: 'centered',
+  },
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ['autodocs'],
+  // More on argTypes: https://storybook.js.org/docs/api/argtypes
+  argTypes: {},
+};
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Base = {
+  args: {},
+};

frontend/packages/components/mouse-pad-selector/stories/demo1.stories.tsx

@@ -0,0 +1,43 @@
+/*
+ * Copyright 2025 coze-dev Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+ 
+import { GuidingPopover } from '../src/with-guiding-popover';
+
+// import { transform } from 'lodash-es';
+
+const DemoComponent1 = () => (
+  <GuidingPopover>
+    <div>123</div>
+  </GuidingPopover>
+);
+
+export default {
+  title: 'Example/GuidingPopover',
+  component: DemoComponent1,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+    layout: 'centered',
+  },
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ['autodocs'],
+  // More on argTypes: https://storybook.js.org/docs/api/argtypes
+  argTypes: {},
+};
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Base = {
+  args: {},
+};

frontend/packages/components/mouse-pad-selector/stories/hello.mdx

@@ -0,0 +1,35 @@
+import { Meta } from '@storybook/blocks';
+
+<Meta title="Hello world" />
+
+<div className="sb-container">
+  <div className='sb-section-title'>
+    # Hello world
+
+    Hello world
+
+  </div>
+</div>
+
+<style>
+  {`
+  .sb-container {
+    margin-bottom: 48px;
+  }
+
+  .sb-section {
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    gap: 20px;
+  }
+
+  img {
+    object-fit: cover;
+  }
+
+  .sb-section-title {
+    margin-bottom: 32px;
+  }
+  `}
+</style>