[Design System] - New Package #5467

antonjoel82 · 2024-04-29T04:40:40Z

What changed? Why was the change needed?

Create a new package for the design system!
Bring-in Panda tokens + setup
Update build systems such that we can use a single import for our components & Panda-generated code
The name novui (Novu + UI) is not final and can be replaced. It was used to be clearly different than the existing package so as not to confuse the two

Notes

This PR will fail the build because all Panda imports need to be updated -- this is done in a different PR ([New design system pkg] Update web imports to point to new Panda #5546) to avoid 40+ files of only import changes
I had to abandon tsup :( I repeatedly got issues with React is not defined when importing the Test component in web, so went back to plain ol' tsconfig
Storybook and vitest are configured in [Design System] Storybook & Vitest #5569

Screenshots

This incredible UI showcases a component built in the new DS package next to a component with styles overwritten in web using the generated panda code imported from the new package -- all using tokens for colors

Future iterations

Turn-on "strict" tokens for web -- currently this causes a lot of errors for tokens that shouldn't seemingly be excluded from strict

netlify · 2024-04-29T04:40:55Z

✅ Deploy Preview for dev-web-novu ready!

Name	Link
🔨 Latest commit	`686c09b`
🔍 Latest deploy log	https://app.netlify.com/sites/dev-web-novu/deploys/6647b6e00da9670008ff292e
😎 Deploy Preview	https://deploy-preview-5467--dev-web-novu.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

netlify · 2024-04-29T04:40:56Z

✅ Deploy Preview for novu-design ready!

Name	Link
🔨 Latest commit	`686c09b`
🔍 Latest deploy log	https://app.netlify.com/sites/novu-design/deploys/6647b6e01adc3400088b4978
😎 Deploy Preview	https://deploy-preview-5467--novu-design.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

antonjoel82 · 2024-05-13T19:14:01Z

apps/web/tsconfig.json

@@ -10,7 +10,7 @@
 "forceConsistentCasingInFileNames": true,
 "noFallthroughCasesInSwitch": true,
 "module": "esnext",
- "moduleResolution": "node",
+ "moduleResolution": "Node16",


🗒 note (non-blocking): This was necessary to enable using the "new" exports field in package.json (in novui/package.json). This permits imports like @novu/novui/css which actually points to ./styled-system/css instead of dist‏

antonjoel82 · 2024-05-13T19:14:55Z

apps/web/src/pages/invites/components/MembersTable.cy.tsx

@@ -1,7 +1,7 @@
 import { MembersTable } from './MembersTable';
 import { TestWrapper } from '../../../testing';
 import { MemberRoleEnum, MemberStatusEnum } from '@novu/shared';
-import { SinonSpy } from 'cypress/types/sinon';
+import { SinonSpy } from 'sinon';


🗒 note (non-blocking): This broke when changing module resolution in tsconfig -- also just not ideal anyway‏

antonjoel82 · 2024-05-13T19:20:24Z

apps/web/src/components/nav/NavMenuButton/NavMenuLinkButton.tsx

@@ -1,7 +1,7 @@
 import { FC, PropsWithChildren, useState } from 'react';
 import { NavLink } from 'react-router-dom';
-import { css } from '../../../styled-system/css';
-import { HStack } from '../../../styled-system/jsx';
+import { css } from '@novu/novui/css';


🗒 note (non-blocking): ‏Example imports using the new DS

antonjoel82 · 2024-05-13T19:23:23Z

libs/novui/package.json

+ ".": {
+ "source": "./src/index.ts",
+ "types": "./dist/index.d.ts",
+ "import": "./dist/index.js"
+ },
+ "./css": {
+ "types": "./styled-system/css/index.d.ts",
+ "require": "./styled-system/css/index.js",
+ "import": "./styled-system/css/index.js"
+ },
+ "./tokens": {
+ "types": "./styled-system/tokens/index.d.ts",
+ "require": "./styled-system/tokens/index.js",
+ "import": "./styled-system/tokens/index.js"
+ },
+ "./types": {
+ "types": "./styled-system/types/index.d.ts",
+ "require": "./styled-system/types/index.js",
+ "import": "./styled-system/types/index.js"
+ },
+ "./patterns": {
+ "types": "./styled-system/patterns/index.d.ts",
+ "require": "./styled-system/patterns/index.js",
+ "import": "./styled-system/patterns/index.js"
+ },
+ "./recipes": {
+ "types": "./styled-system/recipes/index.d.ts",
+ "require": "./styled-system/recipes/index.js",
+ "import": "./styled-system/recipes/index.js"
+ },
+ "./jsx": {
+ "types": "./styled-system/jsx/index.d.ts",
+ "require": "./styled-system/jsx/index.js",
+ "import": "./styled-system/jsx/index.js"
+ },
+ "./styles.css": "./styled-system/styles.css"


🗒 note (non-blocking): Enables better imports for package consumers. Requires moduleResolution: >= Node16 in the consumer‏

antonjoel82 · 2024-05-13T19:42:18Z

apps/web/src/pages/templates/TemplatesListNoData.tsx

+import { Test } from '@novu/novui';
+import { css } from '@novu/novui/css';


🗒 note (non-blocking): ‏Example of new imports!

antonjoel82 · 2024-05-15T00:02:17Z

apps/web/src/pages/templates/TemplatesListNoData.tsx

+ <NoDataSubHeading className={css({ color: 'legacy.success !important' })}>
+ Start from a blank workflow or use a template
+ </NoDataSubHeading>
+ <Test />


🗒 note (non-blocking): We will remove this before merging! This is just to validate that everything is working across the two‏

…5546) * fix: Import aliases * refactor: Point styled-system imports to ds

* refactor: Setup storybook & vitest

…nt audit (#5592) * refactor: Remove panda * refactor: Move audit to new package * refactor: Move scripts and config * refactor: Move ComponentAuditTable * fix: Component audit

github-actions bot added @novu/web CI/CD labels Apr 29, 2024

antonjoel82 changed the title ~~Ds new pkg~~ [Design System] - New Package May 1, 2024

antonjoel82 force-pushed the ds-new-pkg branch 3 times, most recently from f3776e9 to 714bde9 Compare May 8, 2024 01:56

antonjoel82 commented May 13, 2024

View reviewed changes

antonjoel82 marked this pull request as ready for review May 14, 2024 23:44

antonjoel82 requested review from a team as code owners May 14, 2024 23:44

antonjoel82 requested review from scopsy and AliaksandrRyzhou and removed request for a team May 14, 2024 23:44

antonjoel82 commented May 15, 2024

View reviewed changes

antonjoel82 mentioned this pull request May 15, 2024

[New design system pkg] Update web imports to point to new Panda #5546

Merged

github-actions bot added the @novu/design-system label May 15, 2024

antonjoel82 added 2 commits May 16, 2024 16:05

feat: Move existing foundations

7159456

build: Bookmarking progress

14b0ec6

antonjoel82 force-pushed the ds-new-pkg branch from 8bc533d to 14b0ec6 Compare May 16, 2024 23:08

github-actions bot removed the @novu/design-system label May 16, 2024

SokratisVidros approved these changes May 17, 2024

View reviewed changes

antonjoel82 added 2 commits May 17, 2024 09:50

Merge branch 'next' into ds-new-pkg

cd6b868

[New design system pkg] Update web imports to point to new Panda (#…

296d61f

…5546) * fix: Import aliases * refactor: Point styled-system imports to ds

github-actions bot added the @novu/design-system label May 17, 2024

antonjoel82 added 8 commits May 17, 2024 10:50

[Design System] Storybook & Vitest (#5569)

d7af8af

* refactor: Setup storybook & vitest

[Design System] Remove Panda from old Design System & migrate compone…

74fe7c2

…nt audit (#5592) * refactor: Remove panda * refactor: Move audit to new package * refactor: Move scripts and config * refactor: Move ComponentAuditTable * fix: Component audit

ci: Cspell

92fe680

fix: Missed imports

a4c3375

ci: Temporarily make mantine imports a warning

560e0e4

refactor: One more import

fd3e641

fix: Remove example, prepare for merge

4cf861b

ci: Disable mantine rule -- it's too noisy with current setup

686c09b

antonjoel82 merged commit d887144 into next May 17, 2024
12 of 14 checks passed

antonjoel82 deleted the ds-new-pkg branch May 17, 2024 19:59

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Design System] - New Package #5467

[Design System] - New Package #5467

antonjoel82 commented Apr 29, 2024 •

edited

netlify bot commented Apr 29, 2024 •

edited

netlify bot commented Apr 29, 2024 •

edited

antonjoel82 May 13, 2024

antonjoel82 May 13, 2024

antonjoel82 May 13, 2024

antonjoel82 May 13, 2024

antonjoel82 May 13, 2024

antonjoel82 May 15, 2024

		import { Test } from '@novu/novui';
		import { css } from '@novu/novui/css';

[Design System] - New Package #5467

[Design System] - New Package #5467

Conversation

antonjoel82 commented Apr 29, 2024 • edited

What changed? Why was the change needed?

Notes

Screenshots

Future iterations

netlify bot commented Apr 29, 2024 • edited

✅ Deploy Preview for dev-web-novu ready!

netlify bot commented Apr 29, 2024 • edited

✅ Deploy Preview for novu-design ready!

antonjoel82 May 13, 2024

Choose a reason for hiding this comment

antonjoel82 May 13, 2024

Choose a reason for hiding this comment

antonjoel82 May 13, 2024

Choose a reason for hiding this comment

antonjoel82 May 13, 2024

Choose a reason for hiding this comment

antonjoel82 May 13, 2024

Choose a reason for hiding this comment

antonjoel82 May 15, 2024

Choose a reason for hiding this comment

antonjoel82 commented Apr 29, 2024 •

edited

netlify bot commented Apr 29, 2024 •

edited

netlify bot commented Apr 29, 2024 •

edited