sprintify-ui 0.0.11 → 0.0.13

package/src/components/BaseNavbar.stories.js

@@ -0,0 +1,150 @@
+import BaseNavbar from './BaseNavbar.vue';
+import BaseNavbarItem from './BaseNavbarItem.vue';
+import BaseAvatar from './BaseAvatar.vue';
+import BaseMenu from './BaseMenu.vue';
+import { Icon as BaseIcon } from '@iconify/vue';
+
+export default {
+  title: 'Layout/BaseNavbar',
+  component: BaseNavbar,
+  args: {},
+};
+
+const Template = (args) => ({
+  components: {
+    BaseNavbar,
+    BaseNavbarItem,
+    BaseIcon,
+    BaseAvatar,
+    BaseMenu,
+  },
+  setup() {
+    const user = {
+      email: 'jane@witify.io',
+      first_name: 'Jane',
+      last_name: 'Doe',
+      full_name: 'Jane Doe',
+      avatar_url:
+        'https://images.unsplash.com/photo-1494790108377-be9c29b29330??auto=format&fit=crop&w=200&h=200&q=80&g=face',
+    };
+
+    const menu = [
+      {
+        label: 'Home',
+        to: '/',
+        type: 'RouterLink',
+      },
+      {
+        label: 'Products',
+        to: '/',
+        count: 234,
+        type: 'RouterLink',
+      },
+      {
+        label: 'Settings',
+        to: '/',
+        type: 'RouterLink',
+      },
+    ];
+
+    const userMenu = [
+      {
+        label: 'Home',
+        icon: 'heroicons:home',
+        href: 'https://google.com',
+      },
+      {
+        line: true,
+      },
+      {
+        label: 'Logout',
+        icon: 'heroicons:arrow-right-on-rectangle',
+        href: 'https://google.com',
+      },
+    ];
+
+    return { args, menu, userMenu, user };
+  },
+  template: `
+    <div class="mb-40">
+      <BaseNavbar v-bind="args">
+        <template #navbar>
+          <div class="flex h-16 justify-between">
+            <!-- Left -->
+
+            <div class="flex items-center justify-center">
+              <!-- Logo -->
+              <router-link to="/" class="flex flex-shrink-0 grow items-center p-2 pl-0">
+                <img
+                  class="block h-8 w-auto"
+                  src="https://sprintify.witify.io/img/logo/logo-side-dark.svg"
+                  alt="Sprintify"
+                />
+              </router-link>
+
+              <!-- Links (desktop) -->
+              <div class="ml-10 hidden items-center space-x-4 md:flex">
+                <BaseNavbarItem
+                  v-for="item in menu"
+                  :key="item.label"
+                  :item="item"
+                />
+              </div>
+            </div>
+
+            <!-- Right -->
+
+            <div class="hidden md:ml-6 md:flex md:items-center">
+              <!-- Profile dropdown -->
+              <BaseMenu menu-class="w-52" :items="userMenu">
+                <template #button="{ open }">
+                  <div
+                    class="flex rounded-full"
+                    :class="[open ? 'bg-slate-700 ring-2 ring-blue-500 ring-offset-2 ring-offset-slate-700' : '']"
+                  >
+                    <BaseAvatar class="text-white" :user="user" />
+                  </div>
+                </template>
+              </BaseMenu>
+            </div>
+          </div>
+        </template>
+
+        <template #mobile>
+          <!-- Links mobile -->
+          <div class="space-y-1 p-2">
+            <BaseNavbarItem
+              v-for="item in menu"
+              :key="item.label"
+              :item="item"
+              class="flex w-full"
+            />
+          </div>
+    
+          <hr class="my-4 border-slate-700" />
+    
+          <!-- Profile links -->
+          <div class="p-2 pb-6">
+            <BaseAvatar
+              :user="user"
+              show-details
+              size="base"
+              class="px-3 text-white"
+            />
+            <div class="mt-4 space-y-1">
+              <BaseNavbarItem
+                v-for="item in userMenu"
+                :key="item.label"
+                :item="item"
+                class="flex w-full"
+              />
+            </div>
+          </div>
+        </template>
+      </BaseNavbar>
+    </div>
+  `,
+});
+
+export const Demo = Template.bind({});
+Demo.args = {};

package/src/components/BaseNavbar.vue

@@ -45,6 +45,9 @@
 </template>
 
 <script setup lang="ts">
+import { Icon as BaseIcon } from '@iconify/vue';
+import BaseContainer from './BaseContainer.vue';
+
 defineProps({
   size: {
     default: '7xl',

package/src/components/BaseNavbarItem.vue

@@ -52,6 +52,7 @@
 <script setup lang="ts">
 import { PropType } from 'vue';
 import { ActionItem } from '@/types/types';
+import BaseNavbarItemContent from './BaseNavbarItemContent.vue';
 
 defineProps({
   item: {

package/src/components/BaseNavbarItemContent.vue

@@ -11,6 +11,9 @@
 </template>
 
 <script lang="ts" setup>
+import { Icon as BaseIcon } from '@iconify/vue';
+import BaseCounter from './BaseCounter.vue';
+
 const buttonClasses =
   'px-3 py-2 text-left rounded-md md:text-sm flex text-base font-normal w-full';
 const buttonInactiveClasses =

package/src/components/BasePagination.stories.js

@@ -0,0 +1,32 @@
+import BasePagination from './BasePagination.vue';
+
+export default {
+  title: 'Components/BasePagination',
+  component: BasePagination,
+  args: {
+    totalVisible: 12,
+    lastPage: 20,
+  },
+};
+
+const Template = (args) => ({
+  components: {
+    BasePagination,
+  },
+  setup() {
+    const modelValue = ref(10);
+
+    return { args, modelValue };
+  },
+  template: `
+  <div>
+    <BasePagination v-model="modelValue" v-bind="args"></BasePagination>
+  </div>
+  <div style="max-width: 500px;">
+    <BasePagination v-model="modelValue" v-bind="args"></BasePagination>
+  </div>
+  `,
+});
+
+export const Demo = Template.bind({});
+Demo.args = {};

package/src/components/BasePagination.vue

@@ -1,9 +1,10 @@
 <template>
   <nav
     v-if="lastPage > 1 || lastPage < modelValue"
-    class="flex items-center justify-between border-t border-slate-200 px-4 sm:px-0"
+    ref="paginationNode"
+    class="flex items-center justify-between border-t border-slate-200"
   >
-    <div class="-mt-px flex w-0 flex-1">
+    <div class="flex -mt-px w-0 flex-1">
       <button
         type="button"
         :disabled="modelValue == 1"
@@ -17,23 +18,25 @@
         {{ $t('sui.previous') }}
       </button>
     </div>
-    <div class="hidden md:-mt-px md:flex">
+    <div :class="[mobileLayout ? 'hidden' : 'flex -mt-px']">
       <button
-        v-for="i in lastPage"
-        :key="i"
+        v-for="(i, index) in items"
+        :key="i + (index + '')"
         type="button"
-        class="inline-flex items-center border-t-2 px-4 py-4 text-sm font-medium hover:border-slate-300 hover:text-slate-700"
-        :class="
-          i == modelValue
-            ? 'border-primary-500 text-primary-600'
-            : 'border-transparent text-slate-500 hover:border-slate-300 hover:text-slate-700'
-        "
-        @click="$emit('model-value:update', i)"
+        class="inline-flex items-center border-t-2 px-4 py-4 text-sm font-medium"
+        :class="[
+          i == modelValue ? 'border-primary-500 text-primary-500' : '',
+          i != modelValue ? 'border-transparent text-slate-500' : '',
+          i != modelValue && isClickable(i)
+            ? 'hover:border-slate-300 hover:text-slate-700'
+            : '',
+        ]"
+        @click="onButtonClick(i)"
       >
         {{ i }}
       </button>
     </div>
-    <div class="-mt-px flex w-0 flex-1 justify-end">
+    <div class="flex -mt-px w-0 flex-1 justify-end">
       <button
         :disabled="modelValue >= lastPage"
         class="inline-flex items-center border-t-2 border-transparent px-1 py-4 text-sm font-medium text-slate-500 hover:enabled:border-slate-300 hover:enabled:text-slate-700 disabled:cursor-not-allowed disabled:opacity-60"
@@ -49,34 +52,117 @@
   </nav>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-  props: {
-    modelValue: {
-      required: true,
-      type: Number,
-    },
-    lastPage: {
-      required: true,
-      type: Number,
-    },
+<script lang="ts" setup>
+import { useResizeObserver } from '@vueuse/core';
+import { range } from 'lodash';
+import { Ref } from 'vue';
+
+const props = defineProps({
+  modelValue: {
+    default: 1,
+    required: true,
+    type: Number,
+  },
+  lastPage: {
+    required: true,
+    type: Number,
   },
-  emits: ['model-value:update'],
-  methods: {
-    next() {
-      if (this.modelValue >= this.lastPage) {
-        return;
-      }
-      this.$emit('model-value:update', this.modelValue + 1);
-    },
-    previous() {
-      if (this.modelValue == 1) {
-        return;
-      }
-      this.$emit('model-value:update', this.modelValue - 1);
-    },
+  totalVisible: {
+    default: 10,
+    type: Number,
   },
 });
+
+const emit = defineEmits(['update:model-value']);
+
+function next() {
+  if (props.modelValue >= props.lastPage) {
+    return;
+  }
+  emit('update:model-value', props.modelValue + 1);
+}
+
+function previous() {
+  if (props.modelValue == 1) {
+    return;
+  }
+  emit('update:model-value', props.modelValue - 1);
+}
+
+const paginationNode = ref(null) as Ref<null | HTMLElement>;
+const width = ref(800);
+
+useResizeObserver(paginationNode, () => {
+  width.value = paginationNode.value?.clientWidth ?? 800;
+  maxButtons.value = Math.floor((width.value - 96) / 56);
+});
+
+const mobileLayout = computed(() => {
+  return width.value < 600;
+});
+
+const length = computed(() => {
+  return props.lastPage + 1;
+});
+
+const maxButtons = ref(0);
+
+const items = computed(() => {
+  const totalVisible = props.totalVisible + 2;
+
+  if (
+    totalVisible === 0 ||
+    isNaN(length.value) ||
+    length.value > Number.MAX_SAFE_INTEGER
+  ) {
+    return [];
+  }
+
+  const maxLength = Math.min(
+    Math.max(0, totalVisible) || length.value,
+    Math.max(0, maxButtons.value) || length.value,
+    length.value
+  );
+
+  if (length.value <= maxLength) {
+    return range(1, length.value);
+  }
+
+  const even = maxLength % 2 === 0 ? 1 : 0;
+  const left = Math.floor(maxLength / 2);
+  const right = length.value - left + 1 + even;
+
+  if (props.modelValue > left && props.modelValue < right) {
+    const firstItem = 1;
+    const lastItem = length.value;
+    const start = props.modelValue - left + 2;
+    const end = props.modelValue + left - 2 - even;
+    const secondItem = start - 1 === firstItem + 1 ? 2 : '...';
+    const beforeLastItem = end + 1 === lastItem - 1 ? end + 1 : '...';
+
+    return [1, secondItem, ...range(start, end), beforeLastItem, length.value];
+  } else if (props.modelValue === left) {
+    const end = props.modelValue + left - 1 - even;
+    return [...range(1, end), '...', length.value];
+  } else if (props.modelValue === right) {
+    const start = props.modelValue - left + 1;
+    return [1, '...', ...range(start, length.value)];
+  } else {
+    return [...range(1, left), '...', ...range(right, length.value)];
+  }
+});
+
+function isClickable(i: number | string) {
+  if (i == '...') {
+    return false;
+  }
+  return true;
+}
+
+function onButtonClick(i: number | string) {
+  if (!isClickable(i)) {
+    return;
+  }
+  emit('update:model-value', i);
+}
 </script>

package/src/components/BasePanel.stories.js

@@ -0,0 +1,56 @@
+import BaseContainer from './BaseContainer.vue';
+import BasePanel from './BasePanel.vue';
+import BaseCard from './BaseCard.vue';
+import BaseCardRow from './BaseCardRow.vue';
+import BaseInputLabel from './BaseInputLabel.vue';
+import BaseInput from './BaseInput.vue';
+
+export default {
+  title: 'Layout/BasePanel',
+  component: BasePanel,
+  args: {
+    title: 'General information',
+    description:
+      'Enter general user information, name and age. User must be more than 10 years old to participate.',
+  },
+};
+
+const Template = (args) => ({
+  components: {
+    BaseContainer,
+    BasePanel,
+    BaseCard,
+    BaseCardRow,
+    BaseInputLabel,
+    BaseInput,
+  },
+  setup() {
+    return { args };
+  },
+  template: `
+  <div class="bg-slate-100 py-10">
+    <BaseContainer>
+      <BasePanel v-bind="args">
+        <BaseCard>
+          <BaseCardRow>
+            <div class="mb-4">
+              <BaseInputLabel label="Name" />
+              <BaseInput name="name" class="w-full" placeholder="Enter you name" />
+            </div>
+
+            <div class="mb-4">
+              <BaseInputLabel label="Age" />
+              <BaseInput name="age" class="w-full" placeholder="Enter you age" />
+            </div>
+
+            <button class="btn btn-primary mt-2">Submit</button>
+          </BaseCardRow>
+        </BaseCard>
+      </BasePanel>
+    </BaseContainer>
+  </div>
+  `,
+});
+
+export const Demo = Template.bind({});
+Demo.args = {};

package/src/components/BasePassword.stories.js

@@ -0,0 +1,36 @@
+import BasePassword from './BasePassword.vue';
+
+export default {
+  title: 'Form/BasePassword',
+  component: BasePassword,
+  args: {
+    required: true,
+    name: 'password',
+  },
+};
+
+const Template = (args) => ({
+  components: {
+    BasePassword,
+  },
+  setup() {
+    const value = ref('');
+    return { args, value };
+  },
+  template: `
+  <form @submit.prevent="">
+    <BasePassword class="border-slate-300" v-model="value" v-bind="args"></BasePassword>
+  </form>
+  `,
+});
+
+export const Demo = Template.bind({});
+Demo.args = {
+  placeholder: 'Enter your password',
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  disabled: true,
+  placeholder: 'Enter your password',
+};

package/src/components/BasePassword.vue

@@ -1,5 +1,8 @@
 <template>
-  <div class="flex border bg-white">
+  <div
+    class="flex rounded border border-slate-300 bg-white"
+    :class="[disabled ? 'cursor-not-allowed text-slate-300' : '']"
+  >
     <input
       ref="input"
       :value="modelValue"
@@ -8,7 +11,7 @@
       :disabled="disabled"
       :placeholder="placeholder"
       :required="required"
-      class="grow rounded-l border-none focus:ring-2 focus:ring-primary-500"
+      class="grow rounded-l rounded-r-none border-none focus:ring-2 focus:ring-primary-500 disabled:cursor-not-allowed"
       :class="inputClass"
       @input="onInput"
     />
@@ -16,15 +19,16 @@
       <button
         tabindex="-1"
         type="button"
-        class="pr-3 text-slate-500"
+        class="pr-3 text-slate-500 disabled:cursor-not-allowed disabled:text-slate-300"
+        :disabled="disabled"
         @click="showPassword = !showPassword"
       >
         <BaseIcon
           v-if="!showPassword"
-          icon="heroicons:eye-off"
+          icon="heroicons:eye-slash-20-solid"
           class="h-5 w-5"
         />
-        <BaseIcon v-else icon="heroicons:eye" class="h-5 w-5" />
+        <BaseIcon v-else icon="heroicons:eye-20-solid" class="h-5 w-5" />
       </button>
     </div>
   </div>
@@ -33,8 +37,10 @@
 <script lang="ts">
 import { trim } from 'lodash';
 import { defineComponent, PropType } from 'vue';
+import { Icon as BaseIcon } from '@iconify/vue';
 
 export default defineComponent({
+  components: { BaseIcon },
   props: {
     modelValue: {
       default: '',

package/src/components/BaseProcessRing.stories.js

@@ -0,0 +1,27 @@
+import BaseProcessRing from './BaseProcessRing.vue';
+
+export default {
+  title: 'Components/BaseProcessRing',
+  component: BaseProcessRing,
+  args: {
+    class: 'text-primary-500',
+    radius: 100,
+    stroke: 5,
+    progress: 0.6,
+  },
+};
+
+const Template = (args) => ({
+  components: {
+    BaseProcessRing,
+  },
+  setup() {
+    return { args };
+  },
+  template: `
+    <BaseProcessRing v-bind="args"></BaseProcessRing>
+  `,
+});
+
+export const Demo = Template.bind({});
+Demo.args = {};

package/src/components/BaseReadMore.stories.js

@@ -0,0 +1,30 @@
+import BaseReadMore from './BaseReadMore.vue';
+import BaseContainer from './BaseContainer.vue';
+
+export default {
+  title: 'Components/BaseReadMore',
+  component: BaseReadMore,
+  args: {},
+};
+
+const Template = (args) => ({
+  components: {
+    BaseReadMore,
+    BaseContainer,
+  },
+  setup() {
+    return { args };
+  },
+  template: `
+  <BaseContainer size="3xl">
+    <BaseReadMore v-bind="args">
+      <p class="text-slate-600">
+        Aute incididunt laborum in sint commodo reprehenderit et aliquip aliqua proident exercitation nostrud sunt. Consectetur laborum elit do non ullamco anim fugiat laboris non aliqua consequat culpa. Veniam aliquip irure et qui dolore eiusmod exercitation elit exercitation ad excepteur reprehenderit enim. Id laboris do eu amet qui Lorem excepteur. Eiusmod eiusmod est qui minim consectetur aliqua occaecat sit tempor nulla. Velit et eiusmod id ut adipisicing occaecat deserunt.Excepteur occaecat nulla deserunt Lorem eu mollit non esse. Velit do proident adipisicing labore ipsum nostrud ipsum pariatur magna. Consequat do reprehenderit eiusmod cupidatat cupidatat cupidatat reprehenderit. Aute fugiat ex fugiat in ut enim dolore est qui. Lorem irure eiusmod eiusmod cillum aute nostrud sint aute enim aute. Aliquip aliqua quis deserunt commodo fugiat incididunt sint qui proident.
+      </p>
+    </BaseReadMore>
+  </BaseContainer>
+  `,
+});
+
+export const Demo = Template.bind({});
+Demo.args = {};

package/src/components/BaseReadMore.vue

@@ -13,7 +13,7 @@
       class="mt-1 inline appearance-none border-b border-dashed border-slate-400 bg-transparent px-0.5 py-0 text-slate-900 hover:text-slate-600"
       @click="showMore = true"
     >
-      <span class="text-base font-semibold">{{ $t('sui.read_more') }}</span>
+      <span class="text-base font-medium">{{ $t('sui.read_more') }}</span>
     </button>
   </div>
 </template>

package/src/components/BaseSelect.stories.js

@@ -0,0 +1,67 @@
+import BaseSelect from './BaseSelect.vue';
+import BaseInputLabel from './BaseInputLabel.vue';
+
+export default {
+  title: 'Form/BaseSelect',
+  component: BaseSelect,
+  args: {
+    name: 'name',
+    class: 'w-full',
+  },
+};
+
+const Template = (args) => ({
+  components: {
+    BaseSelect,
+    BaseInputLabel,
+  },
+  setup() {
+    function onSubmit() {
+      alert('submit');
+    }
+    // To test, you should try the following scenarios
+    // - valid (ex: 'javascript')
+    // - invalid (ex: 'test')
+    // - empty string ''
+    // - null
+    // - undefined
+
+    // Test on Safari AND Chrome
+
+    // For optional, make sure the default option is selected
+    // For required, try to submit, it should be prevented
+    const value = ref('test');
+    return { args, value, onSubmit };
+  },
+  template: `
+  <form @submit.prevent="onSubmit" class="border-none">
+    <BaseInputLabel :required="args.required" label="Choose your favorite programing language" />
+    <BaseSelect v-model="value" v-bind="args">
+      <option value="javascript">JavaScript</option>
+      <option value="typescript">Typescript</option>
+      <option value="golang">Golang</option>
+    </BaseSelect>
+    <button type="submit" class="btn btn-primary mt-5">Submit</button>
+  </form>
+  <pre class="mt-4 bg-slate-800 font-light text-xs p-3 rounded text-white">{{ {value} }}</pre>
+  `,
+});
+
+export const Optional = Template.bind({});
+Optional.args = {
+  required: false,
+  placeholder: 'I dont like programing languages',
+};
+
+export const Required = Template.bind({});
+Required.args = {
+  required: true,
+  placeholder: 'Choose a language',
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  required: true,
+  placeholder: 'Choose a language',
+  disabled: true,
+};