@navikt/aksel v6.7.0
Aksel command line interface
CLI tool for managing CSS-imports and Codemods when consuming Aksel-packages.
run:
npx @navikt/aksel
commands:
css-imports: Generate css-imports for all components from Aksel
codemod: Codemods for version-migrations related to Aksel
Codemods
Codemods are code-transformations that patches breaking changes in your project. This helps when migrating without spending time doing it manually.
To get started:
npx @navikt/aksel codemod --help
v4
In v4, we moved all the components from @navikt/ds-react-internal
to @navikt/ds-react
. This means that you will need to update all your imports to the new package. As a part of this, Header was renamed to InternalHeader
and all the CSS-classes was renamed to use navds
as a prefix instead of navdsi
.
react
npx @navikt/aksel codemod v4-internal-react ...
Rewrites all imports from @navikt/ds-react-internal
to @navikt/ds-react
. Remember to remove @navikt/ds-react-internal
as a dependency after migration.
- import { Dropdown, Timeline, Header } from "@navikt/ds-react-internal";
- import { Button, CopyButton } from "@navikt/ds-react";
+ import { Button, CopyButton, Dropdown, Timeline, InternalHeader as Header } from "@navikt/ds-react";
css
npx @navikt/aksel codemod v4-internal-css ...
Rewrites all css with navdsi
-prefix to navds
-prefix. Rewrites all .navdsi-header
classes to .navds-internalheader
.
Remember to remove @navikt/ds-css-internal
as a dependency after migration + remove it from you lists of imports in the CSS-bundle.
- .navdsi-dropdown
+ .navds-dropdown
- .navdsi-header
+ .navds-internalheader
- .navdsi-timeline
+ .navds-timeline
Note: This is a "dumb" codemod that uses a simple regex to find and replace. This can lead to unknown sideeffects, so its reccomended to scope the codemod to spesific files.
`npx @navikt/aksel codemod v4-internal-css **/*.css`
v3
There is no general codemods for migrating from v2 -> v3.
CopyButton
npx @navikt/aksel codemod v3-copybutton ...
<CopyToClipboard />
has been renamed to <CopyButton />
and refactored.
- Namechange
- removed props
popoverText
,iconPosition
,popoverPlacement
- changed variants
- refactored CSS and React-code. ⚠️ Overwritten CSS will not be migrated!
-import { CopyToClipboard } from "@navikt/ds-react-internal";
+import { CopyButton } from "@navikt/ds-react";
-<CopyToClipboard
+<CopyButton
- popoverText="popoverText"
- iconPosition="left"
- popoverPlacement="bottom-end"
copyText="Text to copy"
size="medium"
>
- text
+</CopyButton>
-</CopyToClipboard>
v1 -> v2
v2-css: Patches changed css-variables v2-js: Patches changed js-variables v2-sass: Patches changed sass-variables v2-less: Patches changed less-variables
css-tokens (--navds format)
npx @navikt/aksel codemod v2-css src
When having redefined a token, you will need to manually find and replace these instances after the codemod-run. A global search for --v2-migration__
will show all found instances where you had redefined a token.
.example{
- color: var(--navds-global-color-gray-900);
+ color: var(--a-gray-900);
- --navds-semantic-color-text: red;
+ --v2-migration__navds-semantic-color-text: red;
}
sass/scss-tokens ($navds format)
npx @navikt/aksel codemod v2-sass src
.example{
- color: $navds-global-color-gray-900;
+ color: $a-gray-900;
}
less-tokens (@navds format)
npx @navikt/aksel codemod v2-less src
.example{
- color: @navds-global-color-gray-900;
+ color: @a-gray-900;
}
js-tokens
npx @navikt/aksel codemod v2-js src
- import { NavdsGlobalColorGray900 } from "@navikt/ds-tokens";
+ import { AGray900 } from "@navikt/ds-tokens";
const styled = styled.p`
- color: ${NavdsGlobalColorGray900};
+ color: ${AGray900};
`
beta -> v1
v1-preset: Runs all codemods for beta -> v1 v1-pagination: Fixes breaking API-changes for component v1-tabs: Fixes breaking API-changes for component v1-chat: Fixes breaking API-changes for (now ) component
preset
Combines all avaliable codemods for migrating from beta -> v1. This transform should only be ran once.
Includes these transforms
- v1-tabs
- v1-chat
- v1-pagination
tabs
npx @navikt/aksel codemod v1-tabs src
<Tabs
defaultValue="logg"
onChange={(x) => console.log(x)}
- loop
+ iconPosition="left"
>
<Tabs.List
- loop
>
<Tabs.Tab
value="logg"
label="logg"
- iconPosition="left"
/>
</Tabs.List>
<Tabs.Panel value="logg">TabPanel for Logg-tab</Tabs.Panel>
</Tabs>
chat
npx @navikt/aksel codemod v1-chat src
-<SpeechBubble
+<Chat
- illustration={<Illustration />}
- topText="Ola Normann 01.01.21 14:00"
- illustrationBgColor="blue"
+ avatar={<Illustration />}
+ name="Ola Normann 01.01.21 14:00"
+ avatarBgColor="blue"
backgroundColor="red"
>
- <SpeechBubble.Bubble>
+ <Chat.Bubble>
Aute minim nisi sunt mollit duis sunt nulla minim non proident.
- </SpeechBubble.Bubble>
+ </Chat.Bubble>
-</SpeechBubble>
+</Chat>
pagination
npx @navikt/aksel codemod v1-pagination src
This codemod can only be ran once, since the size-scale will keep decreasing for each subsequent iteration.
-<Pagiation />
+<Pagiation size="small"/>
-<Pagiation size="medium"/>
+<Pagiation size="small"/>
-<Pagiation size="small"/>
+<Pagiation size="xsmall"/>
License
4 days ago
14 days ago
18 days ago
25 days ago
27 days ago
27 days ago
1 month ago
1 month ago
1 month ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
8 months ago
8 months ago
8 months ago
8 months ago
9 months ago
9 months ago
5 months ago
5 months ago
5 months ago
5 months ago
9 months ago
9 months ago
6 months ago
9 months ago
8 months ago
8 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
10 months ago
6 months ago
6 months ago
6 months ago
8 months ago
9 months ago
10 months ago
10 months ago
9 months ago
9 months ago
10 months ago
10 months ago
9 months ago
9 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
8 months ago
8 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
10 months ago
9 months ago
7 months ago
9 months ago
7 months ago
9 months ago
7 months ago
7 months ago
7 months ago
7 months ago
8 months ago
7 months ago
8 months ago
10 months ago
10 months ago
11 months ago
11 months ago
12 months ago
12 months ago
12 months ago
12 months ago
11 months ago
12 months ago
11 months ago
12 months ago
1 year ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
11 months ago
11 months ago
11 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
1 year ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago