@lilaquadrat/design-core 0.1.0

package/src/functions/shopify.provider.ts

@@ -0,0 +1,378 @@
+export default class ShopifyGraphQLAPI {
+
+  private shop: string;
+  private accessToken: string;
+  private apiVersion: string;
+
+  productCache: Record<string, any> = {};
+
+  constructor (shop: string, accessToken: string, apiVersion: string = '2024-04') {
+    this.shop = shop;
+    this.accessToken = accessToken;
+    this.apiVersion = apiVersion;
+  }
+
+  private async makeGraphQLRequest (query: string, variables?: object): Promise<any> {
+
+    const url = `https://${this.shop}/api/${this.apiVersion}/graphql.json`;
+    const headers = {
+      'X-Shopify-Storefront-Access-Token': this.accessToken,
+      'Content-Type'                     : 'application/json',
+    };
+    const body = JSON.stringify({ query, variables });
+    const response = await fetch(url, {
+      method: 'POST',
+      headers,
+      body,
+    });
+
+    if (!response.ok) {
+      throw new Error(`GraphQL Error: ${response.statusText}`);
+    }
+
+    const result = await response.json();
+
+    if (result.errors) {
+      throw new Error(`GraphQL Error: ${JSON.stringify(result.errors)}`);
+    }
+
+    return result.data;
+  }
+
+  // Fetch a product by ID
+  public async getProduct (productId: string): Promise<any> {
+
+    if(this.productCache[productId]) return Promise.resolve(this.productCache[productId]);
+
+    const query = `
+            query GetProduct($id: ID!) {
+                product(id: $id) {
+                    id
+                    title
+                    description
+                    variants(first: 10) {
+                        edges {
+                            node {
+                                id
+                                title
+                                price {
+                                    amount
+                                    currencyCode
+                                }
+                            }
+                        }
+                    }
+                    images(first: 1) {
+                        edges {
+                            node {
+                                id
+                                src: url
+                                altText
+                            }
+                        }
+                    }
+                }
+            }
+        `;
+    const variables = { id: `gid://shopify/Product/${productId}` };
+    const product = await this.makeGraphQLRequest(query, variables);
+
+    console.log(product);
+
+    // const cleanedProduct = this.transformProduct(product);
+    const cleanedProduct = {
+      name     : product.product.title,
+      id       : product.product.id,
+      variantId: product.product.variants.edges[0].node.id,
+      price    : {
+        amount  : +product.product.variants.edges[0].node.price.amount,
+        currency: product.product.variants.edges[0].node.price.currencyCode
+      },
+      description: product.product.description
+    }
+
+    if(product.product.images.edges[0]) {
+        
+      cleanedProduct.image = product.product.images.edges[0].node.src;
+        
+    }
+
+    this.productCache[productId] = cleanedProduct; 
+
+    return cleanedProduct;
+
+  }
+
+  // Create an empty cart
+  public async getCart (attributes: {key: string, value: string}[]): Promise<any> {
+    const mutation = `
+        mutation CreateEmptyCart($attributes: [AttributeInput!]) {
+            cartCreate(input: { attributes: $attributes }) {
+                cart {
+                    id
+                    checkoutUrl
+                    attributes {
+                        key
+                        value
+                    }
+                }
+                userErrors {
+                    field
+                    message
+                }
+            }
+        }
+    `;
+    const cart = await this.makeGraphQLRequest(mutation, {attributes});
+
+    return cart.cartCreate.cart;
+  }
+
+  // Get a cart by ID
+  public async getCartWithProducts (cartId: string): Promise<any> {
+    const query = `
+            query GetCart($cartId: ID!) {
+                cart(id: $cartId) {
+                    id
+                    checkoutUrl
+                    attributes {
+                        key
+                        value
+                    }
+                    lines(first: 50) {
+                        edges {
+                            node {
+                                id
+                                quantity
+                                merchandise {
+                                    ... on ProductVariant {
+                                        id
+                                        title
+                                        product {
+                                            id
+                                            title
+                                            description
+                                            images(first: 1) {
+                                              edges {
+                                                  node {
+                                                      id
+                                                      src: url
+                                                      altText
+                                                  }
+                                              }
+                                            }
+                                        }
+                                        price {
+                                            amount
+                                            currencyCode
+                                        }
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        `;
+    const variables = { cartId };
+    const cart = await this.makeGraphQLRequest(query, variables);
+
+    if(!cart.cart) {
+      console.log('no cart');
+      throw new Error('CART_NOT_FOUND');
+    }
+
+    return this.transformProducts(cart.cart.lines.edges);
+
+  }
+
+  public async addToCart (cartId: string, product: any, quantity: number): Promise<any> {
+    const mutation = `
+        mutation AddProductToCart($cartId: ID!, $lines: [CartLineInput!]!) {
+            cartLinesAdd(cartId: $cartId, lines: $lines) {
+                cart {
+                    id
+                    checkoutUrl
+                    lines(first: 10) {
+                        edges {
+                            node {
+                                id
+                                quantity
+                                merchandise {
+                                    ... on ProductVariant {
+                                        id
+                                        title
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+                userErrors {
+                    field
+                    message
+                }
+            }
+        }
+    `;
+    const variables = {
+      cartId,
+      lines: [
+        {
+          merchandiseId: product.variantId,
+          quantity,
+        },
+      ],
+    };
+    const cartLinesAdd = await this.makeGraphQLRequest(mutation, variables);
+
+    product.lineId = cartLinesAdd.cartLinesAdd.cart.lines.edges[0].node.id;
+
+    return product;
+  }
+
+  // Remove product from the cart
+  public async removeFromCart (cartId: string, cartProduct: any): Promise<any> {
+    const mutation = `
+          mutation RemoveCartLine($cartId: ID!, $lineIds: [ID!]!) {
+              cartLinesRemove(cartId: $cartId, lineIds: $lineIds) {
+                  cart {
+                      id
+                      checkoutUrl
+                      lines(first: 10) {
+                          edges {
+                              node {
+                                  id
+                                  quantity
+                                  merchandise {
+                                      ... on ProductVariant {
+                                          id
+                                          title
+                                      }
+                                  }
+                              }
+                          }
+                      }
+                  }
+                  userErrors {
+                      field
+                      message
+                  }
+              }
+          }
+      `;
+    const variables = {
+      cartId,
+      lineIds: [cartProduct.lineId], // List of line IDs to remove
+    };
+
+    return this.makeGraphQLRequest(mutation, variables);
+  }
+
+  public async updateQuantity (cartId: string, cartProduct: any, quantity: number): Promise<any> {
+    const mutation = `
+        mutation UpdateCartLineQuantity($cartId: ID!, $lines: [CartLineUpdateInput!]!) {
+            cartLinesUpdate(cartId: $cartId, lines: $lines) {
+                cart {
+                    id
+                    checkoutUrl
+                    lines(first: 10) {
+                        edges {
+                            node {
+                                id
+                                quantity
+                                merchandise {
+                                    ... on ProductVariant {
+                                        id
+                                        title
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+                userErrors {
+                    field
+                    message
+                }
+            }
+        }
+    `;
+    const variables = {
+      cartId,
+      lines: [
+        {
+          id: cartProduct.lineId, // The line item ID to update
+          quantity,
+        },
+      ],
+    };
+
+    return this.makeGraphQLRequest(mutation, variables);
+  }
+
+  public async updateCartAttributes (cartId: string, attributes: { key: string; value: string }[]): Promise<any> {
+    const mutation = `
+        mutation UpdateCartAttributes($cartId: ID!, $attributes: [AttributeInput!]!) {
+            cartAttributesUpdate(cartId: $cartId, attributes: $attributes) {
+                cart {
+                    id
+                    checkoutUrl
+                    attributes {
+                        key
+                        value
+                    }
+                }
+                userErrors {
+                    field
+                    message
+                }
+            }
+        }
+    `;
+    const variables = { cartId, attributes };
+
+    console.log(variables);
+
+    const cart = await this.makeGraphQLRequest(mutation, variables);
+
+    if (cart.cartAttributesUpdate.userErrors.length > 0) {
+      console.error('Errors:', cart.cartAttributesUpdate.userErrors);
+      throw new Error('Failed to update cart attributes');
+    }
+
+    return cart.cartAttributesUpdate.cart;
+  }
+
+  transformProducts (products: any[]) {
+
+    return products.map((edge) => {
+
+      const transformedProduct = {
+        lineId     : edge.node.id,
+        variantId  : edge.node.merchandise.id,
+        quantity   : edge.node.quantity,
+        name       : edge.node.merchandise.product.title,
+        id         : edge.node.merchandise.product.id,
+        description: edge.node.merchandise.product.description,
+        price      : {
+          amount  : +edge.node.merchandise.price.amount,
+          currency: edge.node.merchandise.price.currencyCode,
+        },
+        currency: edge.node.merchandise.price.currencyCode,
+      }
+        
+      console.log(edge.node);
+      
+      if(edge.node.merchandise.product.images.edges[0]) {
+        
+        transformedProduct.image = edge.node.merchandise.product.images.edges[0].node.src;
+        
+      }
+        
+      return transformedProduct;
+
+    })
+
+  }
+}

package/src/functions/stripe.provider.ts

@@ -0,0 +1,181 @@
+import type PaymentProvider from '../interfaces/PaymentProvider.interface';
+import useCartStore from '../stores/cart.store';
+import useMainStore from '../stores/main.store';
+import StudioSDK from '@lilaquadrat/sdk';
+
+export default class StripePaymentProvider implements PaymentProvider {
+
+  async getCart (attributes: Record<string, string>): Promise<{ id: string; attributes: Record<string, string> }> {
+
+    const { apiConfig } = useMainStore();
+    const sdk = new StudioSDK(apiConfig)
+
+    console.log('StripePaymentProvider.getCart', attributes);
+
+    const cart = await sdk.public.carts.create({attributes});
+
+    return { id: cart.data._id, attributes: attributes || {} };
+
+  }
+
+  async updateCartAttributes (cartId: string, attributes?: Record<string, string>): Promise<any> {
+    
+    const { apiConfig } = useMainStore();
+    const sdk = new StudioSDK(apiConfig)
+    const { products } = useCartStore();
+    const updateCart: {items?: {_id: string, quantity: number}[], attributes: Record<string, string>} = {
+      items     : [],
+      attributes: {}
+    };
+
+    products.forEach((item: any) => {
+
+      updateCart.items?.push({_id: item._id, quantity: item.quantity});
+
+    });
+
+    if(attributes) {
+
+      Object.keys(attributes).forEach((attribute) => {
+        updateCart.attributes[attribute] = attributes[attribute];
+      })
+
+    }
+
+    const updatedCart = await sdk.public.carts.update(cartId, updateCart);
+
+    console.log('StripePaymentProvider.updateCartAttributes', updateCart);
+    return Promise.resolve(updatedCart);
+
+  }
+
+  async getCartWithProducts (cartId: string) {
+
+    const { apiConfig } = useMainStore();
+    const sdk = new StudioSDK(apiConfig)
+
+    console.log('StripePaymentProvider.getCartWithProducts');
+
+    const cart = await sdk.public.carts.getById(cartId);
+
+    if(!cart.data) throw new Error('NO_CART_FOUND');
+
+    return cart.data.items || [];
+  }
+
+  async getProduct (productId: string): Promise<any> {
+
+    console.log('StripePaymentProvider.getProduct', productId);
+
+    const { apiConfig } = useMainStore();
+    const sdk = new StudioSDK(apiConfig)
+    const product = await sdk.public.carts.getProduct(productId);
+
+    return product.data;
+  }
+
+  async addToCart (cartId: string, product: any, amount: number): Promise<any> {
+
+    const { apiConfig } = useMainStore();
+    const sdk = new StudioSDK(apiConfig)
+    const { products } = useCartStore();
+    const updateCart: {items?: {_id: string, quantity: number}[]} = {
+      items: [],
+    };
+
+    console.log('StripePaymentProvider.addToCart', cartId, product, amount);
+
+    const itemInCart = products.find((item: any) => item._id === product._id);
+
+    if(itemInCart) {
+
+      itemInCart.quantity = itemInCart.quantity + amount;
+
+    } else {
+
+      updateCart.items?.push({
+        _id     : product._id,
+        quantity: amount
+      });
+
+    }
+
+    products.forEach((item: any) => {
+
+      updateCart.items?.push({_id: item._id, quantity: item.quantity});
+
+    });
+
+    const updatedCart = await sdk.public.carts.update(cartId, updateCart);
+    const addedItem = updatedCart.data.items.find((item: any) => item.id === product.id);
+
+    return addedItem
+
+  }
+
+  async removeFromCart (cartId: string, product: any): Promise<any> {
+
+    const { apiConfig } = useMainStore();
+    const sdk = new StudioSDK(apiConfig)
+    const { products } = useCartStore();
+    const updateCart: {items?: {_id: string, quantity: number}[]} = {
+      items: []
+    };
+
+    products.forEach((item) => {
+
+      if(item._id === product._id) return;
+      updateCart.items?.push({_id: item._id, quantity: item.quantity});
+
+    });
+
+    if(updateCart.items?.length === 0) {
+      delete updateCart.items;
+    }
+
+    await sdk.public.carts.update(cartId, updateCart);
+
+  }
+
+  async updateQuantity (cartId: string, cartProduct: any, amount: number): Promise<any> {
+
+    const { apiConfig } = useMainStore();
+    const sdk = new StudioSDK(apiConfig)
+    const { products } = useCartStore();
+    const updateCart: {items?: {_id: string, quantity: number}[]} = {
+      items: []
+    };
+    const itemInCart = products.find((item) => item._id === cartProduct._id);
+
+    itemInCart.quantity = amount;
+
+    products.forEach((item) => {
+      updateCart.items?.push({_id: item._id, quantity: item.quantity});
+    });
+
+    await sdk.public.carts.update(cartId, updateCart);
+
+  }
+
+  async finalize (cartId: string): Promise<{checkoutUrl: string}> {
+
+    const { apiConfig } = useMainStore();
+    const sdk = new StudioSDK(apiConfig)
+    const repsonse = await sdk.public.carts.finalize(cartId);
+
+    return repsonse.data;
+  }
+
+  async getFinishedCart (cartId: string): Promise<any> {
+
+    const { apiConfig } = useMainStore();
+    const sdk = new StudioSDK(apiConfig)
+    const cart = await sdk.public.carts.getFinishedById(cartId);
+
+    if(!cart.data) throw new Error('NO_CART_FOUND');
+
+    return cart.data;
+
+  }
+
+}

package/src/globals.d.ts

@@ -0,0 +1,19 @@
+import type { StateTree } from 'pinia';
+import type FrontendConfigInterface from './interfaces/FrontendConfig.interface';
+
+declare global {
+
+  interface Window {
+    onYouTubeIframeAPIReady: () => void
+    __INITIAL_STATE__?: Record<string, StateTree>
+  }
+
+  const __FRONTEND_CONFIG__: FrontendConfigInterface;
+  const __TARGET__: string;
+  /**
+   * true only in the shareable static gallery build (yarn build:preview)
+   */
+  const __PREVIEW__: boolean;
+}
+
+export { };

package/src/index.ts

@@ -0,0 +1,47 @@
+/**
+ * @lilaquadrat/design-core
+ *
+ * The framework half of a STUDIO design. Everything that is not the design
+ * itself lives here: app bootstrap, router, stores, plugins, models and the
+ * shared build tooling.
+ *
+ * This barrel carries the bootstrap surface only. Everything else is reached
+ * through its own subpath, mirroring the layout a design used to have:
+ *
+ *   import useMainStore from '@lilaquadrat/design-core/stores/main.store';
+ *   import { useInview } from '@lilaquadrat/design-core/plugins/inview';
+ *   import useDate from '@lilaquadrat/design-core/mixins/date';
+ */
+
+// app bootstrap
+export { getAppInstance, type AppComponents } from './main';
+export { createClientEntry } from './client-entry';
+export { render } from './server-entry';
+
+// routing
+export { dynamicRoutes, editorRoutes, createPreviewRoutes } from './routes';
+export { default as getRoutes, type RouteSets } from './mixins/getRoutes';
+export { default as createRouter } from './mixins/createRouter';
+export { default as hooks } from './mixins/hooks';
+export { smartScrollBehavior } from './mixins/scroll';
+
+// component registries
+export {
+  loadViaGlob,
+  loadViaDeclaration,
+  loadViaDeclarationSync,
+  getAvailableModules,
+  createModulesArray,
+} from './mixins/loadComponents';
+
+// i18n
+export { default as i18n, t, addMessages } from './plugins/translations';
+
+// framework contracts
+export type { default as FrontendConfig } from './interfaces/FrontendConfig.interface';
+export type { default as ModuleBaseProps } from './interfaces/ModuleBaseProps.interface';
+export type { default as IconsPartial } from './interfaces/IconsPartial';
+export type { default as EditorConfiguration } from './interfaces/EditorConfiguration.interface';
+export type { default as PaymentProvider } from './interfaces/PaymentProvider.interface';
+
+export { default as logger } from './mixins/logger';

package/src/interfaces/AppState.interface.ts

@@ -0,0 +1,4 @@
+export default interface AppState {
+    customerId?: string
+    emailConfirmationCode?: string
+}

package/src/interfaces/EditorConfiguration.interface.ts

@@ -0,0 +1,15 @@
+export interface EditorTitleDescription {
+    short?: string
+    full?: string
+}
+export default interface EditorConfiguration {
+
+    editorUrl?: string
+    breakpointTablet?: string
+    breakpointDesktop?: string
+    breakpointWide?: string
+    preloadImages?: boolean
+    title?: EditorTitleDescription
+    description?: EditorTitleDescription
+
+}

package/src/interfaces/EventDeclaration.interface.ts

@@ -0,0 +1,19 @@
+export default interface EventDeclaration {
+  id: string;
+  name: string;
+  description: string;
+  confirmRequired?: boolean;
+  /**
+   * the event is async and we need to show a animation on execute
+   */
+  operation?: boolean;
+  feedback?: {
+    pending?: string;
+    resolved?: string;
+    rejected?: string;
+  };
+  additionalData?: {
+    name: string;
+    description: string;
+  };
+}

package/src/interfaces/FrontendConfig.interface.ts

@@ -0,0 +1,42 @@
+import type { Auth0ClientOptions } from '@auth0/auth0-spa-js';
+import type StudioSDK from '@lilaquadrat/sdk';
+
+export default interface FrontendConfig {
+
+    auth0Options?: Auth0ClientOptions
+
+    /**
+     * for identification at the backend
+     */
+    name: string
+
+    company: string
+    project: string
+
+    api: {
+        mode: StudioSDK['mode']
+        customEndpoints?: StudioSDK['customEndpoints']
+    }
+
+    cdn: {
+        public: string
+        secure: string
+    }
+
+    payment?: {
+        type?: 'internal' | 'shopify' | 'stripe',
+        options?: Record<string, string>
+    }
+
+    /**
+     * base path for loading files
+     */
+    base?: string
+
+    /**
+     * indicates that this project is dynamic. e.g. an app or an website with at least one dynamic part
+     *
+     */
+    dynamic?: boolean
+
+}