npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@navikt/aksel

v7.5.3

Published

Aksel command line interface. Handles css-imports, codemods and more

Downloads

1,239

Readme

Aksel command line interface

CLI tool for managing CSS-imports and Codemods when consuming Aksel-packages.

Documentation

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

Documentation

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

Documentation

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

MIT