@rocketui/vue 0.0.46 → 0.0.47

package/src/components/Alert/Alert.mdx

@@ -0,0 +1,120 @@
+import { Canvas, Meta, Story, Controls } from '@storybook/blocks';
+
+import * as AlertStories from './Alert.stories';
+
+<Meta of={AlertStories} />
+
+# Alert
+
+Alert is a component that displays a message to the user. It is often used to display information, warning, error, or success messages.
+
+- [Overview](#overview)
+
+- [Playground](#playground)
+
+- [Usage with props](#usage)
+
+- [Variants](#variants)
+
+- [Customizable Slots](#customizable-slots)
+
+- [Tips](#tips)
+
+## Overview <a id="overview" />
+
+An Alert component is a user interface (UI) element that is used to display important information to the user. It can be used to provide feedback, success or error messages, or to simply draw the user's attention to something. Alert components are typically used in situations where the user needs to be notified of something immediately, or where the information being displayed is important and requires the user's attention.
+
+For example, an Alert component could be used to display a success message after the user has completed a form or submitted some data, to display an error message if there is a problem with the user's input, to display a warning if the user is about to perform an action that could have unintended consequences, or just to pass important information to the user.
+
+In general, Alert components should be used sparingly, as overusing them can make your UI cluttered and difficult to read. It's important to use Alert components only when necessary, and to provide clear and concise messages that help the user understand what is happening.
+
+<Canvas>
+  <Story of={AlertStories.Overview} />
+</Canvas>
+
+## Playground <a id="playground" />
+
+> Changes you make in the controls will be reflected in the example above. Try it yourself!
+
+<Controls of={AlertStories.Overview} exclude={/^(click|close|on.*)$/} />
+
+## Usage with props <a id="usage" />
+
+### type (required)
+
+The **type** prop determines the variant of the Alert component. The following values are accepted:
+
+- **success**: Indicates that a successful action has occurred.
+- **error**: Indicates that an error has occurred.
+- **warning**: Indicates that the user should be cautious about something.
+- **info**: Provides additional information to the user.
+
+### title (optional)
+
+The **title** prop specifies the title of the Alert component. It should be short and concise, and should clearly convey the purpose of the Alert.
+
+## description (optional)
+
+The **description** prop provides a longer description of the Alert component. It can be used to provide more detailed information or instructions to the user.
+
+### size (optional)
+
+The **size** prop determines the size of the Alert component. The following values are accepted:
+
+- **small**: Renders a small Alert component.
+- **medium**: Renders a medium-sized Alert component.
+- **large**: Renders a large Alert component.
+
+### closable (optional)
+
+If **closable** prop is set to true, the Alert component will include a close button that the user can use to dismiss the Alert.
+
+## Variants <a id="variants" />
+
+> Our system has 4 Alert variants: **Success**, **Error**, **Information** and **Warning**.
+
+### Success
+
+<Canvas>
+  <Story of={AlertStories.Success} />
+</Canvas>
+
+### Error
+
+<Canvas>
+  <Story of={AlertStories.Error} />
+</Canvas>
+
+### Information
+
+<Canvas>
+  <Story of={AlertStories.Information} />
+</Canvas>
+
+### Warning
+
+<Canvas>
+  <Story of={AlertStories.Warning} />
+</Canvas>
+
+## Customizable Slots <a id="customizable-slots" />
+
+### `#close`
+
+> This `close` slot can be used for creating your own custom close buttons like this one example below 👇
+
+<Canvas>
+  <Story of={AlertStories.CustomCloseButton} />
+</Canvas>
+
+### Tips <a id="tips" />
+
+💡 Use the title prop to provide a clear and concise message to the user.
+
+💡 Use the description prop to provide more detailed information or instructions, if necessary.
+
+💡 Choose the appropriate variant (success, error, warning, or info) for the Alert based on the content it is displaying.
+
+💡 Keep the Alert small and concise. If you need to provide a lot of information, consider using a separate component or modal instead of trying to cram everything into the Alert.
+
+💡 If the Alert is closable, make sure to provide clear instructions on how to dismiss it (e.g. "Click the 'X' to close this Alert").

package/src/components/Alert/Alert.stories.ts

@@ -0,0 +1,118 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+import Alert from './RAlert.vue';
+import Icon from '../Icon/RIcon.vue';
+
+const DefaultArgs = {
+  type: 'success',
+  title: 'Alert Title',
+  variant: 'ghost',
+  description: '',
+  closable: true,
+  closeText: 'Close',
+  block: false,
+};
+
+const DefaultArgTypes = {
+  type: {
+    type: 'select',
+    options: ['success', 'info', 'warning', 'error'],
+  },
+  variant: {
+    type: 'select',
+    options: ['outline', 'solid', 'ghost'],
+  },
+  onClose: {
+    action: 'close',
+  },
+};
+
+const AlertStory = {
+  component: Alert,
+  setup: (args: typeof Alert) => {
+    return { args };
+  },
+  template: `<Alert v-bind="args" @close="click"/>`,
+  args: DefaultArgs,
+  argTypes: DefaultArgTypes,
+} as Meta<typeof Alert>;
+
+export default AlertStory;
+
+type Story = StoryObj<typeof AlertStory>;
+
+export const Overview: Story = {
+  args: {
+    type: 'success',
+    title: 'Alert Title',
+    description:
+      'A type of alert which appears in a layer above other content, visually similar to a mobile or desktop push notification.',
+  },
+};
+
+export const Success: Story = {
+  args: {
+    type: 'success',
+    title: 'Success',
+    description:
+      'Success Variant! This is a short but descriptive message that indicates a successful action.',
+  },
+};
+
+export const Error: Story = {
+  args: {
+    type: 'error',
+    title: 'Error',
+    description:
+      'Error Variant! This is a short but descriptive message that indicates a negative action.',
+  },
+};
+
+export const Information: Story = {
+  args: {
+    type: 'info',
+    title: 'Info',
+    description:
+      'Info Variant! This is a short but descriptive message that indicates a neutral informative action.',
+  },
+};
+
+export const Warning: Story = {
+  args: {
+    type: 'warning',
+    title: 'Warning',
+    description:
+      'Warning Variant! This is a short but descriptive message that indicates a negative or dangerous action.',
+  },
+};
+
+export const OnlyTitle: Story = {
+  args: {
+    type: 'success',
+    title: 'Only Title',
+  },
+};
+
+export const CustomCloseButton = {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  render: (args: any) => ({
+    components: { Alert, Icon },
+    setup: () => {
+      return { args };
+    },
+    template: `
+    <Alert
+      v-bind="args"
+    >
+      <template #custom-close>
+        <Icon name="mdiClose" />
+      </template>
+    </Alert>
+    `,
+  }),
+  args: {
+    type: 'info',
+    title: 'With a custom button',
+    description:
+      'This alert box looks very similar to our default examples but it contains a custom close button in it!',
+  },
+};

package/src/components/Alert/RAlert.vue

@@ -0,0 +1,119 @@
+<script setup lang="ts">
+import './alert.css';
+import { computed } from 'vue';
+import Icon from '../Icon/RIcon.vue';
+
+export interface Props {
+  /**
+   * Type of the Alert
+   * @type 'success' | 'error' | 'warning' | 'info'
+   * @default 'info'
+   * @example
+   * <Alert type="success" />
+   */
+  type: 'success' | 'error' | 'warning' | 'info';
+
+  /**
+   * Title of the Alert
+   * @type string
+   * @default ''
+   * @example
+   * <Alert title="Title" />
+   */
+  title: string;
+
+  /**
+   * Variant of the Alert
+   * @type 'solid' | 'outline' | 'ghost'
+   * @default 'ghost'
+   * @example
+   * <Alert variant="ghost" />
+   */
+  variant?: 'solid' | 'outline' | 'ghost';
+
+  /**
+   * Description of the Alert
+   * @type string
+   * @default ''
+   * @example
+   * <Alert description="Description" />
+   */
+  description?: string;
+
+  /**
+   * Allow to close the Alert
+   * @type boolean
+   * @default true
+   * @example
+   * <Alert closable />
+   */
+  closable?: boolean;
+
+  /**
+   * Block appearance of the Alert
+   * @type boolean
+   * @default false
+   * @example
+   * <Alert block />
+   */
+  block?: boolean;
+}
+
+const emit = defineEmits(['close']);
+const props = withDefaults(defineProps<Props>(), {
+  type: 'info',
+  title: '',
+  variant: 'ghost',
+  description: '',
+  closable: true,
+  block: false,
+});
+const classes = computed(() => {
+  return {
+    ' r-alert': true,
+    [`r-alert--${props.variant}`]: true,
+    'r-alert--block': props.block,
+    [`r-alert--${props.variant}--${props.type}`]: true,
+  };
+});
+
+const icon = computed(() => {
+  return {
+    success: 'mdiCheckCircle',
+    error: 'mdiAlertCircle',
+    warning: 'mdiAlert',
+    info: 'mdiInformation',
+  }[props.type];
+});
+
+const close = () => {
+  emit('close');
+};
+</script>
+<template>
+  <div :class="classes">
+    <div class="r-alert__icon">
+      <slot name="alert-icon">
+        <Icon :name="icon" :size="24" />
+      </slot>
+    </div>
+    <div class="r-alert__content">
+      <slot name="content">
+        <p class="r-alert__content__title">{{ props.title }}</p>
+        <p v-if="props.description" class="r-alert__content__description">
+          {{ props.description }}
+        </p>
+      </slot>
+    </div>
+    <div v-if="props.closable" class="r-alert__close">
+      <slot name="custom-close">
+        <Icon
+          class="r-alert__close__button"
+          name="mdiClose"
+          :size="16"
+          @click="close"
+        />
+      </slot>
+    </div>
+  </div>
+</template>

package/src/components/Alert/alert.css

@@ -0,0 +1,136 @@
+@import '../../index.css';
+
+.r-alert {
+  @apply inline-flex px-4 py-3 rounded-lg text-sm transition-transform duration-1000 box-border;
+
+  &--block {
+    @apply w-full;
+
+    .r-alert__content {
+      @apply max-w-full;
+    }
+  }
+  &--solid {
+    @apply text-[var(--white)];
+
+    .r-alert__content {
+      @apply text-[var(--white)];
+
+      .r-alert__content__description {
+        @apply text-[var(--white)];
+      }
+    }
+
+    .r-alert__close {
+      @apply text-[var(--white)];
+    }
+
+    &--success {
+      @apply bg-[var(--success-500)];
+    }
+
+    &--error {
+      @apply bg-[var(--error-500)];
+    }
+
+    &--warning {
+      @apply bg-[var(--warning-500)];
+    }
+
+    &--info {
+      @apply bg-[var(--info-500)];
+    }
+  }
+
+  &--outline {
+    @apply bg-transparent border border-solid;
+
+    &--success {
+      @apply border-[var(--success-500)] text-[var(--success-500)];
+
+      .r-alert__content__description {
+        @apply text-[var(--success-500)];
+      }
+    }
+
+    &--error {
+      @apply border-[var(--error-500)] text-[var(--error-500)];
+
+      .r-alert__content__description {
+        @apply text-[var(--error-500)];
+      }
+    }
+
+    &--warning {
+      @apply border-[var(--warning-500)] text-[var(--warning-500)];
+
+      .r-alert__content__description {
+        @apply text-[var(--warning-500)];
+      }
+    }
+
+    &--info {
+      @apply border-[var(--info-500)] text-[var(--info-500)];
+
+      .r-alert__content__description {
+        @apply text-[var(--info-500)];
+      }
+    }
+  }
+
+  &--ghost {
+    @apply border-none text-[var(--neutral-900)];
+
+    &--success {
+      @apply bg-[var(--success-100)];
+
+      .r-alert__icon {
+        @apply text-[var(--success-500)];
+      }
+    }
+
+    &--error {
+      @apply bg-[var(--error-100)];
+
+      .r-alert__icon {
+        @apply text-[var(--error-500)];
+      }
+    }
+
+    &--warning {
+      @apply bg-[var(--warning-100)];
+
+      .r-alert__icon {
+        @apply text-[var(--warning-500)];
+      }
+    }
+
+    &--info {
+      @apply bg-[var(--info-100)];
+
+      .r-alert__icon {
+        @apply text-[var(--info-500)];
+      }
+    }
+  }
+
+  &__icon {
+    @apply grid place-items-start;
+  }
+
+  &__content {
+    @apply w-full grid place-items-start justify-items-start px-4 min-w-[21rem] max-w-sm;
+
+    &__title {
+      @apply font-medium;
+    }
+
+    &__description {
+      @apply text-[var(--neutral-600)];
+    }
+  }
+
+  &__close {
+    @apply grid place-items-start cursor-pointer text-[var(--neutral-900)];
+  }
+}

package/src/components/Alert/alert.spec.ts

@@ -0,0 +1,32 @@
+import { describe, it, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+import Alert from './RAlert.vue';
+
+describe('Alert', () => {
+  it('should render correctly', () => {
+    const wrapper = mount(Alert, {
+      props: {
+        type: 'success',
+        title: 'Alert Title',
+        description: 'Alert Description',
+        size: 'small',
+        closable: true,
+      },
+    });
+
+    expect(wrapper.classes()).toContain('alert');
+    expect(wrapper.find('.texts__title').text()).toBe('Alert Title');
+    expect(wrapper.find('.texts__description').text()).toBe(
+      'Alert Description'
+    );
+    expect(wrapper.find('.alert').classes()).toContain('alert--small');
+    expect(
+      wrapper
+        .find('.alert')
+        .trigger('click')
+        .then(() => {
+          expect(wrapper.emitted('close')).toBeTruthy();
+        })
+    );
+  });
+});

package/src/components/Avatar/Avatar.mdx

@@ -0,0 +1,96 @@
+import { Canvas, Meta, Story, Controls } from '@storybook/blocks';
+import * as AvatarStories from './Avatar.stories';
+
+<Meta of={AvatarStories} />
+
+# Avatar
+
+Avatar component displays a visual representation of a user or an entity.
+
+- [Overview](#overview)
+
+- [Playground](#playground)
+
+- [Usage with props](#usage)
+
+- [Tips](#tips)
+
+### Overview <a id="overview" />
+
+Avatar is typically used to identify a user or entity within a user interface, and can be displayed in various forms such as an image, text, or initials.
+
+To use an Avatar component, you can pass the necessary props to configure it to display the avatar in the desired way. For example, you can specify the type of avatar to display (e.g. image or text), the size of the avatar, and any additional props such as the source of the image or the text to display.
+
+<Canvas>
+  <Story of={AvatarStories.Overview} />
+</Canvas>
+
+### Playground <a id="playground" />
+
+> Changes you make in the controls will be reflected in the example above.
+
+<Controls of={AvatarStories.Overview} exclude={/^(click|close.*)$/} />
+
+## Stories
+
+### Image
+
+<Canvas>
+  <Story of={AvatarStories.Image} />
+</Canvas>
+
+### Text
+
+<Canvas>
+  <Story of={AvatarStories.Text} />
+</Canvas>
+
+### Anonymous
+
+<Canvas>
+  <Story of={AvatarStories.Anonymous} />
+</Canvas>
+
+### Online
+
+<Canvas>
+  <Story of={AvatarStories.Online} />
+</Canvas>
+
+## Usage with props <a id="usage" />
+
+### type (optional)
+
+The **type** props is for the type of avatar to display. Can be either "image" or "text".
+
+### src (optional)
+
+The **src** props is for the source of the image to display. This prop is only used when type is set to "image".
+
+### alt (optional)
+
+The **alt** props is for the alt text for the image. This prop is only used when type is set to "image".
+
+### size (optional)
+
+The **size** props is for the size of the avatar. Can be one of "xs", "sm", "md", "lg", "xl", or "2xl".
+
+### online (optional)
+
+The **online** props is for whether to show a green circle indicator to signify that the user is online.
+
+### text (optional)
+
+The **text** props is for the text to display when type is set to "text".
+
+### Tips <a id="tips" />
+
+💡 Use appropriate sizes for different contexts: The size of the avatar should be appropriate for the context in which it is being used. For example, a small avatar might be suitable for a list of users, while a larger avatar might be more suitable for a profile page.
+
+💡 Use initials for text avatars: If you are using a text avatar, it is a good idea to use the user's initials rather than their full name. This can help to keep the avatar compact and easy to read.
+
+💡 Use images sparingly: If you are using an image avatar, be mindful of the number of images you are loading on the page. If you are displaying a large number of avatars, it may be more efficient to use text avatars instead.
+
+💡 Use alternative text for accessibility: When using an image avatar, make sure to include alt text to provide a textual representation of the image for screen readers and other assistive technologies.
+
+💡 Consider the context of use: Think about the context in which the avatar will be used and design it accordingly. For example, if the avatar is being used in a chat application, you might want to include an online status indicator.

package/src/components/Avatar/Avatar.stories.ts

@@ -0,0 +1,65 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+import Avatar from './RAvatar.vue';
+
+const DefaultArgs = {
+  type: 'image',
+  size: '2xl',
+  src: 'https://avatars.githubusercontent.com/u/12534660?v=4',
+  alt: 'Avatar',
+  online: false,
+  text: '',
+};
+const DefaultArgTypes = {
+  type: {
+    type: 'select',
+    options: ['image', 'text'],
+  },
+  size: {
+    type: 'select',
+    options: ['xs', 'sm', 'md', 'lg', 'xl', '2xl'],
+  },
+};
+
+const AvatarStory = {
+  title: 'Components/Avatar',
+  component: Avatar,
+  setup: (args: typeof Avatar) => {
+    return { args };
+  },
+  template: `<Avatar v-bind="args"/>`,
+  args: DefaultArgs,
+  argTypes: DefaultArgTypes,
+} as Meta<typeof Avatar>;
+
+export default AvatarStory;
+
+type Story = StoryObj<typeof AvatarStory>;
+
+export const Overview: Story = {
+  args: {},
+};
+
+export const Image: Story = {
+  args: {
+    type: 'image',
+    src: 'https://avatars.githubusercontent.com/u/12534660?v=4',
+  },
+};
+
+export const Text: Story = {
+  args: {
+    type: 'text',
+    text: 'Avatar Text',
+  },
+};
+
+export const Anonymous: Story = {
+  args: {},
+};
+
+export const Online: Story = {
+  args: {
+    online: true,
+    src: 'https://avatars.githubusercontent.com/u/12534660?v=4',
+  },
+};