@weni/unnnic-system 3.10.0 → 3.11.1-alpha.0

package/src/components/ui/drawer/index.ts

@@ -0,0 +1,10 @@
+export { default as Drawer } from './Drawer.vue';
+export { default as DrawerContent } from './DrawerContent.vue';
+export { default as DrawerDescription } from './DrawerDescription.vue';
+export { default as DrawerFooter } from './DrawerFooter.vue';
+export { default as DrawerHeader } from './DrawerHeader.vue';
+export { default as DrawerOverlay } from './DrawerOverlay.vue';
+export { default as DrawerTitle } from './DrawerTitle.vue';
+export { default as DrawerTrigger } from './DrawerTrigger.vue';
+export { default as DrawerClose } from './DrawerClose.vue';
+export { DrawerPortal } from 'vaul-vue';

package/src/components/ui/segmented-control/SegmentedControlList.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import type { TabsListProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { TabsList } from 'reka-ui';
+import { cn } from '@/lib/utils';
+import { provide, computed } from 'vue';
+
+const props = withDefaults(
+  defineProps<
+    TabsListProps & {
+      size?: 'small' | 'medium';
+      class?: HTMLAttributes['class'];
+    }
+  >(),
+  {
+    size: 'medium',
+  },
+);
+
+const delegatedProps = reactiveOmit(props, 'class');
+
+provide(
+  'segmented-control-size',
+  computed(() => props.size),
+);
+</script>
+
+<template>
+  <TabsList
+    v-bind="delegatedProps"
+    :class="cn('unnnic-segmented-control-list', props.class)"
+  >
+    <slot />
+  </TabsList>
+</template>
+
+<style lang="scss" scoped>
+@use '@/assets/scss/unnnic' as *;
+
+.unnnic-segmented-control-list {
+  padding: $unnnic-space-1;
+
+  display: flex;
+  align-items: center;
+  gap: $unnnic-space-1;
+
+  border-radius: $unnnic-radius-2;
+  background-color: $unnnic-color-bg-soft;
+}
+</style>

package/src/components/ui/segmented-control/SegmentedControlTrigger.vue

@@ -0,0 +1,81 @@
+<script setup lang="ts">
+import type { TabsTriggerProps } from 'reka-ui';
+import type { HTMLAttributes, ComputedRef } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { TabsTrigger, useForwardProps } from 'reka-ui';
+import { cn } from '@/lib/utils';
+import { inject, computed } from 'vue';
+
+const props = defineProps<
+  TabsTriggerProps & {
+    size?: 'small' | 'medium';
+    class?: HTMLAttributes['class'];
+  }
+>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+
+const forwardedProps = useForwardProps(delegatedProps);
+
+const injectedSize = inject<ComputedRef<'small' | 'medium'>>(
+  'segmented-control-size',
+);
+const currentSize = computed(
+  () => props.size ?? injectedSize?.value ?? 'medium',
+);
+</script>
+
+<template>
+  <TabsTrigger
+    v-bind="forwardedProps"
+    :class="
+      cn(
+        'unnnic-segmented-control-trigger',
+        `unnnic-segmented-control-trigger--${currentSize}`,
+        'transition-all',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </TabsTrigger>
+</template>
+
+<style lang="scss" scoped>
+@use '@/assets/scss/unnnic' as *;
+
+.unnnic-segmented-control-trigger {
+  width: 100%;
+
+  border: 1px solid $unnnic-color-bg-soft;
+
+  padding: $unnnic-space-2 $unnnic-space-4;
+
+  background-color: $unnnic-color-bg-soft;
+  border-radius: $unnnic-radius-1;
+
+  font: $unnnic-font-emphasis;
+  color: $unnnic-color-fg-base;
+
+  cursor: pointer;
+
+  &[data-state='active'] {
+    border-color: $unnnic-color-border-soft;
+    background-color: $unnnic-color-bg-base;
+    color: $unnnic-color-fg-emphasized;
+  }
+
+  &:disabled {
+    color: $unnnic-color-fg-muted;
+    cursor: not-allowed;
+  }
+
+  &:hover:not(:disabled) {
+    color: $unnnic-color-fg-emphasized;
+  }
+
+  &--small {
+    font: $unnnic-font-caption-1;
+  }
+}
+</style>

package/src/components/ui/segmented-control/index.ts

@@ -0,0 +1,4 @@
+export { default as SegmentedControl } from '../tabs/Tabs.vue';
+export { default as SegmentedControlContent } from '../tabs/TabsContent.vue';
+export { default as SegmentedControlList } from './SegmentedControlList.vue';
+export { default as SegmentedControlTrigger } from './SegmentedControlTrigger.vue';

package/src/components/ui/tabs/TabsTrigger.vue

@@ -4,7 +4,6 @@ import type { HTMLAttributes } from 'vue';
 import { reactiveOmit } from '@vueuse/core';
 import { TabsTrigger, useForwardProps } from 'reka-ui';
 import { cn } from '@/lib/utils';
-import { computed } from 'vue';
 
 const props = defineProps<
   TabsTriggerProps & { class?: HTMLAttributes['class'] }
@@ -13,28 +12,12 @@ const props = defineProps<
 const delegatedProps = reactiveOmit(props, 'class');
 
 const forwardedProps = useForwardProps(delegatedProps);
-
-const classes = computed(() => {
-  const defaultClasses = ['unnnic-tabs-trigger'];
-
-  if (props.disabled) {
-    defaultClasses.push('unnnic-tabs-trigger--disabled');
-  }
-
-  return defaultClasses;
-});
 </script>
 
 <template>
   <TabsTrigger
     v-bind="forwardedProps"
-    :class="
-      cn(
-        ...classes,
-        'transition-all disabled:pointer-events-none disabled:opacity-50',
-        props.class,
-      )
-    "
+    :class="cn('unnnic-tabs-trigger', 'transition-all', props.class)"
   >
     <span class="unnnic-tabs-trigger__content truncate">
       <slot />
@@ -62,11 +45,12 @@ const classes = computed(() => {
       $unnnic-color-border-active;
   }
 
-  &--disabled {
+  &:disabled {
     color: $unnnic-color-fg-muted;
+    cursor: not-allowed;
   }
 
-  &:hover {
+  &:hover:not(:disabled) {
     color: $unnnic-color-fg-emphasized;
   }
 

package/src/components/ui/tooltip/Tooltip.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { TooltipRootEmits, TooltipRootProps } from 'reka-ui';
+import { TooltipRoot, useForwardPropsEmits } from 'reka-ui';
+
+const props = defineProps<TooltipRootProps>();
+const emits = defineEmits<TooltipRootEmits>();
+
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+  <TooltipRoot v-bind="forwarded">
+    <slot />
+  </TooltipRoot>
+</template>

package/src/components/ui/tooltip/TooltipContent.vue

@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import type { TooltipContentEmits, TooltipContentProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import {
+  TooltipArrow,
+  TooltipContent,
+  TooltipPortal,
+  useForwardPropsEmits,
+} from 'reka-ui';
+import { cn } from '@/lib/utils';
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+const props = withDefaults(
+  defineProps<TooltipContentProps & { class?: HTMLAttributes['class'] }>(),
+  {
+    sideOffset: 0,
+  },
+);
+
+const emits = defineEmits<TooltipContentEmits>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <TooltipPortal>
+    <TooltipContent
+      v-bind="{ ...forwarded, ...$attrs }"
+      :class="
+        cn(
+          'tooltip__content',
+          'animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+          props.class,
+        )
+      "
+    >
+      <slot />
+
+      <TooltipArrow class="tooltip__arrow" />
+    </TooltipContent>
+  </TooltipPortal>
+</template>
+
+<style lang="scss">
+@use '@/assets/scss/unnnic' as *;
+
+.tooltip__content {
+  z-index: 10001;
+
+  background-color: $unnnic-color-gray-900;
+  color: $unnnic-color-white;
+  border-radius: $unnnic-radius-1;
+  padding: $unnnic-space-2;
+  box-shadow: $unnnic-shadow-1;
+  font: $unnnic-font-caption-2;
+
+  overflow-wrap: break-word;
+}
+
+.tooltip__arrow {
+  width: 10px;
+  height: 10px;
+  background-color: $unnnic-color-gray-900;
+  fill: $unnnic-color-gray-900;
+  transform: rotate(45deg) translate(-50%, -50%);
+}
+</style>

package/src/components/ui/tooltip/TooltipProvider.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { TooltipProviderProps } from 'reka-ui';
+import { TooltipProvider } from 'reka-ui';
+
+const props = defineProps<TooltipProviderProps>();
+</script>
+
+<template>
+  <TooltipProvider
+    v-bind="props"
+    :delayDuration="100"
+  >
+    <slot />
+  </TooltipProvider>
+</template>

package/src/components/ui/tooltip/TooltipTrigger.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { TooltipTriggerProps } from 'reka-ui';
+import { TooltipTrigger } from 'reka-ui';
+
+const props = defineProps<TooltipTriggerProps>();
+</script>
+
+<template>
+  <TooltipTrigger
+    v-bind="props"
+    as="div"
+    class="unnnic-tooltip-trigger"
+  >
+    <slot />
+  </TooltipTrigger>
+</template>
+
+<style lang="scss" scoped>
+.unnnic-tooltip-trigger {
+  display: inline-block;
+}
+</style>

package/src/components/ui/tooltip/index.ts

@@ -0,0 +1,4 @@
+export { default as Tooltip } from './Tooltip.vue';
+export { default as TooltipContent } from './TooltipContent.vue';
+export { default as TooltipProvider } from './TooltipProvider.vue';
+export { default as TooltipTrigger } from './TooltipTrigger.vue';

package/src/stories/Alert.stories.js

@@ -1,7 +1,5 @@
-import AlertCaller from '../components/Alert/AlertCaller.vue';
 import alert from '../utils/call';
 import UnnnicAlert from '../components/Alert/Alert.vue';
-import AlertBanner from '../components/Alert/AlertBanner.vue';
 
 export default {
   title: 'Feedback/Alert',
@@ -20,9 +18,6 @@ export default {
   args: {
     type: 'default',
     text: 'Text',
-    linkHref: '',
-    linkText: '',
-    linkTarget: '',
   },
   argTypes: {
     type: {
@@ -37,42 +32,15 @@ export default {
         type: 'text',
       },
     },
-
-    linkHref: {
-      control: {
-        type: 'text',
-      },
-    },
-
-    linkText: {
-      control: {
-        type: 'text',
-      },
-    },
-
-    linkTarget: {
+    version: {
       control: {
-        type: 'text',
+        type: 'select',
       },
-    },
-    position: {
-      if: { arg: 'version' },
-    },
-    version: {
-      control: false,
+      options: ['1.1', '2.0'],
     },
     title: {
       if: { arg: 'version' },
     },
-    icon: {
-      if: { arg: 'version' },
-    },
-    closeText: {
-      if: { arg: 'version' },
-    },
-    scheme: {
-      if: { arg: 'version' },
-    },
   },
 };
 
@@ -95,7 +63,7 @@ export const Normal = {
     },
   },
   render: (args) => ({
-    components: { AlertCaller, UnnnicAlert },
+    components: { UnnnicAlert },
     setup() {
       return { args };
     },
@@ -117,7 +85,7 @@ export const Normal = {
 
 export const InlineComponent = {
   render: (args) => ({
-    components: { AlertCaller, UnnnicAlert },
+    components: { UnnnicAlert },
     setup() {
       return { args };
     },
@@ -166,7 +134,7 @@ export const WithContainerRef = {
     },
   },
   render: (args) => ({
-    components: { AlertCaller, UnnnicAlert },
+    components: { UnnnicAlert },
     setup() {
       return { args };
     },
@@ -190,32 +158,3 @@ export const WithContainerRef = {
     scheme: 'feedback-green',
   },
 };
-
-export const Banner = {
-  parameters: {
-    docs: {
-      description: {
-        story: `This variation has the additional prop ${'`showCloseButton`'}, false by default.`,
-      },
-    },
-  },
-  render: (args) => ({
-    components: { AlertBanner },
-    setup() {
-      return { args };
-    },
-    methods: {
-      unnnicCallAlert() {
-        alert.callAlert({
-          props: this.args,
-          containerRef: this.$refs.divContainer,
-        });
-      },
-    },
-    template: '<alert-banner v-bind="args" />',
-  }),
-  args: {
-    text: 'Text',
-    showCloseButton: false,
-  },
-};

package/src/stories/Button.stories.js

@@ -8,7 +8,7 @@ export default {
       description: {
         component: `Allows users to perform an action or navigate to another page. 
           It has styles for various needs and are ideal for directing the user's attention. 
-          It is divided into 6 types: Primary, Secondary, Tertiary, Alternative, Warning, Attention.
+          It is divided into 5 types: Primary, Secondary, Tertiary, Warning, Attention.
           Each of these types has its states.
           <br/>
           <br/>
@@ -36,14 +36,7 @@ export default {
   argTypes: {
     type: {
       control: { type: 'select' },
-      options: [
-        'primary',
-        'secondary',
-        'tertiary',
-        'alternative',
-        'warning',
-        'attention',
-      ],
+      options: ['primary', 'secondary', 'tertiary', 'warning', 'attention'],
     },
     size: {
       control: { type: 'select' },
@@ -75,74 +68,71 @@ export default {
 
 export const Primary = {
   args: {
-    text: 'Button Text',
+    text: 'Text',
   },
 };
 
 export const Secondary = {
   args: {
     type: 'secondary',
-    text: 'Button Text',
+    text: 'Text',
   },
 };
 
 export const Tertiary = {
   args: {
     type: 'tertiary',
-    text: 'Button Text',
+    text: 'Text',
   },
 };
 
-export const WithIcon = {
+export const Warning = {
+  parameters: {
+    docs: {
+      description: {
+        story: `This variation aims to highlight actions that could be destructive or have negative consequences if taken. 
+        For example: Deleting an element.`,
+      },
+    },
+  },
   args: {
-    text: 'Button Text',
-    iconLeft: 'add',
+    type: 'warning',
+    text: 'Text',
   },
 };
 
-export const FilledIcon = {
+export const Attention = {
   args: {
-    text: 'Button Text',
-    iconLeft: 'play_arrow',
-    iconsFilled: true,
+    type: 'attention',
+    text: 'Text',
   },
 };
 
-export const OnlyIcon = {
+export const Loading = {
   args: {
-    iconCenter: 'add',
+    loading: true,
+    text: 'Text',
   },
 };
 
-export const Alternative = {
+export const WithIcon = {
   args: {
-    type: 'alternative',
-    iconLeft: 'add',
     text: 'Text',
+    iconLeft: 'add',
   },
 };
 
-export const Warning = {
-  parameters: {
-    docs: {
-      description: {
-        story: `This variation aims to highlight actions that could be destructive or have negative consequences if taken. 
-        For example: Deleting an element.`,
-      },
-    },
-  },
+export const FilledIcon = {
   args: {
-    type: 'warning',
-    iconLeft: 'add',
     text: 'Text',
+    iconLeft: 'play_arrow',
+    iconsFilled: true,
   },
 };
 
-export const Attention = {
+export const OnlyIcon = {
   args: {
-    type: 'attention',
-    iconLeft: 'add',
-    text: 'Text',
+    iconCenter: 'add',
   },
 };
 

package/src/stories/Checkbox.stories.js

@@ -15,12 +15,12 @@ export default {
       },
     },
   },
-  args: { disabled: false, size: 'md' },
+  args: { disabled: false },
   argTypes: {
     modelValue: { control: 'inline-radio', options: [true, false, 'less'] },
     disabled: { control: 'boolean' },
-    size: { control: 'select', options: ['md', 'sm'] },
-    textRight: { control: 'text' },
+    label: { control: 'text' },
+    helper: { control: 'text' },
   },
   render: (args) => ({
     components: {
@@ -34,6 +34,7 @@ export default {
       return { args, updateModelValue };
     },
     template: `
+      <pre>v-model: {{ args.modelValue }}</pre>
       <UnnnicCheckbox v-bind="args" @update:modelValue="updateModelValue"/>
     `,
   }),
@@ -42,18 +43,22 @@ export default {
 export const Default = {
   args: {
     modelValue: false,
+    label: 'Label',
+    helper: 'Helper',
   },
 };
 
 export const Selected = {
   args: {
     modelValue: true,
+    label: 'Label',
   },
 };
 
-export const LessSelected = {
+export const Less = {
   args: {
     modelValue: 'less',
+    label: 'Label',
   },
 };
 
@@ -61,6 +66,7 @@ export const Disabled = {
   args: {
     modelValue: false,
     disabled: true,
+    label: 'Label',
   },
 };
 
@@ -68,5 +74,6 @@ export const DisabledSelected = {
   args: {
     modelValue: true,
     disabled: true,
+    label: 'Label',
   },
 };