@rocketui/vue 0.0.46 → 0.0.47

package/src/components/Tooltip/Tooltip.stories.ts

@@ -0,0 +1,203 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+import Tooltip from './RTooltip.vue';
+import Button from '../Button/RButton.vue';
+import Icon from '../Icon/RIcon.vue';
+import { vTooltip } from '../../directives';
+
+const DefaultArgTypes = {
+  placement: {
+    type: 'select',
+    options: [
+      'top',
+      'right',
+      'bottom',
+      'left',
+      'top-start',
+      'top-end',
+      'right-start',
+      'right-end',
+      'bottom-start',
+      'bottom-end',
+      'left-start',
+      'left-end',
+    ],
+  },
+  triggers: {
+    type: 'select',
+    options: ['hover', 'click', 'manual'],
+  },
+
+  offset: {
+    control: {
+      type: 'range',
+    },
+  },
+  padding: {
+    control: {
+      type: 'range',
+    },
+    defaultValue: 0,
+  },
+};
+
+const DefaultArgs = {
+  placement: 'top',
+  text: 'Tooltips are used to describe or identify an element. In most scenarios, tooltips help the user understand the meaning, function or alt-text of an element.',
+  dark: true,
+  light: false,
+  triggers: 'hover',
+  autoHide: false,
+  hideDelay: 3000,
+  showDelay: 0,
+  shown: false,
+  disabled: false,
+  offset: 12,
+  padding: 0,
+  outsideClick: false,
+  resizable: false,
+};
+
+const TooltipStory = {
+  title: 'Components/Tooltip',
+  render: (args: any) => ({
+    components: { Tooltip, Button },
+    setup: () => {
+      return {
+        args,
+      };
+    },
+    template: `
+    <Tooltip
+      v-bind="args"
+      @show="show"
+      @hide="hide"
+    >
+      <template #trigger>
+        <Button variant="primary">Tooltip</Button>
+      </template>
+    </Tooltip>
+    `,
+  }),
+  argTypes: DefaultArgTypes,
+  args: DefaultArgs,
+} as Meta<typeof Tooltip>;
+
+export default TooltipStory;
+
+type Story = StoryObj<typeof TooltipStory>;
+
+const WithContentSlotStory = {
+  render: (args: any) => ({
+    components: { Tooltip, Icon },
+    setup() {
+      return {
+        args,
+      };
+    },
+    template: `
+    <Tooltip
+      v-bind="args"
+      @show="show"
+      @hide="hide"
+    >
+      <template #trigger>
+        <Icon name="mdiInformation" />
+      </template>
+      <template #content>
+        <span style="background: red; color: #fff; padding: 8px;">This is a tooltip</span>
+      </template>
+    </Tooltip>
+    `,
+  }),
+};
+
+const ToggleTemplate = {
+  render: (args: any) => ({
+    components: { Tooltip },
+    setup() {
+      return {
+        args,
+      };
+    },
+    template: `
+    <Tooltip
+      v-bind="args"
+      @show="show"
+      @hide="hide"
+    >
+      <template #trigger>
+        <span>Toggle tooltip</span>
+      </template>
+    </Tooltip>
+    `,
+  }),
+};
+
+const WithDirectivesStory = {
+  render: (args: any) => ({
+    components: { Button },
+    directives: { tooltip: vTooltip },
+    setup: () => ({
+      args,
+    }),
+    template: `
+    <div 
+      v-tooltip="{
+        triggerContent: '<div>Hello World!</div>',
+        text: 'Directive tooltip',
+        autoHide: false,
+        placement: 'right',
+        offset: 30,
+        }" 
+      
+      />
+    `,
+  }),
+  args: {},
+};
+
+export const Overview: Story = {
+  args: {},
+};
+
+export const Default: Story = {
+  args: {},
+};
+
+export const WithClickTrigger: Story = {
+  render: ToggleTemplate.render,
+
+  args: {
+    triggers: 'click',
+    text: 'Clicked!',
+    outsideClick: true,
+  },
+};
+
+export const WithManualTrigger: Story = {
+  args: {
+    triggers: 'manual',
+    dark: false,
+    light: true,
+    text: 'Manual!',
+  },
+};
+
+export const WithContentSlot: Story = {
+  render: WithContentSlotStory.render,
+
+  args: {
+    text: '',
+    triggers: 'hover',
+  },
+};
+
+export const WithDirectives: Story = {
+  render: WithDirectivesStory.render,
+
+  parameters: {
+    controls: {
+      disable: true,
+    },
+  },
+};

package/src/components/Tooltip/common.ts

@@ -0,0 +1,91 @@
+import {
+  computePosition,
+  flip,
+  shift,
+  offset,
+  arrow,
+  hide,
+} from '@floating-ui/dom';
+import type { Ref } from 'vue';
+
+export function update(
+  { value: trigger }: Ref<HTMLDivElement>,
+  { value: tooltip }: Ref<HTMLDivElement>,
+  { value: arrowElement }: Ref<HTMLDivElement>,
+  placement: Placements,
+  offsetParam: number,
+  padding: number
+) {
+  if (!trigger || !tooltip) return;
+  computePosition(trigger, tooltip, {
+    placement,
+    middleware: [
+      offset(offsetParam),
+      shift({ padding }),
+      arrow({ element: arrowElement }),
+      flip(),
+      hide(),
+    ],
+  }).then(({ x, y, placement, middlewareData }) => {
+    Object.assign(tooltip.style, {
+      left: `${x}px`,
+      top: `${y}px`,
+    });
+
+    if (arrowElement && middlewareData.arrow) {
+      const { x: arrowX, y: arrowY } = middlewareData.arrow;
+
+      const staticSide = {
+        top: Placement.Bottom,
+        right: Placement.Left,
+        bottom: Placement.Top,
+        left: Placement.Right,
+      }[placement.split('-')[0]];
+
+      Object.assign(arrowElement.style, {
+        left: x != null ? `${arrowX}px` : '',
+        top: y != null ? `${arrowY}px` : '',
+        right: '',
+        bottom: '',
+        [`${staticSide}`]: '-4px',
+      });
+    }
+  });
+}
+
+export type Placements =
+  | 'top'
+  | 'bottom'
+  | 'left'
+  | 'right'
+  | 'top-start'
+  | 'top-end'
+  | 'right-start'
+  | 'right-end'
+  | 'bottom-start'
+  | 'bottom-end'
+  | 'left-start'
+  | 'left-end';
+
+export enum Placement {
+  Top = 'top',
+  Bottom = 'bottom',
+  Left = 'left',
+  Right = 'right',
+  TopStart = 'top-start',
+  TopEnd = 'top-end',
+  RightStart = 'right-start',
+  RightEnd = 'right-end',
+  BottomStart = 'bottom-start',
+  BottomEnd = 'bottom-end',
+  LeftStart = 'left-start',
+  LeftEnd = 'left-end',
+}
+
+export type Triggers = 'click' | 'hover' | 'manual';
+
+export enum Trigger {
+  Click = 'click',
+  Hover = 'hover',
+  Manual = 'manual',
+}

package/src/components/Tooltip/tooltip.css

@@ -0,0 +1,34 @@
+@import '../../index.css';
+
+.trigger {
+  @apply relative inline-block cursor-pointer bg-transparent rounded-full;
+}
+.tooltip {
+  @apply z-50 bg-transparent m-0 p-0 top-0 left-0 absolute w-max hidden;
+
+  &__content {
+    @apply font-normal p-4 rounded-lg text-xs max-w-xs;
+
+    &--dark {
+      @apply text-white bg-[var(--neutral-900)];
+    }
+    &--light {
+      @apply text-[var(--neutral-900)] bg-white;
+    }
+  }
+
+  &__arrow {
+    @apply absolute w-4 h-4 rotate-45 -z-10;
+
+    &--dark {
+      @apply bg-[var(--neutral-900)];
+    }
+    &--light {
+      @apply bg-white;
+    }
+  }
+
+  &--light {
+    @apply shadow-2xl rounded-lg;
+  }
+}

package/src/components/Tooltip/tooltip.spec.ts

@@ -0,0 +1,81 @@
+import { describe, it, expect } from 'vitest';
+
+import { mount } from '@vue/test-utils';
+
+import Tooltip from './RTooltip.vue';
+import { Trigger } from './common';
+
+describe('Tooltip', () => {
+  it('click trigger', () => {
+    const wrapper = mount(Tooltip, {
+      props: {
+        triggers: Trigger.Click,
+        outsideClick: true,
+      },
+    });
+    expect(wrapper.exists()).toBe(true);
+    expect(wrapper.find('.trigger').exists()).toBe(true);
+    expect(wrapper.find('.tooltip').exists()).toBe(true);
+    expect(
+      wrapper
+        .find('.trigger')
+        .trigger('click')
+        .then(() => {
+          expect(wrapper.find('.tooltip').attributes('style')).toBe(
+            'display: block;'
+          );
+        })
+        .then(() => {
+          wrapper.find('.trigger').trigger('click');
+          expect(wrapper.find('.tooltip').attributes('style')).toBe(
+            'display: "";'
+          );
+        })
+    );
+  });
+  it('hover trigger', () => {
+    const wrapper = mount(Tooltip, {
+      props: {
+        triggers: Trigger.Hover,
+      },
+    });
+    expect(wrapper.exists()).toBe(true);
+    expect(wrapper.find('.trigger').exists()).toBe(true);
+    expect(wrapper.find('.tooltip').exists()).toBe(true);
+    expect(
+      wrapper
+        .find('.trigger')
+        .trigger('mouseenter')
+        .then(() => {
+          expect(wrapper.find('.tooltip').attributes('style')).toBe(
+            'display: block;'
+          );
+        })
+        .then(() => {
+          wrapper.find('.trigger').trigger('mouseleave');
+          expect(wrapper.find('.tooltip').attributes('style')).toBe(
+            'display: "";'
+          );
+        })
+    );
+  });
+  it('manual trigger', () => {
+    const wrapper = mount(Tooltip, {
+      props: {
+        triggers: Trigger.Manual,
+        shown: true,
+        autoHide: true,
+        hideDelay: 1000,
+      },
+    });
+    expect(wrapper.exists()).toBe(true);
+    expect(wrapper.find('.trigger').exists()).toBe(true);
+    expect(wrapper.find('.tooltip').exists()).toBe(true);
+    expect(wrapper.find('.tooltip').attributes('style')).toBe(
+      'display: block;'
+    );
+    setTimeout(() => {
+      expect(wrapper.find('.tooltip').attributes('style')).toBe('""');
+    }, 1000);
+  });
+});

package/src/components/Typography/Typography.mdx

@@ -0,0 +1,109 @@
+import { Meta } from '@storybook/blocks';
+import './typography.css';
+
+<Meta
+  title="Design Tokens/Typography"
+  parameters={{
+    viewMode: 'docs',
+    previewTabs: {
+      canvas: { hidden: true },
+    },
+  }}
+/>
+
+export const Thing = ({
+  fontSize,
+  lineHeight,
+  fontWeight = '400',
+  as = 'p',
+  text,
+}) => {
+  return (
+    <div>
+      <component is={as} style={{ fontSize, lineHeight, fontWeight }}>
+        {text}
+      </component>
+      <p
+        style={{ fontSize: '12px' }}
+      >{`Font size: ${fontSize} | Line height: ${lineHeight} | Font Weight: ${fontWeight}`}</p>
+    </div>
+  );
+};
+
+# Typography
+
+## Heading
+
+<Thing as={'h1'} text={'Heading 1'} fontSize={'72px'} lineHeight={'91.2px'} />
+
+```html
+.text-h1
+```
+
+<Thing as={'h2'} text={'Heading 2'} fontSize={'48px'} lineHeight={'60.8px'} />
+
+```html
+.text-h2;
+```
+
+<Thing as={'h3'} text={'Heading 3'} fontSize={'36px'} lineHeight={'45.6px'} />
+
+```html
+.text-h3
+```
+
+<Thing as={'h4'} text={'Heading 4'} fontSize={'24px'} lineHeight={'30.4px'} />
+
+```html
+.text-h4
+```
+
+<Thing as={'h5'} text={'Heading 5'} fontSize={'18px'} lineHeight={'22.4px'} />
+
+```html
+.text-h5
+```
+
+## Paragraph
+
+<Thing text={'Title'} fontSize={'24px'} lineHeight={'32px'} />
+
+```html
+.text-title
+```
+
+<Thing text={'Subtitle Large'} fontSize={'20px'} lineHeight={'28px'} />
+
+```html
+.text-sub-title-1
+```
+
+<Thing text={'Subtitle Small'} fontSize={'18px'} lineHeight={'26px'} />
+
+```html
+.text-sub-title-2
+```
+
+<Thing text={'Body Large'} fontSize={'16px'} lineHeight={'24px'} />
+
+```html
+.text-body
+```
+
+<Thing text={'Body Medium'} fontSize={'14px'} lineHeight={'20px'} />
+
+```html
+.text-body-1
+```
+
+<Thing text={'Body Small'} fontSize={'12px'} lineHeight={'16px'} />
+
+```html
+.text-body-2
+```
+
+<Thing text={'Caption'} fontSize={'10px'} lineHeight={'14px'} />
+
+```html
+.text-caption
+```

package/src/components/Typography/typography.css

@@ -0,0 +1,128 @@
+@import '../../index.css';
+
+.text-h1 {
+  font-size: 4.5rem;
+  font-weight: 400;
+  line-height: 5.7rem;
+
+  @media (max-width: 767px) {
+    font-size: 3rem;
+    line-height: 3.5rem;
+  }
+}
+
+.text-h2 {
+  font-size: 3.75rem;
+  font-weight: 400;
+  line-height: 4.75rem;
+
+  @media (max-width: 767px) {
+    font-size: 2.5rem;
+    line-height: 3rem;
+  }
+}
+
+.text-h3 {
+  font-size: 3rem;
+  font-weight: 400;
+  line-height: 3.875rem;
+
+  @media (max-width: 767px) {
+    font-size: 2rem;
+    line-height: 2.5rem;
+  }
+}
+
+.text-h4 {
+  font-size: 2.5rem;
+  font-weight: 400;
+  line-height: 3.25rem;
+
+  @media (max-width: 767px) {
+    font-size: 1.5rem;
+    line-height: 2rem;
+  }
+}
+
+.text-h5 {
+  font-size: 2rem;
+  font-weight: 400;
+  line-height: 2.625rem;
+
+  @media (max-width: 767px) {
+    font-size: 1.25rem;
+    line-height: 1.75rem;
+  }
+}
+
+.text-title {
+  font-size: 1.5rem;
+  font-weight: 400;
+  line-height: 2rem;
+
+  @media (max-width: 767px) {
+    font-size: 1.125rem;
+    line-height: 1.5rem;
+  }
+}
+
+.text-sub-title-1 {
+  font-size: 1.25rem;
+  font-weight: 400;
+  line-height: 1.75rem;
+
+  @media (max-width: 767px) {
+    font-size: 1rem;
+    line-height: 1.5rem;
+  }
+}
+
+.text-sub-title-2 {
+  font-size: 1.125rem;
+  font-weight: 400;
+  line-height: 1.625rem;
+
+  @media (max-width: 767px) {
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+  }
+}
+
+.text-body {
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.5rem;
+
+  @media (max-width: 767px) {
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+  }
+}
+
+.text-body-1 {
+  font-size: 0.875rem;
+  font-weight: 400;
+  line-height: 1.25rem;
+
+  @media (max-width: 767px) {
+    font-size: 0.75rem;
+    line-height: 1rem;
+  }
+}
+
+.text-body-2 {
+  font-size: 0.75rem;
+  font-weight: 400;
+  line-height: 1rem;
+
+  @media (max-width: 767px) {
+    font-size: 0.625rem;
+    line-height: 0.875rem;
+  }
+}
+
+.text-caption {
+  font-size: 0.625rem;
+  font-weight: 400;
+  line-height: 0.875rem;
+}

package/src/directives/index.ts

@@ -0,0 +1,19 @@
+import { type App, createApp, h, ref, type DirectiveBinding } from 'vue';
+import Tooltip from '../components/Tooltip/RTooltip.vue';
+
+export const vTooltip = {
+  mounted(el: HTMLElement, binding: DirectiveBinding) {
+    console.log('vTooltip');
+    const app: App = createApp({
+      setup() {
+        const props = ref(binding.value);
+
+        return () =>
+          h(Tooltip, {
+            ...props.value,
+          });
+      },
+    });
+    app.mount(el);
+  },
+};