@designcrowd/fe-shared-lib 1.0.0-test-publish

package/src/atoms/components/Slider/Slider.vue

@@ -0,0 +1,322 @@
+<template>
+  <div @mouseup="handleSliderMouseUp">
+    <div v-if="!suffix">
+      <p v-if="label" class="tw-w-full tw-mr-4">{{ label }}</p>
+      <div
+        :class="{
+          'tw-flex tw-flex-row tw-gap-4 tw-items-center': label,
+          'tw-grid tw-grid-cols-3 tw-gap-3': !label,
+        }"
+      >
+        <input
+          :id="sliderRangeInputId"
+          :value="sliderValue"
+          type="range"
+          :min="min"
+          :max="max"
+          :step="step"
+          class="slider"
+          :class="{
+            'tw-w-full': label,
+            'tw-col-span-2': !label,
+            'transparent-slider': transparent,
+          }"
+          @input="setValue($event.target.value)"
+          @mousedown="handleSliderMouseDown"
+        />
+        <input
+          :id="sliderValueInputId"
+          :value="sliderValue"
+          type="text"
+          :step="step"
+          class="tw-rounded-r tw-rounded-l tw-py-2 tw-bg-white tw-text-grayscale-600 tw-box-border tw-w-full tw-text-base tw-px-4 tw-border tw-border-solid focus:tw-outline-none tw-transition-colors tw-duration-300 tw-ease-out tw-shadow-inner"
+          @input.stop="setInput"
+          @blur.stop="checkLimit"
+          @keydown.down="limitToMinimum"
+          @keydown.up="limitToMaximum"
+        />
+      </div>
+    </div>
+    <div
+      v-else
+      :class="{
+        'tw-flex tw-flex-row tw-gap-4 tw-items-center': label,
+        'tw-grid tw-grid-cols-3 tw-gap-3': !label,
+      }"
+    >
+      <p v-if="label" class="tw-w-full tw-mr-4">{{ label }}</p>
+      <input
+        :value="sliderValue"
+        type="range"
+        :min="min"
+        :max="max"
+        class="slider"
+        :class="{
+          'tw-w-full': label,
+          'tw-col-span-2': !label,
+          'transparent-slider': transparent,
+        }"
+        @input="setValue($event.target.value)"
+        @mousedown="handleSliderMouseDown"
+      />
+      <div
+        class="tw-rounded-r tw-rounded-l tw-py-2 tw-bg-white tw-text-grayscale-600 tw-box-border tw-w-full tw-text-base tw-px-4 tw-border tw-border-solid focus:tw-outline-none tw-transition-colors tw-duration-300 tw-ease-out tw-shadow-inner tw-flex"
+        @click.stop="focus"
+      >
+        <input
+          ref="inputSlider"
+          :value="sliderValue"
+          type="text"
+          :step="step"
+          class="tw-border-none focus:tw-outline-none tw-w-full"
+          @input.stop="setInput"
+          @blur.stop="checkLimit"
+          @keydown.down="limitToMinimum"
+          @keydown.up="limitToMaximum"
+        />
+        <span class="tw-cursor-text" @click.stop="focus">{{ suffix }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    min: {
+      type: Number,
+      required: false,
+      default: 0,
+    },
+    max: {
+      type: Number,
+      required: false,
+      default: 100,
+    },
+    modelValue: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+    suffix: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+    label: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+    transparent: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    step: {
+      type: Number,
+      required: false,
+      default: 1,
+    },
+    sliderRangeInputId: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+    sliderValueInputId: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+    onSliderMouseDown: {
+      type: Function,
+      required: false,
+      default: undefined,
+    },
+    onSliderMouseUp: {
+      type: Function,
+      required: false,
+      default: undefined,
+    },
+  },
+  data() {
+    return {
+      sliderValue: this.modelValue,
+      decimalRegex: /^[0-9]*\.[0-9]*$/,
+      isInteracting: false,
+    };
+  },
+  computed: {
+    isDecimal() {
+      return !!this.decimalRegex.test(this.step);
+    },
+  },
+  watch: {
+    modelValue(v) {
+      this.sliderValue = v;
+    },
+  },
+  methods: {
+    focus() {
+      this.$refs.inputSlider.focus();
+    },
+    setValue(value) {
+      this.sliderValue = this.sliderValue > this.max ? this.max : Number.parseFloat(value);
+      this.$emit('update:model-value', value);
+    },
+    setInput(e) {
+      if (e.target.value === '' || e.target.value === '-') {
+        return;
+      }
+
+      const newVal = this.isDecimal ? e.target.value : Math.round(parseFloat(e.target.value));
+      let newNumber = 0;
+      if (newVal > this.max) {
+        newNumber = this.max;
+      } else if (Number.isNaN(newVal)) {
+        newNumber = this.min;
+      } else {
+        newNumber = newVal;
+      }
+      if (this.isDecimal) {
+        if (this.decimalRegex.test(newNumber)) {
+          this.updateValue(newNumber, e);
+        } else {
+          const numbersOnly = newVal.replace(/[^\d.]/g, '');
+          this.updateValue(numbersOnly, e);
+        }
+      } else {
+        this.updateValue(newNumber, e);
+      }
+    },
+    checkLimit(e) {
+      let newNumber = 0;
+      if (Number.isNaN(this.sliderValue)) {
+        newNumber = this.min;
+      } else if (this.sliderValue <= this.min) {
+        newNumber = this.min;
+      } else if (this.sliderValue > this.max) {
+        newNumber = this.max;
+      } else {
+        newNumber = this.sliderValue;
+      }
+
+      if (this.decimalRegex.test(this.sliderValue)) {
+        const limitDecimal = parseFloat(newNumber).toFixed(1);
+        this.updateValue(limitDecimal, e);
+      } else {
+        this.updateValue(newNumber, e);
+      }
+    },
+    limitToMinimum(e) {
+      if (this.sliderValue <= this.min) {
+        e.preventDefault();
+        this.updateValue(this.min, e);
+      } else {
+        let newVal = 0;
+        if (this.isDecimal) {
+          newVal = (parseFloat(e.target.value) - this.step).toFixed(1);
+        } else {
+          newVal = parseFloat(e.target.value) - this.step;
+        }
+        this.updateValue(newVal, e);
+      }
+    },
+    limitToMaximum(e) {
+      if (this.sliderValue >= this.max) {
+        e.preventDefault();
+        this.updateValue(this.max, e);
+      } else {
+        let newVal = 0;
+        if (this.isDecimal) {
+          newVal = (parseFloat(e.target.value) + this.step).toFixed(1);
+        } else {
+          newVal = parseFloat(e.target.value) + this.step;
+        }
+        this.updateValue(newVal, e);
+      }
+    },
+    updateValue(value, e) {
+      this.sliderValue = value;
+      e.target.value = value;
+      this.$emit('update:model-value', value);
+    },
+    handleSliderMouseDown() {
+      if (typeof this.onSliderMouseDown !== 'function') {
+        return;
+      }
+
+      this.isInteracting = true;
+      this.onSliderMouseDown();
+    },
+    handleSliderMouseUp() {
+      if (typeof this.onSliderMouseUp !== 'function') {
+        return;
+      }
+
+      if (this.isInteracting) {
+        this.isInteracting = false;
+        this.onSliderMouseUp();
+      }
+    },
+  },
+};
+</script>
+<style scoped>
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+input[type='number'] {
+  -moz-appearance: textfield;
+}
+
+.transparent-slider {
+  -webkit-appearance: none;
+  background: transparent;
+}
+
+.transparent-slider::-webkit-slider-runnable-track {
+  width: 100%;
+  height: 6px;
+  cursor: pointer;
+  animate: 0.2s;
+  background: #d0d0d0;
+  border: 1px solid rgb(230 230 230);
+}
+.transparent-slider::-webkit-slider-thumb {
+  border: 1px solid #d0d0d0;
+  height: 30px;
+  width: 30px;
+  border-radius: 100%;
+  background: #ffffff;
+  margin-top: -12px;
+  cursor: pointer;
+  -webkit-appearance: none;
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
+}
+.transparent-slider:focus::-webkit-slider-thumb {
+  border: 1px solid #595959;
+}
+.transparent-slider::-moz-range-track {
+  width: 100%;
+  height: 6px;
+  cursor: pointer;
+  animate: 0.2s;
+  background: #d0d0d0;
+  border: 1px solid rgb(230 230 230);
+}
+.transparent-slider::-moz-range-thumb {
+  border: 1px solid #d0d0d0;
+  height: 30px;
+  width: 30px;
+  border-radius: 100%;
+  background: #ffffff;
+  margin-top: -12px;
+  cursor: pointer;
+  -webkit-appearance: none;
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
+}
+</style>

package/src/atoms/components/StarRating/StarRating.stories.js

@@ -0,0 +1,50 @@
+import StarRating from './StarRating.vue';
+
+export default {
+  title: 'Components/Star Rating',
+  component: StarRating,
+};
+
+export const NoStar = () => {
+  return {
+    components: {
+      StarRating,
+    },
+    template: `
+        <StarRating :maxRating="5" />
+      `,
+  };
+};
+
+export const OneStar = () => {
+  return {
+    components: {
+      StarRating,
+    },
+    template: `
+      <StarRating :maxRating="8" :rating="1" :is-interactive="true"/>
+    `,
+  };
+};
+
+export const Middle = () => {
+  return {
+    components: {
+      StarRating,
+    },
+    template: `
+        <StarRating :maxRating="10" :rating="6"/>
+      `,
+  };
+};
+
+export const Full = () => {
+  return {
+    components: {
+      StarRating,
+    },
+    template: `
+        <StarRating :maxRating="5" :rating="5" :is-interactive="true"/>
+      `,
+  };
+};

package/src/atoms/components/StarRating/StarRating.vue

@@ -0,0 +1,84 @@
+<template>
+  <ul class="tw-flex tw-justify-center">
+    <li
+      v-for="index in maxRating"
+      :key="index"
+      class="tw-list-none"
+      @click="onRate(index)"
+      @mouseover="applyHoverEffect(index)"
+      @mouseleave="removeHoverEffect()"
+    >
+      <Icon v-if="index <= currentRating" name="star-filled" :size="size" :color="color" />
+      <Icon v-else-if="shouldShowFilledOnHover(index)" name="star-filled" :size="size" :color="color" />
+      <Icon v-else name="star-hollow" :size="size" :color="color" />
+    </li>
+  </ul>
+</template>
+
+<script>
+import Icon from '../Icon/Icon.vue';
+
+export default {
+  components: {
+    Icon,
+  },
+  props: {
+    maxRating: {
+      type: Number,
+      required: false,
+      default: 5,
+    },
+    rating: {
+      type: Number,
+      required: false,
+      default: 0,
+    },
+    size: {
+      type: String,
+      required: false,
+      default: 'sm',
+    },
+    color: {
+      type: String,
+      required: false,
+      default: 'warning-500',
+    },
+    isInteractive: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      currentRating: this.rating,
+      hoverRating: undefined,
+    };
+  },
+  methods: {
+    shouldShowFilledOnHover(index) {
+      return this.isInteractive && this.hoverRating && this.hoverRating >= index;
+    },
+    onRate(rating) {
+      if (this.isInteractive) {
+        this.currentRating = rating;
+        this.$emit('on-rated', rating);
+      }
+    },
+    applyHoverEffect(rating) {
+      if (this.isInteractive) {
+        this.hoverRating = rating;
+      }
+    },
+    removeHoverEffect() {
+      this.hoverRating = undefined;
+    },
+  },
+};
+</script>
+
+<style scoped>
+li:not(:last-child) {
+  @apply tw-mr-1;
+}
+</style>

package/src/atoms/components/TabMenu/TabMenu.stories.js

@@ -0,0 +1,54 @@
+import TabMenu from './TabMenu.vue';
+
+export default {
+  title: 'Components/Tab Menu',
+  component: TabMenu,
+};
+
+export const Sample = () => {
+  return {
+    components: {
+      TabMenu,
+    },
+
+    data() {
+      return {
+        checked: true,
+        tabNames: ['all', 'categories'],
+        selectedTabName: 'all',
+      };
+    },
+    methods: {
+      selectTab(tabName) {
+        this.selectedTabName = tabName;
+      },
+    },
+    template: `
+      <TabMenu :tab-names="tabNames" :selected-tab-name="selectedTabName" @on-tab-selected="selectTab" />
+    `,
+  };
+};
+
+export const SampleMoreTabs = () => {
+  return {
+    components: {
+      TabMenu,
+    },
+
+    data() {
+      return {
+        checked: true,
+        tabNames: ['home', 'gaming', 'food', 'nature', 'beauty', 'tax', 'legal'],
+        selectedTabName: 'gaming',
+      };
+    },
+    methods: {
+      selectTab(tabName) {
+        this.selectedTabName = tabName;
+      },
+    },
+    template: `
+      <TabMenu :tab-names="tabNames" :selected-tab-name="selectedTabName" @on-tab-selected="selectTab" />
+    `,
+  };
+};

package/src/atoms/components/TabMenu/TabMenu.vue

@@ -0,0 +1,44 @@
+<template>
+  <div class="tw-flex tw-w-full tw-overflow-x-auto">
+    <div
+      v-for="(tabName, index) in tabNames"
+      :key="index"
+      class="tw-w-full tw-py-2 tw-text-center tw-uppercase tw-font-bold tw-font-sans tw-text-sm tw-cursor-pointer tw-border tw-border-l-0 tw-border-r-0 tw-border-t-0 tw-border-solid"
+      :class="[
+        {
+          'tw-text-secondary-500 tw-border-grayscale-500 tw-border-b-1': selectedTabName !== tabName,
+          'tw-text-primary-500 tw-border-primary-500 tw-border-b-4': selectedTabName === tabName,
+        },
+        classes,
+      ]"
+      @click="onTabSelected(tabName)"
+    >
+      {{ tabName }}
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    tabNames: {
+      type: Array,
+      required: true,
+    },
+
+    selectedTabName: {
+      type: String,
+      required: true,
+    },
+    classes: {
+      type: [String, Object],
+      required: false,
+      default: '',
+    },
+  },
+  methods: {
+    onTabSelected(tabName) {
+      this.$emit('on-tab-selected', tabName);
+    },
+  },
+};
+</script>

package/src/atoms/components/TextCopyField/TextCopyField.stories.js

@@ -0,0 +1,68 @@
+import TextCopyField from './TextCopyField.vue';
+import Button from '../Button/Button.vue';
+
+export default {
+  title: 'Components/Text Copy Field',
+  component: TextCopyField,
+};
+
+const data = {
+  components: {
+    TextCopyField,
+    Button,
+  },
+  data() {
+    return {
+      value: 'Hello world',
+      copyButtonText: 'Hello!',
+      copiedButtonText: 'Goodbye!',
+      reset: true,
+    };
+  },
+  methods: {
+    resetCopy() {
+      this.reset = !this.reset;
+    },
+  },
+};
+
+export const Primary = () => {
+  return {
+    ...data,
+    template: `
+      <TextCopyField button-variant="primary" :text="value" />
+    `,
+  };
+};
+
+export const Secondary = () => {
+  return {
+    ...data,
+    template: `
+      <TextCopyField button-variant="secondary" :text="value" />
+    `,
+  };
+};
+
+export const CustomText = () => {
+  return {
+    ...data,
+    template: `
+      <div>
+        <TextCopyField button-variant="primary" :text="value" :defaultCopyButtonText="copyButtonText" :copiedButtonText="copiedButtonText" />
+      </div>
+      `,
+  };
+};
+
+export const ResetButton = () => {
+  return {
+    ...data,
+    template: `
+      <div>
+        <TextCopyField button-variant="primary" :text="value" :reset="reset" />
+        <Button label="Reset" variant="primary" size="large" @on-click="resetCopy()" />
+      </div>
+      `,
+  };
+};

package/src/atoms/components/TextCopyField/TextCopyField.vue

@@ -0,0 +1,75 @@
+<template>
+  <div class="tw-flex tw-w-full">
+    <TextInput :model-value="text" :readonly="true" :border-right="false" element-classes="tw-m-0" class="tw-w-full" />
+    <Button
+      :label="copyButtonText"
+      :variant="buttonVariant"
+      :rounded="false"
+      :rounded-right="true"
+      :full-height="true"
+      size="small-wide"
+      @on-click="onClick"
+    />
+  </div>
+</template>
+<script>
+import TextInput from '../TextInput/TextInput.vue';
+import Button from '../Button/Button.vue';
+
+export default {
+  components: {
+    TextInput,
+    Button,
+  },
+  props: {
+    text: {
+      type: String,
+      required: true,
+    },
+    buttonVariant: {
+      type: String,
+      required: false,
+      default: 'primary',
+    },
+    defaultCopyButtonText: {
+      type: String,
+      required: false,
+      default: 'Copy',
+    },
+    copiedButtonText: {
+      type: String,
+      required: false,
+      default: 'Copied!',
+    },
+    reset: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      copyButtonText: this.defaultCopyButtonText,
+    };
+  },
+  watch: {
+    reset(newVal, oldVal) {
+      if (newVal !== oldVal) {
+        this.copyButtonText = this.defaultCopyButtonText;
+      }
+    },
+  },
+  methods: {
+    onClick() {
+      this.$emit('on-click');
+
+      this.copyToClipboard();
+    },
+
+    copyToClipboard() {
+      this.copyButtonText = this.copiedButtonText;
+      navigator.clipboard.writeText(this.text);
+    },
+  },
+};
+</script>