Skip to content

Commit

Permalink
Merge 2b4a425 into d51b023
Browse files Browse the repository at this point in the history
  • Loading branch information
KenAJoh authored May 16, 2023
2 parents d51b023 + 2b4a425 commit 12dbc67
Showing 49 changed files with 1,479 additions and 125 deletions.
10 changes: 10 additions & 0 deletions .changeset/green-trainers-guess.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
---
"@navikt/ds-css": minor
"@navikt/ds-react": minor
"@navikt/ds-react-internal": minor
---

:sparkles: Ny komponent `<CopyButton />`!

- Erstatter `<CopyToClipboard />` fra `@navikt/ds-react-internal`
- CopyToClipboard er markert som deprecated. Den vil fortsatt fungere, men noen lintere vil kunne ende opp med å klage på den.
2 changes: 1 addition & 1 deletion .storybook/main.cjs
Original file line number Diff line number Diff line change
@@ -23,7 +23,7 @@ module.exports = {
addons: [
"@storybook/addon-a11y",
"@whitespace/storybook-addon-html",

"@storybook/addon-interactions",
{
name: "@storybook/addon-storysource",
options: {
33 changes: 33 additions & 0 deletions @navikt/aksel/README.md
Original file line number Diff line number Diff line change
@@ -22,6 +22,39 @@ To get started:
npx @navikt/aksel codemod --help
```

### 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!

```diff
-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](https://aksel.nav.no/grunnleggende/kode/migrering#h76f47744d112)
23 changes: 22 additions & 1 deletion @navikt/aksel/src/codemod/migrations.ts
Original file line number Diff line number Diff line change
@@ -1,7 +1,12 @@
import chalk from "chalk";

export const migrations: {
[key: string]: { description: string; value: string; path: string }[];
[key: string]: {
description: string;
value: string;
path: string;
warning?: string;
}[];
} = {
"1.0.0": [
{
@@ -48,6 +53,16 @@ export const migrations: {
path: "v2.0.0/update-less-tokens/update-less-tokens",
},
],
"v3.0.0": [
{
description:
"Replaces deprecated <CopyToClipboard /> with <CopyButton />",
value: "v3-copybutton",
path: "v3.0.0/copybutton/copybutton",
warning:
"Remember to clean css-import from '@navikt/ds-css-internal' if no longer needed\nIf non-text was used as children, or different locales were handled, you need to manually fix this",
},
],
};

export function getMigrationPath(str: string) {
@@ -56,6 +71,12 @@ export function getMigrationPath(str: string) {
.find((x) => x.value === str)?.path;
}

export function getWarning(str: string) {
return Object.values(migrations)
.reduce((acc, val) => [...val, ...acc], [])
.find((x) => x.value === str)?.warning;
}

export function getMigrationNames() {
return Object.values(migrations).reduce(
(acc, val) => [...val.map((x) => x.value), ...acc],
6 changes: 5 additions & 1 deletion @navikt/aksel/src/codemod/run-codeshift.ts
Original file line number Diff line number Diff line change
@@ -2,7 +2,7 @@ import { Command } from "commander";
import fg from "fast-glob";
import * as jscodeshift from "jscodeshift/src/Runner";
import path from "path";
import { getMigrationPath } from "./migrations";
import { getMigrationPath, getWarning } from "./migrations";
import chalk from "chalk";

const ignoreNodeModules = [
@@ -32,6 +32,8 @@ export async function runCodeshift(

options?.glob && console.log(`Using glob: ${chalk.green(options.glob)}\n`);

const warning = getWarning(input);

try {
await jscodeshift.run(codemodPath, filepaths, {
babel: true,
@@ -46,6 +48,8 @@ export async function runCodeshift(
force: options?.force,
print: options?.print,
});

warning && console.log(`\n${chalk.yellow(warning)}\n`);
} catch (error) {
program.error(chalk.red("Error:", error.message));
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,89 @@
import chalk from "chalk";
import moveAndRenameImport from "../../../utils/moveAndRenameImport";
import removePropsFromComponent from "../../../utils/removeProps";

/**
* @param {import('jscodeshift').FileInfo} file
* @param {import('jscodeshift').API} api
*/
export default function transformer(file, api, options, ...rest) {
const j = api.jscodeshift;

let root: any;
try {
root = j(file.source);
} catch {
return file.source;
}

const toName = "CopyButton";
const localName = moveAndRenameImport(j, root, {
fromImport: "@navikt/ds-react-internal",
toImport: "@navikt/ds-react",
fromName: "CopyToClipboard",
toName,
});

if (localName === null) {
return root.toSource(options.printOptions);
}

/* Finds and replaces import from CopyToClipboard -> CopyButton */

if (root.findJSXElements(localName)) {
removePropsFromComponent(j, root, localName, [
"popoverText",
"popoverPlacement",
"iconPosition",
"variant",
]);

const component = root.findJSXElements(localName);

component.forEach((node) => {
const children = node.node.children;
let flagged = false;
if (
children.length > 0 &&
!node.node.openingElement.attributes.some(
(attr) => attr.name.name === "text"
)
) {
if (children.length === 1 && children[0].type === "JSXText") {
node.node.openingElement.attributes.push(
j.jsxAttribute(
j.jsxIdentifier("text"),
j.literal(children[0].value.trim())
)
);
} else {
flagged = true;
console.log(
chalk.yellow(
`\n\nWarning: Detected advanced children-type!\nCodemod can't convert into "text" prop so you will need to update this manually.`
)
);
}
}

if (!flagged) {
node.node.children = [];
node.node.openingElement.selfClosing = true;
node.node.closingElement = null;
}
});

const compRoot = root.find(j.JSXElement, {
openingElement: { name: { name: localName } },
});

compRoot.forEach((x) => {
x.node.openingElement.name.name = "CopyButton";
if (x.node.children.length > 0) {
x.node.closingElement.name.name = "CopyButton";
}
});
}

return root.toSource(options.printOptions);
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
import { CopyToClipboard as DsCpyButton } from "@navikt/ds-react-internal";

/* eslint-disable react/jsx-no-undef */
export const Page = () => {
return <DsCpyButton></DsCpyButton>;
};
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
import { CopyButton } from "@navikt/ds-react";

/* eslint-disable react/jsx-no-undef */
export const Page = () => {
return <CopyButton />;
};
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
import { CopyToClipboard } from "@navikt/ds-react-internal";

/* eslint-disable react/jsx-no-undef */
export const Page = () => {
return (
<CopyToClipboard
popoverText="popoverText"
copyText="Text to copy"
iconPosition="left"
size="medium"
popoverPlacement="bottom-end"
>
{text}
</CopyToClipboard>
);
};
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
import { CopyButton } from "@navikt/ds-react";

/* eslint-disable react/jsx-no-undef */
export const Page = () => {
return (
<CopyButton copyText="Text to copy" size="medium" text="text">
{text}
</CopyButton>
);
};
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
import { CopyToClipboard } from "@navikt/ds-react-internal";

/* eslint-disable react/jsx-no-undef */
export const Page = () => {
return <CopyToClipboard></CopyToClipboard>;
};
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
import { CopyButton } from "@navikt/ds-react";

/* eslint-disable react/jsx-no-undef */
export const Page = () => {
return <CopyButton />;
};
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
import { CopyToClipboard } from "@navikt/ds-react-internal";

/* eslint-disable react/jsx-no-undef */
export const Page = () => {
return (
<CopyToClipboard
popoverText="popoverText"
copyText="Text to copy"
iconPosition="left"
size="medium"
popoverPlacement="bottom-end"
>
text
</CopyToClipboard>
);
};
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
import { CopyButton } from "@navikt/ds-react";

/* eslint-disable react/jsx-no-undef */
export const Page = () => {
return <CopyButton copyText="Text to copy" size="medium" text="text" />;
};
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
import { check } from "../../../../utils/check";

const migration = "copybutton";
const fixtures = ["complete", "idempotent", "alias", "cleanup", "import"];

for (const fixture of fixtures) {
check(__dirname, {
fixture,
migration,
extension: "js",
});
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
import { CopyButton } from "@navikt/ds-react";

/* eslint-disable react/jsx-no-undef */
export const Page = () => {
return <CopyButton copyText="Text to copy" size="medium" text={props.text} />;
};
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
import { CopyButton } from "@navikt/ds-react";

/* eslint-disable react/jsx-no-undef */
export const Page = () => {
return <CopyButton copyText="Text to copy" size="medium" text={props.text} />;
};
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
import { CopyToClipboard, Dropdown } from "@navikt/ds-react-internal";
import { Button } from "@navikt/ds-react";

/* eslint-disable react/jsx-no-undef */
export const Page = () => {
return <CopyToClipboard></CopyToClipboard>;
};
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
import { Dropdown } from "@navikt/ds-react-internal";
import { Button, CopyButton } from "@navikt/ds-react";

/* eslint-disable react/jsx-no-undef */
export const Page = () => {
return <CopyButton />;
};
Loading

0 comments on commit 12dbc67

Please sign in to comment.