@rocketui/vue 0.0.46 → 0.0.47

package/src/components/Button/RButton.vue

@@ -0,0 +1,179 @@
+<script setup lang="ts">
+import './button.css';
+import { computed, type CSSProperties } from 'vue';
+import Icon from '../Icon/RIcon.vue';
+export type ButtonType =
+  | 'primary'
+  | 'secondary'
+  | 'text'
+  | 'outline'
+  | 'ghost'
+  | 'link'
+  | 'danger';
+export type ButtonSize = 'small' | 'medium' | 'large';
+export interface Props {
+  /**
+   * Variant of the Button
+   * @type 'primary' | 'secondary' | 'text' | 'outline' | 'ghost' | 'link' | 'danger'
+   * @default 'primary'
+   * @example
+   * <Button variant="primary" />
+   */
+  variant?: ButtonType;
+
+  /**
+   * Loading state of the Button
+   * @type boolean
+   * @default false
+   * @example
+   * <Button loading />
+   */
+  loading?: boolean;
+
+  /**
+   * Disabled state of the Button
+   * @type boolean
+   * @default false
+   * @example
+   * <Button disabled />
+   */
+  disabled?: boolean;
+
+  /**
+   * Prepend icon of the Button
+   * @type string
+   * @default ''
+   * @example
+   * <Button prependIcon="icon" />
+   */
+  prependIcon?: string;
+
+  /**
+   * Append icon of the Button
+   * @type string
+   * @default ''
+   * @example
+   * <Button appendIcon="icon" />
+   */
+  appendIcon?: string;
+
+  /**
+   * Only icon state of the Button
+   * @type boolean
+   * @default false
+   * @example
+   * <Button onlyIcon />
+   */
+  onlyIcon?: boolean;
+
+  /**
+   * Size of the Button
+   * @type 'small' | 'medium' | 'large'
+   * @default 'medium'
+   * @example
+   * <Button size="small" />
+   */
+  size?: ButtonSize;
+
+  /**
+   * Height of the Button
+   * @type string
+   * @default ''
+   * @example
+   * <Button height="40" />
+   */
+  height?: string;
+
+  /**
+   * Block state of the Button
+   * @type boolean
+   * @default false
+   * @example
+   * <Button block />
+   * @link https://tailwindcss.com/docs/display#block
+   */
+  block?: boolean;
+
+  /**
+   * Background color of the Button
+   * @type CSSProperties['backgroundColor']
+   * @default ''
+   * @example
+   * <Button backgroundColor="red" />
+   */
+  backgroundColor?: CSSProperties['backgroundColor'];
+
+  /**
+   * Color of the Button
+   * @type string
+   * @default ''
+   * @example
+   * <Button color="red" />
+   */
+  color?: string;
+}
+const props = withDefaults(defineProps<Props>(), {
+  variant: 'primary',
+  loading: false,
+  disabled: false,
+  prependIcon: '',
+  appendIcon: '',
+  onlyIcon: false,
+  size: 'medium',
+  height: '',
+  block: false,
+  backgroundColor: '',
+});
+const classes = computed(() => ({
+  button: true,
+  [`button--${props.variant}`]: true,
+  [`button--loading`]: props.loading,
+  [`button--${props.size || 'medium'}`]: true,
+  [`button--only-icon`]: props.onlyIcon,
+  [`button--block`]: props.block,
+}));
+defineEmits(['click']);
+const iconSize = computed(() => {
+  return {
+    small: 20,
+    medium: 24,
+    large: 32,
+  }[props.size || 'medium'];
+});
+const style = computed(() => {
+  const { backgroundColor, height, color } = props;
+  return {
+    backgroundColor,
+    height: height ? `${height}px` : '',
+    color,
+  };
+});
+</script>
+<template>
+  <button
+    v-bind="$attrs"
+    :class="classes"
+    :disabled="disabled || loading"
+    :style="style"
+    @click.stop="$emit('click')"
+  >
+    <slot name="custom-icon" />
+
+    <Icon
+      v-if="!$slots['custom-icon'] && props.prependIcon"
+      :class="{
+        'button__prepend-icon': true,
+        'button__prepend-icon--only': props.onlyIcon,
+      }"
+      :name="props.prependIcon"
+      :size="iconSize"
+    />
+    <slot v-if="!props.onlyIcon" />
+    <Icon
+      v-if="!$slots['custom-icon'] && !props.onlyIcon && props.appendIcon"
+      class="button__append-icon"
+      :name="props.appendIcon"
+      :size="iconSize"
+    />
+  </button>
+</template>

package/src/components/Button/button.css

@@ -0,0 +1,146 @@
+@import '../../index.css';
+
+.button {
+  @apply w-fit antialiased flex items-center justify-center transition-all rounded-[var(--btn-radius)] text-white font-medium cursor-pointer;
+
+  &:active {
+    @apply ring-2 ring-inset;
+    animation: manipulation 15s ease-in;
+  }
+
+  &:disabled {
+    @apply cursor-not-allowed;
+  }
+
+  &--large {
+    @apply h-14 text-base px-6 py-4;
+  }
+  &--medium {
+    @apply h-12 text-sm px-6 py-3;
+  }
+  &--small {
+    @apply h-9 text-xs px-4 py-2;
+  }
+  &--loading {
+    @apply animate-pulse;
+
+    /* ---Not yet implemented---
+    & .button__prepend-icon {
+      @apply animate-spin;
+    }
+    & .button__append-icon {
+      @apply animate-spin;
+    } */
+  }
+
+  &--large&--only-icon {
+    @apply p-[1rem];
+  }
+  &--medium&--only-icon {
+    @apply p-[0.875rem];
+  }
+  &--small&--only-icon {
+    @apply px-4 py-2;
+  }
+  &--block {
+    @apply w-full;
+  }
+
+  &__prepend-icon {
+    @apply mr-2;
+    &--only {
+      @apply mr-0;
+    }
+  }
+  &__append-icon {
+    @apply ml-2;
+  }
+}
+.button--primary {
+  @apply bg-[var(--primary-500)];
+
+  &:hover {
+    @apply bg-[var(--primary-700)];
+  }
+  &:active {
+    @apply ring-[var(--primary-100)] bg-white text-[var(--primary-500)];
+  }
+  &:disabled {
+    @apply bg-[var(--primary-200)] text-[var(--primary-300)];
+  }
+}
+.button--secondary {
+  @apply bg-[var(--primary-100)]  text-[var(--primary-500)];
+
+  &:hover {
+    @apply bg-[var(--primary-200)];
+  }
+  &:active {
+    @apply ring-[var(--primary-100)] bg-white text-[var(--primary-500)];
+  }
+  &:disabled {
+    @apply bg-[var(--primary-200)] text-[var(--primary-300)];
+  }
+}
+.button--outline {
+  @apply bg-transparent ring-1 ring-[var(--neutral-200)] text-[var(--neutral-900)];
+
+  &:hover {
+    @apply bg-[var(--neutral-100)];
+  }
+  &:active {
+    @apply ring-[var(--neutral-100)] bg-white text-[var(--neutral-900)];
+  }
+  &:disabled {
+    @apply bg-white text-[var(--neutral-300)];
+  }
+}
+.button--text {
+  @apply text-[var(--neutral-900)] bg-transparent h-auto rounded-none p-0;
+
+  &:active {
+    @apply ring-0 ring-inherit;
+  }
+  &:disabled {
+    @apply bg-white text-[var(--neutral-300)];
+  }
+}
+.button--ghost {
+  @apply bg-transparent text-[var(--primary-100)];
+
+  &:hover {
+    @apply bg-[var(--neutral-100)] text-[var(--primary-500)];
+  }
+  &:active {
+    @apply ring-[var(--neutral-100)] bg-white text-[var(--neutral-900)];
+  }
+  &:disabled {
+    @apply bg-white text-[var(--neutral-300)];
+  }
+}
+.button--danger {
+  @apply bg-[var(--error-500)];
+
+  &:hover {
+    @apply bg-[var(--error-700)];
+  }
+  &:active {
+    @apply ring-[var(--error-100)] bg-white text-[var(--error-500)];
+  }
+  &:disabled {
+    @apply bg-[var(--error-200)] text-[var(--error-300)];
+  }
+}
+.button--link {
+  @apply bg-transparent text-[var(--primary-500)];
+
+  &:hover {
+    @apply bg-[var(--neutral-100)] text-[var(--primary-500)];
+  }
+  &:active {
+    @apply ring-[var(--neutral-100)] bg-white text-[var(--neutral-900)];
+  }
+  &:disabled {
+    @apply bg-white text-[var(--neutral-300)];
+  }
+}

package/src/components/Checkbox/Checkbox.mdx

@@ -0,0 +1,100 @@
+import { Canvas, Meta, Story, Controls } from '@storybook/blocks';
+import * as CheckboxStories from './Checkbox.stories';
+
+<Meta of={CheckboxStories} />
+
+# Checkbox
+
+A checkbox is a simple UI element that allows the user to select one or more options from a set of predefined choices. It is often used in forms, surveys, and other types of user input scenarios.
+
+- [Overview](#overview)
+
+- [Playground](#playground)
+
+- [Usage with props](#usage)
+
+- [Variants](#variants)
+
+- [Tips](#tips)
+
+## Overview <a id="overview" />
+
+A checkbox is typically represented by a small square box that can be checked (marked) or unchecked (unmarked). Checkbox component typically consists of a label that describes the associated option, and a checkbox input element that allows the user to select or deselect the option. The component may also include additional elements such as a description or further explanation of the option.
+
+<Canvas>
+  <Story of={CheckboxStories.Overview} />
+</Canvas>
+
+## Playground <a id="playground" />
+
+> Changes you make in the controls will be reflected in the example above.
+
+<Controls of={CheckboxStories.Overview} exclude={/^(update.*)$/} />
+
+## Usage with props <a id="usage" />
+
+### id (required)
+
+The **id** prop is a unique identifier for the checkbox element. This prop is required.
+
+### label (optional)
+
+The **label** prop is used to clearly communicate the purpose of the checkbox to the user.
+
+### indeterminate (optional)
+
+The **indeterminate** prop is used to represent a state that is partially checked, such as when some but not all options in a group are selected.
+
+### disabled (optional)
+
+The **disabled** prop is used to prevent the user from interacting with the checkbox when it is not relevant or applicable.
+
+### modelValue (optional)
+
+The **modelValue** prop is used to control the checked state of the checkbox. This can be useful when you want to implement conditional logic or when you want to bind the checkbox to a data model.
+
+### hint (optional)
+
+The **hint** prop is used to provide additional information or context to the user. This can be used to clarify the purpose of the checkbox or to provide guidance on how to use it.
+
+### errorMsg (optional)
+
+The **errorMsg** prop is used to indicate that the checkbox is required or has an error. This can be used to highlight issues to the user and help them fix them.
+
+### change (optional)
+
+The **change** prop is used to handle the checkbox's checked state changes. This function will be passed the new checked state as an argument, which you can use to update your application state or perform other actions.
+
+## Variants <a id="variants" />
+
+### Checked
+
+<Canvas>
+  <Story of={CheckboxStories.Checked} />
+</Canvas>
+
+### Indeterminate
+
+<Canvas>
+  <Story of={CheckboxStories.Indeterminate} />
+</Canvas>
+
+### With Error
+
+<Canvas>
+  <Story of={CheckboxStories.WithError} />
+</Canvas>
+
+## Tips <a id="tips" />
+
+💡 Use clear and concise labels. Make sure that the _label_ for the checkbox accurately and clearly describes the option that it represents. Avoid using jargon or ambiguous terms that may be confusing to the user.
+
+💡 Use _indeterminate_ state appropriately. Use this state sparingly and only when it makes sense in the context of your application.
+
+💡 Use _disabled_ state appropriately. Avoid using this state excessively, as it can make the user feel like they are being restricted or prevented from interacting with the checkbox.
+
+💡 Use the _checked_ prop to control the checked state. This can be useful in scenarios where you want to pre-populate a form with default values, or where you want to update the checked state based on user actions or other conditions.
+
+💡 Use the _hint_ prop to provide additional context. Use this prop sparingly and only when it is necessary to fully explain the purpose or implications of the checkbox.
+
+💡 Use the _errorMsg_ prop to indicate errors. Use this prop to help the user understand that there is a problem with the form and encourage them to correct any errors before submitting.

package/src/components/Checkbox/Checkbox.stories.ts

@@ -0,0 +1,67 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+import Checkbox from './RCheckbox.vue';
+
+const DefaultArgs = {
+  id: 'checkbox',
+  label: 'Checkbox Label',
+  indeterminate: false,
+  disabled: false,
+  hint: 'Save my login details for next time.',
+  errorMsg: '',
+  modelValue: false,
+};
+
+const CheckboxStory = {
+  title: 'Form/Checkbox',
+  component: Checkbox,
+  setup(args: typeof Checkbox) {
+    return { args };
+  },
+  template: '<Checkbox v-bind="args" />',
+  args: DefaultArgs,
+  argTypes: {
+    modelValue: {
+      control: {
+        type: 'boolean',
+      },
+    },
+    'onUpdate:modelValue': {
+      action: 'update:modelValue',
+    },
+  },
+} as Meta<typeof Checkbox>;
+
+export default CheckboxStory;
+
+type Story = StoryObj<typeof CheckboxStory>;
+
+export const Overview: Story = {
+  args: {
+    id: 'checkbox-1',
+    label: 'Checkbox label',
+  },
+};
+
+export const Checked: Story = {
+  args: {
+    id: 'checkbox-1',
+    label: 'Checkbox label',
+    modelValue: true,
+  },
+};
+
+export const Indeterminate: Story = {
+  args: {
+    id: 'checkbox-1',
+    label: 'Checkbox label',
+    indeterminate: true,
+  },
+};
+
+export const WithError: Story = {
+  args: {
+    id: 'checkbox-1',
+    label: 'Checkbox label',
+    errorMsg: 'This field is required',
+  },
+};

package/src/components/Checkbox/RCheckbox.vue

@@ -0,0 +1,195 @@
+<script setup lang="ts">
+import './checkbox.css';
+import {
+  computed,
+  reactive,
+  watch,
+  type HTMLAttributes,
+  type InputHTMLAttributes,
+  type LabelHTMLAttributes,
+} from 'vue';
+
+import Icon from '../Icon/RIcon.vue';
+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'];
+
+  /**
+   * 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'];
+
+  /**
+   * Input indeterminate state
+   * @type InputHTMLAttributes['indeterminate']
+   * @default false
+   * @example
+   * <Checkbox indeterminate="true" />
+   * @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#indeterminate
+   */
+  indeterminate?: InputHTMLAttributes['indeterminate'];
+
+  /**
+   * 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'];
+
+  /**
+   * 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;
+}
+
+type StateTypes = {
+  checked: InputHTMLAttributes['checked'];
+  indeterminate: InputHTMLAttributes['indeterminate'];
+};
+
+const props = withDefaults(defineProps<Props>(), {
+  id: '',
+  label: '',
+  indeterminate: false,
+  disabled: false,
+  hint: '',
+  errorMsg: '',
+  modelValue: false,
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+const state = reactive<StateTypes>({
+  checked: false,
+  indeterminate: false,
+});
+
+const icons = {
+  checked: 'mdiCheck',
+  unchecked: '',
+  indeterminate: 'mdiMinus',
+};
+
+const icon = computed(() => {
+  if (state.indeterminate) {
+    return icons.indeterminate;
+  }
+  return state.checked ? icons.checked : icons.unchecked;
+});
+
+const classes = computed(() => {
+  return {
+    checkbox: true,
+    'checkbox--checked': state.checked,
+    'checkbox--disabled': props.disabled,
+    'checkbox--indeterminate': state.indeterminate,
+    'checkbox--error': !!props.errorMsg,
+  };
+});
+
+const onChange = (e: unknown) => {
+  if (props.disabled) return;
+  // @ts-expect-error: Unreachable code error
+  state.checked = e.target.checked;
+  state.indeterminate = false;
+  emit('update:modelValue', state.checked);
+};
+
+watch(
+  () => props.indeterminate,
+  (value) => {
+    state.indeterminate = value;
+    if (value === true) {
+      state.checked = false;
+      emit('update:modelValue', state.checked);
+    }
+  },
+  {
+    // need immediate to set the state on first render for storybook
+    // TODO: find a better way to do this
+    immediate: true,
+  }
+);
+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="checkbox-wrapper">
+    <div class="checkbox-container">
+      <input
+        :id="props.id"
+        :checked="state.checked"
+        class="checkbox-container__input"
+        :disabled="props.disabled"
+        :indeterminate="state.indeterminate"
+        type="checkbox"
+        @change="onChange"
+      />
+      <div :class="classes" :data-disabled="props.disabled">
+        <Icon :name="icon" :size="24" />
+      </div>
+    </div>
+    <div class="checkbox-texts">
+      <label
+        class="checkbox-texts__label"
+        :data-disabled="props.disabled"
+        :for="props.id"
+      >
+        {{ props.label }}
+      </label>
+      <p v-if="!!props.errorMsg" class="checkbox-texts__error">
+        {{ props.errorMsg }}
+      </p>
+      <p v-else class="checkbox-texts__hint">
+        {{ props.hint }}
+      </p>
+    </div>
+  </div>
+</template>