@rileybathurst/paddle 1.3.9 → 1.4.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rileybathurst/paddle",
   "private": false,
-  "version": "1.3.9",
+  "version": "1.4.0",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -25,13 +25,13 @@
   },
   "devDependencies": {
     "@biomejs/biome": "2.0.2",
-    "@chromatic-com/storybook": "^4.0.0",
+    "@chromatic-com/storybook": "^4.0.1",
     "@faker-js/faker": "^9.8.0",
-    "@storybook/addon-a11y": "^9.0.13",
-    "@storybook/addon-docs": "^9.0.11",
-    "@storybook/addon-links": "^9.0.11",
-    "@storybook/addon-themes": "^9.0.11",
-    "@storybook/react-vite": "^9.0.11",
+    "@storybook/addon-a11y": "^9.1.0",
+    "@storybook/addon-docs": "^9.1.0",
+    "@storybook/addon-links": "^9.1.0",
+    "@storybook/addon-themes": "^9.1.0",
+    "@storybook/react-vite": "^9.1.0",
     "@types/react": "^19.1.6",
     "@types/react-dom": "^19.1.6",
     "@typescript-eslint/eslint-plugin": "^8.33.1",
@@ -40,8 +40,8 @@
     "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",
+    "eslint-plugin-storybook": "^9.1.0",
+    "storybook": "^9.1.0",
     "typescript": "^5.8.3",
     "vite": "^6.3.5"
   },

package/src/paddle-compare.tsx

@@ -0,0 +1,267 @@
+// ! this is not ready
+
+import React, { useState } from 'react';
+
+import Time from "../../components/time";
+import BookNow from '../../components/peek/book-now';
+import { PaddleTime } from './paddle-time';
+import { PaddleBookNow } from './paddle-book-now';
+
+const Option = (props) => {
+  if (props.name === props.current) {
+    return (
+      <option selected key={props.key}>{props.name}</option>
+    )
+  }
+
+  if (props.name === props.other) {
+    return (
+      <option disabled key={props.key}>{props.name}</option>
+    )
+  }
+
+  return (
+    <option key={props.key}>{props.name}</option>
+  )
+}
+
+const first = (e) => {
+  setTour1(e.target.value);
+  return null;
+}
+
+const second = (e) => {
+  setTour2(e.target.value);
+  return null;
+}
+
+const Details1 = (props) => {
+  props.set.forEach(element => {
+    if (element.name === props.show) {
+      setLink1(element.slug);
+      setSport1(element.sport);
+      setDuration1(element.duration);
+      setStart1(element.start);
+      setFinish1(element.finish);
+      setFitness1(element.fitness);
+      setLocation1(element.location);
+      setExcerpt1(element.excerpt);
+      setMinimum1(element.minimum);
+      setPrice1(element.price);
+      setPeeks1(element.peek);
+    }
+  });
+  return null;
+}
+
+const Details2 = (props) => {
+  props.set.forEach(element => {
+    if (element.name === props.show) {
+      setLink2(element.slug);
+      setSport2(element.sport);
+      setDuration2(element.duration);
+      setStart2(element.start);
+      setFinish2(element.finish);
+      setFitness2(element.fitness);
+      setLocation2(element.location);
+      setExcerpt2(element.excerpt);
+      setMinimum2(element.minimum);
+      setPrice2(element.price);
+      setPeeks2(element.peek);
+    }
+  });
+  return null;
+}
+
+const CompareDetails = ({ key, title, link, sport, duration, start, finish, fitness, location, excerpt, minimum, price, peeks }) => {
+  return (
+    <section>
+      {/* <select
+        name="tour1"
+        id={key}
+        className="comparesheet_select"
+        aria-label="Select first tour or lesson"
+      >
+        {Array.from({ length: faker.number.int({ min: 1, max: 10 }) }).map(() => (
+          <option
+            key={faker.string.uuid()}
+            value={faker.food.dish()}
+          >
+            {faker.food.dish()}
+          </option>
+        ))}
+      </select> */}
+      <h2 className="kilimanjaro">
+        <a href={link}>{title}</a>
+      </h2>
+
+      <h4 className="capitalize">{sport}</h4>
+
+      <p>
+        <PaddleTime
+          start={start}
+          finish={finish}
+          duration={duration}
+          timeframe={timeframe}
+        />
+      </p>
+
+      <p className="capitalize">
+        {fitness} <span className="show-below__vulture">&nbsp;fitness</span>
+      </p>
+
+      <p>
+        <span className="show-below__vulture">Starts at&nbsp;</span>
+        {location}
+      </p>
+      <p>{excerpt}</p>
+      <p>
+        {minimum} <span className="show-below__vulture">&nbsp;people minimum</span>
+      </p>
+      <p>
+        ${price}
+      </p>
+
+      <PaddleBookNow
+        peek_base={peeks1}
+        strapiLocaleName={strapiLocaleName}
+        specificLink={peeks1}
+      />
+    </section >
+  )
+}
+
+type PaddleCompareTypes = {
+  tours: {
+    id: number;
+    name: string;
+    slug: string;
+    sport: string;
+    duration?: string;
+    timeframe?: string;
+    start?: string;
+    finish?: string;
+    fitness?: string;
+    location: string;
+    excerpt: string;
+    minimum: number;
+    price: number;
+    peek?: string;
+  }[];
+  strapiLocaleName: string;
+  peek_base: string;
+};
+export const PaddleCompare = ({ tours, strapiLocaleName, peek_base }: PaddleCompareTypes) => {
+
+  const [id1, setID1] = useState(tours[0].id);
+  const [id2, setID2] = useState(tours[1].id);
+
+  const [tour1, setTour1] = useState(tours[0].name);
+  const [tour2, setTour2] = useState(tours[1].name);
+
+  const [link1, setLink1] = useState(tours[0].slug);
+  const [link2, setLink2] = useState(tours[1].slug);
+
+  const [sport1, setSport1] = useState(tours[0].sport);
+  const [sport2, setSport2] = useState(tours[1].sport);
+
+  const [duration1, setDuration1] = useState(tours[0].duration || 'not set');
+  const [duration2, setDuration2] = useState(tours[1].duration || 'not set');
+
+  const [start1, setStart1] = useState(tours[0].start || 'not set');
+  const [start2, setStart2] = useState(tours[1].start || 'not set');
+
+  const [finish1, setFinish1] = useState(tours[0].finish || 'not set');
+  const [finish2, setFinish2] = useState(tours[1].finish || 'not set');
+
+  const [excerpt1, setExcerpt1] = useState(tours[0].excerpt || 'not set');
+  const [excerpt2, setExcerpt2] = useState(tours[1].excerpt || 'not set');
+
+  const [minimum1, setMinimum1] = useState(tours[0].minimum || 0);
+  const [minimum2, setMinimum2] = useState(tours[1].minimum || 0);
+
+  const [price1, setPrice1] = useState(tours[0].price || 0);
+  const [price2, setPrice2] = useState(tours[1].price || 0);
+
+  const [peeks1, setPeeks1] = useState(tours[0].peek || 'not set');
+  const [peeks2, setPeeks2] = useState(tours[1].peek || 'not set');
+
+  const [fitness1, setFitness1] = useState(tours[0].fitness || 'fitness');
+  const [fitness2, setFitness2] = useState(tours[1].fitness || 'fitness');
+
+  return (
+    <>
+      <div className='comparesheet'>
+        <div className='comparesheet_titles'>
+          <div className="comparesheet__transparent">Compare</div>
+          <h3 className='kilimanjaro comparesheet_freeze'>
+            Tour or<br />
+            Lesson
+          </h3>
+          <p>Sport</p>
+          <p>Time</p>
+          <p>Fitness</p>
+          <p>Location</p>
+          <p>About</p>
+          <p>Minimum People</p>
+          <p>Price</p>
+          <p className='button-drop'>Book Now</p>
+        </div>
+
+        <select
+          name="tour1"
+          // id={id1}
+          className="comparesheet_select"
+          aria-label="Select first tour or lesson"
+        >
+          {tours.map((tour) => (
+            <option
+              key={tour.id}
+              value={tour.id}
+            >
+              {tour.name}
+            </option>
+          ))}
+        </select>
+
+        <CompareDetails
+          key={id1}
+          title={tour1}
+          link={link1}
+          sport={sport1}
+          duration={duration1}
+          timeframe={timeframe1}
+          start={start1}
+          finish={finish1}
+          location={strapiLocaleName}
+          excerpt={excerpt1}
+          minimum={minimum1}
+          price={price1}
+          peeks={peeks1}
+          fitness={fitness1}
+          strapiLocaleName={strapiLocaleName}
+          peek_base={peek_base}
+        />
+        <CompareDetails
+          key={id2}
+          title={tour2}
+          link={link2}
+          sport={sport2}
+          duration={duration2}
+          timeframe={timeframe2}
+          start={start2}
+          finish={finish2}
+          location={strapiLocaleName}
+          excerpt={excerpt2}
+          minimum={minimum2}
+          price={price2}
+          peeks={peeks2}
+          fitness={fitness2}
+          strapiLocaleName={strapiLocaleName}
+          peek_base={peek_base}
+        />
+
+      </div>
+    </>
+  )
+}

package/src/paddle-pricing-chart.tsx

@@ -1,61 +1,53 @@
 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);
+  // Split the text by hyphens and spaces, keeping the delimiters
+  const parts = text.split(/([- ])/g);
 
   return (
-    <h4 dangerouslySetInnerHTML={{ __html: newStr }} />
+    <h4>
+      {parts.map((part) =>
+        part === '-' || part === ' ' ? <br key={part} /> : part
+      )}
+    </h4>
   );
 }
 
-export const PaddlePricingChart = ({ rentalRates, rentalAddons, book, peek_base, strapiLocaleName }: paddlePricingChartTypes) => {
+export const PaddlePricingChart = ({ rentalRates, rentalAddons }: 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>
+    <div className="pricing-chart">
+      <div className="column">
+        <h4 className="title">
+          <Link to="/rentals">Rental<br />Rates</Link>
+        </h4>
+        <p>1 Hour</p>
+        <p>3 Hours</p>
+        <p>Full Day</p>
+      </div>
 
-          {rentalRates.nodes.map((rate) => (
-            <div key={rate.id} className="row">
-              <LineBreaker text={rate.item} />
-              <p>{rate.oneHour}</p>
-              <p>{rate.threeHour}</p>
-              <p>{rate.fullDay}</p>
-            </div>
-          ))}
+      {rentalRates.nodes.map((rate) => (
+        <div key={rate.id} className="column">
+          <LineBreaker text={rate.item} />
+          <p>{rate.oneHour}</p>
+          <p>{rate.threeHour}</p>
+          <p>{rate.fullDay}</p>
         </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}
-        />
+      {rentalAddons && rentalAddons.nodes.length > 0 ? (
+        <div className="column">
+          {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>
   )
 }

package/src/paddle-top-bar.tsx

@@ -1,4 +1,5 @@
 import * as React from "react";
+import Markdown from "react-markdown";
 
 // TODO this would be nice to be able to close but I dont have it right yet
 
@@ -49,7 +50,9 @@ export const PaddleTopBar = ({ strapiLocale }: PaddleTopBarTypes) => {
           <span className="rain-check-reason">We're closed today due to {strapiLocale.RainCheckReason}</span>
         </p>
       ) : (
-        <p>{strapiLocale.topbar.data.topbar}</p>
+        <Markdown>
+          {strapiLocale.topbar.data.topbar}
+        </Markdown>
       )
       }
     </div>

package/src/styles/layout.css

@@ -375,8 +375,6 @@ header {
   }
 }
 
-.location:not(:last-child)
-
 /*------------------*/
 /* #COMPOSITION */
 /*------------------*/
@@ -522,3 +520,110 @@ header {
     margin-inline: auto;
   }
 }
+
+/*------------------*/
+/* #COMPARE TABLE */
+/*------------------*/
+
+/* * test this in chrome, it doesnt have subgrid yet */
+.comparesheet {
+  display: grid;
+  gap: 1rem;
+  grid-template-columns: 1fr 1fr;
+
+  @media (min-width: 30rem) {
+    grid-template-columns: auto 1fr 1fr;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  p {
+    margin-block-end: 0;
+  }
+
+  > * {
+    grid-row: 1/11;
+    display: grid;
+    grid-template-rows: subgrid;
+    gap: 1rem;
+    /* border-inline-end: 1px solid var(--tin-soldier); */
+    padding-inline-end: 1rem;
+
+    > * {
+      align-self: stretch;
+      padding: 0.25rem;
+
+      @media (min-width: 30rem) {
+        padding: 0.5rem;
+      }
+    }
+
+    > *:nth-child(odd) {
+      border-radius: 0.25rem;
+      background-color: var(--brilliance);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: var(--navy-300);
+        color: whitesmoke;
+      }
+    }
+
+    > *:first-child {
+      /* background-color: transparent; you cant do this due to dark mode */
+    }
+  }
+
+  > *:last-child {
+    border-inline-end: none;
+    padding-inline-end: 0;
+  }
+
+  .comparesheet_titles {
+    display: none;
+
+    @media (min-width: 30rem) {
+      display: grid;
+    }
+    padding-inline-end: 1rem;
+    text-align: end;
+  }
+
+  .comparesheet__title1 {
+    position: sticky;
+    top: -1px;
+    z-index: var(--understory);
+    background-color: var(--brilliance);
+    box-shadow: 0 0 0 100vmax var(--brilliance);
+    clip-path: inset(0 -100vmax);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--navy-300);
+      box-shadow: 0 0 0 100vmax var(--navy-300);
+    }
+  }
+
+  .comparesheet_freeze {
+    position: sticky;
+    top: -1px;
+    z-index: var(--canopy);
+  }
+
+  .comparesheet__title2 {
+    z-index: var(--canopy);
+    position: sticky;
+    top: -1px;
+  }
+
+  .comparesheet__transparent {
+    background-color: transparent;
+  }
+}
+
+.comparesheet_select {
+  z-index: var(--emergent);
+  max-width: calc(50vw - 2.25rem); /* guess and check */
+}

package/src/styles/tables.css

@@ -6,121 +6,46 @@
   display: flex;
   text-align: center;
 
-  /* columns */
-  > * {
+  .column {
     display: flex;
     flex: 1 1 10rem;
     flex-direction: column;
+    border-right: 0.5px solid var(--neutral-400);
+  }
 
-    /* rows */
-    > * {
-      > * {
-        margin: 0;
-      }
-    }
-
-    /* first row */
-    > *:first-child {
-      margin: 0;
-      border-top: none;
-    }
+  .column:last-child {
+    border-right: none;
   }
 
-  h2,
-  h4,
+  /* cells */
+  .title,
   p {
-    font-size: clamp(0.75rem, 1.25vw, 1.5rem);
-    line-height: clamp(1rem, 1.5vw, 2rem);
-    padding: clamp(0.5rem, 1vw, 1rem);
+    /* * be careful of this it can break the footer flex */
+    font-size: clamp(var(--kosciuszko), 1vw, var(--kilimanjaro));
+
+    line-height: var(--denali);
+    padding: clamp(0.5rem, 1vw, var(--vinson));
     border-bottom: 0.5px solid var(--neutral-400);
-    border-right: 0.5px solid var(--neutral-400);
   }
 
-  h4 {
-    margin: 0.25px;
-  }
-
-  p {
-    font-size: 0.75rem;
-    margin: 0.25px;
+  /* ? can this only be if it has the full length of cells? */
+  .column > *:last-child {
+    border-bottom: none;
   }
 
+  /* titles build spans automatically from strapi */
   h4 span {
     display: flex;
     flex-direction: column;
     white-space: nowrap;
   }
 
-  p span {
-    white-space: nowrap;
-  }
-
-  *:last-child > * {
-    border-right: none;
-  }
-}
-
-.charts {
-  .pricing-chart:not(:last-child) {
-    margin-block-end: 0;
-  }
-
-  .pricing-chart:last-child {
-    margin-block-end: 1.5rem;
-
-    p {
-      border-block-end: none;
-    }
-
-    p:last-child {
-      border-inline-end: none;
-    }
-  }
-}
-
-/*------------------*/
-/* #RENTAL CHART */
-/*------------------*/
-
-.rental-chart {
-  display: grid;
-  text-align: center;
-  margin-block-end: 1.5rem;
-
-  .row {
-    display: grid;
-    gap: 0;
-    margin: 0;
-    grid-template-columns: repeat(auto-fit, minmax(4rem, 1fr));
-
-    /* box */
-    > * {
-      padding: clamp(0.5rem, 1vw, 1rem);
-    }
-
-    > *:last-child {
-      border-inline-end: none;
-    }
-  }
-
-  .row:last-child {
-    > * {
-      border-block-end: none;
-    }
-  }
-
-  .row-header {
-    font-weight: bold;
-  }
-
-  h4 {
+  h4,
+  p {
     margin: 0.25px;
-    font-size: clamp(0.75rem, 1.25vw, 1.5rem);
-    line-height: clamp(1rem, 1.5vw, 2rem);
   }
 
   p {
-    font-size: 0.75rem;
-    margin: 0.25px;
+    font-size: var(--kosciuszko);
   }
 }

package/src/styles/typography.css

@@ -256,6 +256,7 @@ select:active {
 /*------------------*/
 
 /* fixes a bug with new lines */
+/* but creates a weird one with titles */
 .react-markdown {
   white-space: pre-wrap;
   line-height: 1.5;

package/src/styles/visibility.css

@@ -2,10 +2,6 @@
 /* #VISIBILITY */
 /*------------------*/
 
-.pricing-chart__false {
-  display: none;
-}
-
 .menu__large {
   padding-inline: var(--elbrus);
 

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

@@ -10,7 +10,7 @@ export type paddlePricingChartTypes = {
       fullDay: number;
     }[];
   };
-  rentalAddons: {
+  rentalAddons?: {
     nodes: {
       id: React.Key;
       name: string;
@@ -19,7 +19,4 @@ export type paddlePricingChartTypes = {
       sup: number;
     }[];
   };
-  book?: boolean;
-  peek_base: string;
-  strapiLocaleName: string;
 };

package/src/Badges.stories.tsx

@@ -1,18 +0,0 @@
-// this is the Name.stories.tsx file
-import type { Meta, StoryObj } from '@storybook/react';
-import { Badges } from './Badges';
-
-const meta = {
-  component: Badges,
-  title: 'Atoms/Badges',
-  args: {},
-} satisfies Meta<typeof Badges>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Primary: Story = {
-  args: {
-    primary: true,
-  },
-};

package/src/Badges.tsx

@@ -1,33 +0,0 @@
-// this is the Name.tsx file
-import { faker } from '@faker-js/faker/locale/zu_ZA';
-import React from 'react';
-
-interface NameTypes {
-  name: string;
-}
-const Name = ({ name }: NameTypes) => {
-  return (
-    <div className="badge">
-      <h5 className="capitalize">{name}</h5>
-    </div>
-  );
-}
-
-export const Badges = () => {
-  // TODO: deal with multiple
-
-  // Discount
-  if (faker.datatype.boolean()) {
-    return (
-      <div className="badge">
-        <h5 className="capitalize">{faker.number.int({ min: 1, max: 100 })}% off</h5>
-      </div>
-    );
-  }
-
-  if (faker.datatype.boolean()) {
-    return <Name name={faker.helpers.arrayElement(['inflatable', 'demo', faker.airline.airline().name])} />;
-  }
-
-  return null;
-};

package/src/Bag.stories.tsx

@@ -1,18 +0,0 @@
-// this is the Name.stories.tsx file
-import type { Meta, StoryObj } from '@storybook/react';
-import { Bag } from './Bag';
-
-const meta = {
-  component: Bag,
-  title: 'Organisms/Bag',
-  args: {},
-} satisfies Meta<typeof Bag>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Primary: Story = {
-  args: {
-    primary: true,
-  },
-};

package/src/Bag.tsx

@@ -1,14 +0,0 @@
-// this is the Name.tsx file
-import React from "react";
-import { faker } from "@faker-js/faker";
-import { Purchase } from "./Purchase";
-
-export const Bag = () => {
-  return (
-    <div className="bag">
-      {Array.from({ length: faker.number.int({ min: 1, max: 10 }) }).map(() => (
-        <Purchase key={faker.string.uuid()} />
-      ))}
-    </div>
-  );
-};

package/src/Purchase.stories.tsx

@@ -1,18 +0,0 @@
-// this is the Name.stories.tsx file
-import type { Meta, StoryObj } from '@storybook/react';
-import { Purchase } from './Purchase';
-
-const meta = {
-  component: Purchase,
-  title: 'Molecules/Purchase',
-  args: {},
-} satisfies Meta<typeof Purchase>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Primary: Story = {
-  args: {
-    primary: true,
-  },
-};

package/src/Purchase.tsx

@@ -1,47 +0,0 @@
-// Retail Card
-import React from "react";
-import { faker } from "@faker-js/faker";
-import { Badges } from "./Badges";
-import { TextureBackgrounds } from "./TextureBackgrounds";
-
-export const Purchase = () => {
-  return (
-    <article key={faker.string.uuid()} className="purchase">
-      {/* // This is currently a wrapper and not used */}
-      <div className="purchase-collage">
-        <TextureBackgrounds />
-        <a href={faker.music.songName()} className="image-link">
-          {/* <GatsbyImage
-            image={cutout?.localFile?.childImageSharp?.gatsbyImageData}
-            alt={cutout?.alternativeText || `${title} by ${brand.slug}`}
-            className="cutout"
-            objectFit="contain"
-            // TODO: this has been causing some problems but keep an eye on it
-          /> */}
-        </a>
-
-        <Badges
-        // inflatable={faker.datatype.boolean()}
-        // demo={faker.datatype.boolean()}
-        // discount={faker.datatype.boolean() ? faker.number.int({ min: 1, max: 100 }) : undefined}
-        />
-      </div>
-      <h4 className="purchase__title">
-        <a href={faker.music.songName()}>{faker.music.album()}</a>
-      </h4>
-      <hr />
-      {/* // ? I think this is too long */}
-      <p>{faker.lorem.paragraph()}</p>
-      <hr />
-      <div className="purchase__details">
-        <h4>
-          {/* <Remainder inches={length} /> */}
-          long by {faker.number.int({ min: 1, max: 100 })}" wide
-        </h4>
-        <h5 className="capitalize">
-          Capacity {faker.number.int({ min: 1, max: 100 })}&thinsp;lbs
-        </h5>
-      </div>
-    </article>
-  );
-};

package/src/Select.stories.tsx

@@ -1,18 +0,0 @@
-// this is the Name.stories.tsx file
-import type { Meta, StoryObj } from '@storybook/react';
-import { Select } from './Select';
-
-const meta = {
-  component: Select,
-  title: 'Atoms/Select',
-  args: {},
-} satisfies Meta<typeof Select>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Primary: Story = {
-  args: {
-    primary: true,
-  },
-};

package/src/Select.tsx

@@ -1,23 +0,0 @@
-// this is the Name.tsx file
-import React from 'react';
-import { faker } from '@faker-js/faker';
-
-export const Select = () => {
-
-  return (
-    <select
-      className="comparesheet_select"
-      name={faker.commerce.productName()}
-      aria-label="Select a product"
-    >
-      {Array.from({ length: faker.number.int({ min: 1, max: 10 }) }).map(() => (
-        <option
-          key={faker.string.uuid()}
-          value={faker.commerce.productName()}
-        >
-          {faker.commerce.productName()}
-        </option>
-      ))}
-    </select>
-  );
-};

package/src/TextureBackgrounds.stories.tsx

@@ -1,18 +0,0 @@
-// this is the Name.stories.tsx file
-import type { Meta, StoryObj } from '@storybook/react';
-import { TextureBackgrounds } from './TextureBackgrounds';
-
-const meta = {
-  component: TextureBackgrounds,
-  title: 'Atoms/TextureBackgrounds',
-  args: {},
-} satisfies Meta<typeof TextureBackgrounds>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Primary: Story = {
-  args: {
-    primary: true,
-  },
-};

package/src/TextureBackgrounds.tsx

@@ -1,31 +0,0 @@
-// this is the Name.tsx file
-import React from "react";
-import { faker } from "@faker-js/faker";
-
-export const TextureBackgrounds = () => {
-  return (
-    <>
-      <img
-        src={faker.image.dataUri()}
-        className="texture-slice crop"
-        alt="top texture"
-      />
-      <img
-        src={faker.image.dataUri()}
-        className="texture-slice"
-        alt="bottom texture"
-      />
-      <svg viewBox="0 0 1200 630" xmlns="http://www.w3.org/2000/svg">
-        <title>Diagonal line decoration</title>
-        <line
-          x1="0"
-          y1="630"
-          x2="1200"
-          y2="0"
-          // only color the stroke in css so it has dark mode
-          strokeWidth="3"
-        />
-      </svg>
-    </>
-  );
-};

package/src/testimonial-fragment.tsx

@@ -1,13 +0,0 @@
-// ? I dont think I can plug fragments but using types does enough
-
-import { graphql } from "gatsby"
-
-export const query = graphql`
-  fragment testimonialFragment on STRAPI_TESTIMONIAL {
-    id
-    testimonial
-    customer
-    sign
-    location
-  }
-`