Semantic colors codemod

docs/migrating.storybook.mdx

@@ -185,7 +185,7 @@ export const GreyList = styled.ul`
 `;
 ```
 
-Codemode migrates the colors automatically:
+Codemode to automatically migrate `Colors`:
 
 ```bash
 npx jscodeshift --parser=tsx --extension=js,jsx,ts,tsx -t node_modules/@freenow/wave/lib/cjs/codemods/colors-to-css-vars.js path/to/src
@@ -194,6 +194,12 @@ npx jscodeshift --parser=tsx --extension=js,jsx,ts,tsx -t node_modules/@freenow/
 Disclaimer: This codemod transforms usages of `Colors` to our bare colors CSS variables to ensure we don't introduce breaking changes, that being said,
 we recommend using semantic tokens instead as a best practice and offer a `getSemanticValue` API for just that.
 
+Codemode to automatically migrate `SemanticColors`:
+
+```bash
+npx jscodeshift --parser=tsx --extension=js,jsx,ts,tsx -t node_modules/@freenow/wave/lib/cjs/codemods/semantic-colors-to-new-theme.js path/to/src
+```
+
 ### `inverted` prop is removed
 
 With the introduction of our new dark scheme in Wave, we've removed the `inverted` property
@@ -260,18 +266,6 @@ Automatic migration via codemod:
 npx jscodeshift --parser=tsx --extension=js,jsx,ts,tsx -t node_modules/@freenow/wave/lib/cjs/codemods/tooltip-placement.js path/to/src
 ```
 
-### Deprecated icons are removed. Names of the rest is synced with Figma
-
-List of removed icons and their alternatives:
-
-<IconMappingsTable />
-
-Automatic migration is done via codemod:
-
-```bash
-npx jscodeshift --parser=tsx --extension=js,jsx,ts,tsx -t node_modules/@freenow/wave/lib/cjs/codemods/deprecated-icons.js path/to/src
-```
-
 ### Text's `weak` property renamed to `secondary`
 
 The `weak` property was the initial way to indicate secondary information in a `Text` component, it has been deprecated for a while in favour of
@@ -293,3 +287,15 @@ Codemod for migration:
 ```bash
 npx jscodeshift --parser=tsx --extension=js,jsx,ts,tsx -t node_modules/@freenow/wave/lib/cjs/codemods/block-to-width-100.js path/to/src
 ```
+
+### Deprecated icons are removed. Names of the rest is synced with Figma
+
+List of removed icons and their alternatives:
+
+<IconMappingsTable />
+
+Automatic migration is done via codemod:
+
+```bash
+npx jscodeshift --parser=tsx --extension=js,jsx,ts,tsx -t node_modules/@freenow/wave/lib/cjs/codemods/deprecated-icons.js path/to/src
+```

src/codemods/__testfixtures__/semantic-colors-to-new-theme/color-in-JSX-multi-import.input.tsx

@@ -0,0 +1,5 @@
+import { CloseIcon, SemanticColors } from '@freenow/wave';
+
+export const CloseIconWrapper = () => (
+    <CloseIcon data-testid="dismissBanner" color={SemanticColors.button.primary.backgroundDisabled} cursor="pointer" size={18} />
+);

src/codemods/__testfixtures__/semantic-colors-to-new-theme/color-in-JSX-multi-import.output.tsx

@@ -0,0 +1,5 @@
+import { CloseIcon, getSemanticValue } from '@freenow/wave';
+
+export const CloseIconWrapper = () => (
+    <CloseIcon data-testid="dismissBanner" color={getSemanticValue('background-element-disabled-default')} cursor="pointer" size={18} />
+);

src/codemods/__testfixtures__/semantic-colors-to-new-theme/color-in-multi-quasis.input.tsx

@@ -0,0 +1,28 @@
+import { SemanticColors, Spaces, Text } from '@freenow/wave'
+import styled from 'styled-components'
+
+export const DropdownList = styled.div`
+    position: absolute;
+    background: ${SemanticColors.background.primary};
+    overflow-y: auto;
+    z-index: 5;
+    top: 72px;
+    left: 0;
+    padding: ${Spaces[1]} 0;
+    width: 100%;
+    border-radius: 4px;
+    cursor: auto;
+`
+
+export const DropdownItem = styled(Text).attrs({ as: 'p' })<{ active?: boolean }>`
+    cursor: pointer;
+    padding: 10px 12px;
+    background-color: ${props =>
+        props.active ? SemanticColors.background.infoEmphasized : SemanticColors.background.primary};
+    color: ${SemanticColors.text.primary};
+
+    &:hover {
+        background-color: ${SemanticColors.background.infoEmphasized};
+        color: ${SemanticColors.text.secondary};
+    }
+`

src/codemods/__testfixtures__/semantic-colors-to-new-theme/color-in-multi-quasis.output.tsx

@@ -0,0 +1,28 @@
+import { Spaces, Text, getSemanticValue } from '@freenow/wave'
+import styled from 'styled-components'
+
+export const DropdownList = styled.div`
+    position: absolute;
+    background: ${getSemanticValue('background-element-neutral-default')};
+    overflow-y: auto;
+    z-index: 5;
+    top: 72px;
+    left: 0;
+    padding: ${Spaces[1]} 0;
+    width: 100%;
+    border-radius: 4px;
+    cursor: auto;
+`
+
+export const DropdownItem = styled(Text).attrs({ as: 'p' })<{ active?: boolean }>`
+    cursor: pointer;
+    padding: 10px 12px;
+    background-color: ${props =>
+        props.active ? getSemanticValue('background-element-info-emphasized') : getSemanticValue('background-element-neutral-default')};
+    color: ${getSemanticValue('foreground-primary')};
+
+    &:hover {
+        background-color: ${getSemanticValue('background-element-info-emphasized')};
+        color: ${getSemanticValue('foreground-neutral-emphasized')};
+    }
+`

src/codemods/__testfixtures__/semantic-colors-to-new-theme/color-in-single-quasis.input.tsx

@@ -0,0 +1,6 @@
+import { Headline, SemanticColors } from '@freenow/wave'
+import styled from 'styled-components'
+
+export const DetailsHeadline = styled(Headline).attrs({ as: 'h3', size: 'm' })`
+    color: ${SemanticColors.text.secondary};
+`

src/codemods/__testfixtures__/semantic-colors-to-new-theme/color-in-single-quasis.output.tsx

@@ -0,0 +1,6 @@
+import { Headline, getSemanticValue } from '@freenow/wave'
+import styled from 'styled-components'
+
+export const DetailsHeadline = styled(Headline).attrs({ as: 'h3', size: 'm' })`
+    color: ${getSemanticValue('foreground-neutral-emphasized')};
+`

src/codemods/__testfixtures__/semantic-colors-to-new-theme/no-colors-usage.input.tsx

@@ -0,0 +1,20 @@
+import { Box, ChevronUp } from '@freenow/wave';
+import { useEffect } from 'react';
+
+export const AlignedChevron = () => {
+    useEffect(
+        () =>
+            function cleanUp() {
+                // when parsing back from AST to source, function declarations after an arrow function
+                // are wrapped in parenthesis, by expecting the output to not have the parenthesis we
+                // can test that instead of parsing back we are simply returning the original source
+            },
+        [],
+    )
+
+    return (
+        <Box display="flex" alignItems="center">
+            <ChevronUp color="red" />
+        </Box>
+    );
+}

src/codemods/__testfixtures__/semantic-colors-to-new-theme/no-colors-usage.output.tsx

@@ -0,0 +1,20 @@
+import { Box, ChevronUp } from '@freenow/wave';
+import { useEffect } from 'react';
+
+export const AlignedChevron = () => {
+    useEffect(
+        () =>
+            function cleanUp() {
+                // when parsing back from AST to source, function declarations after an arrow function
+                // are wrapped in parenthesis, by expecting the output to not have the parenthesis we
+                // can test that instead of parsing back we are simply returning the original source
+            },
+        [],
+    )
+
+    return (
+        <Box display="flex" alignItems="center">
+            <ChevronUp color="red" />
+        </Box>
+    );
+}

src/codemods/__testfixtures__/semantic-colors-to-new-theme/theme-get-in-JSX.input.tsx

@@ -0,0 +1,5 @@
+import { CloseIcon, themeGet } from '@freenow/wave';
+
+export const CloseIconWrapper = () => (
+    <CloseIcon data-testid="dismissBanner" color={themeGet('semanticColors.text.primary')} cursor="pointer" size={18} />
+);

src/codemods/__testfixtures__/semantic-colors-to-new-theme/theme-get-in-JSX.output.tsx

@@ -0,0 +1,5 @@
+import { CloseIcon, getSemanticValue } from '@freenow/wave';
+
+export const CloseIconWrapper = () => (
+    <CloseIcon data-testid="dismissBanner" color={getSemanticValue('foreground-primary')} cursor="pointer" size={18} />
+);

src/codemods/__testfixtures__/semantic-colors-to-new-theme/theme-get-in-template-literal.input.tsx

@@ -0,0 +1,6 @@
+import { Text, themeGet } from '@freenow/wave'
+import styled from 'styled-components'
+
+export const TextSizeText = styled(Text)`
+    color: ${themeGet('semanticColors.text.primary')};
+`

src/codemods/__testfixtures__/semantic-colors-to-new-theme/theme-get-in-template-literal.output.tsx

@@ -0,0 +1,6 @@
+import { Text, getSemanticValue } from '@freenow/wave'
+import styled from 'styled-components'
+
+export const TextSizeText = styled(Text)`
+    color: ${getSemanticValue('foreground-primary')};
+`

src/codemods/__tests__/semantic-colors-to-new-theme-test.ts

@@ -0,0 +1,25 @@
+jest.autoMockOff();
+import { defineTest } from 'jscodeshift/dist/testUtils';
+
+const tests = [
+    'color-in-JSX-multi-import',
+    'no-colors-usage',
+    'theme-get-in-JSX',
+    'theme-get-in-template-literal',
+    'color-in-single-quasis',
+    'color-in-multi-quasis'
+];
+
+describe('semantic-colors-to-new-theme', () => {
+    tests.forEach(test =>
+        defineTest(
+            __dirname,
+            'semantic-colors-to-new-theme',
+            { quote: 'single' },
+            `semantic-colors-to-new-theme/${test}`,
+            {
+                parser: 'tsx'
+            }
+        )
+    );
+});

src/codemods/colors-to-css-vars.ts

@@ -7,8 +7,7 @@ import {
     ImportDeclaration,
     JSCodeshift,
     Node,
-    TemplateLiteral,
-    TSTypeReference
+    TemplateLiteral
 } from 'jscodeshift';
 import { Options } from 'recast';