docs: add localisation example to demo

[chrisvxd]

Quick demo of localisation using new demo route under /locales/[locale]/[...puckPath].

Kapture.2023-12-21.at.19.23.37.mp4

It uses object fields and context to provide localisation on the Heading component.

Things that should be included in this demo

• Localisations for Hero fields
• Localisations for other fields

Things that would generally improve localisations

• Dynamic fields #280
• Support dot notation for fields #142

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
puck-demo	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Dec 21, 2023 7:24pm
puck-docs	✅ Ready (Inspect)	Visit Preview		Dec 21, 2023 7:24pm

[chrisvxd]

Dropping updated approach based on discussions

export type TestProps = {
  language: "en" | "fr" | "es";
  title: {
    en?: string;
    fr?: string;
    es?: string;
  };
};

export const Test: ComponentConfig<TestProps> = {
  resolveFields: (data) => {
    const title: ObjectField<TestProps["title"]> = {
      type: "object",
      objectFields: {},
    };

    if (data.props.language === "en") {
      title.objectFields.en = {
        type: "text",
      };
    } else if (data.props.language === "fr") {
      title.objectFields.fr = {
        type: "text",
      };
    } else if (data.props.language === "es") {
      title.objectFields.es = {
        type: "text",
      };
    }

    return {
      language: {
        type: "radio",
        options: [
          { label: "English", value: "en" },
          { label: "French", value: "fr" },
          { label: "Spanish", value: "es" },
        ],
      },
      title,
    };
  },
  render: ({ language, title, puck: { isEditing } }) => {
    const i18nLang = useCurrentLocale();
    return <div>{title[isEditing ? language : i18nLang]}</div>;
  },
};