@rocketui/vue 0.0.47 → 0.0.49

package/src/components/Avatar/RAvatar.vue

@@ -1,115 +0,0 @@
-<script setup lang="ts">
-import { computed, defineProps } from 'vue';
-import './avatar.css';
-// @ts-ignore
-import blank from '../../assets/blank-avatar.svg';
-
-export interface IProps {
-  /**
-   * Type of the Avatar
-   * @type 'image' | 'text'
-   * @default 'image'
-   * @example
-   * <Avatar type="text" />
-   */
-  type?: 'image' | 'text';
-
-  /**
-   * Source of the Avatar
-   * @type string
-   * @default ''
-   * @example
-   * <Avatar src="https://source.unsplash.com/random" />
-   */
-  src?: string;
-
-  /**
-   * Alt of the Avatar
-   * @type string
-   * @default 'Avatar'
-   * @example
-   * <Avatar alt="Avatar" />
-   */
-  alt?: string;
-
-  /**
-   * Size of the Avatar
-   * @type 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'
-   * @default '2xl'
-   * @example
-   * <Avatar size="xs" />
-   */
-  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
-
-  /**
-   * Show online status
-   * @type boolean
-   * @default false
-   * @example
-   * <Avatar online />
-   */
-  online?: boolean;
-
-  /**
-   * Text to show when type is text
-   * @type string
-   * @default ''
-   * @example
-   * <Avatar type="text" text="John Doe" />
-   */
-  text?: string;
-}
-const props = withDefaults(defineProps<IProps>(), {
-  type: 'image',
-  size: '2xl',
-  src: blank,
-  alt: 'Avatar',
-  online: false,
-  text: '',
-});
-
-const classes = computed(() => ({
-  avatar: true,
-  [`avatar--${props.size}`]: true,
-}));
-const isAnon = computed(() => props.type === 'image' && !props.src);
-const imgSrc = computed(() => {
-  if (!isAnon.value) {
-    return props.src;
-  }
-  return blank;
-});
-const shortTextWithFirstCharacters = (text: string) => {
-  const words = text.split(' ');
-  if (words.length === 1) {
-    return words[0].substring(0, 2);
-  }
-  return `${words[0].charAt(0)}${words[1].charAt(0)}`;
-};
-</script>
-<template>
-  <div class="avatar__wrapper">
-    <div :class="classes">
-      <p
-        v-if="props.type === 'text'"
-        :class="{ avatar__text: true, [`avatar__text--${props.size}`]: true }"
-      >
-        {{ shortTextWithFirstCharacters(props.text) }}
-      </p>
-      <img
-        v-else
-        :alt="props.alt"
-        :class="{
-          avatar__image: true,
-          [`avatar__image--${props.size}`]: true,
-          'avatar__image--anonymous': isAnon,
-        }"
-        :src="imgSrc"
-      />
-    </div>
-    <span
-      v-if="props.online"
-      :class="{ avatar__online: true, [`avatar__online--${props.size}`]: true }"
-    />
-  </div>
-</template>

package/src/components/Avatar/avatar.css

@@ -1,82 +0,0 @@
-@import '../../index.css';
-
-.avatar {
-  @apply relative grid place-items-center rounded-full overflow-hidden bg-[var(--primary-100)];
-
-  &__wrapper {
-    @apply relative max-w-min;
-  }
-
-  &--xs {
-    @apply w-6 h-6;
-  }
-  &--sm {
-    @apply w-8 h-8;
-  }
-  &--md {
-    @apply w-10 h-10;
-  }
-  &--lg {
-    @apply w-12 h-12;
-  }
-  &--xl {
-    @apply w-14 h-14;
-  }
-  &--2xl {
-    @apply w-16 h-16;
-  }
-
-  &__text {
-    @apply text-[var(--primary-500)] font-semibold;
-
-    &--xs {
-      @apply text-xs;
-    }
-    &--sm {
-      @apply text-sm;
-    }
-    &--md {
-      @apply text-base;
-    }
-    &--lg {
-      @apply text-xl;
-    }
-    &--xl {
-      @apply text-2xl;
-    }
-    &--2xl {
-      @apply text-2xl;
-    }
-  }
-
-  &__image {
-    @apply inset-0 object-cover;
-
-    &--anonymous {
-      @apply w-[40%] h-[40%];
-    }
-  }
-
-  &__online {
-    @apply absolute rounded-full bg-green-500 border-white;
-
-    &--xs {
-      @apply w-1.5 h-1.5 right-[1px] bottom-[1px] border;
-    }
-    &--sm {
-      @apply w-2 h-2 right-[1px] bottom-[1px] border;
-    }
-    &--md {
-      @apply w-2 h-2 right-0.5 bottom-0.5 border-[1.25px];
-    }
-    &--lg {
-      @apply w-3 h-3 right-[1.5px] bottom-[1.5px] border-[1.5px];
-    }
-    &--xl {
-      @apply w-3.5 h-3.5 right-0.5 bottom-0.5 border-2;
-    }
-    &--2xl {
-      @apply w-4 h-4 right-0.5 bottom-0.5 border-2;
-    }
-  }
-}

package/src/components/Avatar/avatar.spec.ts

@@ -1,38 +0,0 @@
-import { describe, it, expect } from 'vitest';
-import { mount } from '@vue/test-utils';
-import Avatar from './RAvatar.vue';
-
-describe('Avatar', () => {
-  it('should render correctly for image version', () => {
-    const wrapper = mount(Avatar, {
-      props: {
-        type: 'image',
-        size: 'sm',
-        src: 'https://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50',
-        alt: 'avatar',
-        online: true,
-      },
-    });
-
-    expect(wrapper.exists()).toBe(true);
-    expect(wrapper.find('.avatar').classes()).toContain('avatar--sm');
-    expect(wrapper.find('img').attributes('src')).toBe(
-      'https://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50'
-    );
-    expect(wrapper.find('img').attributes('alt')).toBe('avatar');
-    expect(wrapper.find('.avatar__online').exists()).toBe(true);
-  });
-
-  it('should render correctly for image version', () => {
-    const wrapper = mount(Avatar, {
-      props: {
-        type: 'text',
-        text: 'Hello World',
-        size: 'sm',
-      },
-    });
-    expect(wrapper.exists()).toBe(true);
-    expect(wrapper.find('.avatar').classes()).toContain('avatar--sm');
-    expect(wrapper.find('.avatar__text').text()).toBe('HW');
-  });
-});

package/src/components/Badge/Badge.mdx

@@ -1,112 +0,0 @@
-import { Canvas, Meta, Story, Controls } from '@storybook/blocks';
-import * as BadgeStories from './Badge.stories';
-
-<Meta of={BadgeStories} />
-
-# Badge
-
-A badge is a small, customizable component that is often used to display a notification, count, or status.
-
-- [Overview](#overview)
-
-- [Playground](#playground)
-
-- [Usage with props](#usage)
-
-- [Variants](#variants)
-
-- [Tips](#tips)
-
-### Overview <a id="overview" />
-
-A badge is a small visual element that is used to communicate a value or a status. It is typically used to show the number of items in a list, the status of a process, or a notification. Badges are often used in conjunction with buttons, icons, or other elements to provide additional information to the user.
-
-Badges should be used when it is important to quickly and clearly communicate a value or a status to the user. They are often used to show the number of unread items in a list, the status of a process, or to indicate that an element has been updated.
-
-Badges can be used in a variety of different contexts, but they are most commonly used in web and mobile applications. Some examples of where badges might be used include:
-
-- In a messaging app to indicate the number of unread messages
-- In a social media app to show the number of likes or comments on a post
-- In a task management app to indicate the number of tasks that are overdue or incomplete
-
-Our badge component has a `default` slot that can be used to display any content.
-
-<Canvas>
-  <Story of={BadgeStories.Overview} />
-</Canvas>
-
-### Playground <a id="playground" />
-
-> Changes you make in the controls will be reflected in the example above.
-
-<Controls of={BadgeStories.Overview} exclude={/^(click|default|on.*)$/} />
-
-## Usage with props <a id="usage" />
-
-### placement (optional)
-
-The **placement** prop is used to specify the position of the badge relative to its parent element. It can be set to _right_, _bottom_ or _left_.
-
-### variant (optional)
-
-The **variant** prop is used to specify the color and styling of the badge. In the example above, it is set to primary, which will apply the default primary color and style to the badge. It can be set to _primary_, _success_, _error_, _warning_, or _neutral_.
-
-### overlap (optional)
-
-The **overlap** prop is used to specify the overlapping status of the badge. In the example above, it is set to _false_, which will apply the default position of the badge.
-
-### hover (optional)
-
-The **hover** prop is a boolean value that specifies whether the badge should be visible only on hover. If it is set to true, the badge will only be visible when the user hovers over its parent element.
-
-### content (optional)
-
-The **content** prop is used to specify the text or number that should be displayed inside the badge. In this example, it is set to 3.
-
-### outside (optional)
-
-Finally, the **outside** prop is a boolean value that specifies whether the badge should be displayed outside of its parent element, rather than inside it. In this example, it is set to false, so the badge will be displayed inside its parent element.
-
-## Variants <a id="variants" />
-
-### Right
-
-<Canvas>
-  <Story of={BadgeStories.Right} />
-</Canvas>
-
-### With Content
-
-<Canvas>
-  <Story of={BadgeStories.WithContent} />
-</Canvas>
-
-### Hover
-
-<Canvas>
-  <Story of={BadgeStories.Hover} />
-</Canvas>
-
-### Bottom
-
-<Canvas>
-  <Story of={BadgeStories.Bottom} />
-</Canvas>
-
-### Left
-
-<Canvas>
-  <Story of={BadgeStories.Left} />
-</Canvas>
-
-## Tips
-
-💡 Keep the badge small and simple. The badge should be small enough to not distract from the rest of the interface, but large enough to be easily readable.
-
-💡 Use a clear and concise label. The label on the badge should be short and to the point, and should accurately convey the information that it is intended to communicate.
-
-💡 Use color to convey meaning. Different colors can be used to indicate different types of information, such as red for error messages and green for success messages.
-
-💡 Position the badge carefully. The badge should be positioned in a way that is easily visible and does not obstruct other elements in the interface.
-
-💡 Use badges sparingly. Overuse of badges can make the interface cluttered and difficult to read, so use them only when necessary to communicate important information to the user.

package/src/components/Badge/Badge.stories.ts

@@ -1,99 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3';
-import Badge from './RBadge.vue';
-import Icon from '../Icon/RIcon.vue';
-import Button from '../Button/RButton.vue';
-
-const DefaultArgs = {
-  variant: 'primary',
-  placement: 'right',
-  overlap: false,
-  hover: false,
-  content: '',
-  outside: false,
-};
-const DefaultArgTypes = {
-  variant: {
-    type: 'select',
-    options: ['primary', 'success', 'error', 'warning', 'neutral'],
-  },
-  placement: {
-    type: 'select',
-    options: ['right', 'bottom', 'left'],
-  },
-  onClick: {
-    action: 'click',
-  },
-};
-
-const BadgeStory = {
-  title: 'Components/Badge',
-  render: (args: any) => ({
-    components: { Badge, Icon },
-    setup: () => {
-      return { args };
-    },
-    template: `
-    <Badge v-bind="args" >
-      <template v-slot:default>
-        <Icon name="mdiEmail" size="24" />
-      </template>
-    </Badge>
-    `,
-    args: DefaultArgs,
-    argTypes: DefaultArgTypes,
-  }),
-} as Meta<any>;
-
-export default BadgeStory;
-
-type Story = StoryObj<typeof BadgeStory>;
-
-export const Overview: Story = {
-  args: {
-    placement: 'right',
-  },
-};
-
-export const Right: Story = {
-  args: {
-    placement: 'right',
-  },
-};
-
-export const WithContent = {
-  render: (args: any) => ({
-    components: { Badge, Button },
-    setup() {
-      return { args };
-    },
-    template: `
-    <Badge v-bind="args">
-      <template v-slot:default>
-        <Button icon="add" variant="primary">Hello World</Button>
-      </template>
-    </Badge>
-    `,
-  }),
-  args: {
-    ...DefaultArgs,
-    content: '32',
-  },
-};
-
-export const Hover: Story = {
-  args: {
-    hover: true,
-  },
-};
-
-export const Bottom: Story = {
-  args: {
-    placement: 'bottom',
-  },
-};
-
-export const Left: Story = {
-  args: {
-    placement: 'left',
-  },
-};

package/src/components/Badge/RBadge.vue

@@ -1,89 +0,0 @@
-<script setup lang="ts">
-import './badge.css';
-import { computed } from 'vue';
-
-export interface BadgeProps {
-  /**
-   * Variant of the Badge
-   * @type 'primary' | 'success' | 'warning' | 'error' | 'neutral'
-   * @default 'primary'
-   * @example
-   * <Badge variant="primary" />
-   */
-  variant?: 'primary' | 'success' | 'warning' | 'error' | 'neutral';
-
-  /**
-   * Placement of the Badge
-   * @type 'right' | 'bottom' | 'left'
-   * @default 'right'
-   * @example
-   * <Badge placement="right" />
-   */
-  placement?: 'right' | 'bottom' | 'left';
-
-  /**
-   * Overlap the Badge
-   * @type boolean
-   * @default false
-   * @example
-   * <Badge overlap />
-   */
-  overlap?: boolean;
-
-  /**
-   * Show the Badge on hover
-   * @type boolean
-   * @default false
-   * @example
-   * <Badge hover />
-   */
-  hover?: boolean;
-
-  /**
-   * Content of the Badge
-   * @type string | number
-   * @default ''
-   * @example
-   * <Badge content="1" />
-   */
-  content?: string | number;
-
-  /**
-   * Show the Badge outside
-   * @type boolean
-   * @default false
-   * @example
-   * <Badge outside />
-   */
-  outside?: boolean;
-}
-const props = withDefaults(defineProps<BadgeProps>(), {
-  variant: 'primary',
-  placement: 'right',
-  overlap: false,
-  hover: false,
-  content: '',
-  outside: false,
-});
-defineEmits(['click']);
-const classes = computed(() => {
-  return {
-    badge: true,
-    badge__content: props.content,
-    [`badge--overlap-${props.placement}`]: props.overlap,
-    [`badge--${props.placement}`]: props.placement,
-    [`badge--outside-${props.placement}`]: props.outside,
-    'badge--hover': props.hover,
-    'badge--no-content': !props.content,
-    [`badge--${props.variant}`]: props.variant,
-  };
-});
-</script>
-<template>
-  <div class="badge-wrapper group">
-    <span :class="classes" @click="$emit('click')">
-      {{ props.content }}
-    </span>
-    <slot />
-  </div>
-</template>

package/src/components/Badge/badge.css

@@ -1,63 +0,0 @@
-@import '../../index.css';
-
-.badge-wrapper {
-  @apply relative flex items-center justify-center max-w-max p-2;
-}
-
-.badge {
-  @apply absolute z-50 rounded-full py-0 px-1 bg-[var(--primary-500)];
-
-  &--right {
-    @apply -top-1 -right-1;
-  }
-  &--left {
-    @apply -top-1 -left-1;
-  }
-  &--bottom {
-    @apply -right-1 -bottom-1;
-  }
-  &--hover {
-    @apply opacity-0 group-hover:opacity-100 transition-all duration-500 ease-in-out;
-  }
-  &--outside-right {
-    @apply -top-2 -right-2;
-  }
-  &--outside-left {
-    @apply -top-2 -left-2;
-  }
-  &--outside-bottom {
-    @apply -right-2 -bottom-2;
-  }
-  &--overlap-right {
-    @apply top-0 right-0;
-  }
-  &--overlap-left {
-    @apply top-0 left-0;
-  }
-  &--overlap-bottom {
-    @apply right-0 bottom-0;
-  }
-  &--no-content {
-    @apply w-2 h-2 py-1;
-  }
-
-  &--primary {
-    @apply bg-[var(--primary-500)];
-  }
-  &--success {
-    @apply bg-[var(--success-500)];
-  }
-  &--warning {
-    @apply bg-[var(--warning-500)];
-  }
-  &--error {
-    @apply bg-[var(--error-500)];
-  }
-  &--neutral {
-    @apply bg-[var(--neutral-500)];
-  }
-
-  &__content {
-    @apply grid place-items-center leading-[14px] text-[10px] text-white font-bold;
-  }
-}

package/src/components/Badge/badge.spec.ts

@@ -1,20 +0,0 @@
-import { describe, it, expect } from 'vitest';
-
-import { mount } from '@vue/test-utils';
-import Badge from './RBadge.vue';
-
-describe('Badge', () => {
-  it('renders properly', () => {
-    const wrapper = mount(Badge, {
-      props: {
-        placement: 'right',
-        size: 'small',
-        content: '1',
-      },
-    });
-    expect(wrapper.element.classList.contains('badge'));
-    expect(wrapper.element.classList.contains('badge--right'));
-    expect(wrapper.element.classList.contains('badge--small'));
-    expect(wrapper.element.innerHTML.includes('1'));
-  });
-});

package/src/components/Box/Box.mdx

@@ -1,20 +0,0 @@
-import { Canvas, Meta, Story, Controls } from '@storybook/blocks';
-import * as BoxStories from './Box.stories';
-
-<Meta of={BoxStories} />
-
-# Box
-
-Box is the most abstract component on top of which all other Rocket UI components are built. By default, it renders a `div` element
-
-> A simple box Components
-
-<Canvas>
-  <Story of={BoxStories.Overview} />
-</Canvas>
-
-### Playground <a id="playground" />
-
-> Changes you make in the controls will be reflected in the example above.
-
-<Controls of={BoxStories.Overview} exclude={/^(click|default|on.*)$/} />

package/src/components/Box/Box.stories.ts

@@ -1,56 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3';
-import Box from './RBox.vue';
-
-const DefaultArgTypes = {
-  is: {
-    type: 'select',
-    options: ['div', 'span', 'p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'],
-  },
-  display: {
-    type: 'select',
-    options: [
-      'block',
-      'inline-block',
-      'inline',
-      'flex',
-      'inline-flex',
-      'grid',
-      'inline-grid',
-      'table',
-      'inline-table',
-      'contents',
-      'list-item',
-      'none',
-    ],
-  },
-};
-const DefaultArgs = {
-  is: 'div',
-  display: 'block',
-  width: 'auto',
-  height: 'auto',
-  minWidth: 'auto',
-  minHeight: 'auto',
-  maxWidth: 'auto',
-  maxHeight: 'auto',
-};
-const BoxStory = {
-  title: 'Layout/Box',
-  component: Box,
-  setup(args: any) {
-    return { args };
-  },
-  template: `<Box v-bind="args" />`,
-  args: DefaultArgs,
-  argTypes: DefaultArgTypes,
-} as Meta<typeof Box>;
-
-export default BoxStory;
-
-type Story = StoryObj<typeof BoxStory>;
-
-export const Overview: Story = {
-  args: {
-    default: 'Hello World',
-  },
-};