migration b2

src/components/ui/Callout/stories/Callout.stories.js → src/components/ui/Callout/stories/Callout.stories.tsx

@@ -1,6 +1,7 @@
 import Callout from '../Callout';
 import Text from '~/components/ui/Text/Text';
 import SandboxEditor from '~/components/tools/SandboxEditor/SandboxEditor';
+import React from 'react';
 
 const InfoIcon = () => {
     return (<svg width="18" height="18" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.49991 0.876892C3.84222 0.876892 0.877075 3.84204 0.877075 7.49972C0.877075 11.1574 3.84222 14.1226 7.49991 14.1226C11.1576 14.1226 14.1227 11.1574 14.1227 7.49972C14.1227 3.84204 11.1576 0.876892 7.49991 0.876892ZM1.82707 7.49972C1.82707 4.36671 4.36689 1.82689 7.49991 1.82689C10.6329 1.82689 13.1727 4.36671 13.1727 7.49972C13.1727 10.6327 10.6329 13.1726 7.49991 13.1726C4.36689 13.1726 1.82707 10.6327 1.82707 7.49972ZM8.24992 4.49999C8.24992 4.9142 7.91413 5.24999 7.49992 5.24999C7.08571 5.24999 6.74992 4.9142 6.74992 4.49999C6.74992 4.08577 7.08571 3.74999 7.49992 3.74999C7.91413 3.74999 8.24992 4.08577 8.24992 4.49999ZM6.00003 5.99999H6.50003H7.50003C7.77618 5.99999 8.00003 6.22384 8.00003 6.49999V9.99999H8.50003H9.00003V11H8.50003H7.50003H6.50003H6.00003V9.99999H6.50003H7.00003V6.99999H6.50003H6.00003V5.99999Z" fill="currentColor" fillRule="evenodd" clipRule="evenodd"></path></svg>);
@@ -10,7 +11,7 @@ const InfoIcon = () => {
 export default {
     title: 'Components/Callout',
     component: Callout,
-    render: (args) => <>
+    render: () => <>
         <SandboxEditor className="space-y-2">
             <Callout>
                 <InfoIcon/> <span>This is a Callout</span>
@@ -34,7 +35,7 @@ export const All = {
     }
 };
 
-const DefaultTextTemplate = (args) => {
+const DefaultTextTemplate = (args: any) => {
     return <SandboxEditor className="space-y-2">
         <Callout>
             <InfoIcon/> <span>This is a Callout</span>
@@ -44,7 +45,7 @@ const DefaultTextTemplate = (args) => {
 
 export const DefaultText = DefaultTextTemplate.bind();
 
-const RedTextTemplate = (args) => {
+const RedTextTemplate = (args: any) => {
     return <SandboxEditor className="space-y-2">
         <Callout color="red">
         This is a red Callout. A little bit longer text to see how it behaves.

src/components/ui/Card/stories/Card.stories.js → src/components/ui/Card/stories/Card.stories.tsx

@@ -1,14 +1,15 @@
 import Card from '~/components/ui/Card/Card';
 import Avatar from '~/components/ui/Avatar/Avatar';
 import SandboxEditor from '~/components/tools/SandboxEditor/SandboxEditor';
+import React from 'react';
 
 const CardStory = () => {
     return <Card className="bg-gray-200" >
         <div className='flex items-center space-x-4'>
             <Avatar
                 src='https://i.pravatar.cc/64'
                 alt='avatar'
-                size='lg'
+                // size='lg' avatar doesn't have size prop
             />
             <div>
                 <p className='font-bold text-gray-1000'>John Doe</p>
@@ -24,13 +25,13 @@ const CardStory = () => {
 export default {
     title: 'Components/Card',
     component: Card,
-    render: (args) => <SandboxEditor><CardStory/></SandboxEditor>
+    render: () => <SandboxEditor><CardStory/></SandboxEditor>
 };
 
 // More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
 export const All = {};
 
-const Template = (args) => <div>
+const Template = () => <div>
     <SandboxEditor className="gap-3 grid grid-cols-4">
         {Array(10).fill(0).map((_, i) => <CardStory key={i}/>)}
     </SandboxEditor>

src/components/ui/Code/stories/Code.stories.js → src/components/ui/Code/stories/Code.stories.tsx

@@ -1,4 +1,5 @@
-import Code from '../Code';
+import React from 'react';
+import Code, { CodeProps } from '../Code';
 import SandboxEditor from '~/components/tools/SandboxEditor/SandboxEditor';
 
 const Code_TEXT = 'console.log()';
@@ -7,14 +8,14 @@ const Code_TEXT = 'console.log()';
 export default {
     title: 'Components/Code',
     component: Code,
-    render: (args) => <SandboxEditor>
+    render: (args: React.JSX.IntrinsicAttributes & CodeProps) => <SandboxEditor>
         <div >
             <div className='flex space-x-2'>
-                <Code className='space-x-1' {...args}>
+                <Code  {...args}>
          requestAnimationFrame()
                 </Code>
 
-                <Code className='space-x-1' {...args}>
+                <Code {...args}>
                     {Code_TEXT}
                 </Code>
 
@@ -27,12 +28,13 @@ export default {
 // More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
 export const All = {
     args: {
-        className: ''
+        className :'space-x-1'
     }
 };
 
 export const Color = {
     args: {
+        className:'space-x-1',
         color: 'green'
     }
 }

src/components/ui/Disclosure/stories/Disclosure.stories.js → src/components/ui/Disclosure/stories/Disclosure.stories.tsx

@@ -1,10 +1,12 @@
-import Disclosure from '../Disclosure'
+import { JSX } from 'react';
+import Disclosure, { DisclosureProps } from '../Disclosure'
 import SandboxEditor from '~/components/tools/SandboxEditor/SandboxEditor';
+import React from 'react';
 
 export default {
     title: 'Components/Disclosure',
     component: Disclosure,
-    render: (args) => <SandboxEditor>
+    render: (args: JSX.IntrinsicAttributes & DisclosureProps) => <SandboxEditor>
 
             <div>
                 <Disclosure {...args} />

src/components/ui/Dropdown/stories/Dropdown.stories.js → src/components/ui/Dropdown/stories/Dropdown.stories.tsx

@@ -1,12 +1,13 @@
 import Heading from '~/components/ui/Heading/Heading';
 import Dropdown from '~/components/ui/Dropdown/Dropdown';
 import SandboxEditor from '~/components/tools/SandboxEditor/SandboxEditor';
+import React from 'react';
 
 // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
 export default {
     title: 'Components/Dropdown',
     component: Dropdown,
-    render: (args) => <SandboxEditor>
+    render: () => <SandboxEditor>
         <div className=' bg-gray-400 p-4 overflow-auto' style={{ height: '200px' }}>
             <div className='block' style={{ height: '400px' }}>
                 <div style={{ marginBottom: '200px' }}>