@vc-shell/framework 1.0.341 → 1.1.0-alpha.10

package/shared/utilities/vueUtils.ts

@@ -1,50 +1,50 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-/* eslint-disable @typescript-eslint/ban-types */
-
-import { ComponentPublicInstance, ComputedOptions, MethodOptions } from "vue";
-
-type RemoveOnVnodePrefix<T> = {
-  [K in keyof T as K extends `onVnode${string}`
-    ? never
-    : K extends `on${infer Event}`
-      ? Uncapitalize<`on${Event}`>
-      : K]: T[K];
-};
-
-type EmitsExtractor<T> = RemoveOnVnodePrefix<Pick<T, Extract<keyof T, `on${string}`>>>;
-
-export type ComponentProps<T> = T extends new () => { $props: infer P }
-  ? NonNullable<P>
-  : T extends (props: infer P, ...args: any) => any
-    ? P
-    : {};
-
-export type ComponentSlots<T> = T extends (...args: any) => any
-  ? ReturnType<T> extends { [x: string]: any; __ctx?: { [x: string]: any; slots: infer Slots } }
-    ? NonNullable<Slots>
-    : {}
-  : T extends new () => { $slots: infer S }
-    ? NonNullable<S>
-    : {};
-
-export type ComponentEmit<T> = T extends (...args: any) => any
-  ? ReturnType<T> extends { [x: string]: any; __ctx?: { [x: string]: any; props: infer Props } }
-    ? EmitsExtractor<Props>
-    : {}
-  : T extends new () => { $props: infer Props }
-    ? EmitsExtractor<Props>
-    : never;
-
-export type ComponentPublicInstanceConstructor<
-  T extends ComponentPublicInstance<Props, RawBindings, D, C, M> = ComponentPublicInstance<any>,
-  Props = any,
-  RawBindings = any,
-  D = any,
-  C extends ComputedOptions = ComputedOptions,
-  M extends MethodOptions = MethodOptions,
-> = {
-  __isFragment?: never;
-  __isTeleport?: never;
-  __isSuspense?: never;
-  new (...args: any[]): T;
-};
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable @typescript-eslint/ban-types */
+
+import { ComponentPublicInstance, ComputedOptions, MethodOptions } from "vue";
+
+type RemoveOnVnodePrefix<T> = {
+  [K in keyof T as K extends `onVnode${string}`
+    ? never
+    : K extends `on${infer Event}`
+      ? Uncapitalize<`on${Event}`>
+      : K]: T[K];
+};
+
+type EmitsExtractor<T> = RemoveOnVnodePrefix<Pick<T, Extract<keyof T, `on${string}`>>>;
+
+export type ComponentProps<T> = T extends new () => { $props: infer P }
+  ? NonNullable<P>
+  : T extends (props: infer P, ...args: any) => any
+    ? P
+    : {};
+
+export type ComponentSlots<T> = T extends (...args: any) => any
+  ? ReturnType<T> extends { [x: string]: any; __ctx?: { [x: string]: any; slots: infer Slots } }
+    ? NonNullable<Slots>
+    : {}
+  : T extends new () => { $slots: infer S }
+    ? NonNullable<S>
+    : {};
+
+export type ComponentEmit<T> = T extends (...args: any) => any
+  ? ReturnType<T> extends { [x: string]: any; __ctx?: { [x: string]: any; props: infer Props } }
+    ? EmitsExtractor<Props>
+    : {}
+  : T extends new () => { $props: infer Props }
+    ? EmitsExtractor<Props>
+    : never;
+
+export type ComponentPublicInstanceConstructor<
+  T extends ComponentPublicInstance<Props, RawBindings, D, C, M> = ComponentPublicInstance<any>,
+  Props = any,
+  RawBindings = any,
+  D = any,
+  C extends ComputedOptions = ComputedOptions,
+  M extends MethodOptions = MethodOptions,
+> = {
+  __isFragment?: never;
+  __isTeleport?: never;
+  __isSuspense?: never;
+  new (...args: any[]): T;
+};

package/tailwind.config.ts

@@ -1,4 +1,5 @@
 /** @type { import('tailwindcss').Config } */
+import type { Config } from "tailwindcss";
 
 export const content = [
   "../../node_modules/@vc-shell/**/*.{vue,js,ts,jsx,tsx}",
@@ -10,7 +11,7 @@ export default {
   prefix: "tw-",
   theme: {
     fontFamily: {
-      roboto: ["Roboto", "sans-serif"],
+      jakarta: ["Plus Jakarta Sans", "sans-serif"],
     },
     fontSize: {
       xxs: [
@@ -28,13 +29,13 @@ export default {
       sm: [
         "0.875rem", //14px
         {
-          lineHeight: "1rem", //18px
+          lineHeight: "1.125rem", //18px
         },
       ],
       s: [
         "0.875rem", //14px
         {
-          lineHeight: "1rem", //18px
+          lineHeight: "1.125rem", //18px
         },
       ],
       base: [
@@ -123,4 +124,4 @@ export default {
     },
   },
   content,
-};
+} as Config;

package/ui/components/atoms/vc-badge/index.ts

@@ -1 +1 @@
-export { default as VcBadge } from "./vc-badge.vue";
+export { default as VcBadge } from "./vc-badge.vue";

package/ui/components/atoms/vc-badge/vc-badge.stories.ts

@@ -1,53 +1,53 @@
-import type { Meta, StoryFn } from "@storybook/vue3";
-import VcBadge from "./vc-badge.vue";
-
-export default {
-  title: "atoms/VcBadge",
-  component: VcBadge,
-  args: {
-    content: "42",
-  },
-  argTypes: {
-    content: {
-      control: "text",
-    },
-    active: {
-      control: "boolean",
-      type: {
-        name: "boolean",
-        required: false,
-      },
-    },
-    disabled: {
-      control: "boolean",
-      type: {
-        name: "boolean",
-        required: false,
-      },
-    },
-    clickable: {
-      control: "boolean",
-      type: {
-        name: "boolean",
-        required: false,
-      },
-    },
-  },
-} satisfies Meta<typeof VcBadge>;
-
-const Template: StoryFn<typeof VcBadge> = (args) => ({
-  components: { VcBadge },
-  setup: () => ({ args }),
-  template: `<VcBadge v-bind="args"></VcBadge>`,
-});
-
-export const Basic = Template.bind({});
-
-export const Active = Template.bind({});
-Active.args = { active: true };
-
-export const Disabled = Template.bind({});
-Disabled.args = { disabled: true };
-
-export const Clickable = Template.bind({});
-Clickable.args = { clickable: true };
+import type { Meta, StoryFn } from "@storybook/vue3";
+import VcBadge from "./vc-badge.vue";
+
+export default {
+  title: "atoms/VcBadge",
+  component: VcBadge,
+  args: {
+    content: "42",
+  },
+  argTypes: {
+    content: {
+      control: "text",
+    },
+    active: {
+      control: "boolean",
+      type: {
+        name: "boolean",
+        required: false,
+      },
+    },
+    disabled: {
+      control: "boolean",
+      type: {
+        name: "boolean",
+        required: false,
+      },
+    },
+    clickable: {
+      control: "boolean",
+      type: {
+        name: "boolean",
+        required: false,
+      },
+    },
+  },
+} satisfies Meta<typeof VcBadge>;
+
+const Template: StoryFn<typeof VcBadge> = (args) => ({
+  components: { VcBadge },
+  setup: () => ({ args }),
+  template: `<VcBadge v-bind="args"></VcBadge>`,
+});
+
+export const Basic = Template.bind({});
+
+export const Active = Template.bind({});
+Active.args = { active: true };
+
+export const Disabled = Template.bind({});
+Disabled.args = { disabled: true };
+
+export const Clickable = Template.bind({});
+Clickable.args = { clickable: true };

package/ui/components/atoms/vc-badge/vc-badge.vue

@@ -17,6 +17,8 @@
           'vc-badge__badge--active': active,
           'vc-badge__badge--clickable': clickable,
           'vc-badge__badge--disabled': disabled,
+          'vc-badge__badge--content-long': String(content).length > 1,
+          'vc-badge__badge--content-very-long': String(content).length > 2,
         }"
         @click="onClick"
       >
@@ -61,33 +63,30 @@ function onClick(): void {
 
 <style lang="scss">
 :root {
-  --badge-background-color: var(--additional-50);
+  --badge-background-color: var(--accent-500);
   --badge-background-color-hover: var(--neutrals-200);
   --badge-background-color-active: var(--neutrals-200);
   --badge-background-color-disabled: var(--neutrals-300);
 
-  --badge-text-color: var(--neutrals-700);
+  --badge-text-color: var(--additional-50);
   --badge-text-color-hover: var(--neutrals-800);
   --badge-text-color-active: var(--neutrals-800);
   --badge-text-color-disabled: var(--neutrals-500);
 
   --badge-border-radius: 9999px;
 
-  --badge-border-color: var(--primary-400);
+  --badge-border-color: var(--additional-50);
   --badge-border-color-hover: var(--primary-300);
   --badge-border-color-active: var(--primary-300);
   --badge-border-color-disabled: var(--primary-200);
 
-  --badge-width-small: 18px;
-  --badge-width-medium: 18px;
+  --badge-size-small: 17px;
+  --badge-size-medium: 20px;
 
-  --badge-padding-small: 0px 4px;
-  --badge-padding-medium: 0 4px;
+  --badge-distance-top-small: -8px;
+  --badge-distance-right-small: -10px;
 
-  --badge-distance-top-small: -10px;
-  --badge-distance-right-small: -6px;
-
-  --badge-distance-top-medium: -10px;
+  --badge-distance-top-medium: -8px;
   --badge-distance-right-medium: -10px;
 }
 
@@ -97,11 +96,11 @@ $sizes: small, medium;
   .vc-badge {
     &--#{$size} {
       .vc-badge__badge {
-        min-width: var(--badge-width-#{$size});
-        padding: var(--badge-padding-#{$size});
+        height: var(--badge-size-#{$size});
+        min-width: var(--badge-size-#{$size});
         top: var(--badge-distance-top-#{$size});
         right: var(--badge-distance-right-#{$size});
-        @apply tw-text-xs tw-leading-snug;
+        @apply tw-text-xxs tw-leading-snug;
       }
     }
   }
@@ -112,7 +111,25 @@ $sizes: small, medium;
 }
 
 .vc-badge__badge {
-  @apply tw-absolute tw-inline-flex tw-justify-center tw-items-center tw-text-center tw-indent-0 tw-rounded-full tw-font-normal tw-bg-[color:var(--badge-background-color)] tw-text-[color:var(--badge-text-color)] tw-border tw-border-solid tw-border-[color:var(--badge-border-color)] tw-transition tw-duration-200;
+  @apply tw-absolute tw-inline-flex tw-justify-center tw-items-center tw-text-center tw-indent-0 tw-rounded-full tw-font-semibold tw-bg-[color:var(--badge-background-color)] tw-text-[color:var(--badge-text-color)] tw-border tw-border-solid tw-border-[color:var(--badge-border-color)] tw-transition tw-duration-200;
+  aspect-ratio: 1 / 1;
+  box-sizing: border-box;
+  white-space: nowrap;
+  line-height: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.vc-badge__badge--content-long {
+  aspect-ratio: auto;
+}
+
+.vc-badge__badge--content-very-long {
+  aspect-ratio: auto;
+  max-width: 40px;
+  text-overflow: ellipsis;
+  overflow: hidden;
 }
 
 .vc-badge__badge--active {

package/ui/components/atoms/vc-button/vc-button.stories.ts

@@ -1,7 +1,7 @@
 import type { Meta, StoryFn } from "@storybook/vue3";
 import { VcButton } from "./";
 
-const COLORS = ["primary", "warning", "danger"];
+const COLORS = ["primary", "secondary"];
 
 const PROPERTY = ["disabled", "small", "outline", "selected", "text", "raised"];
 
@@ -61,21 +61,12 @@ export const Basic = Template.bind({});
 export const Disabled = Template.bind({});
 Disabled.args = { disabled: true };
 
-export const Small = Template.bind({});
-Small.args = { small: true };
-
-export const Outline = Template.bind({});
-Outline.args = { outline: true };
-
 export const Selected = Template.bind({});
 Selected.args = { selected: true };
 
 export const Text = Template.bind({});
 Text.args = { text: true };
 
-export const Raised = Template.bind({});
-Raised.args = { raised: true };
-
 export const Icon = Template.bind({});
 Icon.args = { icon: "fas fa-plus" };
 
@@ -85,12 +76,6 @@ IconClass.args = { icon: "fas fa-plus", iconClass: "tw-text-red" };
 export const IconSize = Template.bind({});
 IconSize.args = { icon: "fas fa-plus", iconSize: "l" };
 
-export const Warning = Template.bind({});
-Warning.args = { variant: "warning" };
-
-export const Danger = Template.bind({});
-Danger.args = { variant: "danger" };
-
 export const AllStates: StoryFn<typeof VcButton> = () => ({
   components: { VcButton },
   setup: () => ({ colors: COLORS, properties: PROPERTY }),

package/ui/components/atoms/vc-button/vc-button.vue

@@ -8,7 +8,7 @@
       v-if="icon"
       :class="['vc-button__icon', iconClass]"
       :icon="icon"
-      :size="small ? 'xs' : iconSize"
+      :size="small || size === 'sm' ? 'xs' : iconSize"
     ></VcIcon>
     <p
       v-if="$slots['default']"
@@ -20,18 +20,31 @@
 </template>
 <!-- eslint-disable @typescript-eslint/no-explicit-any -->
 <script lang="ts" setup>
-import { computed } from "vue";
+import { computed, type Component } from "vue";
 import { VcIcon } from "./../vc-icon";
 export interface Props {
-  icon?: string;
+  icon?: string | Component;
   iconClass?: string;
   iconSize?: InstanceType<typeof VcIcon>["$props"]["size"];
-  variant?: "primary" | "warning" | "danger";
+  variant?: "primary" | "secondary";
   disabled?: boolean;
+  size?: "xs" | "sm" | "base";
+  /**
+   * @deprecated Use `size` instead
+   * Whether the button is small
+   * */
   small?: boolean;
+  /**
+   * @deprecated Use `variant` instead
+   * Whether the button is outlined
+   * */
   outline?: boolean;
   selected?: boolean;
   text?: boolean;
+  /**
+   * @deprecated Use `variant` instead
+   * Whether the button is raised
+   * */
   raised?: boolean;
 }
 
@@ -45,6 +58,7 @@ export interface Emits {
 const props = withDefaults(defineProps<Props>(), {
   variant: "primary",
   iconSize: "s",
+  size: "base",
 });
 
 const emit = defineEmits<Emits>();
@@ -58,11 +72,13 @@ const buttonClass = computed(() => {
     "vc-button",
     {
       [`vc-button-${props.variant}`]: props.variant,
+      [`vc-button_${props.size}`]: props.size,
       "vc-button_small": props.small,
-      "vc-button_outline": props.outline,
+      // "vc-button_outline": props.outline,
       "vc-button_selected": props.selected,
       "vc-button_text": props.text,
-      "vc-button_raised": props.raised,
+      "vc-button_disabled": props.disabled,
+      // "vc-button_raised": props.raised,
     },
   ];
 });
@@ -80,38 +96,38 @@ function onClick(e: Event): void {
   --button-primary-background-color: var(--primary-500);
   --button-primary-background-color-hover: var(--primary-600);
   --button-primary-background-color-disabled: var(--primary-300);
-  --button-primary-text-color: var(--neutrals-50);
-  --button-primary-text-color-outlined: var(--button-primary-background-color);
-  --button-primary-text-color-hover: var(--button-primary-background-color-hover);
-
-  --button-warning-background-color: var(--warning-500);
-  --button-warning-background-color-hover: var(--warning-600);
-  --button-warning-background-color-disabled: var(--warning-300);
-  --button-warning-text-color: var(--neutrals-50);
-  --button-warning-text-color-outlined: var(--button-warning-background-color);
-  --button-warning-text-color-hover: var(--button-warning-background-color-hover);
-
-  --button-danger-background-color: var(--danger-500);
-  --button-danger-background-color-hover: var(--danger-600);
-  --button-danger-background-color-disabled: var(--danger-300);
-  --button-danger-text-color: var(--neutrals-50);
-  --button-danger-text-color-outlined: var(--button-danger-background-color);
-  --button-danger-text-color-hover: var(--button-danger-background-color-hover);
-
-  --button-border-radius: 3px;
+  --button-primary-text-color: var(--additional-50);
+  --button-primary-text-color-disabled: var(--additional-50);
+  --button-primary-border-color: var(--primary-500);
+  --button-primary-border-color-hover: var(--primary-600);
+  --button-primary-border-color-disabled: var(--primary-300);
+
+  --button-secondary-background-color: var(--additional-50);
+  --button-secondary-background-color-hover: var(--primary-100);
+  --button-secondary-background-color-disabled: var(--additional-50);
+  --button-secondary-text-color: var(--neutrals-700);
+  --button-secondary-text-color-disabled: var(--neutrals-400);
+  --button-secondary-border-color: var(--secondary-300);
+  --button-secondary-border-color-hover: var(--secondary-400);
+  --button-secondary-border-color-disabled: var(--secondary-300);
+
+  --button-border-radius: 4px;
+
   --button-padding-hor: 14px;
-  --button-padding-hor-small: 14px;
   --button-padding-vert: 10px;
-  --button-padding-vert-small: 7px;
+
+  --button-padding-hor-small: 12px;
+  --button-padding-vert-small: 8px;
+
+  --button-padding-vert-extra-small: 5px;
+  --button-padding-hor-extra-small: 12px;
 
   --button-height: 36px;
   --button-height-small: 28px;
-
-  --button-raised-shadow-color: var(--secondary-200);
-  --button-raised-shadow: 1px 4px 10px rgb(from var(--button-raised-shadow-color) r g b / 100%);
+  --button-height-extra-small: 22px;
 }
 
-$variants: primary, warning, danger;
+$variants: primary, secondary;
 
 .vc-button {
   &__icon + &__title {
@@ -120,53 +136,39 @@ $variants: primary, warning, danger;
 
   @each $variant in $variants {
     &.vc-button-#{$variant} {
-      @apply tw-inline-flex tw-items-center tw-font-medium tw-text-sm tw-cursor-pointer tw-box-border tw-transition tw-duration-200
-      tw-rounded-[var(--button-border-radius)] tw-px-[var(--button-padding-hor)] tw-py-[var(--button-padding-vert)]
+      @apply tw-inline-flex tw-items-center tw-font-semibold tw-cursor-pointer tw-box-border tw-transition tw-duration-200
+      tw-rounded-[var(--button-border-radius)]
       tw-min-h-[var(--button-height)]
       tw-bg-[color:var(--button-#{$variant}-background-color)]
+      tw-border tw-border-[color:var(--button-#{$variant}-border-color)] tw-border-solid
       tw-flex tw-justify-center
-      tw-text-[color:var(--button-#{$variant}-text-color)]
-      hover:tw-bg-[color:var(--button-#{$variant}-background-color-hover)]
-      focus:tw-bg-[color:var(--button-#{$variant}-background-color-hover)]
-      disabled:tw-cursor-not-allowed
-      disabled:tw-bg-[color:var(--button-#{$variant}-background-color-disabled)];
+      tw-text-[color:var(--button-#{$variant}-text-color)];
 
-      &.vc-button_small {
-        @apply tw-py-[var(--button-padding-vert-small)] tw-min-h-[var(--button-height-small)] tw-px-[var(--button-padding-hor-small)] tw-font-normal tw-text-xs;
+      &:hover {
+        @apply tw-bg-[color:var(--button-#{$variant}-background-color-hover)] tw-border-[color:var(--button-#{$variant}-border-color-hover)];
+      }
 
-        .vc-button__icon + .vc-button__title {
-          @apply tw-ml-2;
-        }
+      &:focus {
+        @apply tw-bg-[color:var(--button-#{$variant}-background-color-hover)] tw-border-[color:var(--button-#{$variant}-border-color-hover)];
       }
 
-      &.vc-button_outline {
-        @apply tw-bg-transparent tw-border tw-border-[color:var(--button-#{$variant}-background-color)]
-        tw-text-[color:var(--button-#{$variant}-text-color-outlined)]
-        hover:tw-text-[color:var(--button-#{$variant}-text-color-hover)]
-        hover:tw-bg-transparent
-        hover:tw-border-[color:var(--button-#{$variant}-background-color-hover)]
-        disabled:tw-text-[color:rgb(from_var(--button-#{$variant}-text-color-hover)_r_g_b/50%)]
-        disabled:tw-border-[color:rgb(from_var(--button-#{$variant}-background-color)_r_g_b/50%)]
-        disabled:tw-bg-transparent;
+      &:disabled {
+        @apply tw-text-[color:var(--button-#{$variant}-text-color-disabled)] tw-bg-[color:var(--button-#{$variant}-background-color-disabled)] tw-border-[color:var(--button-#{$variant}-border-color-disabled)] tw-cursor-not-allowed;
+      }
+
+      // TODO: remove this after the migration
+      &.vc-button_small {
+        @apply tw-py-[var(--button-padding-vert-extra-small)] tw-min-h-[var(--button-height-extra-small)] tw-px-[var(--button-padding-hor-extra-small)] tw-text-xxs;
       }
 
       &.vc-button_text {
-        @apply tw-border-none tw-bg-transparent tw-p-0 tw-min-h-0
+        @apply tw-border-none tw-bg-transparent
         tw-text-[color:var(--button-#{$variant}-background-color)]
         hover:tw-text-[color:var(--button-#{$variant}-background-color-hover)]
         focus:tw-text-[color:var(--button-#{$variant}-background-color-hover)]
         disabled:tw-text-[color:rgb(from_var(--button-#{$variant}-background-color)_r_g_b/50%)];
-      }
-
-      &.vc-button_raised {
-        @apply [box-shadow:var(--button-raised-shadow)] tw-px-[var(--button-padding-hor)] tw-py-[var(--button-padding-vert)];
 
-        &.vc-button_text:not(:disabled) {
-          &:hover,
-          &:focus {
-            @apply tw-bg-[color:rgb(from_var(--button-#{$variant}-background-color-hover)_r_g_b/7%)];
-          }
-        }
+        @apply tw-p-0 tw-min-h-0 #{!important};
       }
 
       &.vc-button_selected {
@@ -175,10 +177,22 @@ $variants: primary, warning, danger;
         &.vc-button_text {
           @apply tw-bg-[color:rgb(from_var(--button-#{$variant}-background-color-hover)_r_g_b/7%)] tw-p-1;
         }
+      }
 
-        &.vc-button_outline {
-          @apply tw-border-[color:var(--button-#{$variant}-background-color-hover)]  tw-bg-transparent  #{!important};
-        }
+      &.vc-button_xs {
+        @apply tw-py-[var(--button-padding-vert-extra-small)] tw-min-h-[var(--button-height-extra-small)] tw-px-[var(--button-padding-hor-extra-small)] tw-text-xxs;
+      }
+
+      &.vc-button_sm {
+        @apply tw-py-[var(--button-padding-vert-small)] tw-min-h-[var(--button-height-small)] tw-px-[var(--button-padding-hor-small)] tw-text-xs;
+      }
+
+      &.vc-button_base {
+        @apply tw-py-[var(--button-padding-vert)] tw-min-h-[var(--button-height)] tw-px-[var(--button-padding-hor)] tw-text-sm tw-leading-4;
+      }
+
+      .vc-button__icon + .vc-button__title {
+        @apply tw-ml-2;
       }
     }
   }

package/ui/components/atoms/vc-card/index.ts

@@ -1,3 +1,3 @@
-import _Card from "./vc-card.vue";
-
-export const VcCard = _Card as typeof _Card;
+import _Card from "./vc-card.vue";
+
+export const VcCard = _Card as typeof _Card;

package/ui/components/atoms/vc-card/vc-card.stories.ts

@@ -81,7 +81,7 @@ export const Actions: StoryFn<typeof VcCard> = (args) => ({
         <p class="tw-p-4">{{args.default}}</p>
 
         <template #actions>
-          <VcButton variant="danger">Action button</VcButton>
+          <VcButton variant="primary">Action button</VcButton>
         </template>
       </vc-card>
     `,