@rocketui/vue 0.0.46 → 0.0.47

package/src/components/Dropdown/dropdown.css

@@ -0,0 +1,113 @@
+@import '../../index.css';
+
+.dropdown-wrapper {
+  @apply relative;
+}
+
+.dropdown {
+  @apply flex items-center bg-white border border-[var(--neutral-200)] rounded-md shadow-sm py-3 px-4 text-left cursor-pointer sm:text-sm;
+
+  &--active {
+    @apply border border-[var(--primary-500)] ring-inset ring-2;
+  }
+
+  &--disabled {
+    @apply bg-[var(--neutral-100)] text-[var(--neutral-300)] border-[var(--neutral-200)] cursor-not-allowed;
+  }
+
+  &--loading {
+    @apply bg-[var(--neutral-100)] text-[var(--neutral-300)] border-[var(--neutral-200)] cursor-not-allowed animate-pulse;
+  }
+
+  &__prepend-icon {
+    @apply inset-y-0 right-0 flex items-center pointer-events-none pr-2;
+
+    &--active {
+      /* @apply text-[var(--primary-500)]; */
+    }
+  }
+
+  &__tags {
+    @apply flex flex-wrap items-center gap-1;
+
+    &__chip {
+      @apply flex items-center gap-2 rounded-3xl text-xs text-[var(--neutral-900)] bg-[var(--neutral-100)];
+
+      & > .chip__text {
+        @apply whitespace-nowrap;
+      }
+    }
+  }
+
+  &__multiple {
+    @apply flex items-center gap-2;
+    & > * {
+      @apply flex-1 whitespace-nowrap;
+    }
+  }
+
+  &__input {
+    @apply text-[var(--neutral-900)] caret-[var(--primary-500)] block w-full placeholder-[var(--neutral-500)] focus:outline-none focus:ring-0 focus:border-transparent sm:text-sm disabled:bg-[var(--neutral-100)] disabled:text-[var(--neutral-300)] disabled:placeholder:text-[var(--neutral-300)];
+
+    &--loading {
+      @apply bg-[var(--neutral-100)] text-[var(--neutral-300)] border-[var(--neutral-200)] cursor-not-allowed animate-pulse;
+    }
+
+    &[readonly] {
+      @apply cursor-pointer;
+    }
+  }
+
+  &__append-icon {
+    @apply inset-y-0 right-0 flex items-center pointer-events-none;
+
+    &--active {
+      @apply transform rotate-180 transition-all duration-200 ease-in-out text-[var(--primary-500)];
+    }
+  }
+}
+
+.dropdown-options {
+  @apply hidden py-3 px-2 left-0 absolute z-10 w-full mt-1 bg-white border border-[var(--neutral-200)] rounded-md shadow-lg max-h-60 ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm;
+
+  &--active {
+    @apply block;
+  }
+
+  &__option {
+    @apply text-[var(--neutral-900)] transition-all duration-200 ease-in 
+    flex justify-between items-center w-full border border-transparent 
+    rounded-md py-3 px-4 text-left cursor-pointer sm:text-sm min-h-[50px];
+
+    &:hover {
+      @apply bg-[var(--neutral-100)];
+    }
+    &--active {
+      @apply bg-[var(--primary-100)] text-[var(--primary-500)];
+    }
+
+    &__label {
+      @apply ml-2;
+
+      &--active {
+        /* @apply text-[var(--primary-500)]; */
+      }
+    }
+
+    &__prepend-icon {
+      @apply text-[var(--neutral-900)] inset-y-0 right-0 flex items-center pointer-events-none;
+
+      &--active {
+        /* @apply text-[var(--primary-500)]; */
+      }
+    }
+
+    &__append-icon {
+      @apply transition-colors duration-100 ease-in-out;
+
+      &--active {
+        /* @apply text-[var(--primary-500)]; */
+      }
+    }
+  }
+}

package/src/components/Dropdown/dropdown.spec.ts

@@ -0,0 +1,98 @@
+import { describe, it, expect } from 'vitest';
+
+import { mount } from '@vue/test-utils';
+import Dropdown from './RDropdown.vue';
+
+describe('Dropdown', () => {
+  it('renders properly', () => {
+    const wrapper = mount(Dropdown, {
+      props: {
+        options: [{ value: 1, label: '1' }],
+        placeholder: 'Select...',
+      },
+    });
+
+    expect(wrapper.exists()).toBe(true);
+    expect(wrapper.find('input').exists()).toBe(true);
+    expect(wrapper.find('input').attributes('type')).toBe('text');
+    expect(wrapper.find('input').attributes('placeholder')).toBe('Select...');
+    expect(wrapper.classes()).toContain('dropdown');
+    expect(wrapper.find('ul').exists()).toBe(true);
+    expect(wrapper.find('.select').exists()).toBe(true);
+    expect(
+      wrapper
+        .find('.select')
+        .trigger('click')
+        .then(() => {
+          expect(wrapper.find('ul').classes()).toContain(
+            'select-options--active'
+          );
+        })
+    );
+  });
+
+  it('multiple', () => {
+    const wrapper = mount(Dropdown, {
+      props: {
+        options: [
+          { value: 1, label: '1' },
+          { value: 2, label: '2' },
+        ],
+        multiple: true,
+      },
+    });
+    expect(
+      wrapper
+        .find('.select')
+        .trigger('click')
+        .then(() => {
+          expect(wrapper.find('ul').classes()).toContain(
+            'select-options--active'
+          );
+        })
+        .then(() => {
+          document.addEventListener('click', () => {
+            expect(wrapper.find('ul').classes()).not.toContain(
+              'select-options--active'
+            );
+          });
+        })
+    );
+
+    expect(wrapper.find('.select__multiple').exists()).toBe(true);
+    expect(wrapper.find('.select-options__option__label').text()).toBe('1');
+    expect(
+      wrapper
+        .find('.select-options__option')
+        .trigger('click')
+        .then(() => {
+          expect(wrapper.find('.select__multiple').text()).toBe('1,');
+        })
+    );
+  });
+  it('taggable', () => {
+    const wrapper = mount(Dropdown, {
+      props: {
+        options: [
+          { value: 1, label: '1' },
+          { value: 2, label: '2' },
+        ],
+        taggable: true,
+      },
+    });
+
+    expect(wrapper.find('.select__tags').exists()).toBe(true);
+    expect(wrapper.find('input').exists()).toBe(true);
+    expect(
+      wrapper
+        .find('.select-options__option')
+        .trigger('click')
+        .then(() => {
+          wrapper
+            .find('.select__tags')
+            .element.children[0].classList.contains('chip');
+          wrapper.find('.select__tags').element.children[0].textContent === '1';
+        })
+    );
+  });
+});

package/src/components/Flex/Flex.mdx

@@ -0,0 +1,20 @@
+import { Canvas, Meta, Story, Controls } from '@storybook/blocks';
+import * as FlexStories from './Flex.stories';
+
+<Meta of={FlexStories} />
+
+# Flex
+
+Flex is Box with display set to flex and comes with helpful style shorthand. It renders a `div` element.
+
+### Overview
+
+<Canvas>
+  <Story of={FlexStories.Overview} />
+</Canvas>
+
+### Playground
+
+> Changes you make in the controls will be reflected in the example above.
+
+<Controls of={FlexStories.Overview} exclude={/^(click|default|on.*)$/} />

package/src/components/Flex/Flex.stories.js

@@ -0,0 +1,127 @@
+import Flex from './RFlex.vue';
+import Box from '../Box/RBox.vue';
+
+const Default = (args) => ({
+  components: { Flex, Box },
+  setup() {
+    return { args };
+  },
+  template: `
+    <Flex v-bind="args">
+      <Box>Box 1</Box>
+      <Box>Box 2</Box>
+    </Flex>`,
+});
+
+const defaultArgs = {
+  align: {
+    control: {
+      type: 'select',
+      options: [
+        'normal',
+        'stretch',
+        'center',
+        'start',
+        'end',
+        'flex-start',
+        'flex-end',
+        'baseline',
+        'first baseline',
+        'last baseline',
+        'safe center',
+        'unsafe center',
+      ],
+    },
+    defaultValue: 'start',
+  },
+  justify: {
+    control: {
+      type: 'select',
+      options: [
+        'start',
+        'center',
+        'end',
+        'flex-start',
+        'flex-end',
+        'left',
+        'right',
+        'normal',
+        'space-between',
+        'space-around',
+        'space-evenly',
+        'stretch',
+        'safe center',
+        'unsafe center',
+      ],
+    },
+    defaultValue: 'start',
+  },
+  wrap: {
+    control: {
+      type: 'select',
+      options: ['nowrap', 'wrap', 'wrap-reverse'],
+    },
+    defaultValue: 'nowrap',
+  },
+  direction: {
+    control: {
+      type: 'select',
+      options: ['row', 'row-reverse', 'column', 'column-reverse'],
+    },
+    defaultValue: 'row',
+  },
+  basis: {
+    control: {
+      type: 'select',
+      options: [
+        'auto',
+        'max-content',
+        'min-content',
+        'fit-content',
+        'content',
+        'inherit',
+        'initial',
+        'unset',
+      ],
+    },
+    defaultValue: 'auto',
+  },
+  grow: {
+    control: {
+      type: 'select',
+      options: ['0', '1', '2', '3', '4', '5'],
+    },
+    defaultValue: '0',
+  },
+  shrink: {
+    control: {
+      type: 'select',
+      options: ['0', '1', '2', '3', '4', '5'],
+    },
+    defaultValue: '1',
+  },
+};
+
+export default {
+  title: 'Layout/Flex',
+  component: Flex,
+
+  argTypes: {
+    ...defaultArgs,
+  },
+
+  parameters: {
+    viewMode: 'docs',
+  },
+};
+
+export const Overview = {
+  render: Default.bind({}),
+  name: 'Overview',
+
+  argTypes: {
+    ...Default.argTypes,
+  },
+
+  args: {},
+};

package/src/components/Flex/RFlex.vue

@@ -0,0 +1,91 @@
+<script setup lang="ts">
+import { computed, type CSSProperties } from 'vue';
+import '../../index.css';
+
+export interface IProps {
+  /**
+   * Shorthand for `alignItems` style prop
+   * @type CSSProperties["alignItems"]
+   * @example
+   * <Flex align="center" />
+   * @link https://developer.mozilla.org/en-US/docs/Web/CSS/align-items
+   */
+  align?: CSSProperties['alignItems'];
+
+  /**
+   * Shorthand for `justifyContent` style prop
+   * @type CSSProperties["justifyContent"]
+   * @example
+   * <Flex justify="center" />
+   * @link https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content
+   */
+  justify?: CSSProperties['justifyContent'];
+
+  /**
+   * Shorthand for `flexWrap` style prop
+   * @type CSSProperties["flexWrap"]
+   * @example
+   * <Flex wrap="wrap" />
+   * @link https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap
+   */
+  wrap?: CSSProperties['flexWrap'];
+
+  /**
+   * Shorthand for `flexDirection` style prop
+   * @type CSSProperties["flexDirection"]
+   * @example
+   * <Flex direction="column" />
+   * @link https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction
+   */
+  direction?: CSSProperties['flexDirection'];
+
+  /**
+   * Shorthand for `flexBasis` style prop
+   * @type CSSProperties["flexBasis"]
+   * @example
+   * <Flex basis="50%" />
+   * @link https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis
+   */
+  basis?: CSSProperties['flexBasis'];
+
+  /**
+   * Shorthand for `flexGrow` style prop
+   * @type CSSProperties["flexGrow"]
+   * @example
+   * <Flex grow="1" />
+   * @link https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow
+   */
+  grow?: CSSProperties['flexGrow'];
+
+  /**
+   * Shorthand for `flexShrink` style prop
+   * @type CSSProperties["flexShrink"]
+   * @example
+   * <Flex shrink="1" />
+   * @link https://developer.mozilla.org/en-US/docs/Web/CSS/flex-shrink
+   */
+  shrink?: CSSProperties['flexShrink'];
+}
+
+const props = defineProps<IProps>();
+const styles = computed(() => ({
+  alignItems: props.align,
+  justifyContent: props.justify,
+  flexWrap: props.wrap,
+  flexDirection: props.direction,
+  flexBasis: props.basis,
+  flexGrow: props.grow,
+  flexShrink: props.shrink,
+}));
+</script>
+
+<template>
+  <div class="flex" :style="styles">
+    <slot />
+  </div>
+</template>
+<style scoped>
+.flex {
+  display: flex;
+}
+</style>

package/src/components/Grid/Grid.mdx

@@ -0,0 +1,20 @@
+import { Canvas, Meta, Story, Controls } from '@storybook/blocks';
+import * as GridStories from './Grid.stories';
+
+<Meta of={GridStories} />
+
+# Grid
+
+Grid is a simple box component that can be used to create layouts.
+
+> A simple box Components
+
+<Canvas>
+  <Story of={GridStories.Overview} />
+</Canvas>
+
+### Playground <a id="playground" />
+
+> Changes you make in the controls will be reflected in the example above.
+
+<Controls of={GridStories.Overview} exclude={/^(click|default|on.*)$/} />

package/src/components/Grid/Grid.stories.js

@@ -0,0 +1,107 @@
+import Grid from './RGrid.vue';
+
+const Default = (args) => ({
+  components: { Grid },
+  setup() {
+    return { args };
+  },
+  template: `<Grid v-bind="args">
+  hello world
+  </Grid>`,
+});
+
+const defaultArgs = {
+  templateColumns: {
+    control: {
+      type: 'text',
+    },
+    defaultValue: 'repeat(3, 1fr)',
+  },
+  gap: {
+    control: {
+      type: 'text',
+    },
+    defaultValue: '20px',
+  },
+  rowGap: {
+    control: {
+      type: 'text',
+    },
+    defaultValue: '20px',
+  },
+  columnGap: {
+    control: {
+      type: 'text',
+    },
+    defaultValue: '20px',
+  },
+  autoFlow: {
+    control: {
+      type: 'select',
+      options: ['row', 'column', 'dense', 'row dense', 'column dense'],
+    },
+    defaultValue: 'row',
+  },
+  autoRows: {
+    control: {
+      type: 'select',
+      options: ['auto', 'min-content', 'max-content', '1rem'],
+    },
+    defaultValue: 'auto',
+  },
+  autoColumns: {
+    control: {
+      type: 'select',
+      options: ['auto', 'min-content', 'max-content', '1rem'],
+    },
+    defaultValue: 'auto',
+  },
+  templateRows: {
+    control: {
+      type: 'text',
+    },
+    defaultValue: 'repeat(3, 1fr)',
+  },
+  templateAreas: {
+    control: {
+      type: 'text',
+    },
+    defaultValue: 'none',
+  },
+  column: {
+    control: {
+      type: 'text',
+    },
+    defaultValue: '1 / 2',
+  },
+  row: {
+    control: {
+      type: 'text',
+    },
+    defaultValue: '1 / 2',
+  },
+};
+
+export default {
+  title: 'Layout/Grid',
+  component: Grid,
+
+  argTypes: {
+    ...defaultArgs,
+  },
+
+  parameters: {
+    viewMode: 'docs',
+  },
+};
+
+export const Overview = {
+  render: Default.bind({}),
+  name: 'Overview',
+
+  argTypes: {
+    ...Default.argTypes,
+  },
+
+  args: {},
+};