feat: can create extension

apps/desktop/src/components/CommandPalette/CommandApp/FormApp/FormApp.tsx

@@ -3,6 +3,7 @@ import { Box } from '@fower/react'
 import { FormJSON } from '@penxio/preset-ui'
 import { Form, useForm } from 'fomir'
 import { appEmitter } from '@penx/event'
+import { workerStore } from '~/common/workerStore'
 
 interface FormAppProps {
   component: FormJSON
@@ -16,15 +17,15 @@ export const FormApp = memo(function FormApp({ component }: FormAppProps) {
     },
     children: [
       ...component.fields,
-      // {
-      //   label: 'First Name',
-      //   name: 'firstName',
-      //   component: 'Input',
-      //   value: '',
-      //   validators: {
-      //     required: 'First Name is requiredFirst Name is required',
-      //   },
-      // },
+      {
+        label: 'First Name',
+        name: 'firstName',
+        component: 'Checkbox',
+        value: '',
+        validators: {
+          required: 'First Name is requiredFirst Name is required',
+        },
+      },
       // {
       //   label: 'Last Name',
       //   name: 'lastName',
@@ -38,8 +39,14 @@ export const FormApp = memo(function FormApp({ component }: FormAppProps) {
   })
 
   useEffect(() => {
-    function onSubmit() {
-      console.log('===values:', form.getValues())
+    function onSubmit(index: number) {
+      console.log('nam.........')
+
+      workerStore.currentWorker!.postMessage({
+        type: 'action--on-submit',
+        values: form.getValues(),
+        actionIndex: index,
+      })
     }
     appEmitter.on('SUBMIT_FORM_APP', onSubmit)
     return () => {

apps/desktop/src/components/CommandPalette/SearchBar/CommandAppActions.tsx

@@ -61,7 +61,7 @@ export const CommandAppActions = ({ onSelect }: Props) => {
             }
 
             if (isSubmitForm(item)) {
-              appEmitter.emit('SUBMIT_FORM_APP')
+              appEmitter.emit('SUBMIT_FORM_APP', index)
             }
 
             if (isCustomAction(item)) {

apps/desktop/src/fomir-uikit/FormField.tsx

@@ -16,6 +16,7 @@ export const FormField: FC<FormFieldProps> = forwardRef(function FormFieldComp(
   ref,
 ) {
   const { children, node, showLabel = true, renderLabel, ...rest } = props
+
   const { schema } = useFormContext()
   const { layout = 'horizontal' } = schema
   const { error, label, description, touched, wrapper } = node || {}
@@ -35,16 +36,22 @@ export const FormField: FC<FormFieldProps> = forwardRef(function FormFieldComp(
       {...rest}
       gap2
     >
-      <Box toCenterY w-190 toRight text-13>
+      <Box
+        toCenterY={node.component !== 'Textarea'}
+        toTop={node.component === 'Textarea'}
+        mt3={node.component === 'Textarea'}
+        w-190
+        toRight
+        text-13
+      >
         {renderLabel?.()}
         {showLabel && label && (
           <Box
-            toCenterY
             gap1
             mb2={layout === 'vertical'}
             toRight={layout === 'horizontal'}
             pr2={layout !== 'vertical'}
-            w-100={layout === 'horizontal'}
+            w-100p={layout === 'horizontal'}
           >
             {label && (
               <Box as="label" className="uikit-form-field-label" leading-1em toCenterY>

apps/desktop/src/fomir-uikit/fields/Input.tsx

@@ -1,9 +1,7 @@
 import { FC, useRef } from 'react'
-import { Box } from '@fower/react'
 import { NodeProps, useFormContext } from 'fomir'
 import { InputNode } from '../fomir-uikit-node'
-import { Input as BoneInput, InputElement, InputGroup } from 'uikit'
-import { IconCloseSolid } from '@penx/icons'
+import { Input as BoneInput, InputGroup } from 'uikit'
 import { FormField } from '../FormField'
 
 export const Input: FC<NodeProps<InputNode>> = (props) => {
@@ -32,7 +30,8 @@ export const Input: FC<NodeProps<InputNode>> = (props) => {
           onChange={props.handler.handleChange}
           {...componentProps}
         />
-        {!!value?.length && focused && (
+        {/* TODO: fix */}
+        {/* {!!value?.length && focused && (
           <InputElement>
             <Box
               inlineFlex
@@ -47,7 +46,7 @@ export const Input: FC<NodeProps<InputNode>> = (props) => {
               <IconCloseSolid neutral400 size={20} />
             </Box>
           </InputElement>
-        )}
+        )} */}
       </InputGroup>
     </FormField>
   )

apps/desktop/src/fomir-uikit/fields/Select.tsx

@@ -1,15 +1,43 @@
 import { FC } from 'react'
+import { Box } from '@fower/react'
 import { NodeProps } from 'fomir'
 import { SelectNode } from '../fomir-uikit-node'
-import { Select as BoneSelect } from 'uikit'
+import {
+  Select as BoneSelect,
+  SelectContent,
+  SelectIcon,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from 'uikit'
 import { FormField } from '../FormField'
 
 export const Select: FC<NodeProps<SelectNode>> = (props) => {
   const { value, componentProps, options = [], display, wrapper } = props.node
 
   return (
     <FormField node={props.node} hidden={!display}>
-      <BoneSelect {...componentProps} value={value} onChange={props.handler.handleChange} />
+      <BoneSelect {...componentProps} value={value} onChange={props.handler.handleChange}>
+        <SelectTrigger
+          flex-1
+          textSM
+          w-100p
+          h-32
+          border
+          borderNeutral200--T30
+          borderNeutral700--dark
+        >
+          <SelectValue flexShrink-0 placeholder=""></SelectValue>
+          <SelectIcon></SelectIcon>
+        </SelectTrigger>
+        <SelectContent w-200 maxH-240 useTriggerWidth={true} overflowAuto>
+          {options.map((item) => (
+            <SelectItem key={item.value + item.value.toString()} value={item.value} toBetween>
+              <Box flex-1>{item.label}</Box>
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </BoneSelect>
     </FormField>
   )
 }

apps/desktop/src/fomir-uikit/fomir-uikit-node.ts

@@ -75,6 +75,10 @@ export interface BoxNode extends BaseNode {
   children?: Node[]
 }
 
+export interface DividerNode extends BaseNode {
+  component: 'Divider'
+}
+
 export type FomirUIkitNode =
   | InputNode
   | PasswordInputNode
@@ -89,3 +93,4 @@ export type FomirUIkitNode =
   | SubmitNode
   | BoxNode
   | CounterInputNode
+  | DividerNode

extension-samples/mix/.gitignore

@@ -0,0 +1,6 @@
+node_modules
+.DS_Store
+dist
+*.log
+
+.penx

extension-samples/mix/.prettierrc

@@ -0,0 +1,7 @@
+{
+  "semi": false,
+  "tabWidth": 2,
+  "singleQuote": true,
+  "trailingComma": "all",
+  "printWidth": 80
+}

extension-samples/mix/README.md

@@ -0,0 +1 @@
+# Mix

extension-samples/mix/manifest.json

@@ -0,0 +1,38 @@
+{
+  "name": "mix",
+  "title": "Mix Demo",
+  "description": "This is a mix demo.",
+  "icon": {
+    "name": "mdi--react",
+    "className": "bg-gradient-to-r from-violet-500 to-fuchsia-500"
+  },
+  "commands": [
+    {
+      "name": "markdown",
+      "title": "Markdown App",
+      "icon": {
+        "name": "lucide--pilcrow",
+        "className": "bg-gradient-to-r from-rose-500 to-purple-500"
+      },
+      "mode": "preset-ui"
+    },
+    {
+      "name": "list",
+      "title": "List App",
+      "icon": {
+        "name": "lucide--list",
+        "className": "bg-gradient-to-r from-blue-500 to-green-500"
+      },
+      "mode": "preset-ui"
+    },
+    {
+      "name": "form",
+      "title": "Form App",
+      "icon": {
+        "name": "lucide--pencil",
+        "className": "bg-gradient-to-r from-yellow-500 to-red-500"
+      },
+      "mode": "preset-ui"
+    }
+  ]
+}

extension-samples/mix/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "extension-mix",
+  "private": true,
+  "scripts": {
+    "dev": "penx dev",
+    "release": "penx release"
+  },
+  "devDependencies": {
+    "@penxio/preset-ui": "workspace:*",
+    "@penxio/react": "workspace:*",
+    "@penxio/api": "workspace:*",
+    "penx-cli": "workspace:*",
+    "prettier": "^3.2.5",
+    "typescript": "^5.3.2"
+  }
+}

extension-samples/mix/src/form.command.ts

@@ -0,0 +1,30 @@
+import { FormApp } from '@penxio/preset-ui'
+
+export function main() {
+  const app = new FormApp({
+    fields: [
+      { label: 'First Name', name: 'firstName', component: 'Input' },
+      { label: 'Description', name: 'description', component: 'Textarea' },
+      { label: 'Open', name: 'isOpen', component: 'Switch', value: true },
+      {
+        label: 'Color',
+        name: 'color',
+        component: 'Select',
+        options: [
+          { label: 'Red', value: 'red' },
+          { label: 'Green', value: 'green' },
+          { label: 'Blue', value: 'blur' },
+        ],
+        value: 'red',
+      },
+    ],
+    actions: [
+      {
+        type: 'SubmitForm',
+        onSubmit: async (values) => {
+          console.log('======values:', values)
+        },
+      },
+    ],
+  }).run()
+}

extension-samples/mix/src/list.command.ts

@@ -0,0 +1,21 @@
+import { IListItem, ListApp } from '@penxio/preset-ui'
+
+export async function main() {
+  const app = new ListApp({
+    items: [],
+  }).run()
+
+  const items: IListItem[] = Array(10)
+    .fill('')
+    .map((_, index) => ({
+      icon: index + 1,
+      title: 100 + index.toString(),
+      actions: [{ type: 'CopyToClipboard', content: index.toString() }],
+    }))
+
+  setTimeout(() => {
+    app.setState({
+      items,
+    })
+  }, 1)
+}

extension-samples/mix/src/markdown.command.ts

@@ -0,0 +1,5 @@
+import { MarkdownApp } from '@penxio/preset-ui'
+
+export async function main() {
+  new MarkdownApp({ content: '# Hello world' }).run()
+}

extension-samples/mix/src/no-view.command.ts

@@ -0,0 +1,9 @@
+import { notification } from '@penxio/api'
+
+export async function main() {
+  const granted = await notification.isPermissionGranted()
+  console.log('=======granted:', granted)
+  if (granted) {
+    notification.sendNotification('Hello from Penx')
+  }
+}

extension-samples/mix/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "target": "es2020",
+    "module": "esnext",
+    "strict": true,
+    "lib": ["ESNext", "DOM"],
+    "esModuleInterop": true,
+    "moduleResolution": "node",
+    "skipLibCheck": true,
+    "noUnusedLocals": true,
+    "noImplicitAny": true,
+    "jsx": "react-jsx",
+    "allowJs": true,
+    "noEmit": true,
+    "outDir": "dist",
+    "resolveJsonModule": true
+  }
+}