Create Development Kitchen

[jamie-lynch]

What is the purpose of this change?

This change adds the Development Kitchen.

What does this change?

• Rename @guardian/editorial package in package.json to @guardian/source-kitchen-react
• Reset the version number for @guardian/source-kitchen-react
• Rename editorial folder to kitchen
• Delete Android, iOS and Web directory level
• Update README.md with Dev Kitchen intro and stuff from discussion
• Update scripts to remove editorial paths
• Make kitchen components not independently publishable (i.e. delete package.jsons)
• Add release mechanism for kitchen
• Update contribution guidelines
• Add CODEOWNERS for current components

Before we merge, we must also:

• Release first version of kitchen from this branch
• Deprecate individual editorial (now kitchen) components on NPM
• Deprecate @guardian/editorial on NPM
• Write comms to the department (to be sent after we merge)

[jamie-lynch]

Does this component now need to be called something else (e.g. EditorialButton) as we can't use the package name to differentiate it from the standard Source Button?

[SiAdcock]

@guardian/dotcom-platform what do you think?

• EditorialButton
• PillarButton
• Something else?

[oliverlloyd]

Adding an option: ThemeButton?

[SiAdcock]

Thanks @oliverlloyd I personally think the word Theme is already used more generally to support, for example, the various Reader Revenue themes and the brand themes (see Figma). Do you see Theme as something specific to Format?

[oliverlloyd]

Format.Theme is a superset of Pillar which also includes Labs and SpecialReport

https://github.com/guardian/libs/blob/main/src/format.ts#L16

[SiAdcock]

In the migration to @guardian/libs, Format becomes ArticleFormat. In fact everything related to ArticleFormat gets an Article prefix. Maybe we should reflect that in Source too, with ArticleButton?

[oliverlloyd]

Wasn't it that ArticleFormat is named such because it specifically relates to articles? With the thinking being you would later have a ContainerFormat (or SliceFormat, SectionFormat?) which represents Fronts. SectionFormat would contain and array of articles which each have ArticleFormat.

I mention this because I don't think the same model exists for a button. They can be used everywhere in the editorial space and have a much simpler design pattern, one not limited to articles.

[oliverlloyd]

On the other hand, if we follow this thinking through, you'd have

<EditorialButton format={myFormatObject} />

where myFormatObject would be typed as ArticleFormat. So if you can only ever pass in ArticleFormat then maybe ArticleButton works?

🤷

[SiAdcock]

Good thoughts @oliverlloyd. I guess the format prop could expect something that's either an ArticleFormat or ContainerFormat But I think you're right in that <EditorialButton> better reflects the context in which this button can be used.

[jamie-lynch]

I've renamed to EditorialButton unless anyone has any last minute alternatives

[SiAdcock]

@guardian/dotcom-platform does this look okay to you? 🙏

[sndrs]

given that we're likely to reorganise the repo next quarter, what do you think about creating the DK in that (likely) image now?

e.g.

packages/
└── @guardian/
    └── source-kitchen-react/
        ├── index.ts
        ├── package.json
        ├── README.md
        └── tsconfig.json

this would also then allow us to get the various bits of pipeline tooling in place and working well for the DK before we need to start migrating anything else – in effect, the kitchen becomes our development kitchen as it proves our folder set up/pipeline etc

once that seems to be working well (perhaps with a dummy component, perhaps with a real life one) we can move editorial components to the kitchen and deprecate the current packages, and begin the process of publishing @guardian/source, @guardian/react-components (or whatever we alight on) in a proven env

it might also keep the changes smaller

[SiAdcock]

@sndrs

what do you think about creating the DK in that (likely) image now?

Great idea! I'm on board with the structure you have proposed

once that seems to be working well (perhaps with a dummy component, perhaps with a real life one) we can move editorial components to the kitchen and deprecate the current packages

I think this PR has a pipeline that already works, e.g. running yarn release:prerelease:kitchen actually publishes a pre-release. Is that what you mean?

it fits better if we end up going with @guardian/source and @guardian/react-components

With the naming, we were working on the premise of having three packages:

• @guardian/source: foundations
• @guardian/source-react: React components
• @guardian/source-kitchen-react: Kitchen components expressed in React

I like the fact that source-react keeps the branding in place i.e. clarity that these components are part of the Source Design System. Was the rationale for dropping source because some of these components would be part of the Editorial Design System?

i also think having a clunky old name like that implies more that this is not a finished product to the unwitting

💯

[jamie-lynch]

After an offline discussion we've agreed on:

• @guardian/source-foundations
• @guardian/source-react-components
• @guardian/source-react-components-development-kitchen

[SiAdcock]

Thanks @sndrs and @jamie-lynch for the discussion. I've added more detail to our Roadmap doc (here and here) explaining why we've chosen to publish Source as 3 separate packages.

[SiAdcock]

Let's get cooking! 🥘 🔥 👩‍🍳