sprintify-ui 0.1.15 → 0.1.17

package/src/utils/colors.ts

@@ -1,200 +1,200 @@
-import { darken, getContrast } from 'color2k';
-import defaultColors from 'tailwindcss/colors';
-
-const colors = defaultColors;
-
-export { colors };
-
-interface ColorConfig {
-  backgroundColor: string;
-  textColor: string;
-  borderColor: string;
-}
-
-interface ColorPalette {
-  low: ColorConfig;
-  high: ColorConfig;
-}
-
-export const palette: Record<string, ColorPalette> = {
-  black: {
-    low: {
-      backgroundColor: colors.slate[200],
-      textColor: colors.slate[900],
-      borderColor: 'transparent',
-    },
-    high: {
-      backgroundColor: colors.black,
-      textColor: colors.white,
-      borderColor: 'transparent',
-    },
-  },
-  gray: {
-    low: {
-      backgroundColor: colors.slate[100],
-      textColor: colors.slate[800],
-      borderColor: colors.slate[300],
-    },
-    high: {
-      backgroundColor: colors.slate[600],
-      textColor: colors.white,
-      borderColor: 'transparent',
-    },
-  },
-  red: {
-    low: {
-      backgroundColor: colors.red[100],
-      textColor: colors.red[700],
-      borderColor: colors.red[300],
-    },
-    high: {
-      backgroundColor: colors.red[600],
-      textColor: colors.white,
-      borderColor: 'transparent',
-    },
-  },
-  orange: {
-    low: {
-      backgroundColor: colors.orange[100],
-      textColor: colors.orange[700],
-      borderColor: colors.orange[300],
-    },
-    high: {
-      backgroundColor: colors.orange[500],
-      textColor: colors.white,
-      borderColor: 'transparent',
-    },
-  },
-  yellow: {
-    low: {
-      backgroundColor: colors.yellow[100],
-      textColor: colors.yellow[700],
-      borderColor: colors.yellow[300],
-    },
-    high: {
-      backgroundColor: colors.yellow[500],
-      textColor: colors.white,
-      borderColor: 'transparent',
-    },
-  },
-  green: {
-    low: {
-      backgroundColor: colors.green[100],
-      textColor: colors.green[700],
-      borderColor: colors.green[300],
-    },
-    high: {
-      backgroundColor: colors.green[600],
-      textColor: colors.white,
-      borderColor: 'transparent',
-    },
-  },
-  teal: {
-    low: {
-      backgroundColor: colors.teal[100],
-      textColor: colors.teal[700],
-      borderColor: colors.teal[300],
-    },
-    high: {
-      backgroundColor: colors.teal[600],
-      textColor: colors.white,
-      borderColor: 'transparent',
-    },
-  },
-  cyan: {
-    low: {
-      backgroundColor: colors.cyan[100],
-      textColor: colors.cyan[700],
-      borderColor: colors.cyan[300],
-    },
-    high: {
-      backgroundColor: colors.cyan[600],
-      textColor: colors.white,
-      borderColor: 'transparent',
-    },
-  },
-  blue: {
-    low: {
-      backgroundColor: colors.blue[100],
-      textColor: colors.blue[700],
-      borderColor: colors.blue[300],
-    },
-    high: {
-      backgroundColor: colors.blue[600],
-      textColor: colors.white,
-      borderColor: 'transparent',
-    },
-  },
-  indigo: {
-    low: {
-      backgroundColor: colors.indigo[100],
-      textColor: colors.indigo[700],
-      borderColor: colors.indigo[300],
-    },
-    high: {
-      backgroundColor: colors.indigo[600],
-      textColor: colors.white,
-      borderColor: 'transparent',
-    },
-  },
-  purple: {
-    low: {
-      backgroundColor: colors.purple[100],
-      textColor: colors.purple[700],
-      borderColor: colors.purple[300],
-    },
-    high: {
-      backgroundColor: colors.purple[600],
-      textColor: colors.white,
-      borderColor: 'transparent',
-    },
-  },
-  pink: {
-    low: {
-      backgroundColor: colors.pink[100],
-      textColor: colors.pink[700],
-      borderColor: colors.pink[300],
-    },
-    high: {
-      backgroundColor: colors.pink[600],
-      textColor: colors.white,
-      borderColor: 'transparent',
-    },
-  },
-  white: {
-    low: {
-      backgroundColor: colors.white,
-      textColor: colors.slate[600],
-      borderColor: 'transparent',
-    },
-    high: {
-      backgroundColor: colors.white,
-      textColor: colors.black,
-      borderColor: 'transparent',
-    },
-  },
-};
-
-export function getColorConfig(color: string, contrast = false): ColorConfig {
-  const colorConfig = palette[color]?.[contrast ? 'high' : 'low'];
-
-  if (colorConfig) {
-    return colorConfig;
-  }
-
-  const c = getContrast(color, 'white');
-
-  let borderColor = 'transparent';
-  let textColor = 'white';
-
-  if (c < 2) {
-    textColor = darken(color, 0.5);
-    borderColor = darken(color, 0.1);
-  }
-
-  return {
-    backgroundColor: color,
-    textColor: textColor,
-    borderColor: borderColor,
-  };
-}
+import { darken, getContrast } from 'color2k';
+import defaultColors from 'tailwindcss/colors';
+
+const colors = defaultColors;
+
+export { colors };
+
+interface ColorConfig {
+  backgroundColor: string;
+  textColor: string;
+  borderColor: string;
+}
+
+interface ColorPalette {
+  low: ColorConfig;
+  high: ColorConfig;
+}
+
+export const palette: Record<string, ColorPalette> = {
+  black: {
+    low: {
+      backgroundColor: colors.slate[200],
+      textColor: colors.slate[900],
+      borderColor: 'transparent',
+    },
+    high: {
+      backgroundColor: colors.black,
+      textColor: colors.white,
+      borderColor: 'transparent',
+    },
+  },
+  gray: {
+    low: {
+      backgroundColor: colors.slate[100],
+      textColor: colors.slate[800],
+      borderColor: colors.slate[300],
+    },
+    high: {
+      backgroundColor: colors.slate[600],
+      textColor: colors.white,
+      borderColor: 'transparent',
+    },
+  },
+  red: {
+    low: {
+      backgroundColor: colors.red[100],
+      textColor: colors.red[700],
+      borderColor: colors.red[300],
+    },
+    high: {
+      backgroundColor: colors.red[600],
+      textColor: colors.white,
+      borderColor: 'transparent',
+    },
+  },
+  orange: {
+    low: {
+      backgroundColor: colors.orange[100],
+      textColor: colors.orange[700],
+      borderColor: colors.orange[300],
+    },
+    high: {
+      backgroundColor: colors.orange[500],
+      textColor: colors.white,
+      borderColor: 'transparent',
+    },
+  },
+  yellow: {
+    low: {
+      backgroundColor: colors.yellow[100],
+      textColor: colors.yellow[700],
+      borderColor: colors.yellow[300],
+    },
+    high: {
+      backgroundColor: colors.yellow[500],
+      textColor: colors.white,
+      borderColor: 'transparent',
+    },
+  },
+  green: {
+    low: {
+      backgroundColor: colors.green[100],
+      textColor: colors.green[700],
+      borderColor: colors.green[300],
+    },
+    high: {
+      backgroundColor: colors.green[600],
+      textColor: colors.white,
+      borderColor: 'transparent',
+    },
+  },
+  teal: {
+    low: {
+      backgroundColor: colors.teal[100],
+      textColor: colors.teal[700],
+      borderColor: colors.teal[300],
+    },
+    high: {
+      backgroundColor: colors.teal[600],
+      textColor: colors.white,
+      borderColor: 'transparent',
+    },
+  },
+  cyan: {
+    low: {
+      backgroundColor: colors.cyan[100],
+      textColor: colors.cyan[700],
+      borderColor: colors.cyan[300],
+    },
+    high: {
+      backgroundColor: colors.cyan[600],
+      textColor: colors.white,
+      borderColor: 'transparent',
+    },
+  },
+  blue: {
+    low: {
+      backgroundColor: colors.blue[100],
+      textColor: colors.blue[700],
+      borderColor: colors.blue[300],
+    },
+    high: {
+      backgroundColor: colors.blue[600],
+      textColor: colors.white,
+      borderColor: 'transparent',
+    },
+  },
+  indigo: {
+    low: {
+      backgroundColor: colors.indigo[100],
+      textColor: colors.indigo[700],
+      borderColor: colors.indigo[300],
+    },
+    high: {
+      backgroundColor: colors.indigo[600],
+      textColor: colors.white,
+      borderColor: 'transparent',
+    },
+  },
+  purple: {
+    low: {
+      backgroundColor: colors.purple[100],
+      textColor: colors.purple[700],
+      borderColor: colors.purple[300],
+    },
+    high: {
+      backgroundColor: colors.purple[600],
+      textColor: colors.white,
+      borderColor: 'transparent',
+    },
+  },
+  pink: {
+    low: {
+      backgroundColor: colors.pink[100],
+      textColor: colors.pink[700],
+      borderColor: colors.pink[300],
+    },
+    high: {
+      backgroundColor: colors.pink[600],
+      textColor: colors.white,
+      borderColor: 'transparent',
+    },
+  },
+  white: {
+    low: {
+      backgroundColor: colors.white,
+      textColor: colors.slate[600],
+      borderColor: 'transparent',
+    },
+    high: {
+      backgroundColor: colors.white,
+      textColor: colors.black,
+      borderColor: 'transparent',
+    },
+  },
+};
+
+export function getColorConfig(color: string, contrast = false): ColorConfig {
+  const colorConfig = palette[color]?.[contrast ? 'high' : 'low'];
+
+  if (colorConfig) {
+    return colorConfig;
+  }
+
+  const c = getContrast(color, 'white');
+
+  let borderColor = 'transparent';
+  let textColor = 'white';
+
+  if (c < 2) {
+    textColor = darken(color, 0.5);
+    borderColor = darken(color, 0.1);
+  }
+
+  return {
+    backgroundColor: color,
+    textColor: textColor,
+    borderColor: borderColor,
+  };
+}

package/src/utils/cropper/avatar.ts

@@ -1,33 +1,33 @@
-import { CropperConfig } from '@/types';
-import { isNumber, merge } from 'lodash';
-import { PresetInterface } from './presetInterface';
-
-export class AvatarPreset extends PresetInterface {
-  public handle(): CropperConfig {
-    const size = this.presetOptions?.size;
-
-    let defaultSize = isNumber(size) ? size : 200;
-
-    if (this.config?.maxWidth) {
-      defaultSize = Math.min(this.config.maxWidth, defaultSize);
-    }
-
-    return merge(this.config, {
-      width: defaultSize,
-      height: defaultSize,
-      enableOrientation: true,
-      enableResize: false,
-      enableZoom: true,
-      showZoomer: true,
-      viewport: {
-        width: defaultSize,
-        height: defaultSize,
-        type: 'circle',
-      },
-      boundary: {
-        width: defaultSize,
-        height: defaultSize,
-      },
-    });
-  }
-}
+import { CropperConfig } from '@/types';
+import { isNumber, merge } from 'lodash';
+import { PresetInterface } from './presetInterface';
+
+export class AvatarPreset extends PresetInterface {
+  public handle(): CropperConfig {
+    const size = this.presetOptions?.size;
+
+    let defaultSize = isNumber(size) ? size : 200;
+
+    if (this.config?.maxWidth) {
+      defaultSize = Math.min(this.config.maxWidth, defaultSize);
+    }
+
+    return merge(this.config, {
+      width: defaultSize,
+      height: defaultSize,
+      enableOrientation: true,
+      enableResize: false,
+      enableZoom: true,
+      showZoomer: true,
+      viewport: {
+        width: defaultSize,
+        height: defaultSize,
+        type: 'circle',
+      },
+      boundary: {
+        width: defaultSize,
+        height: defaultSize,
+      },
+    });
+  }
+}

package/src/utils/cropper/cover.ts

@@ -1,41 +1,41 @@
-import { CropperConfig } from '@/types';
-import { isNumber, merge } from 'lodash';
-import { PresetInterface } from './presetInterface';
-
-export class CoverPreset extends PresetInterface {
-  public handle(): CropperConfig {
-    const size = this.presetOptions?.size;
-    const ratio = this.presetOptions?.ratio;
-
-    const defaultRatio = isNumber(ratio) ? ratio : 16 / 9;
-    let width = isNumber(size) ? size : 300;
-    let height = width / defaultRatio;
-    const padding = height * 0.05;
-
-    if (this.config?.maxWidth) {
-      const safeWidth = Math.min(this.config.maxWidth, width);
-      if (safeWidth !== width) {
-        height = safeWidth / defaultRatio;
-        width = safeWidth;
-      }
-    }
-
-    return merge(this.config, {
-      width: width,
-      height: height,
-      enableOrientation: true,
-      enableResize: false,
-      enableZoom: true,
-      showZoomer: true,
-      viewport: {
-        width: width - padding,
-        height: height - padding,
-        type: 'square',
-      },
-      boundary: {
-        width: width,
-        height: height,
-      },
-    });
-  }
-}
+import { CropperConfig } from '@/types';
+import { isNumber, merge } from 'lodash';
+import { PresetInterface } from './presetInterface';
+
+export class CoverPreset extends PresetInterface {
+  public handle(): CropperConfig {
+    const size = this.presetOptions?.size;
+    const ratio = this.presetOptions?.ratio;
+
+    const defaultRatio = isNumber(ratio) ? ratio : 16 / 9;
+    let width = isNumber(size) ? size : 300;
+    let height = width / defaultRatio;
+    const padding = height * 0.05;
+
+    if (this.config?.maxWidth) {
+      const safeWidth = Math.min(this.config.maxWidth, width);
+      if (safeWidth !== width) {
+        height = safeWidth / defaultRatio;
+        width = safeWidth;
+      }
+    }
+
+    return merge(this.config, {
+      width: width,
+      height: height,
+      enableOrientation: true,
+      enableResize: false,
+      enableZoom: true,
+      showZoomer: true,
+      viewport: {
+        width: width - padding,
+        height: height - padding,
+        type: 'square',
+      },
+      boundary: {
+        width: width,
+        height: height,
+      },
+    });
+  }
+}

package/src/utils/cropper/presetInterface.ts

@@ -1,16 +1,16 @@
-import { CropperConfig } from '@/types';
-
-export abstract class PresetInterface {
-  protected config: CropperConfig | null = null;
-  protected presetOptions: Record<string, any> | null = null;
-
-  constructor(
-    config: CropperConfig | null = null,
-    presetOptions: Record<string, any> | null = null
-  ) {
-    this.config = config;
-    this.presetOptions = presetOptions;
-  }
-
-  public abstract handle(): CropperConfig;
-}
+import { CropperConfig } from '@/types';
+
+export abstract class PresetInterface {
+  protected config: CropperConfig | null = null;
+  protected presetOptions: Record<string, any> | null = null;
+
+  constructor(
+    config: CropperConfig | null = null,
+    presetOptions: Record<string, any> | null = null
+  ) {
+    this.config = config;
+    this.presetOptions = presetOptions;
+  }
+
+  public abstract handle(): CropperConfig;
+}

package/src/utils/cropper/presets.ts

@@ -1,7 +1,7 @@
-import { AvatarPreset } from './avatar';
-import { CoverPreset } from './cover';
-
-export const presets = {
-  avatar: AvatarPreset,
-  cover: CoverPreset,
-};
+import { AvatarPreset } from './avatar';
+import { CoverPreset } from './cover';
+
+export const presets = {
+  avatar: AvatarPreset,
+  cover: CoverPreset,
+};

package/src/utils/fileSizeFormat.ts

@@ -1,15 +1,15 @@
-import { config } from '@/index';
-
-export default function (size: number): string {
-  const i = Math.floor(Math.log(size) / Math.log(1024));
-
-  const units = [
-    config.i18n.global.t('sui.units.b'),
-    config.i18n.global.t('sui.units.kb'),
-    config.i18n.global.t('sui.units.mb'),
-    config.i18n.global.t('sui.units.gb'),
-    config.i18n.global.t('sui.units.tb'),
-  ];
-
-  return +(size / Math.pow(1024, i)).toFixed(2) * 1 + ' ' + units[i];
-}
+import { t } from '@/i18n';
+
+export default function (size: number): string {
+  const i = Math.floor(Math.log(size) / Math.log(1024));
+
+  const units = [
+    t('sui.units.b'),
+    t('sui.units.kb'),
+    t('sui.units.mb'),
+    t('sui.units.gb'),
+    t('sui.units.tb'),
+  ];
+
+  return +(size / Math.pow(1024, i)).toFixed(2) * 1 + ' ' + units[i];
+}

package/src/utils/fileValidations.ts

@@ -1,26 +1,26 @@
-export function maxSize(blob: Blob, maxSize: number): boolean {
-  if (blob.size > maxSize) {
-    return false;
-  }
-
-  return true;
-}
-
-export function validExtension(
-  blob: Blob | File,
-  extensions?: string[] | undefined
-): boolean {
-  let extension = blob.type.split('/').pop();
-
-  if (blob instanceof File) {
-    extension = blob.name.split('.').pop();
-  }
-
-  if (extension && extensions && extensions.length) {
-    if (!extensions.includes(extension)) {
-      return false;
-    }
-  }
-
-  return true;
-}
+export function maxSize(blob: Blob, maxSize: number): boolean {
+  if (blob.size > maxSize) {
+    return false;
+  }
+
+  return true;
+}
+
+export function validExtension(
+  blob: Blob | File,
+  extensions?: string[] | undefined
+): boolean {
+  let extension = blob.type.split('/').pop();
+
+  if (blob instanceof File) {
+    extension = blob.name.split('.').pop();
+  }
+
+  if (extension && extensions && extensions.length) {
+    if (!extensions.includes(extension)) {
+      return false;
+    }
+  }
+
+  return true;
+}