Merge pull request #446 from aXenDeveloper/fix/auto-form-path

fix(frontend): Invalid path for Auto Form

apps/docs/content/docs/dev/lint.mdx

@@ -0,0 +1,4 @@
+---
+title: Lint
+description: Lint your code with ESLint and Prettier.
+---

apps/docs/content/docs/dev/meta.json

@@ -5,8 +5,9 @@
     "---Introduction ---",
     "index",
     "contribution",
-    "--- Plugins ---",
+    "--- Plugins in AdminCP ---",
     "plugins",
+    "lint",
     "plugins-nav-admin",
     "plugins-permissions-admin",
     "--- GraphQL ---",

apps/docs/content/docs/dev/pages.mdx

@@ -3,19 +3,47 @@ title: Pages
 description: Create pages in VitNode.
 ---
 
+Some folders in `apps/frontend/app` are in `.gitignore` and are not included in the repository. All files from these folders are copied when you are using `npm run config:init` to initialize your workspace.
+
+<Callout title="Default pages from VitNode" type="error">
+  Do not put any files inside `(vitnode)` folders! They are automatically
+  generated by VitNode and can be overwritten.
+</Callout>
+
+Below is guide how to create own pages in VitNode using own `plugin`. If your `workspace` is `private` and you don't plan to share your `workspace` with others, you can create pages without `{your_plugin}` folder.
+
 ## Default Page
 
-VitNode handle automaticly default page for you. You need to create a file `themes/1/{your_plugin}/default-page.tsx` in your plugin template.
+VitNode automaticly create default page for you in your plugin.
 
-Use `export default` for your template.
+import { File, Folder, Files } from 'fumadocs-ui/components/files';
 
-```tsx
-export default async function DefaultPage() {
-  const data = await getData();
-  const t = await getTranslations('core');
+<Files>
+  <Folder name="app" defaultOpen>
+    <Folder name="frontend" defaultOpen>
+      <Folder name="plugins" defaultOpen>
+        <Folder name="{your_plugin}" defaultOpen>
+          <Folder name="templates" defaultOpen>
+            <File name="default-page.tsx" />
+          </Folder>
+        </Folder>
+      </Folder>
+    </Folder>
+  </Folder>
+</Files>
 
-  return <div>{t('info', { data })}</div>;
-}
-```
+<Callout title="export default">
+  The default page is exported as `default`.
+</Callout>
 
 Test it by set your plugin as default in `AdminCP` and go to your website.
+
+You can also delete this file if you don't need it, then VitNode after export your plugin will block your plugin to be default.
+
+## Create Pages
+
+Vitnode using [NextJS](https://nextjs.org/docs/app/building-your-application/routing) in app directory. All features about `routing` from `NextJS` are available in VitNode for example [Parallel Routes](https://nextjs.org/docs/app/building-your-application/routing/parallel-routes), [Dynamic Routes](https://nextjs.org/docs/app/building-your-application/routing/dynamic-routes), [Error Handling](https://nextjs.org/docs/app/building-your-application/routing/error-handling), [Metadata](https://nextjs.org/docs/app/building-your-application/optimizing/metadata) etc.
+
+You need to remember only where to put your pages if you are creating plugin for VitNode.
+
+### Frontend

apps/docs/content/docs/ui/forms/auto-form.mdx

@@ -40,10 +40,10 @@ npm i react-hook-form zod
 
 ```tsx
 import * as z from 'zod';
-import { AutoForm } from 'vitnode-frontend/components/ui/auto-form';
+import { AutoForm } from 'vitnode-frontend/form/auto-form';
 
 // for input
-import { AutoFormInput } from 'vitnode-frontend/components/ui/auto-form/fields/input';
+import { AutoFormInput } from 'vitnode-frontend/form/fields/input';
 ```
 
 ```ts
@@ -150,7 +150,7 @@ You can set a label for a field by using the `label` method.
 You can nest objects to create accordion sections. Here is an example:
 
 ```ts
-import { AutoFormInputComponentProps } from 'vitnode-frontend/components/ui/auto-form/type';
+import { AutoFormInputComponentProps } from 'vitnode-frontend/form/type';
 ```
 
 ```ts
@@ -324,7 +324,7 @@ const [values, setValues] = useState<Partial<z.infer<typeof formSchema>>>({});
 AutoForm allow to create dependencies between fields. For example allowing one field's visibility or behavior to be controlled based on the value of another. Pass `dependencies` prop with an array of objects.
 
 ```ts
-import { DependencyType } from 'vitnode-frontend/components/ui/auto-form/type';
+import { DependencyType } from 'vitnode-frontend/form/type';
 ```
 
 ### Hides

apps/docs/content/docs/ui/forms/checkbox.mdx

@@ -16,8 +16,8 @@ import { Tab, Tabs } from 'fumadocs-ui/components/tabs';
   <Tab value="Auto Form">
 ```ts
 import * as z from 'zod';
-import { AutoForm } from 'vitnode-frontend/components/ui/auto-form';
-import { AutoFormCheckbox } from 'vitnode-frontend/components/ui/auto-form/fields/checkbox';
+import { AutoForm } from 'vitnode-frontend/form/auto-form';
+import { AutoFormCheckbox } from 'vitnode-frontend/form/fields/checkbox';
 ```
 
 ```ts

apps/docs/content/docs/ui/forms/color-picker.mdx

@@ -11,8 +11,8 @@ import { Tab, Tabs } from 'fumadocs-ui/components/tabs';
   <Tab value="Auto Form">
 ```ts
 import * as z from 'zod';
-import { AutoForm } from 'vitnode-frontend/components/ui/auto-form';
-import { AutoFormColor } from 'vitnode-frontend/components/ui/auto-form/fields/color';
+import { AutoForm } from 'vitnode-frontend/form/auto-form';
+import { AutoFormColor } from 'vitnode-frontend/form/fields/color';
 ```
 
 ```ts

apps/docs/content/docs/ui/forms/combobox.mdx

@@ -16,8 +16,8 @@ import { Tab, Tabs } from 'fumadocs-ui/components/tabs';
   <Tab value="Auto Form">
 ```ts
 import * as z from 'zod';
-import { AutoForm } from 'vitnode-frontend/components/ui/auto-form';
-import { AutoFormCombobox } from 'vitnode-frontend/components/ui/auto-form/fields/combobox';
+import { AutoForm } from 'vitnode-frontend/form/auto-form';
+import { AutoFormCombobox } from 'vitnode-frontend/form/fields/combobox';
 ```
 
 ```ts

apps/docs/content/docs/ui/forms/file-input.mdx

@@ -11,8 +11,8 @@ import { Tab, Tabs } from 'fumadocs-ui/components/tabs';
   <Tab value="Auto Form">
 ```ts
 import * as z from 'zod';
-import { AutoForm } from 'vitnode-frontend/components/ui/auto-form';
-import { AutoFormFile } from 'vitnode-frontend/components/ui/auto-form/fields/file';
+import { AutoForm } from 'vitnode-frontend/form/auto-form';
+import { AutoFormFile } from 'vitnode-frontend/form/fields/file';
 import { zodFile } from 'vitnode-frontend/helpers/zod';
 ```
 
@@ -62,7 +62,7 @@ import { FileInput } from 'vitnode-frontend/components/ui/file-input';
   <Tab value="Auto Form">
 ```ts
 import * as z from 'zod';
-import { AutoForm } from 'vitnode-frontend/components/ui/auto-form';
+import { AutoForm } from 'vitnode-frontend/form/auto-form';
 import { zodFile } from 'vitnode-frontend/helpers/zod';
 ```
 

apps/docs/content/docs/ui/forms/icon-picker.mdx

@@ -11,8 +11,8 @@ import { Tab, Tabs } from 'fumadocs-ui/components/tabs';
   <Tab value="Auto Form">
 ```ts
 import * as z from 'zod';
-import { AutoForm } from 'vitnode-frontend/components/ui/auto-form';
-import { AutoFormIcon } from 'vitnode-frontend/components/ui/auto-form/fields/icon';
+import { AutoForm } from 'vitnode-frontend/form/auto-form';
+import { AutoFormIcon } from 'vitnode-frontend/form/fields/icon';
 ```
 
 ```ts

apps/docs/content/docs/ui/forms/input.mdx

@@ -16,8 +16,8 @@ import { Tab, Tabs } from 'fumadocs-ui/components/tabs';
   <Tab value="Auto Form">
 ```ts
 import * as z from 'zod';
-import { AutoForm } from 'vitnode-frontend/components/ui/auto-form';
-import { AutoFormInput } from 'vitnode-frontend/components/ui/auto-form/fields/input';
+import { AutoForm } from 'vitnode-frontend/form/auto-form';
+import { AutoFormInput } from 'vitnode-frontend/form/fields/input';
 ```
 
 ```ts

apps/docs/content/docs/ui/forms/radio-group.mdx

@@ -16,8 +16,8 @@ import { Tab, Tabs } from 'fumadocs-ui/components/tabs';
   <Tab value="Auto Form">
 ```ts
 import * as z from 'zod';
-import { AutoForm } from 'vitnode-frontend/components/ui/auto-form';
-import { AutoFormRadioGroup } from 'vitnode-frontend/components/ui/auto-form/fields/radio-group';
+import { AutoForm } from 'vitnode-frontend/form/auto-form';
+import { AutoFormRadioGroup } from 'vitnode-frontend/form/fields/radio-group';
 ````
 
 ```ts

apps/docs/content/docs/ui/forms/select.mdx

@@ -16,8 +16,8 @@ import { Tab, Tabs } from 'fumadocs-ui/components/tabs';
   <Tab value="Auto Form">
 ```ts
 import * as z from 'zod';
-import { AutoForm } from 'vitnode-frontend/components/ui/auto-form';
-import { AutoFormSelect } from 'vitnode-frontend/components/ui/auto-form/fields/select';
+import { AutoForm } from 'vitnode-frontend/form/auto-form';
+import { AutoFormSelect } from 'vitnode-frontend/form/fields/select';
 ```
 
 ```ts

apps/docs/content/docs/ui/forms/switch.mdx

@@ -16,7 +16,7 @@ import { Tab, Tabs } from 'fumadocs-ui/components/tabs';
   <Tab value="Auto Form">
 ```ts
 import * as z from 'zod';
-import { AutoForm } from 'vitnode-frontend/components/ui/auto-form';
+import { AutoForm } from 'vitnode-frontend/form/auto-form';
 ```
 
 ```ts

apps/docs/content/docs/ui/forms/tags-input.mdx

@@ -11,8 +11,8 @@ import { Tab, Tabs } from 'fumadocs-ui/components/tabs';
   <Tab value="Auto Form">
 ```ts
 import * as z from 'zod';
-import { AutoForm } from 'vitnode-frontend/components/ui/auto-form';
-import { AutoFormTags } from 'vitnode-frontend/components/ui/auto-form/fields/tags';
+import { AutoForm } from 'vitnode-frontend/form/auto-form';
+import { AutoFormTags } from 'vitnode-frontend/form/fields/tags';
 import { zodTag } from 'vitnode-frontend/helpers/zod';
 ```
 

apps/docs/content/docs/ui/forms/text-language-input.mdx

@@ -12,8 +12,8 @@ import { Tab, Tabs } from 'fumadocs-ui/components/tabs';
 ```ts
 import * as z from 'zod';
 import { zodLanguageInput } from 'vitnode-frontend/helpers/zod';
-import { AutoForm } from 'vitnode-frontend/components/ui/auto-form';
-import { AutoFormTextLanguageInput } from 'vitnode-frontend/components/ui/auto-form/fields/text-language-input';
+import { AutoForm } from 'vitnode-frontend/form/auto-form';
+import { AutoFormTextLanguageInput } from 'vitnode-frontend/form/fields/text-language-input';
 ```
 
 ```ts

apps/docs/content/docs/ui/forms/textarea.mdx

@@ -16,7 +16,7 @@ import { Tab, Tabs } from 'fumadocs-ui/components/tabs';
   <Tab value="Auto Form">
 ```ts
 import * as z from 'zod';
-import { AutoForm } from 'vitnode-frontend/components/ui/auto-form';
+import { AutoForm } from 'vitnode-frontend/form/auto-form';
 ```
 
 ```ts
@@ -58,7 +58,7 @@ import { Textarea } from 'vitnode-frontend/components/ui/textarea';
   <Tab value="Auto Form">
 ```ts
 import * as z from 'zod';
-import { AutoForm } from 'vitnode-frontend/components/ui/auto-form';
+import { AutoForm } from 'vitnode-frontend/form/auto-form';
 ```
 
 ```ts

packages/frontend/src/components/ui/auto-form/index.tsx → packages/frontend/src/components/form/auto-form.tsx

@@ -6,12 +6,12 @@ import React from 'react';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useTranslations } from 'next-intl';
 
-import { Dependency, FieldConfig, ZodObjectOrWrapped } from './type';
-import { getDefaultValues, getObjectFormSchema } from './utils';
-import { Form } from '../form';
-import { AutoFormObject } from './object';
-import { Button } from '../button';
+import { Form } from '../ui/form';
+import { Button } from '../ui/button';
 import { cn } from '@/helpers/classnames';
+import { AutoFormObject } from '@/components/form/object';
+import { getDefaultValues, getObjectFormSchema } from './utils';
+import { Dependency, FieldConfig, ZodObjectOrWrapped } from './type';
 
 export function AutoForm<T extends ZodObjectOrWrapped>({
   formSchema,

packages/frontend/src/components/ui/auto-form/fields/checkbox.tsx → packages/frontend/src/components/form/fields/checkbox.tsx

@@ -1,12 +1,12 @@
 import { AutoFormInputComponentProps } from '../type';
-import { AutoFormLabel } from './common/label';
-import { AutoFormTooltip } from './common/tooltip';
 import { cn } from '@/helpers/classnames';
 import { AutoFormWrapper } from './common/wrapper';
 import { DefaultParent } from './common/children';
+import { AutoFormLabel } from './common/label';
+import { AutoFormTooltip } from './common/tooltip';
 
-import { FormControl, FormMessage } from '../../form';
-import { Checkbox } from '../../checkbox';
+import { Checkbox } from '../../ui/checkbox';
+import { FormControl, FormMessage } from '../../ui/form';
 
 export const AutoFormCheckbox = ({
   autoFormProps: { isRequired, fieldConfigItem, field, theme, isDisabled },

packages/frontend/src/components/ui/auto-form/fields/color.tsx → packages/frontend/src/components/form/fields/color.tsx

@@ -1,11 +1,10 @@
+import { ColorPicker } from '@/components/ui/color-picker';
 import { AutoFormInputComponentProps } from '../type';
+import { DefaultParent } from './common/children';
+import { AutoFormWrapper } from './common/wrapper';
 import { AutoFormLabel } from './common/label';
+import { FormControl, FormMessage } from '@/components/ui/form';
 import { AutoFormTooltip } from './common/tooltip';
-import { AutoFormWrapper } from './common/wrapper';
-import { DefaultParent } from './common/children';
-
-import { FormControl, FormMessage } from '../../form';
-import { ColorPicker } from '../../color-picker';
 
 export const AutoFormColor = ({
   autoFormProps: { isRequired, fieldConfigItem, field, theme, isDisabled },

packages/frontend/src/components/ui/auto-form/fields/combobox.tsx → packages/frontend/src/components/form/fields/combobox.tsx

@@ -3,25 +3,25 @@ import React from 'react';
 import { useTranslations } from 'next-intl';
 import { Check, ChevronsUpDown } from 'lucide-react';
 
+import { cn } from '@/helpers/classnames';
+import { getBaseSchema } from '../utils';
 import { AutoFormInputComponentProps } from '../type';
+import { DefaultParent } from './common/children';
+import { AutoFormWrapper } from './common/wrapper';
 import { AutoFormLabel } from './common/label';
 import { AutoFormTooltip } from './common/tooltip';
-import { getBaseSchema } from '../utils';
-import { AutoFormWrapper } from './common/wrapper';
-import { DefaultParent } from './common/children';
-import { cn } from '@/helpers/classnames';
 
-import { FormControl, FormMessage } from '../../form';
-import { Popover, PopoverContent, PopoverTrigger } from '../../popover';
-import { Button } from '../../button';
+import { FormControl, FormMessage } from '../../ui/form';
+import { Popover, PopoverContent, PopoverTrigger } from '../../ui/popover';
+import { Button } from '../../ui/button';
 import {
   Command,
   CommandEmpty,
   CommandGroup,
   CommandInput,
   CommandItem,
   CommandList,
-} from '../../command';
+} from '../../ui/command';
 
 export const AutoFormCombobox = ({
   autoFormProps: {

packages/frontend/src/components/ui/auto-form/fields/file.tsx → packages/frontend/src/components/form/fields/file.tsx

@@ -1,11 +1,10 @@
+import { FileInput } from '@/components/ui/file-input';
 import { AutoFormInputComponentProps } from '../type';
+import { DefaultParent } from './common/children';
 import { AutoFormLabel } from './common/label';
-import { AutoFormTooltip } from './common/tooltip';
 import { AutoFormWrapper } from './common/wrapper';
-import { DefaultParent } from './common/children';
-
-import { FormControl, FormMessage } from '../../form';
-import { FileInput } from '../../file-input';
+import { FormControl, FormMessage } from '@/components/ui/form';
+import { AutoFormTooltip } from './common/tooltip';
 
 export const AutoFormFile = ({
   autoFormProps: { isRequired, fieldConfigItem, field, theme, isDisabled },

packages/frontend/src/components/ui/auto-form/fields/icon.tsx → packages/frontend/src/components/form/fields/icon.tsx

@@ -1,11 +1,10 @@
+import { IconPicker } from '@/components/icon/picker/icon-picker';
 import { AutoFormInputComponentProps } from '../type';
+import { DefaultParent } from './common/children';
+import { AutoFormWrapper } from './common/wrapper';
 import { AutoFormLabel } from './common/label';
+import { FormControl, FormMessage } from '@/components/ui/form';
 import { AutoFormTooltip } from './common/tooltip';
-import { AutoFormWrapper } from './common/wrapper';
-import { DefaultParent } from './common/children';
-import { IconPicker } from '@/components/icon/picker/icon-picker';
-
-import { FormControl, FormMessage } from '../../form';
 
 export const AutoFormIcon = ({
   autoFormProps: { isRequired, fieldConfigItem, field, theme, isDisabled },

packages/frontend/src/components/ui/auto-form/fields/input.tsx → packages/frontend/src/components/form/fields/input.tsx

@@ -1,11 +1,10 @@
+import { DefaultParent } from './common/children';
 import { AutoFormInputComponentProps } from '../type';
+import { AutoFormWrapper } from './common/wrapper';
 import { AutoFormLabel } from './common/label';
+import { FormControl, FormMessage } from '@/components/ui/form';
+import { Input } from '@/components/ui/input';
 import { AutoFormTooltip } from './common/tooltip';
-import { AutoFormWrapper } from './common/wrapper';
-import { DefaultParent } from './common/children';
-
-import { FormControl, FormMessage } from '../../form';
-import { Input } from '../../input';
 
 export const AutoFormInput = ({
   autoFormProps: { isRequired, fieldConfigItem, field, theme, isDisabled },