Skip to content

Commit 155c556

Browse files
andnordaKenAJohmacbrukerlarseirikhansen
authored
Designsystemet v1.0.0 (navikt#1535)
Co-authored-by: Andreas Nordahl <[email protected]> Co-authored-by: Ken <[email protected]> Co-authored-by: Martin Berglund <[email protected]> Co-authored-by: larseirikhansen <[email protected]>
1 parent 151ec81 commit 155c556

File tree

218 files changed

+5023
-5760
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

218 files changed

+5023
-5760
lines changed

‎.github/workflows/chromatic.yml

+5-2
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,12 @@ name: Chromatic
22

33
on:
44
push:
5-
branches: [master]
5+
branches:
6+
- master
67
pull_request:
7-
branches: [master]
8+
branches:
9+
- master
10+
- big-one-oh
811

912
jobs:
1013
chromatic-pr:

‎.storybook/deprecated.stories.mdx

-12
This file was deleted.

‎.storybook/main.js

-1
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,6 @@ module.exports = {
2020
"@storybook/addon-docs",
2121
"@storybook/addon-a11y",
2222
"@whitespace/storybook-addon-html",
23-
"storybook-addon-css-user-preferences",
2423
{
2524
name: "@storybook/addon-storysource",
2625
options: {

‎.storybook/preview.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ export const parameters = {
77
options: {
88
storySort: {
99
method: "",
10-
order: ["Intro", "ds-icons", "ds-react", ["Default"]],
10+
order: ["Intro", "ds-icons", "ds-react", ["form"], ["Default"]],
1111
locales: "",
1212
},
1313
},

‎@navikt/codemod/README.md

+106
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
# NAV designsystem Codemods
2+
3+
Collection of Codemods for easier migration between breaking changes.
4+
5+
Highly inspired by both MUI and NEXT
6+
7+
- [NEXT](https://nextjs.org/docs/advanced-features/codemods)
8+
- [MUI](https://github.com/mui/material-ui/tree/master/packages/mui-codemod)
9+
10+
## Usage
11+
12+
Codemod transformations runs code-transformations programmatically in your project. This helps when migrating lots of breaking changes without spending hours doing it manually.
13+
14+
NOTE: This codemod only supports fairly "default" usage of components. Components used with dynamic imports, styled-components, non-default imports (example `import * as DS from "@navikt/ds-react"` or `from "@navikt/ds-react/cjs"`) will not work as expected.
15+
16+
```javascript
17+
npx @navikt/ds-codemod <transform> <path>
18+
```
19+
20+
transform - name of transform, see available transforms below.
21+
path - files or directory to transform
22+
--dry Do a dry-run, no code will be edited
23+
--print Prints the changed output for comparison
24+
25+
## Beta (0.19.x) -> v1.0.0
26+
27+
`npx @navikt/ds-codemod v1.0.0/preset src`
28+
29+
### preset
30+
31+
Combines all avaliable codemods for migrating from beta -> v1.0.0. This transform should only be ran once.
32+
33+
Includes these transforms
34+
35+
- v1.0.0/tabs
36+
- v1.0.0/chat
37+
- v1.0.0/pagination
38+
39+
### tabs
40+
41+
`npx @navikt/ds-codemod v1.0.0/tabs src`
42+
43+
```diff
44+
<Tabs
45+
defaultValue="logg"
46+
onChange={(x) => console.log(x)}
47+
- loop
48+
+ iconPosition="left"
49+
>
50+
<Tabs.List
51+
- loop
52+
>
53+
<Tabs.Tab
54+
value="logg"
55+
label="logg"
56+
- iconPosition="left"
57+
/>
58+
</Tabs.List>
59+
<Tabs.Panel value="logg">TabPanel for Logg-tab</Tabs.Panel>
60+
</Tabs>
61+
```
62+
63+
### chat
64+
65+
`npx @navikt/ds-codemodmod v1.0.0/chat src`
66+
67+
```diff
68+
-<SpeechBubble
69+
+<Chat
70+
- illustration={<Illustration />}
71+
- topText="Ola Normann 01.01.21 14:00"
72+
- illustrationBgColor="blue"
73+
+ avatar={<Illustration />}
74+
+ name="Ola Normann 01.01.21 14:00"
75+
+ avatarBgColor="blue"
76+
backgroundColor="red"
77+
>
78+
- <SpeechBubble.Bubble>
79+
+ <Chat.Bubble>
80+
Aute minim nisi sunt mollit duis sunt nulla minim non proident.
81+
- </SpeechBubble.Bubble>
82+
+ </Chat.Bubble>
83+
-</SpeechBubble>
84+
+</Chat>
85+
```
86+
87+
### pagination
88+
89+
`npx @navikt/ds-codemod v1.0.0/pagination src`
90+
91+
This codemod should only be ran once, since the size-scale will keep decreasing for each subsequent iteration.
92+
93+
```diff
94+
-<Pagiation />
95+
+<Pagiation size="small"/>
96+
97+
-<Pagiation size="medium"/>
98+
+<Pagiation size="small"/>
99+
100+
-<Pagiation size="small"/>
101+
+<Pagiation size="xsmall"/>
102+
```
103+
104+
## License
105+
106+
[MIT](https://github.com/navikt/Designsystemet/blob/master/LICENCE)

‎@navikt/codemod/bin/cli.ts

+13-1
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ export function checkGitStatus(force) {
3535
if (force) {
3636
console.log(`WARNING: ${errorMessage}. Forcibly continuing.`);
3737
} else {
38-
console.log("Thank you for using @@navikt/ds-codemod");
38+
console.log("Thank you for using @navikt/ds-codemod");
3939
console.log(
4040
chalk.yellow(
4141
"\nBut before we continue, please stash or commit your git changes."
@@ -94,6 +94,18 @@ export function runTransform({ files, flags, transformer }) {
9494
}
9595

9696
const TRANSFORMER_INQUIRER_CHOICES = [
97+
{
98+
name: "v1.0.0/preset: Runs all codemods for beta to v1 migration",
99+
value: "v1.0.0/preset",
100+
},
101+
{
102+
name: "v1.0.0/pagination: Fixes breaking API-changes from <Pagination /> component",
103+
value: "v1.0.0/pagination",
104+
},
105+
{
106+
name: "v1.0.0/tabs: Fixes breaking API-changes from <Tabs /> component",
107+
value: "v1.0.0/tabs",
108+
},
97109
{
98110
name: "v1.0.0/chat: Fixes breaking API-changes from <SpeechBubble /> (now <Chat/>) component",
99111
value: "v1.0.0/chat",

‎@navikt/codemod/package.json

+5-3
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
{
22
"name": "@navikt/ds-codemod",
3-
"version": "1.0.2",
4-
"private": true,
3+
"version": "1.0.0",
54
"description": "NAV designsystem codemods",
65
"author": "NAV Designsystem team",
76
"license": "MIT",
@@ -11,7 +10,7 @@
1110
"jscodeshift"
1211
],
1312
"files": [
14-
"transforms/*.js",
13+
"transforms/**/*.js",
1514
"bin/*.js",
1615
"lib/**/*.js",
1716
"lib/cra-to-next/gitignore"
@@ -49,5 +48,8 @@
4948
"sideEffects": false,
5049
"engines": {
5150
"node": ">=12.0.0"
51+
},
52+
"publishConfig": {
53+
"access": "public"
5254
}
5355
}

‎@navikt/codemod/transforms/v1.0.0/__testfixtures__/chat/complete.input.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,9 @@ export const Page = () => {
88
topText="Ola Normann 01.01.21 14:00"
99
backgroundColor="red"
1010
illustrationBgColor="blue"
11+
{...testProps}
1112
>
12-
<SpeechBubble.Bubble>
13+
<SpeechBubble.Bubble {...testProps}>
1314
Aute minim nisi sunt mollit duis sunt nulla minim non proident.
1415
</SpeechBubble.Bubble>
1516
<SpeechBubble.Bubble>

‎@navikt/codemod/transforms/v1.0.0/__testfixtures__/chat/complete.output.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,9 @@ export const Page = () => {
88
name="Ola Normann 01.01.21 14:00"
99
backgroundColor="red"
1010
avatarBgColor="blue"
11+
{...testProps}
1112
>
12-
<Chat.Bubble>
13+
<Chat.Bubble {...testProps}>
1314
Aute minim nisi sunt mollit duis sunt nulla minim non proident.
1415
</Chat.Bubble>
1516
<Chat.Bubble>

‎@navikt/codemod/transforms/v1.0.0/__testfixtures__/pagination/idempotent.input.js

+8-1
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,16 @@ import { Pagination, Button } from "@navikt/ds-react";
33
export const Demo = () => {
44
return (
55
<div>
6-
<Pagination size="small" onPageChange={setPage} data-version="v1" />
6+
<Pagination
7+
size="small"
8+
onPageChange={setPage}
9+
data-version="v1"
10+
{...testProps}
11+
/>
712
<Pagination size="small" onPageChange={setPage} data-version="v1" />
813
<Pagination size="xsmall" onPageChange={setPage} data-version="v1" />
14+
<Pagination onPageChange={setPage} />
15+
<Pagination size="small" onPageChange={setPage} />
916
</div>
1017
);
1118
};

‎@navikt/codemod/transforms/v1.0.0/__testfixtures__/pagination/idempotent.output.js

+7
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,14 @@ import { Pagination, Button } from "@navikt/ds-react";
33
export const Demo = () => {
44
return (
55
<div>
6+
<Pagination
7+
size="small"
8+
onPageChange={setPage}
9+
data-version="v1"
10+
{...testProps}
11+
/>
612
<Pagination size="small" onPageChange={setPage} data-version="v1" />
13+
<Pagination size="xsmall" onPageChange={setPage} data-version="v1" />
714
<Pagination size="small" onPageChange={setPage} data-version="v1" />
815
<Pagination size="xsmall" onPageChange={setPage} data-version="v1" />
916
</div>

‎@navikt/codemod/transforms/v1.0.0/__testfixtures__/pagination/import.output.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,9 @@ import { Pagination as DsPagination, Button } from "@navikt/ds-react";
33
export const Demo = () => {
44
return (
55
<div>
6-
<DsPagination size="small" onPageChange={setPage} />
7-
<DsPagination size="small" onPageChange={setPage} />
8-
<DsPagination size="xsmall" onPageChange={setPage} />
6+
<DsPagination size="small" onPageChange={setPage} data-version="v1" />
7+
<DsPagination size="small" onPageChange={setPage} data-version="v1" />
8+
<DsPagination size="xsmall" onPageChange={setPage} data-version="v1" />
99
</div>
1010
);
1111
};

‎@navikt/codemod/transforms/v1.0.0/__testfixtures__/pagination/size.output.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,9 @@ import { Pagination, Button } from "@navikt/ds-react";
33
export const Demo = () => {
44
return (
55
<div>
6-
<Pagination size="small" onPageChange={setPage} />
7-
<Pagination size="small" onPageChange={setPage} />
8-
<Pagination size="xsmall" onPageChange={setPage} />
6+
<Pagination size="small" onPageChange={setPage} data-version="v1" />
7+
<Pagination size="small" onPageChange={setPage} data-version="v1" />
8+
<Pagination size="xsmall" onPageChange={setPage} data-version="v1" />
99
</div>
1010
);
1111
};

‎@navikt/codemod/transforms/v1.0.0/__testfixtures__/tabs/complete.input.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,9 @@ const TabComp = () => {
44
return (
55
/* prettier-ignore */
66
<div>
7-
<Tabs defaultValue="logg" onChange={(x) => console.log(x)}>
8-
<Tabs.List loop={false}>
9-
<Tabs.Tab value="logg" iconPosition={props.left} label="logg" />
7+
<Tabs defaultValue="logg" onChange={(x) => console.log(x)} {...testProps}>
8+
<Tabs.List loop={false} {...testProps}>
9+
<Tabs.Tab value="logg" iconPosition={props.left} label="logg" {...testProps}/>
1010
<Tabs.Tab value="logg2" iconPosition="top" label="logg2medlangtekst" />
1111
</Tabs.List>
1212
<Tabs.Panel value="logg">TabPanel for Logg-tab</Tabs.Panel>

‎@navikt/codemod/transforms/v1.0.0/__testfixtures__/tabs/complete.output.js

+3-2
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,11 @@ const TabComp = () => {
77
<Tabs
88
defaultValue="logg"
99
onChange={(x) => console.log(x)}
10+
{...testProps}
1011
loop={false}
1112
iconPosition={props.left}>
12-
<Tabs.List>
13-
<Tabs.Tab value="logg" label="logg" />
13+
<Tabs.List {...testProps}>
14+
<Tabs.Tab value="logg" label="logg" {...testProps} />
1415
<Tabs.Tab value="logg2" label="logg2medlangtekst" />
1516
</Tabs.List>
1617
<Tabs.Panel value="logg">TabPanel for Logg-tab</Tabs.Panel>

‎@navikt/codemod/transforms/v1.0.0/pagination.ts

+23
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,22 @@ export default function transformer(file, api, options) {
88

99
const root = j(file.source);
1010

11+
function addMigrationTag(node) {
12+
const attributes = node.openingElement.attributes;
13+
const isMigrated = attributes.find(
14+
(node) =>
15+
node.type === "JSXAttribute" &&
16+
node.name.name === "data-version" &&
17+
node.value.value === "v1"
18+
);
19+
20+
if (!isMigrated) {
21+
attributes.push(
22+
j.jsxAttribute(j.jsxIdentifier("data-version"), j.literal("v1"))
23+
);
24+
}
25+
}
26+
1127
/* https://github.com/mui/material-ui/blob/master/packages/mui-codemod/src/v5.0.0/variant-prop.js */
1228
function addExplicitStandardProp(node) {
1329
const attributes = node.openingElement.attributes;
@@ -19,6 +35,7 @@ export default function transformer(file, api, options) {
1935
attributes.unshift(
2036
j.jsxAttribute(j.jsxIdentifier("size"), j.literal("small"))
2137
);
38+
addMigrationTag(node);
2239
}
2340
}
2441

@@ -42,14 +59,20 @@ export default function transformer(file, api, options) {
4259
const skip = !!parent.value.openingElement?.attributes.find(
4360
(x) => x.name.name === "data-version" && x.value.value === "v1"
4461
);
62+
4563
parent.value.openingElement?.attributes.forEach((x, index) => {
64+
let didUpdate = false;
4665
if (x.name?.name === "size" && x.type === "JSXAttribute" && !skip) {
4766
/* addExplicitStandardProp */
4867
if (x.value.value === "medium") {
4968
x.value = j.literal("small");
69+
didUpdate = true;
5070
} else if (x.value.value === "small") {
5171
x.value = j.literal("xsmall");
72+
didUpdate = true;
5273
}
74+
75+
didUpdate && addMigrationTag(parent.value);
5376
}
5477
});
5578
addExplicitStandardProp(parent.value);

‎@navikt/codemod/transforms/v1.0.0/preset.ts

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import transformTabs from "./tabs";
2+
import transformChat from "./chat";
3+
import transformPagination from "./pagination";
4+
5+
/**
6+
* @param {import('jscodeshift').FileInfo} file
7+
* @param {import('jscodeshift').API} api
8+
*/
9+
export default function transformer(file, api, options) {
10+
file.source = transformTabs(file, api, options);
11+
file.source = transformChat(file, api, options);
12+
file.source = transformPagination(file, api, options);
13+
14+
return file.source;
15+
}

0 commit comments

Comments
 (0)