fix lint issues

apps/design-system/src/components/Form.stories.tsx

@@ -1,3 +1,4 @@
+import type { Meta } from "@storybook/react"
 import {
   DescriptionWithLabel,
   Field,
@@ -11,7 +12,7 @@ import {
 } from "@asyncapi/studio-ui"
 import { AddIcon, TrashIcon } from "@asyncapi/studio-ui/icons"
 
-export default {
+const meta: Meta<typeof Form> = {
   component: Form,
   parameters: {
     layout: "fullscreen",
@@ -22,6 +23,8 @@ export default {
   },
 }
 
+export default meta
+
 const singleSelectOptions = [
   { label: "HTTP", value: "http" },
   { label: "Kafka", value: "kafka" },

packages/ui/components/Form/Fields/Field.tsx

@@ -1,6 +1,6 @@
-import React from "react"
-import { Label } from "../Labels/Label"
-import * as RadixForm from "@radix-ui/react-form"
+import React from 'react'
+import { Label } from '../Labels/Label'
+import * as RadixForm from '@radix-ui/react-form'
 
 type FieldProps = {
   name: string

packages/ui/components/Form/Fields/index.ts

@@ -1 +1 @@
-export * from "./Field"
+export * from './Field'

packages/ui/components/Form/Form.tsx

@@ -1,6 +1,6 @@
-import React from "react"
-import * as RadixForm from "@radix-ui/react-form"
-import { Description } from "./Labels/Description"
+import React from 'react'
+import * as RadixForm from '@radix-ui/react-form'
+import { Description } from './Labels/Description'
 
 export type FormProps = {
   className?: string

packages/ui/components/Form/Inputs/Input.tsx

@@ -1,7 +1,7 @@
 
 export type InputProps = {
   placeholder: string
-  type?: "text" | "url"
+  type?: 'text' | 'url'
   value?: string
   onClear?: () => void
   onChange?: () => void
@@ -16,7 +16,7 @@ export const Input = (props: InputProps) => {
       disabled={props.isDisabled}
       className={`h-[46px] bg-gray-900 appearance-none inline-flex items-center justify-center rounded-md px-3 text-sm leading-4 font-medium text-gray-100 border border-gray-700 placeholder-gray-500 placeholder:italic outline-none ${
         props.className
-      } ${props.isDisabled && "opacity-50"}`}
+      } ${props.isDisabled && 'opacity-50'}`}
     />
   )
 }

packages/ui/components/Form/Inputs/SelectDropdown.tsx

@@ -1,10 +1,10 @@
-import React from "react"
-import * as RadixSelect from "@radix-ui/react-select"
-import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "../../icons"
-import classnames from "classnames"
+import React from 'react'
+import * as RadixSelect from '@radix-ui/react-select'
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from '../../icons'
+import classnames from 'classnames'
 
 type SelectDropdownRegularOption = {
-  type?: "regular"
+  type?: 'regular'
   value: string
   label: string
 }
@@ -28,7 +28,7 @@ const SelectDropdownRegularOption = ({ option: { value, label } }: SelectDropdow
 }
 
 type SelectDropdownGroupOption = {
-  type: "group"
+  type: 'group'
   label: string
   options: SelectDropdownRegularOption[]
 }
@@ -50,7 +50,7 @@ const SelectDropdownGroupOption = ({ option: { label, options } }: SelectDropdow
   )
 }
 type SelectDropdownSeparatorOption = {
-  type: "separator"
+  type: 'separator'
 }
 
 const SelectDropdownSeparatorOption = () => {
@@ -65,12 +65,12 @@ type SelectDropdownOptionProps = {
 
 const SelectDropdownOption = ({ option }: SelectDropdownOptionProps) => {
   switch (option.type) {
-    case "separator":
-      return <SelectDropdownSeparatorOption />
-    case "group":
-      return <SelectDropdownGroupOption option={option} />
-    default:
-      return <SelectDropdownRegularOption option={option} />
+  case 'separator':
+    return <SelectDropdownSeparatorOption />
+  case 'group':
+    return <SelectDropdownGroupOption option={option} />
+  default:
+    return <SelectDropdownRegularOption option={option} />
   }
 }
 
@@ -101,8 +101,8 @@ export function SelectDropdown({
           aria-label="Protocol"
           className={classnames(
             className,
-            "flex items-center justify-between rounded-md border border-gray-700 px-3 text-sm leading-6 h-[46px] gap-2 bg-gray-900 text-gray-100 min-w-[176px]",
-            { "opacity-50": isDisabled }
+            'flex items-center justify-between rounded-md border border-gray-700 px-3 text-sm leading-6 h-[46px] gap-2 bg-gray-900 text-gray-100 min-w-[176px]',
+            { 'opacity-50': isDisabled }
           )}
         >
           <RadixSelect.Value placeholder={placeholder} />

packages/ui/components/Form/Inputs/index.ts

@@ -1,2 +1,2 @@
-export * from "./Input"
-export * from "./SelectDropdown"
+export * from './Input'
+export * from './SelectDropdown'

packages/ui/components/Form/Labels/DescriptionWithLabel.tsx

@@ -1,5 +1,5 @@
-import { Description } from "./Description"
-import { Label } from "./Label"
+import { Description } from './Description'
+import { Label } from './Label'
 
 type DescriptionWithLabelProps = {
   className?: string

packages/ui/components/Form/Labels/Label.tsx

@@ -1,6 +1,6 @@
-import { FunctionComponent } from "react"
-import Tooltip from "../../Tooltip"
-import { QuestionMarkCircleIcon } from "../../icons"
+import { FunctionComponent } from 'react'
+import Tooltip from '../../Tooltip'
+import { QuestionMarkCircleIcon } from '../../icons'
 export type LabelProps = {
   className?: string
   label: string

packages/ui/components/Form/Labels/index.ts

@@ -1,3 +1,3 @@
-export * from "./Label"
-export * from "./Description"
-export * from "./DescriptionWithLabel"
+export * from './Label'
+export * from './Description'
+export * from './DescriptionWithLabel'

packages/ui/components/Form/Sections/Group.tsx

@@ -1,4 +1,4 @@
-import { FunctionComponent } from "react"
+import React, { FunctionComponent } from 'react'
 
 type FormGroupProps = {
   children: React.ReactNode

packages/ui/components/Form/Sections/Section.tsx

@@ -1,4 +1,4 @@
-import { FunctionComponent } from "react"
+import React, { FunctionComponent } from 'react'
 
 type FormSectionProps = {
   className?: string

packages/ui/components/Form/Sections/index.ts

@@ -1,2 +1,2 @@
-export * from "./Section"
-export * from "./Group"
+export * from './Section'
+export * from './Group'

packages/ui/components/Form/index.ts

@@ -1,5 +1,5 @@
-export * from "./Fields"
-export * from "./Labels"
-export * from "./Inputs"
-export * from "./Sections"
-export * from "./Form"
+export * from './Fields'
+export * from './Labels'
+export * from './Inputs'
+export * from './Sections'
+export * from './Form'

packages/ui/components/IconButton.tsx

@@ -1,4 +1,4 @@
-import { FunctionComponent } from "react"
+import { FunctionComponent } from 'react'
 
 type IconButtonProps = {
   className?: string

packages/ui/components/icons/AddIcon.tsx

@@ -5,14 +5,14 @@ const AddIcon = (props: any) => (
         id="Vector"
         d="M19.5 14.625V24.375M24.375 19.5H14.625M34.125 19.5C34.125 27.5772 27.5772 34.125 19.5 34.125C11.4228 34.125 4.875 27.5772 4.875 19.5C4.875 11.4228 11.4228 4.875 19.5 4.875C27.5772 4.875 34.125 11.4228 34.125 19.5Z"
         stroke="#64748B"
-        stroke-width="1.5"
-        stroke-linecap="round"
-        stroke-linejoin="round"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
       />
     </g>
   </svg>
 )
 
-AddIcon.displayName = "AddIcon"
+AddIcon.displayName = 'AddIcon'
 
 export default AddIcon