@rocketui/vue 0.0.46 → 0.0.47

package/src/components/Box/RBox.vue

@@ -0,0 +1,97 @@
+<script setup lang="ts">
+import { computed, type CSSProperties, type HTMLAttributes } from 'vue';
+import '../../index.css';
+export interface IProps extends HTMLAttributes {
+  /**
+   * The HTML tag to use for the root element.
+   * @type HTMLAttributes['is']
+   * @default 'div'
+   * @example
+   * <Box is="span" />
+   * @link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/is
+   */
+  is: HTMLAttributes['is'];
+
+  /**
+   * Shorthand for `width` style prop
+   * @type CSSProperties["width"]
+   * @default 'auto'
+   * @example
+   * <Box width="100%" />
+   * @link https://developer.mozilla.org/en-US/docs/Web/CSS/width
+   */
+  width?: CSSProperties['width'];
+
+  /**
+   * Shorthand for `height` style prop
+   * @type CSSProperties["height"]
+   * @default 'auto'
+   * @example
+   * <Box height="100%" />
+   * @link https://developer.mozilla.org/en-US/docs/Web/CSS/height
+   */
+  height?: CSSProperties['height'];
+
+  /**
+   * Shorthand for `minWidth` style prop
+   * @type CSSProperties["minWidth"]
+   * @example
+   * <Box minWidth="100%" />
+   * @link https://developer.mozilla.org/en-US/docs/Web/CSS/min-width
+   */
+  minWidth?: CSSProperties['minWidth'];
+
+  /**
+   * Shorthand for `minHeight` style prop
+   * @type CSSProperties["minHeight"]
+   * @example
+   * <Box minHeight="100%" />
+   * @link https://developer.mozilla.org/en-US/docs/Web/CSS/min-height
+   */
+  minHeight?: CSSProperties['minHeight'];
+
+  /**
+   * Shorthand for `maxWidth` style prop
+   * @type CSSProperties["maxWidth"]
+   * @example
+   * <Box maxWidth="100%" />
+   * @link https://developer.mozilla.org/en-US/docs/Web/CSS/max-width
+   */
+  maxWidth?: CSSProperties['maxWidth'];
+
+  /**
+   * Shorthand for `maxHeight` style prop
+   * @type CSSProperties["maxHeight"]
+   * @example
+   * <Box maxHeight="100%" />
+   * @link https://developer.mozilla.org/en-US/docs/Web/CSS/max-height
+   */
+  maxHeight?: CSSProperties['maxHeight'];
+
+  /**
+   * Shorthand for `display` style prop
+   * @type CSSProperties["display"]
+   * @default 'block'
+   * @example
+   * <Box display="flex" />
+   * @link https://developer.mozilla.org/en-US/docs/Web/CSS/display
+   */
+  display?: CSSProperties['display'];
+}
+const props = defineProps<IProps>();
+const styles = computed(() => ({
+  display: props.display || 'block',
+  width: props.width,
+  height: props.height,
+  minWidth: props.minWidth,
+  minHeight: props.minHeight,
+  maxWidth: props.maxWidth,
+}));
+const as = computed(() => props.is || 'div');
+</script>
+
+<template>
+  <component :is="as" class="box" :style="styles">
+    <slot />
+  </component>
+</template>

package/src/components/Breadcrumb/Breadcrumb.stories.ts

@@ -0,0 +1,115 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+import Breadcrumb from './RBreadcrumb.vue';
+
+const BreadcrumbStory = {
+  title: 'Components/Breadcrumb',
+  component: Breadcrumb,
+  setup: (args: typeof Breadcrumb) => {
+    return { args };
+  },
+  template: `<Breadcrumb v-bind="args" />`,
+  args: {
+    items: [
+      {
+        title: 'Ads Accounts',
+        to: '/ads-accounts',
+      },
+      {
+        title: 'Ad Account Detail',
+        to: '/ads-accounts/123',
+      },
+      {
+        title: 'Transaction History',
+        to: '/ads-accounts/123/transaction-history',
+      },
+    ],
+    seperator: 'mdiSlashForward',
+  },
+  tags: ['autodocs'],
+} as Meta<typeof Breadcrumb>;
+
+export default BreadcrumbStory;
+
+type Story = StoryObj<typeof BreadcrumbStory>;
+
+export const Overview: Story = {};
+
+export const WithSeperator: Story = {
+  args: {
+    seperator: 'mdiChevronRight',
+  },
+};
+
+export const WithItemIcon: Story = {
+  args: {
+    items: [
+      {
+        title: 'Ads Accounts',
+        to: '/ads-accounts',
+        icon: 'mdiAdvertisements',
+      },
+      {
+        title: 'Ad Account Detail',
+        to: '/ads-accounts/123',
+        icon: 'mdiAccount',
+      },
+      {
+        title: 'Transaction History',
+        to: '/ads-accounts/123/transaction-history',
+        icon: 'mdiAccountFilter',
+      },
+    ],
+    seperator: 'mdiSlashForward',
+  },
+};
+
+export const WithItemOnlyIcon: Story = {
+  args: {
+    items: [
+      {
+        title: 'Ads Accounts',
+        to: '/ads-accounts',
+        icon: 'mdiAdvertisements',
+        onlyIcon: true,
+      },
+      {
+        title: 'Ad Account Detail',
+        to: '/ads-accounts/123',
+        icon: 'mdiAccount',
+        onlyIcon: true,
+      },
+      {
+        title: 'Transaction History',
+        to: '/ads-accounts/123/transaction-history',
+        icon: 'mdiAccountFilter',
+        onlyIcon: true,
+      },
+    ],
+    seperator: 'mdiChevronRight',
+  },
+};
+
+export const LastItemWithIcon: Story = {
+  args: {
+    items: [
+      {
+        title: 'Ads Accounts',
+        to: '/ads-accounts',
+        icon: 'mdiAdvertisements',
+        onlyIcon: true,
+      },
+      {
+        title: 'Ad Account Detail',
+        to: '/ads-accounts/123',
+        icon: 'mdiAccount',
+        onlyIcon: true,
+      },
+      {
+        title: 'Transaction History',
+        to: '/ads-accounts/123/transaction-history',
+        icon: 'mdiAccountFilter',
+      },
+    ],
+    seperator: 'mdiSlashForward',
+  },
+};

package/src/components/Breadcrumb/RBreadcrumb.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import './breadcrumb.css';
+import { defineProps, withDefaults } from 'vue';
+import RIcon from '../Icon/RIcon.vue';
+export interface BreadcrumbItem {
+  title: string;
+  to: string;
+  icon?: string;
+  onlyIcon?: boolean;
+}
+
+const props = withDefaults(
+  defineProps<{
+    items: BreadcrumbItem[];
+    seperator?: string;
+  }>(),
+  {
+    items: () => [] as BreadcrumbItem[],
+    seperator: 'mdiChevronRight',
+  }
+);
+</script>
+<template>
+  <div class="r-breadcrumb">
+    <div class="r-breadcrumb__item" v-for="(item, i) in props.items" :key="i">
+      <router-link :to="item.to" class="r-breadcrumb__link">
+        <slot name="item-icon">
+          <RIcon v-if="item.icon" :name="item.icon" />
+        </slot>
+        <span v-if="!item.onlyIcon" class="r-breadcrumb__title">{{
+          item.title
+        }}</span>
+      </router-link>
+      <slot name="custom-seperator">
+        <RIcon
+          v-if="i !== items.length - 1 && props.seperator"
+          :name="props.seperator"
+          class="r-breadcrumb__separator"
+        />
+      </slot>
+    </div>
+  </div>
+</template>

package/src/components/Breadcrumb/breadcrumb.css

@@ -0,0 +1,29 @@
+@import '../../index.css';
+
+.r-breadcrumb {
+  @apply flex items-center;
+
+  &__item {
+    @apply flex items-center cursor-pointer;
+
+    &:last-child {
+      @apply pointer-events-none;
+    }
+  }
+
+  &__link {
+    @apply flex text-2xl text-[var(--breadcrumb-text-color)] hover:text-[var(--breadcrumb-text-color-hover)] gap-2 items-center;
+
+    &:last-child {
+      @apply font-bold !text-[var(--breadcrumb-text-color-active)];
+    }
+
+    &:not(:last-child) {
+      @apply hover:underline font-medium;
+    }
+  }
+
+  &__separator {
+    @apply flex items-center mx-2 text-[var(--breadcrumb-text-color)];
+  }
+}

package/src/components/Button/Button.mdx

@@ -0,0 +1,148 @@
+import { Canvas, Meta, Story, Controls } from '@storybook/blocks';
+import * as ButtonStories from './Button.stories';
+
+<Meta of={ButtonStories} />
+
+# Button
+
+Button is a clickable element that is used to trigger an action or event, such as submitting a form, opening a dialog, canceling an action, or performing a delete operation.
+
+- [Overview](#overview)
+
+- [Playground](#playground)
+
+- [Usage with props](#usage)
+
+- [Variants](#variants)
+
+- [Tips](#tips)
+
+### Overview <a id="overview" />
+
+A button component is a reusable piece of code that can be used in any part of a website or application. It is typically represented by a text or an icon that represents the action that will be performed when the user clicks on it.
+
+<Canvas>
+  <Story of={ButtonStories.Overview} />
+</Canvas>
+
+### Playground <a id="playground" />
+
+<Controls
+  of={ButtonStories.Overview}
+  exclude={/^(click|content|default|custom-icon|on.*)$/}
+/>
+
+## Usage with props <a id="usage" />
+
+### variant (required)
+
+The **variant** prop allows you to specify the appearance of the button. The possible values for this prop are primary, secondary, text, and outline.
+
+### loading (optional)
+
+The **loading** prop allows you to specify whether the button is in a loading state. When the button is in a loading state, it will display a loading indicator (e.g. a spinning spinner) instead of the button text.
+To set the button to a loading state, you can pass in the value true to the loading prop.
+
+### disabled (optional)
+
+The **disabled** prop allows you to specify whether the button is disabled. A disabled button is not interactive and cannot be clicked on.
+To disable a button, you can pass in the value true to the disabled prop.
+
+### prependIcon (optional)
+
+The **prependIcon** prop allows you to specify an icon that will be placed before the button text. This can be used to add visual context to the button.
+To add an icon to the button, you can pass in the name of the icon as a string to the prependIcon prop.
+
+### appendIcon (optional)
+
+The **appendIcon** prop is similar to the prependIcon prop, but it allows you to specify an icon that will be placed after the button text.
+To add an icon to the button, you can pass in the name of the icon as a string to the appendIcon prop.
+
+### size (optional)
+
+The **size** prop allows you to specify the size of the button. The possible values for this prop are: small, medium, and large.
+
+### height (optional)
+
+The **height** prop allows you to specify the height of the button. This can be useful if you want to create buttons with different heights, or if you want to match the height of the button to the height of other elements on the page.
+To specify the height of the button, you can pass in a numeric value (in pixels) to the height prop.
+
+### block (optional)
+
+The **block** prop allows you to specify whether the button should be displayed as a block element. When a button is a block element, it will take up the full width of its container.
+To make a button a block element, you can pass in the value true to the block prop.
+
+### backgroundColor (optional)
+
+The **backgroundColor** prop allows you to specify the background color of the button. This can be useful if you want to create buttons with different background colors, or if you want to match the background color of the button to the color scheme of your website or application.
+To specify the background color of the button, you can pass in a valid CSS color value to the backgroundColor prop.
+
+## Variants <a id="variants" />
+
+### Primary
+
+<Canvas>
+  <Story of={ButtonStories.Primary} />
+</Canvas>
+
+### Secondary
+
+<Canvas>
+  <Story of={ButtonStories.Secondary} />
+</Canvas>
+
+### Outline
+
+<Canvas>
+  <Story of={ButtonStories.Outline} />
+</Canvas>
+
+### Text
+
+<Canvas>
+  <Story of={ButtonStories.Text} />
+</Canvas>
+
+### Danger
+
+<Canvas>
+  <Story of={ButtonStories.Danger} />
+</Canvas>
+
+### Link
+
+<Canvas>
+  <Story of={ButtonStories.Link} />
+</Canvas>
+
+### `#Custom Icon Slot`
+
+<Canvas>
+  <Story of={ButtonStories.CustomIcon} />
+</Canvas>
+
+### Unstyled
+
+#### \* Not yet implemented in the library
+
+<Canvas>
+  <Story of={ButtonStories.Unstyled} />
+</Canvas>
+
+### Tips <a id="tips" />
+
+💡 Use the variant prop to create buttons with different appearances, such as primary, secondary, text, and outline.
+
+💡 Use the loading prop to show a loading indicator on the button when it is performing an action.
+
+💡 Use the disabled prop to make a button non-interactive when it is not needed.
+
+💡 Use the prependIcon and appendIcon props to add visual context to the button.
+
+💡 Use the size prop to create buttons with different sizes, such as small, medium, and large.
+
+💡 Use the height prop to match the height of the button to the height of other elements on the page.
+
+💡 Use the block prop to make the button take up the full width of its container.
+
+💡 Use the backgroundColor prop to match the background color of the button to the color scheme of your website or application.

package/src/components/Button/Button.spec.ts

@@ -0,0 +1,29 @@
+import { describe, it, expect } from 'vitest';
+
+import { mount } from '@vue/test-utils';
+import Button from './RButton.vue';
+
+describe('Button', () => {
+  it('renders properly', () => {
+    const wrapper = mount(Button, {
+      props: {
+        variant: 'primary',
+        size: 'large',
+        type: 'button',
+        backgroundColor: '#fff',
+      },
+    });
+    expect(wrapper.classes()).toContain('button');
+    expect(wrapper.classes()).toContain('button--primary');
+    expect(wrapper.attributes('type')).toBe('button');
+    expect(wrapper.exists()).toBe(true);
+    expect(wrapper.find('.button').attributes('type')).toBe('button');
+  });
+});
+describe('when clicked', () => {
+  it('emits an event', () => {
+    const wrapper = mount(Button);
+    wrapper.trigger('click');
+    expect(wrapper.emitted().click).toBeTruthy();
+  });
+});

package/src/components/Button/Button.stories.ts

@@ -0,0 +1,118 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+import Button from './RButton.vue';
+import Icon from '../Icon/RIcon.vue';
+
+const DefaultArgTypes = {
+  variant: {
+    type: 'select',
+    options: ['primary', 'secondary', 'text', 'outline'],
+  },
+  size: {
+    type: 'select',
+    options: ['small', 'medium', 'large'],
+  },
+  backgroundColor: {
+    control: {
+      type: 'color',
+    },
+  },
+  onClick: {
+    action: 'click',
+  },
+};
+
+const WithCustomIconSlot = {
+  render: (args: any) => ({
+    components: { Button, Icon },
+    setup: () => {
+      return {
+        args,
+      };
+    },
+    template: `
+    <Button v-bind="args">
+      <template v-slot:custom-icon>
+        <Icon name="mdiFingerprint"/>
+      </template>
+    </Button>`,
+  }),
+  argTypes: DefaultArgTypes,
+  args: {},
+} as Meta<typeof Button>;
+
+const ButtonStory = {
+  title: 'Form/Button',
+  component: Button,
+  setup(args: typeof Button) {
+    return {
+      args,
+    };
+  },
+  template: `<Button v-bind="args"/>`,
+  args: {
+    variant: 'primary',
+    default: 'Button',
+  },
+  argTypes: DefaultArgTypes,
+} as Meta<typeof Button>;
+
+export default ButtonStory;
+
+type Story = StoryObj<typeof ButtonStory>;
+
+export const Overview: Story = {
+  args: {
+    variant: 'primary',
+    default: 'Button',
+  },
+};
+
+export const Primary: Story = {
+  args: {
+    variant: 'primary',
+    default: 'Primary',
+  },
+};
+
+export const Secondary: Story = {
+  args: {
+    variant: 'secondary',
+    default: 'Secondary',
+  },
+};
+
+export const Outline: Story = {
+  args: {
+    variant: 'outline',
+    default: 'Outline',
+  },
+};
+
+export const Text: Story = {
+  args: {
+    variant: 'text',
+    default: 'Text',
+  },
+};
+
+export const Danger: Story = {
+  args: {
+    variant: 'danger',
+    default: 'Danger',
+  },
+};
+
+export const Link: Story = {
+  args: {
+    variant: 'link',
+    default: 'Link',
+  },
+};
+
+export const CustomIcon = {
+  render: WithCustomIconSlot.render,
+};
+
+export const Unstyled = {
+  render: WithCustomIconSlot.render,
+};