@rileybathurst/paddle 0.0.34 → 0.0.37

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

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

package/src/stories/Button.tsx

@@ -1,49 +1,29 @@
-// import React from 'react';
-
-import './button.css';
+// this is the Name.tsx file
+import React from 'react';
 
 interface ButtonProps {
-  /**
-   * Is this the principal call to action on the page?
-   */
   primary?: boolean;
-  /**
-   * What background color to use
-   */
-  backgroundColor?: string;
-  /**
-   * How large should the button be?
-   */
-  size?: 'small' | 'medium' | 'large';
-  /**
-   * Button contents
-   */
-  label: string;
-  /**
-   * Optional click handler
-   */
   onClick?: () => void;
 }
 
-/**
- * Primary UI component for user interaction
- */
 export const Button = ({
   primary = false,
-  size = 'medium',
-  backgroundColor,
-  label,
   ...props
 }: ButtonProps) => {
-  const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
+
   return (
-    <button
-      type="button"
-      className={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
-      style={{ backgroundColor }}
+    <main
       {...props}
     >
-      {label}
-    </button>
+      {primary ? 'primary' : 'secondary'}
+      <button type='button'>Button</button>
+      <button className='button__hover' type='button'>Hover</button>
+      <button className='button__active' type='button'>Active</button>
+      <hr />
+      <button className='button__mullen' type='button'>Button Mullen</button>
+      <button className='button__mullen--hover' type='button'>Mullen Hover</button>
+      <button className='button__mullen--active' type='button'>Mullen Active</button>
+      <p>// TODO: I have some problems with this I dont like the pink</p>
+    </main>
   );
-};
+};

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.mdx

@@ -0,0 +1,71 @@
+import { Meta, ColorPalette, ColorItem } from "@storybook/blocks";
+
+<Meta title="Colors" />
+
+<ColorPalette>
+  <ColorItem
+    title="Mullen"
+    subtitle="base 100 - Tahoe City"
+    colors={{
+      mullen100: "hsl(0, 50%, 50%)",
+      mullen200: "hsl(0, 50%, 37.5%)",
+      mullen300: "hsl(0, 50%, 25%)",
+    }}
+  />
+  <ColorItem
+    title="Sand"
+    subtitle="base 100 - Tahoe City"
+    colors={{
+      sand100: "hsl(25, 37%, 95%)",
+      sand150: "hsl(25, 37%, 92.5%)",
+      sand200: "hsl(25, 37%, 87.5%)",
+      sand300: "hsl(25, 37%, 75%)",
+    }}
+  />
+
+  <ColorItem
+    title="Ink"
+    subtitle="base 100 - Tahoe City"
+    colors={{
+      ink100: "hsl(210, 50%, 12.5%)",
+      ink200: "hsl(210, 50%, 7.5%)",
+      ink300: "hsl(210, 50%, 5%)",
+    }}
+  />
+  <ColorItem
+    title="Navy"
+    subtitle="base 400 - South Lake"
+    colors={{
+      navy200: "oklch(75% 0.12 230)",
+      navy300: "oklch(62.5% 0.14 230)",
+      navy400: "oklch(50% 0.14 230)",
+      navy500: "oklch(37.5% 0.14 230)",
+      navy600: "oklch(25% 0.12 230)"
+    }}
+  />
+  <ColorItem
+    title="Sunshine"
+    subtitle="base 500 - South Lake"
+    colors={{
+      navy100: "oklch(97.5% 0.025 95)",
+      navy200: "oklch(95% 0.05 95)",
+      navy300: "oklch(92.5% 0.1 95)",
+      navy400: "oklch(90% 0.15 95)",
+      navy500: "oklch(87.5% 0.2 95)"
+    }}
+  />
+  <ColorItem
+    title="Neutrals"
+    colors={{
+      blackmetal: "hsl(210, 25%, 2.5%)",
+      blackout: "hsl(210, 25%, 12.5%)",
+      raven: "hsl(210, 25%, 25%)",
+      industrial: "hsl(210, 7.5%, 37.5%)",
+      grey: "hsl(210, 7.5%, 50%)",
+      cold: "hsl(210, 7.5%, 62.5%)",
+      tin: "hsl(210, 12.5%, 75%)",
+      cloud: "hsl(210, 18.75%, 87.5%)",
+      brilliance: "hsl(210, 25%, 97.5%)",
+    }}
+  />
+</ColorPalette>

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,94 @@
+// 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';
+import { Socials } from './Socials';
+
+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>
+          <Socials />
+        </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 >
+  );
+};

package/src/stories/Header.stories.ts

@@ -1,16 +1,16 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { fn } from '@storybook/test';
+import type { Meta, StoryObj } from "@storybook/react";
+import { fn } from "@storybook/test";
 
-import { Header } from './Header';
+import { Header } from "./Header";
 
 const meta = {
-  title: 'Example/Header',
+  title: "Organisms/Header",
   component: Header,
   // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
-  tags: ['autodocs'],
+  tags: ["autodocs"],
   parameters: {
     // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
-    layout: 'fullscreen',
+    layout: "fullscreen",
   },
   args: {
     onLogin: fn(),
@@ -25,7 +25,7 @@ type Story = StoryObj<typeof meta>;
 export const LoggedIn: Story = {
   args: {
     user: {
-      name: 'Jane Doe',
+      name: "Jane Doe",
     },
   },
 };

package/src/stories/Header.tsx

@@ -1,56 +1,28 @@
-// import React from 'react';
+import React from 'react';
+import { faker } from '@faker-js/faker';
+import { Link } from 'react-aria-components';
+import { TopBar } from './TopBar';
+import { Logo } from './Logo';
 
-import { Button } from './Button';
-import './header.css';
-
-type User = {
-  name: string;
-};
-
-interface HeaderProps {
-  user?: User;
-  onLogin?: () => void;
-  onLogout?: () => void;
-  onCreateAccount?: () => void;
-}
-
-export const Header = ({ user, onLogin, onLogout, onCreateAccount }: HeaderProps) => (
+export const Header = () => (
   <header>
-    <div className="storybook-header">
-      <div>
-        <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
-          <g fill="none" fillRule="evenodd">
-            <path
-              d="M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z"
-              fill="#FFF"
-            />
-            <path
-              d="M5.3 10.6l10.4 6v11.1l-10.4-6v-11zm11.4-6.2l9.7 5.5-9.7 5.6V4.4z"
-              fill="#555AB9"
-            />
-            <path
-              d="M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z"
-              fill="#91BAF8"
-            />
-          </g>
-        </svg>
-        <h1>Acme</h1>
-      </div>
-      <div>
-        {user ? (
-          <>
-            <span className="welcome">
-              Welcome, <b>{user.name}</b>!
-            </span>
-            <Button size="small" onClick={onLogout} label="Log out" />
-          </>
-        ) : (
-          <>
-            <Button size="small" onClick={onLogin} label="Log in" />
-            <Button primary size="small" onClick={onCreateAccount} label="Sign up" />
-          </>
-        )}
-      </div>
+    <TopBar />
+    <div className="logo-container" >
+      <Link
+        href="/"
+        className="link__subtle"
+      >
+        <Logo />
+      </Link>
+      <h1 className='sr-only'>
+        <Link
+          href="/"
+          className="link__subtle"
+        >
+          {faker.location.city()} kayak &amp; Paddleboard
+        </Link>
+      </h1>
     </div>
+    {/* // TODO: <p>small nav is going to be a pain to build here I bet</p> */}
   </header>
 );

package/src/stories/Language.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 { Language } from './Language';
+
+const meta = {
+  title: 'Atoms/Language',
+  component: Language,
+  args: { onClick: fn() },
+} satisfies Meta<typeof Language>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  args: {
+    primary: true,
+  },
+};