@rileybathurst/paddle 1.0.0 → 1.0.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rileybathurst/paddle",
   "private": false,
-  "version": "1.0.0",
+  "version": "1.0.2",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -16,27 +16,29 @@
     "color-cards": "^1.0.18",
     "gatsby": "^5.14.3",
     "gatsby-plugin-image": "^3.14.0",
-    "react": "^18.2.0",
-    "react-aria-components": "^1.9.0",
-    "react-dom": "^18.2.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": "^4.0.0",
     "@faker-js/faker": "^9.8.0",
-    "@storybook/addon-docs": "^9.0.3",
-    "@storybook/addon-links": "^9.0.3",
-    "@storybook/react-vite": "^9.0.3",
+    "@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.5",
-    "@typescript-eslint/eslint-plugin": "^8.33.0",
-    "@typescript-eslint/parser": "^8.33.0",
-    "@vitejs/plugin-react": "^4.5.0",
+    "@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.6",
-    "eslint-plugin-storybook": "^9.0.3",
-    "storybook": "^9.0.3",
+    "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"
   },
@@ -48,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,8 +125,16 @@ function Content({ svg, name, address, description, opening_time, closing_time,
 
           (<>
             <h3 className="elbrus">{name}</h3>
-            <Markdown>
-              {/* // ! removed for testing className="react-markdown" */}
+            
+            <Markdown 
+              components={{
+                div: ({ children, ...props }) => (
+                  <div className="react-markdown" {...props}>
+                    {children}
+                  </div>
+                )
+              }}
+            >
               {address.data.address}
             </Markdown>
           </>)}
@@ -135,7 +142,6 @@ function Content({ svg, name, address, description, opening_time, closing_time,
       </div>
 
       <div>
-
         {opening_time && closing_time ? (
           <Season
             season_start={season_start}
@@ -146,10 +152,11 @@ function Content({ svg, name, address, description, opening_time, closing_time,
             offSeasonDetails={offSeasonDetails}
           />
         ) : (
+          <div className="react-markdown">
           <Markdown>
-            {/* // ! removed for testing className="react-markdown" */}
             {description.data.description}
           </Markdown>
+          </div>
         )}
       </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/PaddleTestimonial.tsx

@@ -0,0 +1,16 @@
+import * as React from "react"
+import { TestimonialTypes } from "./types/testimonial-types"
+
+export function PaddleTestimonial({ id, testimonial, customer, sign, location }: TestimonialTypes) {
+  return (
+        <li key={id}>
+          <p className='elbrus'>
+            <span className='denali font-serif'>&ldquo;</span>
+            {testimonial}
+            <span className='denali font-serif'>&rdquo;</span>
+          </p>
+          <p>{sign} {customer}</p>
+          <p className='kosciuszko'>{location}</p>
+        </li>
+  )
+}

package/src/PaddleTestimonials.tsx

@@ -1,23 +1,15 @@
 import * as React from "react"
+import { PaddleTestimonial } from "./PaddleTestimonial"
+import { type TestimonialTypes } from "./types/testimonial-types"
 
 interface TestimonialsTypes {
-  nodes: {
-    id: string;
-    testimonial: string;
-    sign: string;
-    customer: string;
-    location: string;
-  }[];
+  nodes: TestimonialTypes[];
 }
 export function PaddleTestimonials({ nodes }: TestimonialsTypes) {
   return (
     <ul className='testimonials condor'>
       {nodes.map((testimonial) => (
-        <li key={testimonial.id}>
-          <p className='elbrus'><span className='denali font-serif'>&ldquo;</span>{testimonial.testimonial}<span className='denali font-serif'>&rdquo;</span></p>
-          <p>{testimonial.sign} {testimonial.customer}</p>
-          <p className='kosciuszko'>{testimonial.location}</p>
-        </li>
+        <PaddleTestimonial key={testimonial.id} {...testimonial} />
       ))}
     </ul>
   )

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";
@@ -18,21 +12,20 @@ export * from "./PaddleTicket";
 export * from "./PaddleSunsetTourTimes";
 export * from "./PaddleTopBar";
 export * from "./PaddleSpecs";
+export * from "./PaddleTestimonial";
 
 // Organisms
 export * from "./PaddleLocationDeck";
-
-// Test a function
 export * from "./PaddleTestimonials";
 
 // Templates
 
 // 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/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;
 }
 
 /*------------------------------------*/

package/src/styles/cards.css

@@ -9,9 +9,8 @@
   grid-template-columns: repeat(auto-fill, minmax(var(--condor), 1fr));
 }
 
-/* TODO: needs sub-grid */
-.card,
-.ticket {
+/* TODO: v1.2 I think this may have already be removed by check it properly before deleteing it card is becoming purchase and splitting more */
+.card {
   padding: 0;
   display: flex;
   flex-direction: column;
@@ -72,16 +71,12 @@
     text-transform: uppercase;
   }
 
-  p {
-    margin-inline: var(--kosciuszko);
-  }
-
   hr {
     margin-inline: var(--kosciuszko);
   }
 
   img {
-    max-width: 100%;
+    width: 100%;
   }
 
   .card__details {
@@ -134,7 +129,7 @@
     text-decoration: underline;
   }
 
-  /* TODO: this could use more */
+  /* TODO: v1.2 this could use more */
   img {
     filter: brightness(80%);
   }
@@ -159,6 +154,28 @@
   }
 }
 
+.ticket img {
+  aspect-ratio: 16 / 9;
+}
+
+.south-tahoe .ticket {
+  background-color: var(--lake-200);
+  border: 1px solid var(--lake-300);
+  box-shadow: var(--penumbra);
+  color: var(--lake-600);
+
+  @media (prefers-color-scheme: dark) {
+    background-color: var(--lake-700);
+    border-color: var(--lake-600);
+    /* box-shadow: var(--penumbra--dark); */
+    color: var(--lake-200);
+
+    a:not(.book-now) {
+      color: var(--lake-200);
+    }
+  }
+}
+
 /*------------------*/
 /* #RETAIL LOGO */
 /*------------------*/
@@ -184,3 +201,68 @@
     margin-block-end: var(--kosciuszko);
   }
 }
+
+/*------------------------------------*/
+/* #TICKET */
+/*------------------------------------*/
+
+.flight {
+  margin-block-end: var(--aconcagua);
+
+  display: grid;
+
+  /* * iPhone size breaks without this */
+  grid-template-columns: 1fr;
+
+  /* * guess and check */
+  @media (min-width: 29rem) {
+    grid-template-columns: repeat(auto-fill, minmax(var(--condor), 1fr));
+  }
+}
+
+.flight:empty {
+  display: none;
+}
+
+.ticket {
+  /* display: flex; */
+  width: 100%;
+  background-color: var(--neutral-100);
+  border: 1px solid white;
+
+  @media (prefers-color-scheme: dark) {
+    background-color: var(--neutral-800);
+    border-color: var(--neutral-600);
+  }
+
+  img {
+    width: 100%;
+  }
+
+  > a {
+    display: block;
+  }
+
+  p {
+    margin-inline: var(--vinson);
+  }
+
+  .ticket__header,
+  .ticket__money,
+  .ticket__specs {
+    display: flex;
+    flex-flow: row wrap;
+    justify-content: space-between;
+    align-items: baseline;
+    gap: var(--vinson);
+  }
+
+  .ticket__header,
+  .ticket__specs {
+    padding-inline: var(--vinson);
+  }
+}
+
+/* .south-tahoe .ticket {
+}
+ */