Merge pull request #454 from aziontech/storybook

fix: input space between label, input and descriptions

Author: robsongajunior

apps/icons-gallery/.gitignore

@@ -0,0 +1,34 @@
+import vue from '@vitejs/plugin-vue';
+
+/** @type {import('@storybook/vue3-vite').StorybookConfig} */
+const config = {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: [
+    '@storybook/addon-links',
+    // '@storybook/addon-essentials',
+    // '@storybook/addon-interactions',
+    '@storybook/addon-docs',
+
+    '@storybook/addon-links',
+    '@storybook/addon-docs',
+    // '@chromatic-com/storybook',
+    '@storybook/addon-themes'
+  ],
+  framework: {
+    name: '@storybook/vue3-vite',
+    options: {}
+  },
+  docs: {
+    autodocs: 'tag'
+  },
+  viteFinal: async (config) => {
+    // Add Vue plugin to handle .vue SFC files from @aziontech/webkit
+    config.plugins = config.plugins || [];
+    config.plugins.push(vue());
+    
+    return config;
+  }
+};
+
+export default config;
+

apps/storybook/.storybook/main.js

@@ -0,0 +1,80 @@
+import { setup } from '@storybook/vue3';
+import PrimeVue from 'primevue/config';
+import Tooltip from 'primevue/tooltip';
+
+import '../src/styles/preview.css';
+import 'primeflex/primeflex.css'
+import '@aziontech/icons'
+import 'azion-theme'
+
+
+import { withThemeByClassName } from '@storybook/addon-themes'
+
+setup((app) => {
+  app.use(PrimeVue, {
+    ripple: false
+  });
+ 
+  app.directive('tooltip', Tooltip);
+});
+
+export const parameters = {
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/i
+    },
+    expanded: true
+  },
+  docs: {
+    source: {
+      type: 'code'
+    },
+    theme: {
+      base: 'dark',
+      colorPrimary: '#F3652B',
+      colorSecondary: '#585C6D',
+      appBg: '#0a0a0a',
+      appContentBg: '#0a0a0a',
+      appBorderColor: '#404040',
+      textColor: '#FFFFFF',
+      textInverseColor: '#0a0a0a',
+      barTextColor: '#999999',
+      barSelectedColor: '#F3652B',
+      barBg: '#0A0A0A',
+      inputBg: '#0A0A0A',
+      inputBorder: '#404040',
+      inputTextColor: '#FFFFFF',
+      inputBorderRadius: 4
+    }
+  },
+  backgrounds: {
+    default: 'azion azion-dark',
+    values: [
+      {
+        name: 'azion-dark',
+        value: '#0a0a0a'
+      },
+      {
+        name: 'azion-light',
+        value: '#ffffff'
+      }
+    ]
+  },
+  options: {
+    storySort: {
+      method: 'alphabetical',
+      order: ['Introduction', 'Core', 'Components']
+    }
+  }
+};
+
+export const decorators = [
+  withThemeByClassName({
+    themes: {
+      light: 'azion azion-light',
+      dark: 'azion azion-dark',
+    },
+    defaultTheme: 'dark',
+  })
+]

apps/storybook/.storybook/preview.js

@@ -0,0 +1,190 @@
+# @aziontech/webkit Storybook
+
+This is the Storybook documentation application for the `@aziontech/webkit` component library. It provides interactive documentation and development environment for all webkit components.
+
+## Technology Stack
+
+- **Storybook 8.x** - Component documentation tool
+- **Vue 3.5.x** - Frontend framework
+- **Vite 6.x** - Build tool
+- **PrimeVue 3.47.2** - UI component library
+- **PrimeFlex 3.3.1** - CSS utility library
+- **Tailwind CSS 3.4.x** - Utility-first CSS
+- **azion-theme 1.18.3** - Azion custom theming
+- **vee-validate 4.15.x** - Form validation
+
+## Getting Started
+
+### Prerequisites
+
+Make sure you have the following installed:
+- Node.js 18.x or higher
+- pnpm 10.x or higher
+
+### Installation
+
+From the root of the monorepo:
+
+```bash
+pnpm install
+```
+
+### Running Storybook
+
+To start the Storybook development server:
+
+```bash
+# From the root
+pnpm storybook:dev
+
+# Or from this directory
+pnpm dev
+```
+
+The Storybook will be available at `http://localhost:6006`.
+
+### Building Storybook
+
+To build a static version of the Storybook:
+
+```bash
+# From the root
+pnpm storybook:build
+
+# Or from this directory
+pnpm build
+```
+
+The static files will be generated in the `dist` directory.
+
+### Previewing Built Storybook
+
+To preview the built Storybook:
+
+```bash
+pnpm preview
+```
+
+## Project Structure
+
+```
+apps/storybook/
+├── .storybook/
+│   ├── main.js              # Main Storybook configuration
+│   └── preview.js           # Global decorators and parameters
+├── src/
+│   ├── stories/
+│   │   ├── core/
+│   │   │   ├── form/        # Form component stories
+│   │   │   │   ├── FieldText.stories.js
+│   │   │   │   ├── FieldDropdown.stories.js
+│   │   │   │   └── ...      # Other form field stories
+│   │   │   └── SelectorBlock.stories.js
+│   │   └── components/
+│   │       └── AzionSystemStatus.stories.js
+│   └── styles/
+│       └── preview.css      # Global styles
+├── package.json
+├── tailwind.config.js
+├── postcss.config.js
+└── README.md
+```
+
+## Component Categories
+
+### Form Components
+
+All form components are located under `Core/Form/` in the Storybook sidebar:
+
+- FieldText - Basic text input
+- FieldTextArea - Multi-line text input
+- FieldDropdown - Select dropdown
+- FieldDropdownIcon - Dropdown with icons
+- FieldDropdownLazyLoader - Lazy-loading dropdown
+- FieldDropdownLazyLoaderDynamic - Dynamic lazy dropdown
+- FieldDropdownLazyLoaderWithFilter - Lazy dropdown with filter
+- FieldDropdownMultiSelectLazyLoader - Multi-select lazy dropdown
+- FieldCheckboxBlock - Checkbox with label
+- FieldRadioBlock - Radio button with label
+- FieldSwitch - Toggle switch
+- FieldSwitchBlock - Switch with label block
+- FieldGroupCheckbox - Checkbox group
+- FieldGroupRadio - Radio button group
+- FieldGroupSwitch - Switch group
+- FieldMultiSelect - Multi-select dropdown
+- FieldNumber - Number input
+- FieldPhoneNumber - Phone number input
+- FieldPhoneNumberCountry - Phone with country selector
+- FieldAutoComplete - Autocomplete input
+- FieldPickList - Pick list component
+- FieldInputGroup - Input with addons
+- FieldTextIcon - Text input with icon
+- FieldTextPassword - Password input
+- FieldTextPrivacy - Privacy-sensitive input
+- Label - Form label component
+
+### Core Components
+
+- SelectorBlock - Selection block component
+
+### UI Components
+
+- AzionSystemStatus - System status indicator
+
+## Writing Stories
+
+Stories are written using the Component Story Format (CSF). Here's an example:
+
+```javascript
+import FieldText from '@aziontech/webkit/field-text';
+
+export default {
+  title: 'Core/Form/FieldText',
+  component: FieldText,
+  tags: ['autodocs'],
+  argTypes: {
+    name: { control: 'text' },
+    label: { control: 'text' },
+    disabled: { control: 'boolean' }
+  }
+};
+
+export const Default = {
+  args: {
+    name: 'field-text',
+    label: 'Text Field',
+    placeholder: 'Enter text...'
+  }
+};
+```
+
+## Adding New Stories
+
+1. Create a new file in the appropriate directory under `src/stories/`
+2. Name the file following the pattern: `ComponentName.stories.js`
+3. Import the component from `@aziontech/webkit`
+4. Define the default export with title, component, and argTypes
+5. Export named story variants
+
+## Testing Components
+
+Storybook provides interactive controls for testing different prop combinations. Use the Controls panel to modify props in real-time.
+
+## Documentation
+
+Each component has auto-generated documentation (via `autodocs` tag) that shows:
+- Component description
+- Available props and their types
+- Default values
+- Usage examples
+
+## Related Documentation
+
+- [Storybook Documentation](https://storybook.js.org/docs)
+- [Vue 3 Documentation](https://vuejs.org/)
+- [PrimeVue Documentation](https://primevue.org/)
+- [VeeValidate Documentation](https://vee-validate.logaretm.com/)
+
+## License
+
+MIT