@rileybathurst/paddle 0.0.13 → 0.0.15

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rileybathurst/paddle",
   "private": false,
-  "version": "0.0.13",
+  "version": "0.0.15",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -12,12 +12,14 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
-    "color-cards": "^1.0.13",
+    "color-cards": "^1.0.14",
     "react": "^18.2.0",
+    "react-aria-components": "^1.2.1",
     "react-dom": "^18.2.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",

package/src/App.tsx

@@ -1,7 +1,6 @@
 import { useState } from 'react'
 import reactLogo from './assets/react.svg'
 import viteLogo from '/vite.svg'
-import './App.css'
 
 function App() {
   const [count, setCount] = useState(0)

package/src/PaddleComposition.tsx

@@ -0,0 +1,54 @@
+import * as React from "react"
+import { faker } from '@faker-js/faker';
+// import { GatsbyImage } from "gatsby-plugin-image"
+
+// import WaterTexture from "../images/watertexture";
+// import Kayaker from "../images/kayaker";
+// import Supper from "../images/supper";
+// import { useStrapiTextures } from "../hooks/use-strapi-textures"
+
+/* // TODO: rename
+interface TopThreeTypes {
+  className: string;
+}
+function TopThree({ className }: TopThreeTypes) {
+
+  // const { query } = useStrapiTextures()
+  // console.log(query.baseone);
+
+  return <GatsbyImage
+      image={useStrapiTextures().topthree.image.localFile.childImageSharp.gatsbyImageData}
+      alt="deepwater texture"
+      className={`texture-slice crops ${props.className}`}
+      objectFit="contain"
+    />
+
+// ! Testing
+return null;
+} */
+
+interface CompositionTypes {
+  sport?: string;
+}
+const PaddleComposition = ({ sport }: CompositionTypes) => {
+  return (
+    <div className="composition">
+      {/* <WaterTexture className="texture-1" /> */}
+      <img
+        src={faker.image.urlPlaceholder()}
+        alt={faker.location.city()}
+        className="texture-1"
+      />
+      <img
+        src={faker.image.urlPlaceholder()}
+        alt={faker.location.city()}
+        className="texture-2 img-wrapped"
+      />
+      {/* <TopThree className="texture-2 img__wrapped" /> */}
+      {/* {sport === 'paddleboard' ? <Supper className="paddler" /> : <Kayaker className="paddler" />} */}
+      {faker.datatype.boolean() ? <>Supper</> : <>Kayaker</>}
+    </div >
+  )
+}
+
+export default PaddleComposition

package/src/PaddleTime.tsx

@@ -0,0 +1,73 @@
+// import * as React from "react"
+
+interface TimeTypes {
+  start?: string | null;
+  finish?: string | null;
+  duration?: number | null;
+  timeframe?: string | null;
+}
+export const PaddleTime = ({ start, finish, duration, timeframe }: TimeTypes) => {
+
+  // TODO: sunset is a whole thing
+
+  const hairSpace = String.fromCharCode(0x200A);
+
+  if (timeframe) {
+    return {
+      key: timeframe,
+      unit: 'timeframe'
+    }
+  }
+
+  if (start && finish) {
+
+    const startHours = start.split(':')[0];
+    let startHoursInt: number = Number.parseInt(startHours);
+    const startMins = start.split(':')[1];
+    const startMinsInt: number = Number.parseInt(startMins);
+    const startAmpm = startHoursInt >= 12 ? 'pm' : 'am';
+
+    if (startHoursInt > 12) {
+      startHoursInt = startHoursInt - 12;
+    }
+
+    const finishHours = finish.split(':')[0];
+    let finishHoursInt: number = Number.parseInt(finishHours);
+    const finishMins = finish.split(':')[1];
+    const finishMinsInt: number = Number.parseInt(finishMins);
+    const finishAmpm = finishHoursInt >= 12 ? 'pm' : 'am';
+
+    if (finishHoursInt > 12) {
+      finishHoursInt = finishHoursInt - 12;
+    }
+
+    return {
+      key: `${startHoursInt}${startMinsInt > 0 ? `:${startMinsInt}:${hairSpace}` : ''}${hairSpace}${startAmpm}
+      - 
+      ${finishHoursInt}${finishMinsInt > 0 ? `:${finishMinsInt}${hairSpace}` : ''}${hairSpace}${finishAmpm}`,
+      unit: "time"
+    }
+  }
+
+  if (duration) {
+    if (duration > 90) {
+      const hours = Math.floor(duration / 60);
+      const mins = duration % 60;
+
+      return {
+        key: `${hours}${hairSpace}hrs ${mins > 0 ? `${mins}${hairSpace}mins` : ''}`,
+        unit: "duration"
+      }
+    }
+
+    return {
+      key: `${duration}${hairSpace}mins`,
+      unit: "duration"
+    }
+  }
+
+  return {
+    key: null,
+    unit: null
+  }
+}

package/src/index.tsx

@@ -1,2 +1,4 @@
 // eslint-disable-next-line react-refresh/only-export-components
-export * from "./PaddleBookNow";
+export * from "./PaddleBookNow";
+export * from "./PaddleComposition";
+export * from "./PaddleTime";

package/src/stories/BookNow.stories.tsx

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

package/src/stories/BookNow.tsx

@@ -0,0 +1,29 @@
+// this is the Name.tsx file
+import React from 'react';
+import { faker } from '@faker-js/faker';
+
+interface BookNowProps {
+  primary?: boolean;
+  onClick?: () => void;
+}
+
+export const BookNow = ({
+  primary = false,
+  ...props
+}: BookNowProps) => {
+
+  return (
+    <main
+      {...props}
+    >
+      <a
+        href={faker.location.city()}
+        rel="noopener noreferrer"
+        className="book-now"
+        title={`Book now with ${faker.location.city()} kayak and paddleboard`}
+      >
+        BOOK NOW
+      </a>
+    </main>
+  );
+};

package/src/stories/BrandList.stories.tsx

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

package/src/stories/BrandList.tsx

@@ -0,0 +1,19 @@
+// this is the Name.tsx file
+import React from 'react';
+import { Link } from 'react-aria-components';
+import { faker } from '@faker-js/faker';
+
+export const BrandList = () => {
+
+  return (
+    // <ul className='brand_list'>
+    <li key='kayak test brand'>
+      {/* // ? why test */}
+      <Link href={faker.location.city()}>
+        <svg viewBox="0 0 201.9 202.6" xmlns="http://www.w3.org/2000/svg"><title>boardworks </title><path d="m201.9 96.5c-67.3 0-134 0-200.6 0 4.6-5.2 7.5-11.6 16.6-11.5 23.7.3 47.3-1.6 70.3-8 8.6-2.4 16.8-6.2 24.7-10.4 5.6-3 10.4-7.8 9.7-15.1-.7-7.4-6.2-11.2-12.4-13.7-16.7-6.6-33-4.3-48.9 2.8-3.1 1.4-6.1 3.1-9.1 4.6-.3-.4-.6-.8-1-1.1 3.5-3.2 7.1-6.3 10.4-9.6 9.7-9.6 19.3-19.3 29-29 7.2-7.1 13.7-7.4 20.8-.3 29.9 29.7 59.6 59.6 89.4 89.5.4.3.5.7 1.1 1.8z" /><path d="m0 106.4h17.2c12.5 0 25 .2 37.5-.1 7.3-.2 13.3 2.4 17.3 8.1 4.1 5.9 7.5 12.5 10.7 19 3.9 8.1 6.9 16.6 11.1 24.5 6.6 12.6 15.4 23.4 29.3 28.5-4.1 4.3-7.9 8.7-12.2 12.5-5.1 4.5-11.2 4.9-17.1 1.1-3.4-2.2-6.5-5.1-9.5-8.1-26.9-27-53.8-54.1-80.7-81.1-1-1.2-2-2.5-3.6-4.4z" /><path d="m81.8 106.5h49.2c-6.6 10.2-8.8 20.8-4.1 31.9 4.8 11.3 13.8 17.1 27 18.2-7 6.9-13.4 13.4-19.9 19.6-.8.8-3 1.1-4.1.6-5.4-2.8-11.8-4.8-15.5-9.1-6.3-7.4-11.4-15.9-15.8-24.6-6.2-11.9-11.2-24.3-16.8-36.6z" /><path d="m202.5 106.4c-1.6 1.9-2.4 3-3.4 4.1-8.4 8.5-16.5 17.4-25.5 25.4-4.3 3.8-9.9 6.7-15.4 8.7-6.8 2.5-13.3.3-18.1-5.2-4.7-5.3-6.2-11.7-4.1-18.6 2.8-9 10.1-14.3 19.4-14.3 15.3-.1 30.6-.1 47.1-.1z" /></svg>
+        {faker.location.city()}
+      </Link>
+    </li>
+    // </ul>
+  );
+};

package/src/stories/Button.stories.tsx

@@ -5,6 +5,7 @@ import { Button } from './Button';
 
 const meta = {
   component: Button,
+  title: 'Atoms/Button',
   args: { onClick: fn() },
 } satisfies Meta<typeof Button>;
 

package/src/stories/Card.stories.tsx

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

package/src/stories/Card.tsx

@@ -0,0 +1,43 @@
+// TODO: faker with an internet connection
+// this is the Name.tsx file
+import React from 'react';
+import { Link } from 'react-aria-components';
+import { faker } from '@faker-js/faker';
+import { BookNow } from './BookNow';
+
+export const Card = () => {
+
+  return (
+    <div className='deck'>
+      <Link href="#" className="card">
+        {/*         <img
+          src='https://tahoe-city-kayak.s3.us-west-1.amazonaws.com/textures/jason-leung-Oc81QL8Crtg-unsplash-hd.webp'
+          alt=""
+          className='card__placeholder'
+        /> */}
+        <h4 className="card__title">
+          {faker.location.city()}
+        </h4>
+
+        <div className="card__specs">
+          <h4>
+            {/*             <time>
+              18:30 - 20:30
+            </time> */}
+          </h4>
+          <h4>
+            {/* // ? does this need capitalization */}
+            {faker.helpers.arrayElement(['easy', 'medium', 'hard'])} <span className="card__span">Fitness</span>
+          </h4>
+        </div>
+        <hr />
+        <p>{faker.lorem.lines(2)}</p>
+        <hr />
+        <div className="card__details">
+          <h5>${faker.number.int(100)}</h5>
+          <BookNow />
+        </div>
+      </Link>
+    </div>
+  );
+};

package/src/stories/Colors.stories.tsx

@@ -5,6 +5,7 @@ import { Colors } from './Colors';
 
 const meta = {
   component: Colors,
+  title: 'Atoms/Colors',
   args: { onClick: fn() },
 } satisfies Meta<typeof Colors>;
 

package/src/stories/Colors.tsx

@@ -1,6 +1,28 @@
 // this is the Name.tsx file
 import React from 'react';
-import { ColorCards } from 'color-cards';
+
+function ColorCards({ color, variables }) {
+  return (
+    <div>
+      <h2>{color}</h2>
+      {variables.map((variable) => (
+        <div
+          key={variable}
+          style={{
+            backgroundColor: `var(--${color}-${variable})`,
+            padding: '1rem',
+            margin: '1rem',
+            borderRadius: '0.5rem',
+            color: 'white',
+            textAlign: 'center',
+          }}
+        >
+          {`--${color}-${variable}`}
+        </div>
+      ))}
+    </div>
+  );
+}
 
 interface ColorsProps {
   primary?: boolean;
@@ -18,7 +40,7 @@ export const Colors = ({
     >
       {primary ? 'primary' : 'secondary'}
       <ColorCards
-        color="red"
+        color="navy"
         variables={[100, 200]}
       />
     </main>

package/src/stories/Composition.stories.tsx

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

package/src/stories/Composition.tsx

@@ -0,0 +1,21 @@
+// this is the Name.tsx file
+import React from 'react';
+
+interface CompositionProps {
+  primary?: boolean;
+  onClick?: () => void;
+}
+
+export const Composition = ({
+  primary = false,
+  ...props
+}: CompositionProps) => {
+
+  return (
+    <div className="composition">
+      {/* <WaterTexture className="texture-1" /> */}
+      {/* <TopThree className="texture-2 img__wrapped" /> */}
+      {/* {sport === 'paddleboard' ? <Supper className="paddler" /> : <Kayaker className="paddler" />} */}
+    </div>
+  );
+};

package/src/stories/Deal.tsx

@@ -0,0 +1,31 @@
+// havent figured out how to get this in yet
+
+import React from 'react';
+import { faker } from '@faker-js/faker';
+
+export const Deal = () => {
+  const roll = faker.number.int(10);
+  if (roll < 1) {
+    return (
+      <h1>There are no cards available</h1>
+    );
+  }
+
+  // <Ticket key={i} />
+  const content = [];
+  for (let i = 0; i < roll; i++) {
+    content.push(
+      { i }
+    );
+  }
+
+  console.log(content);
+
+  return (
+    <>
+      {content.map((piece) => (
+        piece.i
+      ))}
+    </>
+  );
+}

package/src/stories/Deck.stories.tsx

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

package/src/stories/Deck.tsx

@@ -0,0 +1,22 @@
+// this is the Name.tsx file
+import React from 'react';
+import { Ticket } from './Ticket';
+
+interface DeckProps {
+  primary?: boolean;
+  onClick?: () => void;
+}
+
+export const Deck = ({
+  primary = false,
+  ...props
+}: DeckProps) => {
+
+  return (
+    <div className='deck'>
+      {/* // TODO: deal */}
+      <Ticket />
+      <Ticket />
+    </div>
+  );
+};

package/src/stories/Eyebrow.stories.tsx

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

package/src/stories/Eyebrow.tsx

@@ -0,0 +1,21 @@
+// this is the Name.tsx file
+import React from 'react';
+
+interface EyebrowProps {
+  primary?: boolean;
+  onClick?: () => void;
+}
+
+export const Eyebrow = ({
+  primary = false,
+  ...props
+}: EyebrowProps) => {
+
+  return (
+    <hgroup className='eyebrow crest'>
+      {/* // TODO: fix the metaphor */}
+      <p className='eyebrow brow'>Eyebrow</p>
+      <h3 className='supra'>Supra</h3>
+    </hgroup>
+  );
+};

package/src/stories/Footer.stories.tsx

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

package/src/stories/Footer.tsx

@@ -0,0 +1,112 @@
+// this is the Name.tsx file
+import React from 'react';
+import { Link } from 'react-aria-components';
+import { faker } from '@faker-js/faker';
+
+import { Pricing } from './Pricing';
+import { LocationDeck } from './LocationDeck';
+
+function Deal() {
+
+  const roll = faker.number.int(10);
+
+  if (roll < 1) {
+    return (
+      <h1>double zero</h1>
+    );
+  }
+
+  const content = [];
+  for (let i = 0; i < roll; i++) {
+    content.push(
+      <li key={faker.location.city()}>
+        <a href={faker.location.city()}
+          target="_blank"
+          rel='noopener noreferrer'
+        >
+          {faker.location.city()} Kayak &amp; Paddleboard
+        </a>
+      </li>
+    );
+  }
+
+  return content;
+}
+
+interface FooterProps {
+  primary?: boolean;
+  onClick?: () => void;
+}
+
+export const Footer = ({
+  primary = false,
+  ...props
+}: FooterProps) => {
+
+  return (
+    <footer>
+      <section>
+        <h3 className='sr-only'>
+          <Link href="/">{faker.company.name()}</Link>
+        </h3>
+        <Link href="/" className="logo-link">
+          {/* // TODO: */}
+          {/* <Logo /> */}
+        </Link>
+        <p>&copy; {new Date().getFullYear()}</p>
+        <hr />
+        <nav>
+          {/* <MenuList /> */}
+        </nav>
+        <hr />
+        <div className="footer__contact">
+          {/* <Phone /> */}
+          <a
+            href={`mailto:${faker.internet.email()}`}
+            rel="norel norefferer"
+            className="button"
+          >
+            {faker.internet.email()}
+          </a>
+          <div className="social">
+            {/* {useSiteMetadata().social?.facebook ?? */}
+            <a
+              href={faker.location.city()}
+              target='_blank' rel='noopener noreferrer'
+              aria-label={`${faker.location.city()} facebook`}
+            >
+              {/* <FacebookIcon /> */}
+            </a>
+            {/* } */}
+            {/* {useSiteMetadata().social?.instagram ?? */}
+            <a href={faker.location.city()}
+              target='_blank'
+              rel='noopener noreferrer'
+              aria-label={`${faker.location.city()} instagram`}
+            >
+              {/* <InstagramIcon /> */}
+            </a>
+            {/* } */}
+          </div>
+        </div>
+        <hr />
+        <div className="footer__locations">
+          <h3>Our Partner Locations</h3>
+          <ul>
+            <Deal />
+          </ul>
+        </div>
+      </section>
+      <section>
+        <Pricing book={false} />
+        <hr />
+
+        <LocationDeck
+          // locations={data.allStrapiLocation}
+          background={false}
+        />
+      </section>
+
+    </footer >
+  );
+};