spoko-design-system 0.2.49 → 0.2.51

package/src/components/ProductNumber.astro

@@ -1,105 +0,0 @@
----
-import { t } from "i18next";
-import ButtonCopy from "./ButtonCopy.vue";
-
-interface Props {
-  productNumber: string | null;
-  copyDisabled?: boolean;
-  isPdp?: boolean;
-  small?: boolean;
-  big?: boolean;
-  class?: string;
-}
-
-const { 
-  productNumber, 
-  copyDisabled, 
-  isPdp, 
-  small, 
-  big, 
-  class: className 
-} = Astro.props;
-
-const buttonTexts = {
-  copy: t('copy'),
-  copied: t('copied')
-} as const;
-
-// Regex patterns:
-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();
-
-const formatProductNumber = (number: string, separator: string): string => {
-  if (!number) return '';
-  
-  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
-};
-
-// Memoization of formatted numbers
-const formattedNumbers = productNumber ? {
-  standard: formatProductNumber(productNumber, '\u00A0'),
-  dot: formatProductNumber(productNumber, '.'),
-  dash: formatProductNumber(productNumber, '-')
-} : null;
-
-const classNames = [
-  'product-number',
-  big ? 'text-4.5' : 'number-big',
-  className
-].filter(Boolean).join(' ');
-
-const trackingClass = small ? 'tracking-wide' : 'tracking-tight';
-
-const ProductWrapper = isPdp ? 'h2' : 'div';
-const FormattedWrapper = isPdp ? 'h3' : 'div';
----
-
-{productNumber && formattedNumbers && (
-  <div class={classNames}>
-    <div class={`p-number ${small ? "w-full" : ""}`} itemprop="identifier">
-      <ProductWrapper id={productNumber} class="product-code">
-        {productNumber}
-      </ProductWrapper>
-
-      {big && (
-        <ButtonCopy 
-          productNumber={productNumber} 
-          copyDisabled={!big} 
-          texts={buttonTexts} 
-          client:idle 
-        />
-      )}
-    </div>
-
-    <div class={`code-formatted ${trackingClass}`}>
-      <div class="relative inset-0" data-pagefind-ignore>
-        {formattedNumbers.dot}
-      </div>
-      <div class="absolute inset-0" data-pagefind-ignore>
-        {formattedNumbers.dash}
-      </div>
-      <FormattedWrapper class="number-secondary">
-        {formattedNumbers.standard}
-      </FormattedWrapper>
-    </div>
-  </div>
-)}