spoko-design-system 0.5.0 → 0.5.2

package/src/utils/product/useFormatProductNumber.ts

@@ -1,42 +1,42 @@
-const LIQUIDS_PATTERN = /^(\w{1})(\w{3})(\w{3})(.*)$/;
-const WHEELS_EMBLEMS_PATTERN = /^(\w{3})(\w{3})(\w{3})(.*)(\w{3})$/;
-const ACCESSORIES_MATS_PATTERN = /^(\w{3})(\w{3})(\w{3})(\w{1})(.*)$/;
-const OTHER_PARTS_PATTERN = /(\w{3})/g;
-
-const isLetter = (char: string): boolean => char.toLowerCase() !== char.toUpperCase();
-
-interface FormattedNumbers {
-  standard: string;
-  dot: string;
-  dash: string;
-}
-
-export default function useFormatProductNumber(productNumber: string | null): { formattedNumbers: FormattedNumbers | null } {
-  if (!productNumber) return { formattedNumbers: null };
-
-  const formatProductNumber = (number: string, separator: string): string => {
-    let formatted = number;
-
-    if (isLetter(number[0]) && !isLetter(number[1]) && number.length === 9) {
-      formatted = formatted.replace(LIQUIDS_PATTERN, `$1${separator}$2${separator}$3${separator}$4`);
-    } else if (number.length >= 13) {
-      formatted = formatted.replace(WHEELS_EMBLEMS_PATTERN, `$1${separator}$2${separator}$3${separator}$4${separator}$5`);
-    } else if (number.length > 12) {
-      formatted = formatted.replace(ACCESSORIES_MATS_PATTERN, `$1${separator}$2${separator}$3${separator}$4${separator}$5`);
-    } else {
-      formatted = formatted.replace(OTHER_PARTS_PATTERN, `$1${separator}`);
-    }
-
-    return formatted
-      .replace(' ', separator)
-      .replace(/[^a-zA-Z0-9]$/, ''); // Remove the end trailing separator
-  };
-
-  const formattedNumbers: FormattedNumbers = {
-    standard: formatProductNumber(productNumber, '\u00A0'),
-    dot: formatProductNumber(productNumber, '.'),
-    dash: formatProductNumber(productNumber, '-')
-  };
-
-  return { formattedNumbers };
+const LIQUIDS_PATTERN = /^(\w{1})(\w{3})(\w{3})(.*)$/;
+const WHEELS_EMBLEMS_PATTERN = /^(\w{3})(\w{3})(\w{3})(.*)(\w{3})$/;
+const ACCESSORIES_MATS_PATTERN = /^(\w{3})(\w{3})(\w{3})(\w{1})(.*)$/;
+const OTHER_PARTS_PATTERN = /(\w{3})/g;
+
+const isLetter = (char: string): boolean => char.toLowerCase() !== char.toUpperCase();
+
+interface FormattedNumbers {
+  standard: string;
+  dot: string;
+  dash: string;
+}
+
+export default function useFormatProductNumber(productNumber: string | null): { formattedNumbers: FormattedNumbers | null } {
+  if (!productNumber) return { formattedNumbers: null };
+
+  const formatProductNumber = (number: string, separator: string): string => {
+    let formatted = number;
+
+    if (isLetter(number[0]) && !isLetter(number[1]) && number.length === 9) {
+      formatted = formatted.replace(LIQUIDS_PATTERN, `$1${separator}$2${separator}$3${separator}$4`);
+    } else if (number.length >= 13) {
+      formatted = formatted.replace(WHEELS_EMBLEMS_PATTERN, `$1${separator}$2${separator}$3${separator}$4${separator}$5`);
+    } else if (number.length > 12) {
+      formatted = formatted.replace(ACCESSORIES_MATS_PATTERN, `$1${separator}$2${separator}$3${separator}$4${separator}$5`);
+    } else {
+      formatted = formatted.replace(OTHER_PARTS_PATTERN, `$1${separator}`);
+    }
+
+    return formatted
+      .replace(' ', separator)
+      .replace(/[^a-zA-Z0-9]$/, ''); // Remove the end trailing separator
+  };
+
+  const formattedNumbers: FormattedNumbers = {
+    standard: formatProductNumber(productNumber, '\u00A0'),
+    dot: formatProductNumber(productNumber, '.'),
+    dash: formatProductNumber(productNumber, '-')
+  };
+
+  return { formattedNumbers };
 }

package/src/utils/seo/getShorterDescription.ts

@@ -1,14 +1,14 @@
-const MAX_DESCRIPTION_LENGTH = 150;
-
-export const getShorterDescription = (description: string | null, limit = MAX_DESCRIPTION_LENGTH) => {
-  function cutString(s: string, n: number) {
-    const text = s.replace(/(\n)/g, " ");
-    const cut = text.indexOf('. ', n);
-    return cut === -1 ? text : `${text.substring(0, cut)}.`;
-  }
-
-  return description ? cutString(description, limit) || '' : '';
-  
-}
-
-export default getShorterDescription;
+const MAX_DESCRIPTION_LENGTH = 150;
+
+export const getShorterDescription = (description: string | null, limit = MAX_DESCRIPTION_LENGTH) => {
+  function cutString(s: string, n: number) {
+    const text = s.replace(/(\n)/g, " ");
+    const cut = text.indexOf('. ', n);
+    return cut === -1 ? text : `${text.substring(0, cut)}.`;
+  }
+
+  return description ? cutString(description, limit) || '' : '';
+  
+}
+
+export default getShorterDescription;

package/src/utils/text/formatDate.ts

@@ -1,6 +1,6 @@
-/* Format date  */
-
-
-export default function formatDate(date: Date ) {
-  return new Date(date);
+/* Format date  */
+
+
+export default function formatDate(date: Date ) {
+  return new Date(date);
 }

package/src/utils/text/formatLocaleNumber.ts

@@ -1,7 +1,7 @@
-/* Format numbers like details data: liters, measuring etc. */
-
-import i18next from "i18next";
-
-export default function formatLocaleNumber(number: number ) {
-  return  i18next.language === 'en' ? String(number).replace(/,/g, '.') : String(number);
+/* Format numbers like details data: liters, measuring etc. */
+
+import i18next from "i18next";
+
+export default function formatLocaleNumber(number: number ) {
+  return  i18next.language === 'en' ? String(number).replace(/,/g, '.') : String(number);
 }

package/src/utils/text/formatPad.ts

@@ -1,13 +1,13 @@
-export const formatPad = (num: number, size: number) => {
-  return String(num).padStart(size, '0');
-}
-
-export default formatPad;
-// export const formatPad = (num: number, size: number) => {
-//   let productId = String(num)
-
-//   if (size < 10)
-//     while (productId.length < size) productId = `0${productId}`
-
-//   return productId
+export const formatPad = (num: number, size: number) => {
+  return String(num).padStart(size, '0');
+}
+
+export default formatPad;
+// export const formatPad = (num: number, size: number) => {
+//   let productId = String(num)
+
+//   if (size < 10)
+//     while (productId.length < size) productId = `0${productId}`
+
+//   return productId
 // }

package/src/utils/text/getNumberFormatted.ts

@@ -1,34 +1,34 @@
-export const getNumberFormatted = (num, digits) => {
-  const lookup = [
-    { value: 1e18, symbol: "E" },
-    { value: 1e15, symbol: "P" },
-    { value: 1e12, symbol: "T" },
-    { value: 1e9, symbol: "G" },
-    { value: 1e6, symbol: "M" },
-    { value: 1e3, symbol: "k" },
-    { value: 1, symbol: "" }
-  ];
-  const item = lookup.find(item => num >= item.value) || lookup[lookup.length - 1];
-  return (num / item.value).toFixed(digits).replace(/\.0+$|(\.[0-9]*[1-9])0+$/, "$1") + item.symbol;
-}
-
-export default getNumberFormatted;
-/*
- * Tests
- */
-// const tests = [
-//   { num: 0, digits: 1 },
-//   { num: 12, digits: 1 },
-//   { num: 1234, digits: 1 },
-//   { num: 100000000, digits: 1 },
-//   { num: 299792458, digits: 1 },
-//   { num: 759878, digits: 1 },
-//   { num: 759878, digits: 0 },
-//   { num: 123, digits: 1 },
-//   { num: 123.456, digits: 1 },
-//   { num: 123.456, digits: 2 },
-//   { num: 123.456, digits: 4 }
-// ];
-// tests.forEach(test => {
-//   console.log("getNumberFormatted(%f, %i) = %s", test.num, test.digits, getNumberFormatted(test.num, test.digits));
+export const getNumberFormatted = (num, digits) => {
+  const lookup = [
+    { value: 1e18, symbol: "E" },
+    { value: 1e15, symbol: "P" },
+    { value: 1e12, symbol: "T" },
+    { value: 1e9, symbol: "G" },
+    { value: 1e6, symbol: "M" },
+    { value: 1e3, symbol: "k" },
+    { value: 1, symbol: "" }
+  ];
+  const item = lookup.find(item => num >= item.value) || lookup[lookup.length - 1];
+  return (num / item.value).toFixed(digits).replace(/\.0+$|(\.[0-9]*[1-9])0+$/, "$1") + item.symbol;
+}
+
+export default getNumberFormatted;
+/*
+ * Tests
+ */
+// const tests = [
+//   { num: 0, digits: 1 },
+//   { num: 12, digits: 1 },
+//   { num: 1234, digits: 1 },
+//   { num: 100000000, digits: 1 },
+//   { num: 299792458, digits: 1 },
+//   { num: 759878, digits: 1 },
+//   { num: 759878, digits: 0 },
+//   { num: 123, digits: 1 },
+//   { num: 123.456, digits: 1 },
+//   { num: 123.456, digits: 2 },
+//   { num: 123.456, digits: 4 }
+// ];
+// tests.forEach(test => {
+//   console.log("getNumberFormatted(%f, %i) = %s", test.num, test.digits, getNumberFormatted(test.num, test.digits));
 // });

package/src/utils/text/getTranslatedLink.ts

@@ -1,5 +1,5 @@
-export const getTranslatedLink = ( link:string, locale='en' ) => {
-  return locale === 'en' ? link : `/${locale}${link}`
-}
-
-export default getTranslatedLink;
+export const getTranslatedLink = ( link:string, locale='en' ) => {
+  return locale === 'en' ? link : `/${locale}${link}`
+}
+
+export default getTranslatedLink;

package/src/utils/text.ts

@@ -1,19 +1,19 @@
-export const text2paragraphs = (text: string, firstLineBottomMargin: boolean = false) => {
-  // return '<p class="mb-2">' + text.split(/[\n\r]+/g).join('</p><p>') + '</p>'
-  let out = '<p' + (firstLineBottomMargin ? 'class="mb-3"' : '') + '>' + text.split("\n").join('</p><p>') + '<\/p>';
-  return out.split('<p><\/p><p>').join('<p class="mt-3">');
-}
-
-
-export const countWords = (str: string) => {
-  return str.trim().split(/\s+/).length;
-}
-
-export const firstSentence = (str: string) => {
-  return str.split('\.');
-}
-
-export const removeSemicolon = (name: string) => {
-  return name.replace(';', '')
-}
-
+export const text2paragraphs = (text: string, firstLineBottomMargin: boolean = false) => {
+  // return '<p class="mb-2">' + text.split(/[\n\r]+/g).join('</p><p>') + '</p>'
+  let out = '<p' + (firstLineBottomMargin ? 'class="mb-3"' : '') + '>' + text.split("\n").join('</p><p>') + '<\/p>';
+  return out.split('<p><\/p><p>').join('<p class="mt-3">');
+}
+
+
+export const countWords = (str: string) => {
+  return str.trim().split(/\s+/).length;
+}
+
+export const firstSentence = (str: string) => {
+  return str.split('\.');
+}
+
+export const removeSemicolon = (name: string) => {
+  return name.replace(';', '')
+}
+

package/tailwind.config.cjs

@@ -1,8 +1,8 @@
-module.exports = {
-  // darkMode: "class",
-  content: ["./src/**/*.{astro,html,js,jsx,svelte,ts,tsx,vue}"],
-  theme: {
-    extend: {},
-  },
-  plugins: [],
-};
+module.exports = {
+  // darkMode: "class",
+  content: ["./src/**/*.{astro,html,js,jsx,svelte,ts,tsx,vue}"],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};

package/tsconfig.json

@@ -1,29 +1,29 @@
-{
-  "include": ["env.d.ts", "src/**/*", "src/**/*.vue", "src/**/*.astro", "src/**/*.d.ts", "*.ts"],
-  "compilerOptions": {
-    "baseUrl": "src",
-
-    // Enable JSON imports.
-    "resolveJsonModule": true,
-    
-    // Enable stricter transpilation for better output.
-    "isolatedModules": true,
-    
-    // Astro will directly run your TypeScript code, no transpilation needed.
-    "noEmit": true,
-
-    "target": "esnext",
-    "useDefineForClassFields": true,
-    "module": "esnext",
-    "moduleResolution": "node",
-    "jsx": "preserve",
-    "allowJs": true,
-    "types": ["vite/client", "vitest", "@vue/runtime-dom", "@astrojs/ts", "@astrojs/ts-plugin", "unplugin-vue-macros/macros-global", "unplugin-icons/types/astro"],
-    "paths": {
-      "@components/*": ["components/*"],
-      "@utils/*": ["utils/*"],
-      "@types/*": ["types/*"]
-    }
-  },
-  "exclude": ["dist", "node_modules"]
+{
+  "include": ["env.d.ts", "src/**/*", "src/**/*.vue", "src/**/*.astro", "src/**/*.d.ts", "*.ts"],
+  "compilerOptions": {
+    "baseUrl": "src",
+
+    // Enable JSON imports.
+    "resolveJsonModule": true,
+    
+    // Enable stricter transpilation for better output.
+    "isolatedModules": true,
+    
+    // Astro will directly run your TypeScript code, no transpilation needed.
+    "noEmit": true,
+
+    "target": "esnext",
+    "useDefineForClassFields": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "jsx": "preserve",
+    "allowJs": true,
+    "types": ["vite/client", "vitest", "@vue/runtime-dom", "@astrojs/ts", "@astrojs/ts-plugin", "unplugin-vue-macros/macros-global", "unplugin-icons/types/astro"],
+    "paths": {
+      "@components/*": ["components/*"],
+      "@utils/*": ["utils/*"],
+      "@types/*": ["types/*"]
+    }
+  },
+  "exclude": ["dist", "node_modules"]
 }

package/uno-config/index.ts

@@ -1,62 +1,62 @@
-// uno-config/index.ts
-import type { UserConfig, UserShortcuts } from 'unocss'
-import { defineConfig } from 'unocss';
-import {
-  transformerDirectives,
-  transformerVariantGroup,
-  presetAttributify,
-  presetIcons,
-  presetTypography,
-  presetUno,
-  presetWebFonts,
-} from 'unocss';
-
-import { shortcuts } from './theme/shortcuts';
-import { theme } from './theme';
-
-interface CustomConfig extends Partial<UserConfig> {
-  shortcuts?: UserShortcuts;
-  theme?: Partial<typeof theme>;
-}
-
-export function createSdsConfig(customConfig: CustomConfig = {}) {
-  return defineConfig({
-    transformers: [
-      transformerDirectives(),
-      transformerVariantGroup(),
-    ],
-    shortcuts: {
-      ...shortcuts,
-      ...(customConfig.shortcuts || {})
-    },
-    theme: {
-      ...theme,
-      ...(customConfig.theme || {})
-    },
-    safelist: [
-      'md:grid-cols-product'
-    ],
-    presets: [
-      presetUno(),
-      presetAttributify(),
-      presetIcons({
-        scale: 1.2,
-        warn: true,
-        prefix: 'i-',
-        extraProperties: {
-          'display': 'inline-block',
-          'vertical-align': 'middle',
-        },
-      }),
-      presetTypography(),
-      presetWebFonts({
-        provider: 'none',
-        fonts: theme.fontFamily
-      })
-    ],
-    ...customConfig
-  });
-}
-
-export * from './theme';
+// uno-config/index.ts
+import type { UserConfig, UserShortcuts } from 'unocss'
+import { defineConfig } from 'unocss';
+import {
+  transformerDirectives,
+  transformerVariantGroup,
+  presetAttributify,
+  presetIcons,
+  presetTypography,
+  presetUno,
+  presetWebFonts,
+} from 'unocss';
+
+import { shortcuts } from './theme/shortcuts';
+import { theme } from './theme';
+
+interface CustomConfig extends Partial<UserConfig> {
+  shortcuts?: UserShortcuts;
+  theme?: Partial<typeof theme>;
+}
+
+export function createSdsConfig(customConfig: CustomConfig = {}) {
+  return defineConfig({
+    transformers: [
+      transformerDirectives(),
+      transformerVariantGroup(),
+    ],
+    shortcuts: {
+      ...shortcuts,
+      ...(customConfig.shortcuts || {})
+    },
+    theme: {
+      ...theme,
+      ...(customConfig.theme || {})
+    },
+    safelist: [
+      'md:grid-cols-product'
+    ],
+    presets: [
+      presetUno(),
+      presetAttributify(),
+      presetIcons({
+        scale: 1.2,
+        warn: true,
+        prefix: 'i-',
+        extraProperties: {
+          'display': 'inline-block',
+          'vertical-align': 'middle',
+        },
+      }),
+      presetTypography(),
+      presetWebFonts({
+        provider: 'none',
+        fonts: theme.fontFamily
+      })
+    ],
+    ...customConfig
+  });
+}
+
+export * from './theme';
 export * from './theme/shortcuts';

package/uno-config/theme/breakpoints.ts

@@ -1,10 +1,10 @@
-// theme/breakpoints.ts
-export const breakpoints = {
-    sm: '640px',
-    md: '768px',
-    lg: '1024px',
-    xl: '1280px',
-    '2xl': '1536px',
-    '3xl': '1920px',
-    '4xl': '2400px',
+// theme/breakpoints.ts
+export const breakpoints = {
+    sm: '640px',
+    md: '768px',
+    lg: '1024px',
+    xl: '1280px',
+    '2xl': '1536px',
+    '3xl': '1920px',
+    '4xl': '2400px',
   };

package/uno-config/theme/colors.ts

@@ -1,65 +1,65 @@
-// theme/colors.ts
-export const colors = {
-    // Brand colors - core identity colors
-    brand: {
-        primary: '#0040c5',    // Main brand color
-        secondary: '#00b0f0',  // Supporting brand color
-    },
-
-    // Primary blues - main blue palette
-    blue: {
-        ultralight: '#dbeafe',
-        lightest: '#3b82f6',   // Lightest shade
-        light: '#0069ff',
-        default: '#005ad7',    // Default/base blue
-        medium: '#02307d',
-        darker: '#001e50',
-        darkest: '#000f28',    // Darkest shade
-        wrc: '#0000c8',        // Special WRC color
-    },
-
-    // Secondary colors - accent palette
-    accent: {
-        light: '#0099da',
-        default: '#0087c1',    // Default accent
-        dark: '#006ea6',
-        darker: '#00437a',
-        deepBlue: '#0c1a32',
-    },
-
-    // Neutral colors - grayscale
-    neutral: {
-        lightest: '#f3f4f6',   // Lightest gray 
-        lighter: '#e5e7eb',
-        light: '#b5bbc5',
-        default: '#9ca3af',    // Base gray
-        dark: '#6a767d',       
-        darker: '#4b5563',
-    },
-      
-    // Slate colors - gray-blue palette
-    slate: {
-        light: '#64748B',
-        default: '#475569',
-        dark: '#334155',    
-        darkest: '#1e293b',
-    },
-
-    // System colors - functional colors
-    system: {
-        success: '#10B981',    // Green - success state
-        warning: '#FBBF24',    // Yellow - warning state
-        error: '#EF4444',      // Red - error state 
-        info: '#3B82F6',       // Blue - information state
-    },
-
-    // States - interaction states
-    state: {
-        overlay: 'rgb(0 0 0 / 0.06)',    // Overlay & Hover state
-        disabled: 'rgb(0 0 0 / 0.12)',  // Disabled state
-    }
-};
-
-// Export types for TypeScript
-export type Colors = typeof colors;
+// theme/colors.ts
+export const colors = {
+    // Brand colors - core identity colors
+    brand: {
+        primary: '#0040c5',    // Main brand color
+        secondary: '#00b0f0',  // Supporting brand color
+    },
+
+    // Primary blues - main blue palette
+    blue: {
+        ultralight: '#dbeafe',
+        lightest: '#3b82f6',   // Lightest shade
+        light: '#0069ff',
+        default: '#005ad7',    // Default/base blue
+        medium: '#02307d',
+        darker: '#001e50',
+        darkest: '#000f28',    // Darkest shade
+        wrc: '#0000c8',        // Special WRC color
+    },
+
+    // Secondary colors - accent palette
+    accent: {
+        light: '#0099da',
+        default: '#0087c1',    // Default accent
+        dark: '#006ea6',
+        darker: '#00437a',
+        deepBlue: '#0c1a32',
+    },
+
+    // Neutral colors - grayscale
+    neutral: {
+        lightest: '#f3f4f6',   // Lightest gray 
+        lighter: '#e5e7eb',
+        light: '#b5bbc5',
+        default: '#9ca3af',    // Base gray
+        dark: '#6a767d',       
+        darker: '#4b5563',
+    },
+      
+    // Slate colors - gray-blue palette
+    slate: {
+        light: '#64748B',
+        default: '#475569',
+        dark: '#334155',    
+        darkest: '#1e293b',
+    },
+
+    // System colors - functional colors
+    system: {
+        success: '#10B981',    // Green - success state
+        warning: '#FBBF24',    // Yellow - warning state
+        error: '#EF4444',      // Red - error state 
+        info: '#3B82F6',       // Blue - information state
+    },
+
+    // States - interaction states
+    state: {
+        overlay: 'rgb(0 0 0 / 0.06)',    // Overlay & Hover state
+        disabled: 'rgb(0 0 0 / 0.12)',  // Disabled state
+    }
+};
+
+// Export types for TypeScript
+export type Colors = typeof colors;
 export type ColorShade = keyof typeof colors;