@rocketui/vue 0.0.47 → 0.0.48

package/src/components/Snackbar/snackbar.css

@@ -1,99 +0,0 @@
-@import '../../index.css';
-
-.r-snackbar {
-  @apply text-white gap-3 opacity-0 absolute w-[412px] grid items-center bg-[var(--neutral-900)] px-4 py-3.5 rounded-lg;
-  grid-template-columns: auto 1fr auto;
-
-  &--success {
-    @apply bg-[var(--success-500)];
-  }
-
-  &--error {
-    @apply bg-[var(--error-500)];
-  }
-
-  &--warning {
-    @apply bg-[var(--warning-500)];
-  }
-
-  &--info {
-    @apply bg-[var(--info-500)];
-  }
-
-  &__text {
-    @apply text-sm pr-16;
-  }
-  &__close {
-    @apply cursor-pointer grid place-items-center;
-  }
-
-  &__right {
-    @apply right-6 left-auto;
-  }
-
-  &__left {
-    @apply left-0 right-auto;
-  }
-
-  &__top {
-    @apply top-20 bottom-auto;
-  }
-
-  &__bottom {
-    @apply bottom-20 top-auto;
-  }
-
-  &--shown {
-    @apply opacity-100 transition-all duration-300 ease-in-out;
-    animation: slide-right-to-right 0.3s ease-in-out forwards;
-  }
-
-  &--hidden {
-    @apply transition-all duration-300 ease-in-out;
-    animation: slide-left-from-right 0.3s ease-in-out forwards;
-  }
-
-  &--shown:not(.r-snackbar__right) {
-    animation: slide-right-from-left 0.1s ease-in-out forwards;
-  }
-
-  &--hidden:not(.r-snackbar__right) {
-    animation: slide-left-to-left 0.2s ease-in-out forwards;
-  }
-}
-
-@keyframes slide-left-from-right {
-  0% {
-    transform: translateX(-50%);
-  }
-  100% {
-    transform: translateX(100%);
-  }
-}
-
-@keyframes slide-right-to-right {
-  0% {
-    transform: translateX(100%);
-  }
-  100% {
-    transform: translateX(0);
-  }
-}
-
-@keyframes slide-right-from-left {
-  0% {
-    transform: translateX(-100%);
-  }
-  100% {
-    transform: translateX(10%);
-  }
-}
-
-@keyframes slide-left-to-left {
-  0% {
-    transform: translateX(50%);
-  }
-  100% {
-    transform: translateX(-50%);
-  }
-}

package/src/components/Snackbar/snackbar.spec.ts

@@ -1,56 +0,0 @@
-import { describe, it, expect } from 'vitest';
-
-import { mount } from '@vue/test-utils';
-import Snackbar from './RSnackbar.vue';
-
-describe('Snackbar', () => {
-  it('renders properly', () => {
-    const wrapper = mount(Snackbar, {
-      props: {
-        text: 'Snackbar text',
-      },
-    });
-    expect(wrapper.exists()).toBe(true);
-    expect(wrapper.find('.snackbar').exists()).toBe(true);
-    expect(wrapper.find('.snackbar__text').exists()).toBe(true);
-    expect(wrapper.find('.snackbar__text').text()).toBe('Snackbar text');
-    expect(wrapper.find('.snackbar__action').exists()).toBe(false);
-    expect(wrapper.find('.snackbar__close').exists()).toBe(false);
-  });
-  it('with action', () => {
-    const wrapper = mount(Snackbar, {
-      props: {
-        text: 'Snackbar text',
-        actionText: 'Action',
-        showAction: true,
-      },
-    });
-    expect(wrapper.exists()).toBe(true);
-    expect(wrapper.find('.snackbar').exists()).toBe(true);
-    expect(wrapper.find('.snackbar__action').exists()).toBe(true);
-    expect(wrapper.find('.snackbar__action').text()).toBe('Action');
-  });
-  it('with close', () => {
-    const wrapper = mount(Snackbar, {
-      props: {
-        text: 'Snackbar text',
-        showClose: true,
-      },
-    });
-    expect(wrapper.exists()).toBe(true);
-    expect(wrapper.find('.snackbar').exists()).toBe(true);
-    expect(wrapper.find('.snackbar__close').exists()).toBe(true);
-  });
-  it('with timeout', async () => {
-    const wrapper = mount(Snackbar, {
-      props: {
-        text: 'Snackbar text',
-        timeout: 100,
-      },
-    });
-    expect(wrapper.exists()).toBe(true);
-    expect(wrapper.find('.snackbar').exists()).toBe(true);
-    await new Promise((resolve) => setTimeout(resolve, 200));
-    expect(wrapper.find('.snackbar--closed').exists()).toBe(true);
-  });
-});

package/src/components/Switch/RSwitch.vue

@@ -1,147 +0,0 @@
-<script setup lang="ts">
-import {
-  computed,
-  reactive,
-  watch,
-  type HTMLAttributes,
-  type InputHTMLAttributes,
-  type LabelHTMLAttributes,
-} from 'vue';
-import './switch.css';
-export interface Props {
-  /**
-   * id of the checkbox
-   * @type HTMLAttributes['id']
-   * @default ''
-   * @example
-   * <Checkbox id="checkbox" />
-   * @link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id
-   */
-  id: HTMLAttributes['id'];
-
-  /**
-   * Input checked state
-   * @type InputHTMLAttributes['checked']
-   * @default false
-   * @example
-   * <Checkbox modelValue="true" />
-   * @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#checked
-   */
-  modelValue?: InputHTMLAttributes['checked'];
-
-  /**
-   * Input disabled state
-   * @type InputHTMLAttributes['disabled']
-   * @default false
-   * @example
-   * <Checkbox disabled="true" />
-   * @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#disabled
-   */
-  disabled?: InputHTMLAttributes['disabled'];
-
-  /**
-   * label of the checkbox
-   * @type LabelHTMLAttributes['label']
-   * @default ''
-   * @example
-   * <Checkbox label="Checkbox" />
-   * @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label
-   */
-  label?: LabelHTMLAttributes['for'];
-
-  /**
-   * Hint text
-   * @type string
-   * @default ''
-   * @example
-   * <Checkbox hint="This is a hint" />
-   */
-  hint?: string;
-
-  /**
-   * Error message
-   * @type string
-   * @default ''
-   * @example
-   * <Checkbox errorMsg="This is an error" />
-   */
-  errorMsg?: string;
-
-  /**
-   * Size of the checkbox
-   * @type 'small' | 'medium' | 'large'
-   * @default 'medium'
-   * @example
-   * <Checkbox size="small" />
-   */
-  size?: 'small' | 'medium' | 'large';
-}
-const props = withDefaults(defineProps<Props>(), {
-  id: 'switch',
-  modelValue: false,
-  size: 'medium',
-  disabled: false,
-  label: '',
-  hint: '',
-  errorMsg: '',
-});
-const emit = defineEmits(['update:modelValue']);
-const state = reactive<{
-  checked: InputHTMLAttributes['checked'];
-}>({
-  checked: false,
-});
-const classes = computed(() => {
-  return {
-    switch: true,
-    'switch--disabled': props.disabled,
-    [`switch--${props.size}`]: props.size,
-    'switch--error': props.errorMsg,
-  };
-});
-const onChange = (e: unknown) => {
-  if (props.disabled) return;
-  // @ts-expect-error: Unreachable code error
-  state.checked = e.target.checked;
-  emit('update:modelValue', state.checked);
-};
-watch(
-  () => props.modelValue,
-  (value) => {
-    state.checked = value;
-  },
-  {
-    // need immediate to set the state on first render for storybook
-    // TODO: find a better way to do this
-    immediate: true,
-  }
-);
-</script>
-<template>
-  <div class="switch-container">
-    <div :class="classes">
-      <input
-        :id="props.id"
-        :checked="state.checked"
-        class="switch__input"
-        type="checkbox"
-        @change="onChange"
-      />
-      <span class="slider round" />
-    </div>
-    <div
-      :class="{
-        'switch-texts': true,
-        [`switch-texts--${props.size}`]: true,
-      }"
-    >
-      <label :id="props.id" class="switch-texts__label" :for="props.id">
-        {{ props.label }}
-      </label>
-      <p v-if="props.errorMsg" class="switch-texts__error">
-        {{ props.errorMsg }}
-      </p>
-      <p v-else class="switch-texts__hint">{{ props.hint }}</p>
-    </div>
-  </div>
-</template>

package/src/components/Switch/Switch.mdx

@@ -1,102 +0,0 @@
-import { Canvas, Meta, Story, Controls } from '@storybook/blocks';
-import * as SwitchStories from './Switch.stories';
-
-<Meta of={SwitchStories} />
-
-# Switch
-
-- [Overview](#overview)
-
-- [Playground](#playground)
-
-- [Usage with props](#usage)
-
-- [Stories](#stories)
-
-- [Tips](#tips)
-
-### Overview <a id="overview" />
-
-The Switch component is a simple toggle that allows the user to switch between two states: on and off. It is designed to be used as a controlled component, meaning that the value prop must be provided and will determine the current state of the switch.
-
-<Canvas>
-  <Story of={SwitchStories.Overview} />
-</Canvas>
-
-### Playground <a id="playground" />
-
-> Changes you make in the controls will be reflected in the example above.
-
-<Controls of={SwitchStories.Overview} exclude={/^(on|change|onChange.*)$/} />
-
-## Usage with props <a id="usage" />
-
-### modelValue (required)
-
-The **modelValue** prop determines the current state of the switch. When the modelValue prop is true, the switch will be in the "on" state, and when it is false, the switch will be in the "off" state.
-
-### size (optional)
-
-The **size** prop setermines the size of the switch. Accepts the values small, medium (default), and large.
-
-### id (optional)
-
-The **id** prop sets the HTML id attribute on the switch element. This can be useful for connecting the switch to a label element using the for attribute.
-
-### disabled (optional)
-
-If the **disabled** prop is true, the switch will be disabled and the user will not be able to toggle it.
-
-### label (optional)
-
-The **label** prop sets the label text for the switch. This can be used to provide additional context or instructions for the switch.
-
-### hint (optional)
-
-The **hint** prop sets a hint text for the switch. This can be used to provide additional information about the switch, such as its purpose or how it is used.
-
-### errorMsg (optional)
-
-The **errorMsg** prop sets an error message for the switch. This can be used to display an error message when the switch is in an invalid state or when it has been used in an incorrect way.
-
-## Stories <a id="stories" />
-
-### Small
-
-<Canvas>
-  <Story of={SwitchStories.Small} />
-</Canvas>
-
-### Medium
-
-<Canvas>
-  <Story of={SwitchStories.Medium} />
-</Canvas>
-
-### Large
-
-<Canvas>
-  <Story of={SwitchStories.Large} />
-</Canvas>
-
-### With Error
-
-<Canvas>
-  <Story of={SwitchStories.WithError} />
-</Canvas>
-
-### Tips <a id="tips" />
-
-💡 Use the label prop to provide context or instructions for the switch. This can help the user understand what the switch is for and how to use it.
-
-💡 Use the hint prop to provide additional information about the switch. This can be helpful if the switch is being used for a less common or more complex feature.
-
-💡 Use the errorMsg prop to display an error message when the switch is in an invalid state or when it has been used in an incorrect way. This can help the user understand why the switch is not working as expected.
-
-💡 Use the size prop to adjust the size of the switch to fit the layout and design of your application.
-
-💡 Use the disabled prop to disable the switch when it is not needed or when it should not be used.
-
-💡 Use the onChange prop to update the state of the switch and control its behavior. This is especially important when using the Switch component as a controlled component.
-
-💡 Consider using the Switch component as a controlled component, which means that the value prop must be provided and will determine the current state of the switch. This can help ensure that the state of the switch is always in sync with the rest of your application.

package/src/components/Switch/Switch.stories.ts

@@ -1,79 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3';
-import Switch from './RSwitch.vue';
-
-const DefaultArgTypes = {
-  size: {
-    control: {
-      type: 'select',
-      options: ['small', 'medium', 'large'],
-    },
-    defaultValue: 'medium',
-  },
-};
-
-const DefaultArgs = {
-  id: 'switch',
-  modelValue: false,
-  size: 'medium',
-  disabled: false,
-  label: 'Switch',
-  hint: 'A control used to switch between two states: often on or off.',
-};
-
-const SwitchStory = {
-  title: 'Form/Switch',
-  component: Switch,
-  setup(args: typeof Switch) {
-    return {
-      args,
-    };
-  },
-  template: `<Switch v-bind="args"/>`,
-  args: DefaultArgs,
-  argTypes: {
-    ...DefaultArgTypes,
-    'onUpdate:modelValue': {
-      action: 'update:modelValue',
-    },
-  },
-} as Meta<typeof Switch>;
-
-export default SwitchStory;
-
-type Story = StoryObj<typeof SwitchStory>;
-
-export const Overview: Story = {
-  args: {
-    modelValue: false,
-    size: 'small',
-  },
-};
-
-export const Small: Story = {
-  args: {
-    modelValue: false,
-    size: 'small',
-  },
-};
-
-export const Medium: Story = {
-  args: {
-    modelValue: false,
-    size: 'medium',
-  },
-};
-
-export const Large: Story = {
-  args: {
-    modelValue: false,
-    size: 'large',
-  },
-};
-
-export const WithError: Story = {
-  args: {
-    modelValue: false,
-    size: 'medium',
-    errorMsg: 'This is an error message',
-  },
-};

package/src/components/Switch/switch.css

@@ -1,102 +0,0 @@
-@import '../../index.css';
-
-.switch-container {
-  @apply flex items-center justify-start gap-3;
-}
-
-.slider {
-  @apply absolute top-0 left-0 right-0 bottom-0 bg-[var(--neutral-300)] rounded-full;
-
-  &::before {
-    content: '';
-    @apply absolute left-1 bottom-1 bg-white transition-all duration-200 ease-in-out rounded-full;
-  }
-}
-
-.switch {
-  @apply relative inline-block w-16 h-9 box-border;
-
-  &--small {
-    @apply w-9 h-5;
-
-    & > .slider::before {
-      @apply w-3 h-3;
-    }
-    & > .switch__input:checked + .slider:before {
-      -webkit-transform: translateX(16px);
-      -ms-transform: translateX(16px);
-      transform: translateX(16px);
-    }
-  }
-  &--medium {
-    @apply w-11 h-6;
-    & > .slider::before {
-      @apply w-4 h-4;
-    }
-    & > .switch__input:checked + .slider:before {
-      -webkit-transform: translateX(20px);
-      -ms-transform: translateX(20px);
-      transform: translateX(20px);
-    }
-  }
-  &--large {
-    @apply w-[3.25rem] h-7;
-
-    & > .slider::before {
-      @apply w-5 h-5;
-    }
-    & > .switch__input:checked + .slider:before {
-      -webkit-transform: translateX(24px);
-      -ms-transform: translateX(24px);
-      transform: translateX(24px);
-    }
-  }
-
-  &--disabled {
-    @apply cursor-not-allowed;
-    & > .slider::before {
-      @apply bg-[var(--neutral-200)];
-    }
-  }
-
-  &--error {
-    & > .switch__input:checked + .slider {
-      @apply bg-[var(--error-500)];
-      &:hover {
-        @apply bg-[var(--error-700)];
-      }
-    }
-  }
-
-  &__input {
-    @apply absolute left-1/2 -translate-x-1/2 w-full h-full appearance-none rounded-md z-20 cursor-pointer;
-    &:checked + .slider {
-      @apply bg-[var(--primary-500)];
-      &:hover {
-        @apply bg-[var(--primary-700)];
-      }
-    }
-  }
-}
-
-.switch-texts {
-  &--small {
-    @apply text-xs;
-  }
-  &--medium {
-    @apply text-sm;
-  }
-  &--large {
-    @apply text-base;
-  }
-
-  &__label {
-    @apply font-medium text-[var(--neutral-900)] p-0 m-0;
-  }
-  &__hint {
-    @apply text-[var(--neutral-500)] font-normal p-0 m-0;
-  }
-  &__error {
-    @apply text-[var(--error-500)] font-normal p-0 m-0;
-  }
-}

package/src/components/Switch/switch.spec.ts

@@ -1,31 +0,0 @@
-import { describe, it, expect } from 'vitest';
-
-import { mount } from '@vue/test-utils';
-import Switch from './RSwitch.vue';
-
-describe('Switch', () => {
-  it('renders properly', () => {
-    const wrapper = mount(Switch, {
-      props: {
-        id: 'switch-id',
-        disabled: false,
-        size: 'small',
-      },
-    });
-    expect(wrapper.exists()).toBe(true);
-    expect(wrapper.find('label').exists()).toBe(true);
-    expect(wrapper.find('label').element.getAttribute('for')).toBe('switch-id');
-    expect(wrapper.find('input').exists()).toBe(true);
-    expect(wrapper.find('input').element.getAttribute('id')).toBe('switch-id');
-    expect(wrapper.find('input').element.getAttribute('type')).toBe('checkbox');
-    expect(wrapper.find('input').element.getAttribute('disabled')).toBe(null);
-    expect(
-      wrapper
-        .find('.switch')
-        .trigger('click')
-        .then(() => {
-          expect(wrapper.find('input').element.checked).toBe(true);
-        })
-    );
-  });
-});