@weni/unnnic-system 3.12.3-alpha.4 → 3.12.3

package/src/stories/LayerManager.stories.js

@@ -1,364 +0,0 @@
-import { ref } from 'vue';
-import UnnnicButton from '../components/Button/Button.vue';
-import UnnnicToast from '../components/Toast/Toast.vue';
-
-import {
-  Dialog,
-  DialogTrigger,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-  DialogFooter,
-  DialogClose,
-} from '../components/ui/dialog';
-
-import {
-  Drawer,
-  DrawerTrigger,
-  DrawerContent,
-  DrawerHeader,
-  DrawerTitle,
-  DrawerDescription,
-  DrawerFooter,
-  DrawerClose,
-} from '../components/ui/drawer';
-
-import {
-  Popover,
-  PopoverTrigger,
-  PopoverContent,
-} from '../components/ui/popover';
-
-import {
-  Tooltip,
-  TooltipTrigger,
-  TooltipContent,
-} from '../components/ui/tooltip';
-
-export default {
-  title: 'Utilities/Layer Manager',
-  parameters: {
-    docs: {
-      description: {
-        component:
-          'Minimal stories that prove the global layer manager keeps dialogs, drawers, tooltips, popovers and toasts in the right stacking order.',
-      },
-    },
-  },
-};
-
-export const DialogWithTooltipAndPopover = {
-  name: 'Dialog + Tooltip + Popover',
-  render: () => ({
-    components: {
-      Dialog,
-      DialogTrigger,
-      DialogContent,
-      DialogHeader,
-      DialogTitle,
-      DialogFooter,
-      DialogClose,
-      Tooltip,
-      TooltipTrigger,
-      TooltipContent,
-      Popover,
-      PopoverTrigger,
-      PopoverContent,
-      UnnnicButton,
-    },
-    template: `
-      <Dialog>
-        <DialogTrigger>
-          <UnnnicButton text="Open dialog" type="primary" />
-        </DialogTrigger>
-        <DialogContent>
-          <DialogHeader>
-            <DialogTitle>Dialog surface</DialogTitle>
-          </DialogHeader>
-
-          <div style="padding: 24px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px;">
-            <Tooltip>
-              <TooltipTrigger>
-                <UnnnicButton text="Tooltip" type="secondary" />
-              </TooltipTrigger>
-              <TooltipContent>This tooltip should appear above the dialog.</TooltipContent>
-            </Tooltip>
-
-            <Popover>
-              <PopoverTrigger>
-                <UnnnicButton text="Popover" type="primary" />
-              </PopoverTrigger>
-              <PopoverContent>
-                <section style="padding: 16px;">
-                  <p style="margin: 0; color: #67738B;">
-                    Popover content should also float above.
-                  </p>
-                </section>
-              </PopoverContent>
-            </Popover>
-          </div>
-
-          <DialogFooter>
-            <DialogClose>
-              <UnnnicButton text="Close" type="tertiary" />
-            </DialogClose>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
-    `,
-  }),
-};
-
-export const DrawerWithTooltipAndPopover = {
-  name: 'Drawer + Tooltip + Popover',
-  render: () => ({
-    components: {
-      Drawer,
-      DrawerTrigger,
-      DrawerContent,
-      DrawerHeader,
-      DrawerTitle,
-      DrawerDescription,
-      DrawerFooter,
-      DrawerClose,
-      Tooltip,
-      TooltipTrigger,
-      TooltipContent,
-      Popover,
-      PopoverTrigger,
-      PopoverContent,
-      UnnnicButton,
-    },
-    template: `
-      <Drawer>
-        <DrawerTrigger>
-          <UnnnicButton text="Open drawer" type="primary" />
-        </DrawerTrigger>
-        <DrawerContent>
-          <DrawerHeader>
-            <DrawerTitle>Drawer surface</DrawerTitle>
-            <DrawerDescription>Interact with floating layers.</DrawerDescription>
-          </DrawerHeader>
-
-          <div style="padding: 24px; display: flex; flex-direction: column; gap: 16px;">
-            <Tooltip>
-              <TooltipTrigger>
-                <UnnnicButton text="Tooltip" type="secondary" />
-              </TooltipTrigger>
-              <TooltipContent>Tooltip should appear above the drawer.</TooltipContent>
-            </Tooltip>
-
-            <Popover>
-              <PopoverTrigger>
-                <UnnnicButton text="Popover" type="primary" />
-              </PopoverTrigger>
-              <PopoverContent>
-                <section style="padding: 16px;">
-                  <p style="margin: 0; color: #67738B;">
-                    Popover content should remain on top too.
-                  </p>
-                </section>
-              </PopoverContent>
-            </Popover>
-          </div>
-
-          <DrawerFooter>
-            <DrawerClose>
-              <UnnnicButton text="Close drawer" type="tertiary" />
-            </DrawerClose>
-          </DrawerFooter>
-        </DrawerContent>
-      </Drawer>
-    `,
-  }),
-};
-
-export const DrawerNextToDialog = {
-  name: 'Drawer + Dialog',
-  render: () => ({
-    components: {
-      Drawer,
-      DrawerContent,
-      DrawerHeader,
-      DrawerTitle,
-      DrawerDescription,
-      DrawerFooter,
-      DrawerClose,
-      Dialog,
-      DialogContent,
-      DialogHeader,
-      DialogTitle,
-      DialogFooter,
-      DialogClose,
-      UnnnicButton,
-    },
-    setup() {
-      const drawerOpen = ref(false);
-      const dialogOpen = ref(false);
-      return { drawerOpen, dialogOpen };
-    },
-    template: `
-      <div>
-        <div style="display: flex; gap: 16px; flex-wrap: wrap; justify-content: center;">
-          <UnnnicButton text="Open drawer" type="primary" @click="drawerOpen = true" />
-        </div>
-
-        <Drawer v-model:open="drawerOpen">
-          <DrawerContent size="large">
-            <DrawerHeader>
-              <DrawerTitle>Drawer</DrawerTitle>
-            </DrawerHeader>
-            <div style="padding: 24px; color: #67738B; display: grid; gap: 16px;">
-              Keep this drawer open and toggle the dialog.
-
-              <UnnnicButton text="Open dialog" @click="dialogOpen = true" />
-            </div>
-          </DrawerContent>
-        </Drawer>
-
-        <Dialog v-model:open="dialogOpen">
-          <DialogContent>
-            <DialogHeader>
-              <DialogTitle>Dialog overlay</DialogTitle>
-            </DialogHeader>
-            <div style="padding: 24px; color: #67738B;">
-              This dialog must appear above the drawer and its overlay.
-            </div>
-            <DialogFooter>
-              <DialogClose>
-                <UnnnicButton text="Close dialog" type="tertiary" />
-              </DialogClose>
-            </DialogFooter>
-          </DialogContent>
-        </Dialog>
-      </div>
-    `,
-  }),
-};
-
-export const NestedDialogs = {
-  name: 'Dialog nested',
-  render: () => ({
-    components: {
-      Dialog,
-      DialogTrigger,
-      DialogContent,
-      DialogHeader,
-      DialogTitle,
-      DialogFooter,
-      DialogClose,
-      Tooltip,
-      TooltipTrigger,
-      TooltipContent,
-      UnnnicButton,
-    },
-    setup() {
-      const parentOpen = ref(false);
-      const childOpen = ref(false);
-      return { parentOpen, childOpen };
-    },
-    template: `
-      <Dialog v-model:open="parentOpen">
-        <DialogTrigger>
-          <UnnnicButton text="Open parent dialog" type="primary" />
-        </DialogTrigger>
-        <DialogContent>
-          <DialogHeader>
-            <DialogTitle>Parent dialog</DialogTitle>
-          </DialogHeader>
-          <div style="padding: 24px; display: flex; flex-direction: column; gap: 12px;">
-            <p style="margin: 0; color: #67738B;">Open the child dialog to stack overlays.</p>
-            <UnnnicButton text="Open child dialog" type="primary" @click="childOpen = true" />
-          </div>
-          <DialogFooter>
-            <DialogClose>
-              <UnnnicButton text="Close parent" type="tertiary" />
-            </DialogClose>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
-
-      <Dialog v-model:open="childOpen">
-        <DialogContent size="small">
-          <DialogHeader>
-            <DialogTitle>Child dialog</DialogTitle>
-          </DialogHeader>
-          <div style="padding: 24px; display: flex; flex-direction: column; gap: 8px;">
-            <Tooltip>
-              <TooltipTrigger>
-                <UnnnicButton text="Tooltip here" type="secondary" />
-              </TooltipTrigger>
-              <TooltipContent>Tooltip stays on top of both dialogs.</TooltipContent>
-            </Tooltip>
-          </div>
-          <DialogFooter>
-            <DialogClose>
-              <UnnnicButton text="Close child" type="primary" />
-            </DialogClose>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
-    `,
-  }),
-};
-
-export const DialogWithToast = {
-  name: 'Dialog + Toast',
-  render: () => ({
-    components: {
-      Dialog,
-      DialogContent,
-      DialogHeader,
-      DialogTitle,
-      DialogFooter,
-      DialogClose,
-      UnnnicToast,
-      UnnnicButton,
-    },
-    setup() {
-      const dialogOpen = ref(false);
-      const toastVisible = ref(false);
-      const toastKey = ref(0);
-
-      const showToast = () => {
-        toastKey.value += 1;
-        toastVisible.value = true;
-      };
-
-      return { dialogOpen, toastVisible, toastKey, showToast };
-    },
-    template: `
-      <div style="display: flex; gap: 16px;">
-        <UnnnicButton text="Open dialog" type="primary" @click="dialogOpen = true" />
-        <UnnnicButton text="Show toast" type="secondary" @click="showToast" />
-      </div>
-
-      <Dialog v-model:open="dialogOpen">
-        <DialogContent>
-          <DialogHeader>
-            <DialogTitle>Dialog layer</DialogTitle>
-          </DialogHeader>
-          <div style="padding: 24px; color: #67738B;">
-            Use the buttons to compare dialog and toast layers.
-          </div>
-          <DialogFooter>
-            <DialogClose>
-              <UnnnicButton text="Close dialog" type="tertiary" />
-            </DialogClose>
-            <UnnnicButton text="Show toast" type="primary" @click="showToast" />
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
-
-      <UnnnicToast
-        v-if="toastVisible"
-        :key="toastKey"
-        title="Toast layer"
-        description="Toasts should always float above dialogs."
-        type="success"
-        :timeout="0"
-        @close="toastVisible = false"
-      />
-    `,
-  }),
-};

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: '',
-  },
-};