@weni/unnnic-system 2.0.0 → 2.0.1

package/src/stories/Introduction.mdx

@@ -0,0 +1,196 @@
+import { Meta } from '@storybook/blocks'
+
+<Meta title="Example/Introduction" />
+
+<style>
+  {`
+    .subheading {
+      --mediumdark: '#999999';
+      font-weight: 700;
+      font-size: 13px;
+      color: #999;
+      letter-spacing: 6px;
+      line-height: 24px;
+      text-transform: uppercase;
+      margin-bottom: 12px;
+      margin-top: 40px;
+    }
+
+    .link-list {
+      display: grid;
+      grid-template-columns: 1fr;
+      grid-template-rows: 1fr 1fr;
+      row-gap: 10px;
+    }
+
+    @media (min-width: 620px) {
+      .link-list {
+        row-gap: 20px;
+        column-gap: 20px;
+        grid-template-columns: 1fr 1fr;
+      }
+    }
+
+    @media all and (-ms-high-contrast:none) {
+    .link-list {
+        display: -ms-grid;
+        -ms-grid-columns: 1fr 1fr;
+        -ms-grid-rows: 1fr 1fr;
+      }
+    }
+
+    .link-item {
+      display: block;
+      padding: 20px;
+      border: 1px solid #00000010;
+      border-radius: 5px;
+      transition: background 150ms ease-out, border 150ms ease-out, transform 150ms ease-out;
+      color: #333333;
+      display: flex;
+      align-items: flex-start;
+    }
+
+    .link-item:hover {
+      border-color: #1EA7FD50;
+      transform: translate3d(0, -3px, 0);
+      box-shadow: rgba(0, 0, 0, 0.08) 0 3px 10px 0;
+    }
+
+    .link-item:active {
+      border-color: #1EA7FD;
+      transform: translate3d(0, 0, 0);
+    }
+
+    .link-item strong {
+      font-weight: 700;
+      display: block;
+      margin-bottom: 2px;
+    }
+
+    .link-item img {
+      height: 40px;
+      width: 40px;
+      margin-right: 15px;
+      flex: none;
+    }
+
+    .link-item span,
+    .link-item p {
+      margin: 0;
+      font-size: 14px;
+      line-height: 20px;
+    }
+
+    .tip {
+      display: inline-block;
+      border-radius: 1em;
+      font-size: 11px;
+      line-height: 12px;
+      font-weight: 700;
+      background: #E7FDD8;
+      color: #66BF3C;
+      padding: 4px 12px;
+      margin-right: 10px;
+      vertical-align: top;
+    }
+
+    .tip-wrapper {
+      font-size: 13px;
+      line-height: 20px;
+      margin-top: 40px;
+      margin-bottom: 40px;
+    }
+
+    .tip-wrapper code {
+      font-size: 12px;
+      display: inline-block;
+    }
+  `}
+</style>
+
+# Welcome to Storybook
+
+Storybook helps you build UI components in isolation from your app's business logic, data, and context.
+That makes it easy to develop hard-to-reach states. Save these UI states as **stories** to revisit during development, testing, or QA.
+
+Browse example stories now by navigating to them in the sidebar.
+View their code in the `stories` directory to learn how they work.
+We recommend building UIs with a [**component-driven**](https://componentdriven.org) process starting with atomic components and ending with pages.
+
+<div className="subheading">Configure</div>
+
+<div className="link-list">
+  <a
+    className="link-item"
+    href="https://storybook.js.org/docs/react/addons/addon-types"
+    target="_blank"
+  >
+    <span>
+      <strong>Presets for popular tools</strong>
+      Easy setup for TypeScript, SCSS and more.
+    </span>
+  </a>
+  <a
+    className="link-item"
+    href="https://storybook.js.org/docs/react/configure/webpack"
+    target="_blank"
+  >
+    <span>
+      <strong>Build configuration</strong>
+      How to customize webpack and Babel
+    </span>
+  </a>
+  <a
+    className="link-item"
+    href="https://storybook.js.org/docs/react/configure/styling-and-css"
+    target="_blank"
+  >
+    <span>
+      <strong>Styling</strong>
+      How to load and configure CSS libraries
+    </span>
+  </a>
+  <a
+    className="link-item"
+    href="https://storybook.js.org/docs/react/get-started/setup#configure-storybook-for-your-stack"
+    target="_blank"
+  >
+    <span>
+      <strong>Data</strong>
+      Providers and mocking for data libraries
+    </span>
+  </a>
+</div>
+
+<div className="subheading">Learn</div>
+
+<div className="link-list">
+  <a className="link-item" href="https://storybook.js.org/docs" target="_blank">
+    <span>
+      <strong>Storybook documentation</strong>
+      Configure, customize, and extend
+    </span>
+  </a>
+  <a className="link-item" href="https://storybook.js.org/tutorials/" target="_blank">
+    <span>
+      <strong>In-depth guides</strong>
+      Best practices from leading teams
+    </span>
+  </a>
+  <a className="link-item" href="https://github.com/storybookjs/storybook" target="_blank">
+    <span>
+      <strong>GitHub project</strong>
+      View the source and add issues
+    </span>
+  </a>
+  <a className="link-item" href="https://discord.gg/storybook" target="_blank">
+    <span>
+      <strong>Discord chat</strong>
+      Chat with maintainers and the community
+    </span>
+  </a>
+</div>
+
+<div className="tip-wrapper">
+  <span className="tip">Tip</span>Edit the Markdown in <code>stories/Introduction.stories.mdx</code>
+</div>

package/src/stories/Label.stories.js

@@ -8,13 +8,8 @@ export default {
   },
 };
 
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { unnnicLabel },
-  template: '<unnnic-label v-bind="$props"/>',
-});
-
-export const Default = Template.bind({});
-Default.args = {
-  label: 'Label',
+export const Default = {
+  args: {
+    label: 'Label',
+  },
 };

package/src/stories/LanguageSelect.stories.js

@@ -5,7 +5,9 @@ export default {
   component: unnnicLanguageSelect,
   argTypes: {
     value: { control: { type: 'select', options: ['pt-br', 'en'] } },
-    position: { control: { type: 'select', options: ['top', 'bottom', 'right', 'left'] } },
+    position: {
+      control: { type: 'select', options: ['top', 'bottom', 'right', 'left'] },
+    },
   },
 };
 

package/src/stories/Modal.stories.js

@@ -6,14 +6,29 @@ export default {
   title: 'Example/Modal',
   component: unnnicModal,
   argTypes: {
-    modalIcon: { control: { type: 'select', options: ['check-circle-1-1', 'alert-circle-1', 'delete-1'] } },
+    modalIcon: {
+      control: {
+        type: 'select',
+        options: ['check-circle-1-1', 'alert-circle-1', 'delete-1'],
+      },
+    },
     text: { control: { type: 'text' } },
     description: { control: { type: 'text' } },
     scheme: {
       control: {
         type: 'select',
-        options: ['feedback-red', 'feedback-green', 'feedback-yellow', 'feedback-blue', 'feedback-grey',
-          'aux-blue', 'aux-purple', 'aux-orange', 'aux-lemon', 'aux-pink'],
+        options: [
+          'feedback-red',
+          'feedback-green',
+          'feedback-yellow',
+          'feedback-blue',
+          'feedback-grey',
+          'aux-blue',
+          'aux-purple',
+          'aux-orange',
+          'aux-lemon',
+          'aux-pink',
+        ],
       },
     },
   },
@@ -22,13 +37,15 @@ export default {
 const Template = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
   components: { unnnicModal, unnnicButton },
-  template: '<unnnic-modal v-bind="$props">Conteúdo do modal<br>Conteúdo do modal<br>Conteúdo do modal<br>Conteúdo do modal<br>Conteúdo do modal<br>Conteúdo do modal<br>Conteúdo do modalConteúdo do modal<br></unnnic-modal>',
+  template:
+    '<unnnic-modal v-bind="$props">Conteúdo do modal<br>Conteúdo do modal<br>Conteúdo do modal<br>Conteúdo do modal<br>Conteúdo do modal<br>Conteúdo do modal<br>Conteúdo do modalConteúdo do modal<br></unnnic-modal>',
 });
 
 const ModalTemplate = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
   components: { unnnicModal, unnnicButton },
-  template: '<unnnicModal v-bind="$props"><unnnic-button slot="options"> Button 1 </unnnic-button> <unnnic-button slot="options"> Button 2 </unnnic-button> </div> </unnnic-modal>',
+  template:
+    '<unnnicModal v-bind="$props"> <template #message><span>Modal with Buttons</span></template><template #options><unnnic-button> Button 1 </unnnic-button> <unnnic-button > Button 2 </unnnic-button></template></unnnic-modal>',
 });
 
 export const Normal = Template.bind({});

package/src/stories/ModalUpload.stories.js

@@ -1,29 +1,25 @@
+import i18n from '../utils/plugins/i18n';
 import unnnicModalUpload from '../components/ModalUpload/ModalUpload.vue';
 
+import { setup } from '@storybook/vue3';
+
+setup((app) => {
+  app.use(i18n);
+});
+
 export default {
   title: 'example/ModalUpload',
   component: unnnicModalUpload,
   argTypes: {},
 };
 
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-
-  components: {
-    unnnicModalUpload,
-  },
-
-  data() {
-    return {};
-  },
-
-  template: `
-    <div>
-      <unnnic-modal-upload v-bind="$props" />
-    </div>
-  `,
-});
-
-export const Default = Template.bind({});
-
-Default.args = {};
+export const Default = {
+  render: (args) => ({
+    components: { unnnicModalUpload },
+    setup() {
+      return { args, files: [] };
+    },
+    template: '<unnnic-modal-upload v-bind="args" v-model="files" />',
+  }),
+  args: {},
+};

package/src/stories/MoodRating.stories.js

@@ -3,7 +3,9 @@ import unnnicMoodRating from '../components/MoodRating/MoodRating.vue';
 export default {
   title: 'Rating/MoodRating',
   component: unnnicMoodRating,
-  argTypes: {},
+  argTypes: {
+    'on-update:model-value': { action: '@update:model-value' },
+  },
 };
 
 const Template = (args, { argTypes }) => ({
@@ -21,9 +23,8 @@ const Template = (args, { argTypes }) => ({
 
   template: `
     <div>
-      <!--<pre>v-model: {{ mood }}</pre>-->
-      <unnnic-mood-rating v-bind="$props" v-model="mood">
-      </unnnic-mood-rating>
+      <pre>v-model: {{ mood }}</pre>
+      <unnnic-mood-rating v-bind="$props" v-model="mood" />
     </div>
   `,
 

package/src/stories/MultiSelect.stories.js

@@ -47,7 +47,8 @@ const Template = (args, { argTypes }) => ({
   },
 
   // eslint-disable-next-line no-multi-str
-  template: '<div><unnnicMultiSelect v-bind="$props" v-model="groups"></unnnicMultiSelect></div>',
+  template:
+    '<div><unnnicMultiSelect v-bind="$props" v-model="groups"></unnnicMultiSelect></div>',
 });
 
 export const Medium = Template.bind({});

package/src/stories/Pagination.stories.js

@@ -1,9 +1,20 @@
 import unnnicPagination from '../components/Pagination/Pagination.vue';
+import { ref } from 'vue';
 
 export default {
   title: 'example/Pagination',
   component: unnnicPagination,
-  argTypes: {},
+  argTypes: {
+    max: {
+      control: {
+        type: 'number',
+        min: 1,
+      },
+    },
+  },
+  args: {
+    max: 10,
+  },
 };
 
 const Template = (args, { argTypes }) => ({
@@ -13,15 +24,18 @@ const Template = (args, { argTypes }) => ({
     unnnicPagination,
   },
 
-  data() {
-    return {
-      page: 1,
+  setup() {
+    let page = ref(1);
+    const onChange = (value) => {
+      page.value = value;
     };
+
+    return { page, onChange };
   },
 
   template: `
     <div>
-      <unnnic-pagination v-bind="$props" v-model="page" :max="10" :show="5"/>
+      <unnnic-pagination v-bind="$props" :value="page" @input="onChange"/>
     </div>
   `,
 });

package/src/stories/ProgressBar.stories.js

@@ -7,8 +7,8 @@ export default {
     type: {
       control: {
         type: 'select',
-        options: ['primary', 'secondary'],
       },
+      options: ['primary', 'secondary'],
     },
   },
 };

package/src/stories/Radio.stories.js

@@ -4,6 +4,7 @@ export default {
   title: 'Form/Radio',
   component: unnnicRadio,
   argTypes: {
+    'on-update:model-value': { action: '@update:model-value' },
     value: { control: { type: 'text' } },
     disabled: { control: { type: 'boolean' } },
     size: { control: { type: 'select', options: ['md', 'sm'] } },
@@ -22,17 +23,18 @@ const Template = (args, { argTypes }) => ({
   },
   template: `
     <div>
-      Inside value: {{ insideValue }}
+      v-model: {{ insideValue }}
+      <br>
 
-      <unnnic-radio v-model="insideValue" value="option 1" v-bind="$props">
+      <unnnic-radio v-bind="$props" v-model="insideValue" value="option 1">
         Option 1
       </unnnic-radio>
 
-      <unnnic-radio v-model="insideValue" value="option 2" v-bind="$props">
+      <unnnic-radio v-bind="$props" v-model="insideValue" value="option 2">
         Option 2
       </unnnic-radio>
 
-      <unnnic-radio v-model="insideValue" value="option 3" v-bind="$props">
+      <unnnic-radio v-bind="$props" v-model="insideValue" value="option 3">
         Option 3
       </unnnic-radio>
     </div>

package/src/stories/SelectSmart.mdx

@@ -0,0 +1,138 @@
+import { Meta, Source, Story } from '@storybook/blocks';
+
+import * as SelectSmartStories from './SelectSmart.stories';
+
+<Meta of={SelectSmartStories}/>
+
+# SelectSmart
+
+SelectSmart is designed to solve common problems related to option selection. 
+It combines three elements: Select, Autocomplete, and AutocompleteSelect, which 
+originally didn't follow a consistent pattern and had some bugs. With SelectSmart, 
+these components have been unified and improved and it also brings a new design.
+
+> It is a _self-closing_ component, which means it does not support child elements.
+
+> Available in small and medium versions, which can be toggled through the 
+`size` property, accepting the strings "sm" or "md".
+
+<Source
+  language='html'
+  dark
+  code={`
+    <UnnnicSelectSmart v-model="exampleValue" :options="exampleArray" />
+  `}
+/>
+
+---
+
+#### **IMPORTANT:**
+
+To ensure proper functioning of the component, it is fundamental to provide the `v-model` 
+(or `value` and `@input`), even if it is empty (`[]`), since it is through this property 
+that the selected options are controlled.
+
+The other one required property is `options`, which requires an array of objects in the following format:
+
+| Key       | Description                                                                                                                            | Type   |
+| ----------- | ------------------------------------------------------------------------------------------------------------------------------------ | ------ |
+| value       | **Required.**<br/>Sets the option value. If it is empty, the _label_ of this object will be used as the _placeholder_ of the SelectSmart. | string |
+| label       | **Required.**<br/>Provides user-friendly text that represents the option to the user.                                                | string |
+| description | _Not required._<br/>Provides an additional description for the option.                                                               | string |
+
+<Source
+  language='json'
+  dark
+  code={`
+    [
+      {
+        "value": "",
+        "label": "Select some option"  <---- Since the value of this object is empty, this will be the placeholder
+      },
+      {
+        "value": "1",
+        "label": "Option 1",
+      },
+      {
+        "value": "2",
+        "label": "Option 2",
+        "description": "This is the first option"
+      },
+    ]
+  `}
+/>
+
+> The options will be presented in alphabetical order, following the value of each `label`, 
+regardless of the sequence in which the objects are supplied to the `:options` property. 
+However, if the `orderedByIndex` property is included, the options will be sorted 
+according to the arrangement given to `:options`. 
+
+---
+<br />
+
+## Default
+
+Allows you to choose from a list.
+
+<Story of={SelectSmartStories.Default} />
+
+## Default option selected
+
+For the first option to be selected by default, it is essential that 
+there is no object with its `value` field empty.
+
+If your intention is to set a specific option as the default, you can 
+accomplish this using the `value` (or `v-model`) property. Make sure that this 
+value is passed as an array, and that the object is structured according to the 
+pattern of the other options.
+
+<Story of={SelectSmartStories.FirstSelected} />
+
+## Ordered by index
+
+If the `orderedByIndex` property is included, the options will 
+be ordered according to the arrangement given to `:options`.
+
+<Story of={SelectSmartStories.OrderedByIndex} />
+
+## Disabled
+
+SelectSmart will respond to the value passed to the `disabled` property, 
+becoming disabled when set to _true_ and remaining enabled when set to _false_.
+
+<Story of={SelectSmartStories.Disabled} />
+
+## With descriptions
+
+If you want a more detailed description for your options, you can include the 
+`description` key inside the object corresponding to each option.
+
+<Story of={SelectSmartStories.WithDescriptions} />
+
+## Autocomplete
+
+To activate the search functionality, just include the `autocomplete` property. 
+The search takes place based on the text of the `label`, without distinction 
+between uppercase and lowercase, spaces and accents.
+
+If you want the search bar to be emptied when focusing on the component, use 
+the `autocompleteClearOnFocus` property.
+
+Furthermore, it is possible to incorporate the magnifying glass icon on the side (left) of 
+the search bar by using the `autocompleteIconLeft` property.
+
+<Story of={SelectSmartStories.Autocomplete} />
+
+## Multiple
+
+To use the component version that allows the selection of 
+several options, just pass the `multiple` property.
+
+You also have the freedom to customize the message that signals 
+when no option has been selected, through the `multipleWithoutSelectsMessage` property.
+
+Typically, components involving multiple options offer a considerable range 
+of choices. So, in order to improve the user experience, the `multiple` option 
+automatically activates the `autocomplete` feature, it cannot be deactivated.
+
+<Story of={SelectSmartStories.Multiple} />