@weni/unnnic-system 3.6.0 → 3.7.1-alpha.0

package/src/stories/Icon.stories.js

@@ -1,6 +1,15 @@
 import UnnnicIcon from '../components/Icon.vue';
 
-const iconsOptions = ['add'];
+const iconsOptions = [
+  'add',
+  'add-1',
+  'warning',
+  'bi:stars',
+  'indicator',
+  'fitness-biceps-1',
+  'close-1',
+  'check-2',
+];
 
 const schemes = [
   'background-solo',
@@ -93,27 +102,27 @@ const schemes = [
 ];
 
 export default {
-  title: 'example/Icon',
+  title: 'Misc/Icon',
   component: UnnnicIcon,
   argTypes: {
-    scheme: { control: { type: 'select', options: schemes } },
+    scheme: { control: { type: 'select' }, options: schemes },
     size: {
       control: {
         type: 'select',
-        options: [
-          'nano',
-          'xs',
-          'sm',
-          'md',
-          'lg',
-          'avatar-lg',
-          'avatar-md',
-          'avatar-sm',
-          'avatar-xs',
-          'avatar-nano',
-        ],
       },
+      options: [
+        'xs',
+        'sm',
+        'md',
+        'lg',
+        'avatar-lg',
+        'avatar-md',
+        'avatar-sm',
+        'avatar-xs',
+        'avatar-nano',
+      ],
     },
+    icon: { control: { type: 'select' }, options: iconsOptions },
   },
 };
 

package/src/stories/Input.stories.js

@@ -7,14 +7,25 @@ export default {
   component: unnnicInput,
   argTypes: {
     label: { control: { type: 'text' } },
-    size: { control: { type: 'select' }, options: ['md', 'sm'] },
-    type: { control: { type: 'select' }, options: ['normal', 'error'] },
+    size: {
+      control: { type: 'select' },
+      options: ['md', 'sm'],
+      defaultValue: {
+        summary: 'md',
+      },
+    },
+    type: {
+      control: { type: 'select' },
+      options: ['normal', 'error'],
+      defaultValue: {
+        summary: 'normal',
+      },
+    },
     nativeType: { control: { type: 'select' }, options: ['text', 'password'] },
     placeholder: { control: { type: 'text' } },
     iconLeft: { control: { type: 'select' }, options: iconList },
     iconRight: { control: { type: 'select' }, options: iconList },
     allowTogglePassword: { control: { type: 'boolean' } },
-    hasCloudyColor: { control: { type: 'select' }, options: [true, false] },
   },
   render: (args) => ({
     components: {
@@ -35,106 +46,72 @@ export default {
       },
     },
     template: `
-      <unnnic-form-element label="Label" message="Helper text">
-        <unnnic-input v-model="value" @icon-right-click="click" v-bind="args" />
-      </unnnic-form-element>
+      <unnnic-input v-model="value" @icon-right-click="click" v-bind="args" />
     `,
   }),
 };
 
-const TemplateError = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-
-  components: {
-    unnnicFormElement,
-    unnnicInput,
-  },
-
-  setup() {
-    return { args };
-  },
-
-  data() {
-    return {
-      value: '',
-    };
-  },
-
-  template: `
-    <unnnic-form-element label="Label" error="Error text">
-      <unnnic-input v-model="value" v-bind="args"/>
-    </unnnic-form-element>
-  `,
-});
-
-const TemplateDisabled = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-
-  components: {
-    unnnicFormElement,
-    unnnicInput,
-  },
-
-  setup() {
-    return { args };
-  },
-
-  data() {
-    return {
-      value: '',
-    };
-  },
-
-  template: `
-    <unnnic-form-element label="Label" message="Helper text" disabled>
-      <unnnic-input v-model="value" v-bind="args"/>
-    </unnnic-form-element>
-  `,
-});
-
 export const Normal = {
   args: {
-    type: 'normal',
+    label: 'Label',
     placeholder: 'Placeholder',
   },
 };
 
 export const NormalSm = {
   args: {
+    label: 'Label',
     size: 'sm',
-    type: 'normal',
     placeholder: 'Placeholder',
   },
 };
 
-export const Error = TemplateError.bind({});
-Error.args = {
-  type: 'error',
-  placeholder: 'Placeholder',
+export const Error = {
+  args: {
+    label: 'Label',
+    placeholder: 'Placeholder',
+    errors: 'Error text',
+  },
 };
 
-export const ErrorSm = TemplateError.bind({});
-ErrorSm.args = {
-  size: 'sm',
-  type: 'error',
-  placeholder: 'Placeholder',
+export const ErrorSm = {
+  args: {
+    label: 'Label',
+    size: 'sm',
+    errors: 'Error text',
+    placeholder: 'Placeholder',
+  },
+};
+
+export const Disabled = {
+  args: {
+    label: 'Label',
+    disabled: true,
+    placeholder: 'Placeholder',
+  },
 };
 
-export const Disabled = TemplateDisabled.bind({});
-Disabled.args = {
-  disabled: true,
-  placeholder: 'Placeholder',
+export const DisabledSm = {
+  args: {
+    label: 'Label',
+    size: 'sm',
+    disabled: true,
+    placeholder: 'Placeholder',
+  },
 };
 
-export const DisabledSm = TemplateDisabled.bind({});
-DisabledSm.args = {
-  size: 'sm',
-  disabled: true,
-  placeholder: 'Placeholder',
+export const DisabledError = {
+  args: {
+    label: 'Label',
+    disabled: true,
+    errors: 'Error text',
+    placeholder: 'Placeholder',
+  },
 };
 
 export const Password = {
   args: {
+    label: 'Label',
     placeholder: 'Password',
     nativeType: 'password',
     allowTogglePassword: true,
@@ -143,6 +120,7 @@ export const Password = {
 
 export const IconLeftAndRight = {
   args: {
+    label: 'Label',
     placeholder: 'Text',
     iconLeft: 'email',
     iconRight: 'search',
@@ -157,3 +135,20 @@ export const Mask = {
     mask: ['###.###.###-##', '##.###.###/####-##'],
   },
 };
+
+export const LimitMaxLength = {
+  args: {
+    label: 'Label',
+    placeholder: 'Text',
+    maxlength: 10,
+    showMaxlengthCounter: true,
+  },
+};
+
+export const WithTooltip = {
+  args: {
+    label: 'Label',
+    placeholder: 'Text',
+    tooltip: 'Tooltip',
+  },
+};

package/src/stories/Label.stories.js

@@ -13,3 +13,10 @@ export const Default = {
     label: 'Label',
   },
 };
+
+export const WithTooltip = {
+  args: {
+    label: 'Label',
+    tooltip: 'Tooltip',
+  },
+};

package/src/stories/ModalDialog.mdx

@@ -6,6 +6,9 @@ import * as ModalDialogStories from './ModalDialog.stories';
 
 # ModalDialog
 
+> **⚠️ DEPRECATED**: This component has been deprecated in favor of the new `Dialog` component. Please use `UnnnicDialog` 
+instead for new implementations. See the [Dialog documentation](?path=/docs/feedback-dialog--docs) for more information.
+
 The ModalDialog was designed to inform the user about a specific task, request information, or involve other tasks.
 
 <Source

package/src/stories/ModalDialog.stories.js

@@ -7,7 +7,7 @@ import iconsList from '../utils/iconList';
 import colorsList from '../utils/colorsList';
 
 export default {
-  title: 'Example/ModalDialog',
+  title: 'Feedback/ModalDialog',
   component: UnnnicModalDialog,
   argTypes: {
     type: {

package/src/stories/Popover.stories.js

@@ -0,0 +1,306 @@
+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>
+    `,
+  }),
+};