poc: claude code migration of flex

[JonasBa]

This is just a test of analyze-styled tool and claude code performing a migration.

I am performing a migration in where I would like to migrate all styled components like  │
│   styled(div) that only contain flex rules to instead use Flex component from                          │
│   components/core/layout. To do this, you can invoke a tool called analyzed-styled.ts via node         │
│   analyze-styled.ts, which will write the files that are candidates for change into                    │
│   analyze-styled.txt. The analyze styled script will create newline entries inside analyze-styled.txt  │
│   with the schema of ${file}:${line}:${column}                                                         │
│                                                                                                        │
│   Here are some things for you to know:                                                                │
│   - Read the implementation of analyze-styled.ts and look at the readme. I want you to call     │
│   the tool with -n 10 argument.
│   - Read the implementaton of our Flex component inside  components/core/layout so that you    │
│   understand it's API.                                                                                 │
│   - The script can produce false positives. If the change you are trying to make does not only         │
│   contain flex rules, but might contain sub selectors or some expression that is not flexbox related,  │
│   you should not make any changes to it.                                                                      │
│   - When replacing the component, do not use aliases like const Container = Flex, instead, use the     │
│   Flex directly.                                                                                       │
│   - Make sure to replace all occurrences in a given file that you are editing                            │
│   - Do not add any code comments                                                                           │
│   - Do not read README.md                                                                              │
│   Good luck

[JonasBa]

ButtonBar 🤔

[JonasBa]

This is a mistake, it should not modify these instances because overflowEllipsis adds display: block, so this isn't actually using flex. Sort of expected that it tripped itself on this problem given that it's extending Column, which is using display: flex (I made that same mistake)

[JonasBa]

In this case, ProjectBadgeContainer should have become a react component that renders children and wrap them in flex