@rileybathurst/paddle 0.0.125 → 1.0.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rileybathurst/paddle",
   "private": false,
-  "version": "0.0.125",
+  "version": "1.0.1",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -13,36 +13,34 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
-    "color-cards": "^1.0.15",
-    "gatsby": "^5.13.6",
-    "gatsby-plugin-image": "^3.13.1",
-    "react": "^18.2.0",
-    "react-aria-components": "^1.2.1",
-    "react-dom": "^18.2.0",
-    "react-markdown": "^9.0.1"
+    "color-cards": "^1.0.18",
+    "gatsby": "^5.14.3",
+    "gatsby-plugin-image": "^3.14.0",
+    "postcss-dark-theme-class": "^1.3.0",
+    "react": "^18.3.1",
+    "react-aria-components": "^1.10.0",
+    "react-dom": "^18.3.1",
+    "react-markdown": "^10.1.0"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "^1.3.4",
-    "@faker-js/faker": "^8.4.1",
-    "@storybook/addon-essentials": "^8.0.10",
-    "@storybook/addon-interactions": "^8.0.10",
-    "@storybook/addon-links": "^8.0.10",
-    "@storybook/blocks": "^8.0.10",
-    "@storybook/react": "^8.0.10",
-    "@storybook/react-vite": "^8.0.10",
-    "@storybook/test": "^8.0.10",
-    "@types/react": "^18.2.66",
-    "@types/react-dom": "^18.2.22",
-    "@typescript-eslint/eslint-plugin": "^7.2.0",
-    "@typescript-eslint/parser": "^7.2.0",
-    "@vitejs/plugin-react": "^4.2.1",
-    "eslint": "^8.57.0",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-react-refresh": "^0.4.6",
-    "eslint-plugin-storybook": "^0.8.0",
-    "storybook": "^8.0.10",
-    "typescript": "^5.2.2",
-    "vite": "^5.2.0"
+    "@chromatic-com/storybook": "^4.0.0",
+    "@faker-js/faker": "^9.8.0",
+    "@storybook/addon-docs": "^9.0.11",
+    "@storybook/addon-links": "^9.0.11",
+    "@storybook/addon-themes": "^9.0.11",
+    "@storybook/react-vite": "^9.0.11",
+    "@types/react": "^19.1.6",
+    "@types/react-dom": "^19.1.6",
+    "@typescript-eslint/eslint-plugin": "^8.33.1",
+    "@typescript-eslint/parser": "^8.33.1",
+    "@vitejs/plugin-react": "^4.5.1",
+    "eslint": "^9.28.0",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-refresh": "^0.4.20",
+    "eslint-plugin-storybook": "^9.0.11",
+    "storybook": "^9.0.11",
+    "typescript": "^5.8.3",
+    "vite": "^6.3.5"
   },
   "description": "building blocks",
   "main": "src/index.tsx",
@@ -52,5 +50,8 @@
   "files": [
     "src/*",
     "!src/stories"
-  ]
+  ],
+  "overrides": {
+    "storybook": "$storybook"
+  }
 }

package/src/PaddleComposition.tsx

@@ -1,8 +1,7 @@
+// TODO: this isnt finished but hasnt been implemented yet
 import * as React from "react"
-// ! this isnt finished it wont have faker when its done
 import { faker } from '@faker-js/faker';
 
-
 interface CompositionTypes {
   sport?: string;
 }

package/src/PaddleLocationCard.tsx

@@ -39,6 +39,7 @@ function Season({ name, season_start, season_end, opening_time, closing_time, of
       )
     }
 
+    // outside of season
     return (
       <div>
         <p>We&apos;re closed for the season</p>
@@ -52,19 +53,17 @@ function Season({ name, season_start, season_end, opening_time, closing_time, of
         ) : null}
 
         {offSeasonDetails ? (
-          <p>
-            {offSeasonDetails}
-          </p>
+          <p>{offSeasonDetails}</p>
         ) : null}
       </div>
     )
   }
 
+  // no season defaults to off season
+  // TODO: add some enum error messages here for if this is allowed to not have a season
   return (
     <div>
-      <p>
-        We&apos;re closed for the season
-      </p>
+      <p>We&apos;re closed for the season</p>
       {offSeasonDetails ? (
         <p>{offSeasonDetails}</p>
       ) : null}
@@ -126,7 +125,16 @@ function Content({ svg, name, address, description, opening_time, closing_time,
 
           (<>
             <h3 className="elbrus">{name}</h3>
-            <Markdown className="react-markdown">
+            
+            <Markdown 
+              components={{
+                div: ({ children, ...props }) => (
+                  <div className="react-markdown" {...props}>
+                    {children}
+                  </div>
+                )
+              }}
+            >
               {address.data.address}
             </Markdown>
           </>)}
@@ -134,7 +142,6 @@ function Content({ svg, name, address, description, opening_time, closing_time,
       </div>
 
       <div>
-
         {opening_time && closing_time ? (
           <Season
             season_start={season_start}
@@ -145,9 +152,11 @@ function Content({ svg, name, address, description, opening_time, closing_time,
             offSeasonDetails={offSeasonDetails}
           />
         ) : (
-          <Markdown className="react-markdown" >
+          <div className="react-markdown">
+          <Markdown>
             {description.data.description}
           </Markdown>
+          </div>
         )}
       </div>
     </>
@@ -156,6 +165,8 @@ function Content({ svg, name, address, description, opening_time, closing_time,
 
 export function PaddleLocationCard({ svg, name, link, address, description, opening_time, closing_time, background, streetAddress, addressLocality, addressRegion, postalCode, commonName, season_start, season_end, phone, offSeasonDetails }: LocationCardTypes) {
 
+  const phoneNumber = Number(phone);
+
   if (link.includes('http')) {
     return (
       <div className="location-wrapper">
@@ -186,7 +197,7 @@ export function PaddleLocationCard({ svg, name, link, address, description, open
 
           />
         </a>
-        {name === "On Water Rental" && phone ? <Phone phone={phone} /> : null}
+        {name === "On Water Rental" && phone ? <Phone phone={phoneNumber} /> : null}
       </div>
     )
   }
@@ -217,7 +228,7 @@ export function PaddleLocationCard({ svg, name, link, address, description, open
 
         />
       </Link>
-      {name === "On Water Rental" && phone ? <Phone phone={phone} /> : null}
+      {name === "On Water Rental" && phone ? <Phone phone={phoneNumber} /> : null}
     </div>
   )
 }

package/src/PaddleLocationDeck.tsx

@@ -4,7 +4,7 @@ import type { LocationCardTypes } from "./types/location-card-types";
 
 interface LocationDeckTypes {
   background?: string;
-  season_start?: string;
+  season_start?: string; // ? should this be optional? it created a problem with tours
   season_end?: string;
   phone?: string;
   nodes: LocationCardTypes[];

package/src/PaddleSEO.tsx

@@ -54,7 +54,9 @@ type SEOtypes = {
   strapiLocale: {
     name: string;
     topbar: {
-      topbar: string;
+      data: {
+        topbar: string;
+      };
     };
     url: string;
     themeColor: string;

package/src/PaddleTicket.tsx

@@ -12,6 +12,7 @@ export function PaddleTicket({ ogimage, slug, name, start, finish, duration, tim
     duration: duration,
     timeframe: timeframe,
     allStrapiSunsetTourTime: allStrapiSunsetTourTime,
+    allStrapiMoonlightTourDateTime: { nodes: [] }, // Provide an empty nodes array or the correct data as needed
     slug: slug
   });
 

package/src/PaddleTime.tsx

@@ -57,7 +57,24 @@ export const PaddleTime = ({ start, finish, duration, timeframe, slug, allStrapi
     }
   }
 
+  if (duration) {
+    if (duration > 90) {
+      const hours = Math.floor(duration / 60);
+      const mins = duration % 60;
 
+      return {
+        entry: `${hours}${hairSpace}hrs ${mins > 0 ? `${mins}${hairSpace}mins` : ''} `,
+        value: "duration"
+      }
+    }
+
+    return {
+      entry: `${duration}${hairSpace} mins`,
+      value: "duration"
+    }
+  }
+
+  // this must be last as it has no way to be removed in strapi
   if (start && finish) {
     const startHours = sunsetStartTime ? sunsetStartTime.split(':')[0] : start.split(':')[0];
     let startHoursInt: number = Number.parseInt(startHours);
@@ -87,23 +104,6 @@ export const PaddleTime = ({ start, finish, duration, timeframe, slug, allStrapi
     }
   }
 
-  if (duration) {
-    if (duration > 90) {
-      const hours = Math.floor(duration / 60);
-      const mins = duration % 60;
-
-      return {
-        entry: `${hours}${hairSpace}hrs ${mins > 0 ? `${mins}${hairSpace}mins` : ''} `,
-        value: "duration"
-      }
-    }
-
-    return {
-      entry: `${duration}${hairSpace} mins`,
-      value: "duration"
-    }
-  }
-
   return {
     entry: null,
     value: null

package/src/index.tsx

@@ -1,9 +1,3 @@
-// eslint-disable-next-line react-refresh/only-export-components
-
-// TODO: these dont work
-// Fragments
-// export * from "./testimonial-fragment";
-
 // Atoms
 export * from "./PaddleBookNow";
 export * from "./PaddleTime";
@@ -29,10 +23,10 @@ export * from "./PaddleTestimonials";
 
 // Pages
 
-// 
+// SEO
 export * from "./PaddleSEO";
 
-// TODO: test
+// TODO: test v.1.1
 // Types
 export * from "./types/ticket-types";
 export * from "./types/location-card-types";

package/src/phone.tsx

@@ -4,7 +4,8 @@ interface FormatPhoneNumberTypes {
   phoneNumberString: number;
 }
 function FormatPhoneNumber({ phoneNumberString }: FormatPhoneNumberTypes) {
-  const cleaned = `${phoneNumberString}`.replace(/\D/g, '');
+  const phoneNumber = String(phoneNumberString);
+  const cleaned = `${phoneNumber}`.replace(/\D/g, '');
   const match = cleaned.match(/^(\d{3})(\d{3})(\d{4})$/);
   if (match) {
     return `(${match[1]}) ${match[2]}-${match[3]}`;

package/src/styles/app.css

@@ -4,14 +4,20 @@
 
 @import "variables";
 @import "body";
+@import "typography";
+@import "nav";
 @import "layout";
 @import "cards";
 @import "media";
 @import "color";
-@import "typography";
+@import "panels";
 @import "links";
 @import "buttons";
 @import "lists";
 @import "tables";
 @import "visibility";
 @import "a11y";
+
+/* TODO: v1.2 safari is showing some unuised css results lets stay away from that for a minute and try a little chrome maybe theres a bug */
+
+@import "astro";

package/src/styles/astro.css

@@ -0,0 +1,30 @@
+/* straight pull for menu so its going to take a bunch of work but this keeps everything sperate */
+
+.menu-button {
+  background-color: hotpink !important;
+
+  /* ? I might do this in js as well as a secondary so I can use  */
+  @media (min-width: 20rem) {
+    background-color: blue !important;
+    display: none;
+  }
+}
+
+#menu-content {
+  /* background-color: hotpink; */
+  @media (min-width: 20rem) {
+    background-color: lime;
+  }
+
+  .nav-items {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+
+    /* @media (min-width: 20rem) {
+      flex-direction: row;
+    } */
+  }
+}

package/src/styles/buttons.css

@@ -2,23 +2,30 @@
 /* #BUTTONS */
 /*------------------------------------*/
 
-/* TODO: variables */
 button,
 .button,
 .book-now {
-  background: none;
   border-radius: var(--card-radius);
   padding: var(--kosciuszko) var(--vinson);
   font-size: var(--vinson);
   cursor: pointer;
   margin-block-end: var(--elbrus);
   transition: var(--slow);
-  display: block;
+  display: inline-block;
   line-height: var(--kilimanjaro);
   text-decoration: none;
   width: max-content;
-  border: 1px solid;
+  text-align: center;
   box-shadow: var(--penumbra);
+  background-color: var(--neutral-200);
+  border: 1px solid var(--neutral-100);
+
+  @media (prefers-color-scheme: dark) {
+    /* background-color: var(--neutral-600); not enough*/
+    background-color: var(--neutral-600);
+    border-color: var(--neutral-500);
+    color: var(--neutral-100);
+  }
 }
 
 button:hover,
@@ -26,17 +33,184 @@ button:hover,
 /* below is for the storyboard showcase */
 .button__hover {
   box-shadow: var(--antumbra);
+
+  @media (prefers-color-scheme: dark) {
+    background-color: var(--neutral-500);
+    border-color: var(--neutral-500);
+    color: var(--neutral-200);
+  }
 }
 
 .button__active,
+.button:active,
 button:active {
   box-shadow: var(--umbra);
+
+  @media (prefers-color-scheme: dark) {
+    background-color: var(--neutral-400);
+    border-color: var(--neutral-200);
+    color: var(--neutral-500);
+  }
 }
 
 .book-now {
-  margin-block-start: var(--kosciuszko);
-  text-align: center;
-  display: inline-block; /* same as a button */
+  margin-block-start: var(
+    --kosciuszko
+  ); /* why is this different than a regular button */
+  background-color: var(--neutral-800);
+  border-color: var(--neutral-700);
+  color: var(--neutral-300);
+
+  @media (prefers-color-scheme: dark) {
+    background-color: var(--neutral-200);
+    border-color: var(--neutral-100);
+    color: var(--neutral-800);
+  }
+}
+
+.book-now:hover,
+.book-now__hover {
+  background-color: var(--neutral-500);
+  border-color: var(--neutral-600);
+  color: var(--neutral-200);
+
+  @media (prefers-color-scheme: dark) {
+    background-color: var(--neutral-300);
+    border-color: var(--neutral-200);
+    color: var(--neutral-700);
+  }
+}
+
+.book-now:active,
+.book-now__active {
+  background-color: var(--neutral-400);
+  border-color: var(--neutral-400);
+  color: var(--neutral-100);
+
+  @media (prefers-color-scheme: dark) {
+    background-color: var(--neutral-300);
+    border-color: var(--neutral-300);
+    color: var(--neutral-600);
+  }
+}
+
+/*------------------------------------*/
+/* #TAHOE CITY */
+/*------------------------------------*/
+
+.tahoe-city {
+  button,
+  .button {
+    /* * reverts to clean dark scheme */
+    @media (prefers-color-scheme: light) {
+      background-color: var(--sand-200);
+      border-color: var(--sand-100);
+      color: var(--neutral-600);
+    }
+  }
+
+  button:hover,
+  .button:hover,
+  .button__hover {
+    @media (prefers-color-scheme: light) {
+      background-color: var(--sand-300);
+      border-color: var(--sand-200);
+      color: var(--neutral-700);
+    }
+  }
+
+  button:active,
+  .button:active,
+  .button__active {
+    @media (prefers-color-scheme: light) {
+      background-color: var(--sand-400);
+      border-color: var(--sand-300);
+      color: var(--neutral-800);
+    }
+  }
+
+  /* BOOK NOW */
+  .book-now {
+    background-color: var(--tanager-200);
+    border-color: var(--tanager-100);
+    color: var(--neutral-100);
+  }
+
+  @media (prefers-color-scheme: dark) {
+  }
+
+  .book-now:hover,
+  .book-now__hover {
+    background-color: var(--tanager-300);
+    border-color: var(--tanager-200);
+    color: var(--neutral-200);
+  }
+
+  .book-now:active,
+  .book-now__active,
+  button:active {
+    background-color: var(--tanager-400);
+    border-color: var(--tanager-300);
+    color: var(--neutral-300);
+  }
+}
+
+/*------------------------------------*/
+/* #SOUTH TAHOE */
+/*------------------------------------*/
+
+.south-tahoe {
+  button,
+  .button {
+    background-color: var(--lake-200);
+    border-color: var(--lake-100);
+    color: var(--cloud-color);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    button,
+    .button {
+      background-color: var(--lake-600);
+      border-color: var(--lake-700);
+      color: var(--lake-100);
+    }
+  }
+
+  button:hover,
+  .button__hover,
+  .button:hover {
+    background-color: var(--lake-400);
+    border-color: var(--lake-400);
+    color: var(--lake-700);
+  }
+
+  .button__active {
+    background-color: var(--lake-400);
+    border-color: var(--lake-500);
+    /* this goes passed the 400 / 500 dark light split Im not sure if I want to change it */
+    /* maybe it needs a very occasional 450 */
+    color: var(--lake-800);
+  }
+
+  .book-now {
+    background-color: var(--lake-200);
+    border-color: var(--lake-100);
+    color: var(--lake-600);
+  }
+
+  .book-now:hover,
+  .book-now__hover {
+    background-color: var(--lake-300);
+    border-color: var(--lake-200);
+    color: var(--lake-700);
+  }
+
+  .book-now:active,
+  .book-now__active {
+    background-color: var(--lake-400);
+    border-color: var(--lake-300);
+    color: var(--lake-800);
+  }
 }
 
 /*------------------*/
@@ -49,17 +223,14 @@ menu button {
 
 /*------------------------------------*/
 
-.button__double {
+.multi_button {
   display: flex;
   align-items: center;
   gap: var(--denali);
 }
 
-.buttonGroup {
-  display: flex;
-  flex-flow: row wrap;
-  gap: var(--vinson);
-  margin-block-end: var(--baseline);
+.multi_button-center {
+  justify-content: center;
 }
 
 /*------------------------------------*/