@rileybathurst/paddle 0.0.47 → 0.0.49

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rileybathurst/paddle",
   "private": false,
-  "version": "0.0.47",
+  "version": "0.0.49",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -51,6 +51,7 @@
   "author": "",
   "license": "ISC",
   "files": [
-    "src/*"
+    "src/*",
+    "!src/stories"
   ]
 }

package/src/styles/layout.css

@@ -22,7 +22,7 @@ footer,
 }
 
 .vulture {
-  max-width: var(--vulture);
+  max-width: min(var(--vulture), calc(100vw - var(--denali)));
   flex-basis: var(--vulture);
 }
 
@@ -30,24 +30,27 @@ footer,
 header,
 main,
 footer {
-  max-width: var(--stork);
+  max-width: min(var(--stork), calc(100vw - var(--denali)));
   flex-basis: var(--stork);
 }
 
 .condor,
-.location {
+.location,
+.react-aria-Breadcrumbs.condor {
   max-width: min(var(--condor), calc(100vw - var(--denali)));
   flex-basis: var(--condor);
 }
 
-.pelican {
-  max-width: var(--pelican);
+.pelican,
+.react-aria-Breadcrumbs {
+  max-width: min(var(--pelican), calc(100vw - var(--denali)));
   flex-basis: var(--pelican);
 }
 
 .albatross,
-.deck {
-  max-width: var(--albatross);
+.deck,
+.react-aria-Breadcrumbs.albatross {
+  max-width: min(var(--albatross), calc(100vw - var(--denali)));
   flex-basis: var(--albatross);
 }
 

package/src/styles/lists.css

@@ -45,37 +45,10 @@ ol {
 /* #BREADCRUMBS */
 /*------------------*/
 
-/* https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/examples/breadcrumb/ */
-.breadcrumbs {
-  max-width: var(--stork);
-  margin-inline: auto; /* overwrite nav */
-  padding-inline: var(--kosciuszko); /* overwrite nav */
-
-  ol {
-    list-style: none;
-    display: flex;
-    flex-flow: row wrap;
-    /* gap: 1rem; */
-    max-width: var(--pelican);
-    margin-inline: auto;
-    padding-block-start: 1.5rem;
-    margin-block-end: 0;
-    /* padding-block-end: 1.5rem; */
-    /* padding-inline: calc(var(--baseline) / 2); deprecated but still checking */
-    padding-inline: 0;
-    text-transform: capitalize;
-
-    a {
-      display: inline;
-    }
-  }
-}
-
 .react-aria-Breadcrumbs {
-  max-width: var(--pelican);
-  margin-inline: auto; /* overwrite nav */
   display: flex;
   flex-flow: row wrap;
+  gap: var(--kosciuszko);
   list-style: none; /* reset */
   margin-block-end: 0;
   padding-inline: var(--kosciuszko); /* overwrite nav */
@@ -85,11 +58,11 @@ ol {
   li {
     /* ? is this needed its a flex */
     display: inline;
+  }
 
-    li:not(:last-child)::after {
-      margin-inline: var(--vinson);
-      content: ">";
-    }
+  li:not(:last-child)::after {
+    margin-inline: var(--kosciuszko);
+    content: ">";
   }
 }
 

package/src/styles/typography.css

@@ -244,4 +244,5 @@ select {
 /* fixes a bug with new lines */
 .react-markdown {
   white-space: pre-wrap;
+  line-height: 1.5;
 }

package/src/stories/BookNow.stories.tsx

@@ -1,19 +0,0 @@
-// 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

@@ -1,29 +0,0 @@
-// 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

@@ -1,19 +0,0 @@
-// 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

@@ -1,19 +0,0 @@
-// 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

@@ -1,19 +0,0 @@
-// 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,29 +0,0 @@
-// this is the Name.tsx file
-import React from 'react';
-
-interface ButtonProps {
-  primary?: boolean;
-  onClick?: () => void;
-}
-
-export const Button = ({
-  primary = false,
-  ...props
-}: ButtonProps) => {
-
-  return (
-    <main
-      {...props}
-    >
-      {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

@@ -1,19 +0,0 @@
-// 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

@@ -1,43 +0,0 @@
-// 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

@@ -1,71 +0,0 @@
-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

@@ -1,19 +0,0 @@
-// 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

@@ -1,21 +0,0 @@
-// 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>
-  );
-};