diff --git a/package-lock.json b/package-lock.json index 1f1edaa86..7a180696b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -17,7 +17,6 @@ "@editorjs/list": "^1.7.0", "@editorjs/paragraph": "^2.8.0", "@editorjs/quote": "^2.4.0", - "@floating-ui/react-dom-interactions": "^0.5.0", "@glideapps/glide-data-grid": "^5.0.0", "@graphiql/plugin-explorer": "^0.1.12", "@graphiql/react": "^0.15.0", @@ -27,7 +26,7 @@ "@material-ui/lab": "^4.0.0-alpha.61", "@material-ui/styles": "^4.11.4", "@reach/auto-id": "^0.16.0", - "@saleor/macaw-ui": "^0.8.0-pre.1", + "@saleor/macaw-ui": "^0.7.2", "@saleor/sdk": "^0.4.4", "@sentry/react": "^6.0.0", "@types/faker": "^5.1.6", @@ -7235,15 +7234,27 @@ } }, "node_modules/@saleor/macaw-ui": { - "version": "0.8.0-pre.1", - "resolved": "https://registry.npmjs.org/@saleor/macaw-ui/-/macaw-ui-0.8.0-pre.1.tgz", - "integrity": "sha512-zNnLJcm13HMqGJjHmjyoLL/lQ5dIefUbOq/Ws7wxPn1Bh0wwhY/3T+Qc6iG5W9gvIcpTXJojwL7tT31DHQ2KRw==", + "version": "0.7.2", + "resolved": "https://registry.npmjs.org/@saleor/macaw-ui/-/macaw-ui-0.7.2.tgz", + "integrity": "sha512-Fli7fhTWuHu7q2CzxwTUpB4x9HYaxHSAzCLZLA23VY1ieIWbCxbsXadMiMGWp/nuYitswMr6JXMm+1SDe9K8LQ==", + "dependencies": { + "@floating-ui/react-dom-interactions": "^0.5.0", + "clsx": "^1.1.1", + "downshift": "^6.1.7", + "lodash": "^4.17.21", + "lodash-es": "^4.17.21", + "react-inlinesvg": "^3.0.1" + }, "engines": { "node": ">=16 <19" }, "peerDependencies": { - "react": "^16.8.0 || ^17.0.0 || ^18.0.0", - "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" + "@material-ui/core": "^4.11.2", + "@material-ui/icons": "^4.11.2", + "@material-ui/lab": "^4.0.0-alpha.58", + "react": "^16.8.0 || ^17.0.0", + "react-dom": "^16.8.0 || ^17.0.0", + "react-helmet": "^6.1.0" } }, "node_modules/@saleor/sdk": { @@ -26575,8 +26586,7 @@ "node_modules/lodash-es": { "version": "4.17.21", "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz", - "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==", - "dev": true + "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==" }, "node_modules/lodash.camelcase": { "version": "4.3.0", @@ -44660,9 +44670,17 @@ } }, "@saleor/macaw-ui": { - "version": "0.8.0-pre.1", - "resolved": "https://registry.npmjs.org/@saleor/macaw-ui/-/macaw-ui-0.8.0-pre.1.tgz", - "integrity": "sha512-zNnLJcm13HMqGJjHmjyoLL/lQ5dIefUbOq/Ws7wxPn1Bh0wwhY/3T+Qc6iG5W9gvIcpTXJojwL7tT31DHQ2KRw==" + "version": "0.7.2", + "resolved": "https://registry.npmjs.org/@saleor/macaw-ui/-/macaw-ui-0.7.2.tgz", + "integrity": "sha512-Fli7fhTWuHu7q2CzxwTUpB4x9HYaxHSAzCLZLA23VY1ieIWbCxbsXadMiMGWp/nuYitswMr6JXMm+1SDe9K8LQ==", + "requires": { + "@floating-ui/react-dom-interactions": "^0.5.0", + "clsx": "^1.1.1", + "downshift": "^6.1.7", + "lodash": "^4.17.21", + "lodash-es": "^4.17.21", + "react-inlinesvg": "^3.0.1" + } }, "@saleor/sdk": { "version": "0.4.4", @@ -59816,8 +59834,7 @@ "lodash-es": { "version": "4.17.21", "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz", - "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==", - "dev": true + "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==" }, "lodash.camelcase": { "version": "4.3.0", diff --git a/package.json b/package.json index 8cf576c99..fccd17a58 100644 --- a/package.json +++ b/package.json @@ -33,9 +33,8 @@ "@material-ui/lab": "^4.0.0-alpha.61", "@material-ui/styles": "^4.11.4", "@reach/auto-id": "^0.16.0", - "@saleor/macaw-ui": "^0.8.0-pre.1", + "@saleor/macaw-ui": "^0.7.2", "@saleor/sdk": "^0.4.4", - "@floating-ui/react-dom-interactions": "^0.5.0", "@sentry/react": "^6.0.0", "@types/faker": "^5.1.6", "@uiw/react-color-hue": "0.0.34", diff --git a/src/components/AppLayout/AppLayout.tsx b/src/components/AppLayout/AppLayout.tsx index 99a333fd6..0477b77af 100644 --- a/src/components/AppLayout/AppLayout.tsx +++ b/src/components/AppLayout/AppLayout.tsx @@ -1,19 +1,30 @@ import { useUser } from "@dashboard/auth"; import useAppState from "@dashboard/hooks/useAppState"; import { isDarkTheme } from "@dashboard/misc"; -import { LinearProgress } from "@material-ui/core"; -import { useActionBar, useBacklink, useTheme } from "@saleor/macaw-ui"; +import { LinearProgress, useMediaQuery } from "@material-ui/core"; +import { + SaleorTheme, + Sidebar, + SidebarDrawer, + useActionBar, + useBacklink, + useTheme, +} from "@saleor/macaw-ui"; import clsx from "clsx"; import React from "react"; +import { useIntl } from "react-intl"; +import useRouter from "use-react-router"; import Container from "../Container"; import Navigator from "../Navigator"; import NavigatorButton from "../NavigatorButton/NavigatorButton"; -import { Sidebar, SidebarDrawer } from "../Sidebar"; import UserChip from "../UserChip"; import useAppChannel from "./AppChannelContext"; import AppChannelSelect from "./AppChannelSelect"; +import useMenuStructure from "./menuStructure"; +import { SidebarLink } from "./SidebarLink"; import { useFullSizeStyles, useStyles } from "./styles"; +import { isMenuActive } from "./utils"; interface AppLayoutProps { children: React.ReactNode; @@ -30,11 +41,24 @@ const AppLayout: React.FC = ({ const { anchor: appActionAnchor } = useActionBar(); const appHeaderAnchor = useBacklink(); const { logout, user } = useUser(); + const intl = useIntl(); const [appState] = useAppState(); + const { location } = useRouter(); const [isNavigatorVisible, setNavigatorVisibility] = React.useState(false); + const isMdUp = useMediaQuery((theme: SaleorTheme) => + theme.breakpoints.up("md"), + ); - const { availableChannels, channel, isPickerActive, setChannel } = - useAppChannel(false); + const { + availableChannels, + channel, + isPickerActive, + setChannel, + } = useAppChannel(false); + const [menuStructure, handleMenuItemClick] = useMenuStructure(intl, user); + const activeMenu = menuStructure.find(menuItem => + isMenuActive(location.pathname, menuItem), + )?.id; const toggleTheme = () => setTheme(isDarkTheme(themeType) ? "light" : "dark"); @@ -45,7 +69,15 @@ const AppLayout: React.FC = ({ setVisibility={setNavigatorVisibility} />
- + {isMdUp && ( + + )}
= ({
- + {!isMdUp && ( + + )}
{ diff --git a/src/components/Sidebar/legacy/utils.ts b/src/components/AppLayout/utils.ts similarity index 100% rename from src/components/Sidebar/legacy/utils.ts rename to src/components/AppLayout/utils.ts diff --git a/src/components/Sidebar/Drawer.tsx b/src/components/Sidebar/Drawer.tsx deleted file mode 100644 index 5c5818a3a..000000000 --- a/src/components/Sidebar/Drawer.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import { useFlags } from "@dashboard/hooks/useFlags"; -import React from "react"; - -import { LegacyDrawer } from "./legacy"; - -export const SidebarDrawer = () => { - const { enableNewSidebar } = useFlags(["enableNewSidebar"]); - - return enableNewSidebar.enabled ? null : ; -}; diff --git a/src/components/Sidebar/NewSidebar.tsx b/src/components/Sidebar/NewSidebar.tsx deleted file mode 100644 index 5bcf81efa..000000000 --- a/src/components/Sidebar/NewSidebar.tsx +++ /dev/null @@ -1,3 +0,0 @@ -import React from "react"; - -export const NewSidebar = () =>
Work in progress
; diff --git a/src/components/Sidebar/Sidebar.tsx b/src/components/Sidebar/Sidebar.tsx deleted file mode 100644 index 3fefa3b04..000000000 --- a/src/components/Sidebar/Sidebar.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import { useFlags } from "@dashboard/hooks/useFlags"; -import React from "react"; - -import { LegacySidebar } from "./legacy"; -import { NewSidebar } from "./NewSidebar"; - -export const Sidebar = () => { - const { enableNewSidebar } = useFlags(["enableNewSidebar"]); - - return enableNewSidebar.enabled ? : ; -}; diff --git a/src/components/Sidebar/index.ts b/src/components/Sidebar/index.ts deleted file mode 100644 index 626267acd..000000000 --- a/src/components/Sidebar/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from "./Drawer"; -export * from "./Sidebar"; diff --git a/src/components/Sidebar/legacy/LegacyDrawer.tsx b/src/components/Sidebar/legacy/LegacyDrawer.tsx deleted file mode 100644 index 7e51d8ce2..000000000 --- a/src/components/Sidebar/legacy/LegacyDrawer.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import { useUser } from "@dashboard/auth"; -import { useMediaQuery } from "@material-ui/core"; -import { SaleorTheme, SidebarDrawer } from "@saleor/macaw-ui"; -import React from "react"; -import { useIntl } from "react-intl"; - -import useMenuStructure from "./menuStructure"; -import { SidebarLink } from "./SidebarLink"; - -export const LegacyDrawer = () => { - const intl = useIntl(); - const { user } = useUser(); - const isMdUp = useMediaQuery((theme: SaleorTheme) => - theme.breakpoints.up("md"), - ); - - const [menuStructure, handleMenuItemClick] = useMenuStructure(intl, user); - - return ( - !isMdUp && ( - - ) - ); -}; diff --git a/src/components/Sidebar/legacy/LegacySidebar.tsx b/src/components/Sidebar/legacy/LegacySidebar.tsx deleted file mode 100644 index 4c12293e8..000000000 --- a/src/components/Sidebar/legacy/LegacySidebar.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import { useUser } from "@dashboard/auth"; -import { useMediaQuery } from "@material-ui/core"; -import { SaleorTheme, Sidebar } from "@saleor/macaw-ui"; -import React from "react"; -import { useIntl } from "react-intl"; - -import useMenuStructure from "./menuStructure"; -import { SidebarLink } from "./SidebarLink"; -import { isMenuActive } from "./utils"; - -export const LegacySidebar = () => { - const intl = useIntl(); - const { user } = useUser(); - const isMdUp = useMediaQuery((theme: SaleorTheme) => - theme.breakpoints.up("md"), - ); - - const [menuStructure, handleMenuItemClick] = useMenuStructure(intl, user); - const activeMenu = menuStructure.find(menuItem => - isMenuActive(location.pathname, menuItem), - )?.id; - - return ( - isMdUp && ( - - ) - ); -}; diff --git a/src/components/Sidebar/legacy/index.ts b/src/components/Sidebar/legacy/index.ts deleted file mode 100644 index 0275230ea..000000000 --- a/src/components/Sidebar/legacy/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from "./LegacyDrawer"; -export * from "./LegacySidebar"; diff --git a/src/index.tsx b/src/index.tsx index fd4a7cdbc..38d87df0f 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,11 +1,8 @@ -import "@saleor/macaw-ui/next/style"; - import { ApolloProvider } from "@apollo/client"; import DemoBanner from "@dashboard/components/DemoBanner"; import { PermissionEnum } from "@dashboard/graphql"; import useAppState from "@dashboard/hooks/useAppState"; -import { ThemeProvider as LegacyThemeProvider } from "@saleor/macaw-ui"; -import { ThemeProvider } from "@saleor/macaw-ui/next"; +import { ThemeProvider } from "@saleor/macaw-ui"; import { SaleorProvider } from "@saleor/sdk"; import React from "react"; import { render } from "react-dom"; @@ -87,34 +84,32 @@ const App: React.FC = () => ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/storybook/webpack.config.js b/src/storybook/webpack.config.js index 0f9b49941..6fb79c470 100644 --- a/src/storybook/webpack.config.js +++ b/src/storybook/webpack.config.js @@ -27,12 +27,6 @@ module.exports = ({ config }) => { // to make it work with npm link config.resolve.alias = { react: path.resolve("./node_modules/react"), - "@saleor/macaw-ui/next": path.resolve( - "./node_modules/@saleor/macaw-ui/dist/macaw-ui.js", - ), - "@saleor/macaw-ui": path.resolve( - "./node_modules/@saleor/macaw-ui/legacy/dist/esm/index.js", - ), "react-dom": path.resolve("./node_modules/react-dom"), "@material-ui/core": path.resolve("./node_modules/@material-ui/core"), "@material-ui/icons": path.resolve("./node_modules/@material-ui/icons"),