refactor: UI libs CSS+API refactor #698

matthewlipski · 2024-04-11T03:11:12Z

TODO:

Suggestion Menu, Side Menu, Table Handles in component context
Fix Mantine Formatting Toolbar color styles button dropdown
Ariakit remaining styling (image replace/caption buttons, link create button)
ShadCN styling
Set base bn- classes in a more elegant way
Fix BlockNoteViewRaw not having schema type args

Thoughts:

I know that using a select for the block type dropdown is most semantically correct, but I think it's a bit redundant.
- Adds an additional field to the API.
- Functionally the same as color style button, i.e. items run editor commands.
- Cannot pass a class name to target and dropdown separately as the select is treated as 1 element.
Since we want to minimize any changes made to the base ShadCN components, it means that some parts of the UI don't look quite right. These are fairly minor changes, just adjusting some element spacing, but we have 3 options for handling this:
1. We leave the styling as-is, since we expect people to provide their own pre-styled ShadCN components anyway.
2. We change the Tailwind styles within the base ShadCN components.
3. We add an additional CSS file to with said styling fixes.
How should we handle icons? Currently these are set by the react package without possibility of overriding them. This also means that react-icons is a dependency in the react package.
We probably want to make the components in the context as generic as possible, as right now there's an ugly mix of specific and generic ones.

vercel · 2024-04-11T03:11:18Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
blocknote	✅ Ready (Inspect)	Visit Preview	Apr 30, 2024 9:27am
blocknote-website	✅ Ready (Inspect)	Visit Preview	Apr 30, 2024 9:27am

packages/ariakit/src/index.tsx

packages/ariakit/src/menu/Menu.tsx

packages/ariakit/src/style.css

packages/ariakit/src/toolbar/ToolbarButton.tsx

YousefED · 2024-04-11T07:58:18Z

packages/ariakit/src/toolbar/ToolbarButton.tsx

-        </Ariakit.Tooltip>
-      </Ariakit.TooltipProvider>
-    );
+    // return (


is this a todo?

packages/mantine/src/menu/Menu.tsx

packages/mantine/src/panel/PanelButton.tsx

packages/mantine/src/styles.css

packages/shadcn/src/toolbar/Toolbar.tsx

matthewlipski · 2024-04-19T17:04:32Z

To make things easier, I'm implementing feedback from #684, #689, and #696 here since this PR has the biggest changes, so everything can be in one place.

examples/01-basic/01-minimal/App.tsx

packages/ariakit/src/ariakitStyles.css

packages/mantine/src/suggestionMenu/SuggestionMenu.tsx

packages/react/src/components/SuggestionMenu/SuggestionMenuController.tsx

packages/react/src/editor/ComponentsContext.tsx

packages/shadcn/src/index.tsx

- Re-added refs to all relevant components - Refactored ShadCN context - Simplified how class names are set in `react` package - Added prefixes to all UI specific class names - Fixed remaining select/menu/popover overflow issues - Fixed examples - Fixed build

…kNote into refactor/ui-libs-api-css

* Added ShadCN color styles button & form components * refactor: UI libs CSS+API refactor (#698) * Cleaned up component context API * WIP * Refactored CSS & ShadCN API * Fixed Ariakit component props * Fixed Mantine component props * Fixed ShadCN component props * Cleanup * Misc fixes * - Added remaining components to context - Re-added refs to all relevant components - Refactored ShadCN context - Simplified how class names are set in `react` package - Added prefixes to all UI specific class names - Fixed remaining select/menu/popover overflow issues - Fixed examples - Fixed build * Changed ShadCN suggestion menu to use Card * Small fix * Fixed linting * Fixed `BlockNoteViewRaw` typing * Misc fixes * Misc fixes * Fixed unit tests * Fixed Mantine sub menus * Misc UI fixes * Misc changes * fix import * fix tablehandles performance issue / max call stack * Fixed PW tests * Small fix * Added ShadCN/Ariakit tests * fix draghandles * add vercel rewrites * improve shadcn setup * Fixed remaining Ariakit/ShadCN/Mantine styles * extract strings from react package * extract all strings * clean i18n setup * fix build * Fixed dark mode for Ariakit/ShadCN * Misc fixes --------- Co-authored-by: yousefed <[email protected]> --------- Co-authored-by: yousefed <[email protected]>

* Extracted mantine & ariakit packages * fix: ShadCN color styles button & form components (#696) * Added ShadCN color styles button & form components * refactor: UI libs CSS+API refactor (#698) * Cleaned up component context API * WIP * Refactored CSS & ShadCN API * Fixed Ariakit component props * Fixed Mantine component props * Fixed ShadCN component props * Cleanup * Misc fixes * - Added remaining components to context - Re-added refs to all relevant components - Refactored ShadCN context - Simplified how class names are set in `react` package - Added prefixes to all UI specific class names - Fixed remaining select/menu/popover overflow issues - Fixed examples - Fixed build * Changed ShadCN suggestion menu to use Card * Small fix * Fixed linting * Fixed `BlockNoteViewRaw` typing * Misc fixes * Misc fixes * Fixed unit tests * Fixed Mantine sub menus * Misc UI fixes * Misc changes * fix import * fix tablehandles performance issue / max call stack * Fixed PW tests * Small fix * Added ShadCN/Ariakit tests * fix draghandles * add vercel rewrites * improve shadcn setup * Fixed remaining Ariakit/ShadCN/Mantine styles * extract strings from react package * extract all strings * clean i18n setup * fix build * Fixed dark mode for Ariakit/ShadCN * Misc fixes --------- Co-authored-by: yousefed <[email protected]> --------- Co-authored-by: yousefed <[email protected]> --------- Co-authored-by: yousefed <[email protected]>

* Extracted Mantine panel components * Added ShadCN panel implementation * Added Ariakit image panel components * refactor: Extract Mantine & Ariakit packages (#689) * Extracted mantine & ariakit packages * fix: ShadCN color styles button & form components (#696) * Added ShadCN color styles button & form components * refactor: UI libs CSS+API refactor (#698) * Cleaned up component context API * WIP * Refactored CSS & ShadCN API * Fixed Ariakit component props * Fixed Mantine component props * Fixed ShadCN component props * Cleanup * Misc fixes * - Added remaining components to context - Re-added refs to all relevant components - Refactored ShadCN context - Simplified how class names are set in `react` package - Added prefixes to all UI specific class names - Fixed remaining select/menu/popover overflow issues - Fixed examples - Fixed build * Changed ShadCN suggestion menu to use Card * Small fix * Fixed linting * Fixed `BlockNoteViewRaw` typing * Misc fixes * Misc fixes * Fixed unit tests * Fixed Mantine sub menus * Misc UI fixes * Misc changes * fix import * fix tablehandles performance issue / max call stack * Fixed PW tests * Small fix * Added ShadCN/Ariakit tests * fix draghandles * add vercel rewrites * improve shadcn setup * Fixed remaining Ariakit/ShadCN/Mantine styles * extract strings from react package * extract all strings * clean i18n setup * fix build * Fixed dark mode for Ariakit/ShadCN * Misc fixes --------- Co-authored-by: yousefed <[email protected]> --------- Co-authored-by: yousefed <[email protected]> --------- Co-authored-by: yousefed <[email protected]> --------- Co-authored-by: yousefed <[email protected]>

* wip * Refactored image toolbar * Refactored image toolbar, hyperlink toolbar, and table handles * Implemented PR feedback * Implemented PR feedback * Cleaned up component code * wip: ariakit * wip * fix * fix merge * wip * wip * fix * wip * wip * wip: suggestionmenu * extract suggestion menu * wip * side menu button * move mantine elements to mantine dir * shadcn wip * wip * fix * shadcn fixes * refactor: Extract image panel components (#684) * Extracted Mantine panel components * Added ShadCN panel implementation * Added Ariakit image panel components * Revert "refactor: Extract image panel components (#684)" (#716) This reverts commit 600f0c5. * refactor: Extract image panel components (#717) * Extracted Mantine panel components * Added ShadCN panel implementation * Added Ariakit image panel components * refactor: Extract Mantine & Ariakit packages (#689) * Extracted mantine & ariakit packages * fix: ShadCN color styles button & form components (#696) * Added ShadCN color styles button & form components * refactor: UI libs CSS+API refactor (#698) * Cleaned up component context API * WIP * Refactored CSS & ShadCN API * Fixed Ariakit component props * Fixed Mantine component props * Fixed ShadCN component props * Cleanup * Misc fixes * - Added remaining components to context - Re-added refs to all relevant components - Refactored ShadCN context - Simplified how class names are set in `react` package - Added prefixes to all UI specific class names - Fixed remaining select/menu/popover overflow issues - Fixed examples - Fixed build * Changed ShadCN suggestion menu to use Card * Small fix * Fixed linting * Fixed `BlockNoteViewRaw` typing * Misc fixes * Misc fixes * Fixed unit tests * Fixed Mantine sub menus * Misc UI fixes * Misc changes * fix import * fix tablehandles performance issue / max call stack * Fixed PW tests * Small fix * Added ShadCN/Ariakit tests * fix draghandles * add vercel rewrites * improve shadcn setup * Fixed remaining Ariakit/ShadCN/Mantine styles * extract strings from react package * extract all strings * clean i18n setup * fix build * Fixed dark mode for Ariakit/ShadCN * Misc fixes --------- Co-authored-by: yousefed <[email protected]> --------- Co-authored-by: yousefed <[email protected]> --------- Co-authored-by: yousefed <[email protected]> --------- Co-authored-by: yousefed <[email protected]> * Updated package versions * Updated screenshots * Updated screenshots * Updated screenshots * Updated screenshots * Updated docs * Addressed most TODOs and small fixes * Added ShadCN form * update docs * i18n + docs * Updated theming code * fix build and lint --------- Co-authored-by: Matthew Lipski <[email protected]> Co-authored-by: Matthew Lipski <[email protected]>

* wip * Refactored image toolbar * Refactored image toolbar, hyperlink toolbar, and table handles * Implemented PR feedback * Implemented PR feedback * Cleaned up component code * wip: ariakit * wip * fix * fix merge * wip * wip * fix * wip * wip * wip: suggestionmenu * extract suggestion menu * wip * side menu button * move mantine elements to mantine dir * shadcn wip * wip * fix * shadcn fixes * refactor: Extract image panel components (#684) * Extracted Mantine panel components * Added ShadCN panel implementation * Added Ariakit image panel components * Revert "refactor: Extract image panel components (#684)" (#716) This reverts commit 600f0c5. * refactor: Extract image panel components (#717) * Extracted Mantine panel components * Added ShadCN panel implementation * Added Ariakit image panel components * refactor: Extract Mantine & Ariakit packages (#689) * Extracted mantine & ariakit packages * fix: ShadCN color styles button & form components (#696) * Added ShadCN color styles button & form components * refactor: UI libs CSS+API refactor (#698) * Cleaned up component context API * WIP * Refactored CSS & ShadCN API * Fixed Ariakit component props * Fixed Mantine component props * Fixed ShadCN component props * Cleanup * Misc fixes * - Added remaining components to context - Re-added refs to all relevant components - Refactored ShadCN context - Simplified how class names are set in `react` package - Added prefixes to all UI specific class names - Fixed remaining select/menu/popover overflow issues - Fixed examples - Fixed build * Changed ShadCN suggestion menu to use Card * Small fix * Fixed linting * Fixed `BlockNoteViewRaw` typing * Misc fixes * Misc fixes * Fixed unit tests * Fixed Mantine sub menus * Misc UI fixes * Misc changes * fix import * fix tablehandles performance issue / max call stack * Fixed PW tests * Small fix * Added ShadCN/Ariakit tests * fix draghandles * add vercel rewrites * improve shadcn setup * Fixed remaining Ariakit/ShadCN/Mantine styles * extract strings from react package * extract all strings * clean i18n setup * fix build * Fixed dark mode for Ariakit/ShadCN * Misc fixes --------- Co-authored-by: yousefed <[email protected]> --------- Co-authored-by: yousefed <[email protected]> --------- Co-authored-by: yousefed <[email protected]> --------- Co-authored-by: yousefed <[email protected]> * Updated package versions * Updated screenshots * Updated screenshots * Updated screenshots * Updated screenshots * Updated docs * Addressed most TODOs and small fixes * Added ShadCN form * update docs * i18n + docs * fix keyboard handling of menus (tab, escape, etc.) * remove unnecessary default props on BlockNoteDefaultUI * fix mantine menu items with keyboard + small cleanup * add button labels and type checks * Updated theming code * suggestion menu aria improvements * small toolbarButton fix * playwright fixes * fix lint * fix build and lint * fix pw tests * address PR feedback * Merge remote-tracking branch 'origin/refactor/multi-ui-libs' into feature/accessibility-improvements --------- Co-authored-by: Matthew Lipski <[email protected]> Co-authored-by: Matthew Lipski <[email protected]>

matthewlipski added 2 commits April 9, 2024 20:04

Cleaned up component context API

bd8c2e7

WIP

67709b9

matthewlipski changed the base branch from main to refactor/shadcn-remaning-components April 11, 2024 03:11

YousefED reviewed Apr 11, 2024

View reviewed changes

Refactored CSS & ShadCN API

abc0235

vercel bot had a problem deploying to Preview – blocknote April 19, 2024 13:13 Failure

vercel bot had a problem deploying to Preview – blocknote-website April 19, 2024 13:16 Failure

Fixed Ariakit component props

f95006a

vercel bot had a problem deploying to Preview – blocknote April 19, 2024 14:10 Failure

vercel bot had a problem deploying to Preview – blocknote-website April 19, 2024 14:13 Failure

Fixed Mantine component props

09f1093

vercel bot had a problem deploying to Preview – blocknote April 19, 2024 16:09 Failure

vercel bot had a problem deploying to Preview – blocknote-website April 19, 2024 16:12 Failure

matthewlipski added 2 commits April 19, 2024 18:50

Fixed ShadCN component props

e6ad649

Cleanup

0f15fcd

vercel bot had a problem deploying to Preview – blocknote April 19, 2024 16:53 Failure

vercel bot had a problem deploying to Preview – blocknote-website April 19, 2024 16:55 Failure

Misc fixes

015d2df

vercel bot had a problem deploying to Preview – blocknote-website April 19, 2024 17:04 Failure

vercel bot had a problem deploying to Preview – blocknote April 19, 2024 17:06 Failure

YousefED reviewed Apr 22, 2024

View reviewed changes

vercel bot deployed to Preview – blocknote-website April 24, 2024 09:15 View deployment

vercel bot deployed to Preview – blocknote April 24, 2024 09:17 View deployment

matthewlipski added 2 commits April 24, 2024 11:22

Changed ShadCN suggestion menu to use Card

487c0fb

Small fix

f818962

vercel bot deployed to Preview – blocknote April 24, 2024 09:27 View deployment

vercel bot deployed to Preview – blocknote-website April 24, 2024 09:31 View deployment

vercel bot deployed to Preview – blocknote-website April 29, 2024 09:49 View deployment

vercel bot deployed to Preview – blocknote April 29, 2024 09:52 View deployment

Fixed remaining Ariakit/ShadCN/Mantine styles

8c53a67

vercel bot deployed to Preview – blocknote April 29, 2024 13:36 View deployment

vercel bot deployed to Preview – blocknote-website April 29, 2024 13:41 View deployment

YousefED added 2 commits April 29, 2024 16:09

extract strings from react package

bc6470c

Merge branch 'refactor/ui-libs-api-css' of github.com:TypeCellOS/Bloc…

9b02851

…kNote into refactor/ui-libs-api-css

vercel bot deployed to Preview – blocknote April 29, 2024 14:12 View deployment

vercel bot deployed to Preview – blocknote-website April 29, 2024 14:14 View deployment

extract all strings

e97bcc9

vercel bot had a problem deploying to Preview – blocknote-website April 29, 2024 18:30 Failure

vercel bot had a problem deploying to Preview – blocknote April 29, 2024 18:33 Failure

clean i18n setup

c442d2c

vercel bot had a problem deploying to Preview – blocknote April 29, 2024 19:14 Failure

vercel bot had a problem deploying to Preview – blocknote-website April 29, 2024 19:15 Failure

fix build

1f0a370

vercel bot deployed to Preview – blocknote April 29, 2024 19:30 View deployment

vercel bot deployed to Preview – blocknote-website April 29, 2024 19:34 View deployment

Fixed dark mode for Ariakit/ShadCN

be5a021

vercel bot deployed to Preview – blocknote April 30, 2024 00:59 View deployment

vercel bot deployed to Preview – blocknote-website April 30, 2024 01:04 View deployment

Misc fixes

b55ab71

vercel bot deployed to Preview – blocknote-website April 30, 2024 09:24 View deployment

vercel bot deployed to Preview – blocknote April 30, 2024 09:27 View deployment

matthewlipski merged commit eb28c32 into refactor/shadcn-remaning-components Apr 30, 2024
2 of 3 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

refactor: UI libs CSS+API refactor #698

refactor: UI libs CSS+API refactor #698

matthewlipski commented Apr 11, 2024 •

edited

Loading

vercel bot commented Apr 11, 2024 •

edited

Loading

YousefED Apr 11, 2024

matthewlipski commented Apr 19, 2024

refactor: UI libs CSS+API refactor #698

refactor: UI libs CSS+API refactor #698

Conversation

matthewlipski commented Apr 11, 2024 • edited Loading

vercel bot commented Apr 11, 2024 • edited Loading

YousefED Apr 11, 2024

Choose a reason for hiding this comment

matthewlipski commented Apr 19, 2024

matthewlipski commented Apr 11, 2024 •

edited

Loading

vercel bot commented Apr 11, 2024 •

edited

Loading