rankrunners-cms 0.0.1

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

@@ -0,0 +1,45 @@
+import { spacingOptions } from '../../options'
+import styles from './styles.module.css'
+import type { ComponentConfig } from '@measured/puck'
+import getClassNameFactory from '../../utils/getClassNameFactory'
+
+const getClassName = getClassNameFactory('Space', styles)
+
+export type SpaceProps = {
+  direction?: '' | 'vertical' | 'horizontal'
+  size: string
+}
+
+export const Space: ComponentConfig<SpaceProps> = {
+  label: 'Space',
+  fields: {
+    size: {
+      label: 'Size',
+      type: 'select',
+      options: spacingOptions,
+    },
+    direction: {
+      label: 'Direction',
+      type: 'radio',
+      options: [
+        { value: 'vertical', label: 'Vertical' },
+        { value: 'horizontal', label: 'Horizontal' },
+        { value: '', label: 'Both' },
+      ],
+    },
+  },
+  defaultProps: {
+    direction: '',
+    size: '24px',
+  },
+  inline: true,
+  render: ({ direction, size, puck }) => {
+    return (
+      <div
+        ref={puck.dragRef}
+        className={getClassName(direction ? { [direction]: direction } : {})}
+        style={{ '--size': size } as any}
+      />
+    )
+  },
+}

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

@@ -0,0 +1,14 @@
+.Space {
+  display: block;
+  height: var(--size);
+  width: var(--size);
+}
+
+.Space--vertical {
+  width: 100%;
+}
+
+.Space--horizontal {
+  width: var(--size);
+  height: 100%;
+}

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

@@ -0,0 +1,58 @@
+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('Stats', styles)
+
+export type StatsProps = {
+  items: Array<{
+    title: string
+    description: string
+  }>
+}
+
+export const Stats: ComponentConfig<StatsProps> = {
+  fields: {
+    items: {
+      type: 'array',
+      getItemSummary: (item, i) => item.title || `Feature #${i}`,
+      defaultItemProps: {
+        title: 'Stat',
+        description: '1,000',
+      },
+      arrayFields: {
+        title: {
+          type: 'text',
+          contentEditable: true,
+        },
+        description: {
+          type: 'text',
+          contentEditable: true,
+        },
+      },
+    },
+  },
+  defaultProps: {
+    items: [
+      {
+        title: 'Stat',
+        description: '1,000',
+      },
+    ],
+  },
+  render: ({ items }) => {
+    return (
+      <Section className={getClassName()} maxWidth={'916px'}>
+        <div className={getClassName('items')}>
+          {items.map((item, i) => (
+            <div key={i} className={getClassName('item')}>
+              <div className={getClassName('label')}>{item.title}</div>
+              <div className={getClassName('value')}>{item.description}</div>
+            </div>
+          ))}
+        </div>
+      </Section>
+    )
+  },
+}

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

@@ -0,0 +1,64 @@
+.Stats-items {
+  background-image: linear-gradient(
+    120deg,
+    var(--puck-color-azure-03) 0%,
+    var(--puck-color-azure-05) 100%
+  );
+  border-radius: 24px;
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-gap: 72px;
+  align-items: center;
+  justify-content: space-between;
+  margin: 0 auto;
+  max-width: 768px;
+  padding: 64px 16px;
+}
+
+@media (min-width: 768px) {
+  .Stats-items {
+    padding: 64px 24px;
+  }
+}
+
+@media (min-width: 1024px) {
+  .Stats-items {
+    grid-template-columns: 1fr 1fr;
+    padding: 128px 24px;
+    max-width: 100%;
+  }
+}
+
+.Stats-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  color: white;
+  gap: 8px;
+  width: 100%;
+  text-align: center;
+}
+
+.Stats-icon {
+  border-radius: 256px;
+  background: var(--puck-color-azure-09);
+  color: var(--puck-color-azure-06);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 64px;
+  height: 64px;
+}
+
+.Stats-label {
+  font-size: 22px;
+  text-align: center;
+  font-weight: 600;
+  opacity: 0.8;
+}
+
+.Stats-value {
+  font-size: 72px;
+  line-height: 1;
+  font-weight: 700;
+}

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

@@ -0,0 +1,75 @@
+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 TextProps = WithLayout<{
+  align: 'left' | 'center' | 'right'
+  text?: string
+  padding?: string
+  size?: 's' | 'm'
+  maxWidth?: string
+}>
+
+const TextInner: ComponentConfig<TextProps> = {
+  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' },
+      ],
+    },
+    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: 'Text',
+    size: 'm',
+  },
+  render: ({ align, text, size, maxWidth }) => {
+    return (
+      <Section maxWidth={maxWidth}>
+        <span
+          style={{
+            display: 'flex',
+            textAlign: align,
+            width: '100%',
+            fontSize: size === 'm' ? '20px' : '16px',
+            fontWeight: 300,
+            maxWidth,
+            justifyContent:
+              align === 'center'
+                ? 'center'
+                : align === 'right'
+                  ? 'flex-end'
+                  : 'flex-start',
+          }}
+        >
+          {text}
+        </span>
+      </Section>
+    )
+  },
+}
+
+export const Text = withLayout(TextInner)

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

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

package/src/editor/components/Layout/index.tsx

@@ -0,0 +1,160 @@
+import { forwardRef } from 'react'
+import { spacingOptions } from '../../options'
+import styles from './styles.module.css'
+import type {
+  ComponentConfig,
+  DefaultComponentProps,
+  ObjectField,
+} from '@measured/puck'
+import type { CSSProperties, ReactNode } from 'react'
+import getClassNameFactory from '../../utils/getClassNameFactory'
+
+const getClassName = getClassNameFactory('Layout', styles)
+
+type LayoutFieldProps = {
+  padding?: string
+  spanCol?: number
+  spanRow?: number
+  grow?: boolean
+}
+
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export type WithLayout<Props extends DefaultComponentProps> = Props & {
+  layout?: LayoutFieldProps
+}
+
+type LayoutProps = WithLayout<{
+  children: ReactNode
+  className?: string
+  style?: CSSProperties
+}>
+
+export const layoutField: ObjectField<LayoutFieldProps> = {
+  type: 'object',
+  objectFields: {
+    spanCol: {
+      label: 'Grid Columns',
+      type: 'number',
+      min: 1,
+      max: 12,
+    },
+    spanRow: {
+      label: 'Grid Rows',
+      type: 'number',
+      min: 1,
+      max: 12,
+    },
+    grow: {
+      label: 'Flex Grow',
+      type: 'radio',
+      options: [
+        { label: 'true', value: true },
+        { label: 'false', value: false },
+      ],
+    },
+    padding: {
+      type: 'select',
+      label: 'Vertical Padding',
+      options: [{ label: '0px', value: '0px' }, ...spacingOptions],
+    },
+  },
+}
+
+const Layout = forwardRef<HTMLDivElement, LayoutProps>(
+  ({ children, className, layout, style }, ref) => {
+    return (
+      <div
+        className={className}
+        style={{
+          gridColumn: layout?.spanCol
+            ? `span ${Math.max(Math.min(layout.spanCol, 12), 1)}`
+            : undefined,
+          gridRow: layout?.spanRow
+            ? `span ${Math.max(Math.min(layout.spanRow, 12), 1)}`
+            : undefined,
+          paddingTop: layout?.padding,
+          paddingBottom: layout?.padding,
+          flex: layout?.grow ? '1 1 0' : undefined,
+          ...style,
+        }}
+        ref={ref}
+      >
+        {children}
+      </div>
+    )
+  },
+)
+
+Layout.displayName = 'Layout'
+
+export { Layout }
+
+export function withLayout<
+  // eslint-disable-next-line @typescript-eslint/naming-convention
+  ThisComponentConfig extends ComponentConfig<any> = ComponentConfig,
+>(componentConfig: ThisComponentConfig): ThisComponentConfig {
+  return {
+    ...componentConfig,
+    fields: {
+      ...componentConfig.fields,
+      layout: layoutField,
+    },
+    defaultProps: {
+      ...componentConfig.defaultProps,
+      layout: {
+        spanCol: 1,
+        spanRow: 1,
+        padding: '0px',
+        grow: false,
+        ...componentConfig.defaultProps?.layout,
+      },
+    },
+    resolveFields: (_, params) => {
+      if (params.parent?.type === 'Grid') {
+        return {
+          ...componentConfig.fields,
+          layout: {
+            ...layoutField,
+            objectFields: {
+              spanCol: layoutField.objectFields.spanCol,
+              spanRow: layoutField.objectFields.spanRow,
+              padding: layoutField.objectFields.padding,
+            },
+          },
+        }
+      }
+      if (params.parent?.type === 'Flex') {
+        return {
+          ...componentConfig.fields,
+          layout: {
+            ...layoutField,
+            objectFields: {
+              grow: layoutField.objectFields.grow,
+              padding: layoutField.objectFields.padding,
+            },
+          },
+        }
+      }
+
+      return {
+        ...componentConfig.fields,
+        layout: {
+          ...layoutField,
+          objectFields: {
+            padding: layoutField.objectFields.padding,
+          },
+        },
+      }
+    },
+    inline: true,
+    render: (props) => (
+      <Layout
+        className={getClassName()}
+        layout={props.layout as LayoutFieldProps}
+        ref={props.puck.dragRef}
+      >
+        {componentConfig.render(props)}
+      </Layout>
+    ),
+  }
+}

package/src/editor/components/Layout/styles.module.css

@@ -0,0 +1,3 @@
+.Layout {
+  display: block;
+}

package/src/editor/components/Section/index.tsx

@@ -0,0 +1,31 @@
+import { forwardRef } from 'react'
+import styles from './styles.module.css'
+import type { CSSProperties, ReactNode } from 'react'
+import getClassNameFactory from '../../utils/getClassNameFactory'
+
+const getClassName = getClassNameFactory('Section', styles)
+
+export type SectionProps = {
+  className?: string
+  children: ReactNode
+  maxWidth?: string
+  style?: CSSProperties
+}
+
+export const Section = forwardRef<HTMLDivElement, SectionProps>(
+  ({ children, className, maxWidth = '1280px', style = {} }, ref) => {
+    return (
+      <div
+        className={`${getClassName()}${className ? ` ${className}` : ''}`}
+        style={{
+          ...style,
+        }}
+        ref={ref}
+      >
+        <div className={getClassName('inner')} style={{ maxWidth }}>
+          {children}
+        </div>
+      </div>
+    )
+  },
+)

package/src/editor/components/Section/styles.module.css

@@ -0,0 +1,23 @@
+.Section:not(.Section .Section) {
+  padding-inline-start: 16px;
+  padding-inline-end: 16px;
+}
+
+@media (min-width: 768px) {
+  .Section:not(.Section .Section) {
+    padding-inline-start: 24px;
+    padding-inline-end: 24px;
+  }
+}
+
+.Section-inner {
+  margin-inline-start: auto;
+  margin-inline-end: auto;
+  height: 100%;
+  width: 100%;
+}
+
+.Section .Section .Section-inner {
+  margin-inline-start: 0;
+  margin-inline-end: 0;
+}

package/src/editor/index.tsx

@@ -0,0 +1,63 @@
+import { Button } from "./blocks/Button";
+import { Card } from "./blocks/Card";
+import { Grid } from "./blocks/Grid";
+import { Hero } from "./blocks/Hero";
+import { Heading } from "./blocks/Heading";
+import { Flex } from "./blocks/Flex";
+import { Logos } from "./blocks/Logos";
+import { Stats } from "./blocks/Stats";
+import { Text } from "./blocks/Text";
+import { Space } from "./blocks/Space";
+
+import { Paragraph } from "./blocks/Paragraph";
+import { Container } from "./blocks/Container";
+import type { CategoriesType, CMSUserConfig, ComponentsType } from "./types";
+import type { RootConfig } from "@measured/puck";
+
+export * from "./types";
+
+export const defaultCategories: CategoriesType<
+  ["layout", "typography", "interactive", "other"]
+> = {
+  layout: {
+    components: ["Grid", "Flex", "Space", "Container"],
+  },
+  typography: {
+    components: ["Heading", "Text", "Paragraph"],
+  },
+  interactive: {
+    title: "Actions",
+    components: ["Button"],
+  },
+  other: {
+    title: "Other",
+    components: ["Card", "Hero", "Logos", "Stats"],
+  },
+};
+
+export const defaultComponents: ComponentsType = {
+  Button,
+  Card,
+  Grid,
+  Container,
+  Hero,
+  Heading,
+  Flex,
+  Logos,
+  Stats,
+  Text,
+  Paragraph,
+  Space,
+};
+
+// We avoid the name config as next gets confused
+export const createCMSConfig = <K, C extends string[]>(
+  root: RootConfig,
+  categories: CategoriesType<C>,
+  components: ComponentsType
+): CMSUserConfig<K, C> =>
+  ({
+    root,
+    categories: { ...defaultCategories, ...categories },
+    components: { ...defaultComponents, ...components },
+  } as unknown as CMSUserConfig<K, C>);

package/src/editor/options.ts

@@ -0,0 +1,37 @@
+export const spacingOptions = [
+  { label: '8px', value: '8px' },
+  { label: '16px', value: '16px' },
+  { label: '24px', value: '24px' },
+  { label: '32px', value: '32px' },
+  { label: '40px', value: '40px' },
+  { label: '48px', value: '48px' },
+  { label: '56px', value: '56px' },
+  { label: '64px', value: '64px' },
+  { label: '72px', value: '72px' },
+  { label: '80px', value: '80px' },
+  { label: '88px', value: '88px' },
+  { label: '96px', value: '96px' },
+  { label: '104px', value: '104px' },
+  { label: '112px', value: '112px' },
+  { label: '120px', value: '120px' },
+  { label: '128px', value: '128px' },
+  { label: '136px', value: '136px' },
+  { label: '144px', value: '144px' },
+  { label: '152px', value: '152px' },
+  { label: '160px', value: '160px' },
+]
+
+export const spacingRemOptions = [
+  { label: '78rem', value: '78rem' },
+  { label: '64rem', value: '64rem' },
+  { label: '48rem', value: '48rem' },
+  { label: '42rem', value: '42rem' },
+  { label: '36rem', value: '36rem' },
+  { label: '32rem', value: '32rem' },
+  { label: '28rem', value: '28rem' },
+  { label: '24rem', value: '24rem' },
+  { label: '20rem', value: '20rem' },
+  { label: '16rem', value: '16rem' },
+  { label: '12rem', value: '12rem' },
+  { label: '8rem', value: '8rem' },
+]

package/src/editor/types.ts

@@ -0,0 +1,60 @@
+import type { ParagraphProps } from "./blocks/Paragraph";
+import type { ButtonProps } from "./blocks/Button";
+import type { CardProps } from "./blocks/Card";
+import type { GridProps } from "./blocks/Grid";
+import type { HeroProps } from "./blocks/Hero";
+import type { HeadingProps } from "./blocks/Heading";
+import type { FlexProps } from "./blocks/Flex";
+import type { LogosProps } from "./blocks/Logos";
+import type { StatsProps } from "./blocks/Stats";
+import type { TextProps } from "./blocks/Text";
+import type { SpaceProps } from "./blocks/Space";
+import type {
+  Config,
+  Data,
+  DefaultComponentProps,
+  RootConfig,
+} from "@measured/puck";
+import type { ContainerProps } from "./blocks/Container";
+
+export type CategoryType = {
+  title?: string;
+  components: string[];
+};
+
+export type CategoriesType<C extends string[]> = Record<
+  C[number],
+  CategoryType
+>;
+
+export type ComponentsType = Record<string, DefaultComponentProps>;
+
+export type DefaultComponents = {
+  Button: ButtonProps;
+  Card: CardProps;
+  Grid: GridProps;
+  Container: ContainerProps;
+  Hero: HeroProps;
+  Heading: HeadingProps;
+  Flex: FlexProps;
+  Logos: LogosProps;
+  Stats: StatsProps;
+  Text: TextProps;
+  Paragraph: ParagraphProps;
+  Space: SpaceProps;
+};
+
+export type CMSUserConfig<Components, ExtraCategories> = Config<{
+  components: DefaultComponents & Components;
+  root: RootConfig;
+  categories: ["layout", "typography", "interactive", "other"] &
+    ExtraCategories;
+  fields: {
+    userField: {
+      type: "userField";
+      option: boolean;
+    };
+  };
+}>;
+
+export type CMSUserData<Components> = Data<DefaultComponents & Components>;

package/src/editor/utils/generateId.ts

@@ -0,0 +1,2 @@
+export const generateId = (type?: string | number) =>
+  type ? `${type}-${crypto.randomUUID()}` : crypto.randomUUID()