From 6e46ba19c1ffa611e368c596ee710d2f441bf5e2 Mon Sep 17 00:00:00 2001 From: Manjesh M Pillai <56511816+m4manjesh@users.noreply.github.com> Date: Tue, 20 Feb 2024 00:03:47 +0000 Subject: [PATCH 1/7] add extra style sx properly --- src/NoWrapTypography/NoWrapTypography.stories.tsx | 7 +++++-- src/NoWrapTypography/NoWrapTypography.tsx | 2 +- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/src/NoWrapTypography/NoWrapTypography.stories.tsx b/src/NoWrapTypography/NoWrapTypography.stories.tsx index ee6427fe..87e3b787 100644 --- a/src/NoWrapTypography/NoWrapTypography.stories.tsx +++ b/src/NoWrapTypography/NoWrapTypography.stories.tsx @@ -29,10 +29,13 @@ const Template: StoryFn = props => { ); }; -export const Default = { +export const Default: { + args: NoWrapTypographyProps; + render: StoryFn; +} = { args: { children: "text that is too long to fit in the box", - sx: { fontSize: "18px", maxWidth: "250px" } + sx: { fontSize: "16px", maxWidth: "250px" } }, render: Template diff --git a/src/NoWrapTypography/NoWrapTypography.tsx b/src/NoWrapTypography/NoWrapTypography.tsx index 98cd6dbd..a96aa930 100644 --- a/src/NoWrapTypography/NoWrapTypography.tsx +++ b/src/NoWrapTypography/NoWrapTypography.tsx @@ -39,7 +39,7 @@ export default function NoWrapTypography({ textOverflow: "ellipsis", whiteSpace: "nowrap", wordBreak: "break-all", - ...(Array.isArray(sx) ? sx : [sx]) + ...sx }} variant={variant} > From 129413e7ae6434d2df777e2627998502df730760 Mon Sep 17 00:00:00 2001 From: Matthew Corner Date: Tue, 20 Feb 2024 11:16:14 +0000 Subject: [PATCH 2/7] Fix sx prop --- .../NoWrapTypography.stories.tsx | 2 +- src/NoWrapTypography/NoWrapTypography.tsx | 19 +++++++++++-------- 2 files changed, 12 insertions(+), 9 deletions(-) diff --git a/src/NoWrapTypography/NoWrapTypography.stories.tsx b/src/NoWrapTypography/NoWrapTypography.stories.tsx index 87e3b787..1a89cd63 100644 --- a/src/NoWrapTypography/NoWrapTypography.stories.tsx +++ b/src/NoWrapTypography/NoWrapTypography.stories.tsx @@ -35,7 +35,7 @@ export const Default: { } = { args: { children: "text that is too long to fit in the box", - sx: { fontSize: "16px", maxWidth: "250px" } + sx: { fontSize: "18px", maxWidth: "250px" } }, render: Template diff --git a/src/NoWrapTypography/NoWrapTypography.tsx b/src/NoWrapTypography/NoWrapTypography.tsx index a96aa930..64902051 100644 --- a/src/NoWrapTypography/NoWrapTypography.tsx +++ b/src/NoWrapTypography/NoWrapTypography.tsx @@ -33,14 +33,17 @@ export default function NoWrapTypography({ {children} From 27feab26b7265af2b1f180dd53d8d7096eeb0632 Mon Sep 17 00:00:00 2001 From: Matthew Corner Date: Tue, 20 Feb 2024 11:23:55 +0000 Subject: [PATCH 3/7] Add test --- src/NoWrapTypography/NoWrapTypography.test.tsx | 14 ++++++++++++++ 1 file changed, 14 insertions(+) create mode 100644 src/NoWrapTypography/NoWrapTypography.test.tsx diff --git a/src/NoWrapTypography/NoWrapTypography.test.tsx b/src/NoWrapTypography/NoWrapTypography.test.tsx new file mode 100644 index 00000000..777132e3 --- /dev/null +++ b/src/NoWrapTypography/NoWrapTypography.test.tsx @@ -0,0 +1,14 @@ +import { describe, test } from "vitest"; +import { render, screen } from "@testing-library/react"; + +import NoWrapTypography from "./NoWrapTypography"; +import React from "react"; + +describe("NoWrapTypography", () => { + test("can pass 'sx' prop", () => { + render( + Some text + ); + expect(screen.getByText("Some text")).toHaveStyle("color: rgb(255, 0, 0)"); + }); +}); From d166c4a93c773c54cde6859d7b8becf4f940d417 Mon Sep 17 00:00:00 2001 From: Matthew Corner Date: Tue, 20 Feb 2024 14:10:00 +0000 Subject: [PATCH 4/7] Improve starting storybook:serve --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 640d65bd..2168dba6 100644 --- a/package.json +++ b/package.json @@ -17,7 +17,7 @@ "start": "microbundle-crl watch --no-compress --format modern,cjs --jsxFragment React.Fragment", "storybook": "storybook dev -p 6006", "storybook:build": "storybook build", - "storybook:serve:start": "pm2 start ./serve-storybook.js --name storybook", + "storybook:serve:start": "pm2 delete storybook -s || : && pm2 start ./serve-storybook.js --name storybook", "storybook:serve:stop": "pm2 delete storybook", "test": "run-s test:unit test:lint test:playwright", "test:playwright": "npm run storybook:build && npm run storybook:serve:start && npx playwright test && npm run storybook:serve:stop", From cd401e44c6900e2e36355383a2df281b48c64627 Mon Sep 17 00:00:00 2001 From: Matthew Corner Date: Fri, 16 Feb 2024 14:43:54 +0000 Subject: [PATCH 5/7] Don't open playwright reports on fail It breaks the teardown of the storybook server --- playwright.config.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/playwright.config.ts b/playwright.config.ts index f7b48c20..f4f4148d 100644 --- a/playwright.config.ts +++ b/playwright.config.ts @@ -30,7 +30,7 @@ export default defineConfig({ use: { ...devices["Desktop Safari"] } } ], - reporter: "html", + reporter: [["html", { open: "never" }]], /* Retry on CI only */ retries: process.env.CI ? 2 : 0, testDir: "./src", From a9d87ed645f2d60854fffe06c00dcad87462631b Mon Sep 17 00:00:00 2001 From: Matthew Corner Date: Tue, 20 Feb 2024 14:24:39 +0000 Subject: [PATCH 6/7] Fix test --- src/NoWrapTypography/NoWrapTypography.stories.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/NoWrapTypography/NoWrapTypography.stories.tsx b/src/NoWrapTypography/NoWrapTypography.stories.tsx index 1a89cd63..e0bd4555 100644 --- a/src/NoWrapTypography/NoWrapTypography.stories.tsx +++ b/src/NoWrapTypography/NoWrapTypography.stories.tsx @@ -35,7 +35,8 @@ export const Default: { } = { args: { children: "text that is too long to fit in the box", - sx: { fontSize: "18px", maxWidth: "250px" } + sx: { maxWidth: "250px" }, + variant: "body1" }, render: Template From 6d0f9a2a9c6fa406fea36a67e92f5fe21dd0a81f Mon Sep 17 00:00:00 2001 From: Matthew Corner Date: Tue, 20 Feb 2024 14:43:42 +0000 Subject: [PATCH 7/7] windows support? --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 2168dba6..971085ff 100644 --- a/package.json +++ b/package.json @@ -17,7 +17,7 @@ "start": "microbundle-crl watch --no-compress --format modern,cjs --jsxFragment React.Fragment", "storybook": "storybook dev -p 6006", "storybook:build": "storybook build", - "storybook:serve:start": "pm2 delete storybook -s || : && pm2 start ./serve-storybook.js --name storybook", + "storybook:serve:start": "pm2 delete storybook -s 2> /dev/null || true && pm2 start ./serve-storybook.js --name storybook", "storybook:serve:stop": "pm2 delete storybook", "test": "run-s test:unit test:lint test:playwright", "test:playwright": "npm run storybook:build && npm run storybook:serve:start && npx playwright test && npm run storybook:serve:stop",