docs: add migration guide from v1 to v2 (#406)

--------- Signed-off-by: Nikolai Lopin <[email protected]> Co-authored-by: martimalek <[email protected]>
freenowtech · Jan 12, 2024 · c1c0afa · c1c0afa
1 parent ac8e9b8
commit c1c0afa
Show file tree

Hide file tree

Showing 7 changed files with 422 additions and 55 deletions.
diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
@@ -1,7 +1,8 @@
 import React from 'react';
 import { Preview } from '@storybook/react';
 import { themes } from '@storybook/theming';
-import { ClassicColors, ModernColors } from '../src/essentials/Colors/globalStyles';
+import { GlobalStyle as ClassicColors } from '../src/essentials/Colors/Colors';
+import { GlobalStyle as ModernColors } from '../src/essentials/Colors/ModernColors';
 import { getSemanticValue } from '../src/utils/cssVariables';
 
 const THEMES = {

diff --git a/docs/components/migration/CssVariablesMigrationTable.tsx b/docs/components/migration/CssVariablesMigrationTable.tsx
@@ -0,0 +1,38 @@
+import React from 'react';
+import { Source } from '@storybook/blocks';
+
+import { Table, TableCell, TableHeaderCell, TableRow } from '../../../src/components/Table';
+
+const codemodsExample = `import styled from 'styled-components';
+
+export const GreyList = styled.ul\`
+    color: var(--wave-b-color-blue-primary-550);
+\`;
+`;
+
+const polishedExample = `import styled from 'styled-components';
+import {getSemanticValue} from '@freenow/wave';
+
+export const GreyList = styled.ul\`
+    color: \${getSemanticValue('foreground-neutral-emphasized')};
+\`;
+`;
+
+export const CssVariablesMigrationTable = () => (
+    <Table rowStyle="blank">
+        <thead>
+            <TableHeaderCell>After codemods</TableHeaderCell>
+            <TableHeaderCell>Polished code</TableHeaderCell>
+        </thead>
+        <tbody>
+            <TableRow>
+                <TableCell verticalAlign="top">
+                    <Source code={codemodsExample} />
+                </TableCell>
+                <TableCell verticalAlign="top">
+                    <Source code={polishedExample} />
+                </TableCell>
+            </TableRow>
+        </tbody>
+    </Table>
+);
diff --git a/docs/components/migration/IconMappingsTable.tsx b/docs/components/migration/IconMappingsTable.tsx
@@ -0,0 +1,91 @@
+import React from 'react';
+import { Table, TableCell, TableHeaderCell, TableRow } from '../../../src/components/Table';
+
+export const IconMappingsTable: React.FC = () => (
+    <Table rowStyle="zebra" rowSize="small">
+        <thead>
+            <TableRow>
+                <TableHeaderCell>Removed icons</TableHeaderCell>
+                <TableHeaderCell>Alternative</TableHeaderCell>
+            </TableRow>
+        </thead>
+        <tbody>
+            <TableRow>
+                <TableCell>BackwardSmallIcon</TableCell>
+                <TableCell>BackwardLastIcon</TableCell>
+            </TableRow>
+            <TableRow>
+                <TableCell>ChevronDownSmallIcon</TableCell>
+                <TableCell>ChevronDownIcon</TableCell>
+            </TableRow>
+            <TableRow>
+                <TableCell>ChevronLeftSmallIcon</TableCell>
+                <TableCell>ChevronLeftIcon</TableCell>
+            </TableRow>
+            <TableRow>
+                <TableCell>ChevronRightSmallIcon</TableCell>
+                <TableCell>ChevronRightIcon</TableCell>
+            </TableRow>
+            <TableRow>
+                <TableCell>ChevronUpSmallIcon</TableCell>
+                <TableCell>ChevronUpIcon</TableCell>
+            </TableRow>
+            <TableRow>
+                <TableCell>DownloadSmallIcon</TableCell>
+                <TableCell>DownloadIcon</TableCell>
+            </TableRow>
+            <TableRow>
+                <TableCell>ForwardSmallIcon</TableCell>
+                <TableCell>ForwardLastIcon</TableCell>
+            </TableRow>
+            <TableRow>
+                <TableCell>SearchSmallIcon</TableCell>
+                <TableCell>MagnifyingGlassIcon</TableCell>
+            </TableRow>
+            <TableRow>
+                <TableCell>XSmallIcon</TableCell>
+                <TableCell>CloseIcon</TableCell>
+            </TableRow>
+            <TableRow>
+                <TableCell>AirportIcon</TableCell>
+                <TableCell>PlaneIcon</TableCell>
+            </TableRow>
+            <TableRow>
+                <TableCell>EcoIcon</TableCell>
+                <TableCell>LeafSolidIcon</TableCell>
+            </TableRow>
+            <TableRow>
+                <TableCell>GearIcon</TableCell>
+                <TableCell>CogIcon</TableCell>
+            </TableRow>
+            <TableRow>
+                <TableCell>HeartIcon</TableCell>
+                <TableCell>HeartSolidIcon</TableCell>
+            </TableRow>
+            <TableRow>
+                <TableCell>HomeIcon</TableCell>
+                <TableCell>HouseIcon</TableCell>
+            </TableRow>
+            <TableRow>
+                <TableCell>InfoCircleIcon</TableCell>
+                <TableCell>InfoCircleOutlineIcon</TableCell>
+            </TableRow>
+            <TableRow>
+                <TableCell>ListUnorderedIcon</TableCell>
+                <TableCell>ListIcon</TableCell>
+            </TableRow>
+            <TableRow>
+                <TableCell>PrebookingIcon</TableCell>
+                <TableCell>CalendarCheckedIcon</TableCell>
+            </TableRow>
+            <TableRow>
+                <TableCell>SearchIcon</TableCell>
+                <TableCell>MagnifyingGlassIcon</TableCell>
+            </TableRow>
+            <TableRow>
+                <TableCell>XIcon</TableCell>
+                <TableCell>CloseIcon</TableCell>
+            </TableRow>
+        </tbody>
+    </Table>
+);
diff --git a/docs/components/migration/InvertedPropMigrationTable.tsx b/docs/components/migration/InvertedPropMigrationTable.tsx
@@ -0,0 +1,45 @@
+import React from 'react';
+import { Source } from '@storybook/blocks';
+
+import { Table, TableCell, TableHeaderCell, TableRow } from '../../../src/components/Table';
+
+const codemodsExample = `<Box>
+    <InvertedColorScheme>
+        <Button size="small" onClick={onClick}>
+            {label}
+        </Button>
+    </InvertedColorScheme>
+    <InvertedColorScheme>
+        <Button size="small" onClick={onClick}>
+            {label}
+        </Button>
+    </InvertedColorScheme>
+</Box>`;
+
+const polishedExample = `<InvertedColorScheme>
+    <Button size="small" onClick={onClick}>
+        {label}
+    </Button>
+    <Button size="small" onClick={onClick}>
+        {label}
+    </Button>
+</InvertedColorScheme>`;
+
+export const InvertedPropMigrationTable = () => (
+    <Table rowStyle="blank">
+        <thead>
+            <TableHeaderCell>After codemods</TableHeaderCell>
+            <TableHeaderCell>Polished code</TableHeaderCell>
+        </thead>
+        <tbody>
+            <TableRow>
+                <TableCell verticalAlign="top">
+                    <Source code={codemodsExample} />
+                </TableCell>
+                <TableCell verticalAlign="top">
+                    <Source code={polishedExample} />
+                </TableCell>
+            </TableRow>
+        </tbody>
+    </Table>
+);
diff --git a/docs/components/PlacementMappingsTable.tsx → ...ents/migration/PlacementMappingsTable.tsx b/docs/components/PlacementMappingsTable.tsx → ...ents/migration/PlacementMappingsTable.tsx
@@ -1,12 +1,12 @@
 import React from 'react';
-import { Table, TableCell, TableHeaderCell, TableRow } from '../../src/components/Table';
+import { Table, TableCell, TableHeaderCell, TableRow } from '../../../src/components/Table';
 
 export const PlacementMappingsTable: React.FC = () => (
     <Table rowStyle="zebra" rowSize="small">
         <thead>
             <TableRow>
-                <TableHeaderCell>react-tether</TableHeaderCell>
-                <TableHeaderCell>react-popper (new)</TableHeaderCell>
+                <TableHeaderCell>Removed</TableHeaderCell>
+                <TableHeaderCell>New values</TableHeaderCell>
             </TableRow>
         </thead>
         <tbody>