spoko-design-system 1.1.17 → 1.2.1

package/src/components/Table.vue

@@ -5,7 +5,7 @@ const props = defineProps<{
 
 const theads = Object.keys(Object.values(props.data)[0]);
 
-const capitalizeFirstLetter = (text: String) => {
+const capitalizeFirstLetter = (text: string) => {
   return text[0].toUpperCase() + text.slice(1);
 };
 </script>
@@ -14,14 +14,26 @@ const capitalizeFirstLetter = (text: String) => {
   <table class="table-auto text-left border bg-white shadow-md">
     <thead class="bg-gray-500 text-white">
       <tr class="border">
-        <th v-for="(thead, index) in theads" :key="index" class="px-4 py-2 font-semibold">
+        <th
+          v-for="(thead, index) in theads"
+          :key="index"
+          class="px-4 py-2 font-semibold"
+        >
           {{ capitalizeFirstLetter(thead) }}
         </th>
       </tr>
     </thead>
     <tbody>
-      <tr v-for="row in props.data" :key="row" class="border">
-        <td v-for="key in Object.keys(row)" :key="key" class="px-4 py-2">
+      <tr
+        v-for="(row, index) in props.data"
+        :key="index"
+        class="border"
+      >
+        <td
+          v-for="key in Object.keys(row)"
+          :key="key"
+          class="px-4 py-2"
+        >
           {{ row[key] }}
         </td>
       </tr>

package/src/components/Translations.vue

@@ -18,7 +18,10 @@ const props = defineProps({
 </script>
 
 <template>
-  <div v-if="props.translations !== null && props.translations.uri" data-pagefind-ignore>
+  <div
+    v-if="props.translations !== null && props.translations.uri"
+    data-pagefind-ignore
+  >
     <a
       aria-label="Change language"
       type="button"

package/src/pages/index.astro

@@ -60,7 +60,7 @@ const navItems = [
               class="flex w-full flex-wrap bg-white rounded-md hover:-translate-y-1 hover:shadow-lg transition-all flex-1 items-center py-10 px-4 md:(flex-col w-auto flex-nowrap text-center py-16)"
             >
               <Headline as="h2" textSize="2xl" underline={false}>
-                <Icon name={icon} aria-hidden="true" class="text-blue-400 mr-2" />
+                <Icon name={icon} aria-hidden="true" class="text-blue-400 mr-2 text-4xl" />
                 {title}
               </Headline>
               <p class="text-slate-500 w-full">{description}</p>
@@ -91,9 +91,9 @@ const navItems = [
             class="mb-3 text-gray-900 flex items-center justify-center"
           >
             <Icon
-              name="simple-icons:astro"
+              name="vscode-icons:file-type-light-astro"
               aria-hidden="true"
-              class="text-3xl text-blue-400 mr-3"
+              class="text-4xl text-blue-400 mr-3"
             />
             Astro-Powered
           </Headline>
@@ -117,7 +117,7 @@ const navItems = [
             <Icon
               name="streamline-freehand-color:data-transfer-document-module"
               aria-hidden="true"
-              class="text-3xl text-blue-400 mr-3"
+              class="text-4xl text-blue-400 mr-3"
             />
             Rich Components
           </Headline>
@@ -137,7 +137,7 @@ const navItems = [
             <Icon
               name="vscode-icons:file-type-unocss"
               aria-hidden="true"
-              class="text-3xl text-blue-400 mr-3"
+              class="text-4xl text-blue-400 mr-3"
             />
             UnoCSS Styling
           </Headline>
@@ -161,7 +161,7 @@ const navItems = [
             <Icon
               name="vscode-icons:file-type-vue"
               aria-hidden="true"
-              class="text-3xl text-blue-400 mr-3"
+              class="text-4xl text-blue-400 mr-3"
             />
             Vue Integration
           </Headline>
@@ -185,7 +185,7 @@ const navItems = [
             <Icon
               name="streamline-freehand-color:design-process-drawing-board"
               aria-hidden="true"
-              class="text-3xl text-blue-400 mr-3"
+              class="text-4xl text-blue-400 mr-3"
             />
             Design Patterns
           </Headline>
@@ -205,7 +205,7 @@ const navItems = [
             <Icon
               name="streamline-freehand-color:app-window-source-code"
               aria-hidden="true"
-              class="text-3xl text-blue-400 mr-3"
+              class="text-4xl text-blue-400 mr-3"
             />
             Developer Ready
           </Headline>
@@ -237,7 +237,7 @@ const navItems = [
             <Icon
               name="streamline-freehand-color:archive-box"
               aria-hidden="true"
-              class="text-3xl text-blue-400 mr-3"
+              class="text-4xl text-blue-400 mr-3"
             />
             Get Started
           </Headline>
@@ -262,7 +262,7 @@ const navItems = [
               rel="noopener noreferrer"
               class="flex items-center gap-3 bg-red-600 hover:bg-red-700 text-white px-6 py-3 rounded-lg transition-colors"
             >
-              <Icon name="mdi:npm" class="text-3xl" />
+              <Icon name="vscode-icons:file-type-npm" class="text-3xl" />
               <span class="font-semibold">npm Package</span>
             </a>
             <a
@@ -285,9 +285,9 @@ const navItems = [
         <div class="text-center">
           <Headline underline as="h2" class="text-gray-900 mb-8" textSize="3xl">
             <Icon
-              name="streamline-freehand-color:app-window-source-code"
+              name="streamline-freehand-color:coding-files-network-folder"
               aria-hidden="true"
-              class="text-3xl text-blue-400 mr-3"
+              class="text-4xl text-blue-400 mr-3"
             />
             Live Examples
           </Headline>

package/src/styles/base/base.css

@@ -29,6 +29,13 @@
   --clr-accent-300: hsl(358, 72%, 65%);
   --clr-accent-400: hsl(358, 72%, 50%);
   --clr-accent-500: hsl(358, 72%, 35%);
+
+  /* Swiper styles */
+  /* // --swiper-navigation-color: #0099da; */
+  --swiper-navigation-size: 22px;
+  --swiper-scrollbar-drag-bg-color: var(--clr-primary-400);
+  --swiper-scrollbar-size: 1px;
+  --swiper-scrollbar-bottom: 0px;
 }
 
 * {
@@ -103,14 +110,6 @@ html {
   scroll-behavior: smooth;
 }
 
-/* Swiper styles */
-:root {
-  /* // --swiper-navigation-color: #0099da; */
-  --swiper-navigation-size: 22px;
-  --swiper-scrollbar-drag-bg-color: var(--clr-primary-400);
-  --swiper-scrollbar-size: 1px;
-  --swiper-scrollbar-bottom: 0px;
-}
 
 .swiper-horizontal {
   & > .swiper-scrollbar {

package/src/styles/base/typography.css

@@ -15,7 +15,7 @@
 }
 
 .font-vw-textbold {
-  font-family: 'vw_textbold';
+  font-family: 'vw_textbold', sans-serif;
   font-display: fallback;
 }
 
@@ -28,7 +28,7 @@
 }
 
 .font-vw-headbold {
-  font-family: 'vw_headbold' !important;
+  font-family: 'vw_headbold', sans-serif !important;
   font-display: fallback;
 }
 

package/src/styles/main.css

@@ -1,4 +1,3 @@
-/* @import "variables"; */
 @import 'base/typography';
 @import 'base/base';
 @import 'base/grid';

package/src/types/Product.ts

@@ -1,32 +1,87 @@
-export interface ProductImage {
-  path: string;
-}
+import type { Color, EngineType, MaterialsObject } from './common';
 
-export interface BaseProduct {
-  id: string | number;
+export interface Replacement {
+  date: string | null;
+  info: string | null;
   number: string;
-  photo: string | null;
-  price_pln?: number;
+  prcodes: string[] | null;
+  manufacturer: string | null;
+}
+
+export interface DetailList {
+  name: string;
+  id: string;
+  value: string | number[] | Color[];
+  translated: boolean;
+  icon: boolean | null;
+  isArrayValue: boolean | null;
+}
+
+export interface ImportantDetail {
+  name: string;
+  id: string;
+  value: string | number[];
+  translated: boolean;
+  icon: boolean | null;
+  isArrayValue: boolean | null;
+}
+
+export interface Detail {
+  name: string;
+  value: string | number[];
+  translated: boolean;
+  icon: boolean | null;
+  isArrayValue: boolean | null;
 }
 
-export interface ShopProduct extends BaseProduct {
-  images: ProductImage[];
-  slug: string;
-  name_pl: string;
-  name_en: string;
+export interface DetailObject {
+  importantDetails: ImportantDetail[];
+  list: DetailList[];
+  checklist: DetailList[];
 }
 
-export interface CatalogProduct extends BaseProduct {
-  photo: string | null;
+export interface Image {
+  id: number;
+  path: string;
 }
 
-export type Product = ShopProduct | CatalogProduct;
+export interface ImageObject {
+  id: number;
+  path: string;
+}
 
-export interface ProductLinkProps {
-  productId: string;
-  bigTile?: boolean;
-  locale: string;
-  index?: number | null;
-  loading?: 'lazy' | 'eager';
-  isShopProduct?: boolean;
+export interface Product {
+  id: number;
+  number: string;
+  info: string | null;
+  date: string | null;
+  prcodes: string[] | null;
+  engines: string[] | null;
+  engine_type: EngineType[] | null;
+  manufacturer: string[] | null;
+  manufacturer_number: string | null;
+  related: string[] | null;
+  color_ids: string[] | null;
+  position: string[] | null;
+  model: string[] | null;
+  replacement: Replacement[] | null;
+  details: DetailList[] | null;
+  photo: string;
+  files: number[] | null;
+  images: Image[] | null;
+  category_id: number;
+  hand_drive: number | null;
+  materials: MaterialsObject[] | null;
+  sort: number;
+  created_at: string;
+  updated_at: string;
 }
+
+
+export interface ProductImage {
+  title: string;
+  alt: string;
+  link: string;
+  style?: string;
+  __typename: string;
+}

package/src/types/catalog.ts

@@ -0,0 +1,33 @@
+// Catalog/Shop-specific product types
+export interface ProductImage {
+  path: string;
+}
+
+export interface BaseProduct {
+  id: string | number;
+  number: string;
+  photo: string | null;
+  price_pln?: number;
+}
+
+export interface ShopProduct extends BaseProduct {
+  images: ProductImage[];
+  slug: string;
+  name_pl: string;
+  name_en: string;
+}
+
+export interface CatalogProduct extends BaseProduct {
+  photo: string | null;
+}
+
+export type Product = ShopProduct | CatalogProduct;
+
+export interface ProductLinkProps {
+  productId: string;
+  bigTile?: boolean;
+  locale: string;
+  index?: number | null;
+  loading?: 'lazy' | 'eager';
+  isShopProduct?: boolean;
+}

package/src/types/category.ts

@@ -0,0 +1,54 @@
+export interface Breadcrumb {
+  name: string;
+  path: string;
+}
+
+
+export interface SubCategory {
+  id: number;
+  name: string;
+  parent_id: number;
+  title?: string;
+  desc?: string;
+  slug: string;
+  sort: number | null;
+  description?: string;
+  hasProducts: boolean;
+  photo?: string | null;
+  children?: SubCategory[];
+  seoTitle?: string;
+}
+
+export interface Category {
+  id: number;
+  parent_id: number | null;
+  title?: string;
+  slug: string;
+  sort: number | null;
+  description?: string;
+  hasProducts: boolean;
+  photo?: string | null;
+  children: SubCategory[];
+  seoTitle?: string;
+}
+
+export interface CatObject {
+  id: number;
+  name: string;
+  desc: string;
+  parent_id: number | null;
+  title?: string;
+  slug: string;
+  sort?: number | null;
+  description?: string;
+  hasProducts: boolean;
+  photo?: string | null;
+  children: SubCategory[];
+  seoTitle?: string;
+}
+
+
+export interface Link {
+  path: string;
+  name: string;
+}

package/src/types/common.ts

@@ -0,0 +1,38 @@
+export interface Color {
+  id: number;
+  slug: string;
+  name?: string;
+}
+
+export interface EngineType {
+  id: number;
+  type: string;
+}
+
+export interface Model {
+  id: number;
+  slug: string;
+  sort: number;
+  name: string;
+}
+
+export interface Material {
+  id: number;
+  name: string;
+  slug: string;
+  sort: number | null;
+  value?: string | null;
+}
+
+export interface MaterialsObject {
+  name: string;
+  list: Material[];
+}
+
+export interface Position {
+  id: number;
+  slug: string;
+  sort: number;
+  name: string;
+}
+

package/src/types/index.ts

@@ -1,234 +1,7 @@
 /// <reference types="vite/client" />
 
-export interface Breadcrumb {
-  name: string;
-  path: string;
-}
-
-export interface Navigation {
-  currentIndex: number | null;
-  prev: Product | null;
-  next: Product | null;
-}
-
-export interface ResponsiveImage {
-  media: string;
-  src: string;
-}
-
-export interface SubCategory {
-  id: number;
-  name: string;
-  parent_id: number;
-  title?: string;
-  desc?: string;
-  slug: string;
-  sort: number | null;
-  description?: string;
-  hasProducts: boolean;
-  photo?: string | null;
-  children?: SubCategory[];
-  seoTitle?: string;
-}
-
-export interface Category {
-  id: number;
-  parent_id: number | null;
-  title?: string;
-  slug: string;
-  sort: number | null;
-  description?: string;
-  hasProducts: boolean;
-  photo?: string | null;
-  children: SubCategory[];
-  seoTitle?: string;
-}
-
-export interface CatObject {
-  id: number;
-  name: string;
-  desc: string;
-  parent_id: number | null;
-  title?: string;
-  slug: string;
-  sort?: number | null;
-  description?: string;
-  hasProducts: boolean;
-  photo?: string | null;
-  children: SubCategory[];
-  seoTitle?: string;
-}
-
-export interface CatLevels {
-  lvl1: Category | CatObject | null;
-  lvl2: CatObject | null;
-  lvl3: CatObject | null;
-}
-export interface CatInfo {
-  category: CatObject | null;
-  subcategory: CatObject | null;
-  subsubcategory: CatObject | null;
-}
-
-export interface Replacement {
-  date: string | null;
-  info: string | null;
-  number: string;
-  prcodes: string[] | null;
-  manufacturer: string | null;
-}
-
-export interface Color {
-  id: number;
-  slug: string;
-  name?: string;
-}
-
-export interface DetailList {
-  name: string;
-  id: string;
-  value: string | number[] | Color[];
-  translated: boolean;
-  icon: boolean | null;
-  isArrayValue: boolean | null;
-}
-
-export interface importantDetail {
-  name: string;
-  id: string;
-  value: string | number[];
-  translated: boolean;
-  icon: boolean | null;
-  isArrayValue: boolean | null;
-}
-
-export interface Detail {
-  name: string;
-  value: string | number[];
-  translated: boolean;
-  icon: boolean | null;
-  isArrayValue: boolean | null;
-}
-
-export interface DetailObject {
-  importantDetails: importantDetail[];
-  list: DetailList[];
-  checklist: DetailList[];
-}
-
-export interface Image {
-  id: number;
-  path: string;
-}
-
-export interface ImageType {
-  id: number;
-  path: string;
-}
-
-export interface ImageApi {
-  id: number;
-  slug: string;
-  path: string;
-}
-
-export interface ImageObject {
-  id: number;
-  path: string;
-}
-
-export interface ProductFile {
-  id: number;
-  name: string;
-  slug: string;
-  path: string;
-  type: number;
-}
-
-export interface Product {
-  id: number;
-  number: string;
-  info: string | null;
-  date: string | null;
-  prcodes: string[] | null;
-  engines: string[] | null;
-  engine_type: EngineType[] | null;
-  manufacturer: string[] | null;
-  manufacturer_number: string | null;
-  related: string[] | null;
-  color_ids: string[] | null;
-  position: string[] | null;
-  model: string[] | null;
-  replacement: Replacement[] | null;
-  details: DetailList[] | null;
-  photo: string;
-  files: number[] | null;
-  images: Image[] | null;
-  category_id: number;
-  hand_drive: number | null;
-  materials: MaterialsObject[] | null;
-  sort: number;
-  created_at: string;
-  updated_at: string;
-}
-
-export interface MaterialsObject {
-  name: string;
-  list: Material[];
-}
-
-export interface Product2FullSearch {
-  number: string;
-  category_id: number;
-  photo: string;
-  hand_drive: number | null;
-  manufacturer: string[] | null;
-  date: string | null;
-  text: string;
-  details: DetailList[] | null;
-}
-
-export interface Link {
-  path: string;
-  name: string;
-}
-export interface EngineType {
-  id: number;
-  type: string;
-}
-
-export interface Model {
-  id: number;
-  slug: string;
-  sort: number;
-  name: string;
-}
-
-export interface Material {
-  id: number;
-  name: string;
-  slug: string;
-  sort: number | null;
-  value?: string | null;
-}
-
-export interface ProductImage {
-  title: string;
-  alt: string;
-  link: string;
-  style?: string;
-  __typename: string;
-}
-
-export interface Position {
-  id: number;
-  slug: string;
-  sort: number;
-  name: string;
-}
-
-export interface Hreflang {
-  rel: 'alternate' | 'canonical';
-  href: string;
-  hreflang: 'en' | 'pl' | 'x-default';
-}
+// Re-export all types from modular files
+export * from './product';
+export * from './category';
+export * from './common';
+export * from './catalog';

package/src/utils/api/getCategories.ts

@@ -2,8 +2,4 @@ import { getData } from '../getData';
 
 export const getApiCategories = getData('categories');
 
-// const getApiCategories = async () => {
-//     return await getData('categories');
-// }
-
 export default getApiCategories;

package/src/utils/product/getProductChecklist.ts

@@ -1,5 +1,5 @@
 export const getProductCheckList = productDetails => {
-  if (!productDetails || !productDetails.length) {
+  if (!productDetails?.length) {
     return null;
   }
 

package/src/utils/seo/getShorterDescription.ts

@@ -5,7 +5,7 @@ export const getShorterDescription = (
   limit = MAX_DESCRIPTION_LENGTH
 ) => {
   function cutString(s: string, n: number) {
-    const text = s.replace(/(\n)/g, ' ');
+    const text = s.replaceAll('\n', ' ');
     const cut = text.indexOf('. ', n);
     return cut === -1 ? text : `${text.substring(0, cut)}.`;
   }