@rileybathurst/paddle 1.2.7 → 1.3.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rileybathurst/paddle",
   "private": false,
-  "version": "1.2.7",
+  "version": "1.3.0",
   "type": "module",
   "scripts": {
     "dev": "vite",

package/src/index.tsx

@@ -1,36 +1,38 @@
 // Atoms
-export * from "./PaddleBookNow";
-export * from "./PaddleTime";
+export * from "./paddle-book-now";
+export * from "./paddle-time";
 export * from "./paddle-remainder";
+export * from "./paddle-format-phone-number";
 
 // Molecules
-export * from "./PaddleComposition";
-export * from "./PaddleSocials";
-export * from "./PaddleLocationCard";
-export * from "./PaddleTestimonials";
-export * from "./PaddleTicket";
-export * from "./PaddleSunsetTourTimes";
-export * from "./PaddleTopBar";
-export * from "./PaddleSpecs";
-export * from "./PaddleTestimonial";
-export * from "./PaddlePurchase";
+export * from "./paddle-composition";
+export * from "./paddle-socials";
+export * from "./paddle-location-card";
+export * from "./paddle-testimonials";
+export * from "./paddle-ticket";
+export * from "./paddle-sunset-tour-times";
+export * from "./paddle-top-bar";
+export * from "./paddle-specs";
+export * from "./paddle-testimonial";
+export * from "./paddle-purchase";
 
 // Organisms
-export * from "./PaddleLocationDeck";
-export * from "./PaddleTestimonials";
-export * from "./PaddleBrandList";
-export * from "./PaddleMoonlightTourDatesTimes"
+export * from "./paddle-location-deck";
+export * from "./paddle-testimonials";
+export * from "./paddle-brand-list";
+export * from "./paddle-moonlight-tour-dates-times"
 
 // Templates
 
 // Pages
 
 // SEO
-export * from "./PaddleSEO";
+export * from "./paddle-seo";
 
 // Types
-export * from "./types/ticket-types";
-export * from "./types/location-card-types";
+export * from "./types/paddle-ticket-types";
+export * from "./types/paddle-location-card-types";
 export * from "./types/paddle-location-deck-types";
-export * from "./types/gatsby-image-type";
-export * from "./types/paddle-purchase-types";
+export * from "./types/paddle-gatsby-image-type";
+export * from "./types/paddle-purchase-types";
+export * from "./types/paddle-brand-types";

package/src/paddle-book-now.tsx

@@ -0,0 +1,16 @@
+import * as React from "react"
+import type { PaddleBookNowTypes } from "./types/paddle-book-now-types";
+
+export const PaddleBookNow = ({ peek_base, strapiLocaleName, specificName, specificLink }: PaddleBookNowTypes) => {
+  return (
+    <a
+      href={specificLink || peek_base}
+      rel="noopener noreferrer"
+      className="book-now"
+      title={`Book now ${specificLink && <> {specificLink} </>} with ${strapiLocaleName} kayak and paddleboard`}
+    >
+      {specificName && (<>{specificName} <br /></>)}
+      BOOK NOW
+    </a>
+  );
+};

package/src/{PaddleBrandList.tsx → paddle-brand-list.tsx}

@@ -1,27 +1,14 @@
 import * as React from "react"
 import { Link } from 'gatsby';
 import SVG from 'react-inlinesvg';
+import type { PaddleBrandType } from "./types/paddle-brand-types";
 
 // * additional work is done here to split kayak and paddleboard
 
-type BrandType = {
-  id: string;
-  slug: string;
-  svg: string;
-  name: string;
-  retail: {
-    title: string;
-    slug: string;
-    sport: {
-      slug: string;
-    }
-  }[];
-};
-
-const PaddleBrandList = ({ nodes, sport }: { nodes: BrandType[]; sport?: string }) => {
-
-  const BrandSet = new Set<BrandType>();
-  let BrandArray: BrandType[] = [];
+export const PaddleBrandList = ({ nodes, sport }: { nodes: PaddleBrandType[]; sport?: string }) => {
+
+  const BrandSet = new Set<PaddleBrandType>();
+  let BrandArray: PaddleBrandType[] = [];
 
   if (sport) {
     nodes.map((brand) => {
@@ -43,7 +30,7 @@ const PaddleBrandList = ({ nodes, sport }: { nodes: BrandType[]; sport?: string
 
   return (
     <ul className='brand_list'>
-      {BrandArray.map((brand: BrandType) => (
+      {BrandArray.map((brand: PaddleBrandType) => (
         <li key={brand.id}>
           <Link to={`/retail/${sport}/${brand.slug}`}>
             {brand.svg ?
@@ -58,5 +45,3 @@ const PaddleBrandList = ({ nodes, sport }: { nodes: BrandType[]; sport?: string
     </ul>
   )
 }
-
-export default PaddleBrandList

package/src/{PaddleComposition.tsx → paddle-composition.tsx}

@@ -2,15 +2,15 @@
 
 import * as React from "react"
 import { GatsbyImage } from "gatsby-plugin-image"
-import type { GatsbyImageType } from "./types/gatsby-image-type"
+import type { PaddleGatsbyImageType } from "./types/paddle-gatsby-image-type"
 
 type defaultPaddlerTypes = {
   sport?: string;
   defaultKayaker: {
-    image: GatsbyImageType;
+    image: PaddleGatsbyImageType;
   };
   defaultPaddleboarder: {
-    image: GatsbyImageType;
+    image: PaddleGatsbyImageType;
   };
 }
 const DefaultPaddler = ({ sport, defaultKayaker, defaultPaddleboarder }: defaultPaddlerTypes) => {
@@ -34,18 +34,18 @@ const DefaultPaddler = ({ sport, defaultKayaker, defaultPaddleboarder }: default
 
 interface CompositionTypes {
   sport?: string;
-  image?: GatsbyImageType;
+  image?: PaddleGatsbyImageType;
   defaultKayaker: {
-    image: GatsbyImageType;
+    image: PaddleGatsbyImageType;
   }
   defaultPaddleboarder: {
-    image: GatsbyImageType;
+    image: PaddleGatsbyImageType;
   }
   sandTexture: {
-    image: GatsbyImageType;
+    image: PaddleGatsbyImageType;
   };
   waterTexture: {
-    image: GatsbyImageType;
+    image: PaddleGatsbyImageType;
   };
 }
 export const PaddleComposition = ({ sport, image, defaultKayaker, defaultPaddleboarder, sandTexture, waterTexture }: CompositionTypes) => {

package/src/paddle-format-phone-number.tsx

@@ -0,0 +1,10 @@
+import React from "react";
+
+export const FormatPhoneNumber = ({ phoneNumberString }: { phoneNumberString: number }) => {
+  const cleaned = (`${phoneNumberString}`).replace(/\D/g, '');
+  const match = cleaned.match(/^(\d{3})(\d{3})(\d{4})$/);
+  if (match) {
+    return `(${match[1]}) ${match[2]}-${match[3]}`;
+  }
+  return null;
+}

package/src/{PaddleLocationCard.tsx → paddle-location-card.tsx}

@@ -4,7 +4,7 @@ import Markdown from "react-markdown";
 
 import HourMin from "./hour-min";
 import Phone from "./phone";
-import type { PaddleLocationCardTypes } from "./types/location-card-types";
+import type { PaddleLocationCardTypes } from "./types/paddle-location-card-types";
 import SVG from 'react-inlinesvg';
 
 // merged types are possible to dry this up but its also a lot

package/src/{PaddleLocationDeck.tsx → paddle-location-deck.tsx}

@@ -1,6 +1,7 @@
 import * as React from "react";
-import { PaddleLocationCard } from "./PaddleLocationCard";
-import type { PaddleLocationCardTypes } from "./types/location-card-types";
+import { PaddleLocationCard } from "./paddle-location-card";
+import type { PaddleLocationCardTypes } from "./types/paddle-location-card-types";
+import type { PaddleLocationDeckTypes } from "./types/paddle-location-deck-types";
 
 export const PaddleLocationDeck = ({
   nodes,

package/src/paddle-pricing-chart.tsx

@@ -0,0 +1,66 @@
+import * as React from "react"
+import SVG from 'react-inlinesvg';
+import PaddleBookNow from "./paddle-book-now"
+import { Link } from "gatsby"
+import type { paddlePricingChartTypes } from "./types/paddle-pricing-chart-types";
+
+const LineBreaker = ({ text }: { text: string; }) => {
+  const regex = /[- ]/g;
+  const newStr = text.replace(regex, "<br />$&");
+  // console.log(newStr);
+
+  return (
+    <h4>
+      <SVG src={newStr} />
+    </h4>
+  );
+}
+
+export const PaddlePricingChart = ({ rentalRates, rentalAddons, book, peek_base, strapiLocaleName }: paddlePricingChartTypes) => {
+
+  return (
+    <>
+      <div className="charts">
+        <div className="pricing-chart">
+          <div className="row row-header">
+            <h2 className="kilimanjaro"><Link to="/rentals">Rental<br />Rates</Link></h2>
+            <p>1 Hour</p>
+            <p><span>3 Hours</span></p>
+            <p><span>Full Day</span></p>
+          </div>
+
+          {rentalRates.nodes.map((rate) => (
+            <div key={rate.id} className="row">
+              {/* <h4>{rate.item}</h4> */}
+              <LineBreaker text={rate.item} />
+              <p>{rate.oneHour}</p>
+              <p>{rate.threeHour}</p>
+              <p>{rate.fullDay}</p>
+            </div>
+          ))}
+        </div>
+
+        {rentalAddons.nodes.length > 0 ? (
+          <div className="pricing-chart">
+            {rentalAddons.nodes.map((addon) => (
+              <React.Fragment key={addon.id}>
+                <p>{addon.name}</p>
+                <p>+{addon.single}</p>
+                <p>+{addon.double}</p>
+                <p>+{addon.sup}</p>
+              </React.Fragment>
+            ))}
+          </div>
+        ) : null}
+      </div>
+
+      {book ? (
+        <PaddleBookNow
+          peek_base={peek_base}
+          strapiLocaleName={strapiLocaleName}
+        />
+      ) : null}
+    </>
+
+  )
+}

package/src/{PaddlePurchase.tsx → paddle-purchase.tsx}

@@ -1,9 +1,9 @@
 import * as React from "react";
 import { Link } from "gatsby";
 import { GatsbyImage } from "gatsby-plugin-image";
-import type { GatsbyImageType } from "./types/gatsby-image-type";
-import { PaddleInchesRemainder } from "./PaddleInchesRemainder";
-import { PaddleTextureBackgrounds } from "./PaddleTextureBackgrounds";
+import type { PaddleGatsbyImageType } from "./types/paddle-gatsby-image-type";
+import { PaddleInchesRemainder } from "./paddle-inches-remainder";
+import { PaddleTextureBackgrounds } from "./paddle-texture-backgrounds";
 
 // TODO: I'm not sure if this is needed or I can loop it easier
 interface NameTypes {
@@ -54,15 +54,15 @@ type purchaseTypes = {
   capacity: number;
   demo: boolean;
   discount?: number;
-  cutout: GatsbyImageType;
+  cutout: PaddleGatsbyImageType;
   sportSlug: string;
   brandSlug: string;
-  baseOne: { image: GatsbyImageType };
-  baseTwo: { image: GatsbyImageType };
-  baseThree: { image: GatsbyImageType };
-  topOne: { image: GatsbyImageType };
-  topTwo: { image: GatsbyImageType };
-  topThree: { image: GatsbyImageType };
+  baseOne: { image: PaddleGatsbyImageType };
+  baseTwo: { image: PaddleGatsbyImageType };
+  baseThree: { image: PaddleGatsbyImageType };
+  topOne: { image: PaddleGatsbyImageType };
+  topTwo: { image: PaddleGatsbyImageType };
+  topThree: { image: PaddleGatsbyImageType };
 };
 export const PaddlePurchase = ({ id, title, slug, excerpt, length, width, inflatable, capacity, demo, discount, cutout, sportSlug, brandSlug, baseOne, baseTwo, baseThree, topOne, topTwo, topThree }: purchaseTypes) => {
 

package/src/{PaddleSEO.tsx → paddle-seo.tsx}

@@ -27,13 +27,13 @@ const Breadcrumbs = (breadcrumbs: BreadcrumbsTypes) => {
           "@type": "BreadcrumbList",
           "itemListElement": [
             ${Object.entries(rest).map(([key, breadcrumb]) => {
-              return `{
+        return `{
           "@type": "ListItem",
           "position": ${Number.parseInt(key) + 1},
           "name": "${breadcrumb.name}",
           "item": "${url}/${breadcrumb.item}"
         }`;
-            })}
+      })}
           ]
         }
       `}
@@ -167,9 +167,8 @@ export const PaddleSEO = ({
               "postalCode": "${strapiLocation?.postalCode}",
               "addressCountry": "US"
             },
-            ${
-              allStrapiLocation
-                ? `
+            ${allStrapiLocation
+            ? `
             "department": [
             ${allStrapiLocation.nodes.map((location) => {
               return `{
@@ -187,8 +186,8 @@ export const PaddleSEO = ({
             })}
             ],
             `
-                : ""
-            }
+            : ""
+          }
             "areaServed": {
               "@type": "GeoCircle",
               "geoMidpoint": {

package/src/{PaddleTestimonial.tsx → paddle-testimonial.tsx}

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { TestimonialTypes } from "./types/testimonial-types";
+import { TestimonialTypes } from "./types/paddle-testimonial-types";
 
 export const PaddleTestimonial = ({
   id,

package/src/{PaddleTestimonials.tsx → paddle-testimonials.tsx}

@@ -1,6 +1,6 @@
 import * as React from "react";
-import { PaddleTestimonial } from "./PaddleTestimonial";
-import { type TestimonialTypes } from "./types/testimonial-types";
+import { PaddleTestimonial } from "./paddle-testimonial";
+import { type TestimonialTypes } from "./types/paddle-testimonial-types";
 
 interface TestimonialsTypes {
   nodes: TestimonialTypes[];

package/src/{PaddleTextureBackgrounds.tsx → paddle-texture-backgrounds.tsx}

@@ -1,14 +1,14 @@
 import * as React from "react";
 import { GatsbyImage } from "gatsby-plugin-image";
-import type { GatsbyImageType } from "./types/gatsby-image-type";
+import type { PaddleGatsbyImageType } from "./types/paddle-gatsby-image-type";
 
 type textureTypes = {
-  baseOne: { image: GatsbyImageType };
-  baseTwo: { image: GatsbyImageType };
-  baseThree: { image: GatsbyImageType };
-  topOne: { image: GatsbyImageType };
-  topTwo: { image: GatsbyImageType };
-  topThree: { image: GatsbyImageType };
+  baseOne: { image: PaddleGatsbyImageType };
+  baseTwo: { image: PaddleGatsbyImageType };
+  baseThree: { image: PaddleGatsbyImageType };
+  topOne: { image: PaddleGatsbyImageType };
+  topTwo: { image: PaddleGatsbyImageType };
+  topThree: { image: PaddleGatsbyImageType };
 };
 export const PaddleTextureBackgrounds = ({ baseOne, baseTwo, baseThree, topOne, topTwo, topThree }: textureTypes) => {
 

package/src/{PaddleTicket.tsx → paddle-ticket.tsx}

@@ -1,9 +1,9 @@
 import * as React from "react";
 import { Link } from "gatsby";
 import { GatsbyImage } from "gatsby-plugin-image";
-import type { PaddleTicketTypes } from "./types/ticket-types";
-import { PaddleTime } from "./PaddleTime";
-import { PaddleBookNow } from "./PaddleBookNow";
+import type { PaddleTicketTypes } from "./types/paddle-ticket-types";
+import { PaddleTime } from "./paddle-time";
+import { PaddleBookNow } from "./paddle-book-now";
 
 export const PaddleTicket = ({
   ogimage,

package/src/types/paddle-book-now-types.ts

@@ -0,0 +1,6 @@
+export type PaddleBookNowTypes = {
+  peek_base: string;
+  strapiLocaleName: string;
+  specificName?: string;
+  specificLink?: string;
+};

package/src/types/paddle-brand-types.ts

@@ -0,0 +1,13 @@
+export type PaddleBrandType = {
+  id: string;
+  slug: string;
+  svg: string;
+  name: string;
+  retail: {
+    title: string;
+    slug: string;
+    sport: {
+      slug: string;
+    };
+  }[];
+};

package/src/types/{gatsby-image-type.ts → paddle-gatsby-image-type.ts}

@@ -1,6 +1,6 @@
 import type { IGatsbyImageData } from "gatsby-plugin-image";
 
-export interface GatsbyImageType {
+export interface PaddleGatsbyImageType {
   localFile: {
     childImageSharp: {
       gatsbyImageData: IGatsbyImageData;

package/src/types/paddle-location-deck-types.ts

@@ -1,4 +1,4 @@
-import type { PaddleLocationCardTypes } from "./location-card-types";
+import type { PaddleLocationCardTypes } from "./paddle-location-card-types";
 
 export type PaddleLocationDeckTypes = {
   background?: string;

package/src/types/paddle-pricing-chart-types.ts

@@ -0,0 +1,25 @@
+import * as React from "react";
+
+export type paddlePricingChartTypes = {
+  rentalRates: {
+    nodes: {
+      id: React.Key;
+      item: string;
+      oneHour: number;
+      threeHour: number;
+      fullDay: number;
+    }[];
+  };
+  rentalAddons: {
+    nodes: {
+      id: React.Key;
+      name: string;
+      single: number;
+      double: number;
+      sup: number;
+    }[];
+  };
+  book?: boolean;
+  peek_base: string;
+  strapiLocaleName: string;
+};

package/src/types/paddle-purchase-types.ts

@@ -1,4 +1,4 @@
-import type { GatsbyImageType } from "./gatsby-image-type";
+import type { PaddleGatsbyImageType } from "./paddle-gatsby-image-type";
 
 export type PaddlePurchaseTypes = {
   id: string;
@@ -11,7 +11,7 @@ export type PaddlePurchaseTypes = {
   capacity: number;
   demo: boolean;
   discount?: number;
-  cutout: GatsbyImageType;
+  cutout: PaddleGatsbyImageType;
   sport: {
     slug: string;
   };

package/src/types/paddle-testimonial-types.ts

@@ -0,0 +1,7 @@
+export type PaddleTestimonialTypes = {
+  id: string;
+  testimonial: string;
+  sign: string;
+  customer: string;
+  location: string;
+};

package/src/types/{ticket-types.ts → paddle-ticket-types.ts}

@@ -1,11 +1,9 @@
-import type { IGatsbyImageData } from "gatsby-plugin-image";
+import type { PaddleGatsbyImageType } from "./paddle-gatsby-image-type";
 
 export type PaddleTicketTypes = {
   id: React.Key;
-  ogimage: {
-    localFile: { childImageSharp: { gatsbyImageData: IGatsbyImageData } };
-    alternativeText?: string;
-  };
+  ogimage: PaddleGatsbyImageType;
+  image: PaddleGatsbyImageType;
   slug: string;
   name: string;
   start?: string;

package/src/PaddleBookNow.tsx

@@ -1,18 +0,0 @@
-import * as React from "react"
-
-interface BookNowTypes {
-  peek_base: string
-  strapiLocaleName: string
-  specificName?: string
-  specificLink?: string
-}
-export const PaddleBookNow = ({ peek_base, strapiLocaleName, specificName, specificLink }: BookNowTypes) =>
-  <a
-    href={specificLink || peek_base}
-    rel="noopener noreferrer"
-    className="book-now"
-    title={`Book now ${specificLink && <> {specificLink} </>} with ${strapiLocaleName} kayak and paddleboard`}
-  >
-    {specificName && (<>{specificName} <br /></>)}
-    BOOK NOW
-  </a>

package/src/types/testimonial-types.ts

@@ -1,7 +0,0 @@
-export type TestimonialTypes = {
-    id: string;
-    testimonial: string;
-    sign: string;
-    customer: string;
-    location: string;
-}