@rileybathurst/paddle 0.0.34 → 0.0.37

package/src/stories/Socials.tsx

@@ -0,0 +1,50 @@
+// this is the Name.tsx file
+import React from 'react';
+import { faker } from '@faker-js/faker';
+import FacebookIcon from '../assets/facebook-icon';
+import InstagramIcon from '../assets/instagram-icon';
+import TripadvisorIcon from '../assets/tripadvisor-icon';
+
+interface SocialsProps {
+  primary?: boolean;
+  onClick?: () => void;
+}
+
+export const Socials = ({
+  primary = false,
+  ...props
+}: SocialsProps) => {
+
+  return (
+    <main className="social">
+      {/* // TODO: boolean check on socials */}
+      {/* {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>
+      {/* } */}
+      {/* {useSiteMetadata().social?.instagram ?? */}
+      <a href={faker.location.city()}
+        target='_blank'
+        rel='noopener noreferrer'
+        aria-label={`${faker.location.city()} tripadvisor`}
+      >
+        <TripadvisorIcon />
+      </a>
+      {/* } */}
+    </main>
+  );
+};

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

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

package/src/stories/Testimonial.tsx

@@ -0,0 +1,24 @@
+// this is the Name.tsx file
+import React from 'react';
+import { faker } from '@faker-js/faker';
+
+interface TestimonialProps {
+  primary?: boolean;
+  onClick?: () => void;
+}
+
+export const Testimonial = ({
+  primary = false,
+  ...props
+}: TestimonialProps) => {
+
+  return (
+    <li
+      key={faker.string.alphanumeric()}
+    >
+      <p className='elbrus'><span className='denali font-serif'>&ldquo;</span>{faker.lorem.sentence()}<span className='denali font-serif'>&rdquo;</span></p>
+      <p>{faker.helpers.arrayElement(['Thank You,', 'Sincerely,', null])} {faker.person.firstName()}</p>
+      <p className='kosciuszko'>{faker.location.city()}</p>
+    </li>
+  );
+};

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

package/src/stories/Testimonials.tsx

@@ -0,0 +1,42 @@
+// this is the Name.tsx file
+import React from 'react';
+import { faker } from '@faker-js/faker';
+import { Testimonial } from './Testimonial';
+
+function Deal() {
+
+  const hand = faker.number.int(10);
+  console.log(hand);
+
+  if (hand < 1) {
+    return (
+      <h1>There are no cards available</h1>
+    );
+  }
+
+  const content = [];
+  for (let i = 0; i < hand; i++) {
+    content.push(
+      <Testimonial />
+    );
+  }
+
+  return (<>{content}</>);
+}
+
+interface TestimonialsProps {
+  primary?: boolean;
+  onClick?: () => void;
+}
+
+export const Testimonials = ({
+  primary = false,
+  ...props
+}: TestimonialsProps) => {
+
+  return (
+    <ul className='testimonials condor'>
+      <Deal />
+    </ul>
+  );
+};

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

package/src/stories/Ticket.tsx

@@ -0,0 +1,47 @@
+// TODO: when I have 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 { PaddleTime } from '../PaddleTime';
+
+export const Ticket = () => {
+
+  const time = PaddleTime({
+    timeframe: faker.datatype.boolean() ? faker.helpers.arrayElement(['sunset', 'overnight']) : null,
+    // ? faker boolean covering both start and finish
+    start: faker.datatype.boolean() ? `${faker.number.int({ min: 1, max: 24 })}:${faker.number.int(60)}:00.000` : null,
+    finish: faker.datatype.boolean() ? `${faker.number.int({ min: 1, max: 24 })}:${faker.number.int(60)}:00.000` : null,
+    duration: faker.datatype.boolean() ? faker.number.int(200) : null
+  });
+
+  return (
+    <section className="ticket">
+      <Link href={`/tours/${faker.location.city()}`}>
+        <img src={faker.image.url()} alt={faker.lorem.words(2)} />
+      </Link>
+      <h4 className="card__title">
+        <Link href={`/tours/${faker.location.city()}`}>
+          {faker.location.city()}
+        </Link>
+      </h4>
+      <div className="card__specs">
+        <h4>{time.entry}</h4>
+        {faker.datatype.boolean() ? <h4 className="capitalize">{faker.helpers.arrayElement(['easy', 'medium', 'hard'])} <span>Fitness</span></h4> : null}
+      </div>
+      <hr />
+      <p>{faker.lorem.sentences(2)}</p>
+      <hr />
+      <div className="card__details">
+        <h5>{faker.datatype.boolean() ? `$${faker.number.int(200)}` : null}</h5>
+        <a
+          href={faker.location.city()}
+          className="book-now"
+        >
+          BOOK NOW
+        </a>
+      </div>
+
+    </section>
+  );
+};

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

package/src/stories/TopBar.tsx

@@ -0,0 +1,19 @@
+// this is the Name.tsx file
+import React from 'react';
+
+interface TopBarProps {
+  primary?: boolean;
+  onClick?: () => void;
+}
+
+export const TopBar = ({
+  primary = false,
+  ...props
+}: TopBarProps) => {
+
+  return (
+    <div className="top-bar" >
+      <p>We&apos;re Open for the 2024 Summer</p>
+    </div>
+  );
+};

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

package/src/stories/Typography.tsx

@@ -0,0 +1,39 @@
+// this is the Name.tsx file
+import React from 'react';
+import { Eyebrow } from './Eyebrow';
+
+interface TypographyProps {
+  primary?: boolean;
+  onClick?: () => void;
+}
+
+export const Typography = ({
+  primary = false,
+  ...props
+}: TypographyProps) => {
+
+  return (
+    <>
+      <h1>everest</h1>
+      <h2>aconcagua</h2>
+      <h3>denali</h3>
+      <h4>kilimanjaro</h4>
+      <h5>elbrus</h5>
+      <h6>vinson</h6>
+      <p>kosciuszko</p>
+
+      <hr />
+
+      {/* // TODO: fix this naming */}
+      <p className="typography__secondary">typography__secondary</p>
+
+      <hr />
+
+      <Eyebrow />
+      <p>
+        These can be any version of h to be a well styled html doc as long as
+        they have the hgroup wrapper with a class of crest
+      </p>
+    </ >
+  );
+};

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