@rileybathurst/paddle 0.0.24 → 0.0.25

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rileybathurst/paddle",
   "private": false,
-  "version": "0.0.24",
+  "version": "0.0.25",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -16,7 +16,8 @@
     "gatsby": "^5.13.6",
     "react": "^18.2.0",
     "react-aria-components": "^1.2.1",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-markdown": "^9.0.1"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^1.3.4",

package/src/PaddleLocationCard.tsx

@@ -0,0 +1,149 @@
+// TODO: Season is super broken
+
+import * as React from "react"
+import { Link } from 'gatsby';
+import Markdown from "react-markdown";
+import type { LocationCardTypes } from "./types/location-card-types";
+
+interface SeasonTypes {
+  season_start: string;
+  season_end: string;
+  opening_time: string;
+  closing_time: string;
+  name: string;
+}
+function Season({ season_start, season_end, opening_time, closing_time, name }: SeasonTypes) {
+
+  // TODO: these need a query but thats not the most important first step
+  if (name === "Free Parking Lot" || name === "Parking" || name === "Delivery") {
+    return null;
+  }
+
+  // console.log(opening_time);
+
+  /*   if (new Date(season_start) < new Date()) {
+      return (
+        <p>
+          {opening_time ? "Open Daily: " : null}
+          <HourMin time={opening_time} />
+          {opening_time ? " - : " : null}
+          <HourMin time={closing_time} />
+        </p>
+      )
+    } */
+
+  /*   return (
+      <p>
+        We&apos;re closed for the season:<br />
+        We will reopen<br />
+        {season_start} - {season_end}<br />
+        Weather Permitting
+      </p>
+    ) */
+  return (
+    <p>
+      {/* {opening_time ? "Open Daily: " : null} */}
+      Open Daily 9:30am - 5:30pm<br />
+      Weather Permitting
+      {/* <HourMin time={opening_time} /> */}
+      {/* {opening_time ? " - : " : null} */}
+      {/* <HourMin time={closing_time} /> */}
+    </p>
+  )
+}
+
+interface ContentTypes {
+  svg: string;
+  name: string;
+  address: {
+    data: {
+      address: string;
+    }
+  };
+  description: {
+    data: {
+      description: string;
+    }
+  };
+  opening_time: string;
+  closing_time: string;
+
+  locale: {
+    season_start: string;
+    season_end: string;
+  };
+}
+function Content({ svg, name, address, description, opening_time, closing_time, locale }: ContentTypes) {
+  return (
+    <>
+      <div
+        className="svg"
+        dangerouslySetInnerHTML={{ __html: svg }}
+      />
+
+      <div>
+        <h3 className="elbrus">{name}</h3>
+        <Markdown className="react-markdown">
+          {address.data.address}
+        </Markdown>
+      </div>
+
+      <div>
+        <Season
+          season_start={locale.season_start}
+          season_end={locale.season_end}
+          opening_time={opening_time}
+          closing_time={closing_time}
+          name={name}
+        />
+        <br />
+        <Markdown className="react-markdown" >
+          {description.data.description}
+        </Markdown>
+        {/* // TODO: add phone but dont break the link on link rule {name === "On Water Rental" ? <Phone /> : null} */}
+      </div>
+    </>
+  )
+}
+
+function LocationCard({ svg, name, link, address, description, opening_time, closing_time, locale, background }: LocationCardTypes) {
+
+  if (link.includes('http')) {
+    return (
+      <a
+        href={link}
+        className={`location ${background}`}
+        title={name}
+      >
+        <Content
+          svg={svg}
+          name={name}
+          address={address}
+          description={description}
+          opening_time={opening_time}
+          closing_time={closing_time}
+          locale={locale}
+        />
+      </a>
+    )
+  }
+
+  return (
+    <Link
+      to={`/${link}`}
+      className={`location ${background}`}
+    >
+      <Content
+        svg={svg}
+        name={name}
+        address={address}
+        description={description}
+        opening_time={opening_time}
+        closing_time={closing_time}
+        locale={locale}
+      />
+    </Link>
+  )
+}
+
+export default LocationCard

package/src/index.tsx

@@ -12,4 +12,5 @@ export * from "./PaddleComposition";
 export * from "./PaddleSocials";
 
 // Organisms
-export * from "./PaddleTestimonials";
+export * from "./PaddleTestimonials";
+export * from "./PaddleLocationCard";

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/Location.tsx

@@ -1,4 +1,5 @@
 // this is the Name.tsx file
+// TODO: these are way to similar for the reality of the design
 import React from 'react';
 import { faker } from '@faker-js/faker';
 
@@ -28,7 +29,7 @@ export const Location = ({
         <path d="M4 46v-3h2q1.55 0 3.075-.525Q10.6 41.95 12 40.55q1.4 1.4 2.925 1.925Q16.45 43 18 43q1.5 0 3.075-.55 1.575-.55 2.925-1.9 1.45 1.4 2.95 1.925Q28.45 43 30 43q1.5 0 3.075-.55 1.575-.55 2.925-1.9 1.35 1.35 2.925 1.9Q40.5 43 42 43h2v3h-2q-1.45 0-2.975-.425Q37.5 45.15 36 44q-1.5 1.15-3.025 1.575Q31.45 46 30 46q-1.45 0-2.975-.425Q25.5 45.15 24 44q-1.5 1.15-3.025 1.575Q19.45 46 18 46q-1.45 0-2.975-.425Q13.5 45.15 12 44q-1.5 1.15-3.025 1.575Q7.45 46 6 46Zm20-27.7q-1.5 0-2.575-1.075-1.075-1.075-1.075-2.575 0-1.5 1.075-2.575Q22.5 11 24 11q1.5 0 2.575 1.075 1.075 1.075 1.075 2.575 0 1.5-1.075 2.575Q25.5 18.3 24 18.3Zm-6 19.9q-1.65 0-3.25-.9T12 34.95q-.65.7-1.55 1.375T8.7 37.55q-1.95-.4-4.225-1.075Q2.2 35.8 0 35q2.65-1.05 6.875-2.1t7.775-1.65l2.8-8.95q.4-1.4 1.7-1.95 1.3-.55 2.55.1l5.3 2.8 6.05-3.2 3.5-8.1-1-2.65 2.4-5.25L43.4 6.5l-2.35 5.25-2.65 1-7.8 18.15q4.55.55 9.55 1.75 5 1.2 7.85 2.35-2.2.8-4.475 1.475-2.275.675-4.225 1.075-.85-.55-1.75-1.225T36 34.95q-1.15 1.45-2.75 2.35-1.6.9-3.25.9t-3.25-.9q-1.6-.9-2.75-2.35-1.15 1.45-2.75 2.35-1.6.9-3.25.9Zm10.45-7.55 2.6-6.2-4.05 2.1-3.8-1.9-1.8 5.85H24q1.15 0 2.225.025 1.075.025 2.225.125Z" />
       </svg>
       <div>
-        <h3 className="vinson">On Water Rental</h3>
+        <h3 className="elbrus">{faker.helpers.arrayElement(['On Water Rental', 'Retail Location', 'Parking', 'Free Parking Lot', 'Delivery'])}</h3>
         <p>
           {faker.location.secondaryAddress()}
           <br />

package/src/stories/{Colors.stories.tsx → Spec.stories.tsx}

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

package/src/stories/Spec.tsx

@@ -0,0 +1,99 @@
+// this is the Name.tsx file
+import React from 'react';
+import { faker } from '@faker-js/faker';
+
+interface Spec3Types {
+  crew: string;
+  capacity: {
+    data: number;
+    unit: string;
+  };
+  test: {
+    data: string;
+    unit: string;
+  };
+  length: {
+    data: number;
+    unit: string;
+  };
+}
+function Spec3({ crew, capacity, test, length }: Spec3Types) {
+
+  console.log(crew);
+  console.log(capacity);
+
+  return (
+    Object.entries({ crew, capacity, test, length }).map(([key, value]) => {
+
+      // console.log(value);
+      // this is maybe where you can use generics to get around this check
+
+      // or if the next capacity data is a string
+      // so you create a string here from the object
+
+      if (typeof value !== 'string' && key && value) {
+
+        // console.log('🦖');
+
+        // * works but cant be type safe
+        // ? i guess you could wrap it in a typeof check
+        // so this is getting kinda ugly
+        if (key === 'length' && typeof value.data === 'number') {
+          return (
+            <section key={key}>
+              <h3>{key} - <Remainder inches={value.data} /></h3>
+            </section>
+          )
+        }
+
+        const combinedDataUnit = `${value.data} ${value.unit}`;
+        return (
+          <section key={key}>
+            <h3>{key} - {combinedDataUnit}</h3>
+          </section>
+        )
+      }
+
+      if (key && value) {
+
+        // console.log('🦄');
+
+        return (
+          <section key={key}>
+            <h3>{key} - {value}</h3>
+          </section>
+        )
+      }
+
+      return (
+        <section key={key}>
+          <h3>{key}</h3>
+        </section>
+      );
+    })
+  );
+}
+
+
+
+interface SpecProps {
+  primary?: boolean;
+  onClick?: () => void;
+}
+
+export const Spec = ({
+  primary = false,
+  ...props
+}: SpecProps) => {
+
+  return (
+    <main
+      {...props}
+    >
+      <Spec3
+        crew={faker.helpers.arrayElement(['single', 'double'])}
+        capacity={{ data: faker.number.int(100), unit: "lbs" }}
+      />
+    </main>
+  );
+};

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

package/src/stories/Svg.tsx

@@ -0,0 +1,23 @@
+// this is the Name.tsx file
+import React from 'react';
+
+import FacebookIcon from '../assets/facebook-icon';
+
+interface SvgProps {
+  primary?: boolean;
+  onClick?: () => void;
+}
+
+export const Svg = ({
+  primary = false,
+  ...props
+}: SvgProps) => {
+
+  return (
+    <main
+      {...props}
+    >
+      <FacebookIcon />
+    </main>
+  );
+};

package/src/stories/Typography.mdx

@@ -0,0 +1,51 @@
+// Setting in px is dumb and not getting the name
+
+import { Meta, Typeset } from "@storybook/blocks";
+
+<Meta title="Typography" />
+
+export const typography = {
+  type: {
+    primary: '"Barlow", Arial, sans-serif',
+  },
+  weight: {
+    regular: "400",
+    bold: "700",
+    extrabold: "800",
+    black: "900",
+  },
+  // Font sizes in pixels
+  size: {
+    everest: 3 * 16,
+    aconcagua: 2.5 * 16,
+    denali: 2 * 16,
+    kilimanjaro: 1.5 * 16,
+    elbrus: 1.25 * 16,
+    vinson: 16,
+    kosciuszko: 0.75 * 16,
+  },
+};
+
+export const SampleText =
+  "Lorem ipsum dolor sit amet, consectetur adipiscing elit.";
+
+# Typography
+
+**Font:** Nunito Sans
+
+**Weights:** 400(regular), 700(bold), 800(extrabold), 900(black)
+
+<Typeset
+  fontSizes={[
+    Number(typography.size.kosciuszko),
+    Number(typography.size.vinson),
+    Number(typography.size.elbrus),
+    Number(typography.size.kilimanjaro),
+    Number(typography.size.denali),
+    Number(typography.size.aconcagua),
+    Number(typography.size.everest),
+  ]}
+  fontWeight={typography.weight.black}
+  sampleText={SampleText}
+  fontFamily={typography.type.primary}
+/>

package/src/stories/Widths.tsx

@@ -35,12 +35,12 @@ export const Widths = ({
   return (
     <>
       <h1>Widths</h1>
-      <WidthCard widths={['swan', 'vulture', 'stork', 'condor', 'pelican', 'albatross']} />
+      <WidthCard widths={['vulture', 'stork', 'condor', 'pelican', 'albatross']} />
       <hr />
       <h2>split</h2>
-      <p>pelican hydra</p>
+      <p>pelican wrap</p>
       <div
-        className='pelican hydra'
+        className='pelican wrap'
         style={{
           height: '100px',
           marginBlockEnd: '1rem',
@@ -52,14 +52,14 @@ export const Widths = ({
             backgroundColor: 'var(--mullen-300)',
           }}
         >
-          hydra?
+          wrap
         </div>
         <div
           style={{
             backgroundColor: 'var(--mullen-300)',
           }}
         >
-          hydra?
+          wrap
         </div>
       </div>
     </>

package/src/styles/layout.css

@@ -22,7 +22,8 @@ body {
   width: calc(100% - var(--kosciuszko) * 2);
 }
 
-.condor {
+.condor,
+.location {
   max-width: var(--condor);
   flex-basis: var(--condor);
   margin-inline: auto;
@@ -55,6 +56,7 @@ body {
   > * {
     flex: 1 1;
     width: 100%;
+    height: fit-content;
   }
 }
 
@@ -111,3 +113,34 @@ footer {
   gap: var(--kilimanjaro);
   margin-block-end: clamp(var(--kilimanjaro), 1.667vw, var(--aconcagua));
 }
+
+/*------------------*/
+/* #LOCATION */
+/*------------------*/
+
+.location-deck {
+  margin-block-end: var(--kilimanjaro);
+}
+
+.location {
+  display: flex;
+  flex-flow: row;
+  align-items: center;
+  gap: var(--elbrus);
+  padding: var(--elbrus);
+  border-radius: var(--card-radius);
+
+  > * {
+    flex: 7.5 1; /* guess and check to get the parking on one row in the footer */
+  }
+
+  > svg,
+  .svg {
+    flex: 1 1 max-content;
+  }
+}
+
+.location.false:not(:last-child) {
+  border-block-end: 1px solid;
+  border-radius: 0;
+}

package/src/styles/links.css

@@ -2,11 +2,12 @@
 /* #LINKS */
 /*------------------------------------*/
 
-a:where(:hover, :focus),
-a.hover {
+a:where(:hover, :focus) {
   text-decoration: none;
 }
 
+/*------------------------------------*/
+
 .link__subtle {
   text-decoration: none;
 }
@@ -14,3 +15,9 @@ a.hover {
 .link__subtle:where(:hover, :focus) {
   text-decoration: underline;
 }
+
+/*------------------------------------*/
+
+a svg {
+  transition: var(--fade);
+}

package/src/styles/media.css

@@ -93,7 +93,7 @@ svg {
 /* https://about.meta.com/brand/resources/instagram/instagram-brand/ */
 
 .instagram {
-  filter: grayscale(100%);
+  filter: grayscale(100%) brightness(0%);
   mix-blend-mode: multiply;
 
   @media (prefers-color-scheme: dark) {
@@ -103,7 +103,7 @@ svg {
 }
 
 .instagram:hover {
-  filter: grayscale(0%);
+  filter: grayscale(0%) brightness(100%);
   fill: revert-layer;
   mix-blend-mode: normal;
 

package/src/types/location-card-types.ts

@@ -0,0 +1,24 @@
+export interface LocationCardTypes {
+  id: React.Key;
+  svg: string;
+  name: string;
+  link: string;
+  address: {
+    data: {
+      address: string;
+    };
+  };
+  description: {
+    data: {
+      description: string;
+    };
+  };
+  opening_time: string;
+  closing_time: string;
+
+  locale: {
+    season_start: string;
+    season_end: string;
+  };
+  background?: string;
+}

package/src/stories/Colors.tsx

@@ -1,48 +0,0 @@
-// this is the Name.tsx file
-import React from 'react';
-
-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;
-  onClick?: () => void;
-}
-
-export const Colors = ({
-  primary = false,
-  ...props
-}: ColorsProps) => {
-
-  return (
-    <main
-      {...props}
-    >
-      {primary ? 'primary' : 'secondary'}
-      <ColorCards
-        color="navy"
-        variables={[100, 200]}
-      />
-    </main>
-  );
-};