refactor: card header file organisation and descriptionRadio story

[jamdelion]

Another minor refactor that results in a large PR 😅

All I've done is split up CardHeader.tsx into smaller files (e.g. styled and types) and this has changed a lot of imports.

One other change in this PR is adding a storybook file for descriptionRadio as I was wondering if it would be useful for the upcoming feedback component work. I'm probably not going to use it in the end but still thought plugging storybook gaps might be useful!

[github-actions]

Removed vultr server and associated DNS entries

[DafyddLlyr]

Very much in favour or tidy ups and organisations like this 🙌

One suggestion - it might be a little cleaner to use an index.ts for the main file in a module? So in this PR /CardHeader/CardHeader.ts which holds the main component would become /CardHeader/index.ts

This would let us use import syntax like this -

import { CardHeader } from "@planx/components/shared/Preview/CardHeader";

I think one of the nicest benefits from this approach is that it essentially forces us to be a bit more strict in having a folder with a single "main" component, alongside associated styles.ts, types.ts etc

[jamdelion]

Very much in favour or tidy ups and organisations like this 🙌

One suggestion - it might be a little cleaner to use an index.ts for the main file in a module? So in this PR /CardHeader/CardHeader.ts which holds the main component would become /CardHeader/index.ts

This would let us use import syntax like this -

import { CardHeader } from "@planx/components/shared/Preview/CardHeader";

I think one of the nicest benefits from this approach is that it essentially forces us to be a bit more strict in having a folder with a single "main" component, alongside associated styles.ts, types.ts etc

Thanks Daf! I have updated the file to not use a default export so that we can import in the way you suggested import { CardHeader } from....

As for renaming the file to index.ts, I have conflicting feelings about this (and have had a few debates in the past at previous workplaces!). Personally I dislike having a lot of index files, as I find it hard to navigate by looking purely at the path, rather than things being clear by the filename. I often use Cmd + P to navigate in VSCode and usually go for the filename as my first search term.

But I guess the trade off is having the path name complicated by the double CardHeader.

[DafyddLlyr]

Hey there, sorry for the slow reply here and for holding you up.

It's a very fair point - we're sort of in this world of less meaningful file names already with a lot of Editor.tsx and Public.tsx files for each graph component. It's certainly frustrating - I hit the same Cmd + P issue in VSCode a whole lot also.

I did think of suggesting the use of barrell files which is the the pattern that Bulletproof React uses - this repo is always a reliable touchpoint I find. This would give meaningful filenames and terse imports. Here's an example - https://github.com/alan2207/bulletproof-react/blob/master/apps/react-vite/src/components/ui/form/index.ts

Sidenote - I really want to talk properly about restructuring and rationalising the React app a lot so let's come back to this one as a template!

However, it turns out Vite specifically says not to follow this pattern, so I'd say this is a no-go as an option - https://vite.dev/guide/performance#avoid-barrel-files 🙃

I think this is one is worth opening up to the wider dev team (asap so we're not blocking!) but I'm leaning towards your proposal here which favours DX and bundling here over any other option 👍