valtech-components 2.0.691 → 2.0.692

package/src/lib/components/organisms/form/form.stories.ts

@@ -1,505 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/angular';
-import { moduleMetadata } from '@storybook/angular';
-import { CommonModule } from '@angular/common';
-import { ReactiveFormsModule } from '@angular/forms';
-import { FormComponent } from './form.component';
-import { ComponentStates, InputType } from '../../types';
-
-const meta: Meta<FormComponent> = {
-  title: 'Organisms/Form',
-  component: FormComponent,
-  decorators: [
-    moduleMetadata({
-      imports: [CommonModule, ReactiveFormsModule, FormComponent],
-    }),
-  ],
-  tags: ['autodocs'],
-  argTypes: {
-    props: {
-      description: 'Form configuration object',
-      control: 'object',
-    },
-    onSubmit: {
-      action: 'onSubmit',
-      description: 'Event emitted when the form is submitted',
-    },
-    onInvalid: {
-      action: 'onInvalid',
-      description: 'Event emitted when form validation fails',
-    },
-    onSelectChange: {
-      action: 'onSelectChange',
-      description: 'Event emitted when a select field value changes',
-    },
-  },
-  parameters: {
-    docs: {
-      description: {
-        component: `
-## val-form
-
-A dynamic form generator component that creates forms based on configuration. Supports multiple input types and automatic FormControl management.
-
-### Usage
-
-\`\`\`html
-<val-form [props]="formConfig" (onSubmit)="handleSubmit($event)"></val-form>
-\`\`\`
-
-### Supported Input Types
-
-- TEXT: Text input
-- EMAIL: Email input with validation
-- PASSWORD: Password input
-- NUMBER: Numeric input
-- DATE: Date picker
-- HOUR: Time picker
-- COMMENT: Multiline text area
-- SELECT: Dropdown selection
-- SEARCH_SELECT: Searchable select
-- MULTI_SELECT: Multiple selection
-- RADIO: Radio buttons
-- CHECK: Checkboxes
-- FILE: File upload
-- PIN_CODE: PIN entry
-
-### Features
-
-- Dynamic form generation
-- Section-based organization
-- Built-in validation support
-- Automatic FormControl management
-- Submit button state management
-        `,
-      },
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<FormComponent>;
-
-export const ContactForm: Story = {
-  args: {
-    props: {
-      name: 'Contact Us',
-      sections: [
-        {
-          name: 'Personal Information',
-          order: 1,
-          fields: [
-            {
-              token: 'name',
-              label: 'Full Name',
-              name: 'fullName',
-              hint: 'Enter your full name',
-              placeholder: 'John Doe',
-              type: InputType.TEXT,
-              order: 1,
-              validators: [],
-              errors: {},
-              state: ComponentStates.ENABLED,
-            },
-            {
-              token: 'email',
-              label: 'Email',
-              name: 'email',
-              hint: 'We will never share your email',
-              placeholder: 'john@example.com',
-              type: InputType.EMAIL,
-              order: 2,
-              validators: [],
-              errors: {},
-              state: ComponentStates.ENABLED,
-            },
-          ],
-        },
-        {
-          name: 'Message',
-          order: 2,
-          fields: [
-            {
-              token: 'message',
-              label: 'Your Message',
-              name: 'message',
-              hint: 'Tell us how we can help',
-              placeholder: 'Enter your message here...',
-              type: InputType.COMMENT,
-              order: 1,
-              validators: [],
-              errors: {},
-              state: ComponentStates.ENABLED,
-            },
-          ],
-        },
-      ],
-      actions: {
-        text: 'Send Message',
-        color: 'primary',
-        state: ComponentStates.ENABLED,
-        fill: 'solid',
-        type: 'button',
-        token: 'submit',
-      },
-      state: ComponentStates.ENABLED,
-    } as any,
-  },
-};
-
-export const RegistrationForm: Story = {
-  args: {
-    props: {
-      name: 'Create Account',
-      sections: [
-        {
-          name: 'Account Details',
-          order: 1,
-          fields: [
-            {
-              token: 'username',
-              label: 'Username',
-              name: 'username',
-              hint: 'Choose a unique username',
-              placeholder: 'johndoe',
-              type: InputType.TEXT,
-              order: 1,
-              validators: [],
-              errors: {},
-              state: ComponentStates.ENABLED,
-            },
-            {
-              token: 'email',
-              label: 'Email Address',
-              name: 'email',
-              hint: '',
-              placeholder: 'john@example.com',
-              type: InputType.EMAIL,
-              order: 2,
-              validators: [],
-              errors: {},
-              state: ComponentStates.ENABLED,
-            },
-            {
-              token: 'password',
-              label: 'Password',
-              name: 'password',
-              hint: 'At least 8 characters',
-              placeholder: 'Enter password',
-              type: InputType.PASSWORD,
-              order: 3,
-              validators: [],
-              errors: {},
-              state: ComponentStates.ENABLED,
-            },
-          ],
-        },
-      ],
-      actions: {
-        text: 'Create Account',
-        color: 'success',
-        state: ComponentStates.ENABLED,
-        fill: 'solid',
-        type: 'button',
-        token: 'register',
-      },
-      state: ComponentStates.ENABLED,
-    } as any,
-  },
-};
-
-export const ProfileForm: Story = {
-  args: {
-    props: {
-      name: 'Edit Profile',
-      sections: [
-        {
-          name: 'Basic Info',
-          order: 1,
-          fields: [
-            {
-              token: 'firstName',
-              label: 'First Name',
-              name: 'firstName',
-              hint: '',
-              placeholder: 'John',
-              type: InputType.TEXT,
-              order: 1,
-              validators: [],
-              errors: {},
-              state: ComponentStates.ENABLED,
-            },
-            {
-              token: 'lastName',
-              label: 'Last Name',
-              name: 'lastName',
-              hint: '',
-              placeholder: 'Doe',
-              type: InputType.TEXT,
-              order: 2,
-              validators: [],
-              errors: {},
-              state: ComponentStates.ENABLED,
-            },
-            {
-              token: 'birthdate',
-              label: 'Date of Birth',
-              name: 'birthdate',
-              hint: '',
-              placeholder: 'Select date',
-              type: InputType.DATE,
-              order: 3,
-              validators: [],
-              errors: {},
-              state: ComponentStates.ENABLED,
-            },
-          ],
-        },
-        {
-          name: 'Contact',
-          order: 2,
-          fields: [
-            {
-              token: 'phone',
-              label: 'Phone Number',
-              name: 'phone',
-              hint: '',
-              placeholder: '+1 234 567 8900',
-              type: InputType.NUMBER,
-              order: 1,
-              validators: [],
-              errors: {},
-              state: ComponentStates.ENABLED,
-            },
-          ],
-        },
-      ],
-      actions: {
-        text: 'Save Changes',
-        color: 'primary',
-        state: ComponentStates.ENABLED,
-        fill: 'solid',
-        type: 'button',
-        token: 'save',
-      },
-      state: ComponentStates.ENABLED,
-    } as any,
-  },
-};
-
-export const WithSelectFields: Story = {
-  args: {
-    props: {
-      name: 'Preferences',
-      sections: [
-        {
-          name: 'Settings',
-          order: 1,
-          fields: [
-            {
-              token: 'country',
-              label: 'Country',
-              name: 'country',
-              hint: '',
-              placeholder: 'Select your country',
-              type: InputType.SELECT,
-              order: 1,
-              validators: [],
-              options: [
-                { id: 'us', name: 'United States', order: 1 },
-                { id: 'ca', name: 'Canada', order: 2 },
-                { id: 'uk', name: 'United Kingdom', order: 3 },
-                { id: 'de', name: 'Germany', order: 4 },
-                { id: 'fr', name: 'France', order: 5 },
-              ],
-              errors: {},
-              state: ComponentStates.ENABLED,
-            },
-            {
-              token: 'language',
-              label: 'Language',
-              name: 'language',
-              hint: '',
-              placeholder: 'Select language',
-              type: InputType.SELECT,
-              order: 2,
-              validators: [],
-              options: [
-                { id: 'en', name: 'English', order: 1 },
-                { id: 'es', name: 'Spanish', order: 2 },
-                { id: 'fr', name: 'French', order: 3 },
-                { id: 'de', name: 'German', order: 4 },
-              ],
-              errors: {},
-              state: ComponentStates.ENABLED,
-            },
-          ],
-        },
-      ],
-      actions: {
-        text: 'Update Preferences',
-        color: 'primary',
-        state: ComponentStates.ENABLED,
-        fill: 'solid',
-        type: 'button',
-        token: 'update',
-      },
-      state: ComponentStates.ENABLED,
-    } as any,
-  },
-};
-
-export const LoadingState: Story = {
-  args: {
-    props: {
-      name: 'Contact Form',
-      sections: [
-        {
-          name: 'Information',
-          order: 1,
-          fields: [
-            {
-              token: 'name',
-              label: 'Name',
-              name: 'name',
-              hint: '',
-              placeholder: 'Your name',
-              type: InputType.TEXT,
-              order: 1,
-              validators: [],
-              errors: {},
-              state: ComponentStates.DISABLED,
-            },
-          ],
-        },
-      ],
-      actions: {
-        text: 'Submitting...',
-        color: 'primary',
-        state: ComponentStates.WORKING,
-        fill: 'solid',
-        type: 'button',
-        token: 'submit',
-      },
-      state: ComponentStates.WORKING,
-    } as any,
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: 'Form in loading/working state while submitting.',
-      },
-    },
-  },
-};
-
-export const DisabledForm: Story = {
-  args: {
-    props: {
-      name: 'Disabled Form',
-      sections: [
-        {
-          name: 'Fields',
-          order: 1,
-          fields: [
-            {
-              token: 'field1',
-              label: 'Disabled Field',
-              name: 'field1',
-              hint: 'This field is disabled',
-              placeholder: 'Cannot edit',
-              type: InputType.TEXT,
-              order: 1,
-              validators: [],
-              errors: {},
-              state: ComponentStates.DISABLED,
-            },
-          ],
-        },
-      ],
-      actions: {
-        text: 'Submit',
-        color: 'medium',
-        state: ComponentStates.DISABLED,
-        fill: 'solid',
-        type: 'button',
-        token: 'submit',
-      },
-      state: ComponentStates.DISABLED,
-    } as any,
-  },
-};
-
-export const Showcase: Story = {
-  render: () => ({
-    template: `
-      <div style="display: flex; flex-direction: column; gap: 48px; max-width: 500px; margin: 0 auto;">
-        <h3 style="margin: 0; font-family: system-ui;">Dynamic Form Generation</h3>
-        <p style="margin: 0; font-family: system-ui; font-size: 14px; color: #666;">
-          The form component dynamically generates inputs based on configuration.
-        </p>
-
-        <val-form [props]="{
-          name: 'Quick Contact',
-          sections: [
-            {
-              name: 'Your Details',
-              order: 1,
-              fields: [
-                {
-                  token: 'name',
-                  label: 'Name',
-                  name: 'name',
-                  hint: '',
-                  placeholder: 'Enter your name',
-                  type: 0,
-                  order: 1,
-                  validators: [],
-                  errors: {},
-                  state: 'ENABLED'
-                },
-                {
-                  token: 'email',
-                  label: 'Email',
-                  name: 'email',
-                  hint: '',
-                  placeholder: 'your@email.com',
-                  type: 2,
-                  order: 2,
-                  validators: [],
-                  errors: {},
-                  state: 'ENABLED'
-                }
-              ]
-            },
-            {
-              name: 'Message',
-              order: 2,
-              fields: [
-                {
-                  token: 'comment',
-                  label: 'Comment',
-                  name: 'comment',
-                  hint: 'Max 500 characters',
-                  placeholder: 'Write your message...',
-                  type: 4,
-                  order: 1,
-                  validators: [],
-                  errors: {},
-                  state: 'ENABLED'
-                }
-              ]
-            }
-          ],
-          actions: {
-            text: 'Send',
-            color: 'primary',
-            state: 'ENABLED',
-            type: 'SOLID',
-            token: 'send'
-          },
-          state: 'ENABLED'
-        }"></val-form>
-      </div>
-    `,
-  }),
-};

package/src/lib/components/organisms/fun-header/fun-header.component.scss

@@ -1,36 +0,0 @@
-.fun-image-container {
-  margin: 16px 0px;
-  display: flex;
-  justify-content: flex-start;
-
-  @media (min-width: 768px) {
-    justify-content: center;
-  }
-
-  img {
-    width: 7.5rem; // 120px
-
-    @media (min-width: 768px) {
-      width: 11.25rem; // 180px
-    }
-  }
-}
-
-.header-ground {
-  padding: 32px 24px;
-  background-size: cover;
-  background-position: center;
-  background-repeat: no-repeat;
-}
-
-.rounded {
-  border-radius: 0px 0px 32px 32px;
-}
-
-.shadowed {
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-}
-
-.bordered {
-  border: 0.0625rem solid var(--ion-color-medium);
-}