Skip to content

Commit

Permalink
Add args mapping (#438)
Browse files Browse the repository at this point in the history 
* Add support for args mapping

* Fix playwright

* fix ci
  • Loading branch information
@tajo
tajo committed May 27, 2023
1 parent 88983d8 commit 6d720ab
Show file tree
Hide file tree
Showing 20 changed files with 1,393 additions and 1,267 deletions.
5 changes: 5 additions & 0 deletions .changeset/hot-bikes-care.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@ladle/react": patch
---

Add support for args mapping
7 changes: 7 additions & 0 deletions .github/workflows/ci.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,3 +51,10 @@ jobs:

- name: Unit and e2e tests
run: pnpm test

- uses: actions/upload-artifact@v3
if: always()
with:
name: playwright-report
path: playwright-report/
retention-days: 30
6 changes: 3 additions & 3 deletions e2e/addons/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,14 +9,14 @@
"serve-prod": "ladle preview -p 61100",
"build": "ladle build",
"lint": "echo 'no lint'",
"test-dev": "cross-env TYPE=dev pnpx playwright test",
"test-prod": "cross-env TYPE=prod pnpx playwright test",
"test-dev": "cross-env TYPE=dev pnpm exec playwright test",
"test-prod": "cross-env TYPE=prod pnpm exec playwright test",
"test": "pnpm test-dev && pnpm test-prod"
},
"dependencies": {
"@ladle/react": "workspace:*",
"@ladle/playwright-config": "workspace:*",
"@playwright/test": "^1.33.0",
"@playwright/test": "^1.34.3",
"cross-env": "^7.0.3",
"axe-playwright": "^1.2.3",
"query-string": "^8.1.0",
Expand Down
3 changes: 3 additions & 0 deletions e2e/addons/src/controls.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,6 +72,9 @@ Controls.argTypes = {
airports: {
options: ["sfo", "slc", "prg"],
control: { type: "check" },
mapping: {
slc: "sxc",
},
},
range: {
control: { type: "range", min: 1, max: 10, step: 0.5 },
Expand Down
2 changes: 1 addition & 1 deletion e2e/addons/tests/controls.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -113,7 +113,7 @@ test("check control works", async ({ page }) => {
await page.check("#airports-sfo");
await expect(page.locator("#content")).toContainText("Airport: sfo");
await page.check("#airports-slc");
await expect(page.locator("#content")).toContainText("Airport: sfoslc");
await expect(page.locator("#content")).toContainText("Airport: sfosxc");
await page.check("#airports-slc");
await expect(page.locator("#content")).toContainText("Airport: sfo");
});
Expand Down
6 changes: 3 additions & 3 deletions e2e/config-ts/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,14 +8,14 @@
"serve-prod": "ladle preview -p 61108",
"build": "ladle build",
"lint": "echo 'no lint'",
"test-dev": "cross-env TYPE=dev pnpx playwright test",
"test-prod": "cross-env TYPE=prod pnpx playwright test",
"test-dev": "cross-env TYPE=dev pnpm exec playwright test",
"test-prod": "cross-env TYPE=prod pnpm exec playwright test",
"test": "pnpm test-dev && pnpm test-prod"
},
"dependencies": {
"@ladle/react": "workspace:*",
"@ladle/playwright-config": "workspace:*",
"@playwright/test": "^1.33.0",
"@playwright/test": "^1.34.3",
"cross-env": "^7.0.3",
"react": "^18.2.0",
"react-dom": "^18.2.0",
Expand Down
6 changes: 3 additions & 3 deletions e2e/config/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,14 +8,14 @@
"serve-prod": "ladle preview -p 61107",
"build": "ladle build",
"lint": "echo 'no lint'",
"test-dev": "cross-env TYPE=dev pnpx playwright test",
"test-prod": "cross-env TYPE=prod pnpx playwright test",
"test-dev": "cross-env TYPE=dev pnpm exec playwright test",
"test-prod": "cross-env TYPE=prod pnpm exec playwright test",
"test": "pnpm test-dev && pnpm test-prod"
},
"dependencies": {
"@ladle/react": "workspace:*",
"@ladle/playwright-config": "workspace:*",
"@playwright/test": "^1.33.0",
"@playwright/test": "^1.34.3",
"cross-env": "^7.0.3",
"react": "^18.2.0",
"react-dom": "^18.2.0"
Expand Down
6 changes: 3 additions & 3 deletions e2e/css/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,14 +8,14 @@
"serve-prod": "ladle preview -p 61102",
"build": "ladle build",
"lint": "echo 'no lint'",
"test-dev": "cross-env TYPE=dev pnpx playwright test",
"test-prod": "cross-env TYPE=prod pnpx playwright test",
"test-dev": "cross-env TYPE=dev pnpm exec playwright test",
"test-prod": "cross-env TYPE=prod pnpm exec playwright test",
"test": "pnpm test-dev && pnpm test-prod"
},
"dependencies": {
"@ladle/react": "workspace:*",
"@ladle/playwright-config": "workspace:*",
"@playwright/test": "^1.33.0",
"@playwright/test": "^1.34.3",
"cross-env": "^7.0.3",
"autoprefixer": "^10.4.14",
"postcss": "^8.4.21",
Expand Down
6 changes: 3 additions & 3 deletions e2e/decorators/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,14 +8,14 @@
"serve-prod": "ladle preview -p 61103",
"build": "ladle build",
"lint": "echo 'no lint'",
"test-dev": "cross-env TYPE=dev pnpx playwright test",
"test-prod": "cross-env TYPE=prod pnpx playwright test",
"test-dev": "cross-env TYPE=dev pnpm exec playwright test",
"test-prod": "cross-env TYPE=prod pnpm exec playwright test",
"test": "pnpm test-dev && pnpm test-prod"
},
"dependencies": {
"@ladle/react": "workspace:*",
"@ladle/playwright-config": "workspace:*",
"@playwright/test": "^1.33.0",
"@playwright/test": "^1.34.3",
"cross-env": "^7.0.3",
"react": "^18.2.0",
"react-dom": "^18.2.0"
Expand Down
6 changes: 3 additions & 3 deletions e2e/flow/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,14 +8,14 @@
"serve-prod": "ladle preview -p 61104",
"build": "ladle build",
"lint": "echo 'no lint'",
"test-dev": "cross-env TYPE=dev pnpx playwright test",
"test-prod": "cross-env TYPE=prod pnpx playwright test",
"test-dev": "cross-env TYPE=dev pnpm exec playwright test",
"test-prod": "cross-env TYPE=prod pnpm exec playwright test",
"test": "pnpm test-dev && pnpm test-prod"
},
"dependencies": {
"@ladle/react": "workspace:*",
"@ladle/playwright-config": "workspace:*",
"@playwright/test": "^1.33.0",
"@playwright/test": "^1.34.3",
"cross-env": "^7.0.3",
"flow-remove-types": "^2.203.1",
"react": "^18.2.0",
Expand Down
8 changes: 4 additions & 4 deletions e2e/playwright/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,15 +9,15 @@
"build-preview": "ladle build && ladle preview -p 61110",
"build": "ladle build",
"lint": "echo 'no lint'",
"test-dev": "cross-env TYPE=dev pnpx playwright test",
"test-prod": "cross-env TYPE=prod pnpx playwright test",
"test-dev": "cross-env TYPE=dev pnpm exec playwright test",
"test-prod": "cross-env TYPE=prod pnpm exec playwright test",
"test": "pnpm test-dev && pnpm test-prod",
"test:update": "cross-env TYPE=update pnpx playwright test -u"
"test:update": "cross-env TYPE=update pnpm exec playwright test -u"
},
"dependencies": {
"@ladle/react": "workspace:*",
"@ladle/playwright-config": "workspace:*",
"@playwright/test": "^1.33.0",
"@playwright/test": "^1.34.3",
"@types/sync-fetch": "^0.4.0",
"cross-env": "^7.0.3",
"react": "^18.2.0",
Expand Down
6 changes: 3 additions & 3 deletions e2e/programmatic/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,14 +9,14 @@
"serve-prod": "node preview.js",
"build": "node build.js",
"lint": "echo 'no lint'",
"test-dev": "cross-env TYPE=dev pnpx playwright test",
"test-prod": "cross-env TYPE=prod pnpx playwright test",
"test-dev": "cross-env TYPE=dev pnpm exec playwright test",
"test-prod": "cross-env TYPE=prod pnpm exec playwright test",
"test": "pnpm test-dev && pnpm test-prod"
},
"dependencies": {
"@ladle/react": "workspace:*",
"@ladle/playwright-config": "workspace:*",
"@playwright/test": "^1.33.0",
"@playwright/test": "^1.34.3",
"cross-env": "^7.0.3",
"react": "^18.2.0",
"react-dom": "^18.2.0"
Expand Down
6 changes: 3 additions & 3 deletions e2e/provider/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,14 +8,14 @@
"serve-prod": "ladle preview -p 61106",
"build": "ladle build",
"lint": "echo 'no lint'",
"test-dev": "cross-env TYPE=dev pnpx playwright test",
"test-prod": "cross-env TYPE=prod pnpx playwright test",
"test-dev": "cross-env TYPE=dev pnpm exec playwright test",
"test-prod": "cross-env TYPE=prod pnpm exec playwright test",
"test": "pnpm test-dev && pnpm test-prod"
},
"dependencies": {
"@ladle/react": "workspace:*",
"@ladle/playwright-config": "workspace:*",
"@playwright/test": "^1.33.0",
"@playwright/test": "^1.34.3",
"cross-env": "^7.0.3",
"react": "^18.2.0",
"react-dom": "^18.2.0"
Expand Down
6 changes: 3 additions & 3 deletions e2e/swc/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,14 +8,14 @@
"serve-prod": "ladle preview -p 61109",
"build": "ladle build",
"lint": "echo 'no lint'",
"test-dev": "cross-env TYPE=dev pnpx playwright test",
"test-prod": "cross-env TYPE=prod pnpx playwright test",
"test-dev": "cross-env TYPE=dev pnpm exec playwright test",
"test-prod": "cross-env TYPE=prod pnpm exec playwright test",
"test": "pnpm test-dev && pnpm test-prod"
},
"dependencies": {
"@ladle/react": "workspace:*",
"@ladle/playwright-config": "workspace:*",
"@playwright/test": "^1.33.0",
"@playwright/test": "^1.34.3",
"@vitejs/plugin-react-swc": "3.1.0",
"cross-env": "^7.0.3",
"react": "^18.2.0",
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@
"@changesets/cli": "^2.26.1",
"@commitlint/cli": "^17.5.1",
"@commitlint/config-conventional": "^17.4.4",
"@playwright/test": "^1.34.3",
"@types/react": "^18.0.33",
"@types/react-dom": "^18.0.11",
"@typescript-eslint/eslint-plugin": "^5.57.1",
Expand All @@ -46,7 +47,6 @@
"eslint-plugin-prettier": "^4.2.1",
"eslint-plugin-react": "^7.32.2",
"husky": "^8.0.3",
"playwright": "^1.33.0",
"prettier": "^2.8.7",
"pretty-quick": "^3.1.3",
"turbo": "^1.9.1",
Expand Down
1 change: 1 addition & 0 deletions packages/ladle/lib/app/exports.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -106,6 +106,7 @@ export interface ArgType<K = any> {
step?: number;
[key: string]: any;
};
mapping?: { [key: string | number]: any };
defaultValue?: K;
description?: string;
name?: string;
Expand Down
20 changes: 19 additions & 1 deletion packages/ladle/lib/app/src/args-provider.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -133,9 +133,27 @@ const ArgsProvider = ({
}
}, []);

const mappingValue = (key: string, value: any) => {
if (
argTypes &&
argTypes[key] &&
argTypes[key].mapping &&
argTypes[key].mapping.hasOwnProperty(value)
) {
return argTypes[key].mapping[value];
}
return value;
};

const props: any = {};
Object.keys(globalState.control).forEach((key) => {
props[key] = globalState.control[key].value;
if (Array.isArray(globalState.control[key].value)) {
props[key] = globalState.control[key].value.map((value: any) =>
mappingValue(key, value),
);
} else {
props[key] = mappingValue(key, globalState.control[key].value);
}
});

if (!globalState.controlInitialized) {
Expand Down
6 changes: 3 additions & 3 deletions packages/website/blog/2022-08-08-visual-snapshots.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -96,9 +96,9 @@ Our setup is ready, we just need to run it. Let's add some `package.json` script
"scripts": {
"serve": "ladle serve",
"build": "ladle build && ladle preview -p 61000",
"test:dev": "TYPE=dev pnpx playwright test",
"test": "pnpx playwright test",
"test:update": "pnpx playwright test -u"
"test:dev": "TYPE=dev pnpm exec playwright test",
"test": "pnpm exec playwright test",
"test:update": "pnpm exec playwright test -u"
}
}
```
Expand Down
2 changes: 1 addition & 1 deletion packages/website/docs/visual-snapshots.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@ Object.keys(stories).forEach((storyKey) => {
```sh
pnpm ladle build
pnpm ladle preview -p 61000
pnpx playwright test
pnpm exec playwright test
```

The first time you run the `test` script it will error out since it needs to create the baseline screenshots in `tests/snapshot.spec.ts-snapshots` folder. The second run will succeed:
Expand Down

1 comment on commit 6d720ab

@vercel
Copy link

@vercel vercel bot commented on 6d720ab May 27, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

ladle – ./

ladle.vercel.app
ladle-git-main-miksu.vercel.app
ladle.dev
ladle-miksu.vercel.app

Please sign in to comment.