@weni/unnnic-system 3.7.1-alpha.2 → 3.7.1

package/src/stories/Popover.stories.js

@@ -1,306 +0,0 @@
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from '../components/ui/popover';
-import UnnnicButton from '../components/Button/Button.vue';
-import UnnnicInput from '../components/Input/Input.vue';
-import UnnnicLabel from '../components/Label/Label.vue';
-
-export default {
-  title: 'Misc/Popover',
-  component: Popover,
-  tags: ['autodocs'],
-  parameters: {
-    docs: {
-      description: {
-        component: `A popover component that displays rich content in a portal, floating on top of other content.
-          <br/>
-          It supports three sizes (small, medium, large) and optional footer slot for action buttons, for example.
-          <br/>
-          API reference: https://www.reka-ui.com/docs/components/popover
-          `,
-      },
-    },
-  },
-  argTypes: {
-    size: {
-      control: { type: 'select' },
-      options: ['small', 'medium', 'large'],
-      description: 'The size of the popover',
-    },
-    side: {
-      control: { type: 'select' },
-      options: ['top', 'right', 'bottom', 'left'],
-      description: 'The preferred side of the trigger to render against',
-    },
-    align: {
-      control: { type: 'select' },
-      options: ['start', 'center', 'end'],
-      description: 'The preferred alignment against the trigger',
-    },
-  },
-  args: {
-    size: 'medium',
-    side: 'bottom',
-    align: 'center',
-  },
-};
-
-export const Default = {
-  render: (args) => ({
-    components: { Popover, PopoverContent, PopoverTrigger, UnnnicButton },
-    setup() {
-      return { args };
-    },
-    template: `
-      <div style="display: flex; justify-content: center; align-items: center; min-height: 300px;">
-        <Popover>
-          <PopoverTrigger>
-            <UnnnicButton text="Open Popover" />
-          </PopoverTrigger>
-          <PopoverContent v-bind="args">
-            <p style="margin: 0;">This is a simple popover with some content inside.</p>
-          </PopoverContent>
-        </Popover>
-      </div>
-    `,
-  }),
-};
-
-export const WithFooter = {
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Popover with action buttons in the footer using the `#footer` slot.',
-      },
-    },
-  },
-  render: (args) => ({
-    components: { Popover, PopoverContent, PopoverTrigger, UnnnicButton },
-    setup() {
-      return { args };
-    },
-    template: `
-      <div style="display: flex; justify-content: center; align-items: center; min-height: 300px;">
-        <Popover>
-          <PopoverTrigger>
-            <UnnnicButton text="Open Popover" />
-          </PopoverTrigger>
-          <PopoverContent v-bind="args">
-            <p style="margin: 0;">This popover has a footer with action buttons.</p>
-            <template #footer>
-              <UnnnicButton text="Cancel" type="tertiary" />
-              <UnnnicButton text="Save" type="primary" />
-            </template>
-          </PopoverContent>
-        </Popover>
-      </div>
-    `,
-  }),
-};
-
-export const WithForm = {
-  parameters: {
-    docs: {
-      description: {
-        story: 'Popover containing a form with inputs and footer actions.',
-      },
-    },
-  },
-  render: (args) => ({
-    components: {
-      Popover,
-      PopoverContent,
-      PopoverTrigger,
-      UnnnicButton,
-      UnnnicInput,
-      UnnnicLabel,
-    },
-    setup() {
-      return { args };
-    },
-    template: `
-      <div style="display: flex; justify-content: center; align-items: center; min-height: 400px;">
-        <Popover>
-          <PopoverTrigger>
-            <UnnnicButton text="Edit Profile" iconLeft="edit" />
-          </PopoverTrigger>
-          <PopoverContent v-bind="args">
-            <h3 style="margin: 0 0 16px 0; font-size: 16px; font-weight: 700;">Edit Profile</h3>
-            <form>
-              <UnnnicLabel label="Name" />
-              <UnnnicInput placeholder="Enter your name" />
-              <br />
-              <UnnnicLabel label="Email" />
-              <UnnnicInput placeholder="Enter your email" type="email" />
-            </form>
-            <template #footer>
-              <UnnnicButton text="Cancel" type="tertiary" />
-              <UnnnicButton text="Save" type="primary" />
-            </template>
-          </PopoverContent>
-        </Popover>
-      </div>
-    `,
-  }),
-};
-
-export const Sizes = {
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'The popover comes in three sizes: small (240px), medium (320px), and large (400px).',
-      },
-    },
-  },
-  render: (args) => ({
-    components: { Popover, PopoverContent, PopoverTrigger, UnnnicButton },
-    setup() {
-      return { args };
-    },
-    template: `
-      <div style="display: flex; justify-content: space-around; align-items: center; min-height: 400px; gap: 32px;">
-        <Popover>
-          <PopoverTrigger>
-            <UnnnicButton text="Small" />
-          </PopoverTrigger>
-          <PopoverContent size="small">
-            <p style="margin: 0;">Small popover (240px)</p>
-          </PopoverContent>
-        </Popover>
-
-        <Popover>
-          <PopoverTrigger>
-            <UnnnicButton text="Medium" />
-          </PopoverTrigger>
-          <PopoverContent size="medium">
-            <p style="margin: 0;">Medium popover (320px)</p>
-          </PopoverContent>
-        </Popover>
-
-        <Popover>
-          <PopoverTrigger>
-            <UnnnicButton text="Large" />
-          </PopoverTrigger>
-          <PopoverContent size="large">
-            <p style="margin: 0;">Large popover (400px)</p>
-          </PopoverContent>
-        </Popover>
-      </div>
-    `,
-  }),
-};
-
-export const Placements = {
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'The popover can be positioned on any side of the trigger: top, bottom, left, or right.',
-      },
-    },
-  },
-  render: (args) => ({
-    components: { Popover, PopoverContent, PopoverTrigger, UnnnicButton },
-    setup() {
-      return { args };
-    },
-    template: `
-      <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; padding: 100px;">
-        <Popover>
-          <PopoverTrigger>
-            <UnnnicButton text="Top" style="width: 100%;" />
-          </PopoverTrigger>
-          <PopoverContent side="top" align="center">
-            <p style="margin: 0;">Popover on top</p>
-          </PopoverContent>
-        </Popover>
-
-        <Popover>
-          <PopoverTrigger>
-            <UnnnicButton text="Bottom" style="width: 100%;" />
-          </PopoverTrigger>
-          <PopoverContent side="bottom" align="center">
-            <p style="margin: 0;">Popover on bottom</p>
-          </PopoverContent>
-        </Popover>
-
-        <Popover>
-          <PopoverTrigger>
-            <UnnnicButton text="Right" style="width: 100%;" />
-          </PopoverTrigger>
-          <PopoverContent side="right" align="center">
-            <p style="margin: 0;">Popover on right</p>
-          </PopoverContent>
-        </Popover>
-
-        <Popover>
-          <PopoverTrigger>
-            <UnnnicButton text="Left" style="width: 100%;" />
-          </PopoverTrigger>
-          <PopoverContent side="left" align="center">
-            <p style="margin: 0;">Popover on left</p>
-          </PopoverContent>
-        </Popover>
-      </div>
-    `,
-  }),
-};
-
-export const RichContent = {
-  args: {
-    size: 'large',
-  },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Example of a popover with rich, structured content and footer actions.',
-      },
-    },
-  },
-  render: (args) => ({
-    components: { Popover, PopoverContent, PopoverTrigger, UnnnicButton },
-    setup() {
-      return { args };
-    },
-    template: `
-      <div style="display: flex; justify-content: center; align-items: center; min-height: 400px;">
-        <Popover>
-          <PopoverTrigger>
-            <UnnnicButton text="Show Details" iconLeft="info" />
-          </PopoverTrigger>
-          <PopoverContent v-bind="args">
-            <div>
-              <h3 style="margin: 0 0 8px 0; font-size: 16px; font-weight: 700;">User Information</h3>
-              <div style="display: flex; flex-direction: column; gap: 12px;">
-                <div style="display: flex; gap: 8px;">
-                  <span style="font-weight: 600;">Name:</span>
-                  <span>John Doe</span>
-                </div>
-                <div style="display: flex; gap: 8px;">
-                  <span style="font-weight: 600;">Email:</span>
-                  <span>john.doe@example.com</span>
-                </div>
-                <div style="display: flex; gap: 8px;">
-                  <span style="font-weight: 600;">Role:</span>
-                  <span>Administrator</span>
-                </div>
-                <div style="display: flex; gap: 8px;">
-                  <span style="font-weight: 600;">Status:</span>
-                  <span style="color: #4CAF50;">Active</span>
-                </div>
-              </div>
-            </div>
-            <template #footer>
-              <UnnnicButton text="View Profile" type="primary" />
-            </template>
-          </PopoverContent>
-        </Popover>
-      </div>
-    `,
-  }),
-};

package/src/stories/RadioGroup.stories.js

@@ -1,144 +0,0 @@
-import { action } from '@storybook/addon-actions';
-import UnnnicRadioGroup from '../components/RadioGroup/RadioGroup.vue';
-import UnnnicRadio from '../components/Radio/Radio.vue';
-import { ref } from 'vue';
-
-export default {
-  title: 'Form/RadioGroup',
-  component: UnnnicRadioGroup,
-  tags: ['autodocs'],
-  parameters: {
-    docs: {
-      description: {
-        component: `Fundamental in forms, used when we present a list of two or more mutually 
-        exclusive options, and the user needs to choose exactly one of them. When you click on 
-        an unselected radio button, it will automatically deselect any other buttons that were 
-        previously selected in the list.
-          `,
-      },
-    },
-  },
-  argTypes: {
-    label: { control: { type: 'text' } },
-    labelTooltip: { control: { type: 'text' } },
-    labelUseHtmlTooltip: { control: 'boolean' },
-    modelValue: { control: { type: ['string', 'number'] } },
-    name: { control: { type: 'text' } },
-    state: { control: 'select', options: ['horizontal', 'vertical'] },
-    helper: { control: { type: 'text' } },
-  },
-};
-
-export const Default = {
-  args: {
-    label: 'Radio Group 1',
-    helper: 'Helper text',
-  },
-
-  render: (args) => ({
-    components: {
-      UnnnicRadioGroup,
-      UnnnicRadio,
-    },
-
-    setup() {
-      const modelValue = ref('option 1');
-
-      const updateModelValue = (value) => {
-        action('update:modelValue')(value);
-        modelValue.value = value;
-      };
-
-      return { args, modelValue, updateModelValue };
-    },
-
-    template: `
-      <section>
-        <pre>v-model: {{ modelValue }}</pre>
-
-        <UnnnicRadioGroup v-bind="args" :modelValue="modelValue" @update:modelValue="updateModelValue">
-          <UnnnicRadio value="option 1">
-            Option 1
-          </UnnnicRadio>
-
-          <UnnnicRadio value="option 2">
-            Option 2
-          </UnnnicRadio>
-
-          <UnnnicRadio value="option 3">
-            Option 3
-          </UnnnicRadio>
-        </UnnnicRadioGroup>
-      </section>
-    `,
-  }),
-};
-
-export const Horizontal = {
-  args: {
-    state: 'horizontal',
-    label: 'Label',
-    name: 'Radio Group 1',
-    helper: 'Helper text',
-  },
-
-  render: (args) => ({
-    components: {
-      UnnnicRadioGroup,
-      UnnnicRadio,
-    },
-    setup() {
-      return { args };
-    },
-    template: `
-      <UnnnicRadioGroup v-bind="args">
-        <UnnnicRadio value="option 1">
-            Option 1
-        </UnnnicRadio>
-
-        <UnnnicRadio value="option 2">
-            Option 2
-        </UnnnicRadio>
-
-        <UnnnicRadio value="option 3">
-            Option 3
-        </UnnnicRadio>
-      </UnnnicRadioGroup>
-    `,
-  }),
-};
-
-export const Vertical = {
-  args: {
-    state: 'vertical',
-    label: 'Label',
-    labelTooltip: 'Tooltip',
-    name: 'Radio Group 2',
-    helper: 'Helper text',
-  },
-
-  render: (args) => ({
-    components: {
-      UnnnicRadioGroup,
-      UnnnicRadio,
-    },
-    setup() {
-      return { args };
-    },
-    template: `
-      <UnnnicRadioGroup v-bind="args">
-        <UnnnicRadio value="option 1">
-            Option 1
-        </UnnnicRadio>
-
-        <UnnnicRadio value="option 2">
-            Option 2
-        </UnnnicRadio>
-
-        <UnnnicRadio value="option 3">
-            Option 3
-        </UnnnicRadio>
-      </UnnnicRadioGroup>
-    `,
-  }),
-};

package/src/stories/Select.stories.js

@@ -1,158 +0,0 @@
-import UnnnicSelect from '../components/Select/index.vue';
-
-const options = [
-  { label: 'Option 1', value: 'option1', altValue: 'alt_value_option1' },
-  { label: 'Option 2', value: 'option2', altValue: 'alt_value_option2' },
-  { label: 'Option 3', value: 'option3', altValue: 'alt_value_option3' },
-  { label: 'Option 4', value: 'option4', altValue: 'alt_value_option4' },
-  { label: 'Option 5', value: 'option5', altValue: 'alt_value_option5' },
-  { label: 'Option 6', value: 'option6', altValue: 'alt_value_option6' },
-  { label: 'Option 7', value: 'option7', altValue: 'alt_value_option7' },
-  { label: 'Option 8', value: 'option8', altValue: 'alt_value_option8' },
-  { label: 'Option 9', value: 'option9', altValue: 'alt_value_option9' },
-  { label: 'Option 10', value: 'option10', disabled: true },
-];
-
-export default {
-  title: 'Form/Select',
-  component: UnnnicSelect,
-  tags: ['autodocs'],
-  parameters: {
-    docs: {
-      description: {
-        component:
-          'Select is designed to solve common problems related to option selection.',
-      },
-    },
-  },
-  argTypes: {
-    options: {
-      description:
-        'List of items to be displayed in the options. If an item has a `disabled` key set to `true`, that item will be disabled. By default, the component looks for the `label` and `value` keys to display and update the model, but these are not required if you wish to customize them using the `itemLabel` and `itemValue` props, respectively.',
-    },
-    placeholder: {
-      description: 'Text to be displayed in the placeholder.',
-    },
-    label: {
-      description: 'Text to be displayed in the label.',
-    },
-    modelValue: {
-      description:
-        'Model variable. Its type will always match the return type of the key specified by `itemValue`, or the entire options object when `returnObject` prop is set to `true`.',
-    },
-    returnObject: {
-      description:
-        'Prop to indicate that the full option object should be returned in the v-model.',
-    },
-    itemLabel: {
-      description:
-        'Field of the option item that should be used to render the option label.',
-    },
-    itemValue: {
-      description:
-        'Field of the option item that should be used to return value to v-model.',
-    },
-    type: {
-      description: 'Select state type',
-    },
-    errors: {
-      description:
-        "Error message or messages. When it's an array, the messages will be separated by commas.",
-    },
-    message: {
-      description: 'Help or hint message.',
-    },
-    size: {
-      description: 'Select size',
-    },
-    optionsLines: {
-      description:
-        'Number of options to display at most; if exceeded, scrolling will be enabled.',
-    },
-    enableSearch: {
-      description:
-        'If true, enables a search field displayed inside the options popover. The `update:search` event is emitted on each input.',
-    },
-    search: {
-      description: 'Search value.',
-    },
-    locale: {
-      description: 'Locale for i18n translations.',
-    },
-    disabled: {
-      description: 'Disable the select.',
-    },
-  },
-  render: (args) => ({
-    components: { UnnnicSelect },
-    setup() {
-      const handleSearch = (value) => {
-        args.search = value;
-      };
-      return { args, handleSearch };
-    },
-    data() {
-      return {
-        exampleValue: null,
-      };
-    },
-    template: `
-      <p>modelValue: {{ exampleValue }}</p>
-      <unnnic-select v-model="exampleValue" v-bind="args" @update:search="handleSearch" />
-    `,
-  }),
-};
-
-export const Default = {
-  args: {
-    placeholder: 'Placeholder',
-    label: 'Label',
-    options,
-  },
-};
-
-export const ReturnObject = {
-  args: {
-    returnObject: true,
-    placeholder: 'Placeholder',
-    label: 'Label',
-    options,
-  },
-};
-
-export const AlternativeValueKey = {
-  args: {
-    itemValue: 'altValue',
-    placeholder: 'Placeholder',
-    label: 'Label',
-    options,
-  },
-};
-
-export const AlternativeValueLabel = {
-  args: {
-    itemLabel: 'altValue',
-    placeholder: 'Placeholder',
-    label: 'Label',
-    options,
-  },
-};
-
-export const Disabled = {
-  args: {
-    placeholder: 'Placeholder',
-    label: 'Label',
-    options,
-    disabled: true,
-  },
-};
-
-export const WithSearch = {
-  args: {
-    placeholder: 'Placeholder',
-    label: 'Label',
-    options,
-    enableSearch: true,
-    search: '',
-  },
-};