rankrunners-cms 0.0.1

package/src/editor/blocks/Hero/Hero.tsx

@@ -0,0 +1,107 @@
+import { Button } from '@measured/puck'
+import { Section } from '../../components/Section'
+import styles from './styles.module.css'
+import type { PuckComponent, Slot } from '@measured/puck'
+import type { ReactNode } from 'react'
+import getClassNameFactory from '../../utils/getClassNameFactory'
+
+const getClassName = getClassNameFactory('Hero', styles)
+
+export type HeroProps = {
+  quote?: { index: number; label: string }
+  title: string | ReactNode
+  description: string
+  align?: string
+  padding: string
+  image?: {
+    content?: Slot
+    mode?: 'inline' | 'background' | 'custom'
+    url?: string
+  }
+  buttons: Array<{
+    label: string
+    href: string
+    variant?: 'primary' | 'secondary'
+  }>
+}
+
+export const Hero: PuckComponent<HeroProps> = ({
+  align,
+  title,
+  description,
+  buttons,
+  padding,
+  image,
+  puck,
+}) => {
+  return (
+    <Section
+      className={getClassName({
+        left: align === 'left',
+        center: align === 'center',
+        hasImageBackground: image?.mode === 'background',
+      })}
+      style={{ paddingTop: padding, paddingBottom: padding }}
+    >
+      {image?.mode === 'background' && (
+        <>
+          <div
+            className={getClassName('image')}
+            style={{
+              backgroundImage: `url("${image.url}")`,
+            }}
+          ></div>
+
+          <div className={getClassName('imageOverlay')}></div>
+        </>
+      )}
+
+      <div className={getClassName('inner')}>
+        <div className={getClassName('content')}>
+          <h1>{title}</h1>
+          <p className={getClassName('subtitle')}>{description}</p>
+          <div className={getClassName('actions')}>
+            {buttons.map((button, i) => (
+              <Button
+                key={i}
+                href={button.href}
+                variant={button.variant}
+                size="large"
+                tabIndex={puck.isEditing ? -1 : undefined}
+              >
+                {button.label}
+              </Button>
+            ))}
+          </div>
+        </div>
+
+        {align !== 'center' && image?.mode === 'inline' && image.url && (
+          <div
+            style={{
+              backgroundImage: `url('${image.url}')`,
+              backgroundSize: 'cover',
+              backgroundRepeat: 'no-repeat',
+              backgroundPosition: 'center',
+              borderRadius: 24,
+              height: 356,
+              marginLeft: 'auto',
+              width: '100%',
+            }}
+          />
+        )}
+
+        {align !== 'center' && image?.mode === 'custom' && image.content && (
+          <image.content
+            style={{
+              height: 356,
+              marginLeft: 'auto',
+              width: '100%',
+            }}
+          />
+        )}
+      </div>
+    </Section>
+  )
+}
+
+export default Hero

package/src/editor/blocks/Hero/client.tsx

@@ -0,0 +1,204 @@
+import { Link2 } from 'lucide-react'
+import { AutoField, FieldLabel } from '@measured/puck'
+import { quotes } from './quotes'
+import HeroComponent from './Hero'
+import type { ComponentConfig } from '@measured/puck'
+import type { HeroProps } from './Hero'
+
+export const Hero: ComponentConfig<{
+  props: HeroProps
+  fields: {
+    userField: {
+      type: 'userField'
+      option: boolean
+    }
+  }
+}> = {
+  fields: {
+    quote: {
+      type: 'external',
+      placeholder: 'Select a quote',
+      showSearch: false,
+      renderFooter: ({ items }) => {
+        return (
+          <div>
+            {items.length} result{items.length === 1 ? '' : 's'}
+          </div>
+        )
+      },
+      filterFields: {
+        author: {
+          type: 'select',
+          options: [
+            { value: '', label: 'Select an author' },
+            { value: 'Mark Twain', label: 'Mark Twain' },
+            { value: 'Henry Ford', label: 'Henry Ford' },
+            { value: 'Kurt Vonnegut', label: 'Kurt Vonnegut' },
+            { value: 'Andrew Carnegie', label: 'Andrew Carnegie' },
+            { value: 'C. S. Lewis', label: 'C. S. Lewis' },
+            { value: 'Confucius', label: 'Confucius' },
+            { value: 'Eleanor Roosevelt', label: 'Eleanor Roosevelt' },
+            { value: 'Samuel Ullman', label: 'Samuel Ullman' },
+          ],
+        },
+      },
+      fetchList: async ({ query, filters }) => {
+        // Simulate delay
+        await new Promise((res) => setTimeout(res, 500))
+
+        return quotes
+          .map((quote, idx) => ({
+            index: idx,
+            title: quote.author,
+            description: quote.content,
+          }))
+          .filter((item) => {
+            if (filters.author && item.title !== filters.author) {
+              return false
+            }
+
+            if (!query) return true
+
+            const queryLowercase = query.toLowerCase()
+
+            if (item.title.toLowerCase().indexOf(queryLowercase) > -1) {
+              return true
+            }
+
+            if (item.description.toLowerCase().indexOf(queryLowercase) > -1) {
+              return true
+            }
+          })
+      },
+      mapRow: (item) => ({
+        title: item.title,
+        description: <span>{item.description}</span>,
+      }),
+      mapProp: (result) => {
+        return { index: result.index, label: result.description }
+      },
+      getItemSummary: (item) => item.label,
+    },
+    title: { type: 'text', contentEditable: true },
+    description: { type: 'textarea', contentEditable: true },
+    buttons: {
+      type: 'array',
+      min: 1,
+      max: 4,
+      getItemSummary: (item) => item.label || 'Button',
+      arrayFields: {
+        label: { type: 'text', contentEditable: true },
+        href: { type: 'text' },
+        variant: {
+          type: 'select',
+          options: [
+            { label: 'primary', value: 'primary' },
+            { label: 'secondary', value: 'secondary' },
+          ],
+        },
+      },
+      defaultItemProps: {
+        label: 'Button',
+        href: '#',
+      },
+    },
+    align: {
+      type: 'radio',
+      options: [
+        { label: 'left', value: 'left' },
+        { label: 'center', value: 'center' },
+      ],
+    },
+    image: {
+      type: 'object',
+      objectFields: {
+        content: { type: 'slot' },
+        url: {
+          type: 'custom',
+          render: ({ value, field, name, onChange, readOnly }) => (
+            <FieldLabel
+              label={field.label || name}
+              readOnly={readOnly}
+              icon={<Link2 size="16" />}
+            >
+              <AutoField
+                field={{ type: 'text' }}
+                value={value}
+                onChange={onChange}
+                readOnly={readOnly}
+              />
+            </FieldLabel>
+          ),
+        },
+        mode: {
+          type: 'radio',
+          options: [
+            { label: 'inline', value: 'inline' },
+            { label: 'bg', value: 'background' },
+            { label: 'custom', value: 'custom' },
+          ],
+        },
+      },
+    },
+    padding: { type: 'userField', option: true },
+  },
+  defaultProps: {
+    title: 'Hero',
+    align: 'left',
+    description: 'Description',
+    buttons: [{ label: 'Learn more', href: '#' }],
+    padding: '64px',
+  },
+  /**
+   * The resolveData method allows us to modify component data after being
+   * set by the user.
+   *
+   * It is called after the page data is changed, but before a component
+   * is rendered. This allows us to make dynamic changes to the props
+   * without storing the data in Puck.
+   *
+   * For example, requesting a third-party API for the latest content.
+   */
+  resolveData: async ({ props }, { changed }) => {
+    if (!props.quote)
+      return { props, readOnly: { title: false, description: false } }
+
+    if (!changed.quote) {
+      return { props }
+    }
+
+    // Simulate a delay
+    await new Promise((resolve) => setTimeout(resolve, 500))
+
+    return {
+      props: {
+        title: quotes[props.quote.index]?.author,
+        description: quotes[props.quote.index]?.content,
+      },
+      readOnly: { title: true, description: true },
+    }
+  },
+  resolveFields: (data, { fields }) => {
+    if (data.props.align === 'center') {
+      return {
+        ...fields,
+        image: undefined,
+      }
+    }
+
+    return fields
+  },
+  resolvePermissions: async (data, params) => {
+    if (!params.changed.quote) return params.lastPermissions
+
+    // Simulate delay
+    await new Promise((resolve) => setTimeout(resolve, 500))
+
+    return {
+      ...params.permissions,
+      // Disable delete if quote 7 is selected
+      delete: data.props.quote?.index !== 7,
+    }
+  },
+  render: HeroComponent,
+}

package/src/editor/blocks/Hero/index.tsx

@@ -0,0 +1,2 @@
+export * from "./client";
+export { type HeroProps } from "./Hero";

package/src/editor/blocks/Hero/quotes.ts

@@ -0,0 +1,46 @@
+export const quotes = [
+  {
+    content:
+      "Age is an issue of mind over matter. If you don't mind, it doesn't matter.",
+    author: "Mark Twain",
+  },
+  {
+    content:
+      "Anyone who stops learning is old, whether at twenty or eighty. Anyone who keeps learning stays young. The greatest thing in life is to keep your mind young.",
+    author: "Henry Ford",
+  },
+  {
+    content: "Wrinkles should merely indicate where smiles have been.",
+    author: "Mark Twain",
+  },
+  {
+    content:
+      "True terror is to wake up one morning and discover that your high school class is running the country.",
+    author: "Kurt Vonnegut",
+  },
+  {
+    content:
+      "As I grow older, I pay less attention to what men say. I just watch what they do.",
+    author: "Andrew Carnegie",
+  },
+  {
+    content:
+      "How incessant and great are the ills with which a prolonged old age is replete.",
+    author: "C. S. Lewis",
+  },
+  {
+    content:
+      "Old age, believe me, is a good and pleasant thing. It is true you are gently shouldered off the stage, but then you are given such a comfortable front stall as spectator.",
+    author: "Confucius",
+  },
+  {
+    content:
+      "Old age has deformities enough of its own. It should never add to them the deformity of vice.",
+    author: "Eleanor Roosevelt",
+  },
+  {
+    content:
+      "Nobody grows old merely by living a number of years. We grow old by deserting our ideals. Years may wrinkle the skin, but to give up enthusiasm wrinkles the soul.",
+    author: "Samuel Ullman",
+  },
+];

package/src/editor/blocks/Hero/server.tsx

@@ -0,0 +1,7 @@
+import HeroComponent from './Hero'
+import type { ComponentConfig } from '@measured/puck'
+import type { HeroProps } from './Hero'
+
+export const Hero: ComponentConfig<HeroProps> = {
+  render: HeroComponent,
+}

package/src/editor/blocks/Hero/styles.module.css

@@ -0,0 +1,116 @@
+.Hero {
+  background-image: linear-gradient(
+    rgba(255, 255, 255, 0),
+    rgb(247, 250, 255) 100%
+  );
+  display: flex;
+  align-items: center;
+  position: relative;
+}
+
+.Hero-inner {
+  display: flex;
+  align-items: center;
+  position: relative;
+  gap: 48px;
+  flex-wrap: wrap;
+  z-index: 1;
+}
+
+@media (min-width: 1024px) {
+  .Hero-inner {
+    flex-wrap: nowrap;
+  }
+}
+
+.Hero h1 {
+  line-height: 1.1;
+  font-size: 48px;
+  margin: 0;
+}
+
+@media (min-width: 768px) {
+  .Hero h1 {
+    font-size: 64px;
+  }
+}
+
+.Hero-subtitle {
+  color: var(--puck-color-grey-05);
+  font-size: var(--puck-font-size-m);
+  line-height: 1.5;
+  margin: 0;
+  margin-bottom: 8px;
+  font-weight: 300;
+}
+
+.Hero--hasImageBackground .Hero-subtitle {
+  color: var(--puck-color-grey-03);
+}
+
+.Hero-image {
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: center;
+  position: absolute;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  left: 0;
+}
+
+.Hero-imageOverlay {
+  background-image: linear-gradient(
+    -90deg,
+    rgb(247, 250, 255, 0.7) 0%,
+    rgb(247, 250, 255, 0.7) 80%
+  );
+  position: absolute;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  left: 0;
+}
+
+@media (min-width: 768px) {
+  .Hero--left .Hero-imageOverlay {
+    background-image: linear-gradient(
+      -90deg,
+      rgba(255, 255, 255, 0) 0%,
+      rgb(247, 250, 255) 70%
+    );
+  }
+}
+
+.Hero-bg img {
+  height: 100%;
+}
+
+.Hero-content {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  width: 100%;
+}
+
+@media (min-width: 768px) {
+  .Hero--hasImageBackground .Hero-content {
+    max-width: 50%;
+  }
+}
+
+.Hero--center .Hero-inner {
+  justify-content: center;
+  text-align: center;
+}
+
+.Hero--center .Hero-content {
+  align-items: center;
+  justify-content: center;
+  max-width: 100%;
+}
+
+.Hero-actions {
+  display: flex;
+  gap: 16px;
+}

package/src/editor/blocks/Logos/index.tsx

@@ -0,0 +1,77 @@
+import { Section } from '../../components/Section'
+import styles from './styles.module.css'
+import type { ComponentConfig } from '@measured/puck'
+import getClassNameFactory from '../../utils/getClassNameFactory'
+
+const getClassName = getClassNameFactory('Logos', styles)
+
+export type LogosProps = {
+  logos: Array<{
+    alt: string
+    imageUrl: string
+  }>
+}
+
+export const Logos: ComponentConfig<LogosProps> = {
+  fields: {
+    logos: {
+      type: 'array',
+      getItemSummary: (item, i) => item.alt || `Feature #${i}`,
+      defaultItemProps: {
+        alt: '',
+        imageUrl: '',
+      },
+      arrayFields: {
+        alt: { type: 'text' },
+        imageUrl: { type: 'text' },
+      },
+    },
+  },
+  defaultProps: {
+    logos: [
+      {
+        alt: 'google',
+        imageUrl:
+          'https://logolook.net/wp-content/uploads/2021/06/Google-Logo.png',
+      },
+      {
+        alt: 'google',
+        imageUrl:
+          'https://logolook.net/wp-content/uploads/2021/06/Google-Logo.png',
+      },
+      {
+        alt: 'google',
+        imageUrl:
+          'https://logolook.net/wp-content/uploads/2021/06/Google-Logo.png',
+      },
+      {
+        alt: 'google',
+        imageUrl:
+          'https://logolook.net/wp-content/uploads/2021/06/Google-Logo.png',
+      },
+      {
+        alt: 'google',
+        imageUrl:
+          'https://logolook.net/wp-content/uploads/2021/06/Google-Logo.png',
+      },
+    ],
+  },
+  render: ({ logos }) => {
+    return (
+      <Section className={getClassName()}>
+        <div className={getClassName('items')}>
+          {logos.map((item, i) => (
+            <div key={i} className={getClassName('item')}>
+              <img
+                className={getClassName('image')}
+                alt={item.alt}
+                src={item.imageUrl}
+                height={64}
+              ></img>
+            </div>
+          ))}
+        </div>
+      </Section>
+    )
+  },
+}

package/src/editor/blocks/Logos/styles.module.css

@@ -0,0 +1,13 @@
+.Logos {
+  background-color: var(--puck-color-grey-02);
+}
+
+.Logos-items {
+  display: flex;
+  justify-content: space-between;
+  padding-bottom: 64px;
+  padding-top: 64px;
+  gap: 24px;
+  filter: grayscale(1) brightness(100);
+  opacity: 0.8;
+}

package/src/editor/blocks/Paragraph/index.tsx

@@ -0,0 +1,95 @@
+import { ALargeSmall, AlignLeft } from 'lucide-react'
+
+import { Section } from '../../components/Section'
+import { withLayout } from '../../components/Layout'
+import type { ComponentConfig } from '@measured/puck'
+import type { WithLayout } from '../../components/Layout'
+
+export type ParagraphProps = WithLayout<{
+  align: 'left' | 'center' | 'right'
+  text?: string
+  padding?: string
+  size?: 's' | 'm' | 'l'
+  italic?: boolean
+  bold?: boolean
+  maxWidth?: string
+}>
+
+const ParagraphInner: ComponentConfig<ParagraphProps> = {
+  fields: {
+    text: {
+      label: 'Text',
+      type: 'textarea',
+      contentEditable: true,
+    },
+    size: {
+      label: 'Size',
+      type: 'select',
+      labelIcon: <ALargeSmall size={16} />,
+      options: [
+        { label: 'S', value: 's' },
+        { label: 'M', value: 'm' },
+        { label: 'L', value: 'l' },
+      ],
+    },
+    italic: {
+      label: 'Italic',
+      type: 'radio',
+      options: [
+        { label: 'true', value: true },
+        { label: 'false', value: false },
+      ],
+    },
+    bold: {
+      label: 'Bold',
+      type: 'radio',
+      options: [
+        { label: 'true', value: true },
+        { label: 'false', value: false },
+      ],
+    },
+    align: {
+      label: 'Text Alignment',
+      type: 'radio',
+      labelIcon: <AlignLeft size={16} />,
+      options: [
+        { label: 'Left', value: 'left' },
+        { label: 'Center', value: 'center' },
+        { label: 'Right', value: 'right' },
+      ],
+    },
+    maxWidth: { label: 'Maximum Width', type: 'text' },
+  },
+  defaultProps: {
+    align: 'left',
+    text: 'Paragraph',
+    size: 'm',
+  },
+  render: ({ align, text, italic, bold, size, maxWidth }) => {
+    return (
+      <Section maxWidth={maxWidth}>
+        <p
+          style={{
+            display: 'flex',
+            textAlign: align,
+            width: '100%',
+            fontStyle: italic ? 'italic' : 'normal',
+            fontWeight: bold ? 700 : 400,
+            fontSize: size === 'l' ? '28px' : size === 'm' ? '20px' : '16px',
+            maxWidth,
+            justifyContent:
+              align === 'center'
+                ? 'center'
+                : align === 'right'
+                  ? 'flex-end'
+                  : 'flex-start',
+          }}
+        >
+          {text}
+        </p>
+      </Section>
+    )
+  },
+}
+
+export const Paragraph = withLayout(ParagraphInner)

package/src/editor/blocks/Paragraph/styles.module.css

@@ -0,0 +1,4 @@
+.Text {
+  line-height: 1.5;
+  padding: 0px;
+}