sprintify-ui 0.0.0

package/src/components/BaseButton.stories.js

@@ -0,0 +1,80 @@
+import BaseButton from './BaseButton.vue';
+
+const colors = [
+  'btn-primary',
+  'btn-secondary',
+  'btn-secondary-outline',
+  'btn-success',
+  'btn-warning',
+  'btn-danger',
+  'btn-white',
+  'btn-slate-100',
+  'btn-slate-100-outline',
+  'btn-slate-200',
+  'btn-slate-200-outline',
+  'btn-black',
+];
+
+const sizes = ['btn-xs', 'btn-sm', 'btn-base', 'btn-lg', 'btn-xl'];
+
+export default {
+  title: 'Components/BaseButton',
+  component: BaseButton,
+  argTypes: {
+    class: {
+      type: 'string',
+    },
+  },
+};
+
+const Template = (args) => ({
+  components: { BaseButton },
+  setup() {
+    return { args };
+  },
+  template: `
+    <BaseButton v-bind="args">
+      Click me
+    </BaseButton>
+  `,
+});
+
+export const Demo = Template.bind({});
+Demo.args = {
+  class: 'btn-primary btn-base',
+};
+
+export const Loading = Template.bind({});
+Loading.args = {
+  loading: true,
+};
+
+export const Colors = (args) => ({
+  components: { BaseButton },
+  setup() {
+    return { args, colors };
+  },
+  template: `
+    <div v-for="color in colors" :key="color" class="mb-4">
+      <p class="text-xs text-slate-600 leading-tight mb-1">{{ color }}</p>
+      <BaseButton :class="color">
+        Click here
+      </BaseButton>
+    </div>
+  `,
+});
+
+export const Sizes = (args) => ({
+  components: { BaseButton },
+  setup() {
+    return { args, sizes };
+  },
+  template: `
+    <div v-for="size in sizes" :key="size" class="mb-4">
+      <p class="text-xs text-slate-600 leading-tight mb-1">{{ size }}</p>
+      <BaseButton class="btn-primary" :class="size">
+      Click here
+      </BaseButton>
+    </div>
+  `,
+});

package/src/components/BaseButton.vue

@@ -0,0 +1,39 @@
+<template>
+  <component :is="as" ref="button" class="btn">
+    <div
+      class="flex items-center justify-center"
+      :class="{ 'opacity-0': loading }"
+    >
+      <slot />
+    </div>
+
+    <div
+      v-if="loading"
+      class="absolute inset-0 flex h-full w-full items-center justify-center"
+    >
+      <svg class="h-4 w-4 animate-spin" viewBox="0 0 24 24">
+        <path
+          fill="currentColor"
+          d="M12,4V2A10,10 0 0,0 2,12H4A8,8 0 0,1 12,4Z"
+        />
+      </svg>
+    </div>
+  </component>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  props: {
+    loading: {
+      type: Boolean,
+      default: false,
+    },
+    as: {
+      default: 'button',
+      type: String,
+    },
+  },
+});
+</script>

package/src/components/BaseCard.stories.js

@@ -0,0 +1,61 @@
+import BaseCard from './BaseCard.vue';
+import BaseCardRow from './BaseCardRow.vue';
+
+export default {
+  title: 'Layout/BaseCard',
+  component: BaseCard,
+  argTypes: {},
+};
+
+const Template = (args) => ({
+  components: { BaseCard, BaseCardRow },
+  setup() {
+    return { args };
+  },
+  template: `
+    <BaseCard class="mb-3">
+      Content (no padding)
+    </BaseCard>
+
+    <BaseCard class="mb-3">
+      <BaseCardRow>
+        Content (with padding)
+      </BaseCardRow>
+    </BaseCard>
+
+    <BaseCard class="mb-3">
+      <BaseCardRow>
+        Row 1
+      </BaseCardRow>
+      <BaseCardRow>
+        Row 2
+      </BaseCardRow>
+    </BaseCard>
+
+    <BaseCard class="mb-3">
+      <BaseCardRow size="xs">
+        Row (xs)
+      </BaseCardRow>
+      <BaseCardRow size="sm">
+        Row (sm)
+      </BaseCardRow>
+      <BaseCardRow size="base">
+        Row (base)
+      </BaseCardRow>
+      <BaseCardRow size="lg">
+        Row (lg)
+      </BaseCardRow>
+    </BaseCard>
+
+    <BaseCard :clipped="false" class="mb-3">
+      <div class="p-5 bg-slate-300">Not clipped</div>
+    </BaseCard>
+
+    <BaseCard clipped class="mb-3">
+      <div class="p-5 bg-slate-300">Clipped</div>
+    </BaseCard>
+  `,
+});
+
+export const Demo = Template.bind({});
+Demo.args = {};

package/src/components/BaseCard.vue

@@ -0,0 +1,49 @@
+<template>
+  <div
+    ref="card"
+    class="border-t border-b border-slate-300 bg-white"
+    :class="{
+      'rounded-lg border-r border-l shadow-sm': width != windowWidth,
+      'overflow-hidden': clipped,
+    }"
+  >
+    <slot />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { debounce } from 'lodash';
+import { Ref } from 'vue';
+
+defineProps({
+  clipped: {
+    default: false,
+    type: Boolean,
+  },
+});
+
+const windowWidth = ref(0);
+const width = ref(0);
+const card = ref(null) as Ref<HTMLElement | null>;
+
+onMounted(() => {
+  window.addEventListener('resize', onResizeDebounced);
+  onResize();
+});
+
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', onResizeDebounced);
+});
+
+const onResizeDebounced = debounce(() => {
+  onResize();
+}, 200);
+
+function onResize() {
+  windowWidth.value = document.body.clientWidth;
+  if (!card.value) {
+    return;
+  }
+  width.value = (card.value as HTMLElement).offsetWidth;
+}
+</script>

package/src/components/BaseCardRow.vue

@@ -0,0 +1,34 @@
+<template>
+  <div class="border-t border-slate-300 first:border-t-0">
+    <div :class="paddingClass">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  props: {
+    size: {
+      default: 'base',
+      type: String,
+    },
+  },
+  computed: {
+    paddingClass(): string {
+      if (this.size == 'xs') {
+        return 'md:p-3 p-2';
+      }
+      if (this.size == 'sm') {
+        return 'md:p-4 p-3';
+      }
+      if (this.size == 'lg') {
+        return 'md:p-8 p-6';
+      }
+      return 'md:p-6 px-4 py-5';
+    },
+  },
+});
+</script>

package/src/components/BaseClipboard.stories.js

@@ -0,0 +1,31 @@
+import BaseClipboard from './BaseClipboard.vue';
+
+export default {
+  title: 'Components/BaseClipboard',
+  component: BaseClipboard,
+  argTypes: {},
+};
+
+const Template = (args) => ({
+  components: { BaseClipboard },
+  setup() {
+    return { args };
+  },
+  template: `
+    <BaseClipboard class="mb-3">
+      <span class="underline text-blue-600">{{ args.value }}</span>
+    </BaseClipboard>
+
+    <br>
+
+    <BaseClipboard class="mb-3 border border-slate-200 rounded px-2 py-px">
+      <Icon icon="heroicons:server" class="mr-2 text-slate-500" />
+      <span class="font-mono text-sm text-slate-600">{{ args.value }}</span>
+    </BaseClipboard>
+  `,
+});
+
+export const Demo = Template.bind({});
+Demo.args = {
+  value: '168.192.0.1',
+};

package/src/components/BaseClipboard.vue

@@ -0,0 +1,96 @@
+<template>
+  <button
+    type="button"
+    class="relative inline-flex items-center"
+    @click="copyText()"
+    @mouseenter="showTooltip()"
+    @mouseleave="hideTooltip()"
+  >
+    <slot></slot>
+    <transition
+      enter-active-class="transition duration-200 ease-out"
+      enter-from-class="transform scale-90 opacity-0"
+      enter-to-class="transform scale-100 opacity-100"
+      leave-active-class="transition duration-75 ease-in"
+      leave-from-class="transform scale-100 opacity-100"
+      leave-to-class="transform scale-90 opacity-0"
+    >
+      <div
+        v-show="tooltipShown"
+        class="pointer-events-none absolute left-full z-10 items-center"
+      >
+        <div
+          class="ml-2 whitespace-nowrap rounded bg-slate-900 bg-opacity-80 px-3 py-2 text-xs leading-tight text-white backdrop-blur"
+        >
+          <div v-if="showCopied" class="flex items-center">
+            <Icon
+              class="mr-1 text-green-500"
+              icon="heroicons:check-circle-solid"
+            ></Icon>
+            {{ $t('sui.copied') }}
+          </div>
+          <div v-else>
+            {{ $t('sui.click_to_copy') }}
+          </div>
+        </div>
+      </div>
+    </transition>
+  </button>
+</template>
+
+<script lang="ts" setup>
+import { defineProps } from 'vue';
+
+const tooltipShown = ref(false);
+const showCopied = ref(false);
+
+const props = defineProps({
+  value: {
+    default: null,
+    type: String,
+  },
+});
+
+async function writeText(text: string) {
+  if (
+    typeof navigator === 'undefined' ||
+    !navigator.clipboard ||
+    !navigator.clipboard.writeText
+  ) {
+    throw new Error('Clipboard API not available in this browser');
+  }
+
+  await navigator.clipboard.writeText(text);
+}
+
+let timeoutId = null as null | number;
+
+function showTooltip() {
+  tooltipShown.value = true;
+}
+
+function hideTooltip() {
+  tooltipShown.value = false;
+  setTimeout(() => {
+    showCopied.value = false;
+  }, 200);
+  if (timeoutId) {
+    clearTimeout(timeoutId);
+  }
+}
+
+function copyText() {
+  writeText(props.value);
+  showSuccessMessage();
+}
+
+function showSuccessMessage() {
+  showCopied.value = true;
+  timeoutId = setTimeout(() => {
+    tooltipShown.value = false;
+    setTimeout(() => {
+      showCopied.value = false;
+    }, 200);
+  }, 1600);
+}
+</script>

package/src/components/BaseContainer.stories.js

@@ -0,0 +1,34 @@
+import BaseContainer from './BaseContainer.vue';
+
+export default {
+  title: 'Layout/BaseContainer',
+  description: 'Lorem',
+  component: BaseContainer,
+  argTypes: {
+    size: {
+      control: { type: 'select' },
+      options: ['lg', 'xl', '2xl', '3xl', '4xl', '5xl', '6xl', '7xl', 'full'],
+    },
+  },
+};
+
+const Template = (args) => ({
+  components: { BaseContainer },
+  setup() {
+    return { args };
+  },
+  template: `
+  <div class="bg-slate-100 py-16">
+    <BaseContainer v-bind="args">
+      <div class="bg-white py-5 border-2 border-dashed border-slate-400 rounded">
+        <p class="text-center">Default slot</p>
+      </div>
+    </BaseContainer>
+  </div>`,
+});
+
+export const Demo = Template.bind({});
+
+Demo.args = {
+  size: '7xl',
+};

package/src/components/BaseContainer.vue

@@ -0,0 +1,50 @@
+<template>
+  <div
+    class="mx-auto w-full md:px-8"
+    :class="[width, { 'px-4': !paddinglessMobile }]"
+  >
+    <slot />
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  props: {
+    size: {
+      default: '7xl',
+      type: String,
+    },
+    paddinglessMobile: {
+      default: false,
+      type: Boolean,
+    },
+    fluid: {
+      default: false,
+      type: Boolean,
+    },
+  },
+  computed: {
+    width() {
+      if (this.fluid) {
+        return 'max-w-full';
+      }
+
+      const sizes = {
+        lg: 'max-w-lg',
+        xl: 'max-w-xl',
+        '2xl': 'max-w-2xl',
+        '3xl': 'max-w-3xl',
+        '4xl': 'max-w-4xl',
+        '5xl': 'max-w-5xl',
+        '6xl': 'max-w-6xl',
+        '7xl': 'max-w-7xl',
+        full: 'max-w-full',
+      } as { [key: string]: string };
+
+      return sizes[this.size] || 'max-w-5xl';
+    },
+  },
+});
+</script>

package/src/components/BaseCounter.stories.js

@@ -0,0 +1,32 @@
+import BaseCounter from './BaseCounter.vue';
+
+export default {
+  title: 'Components/BaseCounter',
+  component: BaseCounter,
+  argTypes: {
+    color: {
+      control: { type: 'select' },
+      options: ['primary', 'danger', 'dark', 'light', 'white'],
+    },
+    size: {
+      control: { type: 'select' },
+      options: ['xs', 'sm', 'base'],
+    },
+  },
+};
+
+const Template = (args) => ({
+  components: { BaseCounter },
+  setup() {
+    return { args };
+  },
+  template: `
+    <BaseCounter v-bind="args"></BaseCounter>
+  `,
+});
+
+export const Demo = Template.bind({});
+Demo.args = {
+  count: 355,
+  maxDigit: 2,
+};

package/src/components/BaseCounter.vue

@@ -0,0 +1,72 @@
+<template>
+  <div
+    class="inline-flex h-4 w-auto items-center justify-center rounded-full px-1.5"
+    :class="[sizeClass, colorClass]"
+  >
+    {{ countLabel }}
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { padStart } from 'lodash';
+import { PropType } from 'vue';
+
+const props = defineProps({
+  count: {
+    required: true,
+    type: Number,
+  },
+  maxDigit: {
+    default: 3,
+    type: Number,
+  },
+  size: {
+    default: 'sm',
+    type: String,
+  },
+  color: {
+    default: 'danger',
+    type: String as PropType<'danger' | 'primary' | 'dark' | 'light' | 'white'>,
+  },
+});
+
+const countLabel = computed((): string => {
+  const realMaxDigit = Math.max(1, props.maxDigit);
+
+  const countString = props.count + '';
+  const numberOfDigit = countString.length;
+  if (numberOfDigit > realMaxDigit) {
+    return padStart('+', realMaxDigit + 1, '9');
+  }
+  return countString;
+});
+
+const sizeClass = computed((): string => {
+  if (props.size == 'xs') {
+    return 'text-[10px]';
+  }
+  if (props.size == 'sm') {
+    return 'text-xs';
+  }
+  if (props.size == 'base') {
+    return 'text-sm';
+  }
+  return 'text-xs';
+});
+
+const colorClass = computed((): string => {
+  if (props.color == 'danger') {
+    return 'bg-red-500 text-white';
+  }
+  if (props.color == 'primary') {
+    return 'bg-primary-500 text-white';
+  }
+  if (props.color == 'dark') {
+    return 'bg-slate-900 text-white';
+  }
+  if (props.color == 'light') {
+    return 'bg-slate-200 text-slate-900';
+  }
+  return 'bg-white text-slate-900';
+});
+</script>

package/src/components/BaseDataIterator.stories.js

@@ -0,0 +1,90 @@
+import BaseDataIterator from './BaseDataIterator.vue';
+import BaseCard from './BaseCard.vue';
+import BaseCardRow from './BaseCardRow.vue';
+import BaseLoadingCover from './BaseLoadingCover.vue';
+
+export default {
+  title: 'Data/BaseDataIterator',
+  component: BaseDataIterator,
+  argTypes: {},
+  args: {
+    url: 'https://effettandem.com/api/content/articles',
+    urlQuery: {
+      per_page: 5,
+    },
+    history: false,
+  },
+};
+
+const template = `
+<BaseDataIterator v-bind="args">
+  <template #default="{ items, loading }">
+    <div class="relative">
+      <div class="space-y-1.5">
+        <a
+          v-for="item in items"
+          :key="item.id"
+          :href="item.website_url"
+          target="_blank"
+          class="block group"
+        >
+          <BaseCard class="group-hover:bg-slate-100">
+            <BaseCardRow size="sm">
+              <div class="font-medium text-slate-900">
+                {{ item.title }}
+              </div>
+              <p class="text-xs leading-tight text-slate-500">
+                {{ item.subtitle }}
+              </p>
+            </BaseCardRow>
+          </BaseCard>
+        </a>
+      </div>
+
+      <BaseLoadingCover
+        v-show="loading"
+        backdropClass="bg-slate-100 bg-opacity-50"
+      >
+      </BaseLoadingCover>
+    </div>
+  </template>
+</BaseDataIterator>
+`;
+
+const Template = (args) => ({
+  components: { BaseDataIterator, BaseCard, BaseCardRow, BaseLoadingCover },
+  setup() {
+    return { args };
+  },
+  template: template,
+});
+
+export const Demo = Template.bind({});
+Demo.args = {
+  searchable: true,
+  actions: [
+    {
+      label: 'Open Google',
+      icon: 'heroicons:link',
+      href: 'https://google.com',
+    },
+    {
+      label: 'Export',
+      icon: 'heroicons:table-cells',
+      action: () => alert('export!'),
+    },
+    { line: true },
+    {
+      label: 'Delete all',
+      icon: 'heroicons:trash',
+      action: () => alert('Delete All!'),
+      color: 'danger',
+    },
+  ],
+};
+
+export const Simple = Template.bind({});
+Simple.args = {
+  searchable: false,
+  actions: [],
+};