Skip to content

Commit

Permalink
feat(novui,web): Setup Mantine v7 and demonstrate ability to style in…
Browse files Browse the repository at this point in the history
… lib and app (#5651)

* feat: Add mantine7

* feat: Centralized core type
  • Loading branch information
Joel Anton authored and SokratisVidros committed Jun 13, 2024
1 parent 9085660 commit 3751261
Show file tree
Hide file tree
Showing 11 changed files with 651 additions and 397 deletions.
17 changes: 10 additions & 7 deletions apps/web/src/Providers.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import { HelmetProvider } from 'react-helmet-async';
import { BrowserRouter } from 'react-router-dom';
import { api } from './api/api.client';
import { css } from '@novu/novui/css';
import { NovuiProvider } from '@novu/novui';

const defaultQueryFn = async ({ queryKey }: { queryKey: string }) => {
const response = await api.get(`${queryKey[0]}`);
Expand All @@ -31,13 +32,15 @@ const queryClient = new QueryClient({
const Providers: React.FC<PropsWithChildren<{}>> = ({ children }) => {
return (
<ThemeProvider>
<SegmentProvider>
<QueryClientProvider client={queryClient}>
<BrowserRouter basename={CONTEXT_PATH}>
<HelmetProvider>{children}</HelmetProvider>
</BrowserRouter>
</QueryClientProvider>
</SegmentProvider>
<NovuiProvider>
<SegmentProvider>
<QueryClientProvider client={queryClient}>
<BrowserRouter basename={CONTEXT_PATH}>
<HelmetProvider>{children}</HelmetProvider>
</BrowserRouter>
</QueryClientProvider>
</SegmentProvider>
</NovuiProvider>
</ThemeProvider>
);
};
Expand Down
11 changes: 10 additions & 1 deletion libs/novui/.storybook/preview.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,10 @@ import React from 'react';
import { lightTheme, darkTheme } from './NovuTheme';
import { Parameters, Decorator } from '@storybook/react';
import { css } from '../styled-system/css';
import { MantineThemeProvider } from '@mantine/core';
import { NovuiProvider } from '../src/components';

import '@mantine/core/styles.css';
// Bring in the Panda-generated stylesheets
import '../src/index.css';

Expand Down Expand Up @@ -36,5 +39,11 @@ function ColorSchemeThemeWrapper({ children }) {
}

export const decorators: Decorator[] = [
(renderStory) => <ColorSchemeThemeWrapper>{renderStory()}</ColorSchemeThemeWrapper>,
(renderStory) => (
<ColorSchemeThemeWrapper>
<NovuiProvider>
<MantineThemeProvider>{renderStory()}</MantineThemeProvider>
</NovuiProvider>
</ColorSchemeThemeWrapper>
),
];
10 changes: 9 additions & 1 deletion libs/novui/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,8 @@
"prepare:lib": "pnpm prepare:panda && pnpm prepare:audit",
"prepare:panda": "pnpm panda codegen",
"prepare:audit": "pnpm audit-components",
"prebuild": "rimraf dist styled-system && pnpm prepare:lib",
"clean": "rimraf dist styled-system",
"prebuild": "pnpm prepare:panda",
"lint": "eslint --ext .ts,.tsx src",
"build": "cross-env node_modules/.bin/tsc",
"build:watch": "pnpm panda --watch & cross-env node_modules/.bin/tsc -w --preserveWatchOutput",
Expand Down Expand Up @@ -85,6 +86,9 @@
"@vitejs/plugin-react": "^4.0.3",
"eslint-plugin-react-hooks": "^4.6.2",
"eslint-plugin-storybook": "^0.6.13",
"postcss": "^8.4.38",
"postcss-preset-mantine": "^1.15.0",
"postcss-simple-vars": "^7.0.1",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-scanner": "^1.1.0",
Expand Down Expand Up @@ -115,5 +119,9 @@
]
}
}
},
"dependencies": {
"@mantine/core": "^7.10.0",
"@mantine/hooks": "^7.10.0"
}
}
17 changes: 15 additions & 2 deletions libs/novui/postcss.config.cjs
Original file line number Diff line number Diff line change
@@ -1,7 +1,20 @@
module.exports = {
/**
* must use this syntax for vite + panda
* Must use array + require syntax for vite + postcss & panda
* https://vitejs.dev/config/shared-options.html#css-postcss
* https://panda-css.com/docs/installation/storybook#install-panda
*/
plugins: [require('@pandacss/dev/postcss')()],
plugins: [
require('@pandacss/dev/postcss')(),
require('postcss-preset-mantine')(),
require('postcss-simple-vars')({
variables: {
'mantine-breakpoint-xs': '36em',
'mantine-breakpoint-sm': '48em',
'mantine-breakpoint-md': '62em',
'mantine-breakpoint-lg': '75em',
'mantine-breakpoint-xl': '88em',
},
}),
],
};
8 changes: 8 additions & 0 deletions libs/novui/src/components/NovuiProvider.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
import { MantineProvider } from '@mantine/core';
import { FC, PropsWithChildren } from 'react';
interface INovuiProviderProps extends PropsWithChildren {}

/** Used to export a v7 Mantine provider */
export const NovuiProvider: FC<INovuiProviderProps> = ({ children }) => {
return <MantineProvider>{children}</MantineProvider>;
};
2 changes: 1 addition & 1 deletion libs/novui/src/components/Test.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,4 +10,4 @@ export default {

const Template: StoryFn<typeof Test> = ({ ...args }) => <Test {...args}>Example Text</Test>;

export const all = () => <Test />;
export const all = () => <Test onClick={() => alert('Test!')} />;
41 changes: 27 additions & 14 deletions libs/novui/src/components/Test.tsx
Original file line number Diff line number Diff line change
@@ -1,20 +1,33 @@
import { FC, MouseEventHandler } from 'react';
import { Button as ExternalButton } from '@mantine/core';
import { css } from '../../styled-system/css';
import { FC } from 'react';
import { CoreProps } from '../types';

/**
* An example component using Panda.
* TODO remove this in a future iteration.
*/
export const Test: FC = () => {
interface ITestProps extends CoreProps {
onClick: MouseEventHandler<HTMLButtonElement>;
}

export const Test: FC<ITestProps> = ({ onClick, className }) => {
return (
<p
className={css({
bg: 'legacy.warning',
textAlign: 'center',
textStyle: 'title.page',
})}
<ExternalButton
onClick={onClick}
leftSection={'hello'}
className={className}
classNames={{
root: css({
color: 'typography.text.feedback.alert',
fontSize: '225 !important',
bg: 'typography.text.feedback.success',
p: '100',
}),
inner: css({
color: 'typography.text.feedback.alert',
fontSize: '225 !important',
bg: 'typography.text.feedback.success',
}),
}}
>
Testing everything now
</p>
Test
</ExternalButton>
);
};
1 change: 1 addition & 0 deletions libs/novui/src/components/index.ts
Original file line number Diff line number Diff line change
@@ -1 +1,2 @@
export * from './Test';
export * from './NovuiProvider';
8 changes: 8 additions & 0 deletions libs/novui/src/types/CoreProps.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
/**
* Defines the foundational props from which all Novu components should inherit.
*/
export interface CoreProps {
className?: string;
}

export type CorePropsWithChildren = React.PropsWithChildren<CoreProps>;
1 change: 1 addition & 0 deletions libs/novui/src/types/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export * from './CoreProps';
Loading

0 comments on commit 3751261

Please sign in to comment.