Create storybook for Host/Site Field (#30104)

### Parent Issue

#30103


### Proposed Changes
* Add storybook for Host/Site Field

### Checklist
- [x] Tests
- [x] Translations
- [x] Security Implications Contemplated (add notes if applicable)


### Screenshots

![Screenshot 2024-09-20 at 4 35
40 PM](https://github.com/user-attachments/assets/6105bce5-ddb8-41cf-b1ed-e59a21473158)

core-web/libs/edit-content/src/lib/fields/dot-edit-content-host-folder-field/dot-edit-content-host-folder-field.component.stories.ts

@@ -0,0 +1,86 @@
+import {
+    moduleMetadata,
+    StoryObj,
+    Meta,
+    applicationConfig,
+    argsToTemplate,
+    componentWrapperDecorator
+} from '@storybook/angular';
+import { of } from 'rxjs';
+
+import { provideHttpClient } from '@angular/common/http';
+import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+
+import { DotMessageService } from '@dotcms/data-access';
+import { DotCMSContentTypeField } from '@dotcms/dotcms-models';
+import { MockDotMessageService } from '@dotcms/utils-testing';
+
+import { DotEditContentHostFolderFieldComponent } from './dot-edit-content-host-folder-field.component';
+import { HostFolderFiledStore } from './store/host-folder-field.store';
+
+import { DotEditContentService } from '../../services/dot-edit-content.service';
+import { HOST_FOLDER_TEXT_MOCK, TREE_SELECT_MOCK } from '../../utils/mocks';
+
+type Args = DotEditContentHostFolderFieldComponent & {
+    field: DotCMSContentTypeField;
+    value: string;
+};
+
+const meta: Meta<Args> = {
+    title: 'Library / Edit Content / Host Folder Field',
+    component: DotEditContentHostFolderFieldComponent,
+    decorators: [
+        applicationConfig({
+            providers: [
+                provideHttpClient(),
+                {
+                    provide: DotMessageService,
+                    useValue: new MockDotMessageService({})
+                }
+            ]
+        }),
+        moduleMetadata({
+            imports: [BrowserAnimationsModule, ReactiveFormsModule],
+            providers: [
+                HostFolderFiledStore,
+                {
+                    provide: DotEditContentService,
+                    useValue: {
+                        getSitesTreePath: () => of(TREE_SELECT_MOCK)
+                        // getFoldersTreeNode: () => of([])
+                    }
+                }
+            ]
+        }),
+        componentWrapperDecorator(
+            (story) => `<div class="card flex h-25rem justify-content-center w-full">${story}</div>`
+        )
+    ],
+    render: (args) => ({
+        props: {
+            ...args,
+            form: new FormGroup({
+                [args.field.variable]: new FormControl('')
+            })
+        },
+        template: `
+            <form [formGroup]="form" class="w-full flex flex-column">
+                <div class="flex align-items-center">
+                    <dot-edit-content-host-folder-field
+                        [formControlName]="field.variable"
+                        ${argsToTemplate(args)} />
+                </div>
+            </form>
+        `
+    })
+};
+export default meta;
+
+type Story = StoryObj<Args>;
+
+export const Default: Story = {
+    args: {
+        field: { ...HOST_FOLDER_TEXT_MOCK }
+    }
+};

core-web/libs/edit-content/src/lib/fields/dot-edit-content-host-folder-field/utils/mocks.ts

@@ -0,0 +1,21 @@
+import { MockDotMessageService } from '@dotcms/utils-testing';
+
+const FILE_MESSAGES_MOCK = {
+    'dot.file.field.action.choose.file': 'Choose File',
+    'dot.file.field.action.create.new.file': 'Create New File',
+    'dot.file.field.action.create.new.file.label': 'File Name',
+    'dot.file.field.action.import.from.url.error.message':
+        'The URL you requested is not valid. Please try again.',
+    'dot.file.field.action.import.from.url': 'Import from URL',
+    'dot.file.field.action.remove': 'Remove',
+    'dot.file.field.drag.and.drop.message': 'Drag and Drop or',
+    'dot.file.field.action.select.existing.file': 'Select Existing File',
+    'dot.common.cancel': 'Cancel',
+    'dot.common.edit': 'Edit',
+    'dot.common.import': 'Import',
+    'dot.common.remove': 'Remove',
+    'dot.common.save': 'Save',
+    'error.form.validator.required': 'This field is required'
+};
+
+export const MessageServiceMock = new MockDotMessageService(FILE_MESSAGES_MOCK);