[Migration]: box -> boxNew

[JulianNymark]

Description

Component Checklist 📝

• JSDoc
• Examples
• Documentation / Decision Records
• Storybook
• Style mappings (@navikt/core/css/config/_mappings.js)
• Component tokens (@navikt/core/css/tokens.json)
• CSS class deprecations (@navikt/aksel-stylelint/src/deprecations.ts)
• Exports (@navikt/core/react/src/index.ts and @navikt/core/react/package.json)
• New component? CSS import (@navikt/core/css/index.css)
• Breaking change? Update migration guide. Consider codemod.
• Changeset (Format: <Component>: <gitmoji?> <Text>. E.g. "Button: ✨ Add feature xyz.")

[changeset-bot]

⚠️ No Changeset found

Latest commit: 1d119bd

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[github-actions]

Storybook demo / Chromatic

24124919d | 91 components | 135 stories

[JulianNymark]

it's currently missing a change to using BoxNew (but does the logic w/ lookups into the legacyTokenConf object look ok?) it works in this one minimal test i made too, but i can't help but think it's missing something? (apart from BoxNew ofc) 🤔

[KenAJoh]

it's currently missing a change to using BoxNew (but does the logic w/ lookups into the legacyTokenConf object look ok?) it works in this one minimal test i made too, but i can't help but think it's missing something? (apart from BoxNew ofc) 🤔

Think it should work, token-name keys should match the names used for the props 🤞 But wouldn't hurt to skim over them to make sure.

[JulianNymark]

Decided to not be as cool and preserve existing localName, if you get the new box, it will always become BoxNew in code... I think this in a way makes it easier to search across your entire repo later and know you got all the boxes, but if you had AkselBox or SpecialBoxName somewhere in your codebase, it might be easier to miss if they kept that name?🤔. It's also fairly KISS to understand what's going on. old stuff is retained exactly as it was (only now your files get comments added to them).

suggestion, what about calling it something borderline overly verbose / ugly, but also indicate that it's "our" box, like AkselBoxNew? I think the intended DX here is that you have to look through every instance of all your boxes is code (old and new) and unify them, so you manually migrate all the old ones that couldn't be automigrated, and then renaming all the new ones to have the same / minimal name of Box. 🤔

There really doesn't seem to be a winning way of doing all the work for developers, we have to use two different names because there's no going around having multiple Box types during migration 😢. The more I think about it, the more I think i like Box for the new, and OldBox for the old ones... if everything migrates successfully, then you might be done already? (you might want to keep the name Box as is, since it's a short and simple name?. Increased chance of collisions with some other generic Box an app might have, but I also have a hunch that very few will have multiple Boxes in their app (in Nav apps).

[KenAJoh]

Code errors on build now, so cant test

[@navikt/aksel]: src/codemod/transforms/darkside/box-to-boxnew/box-to-boxnew.ts(68,43): error TS2339: Property 'name' does not exist on type 'JSXIdentifier | JSXNamespacedName | JSXMemberExpression'.
[@navikt/aksel]:   Property 'name' does not exist on type 'JSXMemberExpression'.
[@navikt/aksel]: src/codemod/transforms/darkside/box-to-boxnew/box-to-boxnew.ts(69,43): error TS2339: Property 'name' does not exist on type 'JSXIdentifier | JSXNamespacedName | JSXMemberExpression'.
[@navikt/aksel]:   Property 'name' does not exist on type 'JSXMemberExpression'.
[@navikt/aksel]: src/codemod/transforms/spacing/primitives-spacing/spacing.ts(5,3): error TS2724: '"../../../utils/ast"' has no exported member named 'findProp'. Did you mean 'findProps'?
[@navikt/aksel]: Process exited (exit code 2), completed in 1s 992ms

[JulianNymark]

@KenAJoh nice idempotency tests! (i forgot about those completely)