@pequity/squirrel 6.1.0 → 7.0.0

package/squirrel/utils/inputClassesMixin.spec.js

@@ -1,241 +0,0 @@
-import inputClassesMixin from '@squirrel/utils/inputClassesMixin';
-import { shallowMount } from '@vue/test-utils';
-
-const baseInputClassesMd = () => [
-  'text-night',
-  'w-full',
-  'bg-surface',
-  'focus:outline-none',
-  'border-0',
-  'ring-1',
-  'ring-inset',
-  'focus:ring-2',
-  'disabled:ring-p-gray-30',
-  'disabled:hover:ring-p-gray-30',
-  'disabled:bg-p-blue-10',
-  'disabled:cursor-default',
-  'placeholder:text-p-gray-40',
-  'h-10',
-  'text-base',
-  'rounded',
-  'pl-4',
-  'pr-4',
-  'ring-p-gray-30',
-  'hover:ring-primary',
-  'focus:ring-primary',
-];
-
-const baseInputClassesSm = () => {
-  return baseInputClassesMd().map((item) => {
-    return (
-      {
-        'h-10': 'h-8',
-        'text-base': 'text-sm',
-        'pl-4': 'pl-3',
-        'pr-4': 'pr-3',
-      }[item] || item
-    );
-  });
-};
-
-const baseInputClassesLg = () => {
-  return baseInputClassesMd().map((item) => {
-    return (
-      {
-        'h-10': 'h-12',
-        'text-base': 'text-lg',
-        'pl-4': 'pl-5',
-        'pr-4': 'pr-5',
-      }[item] || item
-    );
-  });
-};
-
-const baseLabelClassesMd = ['block', 'mb-1', 'font-medium', 'text-sm'];
-
-const createWrapper = (opts) => {
-  const TestComponent = {
-    render() {
-      //
-    },
-    mixins: [inputClassesMixin],
-  };
-
-  return shallowMount(TestComponent, opts);
-};
-
-describe('inputClassesMixin', () => {
-  it('generates input classes md', () => {
-    const wrapper = createWrapper({ props: { size: 'md' } });
-
-    const inputClasses = wrapper.vm.inputClasses.split(' ');
-
-    expect(inputClasses).toEqual(expect.arrayContaining(baseInputClassesMd()));
-  });
-
-  it('generates input classes sm', () => {
-    const wrapper = createWrapper({ props: { size: 'sm' } });
-
-    const inputClasses = wrapper.vm.inputClasses.split(' ');
-
-    expect(inputClasses).toEqual(expect.arrayContaining(baseInputClassesSm()));
-  });
-
-  it('generates input classes lg', () => {
-    const wrapper = createWrapper({ props: { size: 'lg' } });
-
-    const inputClasses = wrapper.vm.inputClasses.split(' ');
-
-    expect(inputClasses).toEqual(expect.arrayContaining(baseInputClassesLg()));
-  });
-
-  it('generates label classes md', () => {
-    const wrapper = createWrapper({ props: { size: 'md' } });
-
-    const labelClasses = wrapper.vm.labelClasses.split(' ');
-
-    expect(labelClasses).toEqual(expect.arrayContaining(baseLabelClassesMd));
-  });
-
-  it('generates label classes sm', () => {
-    const wrapper = createWrapper({ props: { size: 'sm' } });
-
-    const labelClasses = wrapper.vm.labelClasses.split(' ');
-    const baseLabelClasses = baseLabelClassesMd.map((item) => {
-      return (
-        {
-          'text-sm': 'text-xs',
-        }[item] || item
-      );
-    });
-
-    expect(labelClasses).toEqual(expect.arrayContaining(baseLabelClasses));
-  });
-
-  it('generates label classes lg', () => {
-    const wrapper = createWrapper({ props: { size: 'lg' } });
-
-    const labelClasses = wrapper.vm.labelClasses.split(' ');
-    const baseLabelClassesLg = baseLabelClassesMd.map((item) => {
-      return (
-        {
-          'text-sm': 'text-base',
-        }[item] || item
-      );
-    });
-
-    expect(labelClasses).toEqual(expect.arrayContaining(baseLabelClassesLg));
-  });
-
-  it('generates select classes md', () => {
-    const wrapper = createWrapper({ props: { size: 'md' } });
-
-    const selectClasses = wrapper.vm.selectClasses.split(' ');
-    const baseInputClasses = baseInputClassesMd().filter((item) => {
-      return !['pr-4', 'bg-surface'].includes(item);
-    });
-    const baseSelectClasses = [
-      'appearance-none',
-      'bg-[position:right_1rem_center]',
-      'bg-no-repeat',
-      'pr-10',
-      'squirrel-bg-chevron-down',
-      'truncate',
-    ];
-
-    const res = baseInputClasses.concat(baseSelectClasses);
-
-    expect(selectClasses).toEqual(expect.arrayContaining(res));
-  });
-
-  it('generates select classes sm', () => {
-    const wrapper = createWrapper({ props: { size: 'sm' } });
-
-    const selectClasses = wrapper.vm.selectClasses.split(' ');
-    const baseInputClasses = baseInputClassesSm().filter((item) => {
-      return !['pr-3', 'bg-surface'].includes(item);
-    });
-    const baseSelectClasses = [
-      'appearance-none',
-      'bg-[position:right_0.675rem_center]',
-      'bg-no-repeat',
-      'pr-8',
-      'squirrel-bg-chevron-down',
-      'truncate',
-    ];
-    const res = baseInputClasses.concat(baseSelectClasses);
-
-    expect(selectClasses).toEqual(expect.arrayContaining(res));
-  });
-
-  it('generates select classes lg', () => {
-    const wrapper = createWrapper({ props: { size: 'lg' } });
-
-    const selectClasses = wrapper.vm.selectClasses.split(' ');
-    const baseInputClasses = baseInputClassesLg().filter((item) => {
-      return !['pr-5', 'bg-surface'].includes(item);
-    });
-    const baseSelectClasses = [
-      'appearance-none',
-      'bg-[position:right_1.25rem_center]',
-      'bg-no-repeat',
-      'pr-12',
-      'squirrel-bg-chevron-down',
-      'truncate',
-    ];
-    const res = baseInputClasses.concat(baseSelectClasses);
-
-    expect(selectClasses).toEqual(expect.arrayContaining(res));
-  });
-
-  it('generates textarea classes md', () => {
-    const wrapper = createWrapper({ props: { size: 'md' } });
-
-    const textareaClasses = wrapper.vm.textareaClasses.split(' ');
-    const baseInputClasses = baseInputClassesMd().filter((item) => {
-      return !['pl-3', 'pr-3', 'h-10'].includes(item);
-    });
-    const res = baseInputClasses.concat(['resize-y', 'px-3', 'py-3', 'overflow-auto', 'h-auto']);
-
-    expect(textareaClasses).toEqual(expect.arrayContaining(res));
-  });
-
-  it('generates textarea classes sm', () => {
-    const wrapper = createWrapper({ props: { size: 'sm' } });
-
-    const textareaClasses = wrapper.vm.textareaClasses.split(' ');
-    const baseInputClasses = baseInputClassesSm().filter((item) => {
-      return !['pr-3', 'pl-3', 'h-8', 'text-sm'].includes(item);
-    });
-    const res = baseInputClasses.concat(['resize-y', 'px-3', 'py-3', 'overflow-auto', 'h-auto', 'pr-4', 'pl-4']);
-
-    expect(textareaClasses).toEqual(expect.arrayContaining(res));
-  });
-
-  it('generates textarea classes lg', () => {
-    const wrapper = createWrapper({ props: { size: 'lg' } });
-
-    const textareaClasses = wrapper.vm.textareaClasses.split(' ');
-    const baseInputClasses = baseInputClassesLg().filter((item) => {
-      return !['pr-5', 'pl-5', 'h-12', 'text-lg'].includes(item);
-    });
-    const res = baseInputClasses.concat(['resize-y', 'px-3', 'py-3', 'overflow-auto', 'h-auto', 'pr-4', 'pl-4']);
-
-    expect(textareaClasses).toEqual(expect.arrayContaining(res));
-  });
-
-  it('generates error classes', () => {
-    const wrapper = createWrapper({ props: { size: 'md', errorMsg: 'Test error' } });
-
-    const inputClasses = wrapper.vm.inputClasses.split(' ');
-    const resInputClasses = baseInputClassesMd()
-      .filter((item) => {
-        return !['ring-p-gray-30', 'hover:ring-primary', 'focus:ring-primary'].includes(item);
-      })
-      .concat(['ring-on-error', 'hover:ring-on-error', 'focus:ring-on-error']);
-    const errorMsgClasses = wrapper.vm.errorMsgClasses.split(' ');
-
-    expect(inputClasses).toEqual(expect.arrayContaining(resInputClasses));
-    expect(errorMsgClasses).toEqual(expect.arrayContaining(['text-xs', 'text-on-error', 'mt-1']));
-  });
-});

package/squirrel/utils/inputClassesMixin.ts

@@ -1,60 +0,0 @@
-import { type Size, SIZES } from '@squirrel/components/p-btn/p-btn.types';
-import { inputClasses, selectClasses, textareaClasses } from '@squirrel/utils/inputClasses';
-import { defineComponent, type PropType } from 'vue';
-
-export default defineComponent({
-  props: {
-    size: {
-      type: String as PropType<Size>,
-      default: 'md',
-      validator(value: Size) {
-        return SIZES.includes(value);
-      },
-    },
-    errorMsg: {
-      type: String,
-      default: '',
-    },
-    required: {
-      type: Boolean,
-      default: false,
-    },
-    rounded: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  computed: {
-    allClasses() {
-      const { input, label, errorMessage } = inputClasses({
-        size: this.size,
-        prefix: !!this.$slots.prefix,
-        suffix: !!this.$slots.suffix,
-        required: this.required,
-        error: !!this.errorMsg,
-        rounded: this.rounded,
-      });
-
-      return { input: input(), label: label(), errorMessage: errorMessage() };
-    },
-    inputClasses() {
-      return this.allClasses.input;
-    },
-    labelClasses() {
-      return this.allClasses.label;
-    },
-    errorMsgClasses() {
-      return this.allClasses.errorMessage;
-    },
-    selectClasses() {
-      const { input } = selectClasses({ size: this.size, required: this.required, error: !!this.errorMsg });
-
-      return input();
-    },
-    textareaClasses() {
-      const { input } = textareaClasses({ required: this.required, error: !!this.errorMsg });
-
-      return input();
-    },
-  },
-});

package/squirrel/utils/tailwind.spec.js

@@ -1,27 +0,0 @@
-import { getScreen } from '@squirrel/utils/tailwind';
-import { cloneDeep } from 'lodash-es';
-
-const screens = { sm: '640px', md: '768px' };
-
-describe('tailwind', () => {
-  it('should return the correct screen size for a valid key', () => {
-    // Mock the theme.screens object
-    const originalScreens = global.screens;
-    global.screens = cloneDeep(screens);
-
-    expect(getScreen('sm')).toBe('640px');
-    expect(getScreen('md')).toBe('768px');
-
-    // Restore the original screens object
-    global.screens = originalScreens;
-  });
-
-  it('should return undefined for an invalid key', () => {
-    const originalScreens = global.screens;
-    global.screens = cloneDeep(screens);
-
-    expect(getScreen('xxl')).toBeUndefined();
-
-    global.screens = originalScreens;
-  });
-});

package/squirrel/utils/tailwind.ts

@@ -1,28 +0,0 @@
-import { squirrelTailwindConfig } from '@squirrel/tailwind/config';
-import { get } from 'lodash-es';
-import type { Config } from 'tailwindcss';
-import resolveConfig from 'tailwindcss/resolveConfig';
-
-const config = resolveConfig(squirrelTailwindConfig);
-const theme = config.theme as Config['theme'];
-const colors = theme?.colors;
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const extendedColors = theme?.extend?.colors;
-const screens = theme?.screens;
-
-export type Color = keyof typeof colors | keyof typeof extendedColors;
-
-export const getColor = (name: Color) => {
-  return colors?.[name];
-};
-
-export const getColorDeep = (color: string) => {
-  const baseColor = color.split('-').slice(0, -1).join('-') as Color;
-  const colorNumber = String(color.split('-').pop());
-
-  return get(getColor(baseColor), colorNumber);
-};
-
-export const getScreen = (size: keyof typeof screens) => {
-  return screens?.[size];
-};