stories to TS

Author: PatrikMatiasko

.storybook/manager.ts

@@ -0,0 +1,6 @@
+import { addons } from '@storybook/manager-api'
+import plgdTheme from './plgdTheme';
+
+addons.setConfig({
+    theme: plgdTheme,
+});

.storybook/plgdTheme.ts

@@ -0,0 +1,9 @@
+import { create } from '@storybook/theming/create';
+
+export default create({
+    base: 'light',
+    brandTitle: 'plgd',
+    brandUrl: 'https://plgd.dev',
+    brandImage: 'https://plgd.dev/img/logo.svg',
+    brandTarget: '_self',
+});

.storybook/webpack.config.ts

@@ -1,14 +1,17 @@
-const path = require("path");
-
 module.exports = function({ config }: any) {
     config.module.rules.push({
         test: /\.(ts|tsx)$/,
         loader: require.resolve("babel-loader"),
         options: {
             presets: [["react-app", { flow: false, typescript: true }], require.resolve("@emotion/babel-preset-css-prop")],
         },
-    });
+    })
 
     config.resolve.extensions.push(".ts", ".tsx");
+
+    config.resolve.fallback = {
+        vm : require.resolve("vm-browserify"),
+    }
+
     return config;
 };

package.json

@@ -111,7 +111,8 @@
     "swiper": "^10.2.0",
     "tsconfig-paths-webpack-plugin": "^4.1.0",
     "typescript": "^4.9.5",
-    "units-converter": "^1.0.3"
+    "units-converter": "^1.0.3",
+    "vm-browserify": "^1.1.2"
   },
   "devDependencies": {
     "@babel/cli": "^7.23.4",

src/components/Atomic/CodeEditor/CodeEditor.tsx

@@ -62,7 +62,7 @@ const CodeEditor: FC<Props> = (props) => {
         [globalTheme?.colors?.CodeEditor.background, globalTheme?.colors?.CodeEditor.lineHighlight, globalTheme?.colors?.CodeEditor.selection]
     )
 
-    const showPlaceholder = useMemo(() => value === '', [value])
+    const showPlaceholder = useMemo(() => value === '' && placeholderText, [value, placeholderText])
 
     return (
         <div css={styles.wrapper}>
@@ -80,14 +80,13 @@ const CodeEditor: FC<Props> = (props) => {
                 theme={theme}
                 value={value}
             />
-            {placeholderText && (
-                <div css={styles.placeholder}>
-                    <div css={[styles.flex, !showPlaceholder && styles.noPlaceholder]}>
-                        <IconFileUpload {...convertSize(50)} />
-                        {showPlaceholder && <p css={styles.placeholderText}>{placeholderText}</p>}
-                    </div>
+
+            <div css={styles.placeholder}>
+                <div css={[styles.flex, !showPlaceholder && styles.noPlaceholder]}>
+                    <IconFileUpload {...convertSize(50)} />
+                    <p css={styles.placeholderText}>{placeholderText}</p>
                 </div>
-            )}
+            </div>
         </div>
     )
 }

src/components/Layout/LeftPanel/LeftPanel.types.ts

@@ -1,6 +1,6 @@
 import { tagVariants } from './constants'
 import { ReactNode, SyntheticEvent } from 'react'
-import { Strategy } from '@floating-ui/core/src/types'
+import { Strategy } from '@floating-ui/react'
 
 export type MenuTagVariantType = (typeof tagVariants)[keyof typeof tagVariants]
 export type MenuItemVisibilityType = boolean | 'disabled'

src/stories/Alert.stories.jsx src/stories/Alert.stories.tsxsrc/stories/Alert.stories.jsx renamed to src/stories/Alert.stories.tsx

@@ -1,13 +1,14 @@
 import React from 'react'
 import Alert, { severities } from '../components/Atomic/Alert'
+import { StoryFn } from '@storybook/react'
 
 export default {
     title: 'Example/Alert',
     component: Alert,
     argTypes: {},
 }
 
-const Template = (args) => (
+const Template = (args: any) => (
     <div>
         <Alert {...args}>Alert text</Alert>
         <br />
@@ -36,5 +37,5 @@ const Template = (args) => (
     </div>
 )
 
-export const Default = Template.bind({})
+export const Default: StoryFn = Template.bind({})
 Default.args = {}

src/stories/CodeEditor.stories.jsx src/stories/CodeEditor.stories.tsxsrc/stories/CodeEditor.stories.jsx renamed to src/stories/CodeEditor.stories.tsx

@@ -1,17 +1,18 @@
 import React from 'react'
 import CodeEditor from '../components/Atomic/CodeEditor'
+import { StoryFn } from '@storybook/react'
 
 export default {
     title: 'Example/CodeEditor',
     component: CodeEditor,
     argTypes: {},
 }
 
-const Template = (args) => (
+const Template = (args: any) => (
     <div>
-        <CodeEditor value='' />
+        <CodeEditor placeholderText='' value='' />
     </div>
 )
 
-export const Default = Template.bind({})
+export const Default: StoryFn = Template.bind({})
 Default.args = {}

src/stories/Editor.stories.jsx src/stories/Editor.stories.tsxsrc/stories/Editor.stories.jsx renamed to src/stories/Editor.stories.tsx

@@ -1,17 +1,18 @@
 import React from 'react'
 import Editor from '../components/Atomic/Editor'
+import { StoryFn } from '@storybook/react'
 
 export default {
     title: 'Example/Editor',
     component: Editor,
     argTypes: {},
 }
 
-const Template = (args) => (
+const Template = (args: any) => (
     <div>
         <Editor json={{ state: false, power: 0, name: 'Light' }} />
     </div>
 )
 
-export const Default = Template.bind({})
+export const Default: StoryFn = Template.bind({})
 Default.args = {}

src/stories/Form/Button.stories.jsx

@@ -1,8 +1,8 @@
 import React from 'react'
 import Button from '../../components/Atomic/Button'
-import { ReactComponent as IconPlus } from '../assets/icon-plus.svg'
 import '../global.css'
 import Example, { LoadingTemplate } from './Button.snip'
+import IconPlus from '../../components/Atomic/Icon/components/IconPlus'
 
 export default {
     title: 'Form/Button',