djkato/saleor-dashboard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Use MacawUI (#1229)

Browse source 
* Replace withStyleswith useStyles (#1100)

* Replace withStyleswith useStyles

* Update messages

* Use rem as a spacing unit (#1101)

* Use rems as spacing units

* Fix visual bugs

* Update stories

* Use macaw-ui as theme provider (#1108)

* Use macaw ui as a theme provider

* Add react-dom to aliases

* Fix jest module resolution

* Update useTheme hook usage

* Fix test wrapper

* Use macaw from git repo

* Fix CI

* Update stories

* Fix aliasing

* Extract savebar to macaw ui (#1146)

* wip

* Use savebar from macaw

* Use confirm button from macaw

* Improve file structure

* Use sidebar context from macaw

* Update macaw

* Update macaw version

* Remove savebar from storybook

* Update stories

* Use alerts and notifications from macaw (#1166)

* Use alerts from macaw

* Add notifications from macaw

* Update stories

* Pin macaw version

* Encapsulate limit reached in one component

* Remove unused imports

* Use backlinks from macaw (#1183)

* Use backlink from macaw

* Update macaw version

* Use macaw sidebar (#1148)

* Use sidebar from macaw

* Use shipped logo

* Use lowercase

* Update stories

* Use user chip from macaw (#1191)

* Use user chip from macaw

* Use dedicated components for menu items

* Simplify code

* Bump version and fix types (#1210)

* Rename onBack to onClick

* Rename UserChip to UserChipMenu

* Rename IMenuItem to SidebarMenuItem

* Update macaw version

* Fix tables after changes in macaw (#1220)

* Update macaw version

* Update changelog

* Update stories

* Fix after rebase

* Update to macaw 0.2.0

* Lint files

* Update macaw to 0.2.2
This commit is contained in:
Dominik Żegleń 2021-07-21 10:59:52 +02:00 committed by GitHub
parent 0ec88cdb1e
commit 62817568a7
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
420 changed files with 3049 additions and 11455 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
CHANGELOG.md
View file

@ -67,6 +67,7 @@ All notable, unreleased changes to this project will be documented in this file.
- Fix content type validation in create page view - #1205 by @orzechdev
- Fix list pagination crash on search - #1230 by @orzechdev
- Fix positive float number input validation - #1233 by @orzechdev
- Use MacawUI - #1229 by @dominik-zeglen
# 2.11.1

4
locale/defaultMessages.json
View file

@ -2130,10 +2130,6 @@
"context": "button",
"string": "{languageName} - {languageCode}"
},
"src_dot_components_dot_ListField_dot_3099331554": {
"context": "button",
"string": "Add"
},
"src_dot_components_dot_Metadata_dot_1148029984": {
"context": "metadata field value, header",
"string": "Value"

175
package-lock.json generated
View file

@ -2646,14 +2646,14 @@
}
},
"@material-ui/core": {
"version": "4.11.3",
"resolved": "https://registry.npmjs.org/@material-ui/core/-/core-4.11.3.tgz",
"integrity": "sha512-Adt40rGW6Uds+cAyk3pVgcErpzU/qxc7KBR94jFHBYretU4AtWZltYcNsbeMn9tXL86jjVL1kuGcIHsgLgFGRw==",
"version": "4.11.4",
"resolved": "https://registry.npmjs.org/@material-ui/core/-/core-4.11.4.tgz",
"integrity": "sha512-oqb+lJ2Dl9HXI9orc6/aN8ZIAMkeThufA5iZELf2LQeBn2NtjVilF5D2w7e9RpntAzDb4jK5DsVhkfOvFY/8fg==",
"requires": {
"@babel/runtime": "^7.4.4",
"@material-ui/styles": "^4.11.3",
"@material-ui/styles": "^4.11.4",
"@material-ui/system": "^4.11.3",
"@material-ui/types": "^5.1.0",
"@material-ui/types": "5.1.0",
"@material-ui/utils": "^4.11.2",
"@types/react-transition-group": "^4.2.0",
"clsx": "^1.0.4",
@ -2672,14 +2672,26 @@
"@babel/runtime": "^7.4.4"
}
},
"@material-ui/lab": {
"version": "4.0.0-alpha.58",
"resolved": "https://registry.npmjs.org/@material-ui/lab/-/lab-4.0.0-alpha.58.tgz",
"integrity": "sha512-GKHlJqLxUeHH3L3dGQ48ZavYrqGOTXkFkiEiuYMAnAvXAZP4rhMIqeHOPXSUQan4Bd8QnafDcpovOSLnadDmKw==",
"requires": {
"@babel/runtime": "^7.4.4",
"@material-ui/utils": "^4.11.2",
"clsx": "^1.0.4",
"prop-types": "^15.7.2",
"react-is": "^16.8.0 || ^17.0.0"
}
},
"@material-ui/styles": {
"version": "4.11.3",
"resolved": "https://registry.npmjs.org/@material-ui/styles/-/styles-4.11.3.tgz",
"integrity": "sha512-HzVzCG+PpgUGMUYEJ2rTEmQYeonGh41BYfILNFb/1ueqma+p1meSdu4RX6NjxYBMhf7k+jgfHFTTz+L1SXL/Zg==",
"version": "4.11.4",
"resolved": "https://registry.npmjs.org/@material-ui/styles/-/styles-4.11.4.tgz",
"integrity": "sha512-KNTIZcnj/zprG5LW0Sao7zw+yG3O35pviHzejMdcSGCdWbiO8qzRgOYL8JAxAsWBKOKYwVZxXtHWaB5T2Kvxew==",
"requires": {
"@babel/runtime": "^7.4.4",
"@emotion/hash": "^0.8.0",
"@material-ui/types": "^5.1.0",
"@material-ui/types": "5.1.0",
"@material-ui/utils": "^4.11.2",
"clsx": "^1.0.4",
"csstype": "^2.5.2",
@ -2708,9 +2720,9 @@
},
"dependencies": {
"csstype": {
"version": "3.0.7",
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.7.tgz",
"integrity": "sha512-KxnUB0ZMlnUWCsx2Z8MUsr6qV6ja1w9ArPErJaJaF8a5SOWoHLIszeCTKGRGRgtLgYrs1E8CHkNSP1VZTTPc9g=="
"version": "3.0.8",
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.8.tgz",
"integrity": "sha512-jXKhWqXPmlUeoQnF/EhTtTl4C9SnrxSH/jZUih3jmO6lBKr99rP3/+FmrMj4EFpOXzMtXHAZkd3x0E6h6Fgflw=="
}
}
}
@ -4170,37 +4182,23 @@
}
},
"@saleor/macaw-ui": {
"version": "0.1.1-9",
"resolved": "https://registry.npmjs.org/@saleor/macaw-ui/-/macaw-ui-0.1.1-9.tgz",
"integrity": "sha512-ryftb0jBs1ghIm4ILwJZ7vfQt90Kab9XlNcEUh4JFDV4+HEABrGpwstLKyCtIjFDzxQf/z9L4vbW25o1m6klmg==",
"version": "0.2.2",
"resolved": "https://registry.npmjs.org/@saleor/macaw-ui/-/macaw-ui-0.2.2.tgz",
"integrity": "sha512-/YWChXpALyqZSedjvBchR0vQSHCMFOVlejEdHYBkBbF0hJz2M/Xva+56AdFXnPjmM1J1q2hv7QZxGoNNy9md5g==",
"requires": {
"@types/react-inlinesvg": "^0.8.1",
"classnames": "^2.2.6",
"downshift": "^1.31.16",
"lodash-es": "^4.17.15",
"react-helmet": "^5.2.1",
"react-inlinesvg": "^1.1.2",
"string-similarity": "^1.2.2"
"clsx": "^1.1.1",
"lodash": "^4.17.21",
"lodash-es": "^4.17.21",
"react-inlinesvg": "^2.3.0"
},
"dependencies": {
"react-helmet": {
"version": "5.2.1",
"resolved": "https://registry.npmjs.org/react-helmet/-/react-helmet-5.2.1.tgz",
"integrity": "sha512-CnwD822LU8NDBnjCpZ4ySh8L6HYyngViTZLfBBb3NjtrpN8m49clH8hidHouq20I51Y6TpCTISCBbqiY5GamwA==",
"requires": {
"object-assign": "^4.1.1",
"prop-types": "^15.5.4",
"react-fast-compare": "^2.0.2",
"react-side-effect": "^1.1.0"
}
},
"react-inlinesvg": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/react-inlinesvg/-/react-inlinesvg-1.2.0.tgz",
"integrity": "sha512-IsznU+UzpUwDGzBWbf0bfSRA5Jbqz87xeoqLM/nSIDPkoHksInF1wCGybTSn4sIui+30TqboRQP1wAelNTkdog==",
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/react-inlinesvg/-/react-inlinesvg-2.3.0.tgz",
"integrity": "sha512-fEGOdDf4k4bcveArbEpj01pJcH8pOCKLxmSj2POFdGvEk5YK0NZVnH6BXpW/PzACHPRsuh1YKAhNZyFnD28oxg==",
"requires": {
"exenv": "^1.2.2",
"react-from-dom": "^0.3.0"
"react-from-dom": "^0.6.0"
}
}
}
@ -5511,7 +5509,6 @@
"version": "16.14.5",
"resolved": "https://registry.npmjs.org/@types/react/-/react-16.14.5.tgz",
"integrity": "sha512-YRRv9DNZhaVTVRh9Wmmit7Y0UFhEVqXqCSw3uazRWMxa2x85hWQZ5BN24i7GXZbaclaLXEcodEeIHsjBA8eAMw==",
"dev": true,
"requires": {
"@types/prop-types": "*",
"@types/scheduler": "*",
@ -5521,8 +5518,7 @@
"csstype": {
"version": "3.0.7",
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.7.tgz",
"integrity": "sha512-KxnUB0ZMlnUWCsx2Z8MUsr6qV6ja1w9ArPErJaJaF8a5SOWoHLIszeCTKGRGRgtLgYrs1E8CHkNSP1VZTTPc9g==",
"dev": true
"integrity": "sha512-KxnUB0ZMlnUWCsx2Z8MUsr6qV6ja1w9ArPErJaJaF8a5SOWoHLIszeCTKGRGRgtLgYrs1E8CHkNSP1VZTTPc9g=="
}
}
},
@ -5562,31 +5558,6 @@
"@types/react": "*"
}
},
"@types/react-inlinesvg": {
"version": "0.8.1",
"resolved": "https://registry.npmjs.org/@types/react-inlinesvg/-/react-inlinesvg-0.8.1.tgz",
"integrity": "sha512-pONmeCNqot4diXLhxb+jajDWX57rH/JmMu9H4NQWNMl5WUHAHmcrOfDfB05IgYBfRUX1Cvyjl9EZzKHxSxZpAA==",
"requires": {
"@types/react": "*"
},
"dependencies": {
"@types/react": {
"version": "17.0.3",
"resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.3.tgz",
"integrity": "sha512-wYOUxIgs2HZZ0ACNiIayItyluADNbONl7kt8lkLjVK8IitMH5QMyAh75Fwhmo37r1m7L2JaFj03sIfxBVDvRAg==",
"requires": {
"@types/prop-types": "*",
"@types/scheduler": "*",
"csstype": "^3.0.2"
}
},
"csstype": {
"version": "3.0.7",
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.7.tgz",
"integrity": "sha512-KxnUB0ZMlnUWCsx2Z8MUsr6qV6ja1w9ArPErJaJaF8a5SOWoHLIszeCTKGRGRgtLgYrs1E8CHkNSP1VZTTPc9g=="
}
}
},
"@types/react-router": {
"version": "5.1.13",
"resolved": "https://registry.npmjs.org/@types/react-router/-/react-router-5.1.13.tgz",
@ -5689,23 +5660,6 @@
"integrity": "sha512-vIo69qKKcYoJ8wKCJjwSgCTM+z3chw3g18dkrDfVX665tMH7tmbDxEAnPdey4gTlwZz5QuHGzd+hul0OVZDqqQ==",
"requires": {
"@types/react": "*"
},
"dependencies": {
"@types/react": {
"version": "17.0.3",
"resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.3.tgz",
"integrity": "sha512-wYOUxIgs2HZZ0ACNiIayItyluADNbONl7kt8lkLjVK8IitMH5QMyAh75Fwhmo37r1m7L2JaFj03sIfxBVDvRAg==",
"requires": {
"@types/prop-types": "*",
"@types/scheduler": "*",
"csstype": "^3.0.2"
}
},
"csstype": {
"version": "3.0.7",
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.7.tgz",
"integrity": "sha512-KxnUB0ZMlnUWCsx2Z8MUsr6qV6ja1w9ArPErJaJaF8a5SOWoHLIszeCTKGRGRgtLgYrs1E8CHkNSP1VZTTPc9g=="
}
}
},
"@types/react-virtualized": {
@ -19028,20 +18982,11 @@
"integrity": "sha1-yQRGkMIeBClL6qUXcS/e0fqI3pg=",
"dev": true
},
"lodash.every": {
"version": "4.6.0",
"resolved": "https://registry.npmjs.org/lodash.every/-/lodash.every-4.6.0.tgz",
"integrity": "sha1-64mYS+vENkJ5uzrvu9HKGb+mxqc="
},
"lodash.flattendeep": {
"version": "4.4.0",
"resolved": "https://registry.npmjs.org/lodash.flattendeep/-/lodash.flattendeep-4.4.0.tgz",
"integrity": "sha1-+wMJF/hqMTTlvJvsDWngAT3f7bI="
},
"lodash.foreach": {
"version": "4.5.0",
"resolved": "https://registry.npmjs.org/lodash.foreach/-/lodash.foreach-4.5.0.tgz",
"integrity": "sha1-Gmo16s5AEoDH8G3d7DUWWrJ+PlM="
"integrity": "sha1-+wMJF/hqMTTlvJvsDWngAT3f7bI=",
"dev": true
},
"lodash.get": {
"version": "4.4.2",
@ -19058,16 +19003,6 @@
"resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz",
"integrity": "sha1-QVxEePK8wwEgwizhDtMib30+GOA="
},
"lodash.map": {
"version": "4.6.0",
"resolved": "https://registry.npmjs.org/lodash.map/-/lodash.map-4.6.0.tgz",
"integrity": "sha1-dx7Hg540c9nEzeKLGTlMNWL09tM="
},
"lodash.maxby": {
"version": "4.6.0",
"resolved": "https://registry.npmjs.org/lodash.maxby/-/lodash.maxby-4.6.0.tgz",
"integrity": "sha1-CCJABo88eiJ6oAqDgOTzjPB4bj0="
},
"lodash.memoize": {
"version": "4.1.2",
"resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
@ -22574,11 +22509,6 @@
"integrity": "sha512-nQTTcUu+ATDbrSD1BZHr5kgSD4oF8OFjxun8uAaL8RwPBacGBNPf/yAuVVdx17N8XNzRDMrZ9XcKZHCjPW+9ew==",
"dev": true
},
"react-fast-compare": {
"version": "2.0.4",
"resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz",
"integrity": "sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw=="
},
"react-focus-lock": {
"version": "2.5.0",
"resolved": "https://registry.npmjs.org/react-focus-lock/-/react-focus-lock-2.5.0.tgz",
@ -22594,9 +22524,9 @@
}
},
"react-from-dom": {
"version": "0.3.1",
"resolved": "https://registry.npmjs.org/react-from-dom/-/react-from-dom-0.3.1.tgz",
"integrity": "sha512-PeNBa8iuzoD7qHA9O7YpGnXFvC+XFFwStmFh2/r2zJAvEIaRg6EwOj+EPcDIFwyYBhqPIItxIx/dGdeWiFivjQ=="
"version": "0.6.1",
"resolved": "https://registry.npmjs.org/react-from-dom/-/react-from-dom-0.6.1.tgz",
"integrity": "sha512-7aAZx7LhRnmR51W5XtmTBYHGFl2n1AdEk1uoXLuzHa1OoGXrxOW/iwLcudvgp6BGX/l4Yh1rtMrIzvhlvbVddg=="
},
"react-gtm-module": {
"version": "2.0.11",
@ -22880,14 +22810,6 @@
"tiny-warning": "^1.0.0"
}
},
"react-side-effect": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/react-side-effect/-/react-side-effect-1.2.0.tgz",
"integrity": "sha512-v1ht1aHg5k/thv56DRcjw+WtojuuDHFUgGfc+bFHOWsF4ZK6C2V57DO0Or0GPsg6+LSTE0M6Ry/gfzhzSwbc5w==",
"requires": {
"shallowequal": "^1.0.1"
}
},
"react-sizeme": {
"version": "2.6.12",
"resolved": "https://registry.npmjs.org/react-sizeme/-/react-sizeme-2.6.12.tgz",
@ -25057,7 +24979,8 @@
"shallowequal": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
"integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ=="
"integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==",
"dev": true
},
"shebang-command": {
"version": "1.2.0",
@ -25849,18 +25772,6 @@
}
}
},
"string-similarity": {
"version": "1.2.2",
"resolved": "https://registry.npmjs.org/string-similarity/-/string-similarity-1.2.2.tgz",
"integrity": "sha512-IoHUjcw3Srl8nsPlW04U3qwWPk3oG2ffLM0tN853d/E/JlIvcmZmDY2Kz5HzKp4lEi2T7QD7Zuvjq/1rDw+XcQ==",
"requires": {
"lodash.every": "^4.6.0",
"lodash.flattendeep": "^4.4.0",
"lodash.foreach": "^4.5.0",
"lodash.map": "^4.6.0",
"lodash.maxby": "^4.6.0"
}
},
"string-width": {
"version": "4.2.2",
"resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.2.tgz",

15
package.json
View file

@ -23,10 +23,11 @@
"@editorjs/list": "^1.6.1",
"@editorjs/paragraph": "^2.8.0",
"@editorjs/quote": "^2.4.0",
"@material-ui/core": "^4.11.3",
"@material-ui/core": "^4.11.4",
"@material-ui/icons": "^4.11.2",
"@material-ui/styles": "^4.11.3",
"@saleor/macaw-ui": "^0.1.1-9",
"@material-ui/lab": "^4.0.0-alpha.58",
"@material-ui/styles": "^4.11.4",
"@saleor/macaw-ui": "^0.2.2",
"@sentry/react": "^6.0.0",
"@types/faker": "^5.1.6",
"apollo": "^2.32.5",
@ -207,7 +208,13 @@
"@assets(.*)$": "<rootDir>/assets/$1",
"@locale(.*)$": "<rootDir>/locale/$1",
"@saleor(?!.*macaw)(.*)$": "<rootDir>/src/$1",
"@test/(.*)$": "<rootDir>/testUtils/$1"
"@test/(.*)$": "<rootDir>/testUtils/$1",
"^lodash-es(.*)$": "lodash/$1",
"^@material-ui/core$": "<rootDir>/node_modules/@material-ui/core",
"^@material-ui/icons$": "<rootDir>/node_modules/@material-ui/icons",
"^@material-ui/styles$": "<rootDir>/node_modules/@material-ui/styles",
"^react$": "<rootDir>/node_modules/react",
"^react-dom$": "<rootDir>/node_modules/react-dom"
}
},
"husky": {

23
src/Baseline.tsx
View file

@ -1,23 +0,0 @@
import { CssBaseline } from "@material-ui/core";
import { fade } from "@material-ui/core/styles/colorManipulator";
import { createStyles, SaleorTheme, withStyles } from "@saleor/theme";
import React from "react";
const styles = createStyles((theme: SaleorTheme) => ({
"@global": {
"@import": "url('https://rsms.me/inter/inter.css')",
// For some reason @import clause must be put on top
// eslint-disable-next-line sort-keys
"::selection": {
background: fade(theme.palette.primary.main, 0.2)
}
}
}));
const Baseline = withStyles(styles, {
name: "Baseline"
})(() => <CssBaseline />);
Baseline.displayName = "Baseline";
export default Baseline;

6
src/apps/components/AppDetailsPage/AppDetailsPage.tsx
View file

@ -1,5 +1,4 @@
import { Button, Card, CardContent, Typography } from "@material-ui/core";
import AppHeader from "@saleor/components/AppHeader";
import CardSpacer from "@saleor/components/CardSpacer";
import CardTitle from "@saleor/components/CardTitle";
import Container from "@saleor/components/Container";
@ -7,6 +6,7 @@ import ExternalLink from "@saleor/components/ExternalLink";
import PageHeader from "@saleor/components/PageHeader";
import Skeleton from "@saleor/components/Skeleton";
import { sectionNames } from "@saleor/intl";
import { Backlink } from "@saleor/macaw-ui";
import React from "react";
import { FormattedMessage, useIntl } from "react-intl";
import ReactMarkdown from "react-markdown";
@ -40,9 +40,9 @@ export const AppDetailsPage: React.FC<AppDetailsPageProps> = ({
return (
<Container>
<AppHeader onBack={onBack}>
<Backlink onClick={onBack}>
{intl.formatMessage(sectionNames.apps)}
</AppHeader>
</Backlink>
<PageHeader
title={
<>

8
src/apps/components/AppDetailsSettingsPage/AppDetailsSettingsPage.tsx
View file

@ -1,11 +1,11 @@
import { Button, Typography } from "@material-ui/core";
import AppHeader from "@saleor/components/AppHeader";
import CardSpacer from "@saleor/components/CardSpacer";
import Container from "@saleor/components/Container";
import Grid from "@saleor/components/Grid";
import Hr from "@saleor/components/Hr";
import useTheme from "@saleor/hooks/useTheme";
import { sectionNames } from "@saleor/intl";
import { Backlink } from "@saleor/macaw-ui";
import { useTheme } from "@saleor/macaw-ui";
import classNames from "classnames";
import React from "react";
import { FormattedMessage, useIntl } from "react-intl";
@ -41,9 +41,9 @@ export const AppDetailsSettingsPage: React.FC<AppDetailsSettingsPageProps> = ({
return (
<Container>
<AppHeader onBack={onBack}>
<Backlink onClick={onBack}>
{intl.formatMessage(sectionNames.apps)}
</AppHeader>
</Backlink>
<Grid variant="uniform">
<div className={classes.breadcrumbContainer}>
<div className={classes.breadcrumbs}>

4
src/apps/components/AppDetailsSettingsPage/styles.ts
View file

@ -1,4 +1,4 @@
import { makeStyles } from "@saleor/theme";
import { makeStyles } from "@saleor/macaw-ui";
export const useStyles = makeStyles(
theme => ({
@ -18,7 +18,7 @@ export const useStyles = makeStyles(
content: "'/'",
display: "block",
position: "absolute",
right: -theme.spacing(2),
right: theme.spacing(-2),
top: 0
},
"&:not(:first-child):hover": {

2
src/apps/components/AppDetailsSettingsPage/useSettingsBreadcrumbs.ts
View file

@ -6,7 +6,7 @@ import {
ExtensionMessageType,
sendMessageToExtension,
useExtensionMessage
} from "@saleor/macaw-ui/extensions";
} from "@saleor/macaw-ui";
import { useState } from "react";
type UseSettingsBreadcrumbs = [Breadcrumb[], (value: string) => void];

2
src/apps/components/AppInstallErrorPage/styles.ts
View file

@ -1,4 +1,4 @@
import { makeStyles } from "@saleor/theme";
import { makeStyles } from "@saleor/macaw-ui";
export const useStyles = makeStyles(
theme => ({

12
src/apps/components/CustomAppCreatePage/CustomAppCreatePage.tsx
View file

@ -1,14 +1,14 @@
import AccountPermissions from "@saleor/components/AccountPermissions";
import AppHeader from "@saleor/components/AppHeader";
import { ConfirmButtonTransitionState } from "@saleor/components/ConfirmButton";
import Container from "@saleor/components/Container";
import Form from "@saleor/components/Form";
import Grid from "@saleor/components/Grid";
import PageHeader from "@saleor/components/PageHeader";
import SaveButtonBar from "@saleor/components/SaveButtonBar";
import Savebar from "@saleor/components/Savebar";
import { ShopInfo_shop_permissions } from "@saleor/components/Shop/types/ShopInfo";
import { AppErrorFragment } from "@saleor/fragments/types/AppErrorFragment";
import { sectionNames } from "@saleor/intl";
import { Backlink } from "@saleor/macaw-ui";
import { PermissionEnum } from "@saleor/types/globalTypes";
import { getFormErrors } from "@saleor/utils/errors";
import getAppErrorMessage from "@saleor/utils/errors/app";
@ -55,9 +55,9 @@ const CustomAppCreatePage: React.FC<CustomAppCreatePageProps> = props => {
<Form initial={initialForm} onSubmit={onSubmit} confirmLeave>
{({ data, change, hasChanged, submit }) => (
<Container>
<AppHeader onBack={onBack}>
<Backlink onClick={onBack}>
{intl.formatMessage(sectionNames.apps)}
</AppHeader>
</Backlink>
<PageHeader
title={intl.formatMessage({
defaultMessage: "Create New App",
@ -91,11 +91,11 @@ const CustomAppCreatePage: React.FC<CustomAppCreatePageProps> = props => {
})}
/>
</Grid>
<SaveButtonBar
<Savebar
disabled={disabled || !hasChanged}
state={saveButtonBarState}
onCancel={onBack}
onSave={submit}
onSubmit={submit}
/>
</Container>
)}

6
src/apps/components/CustomAppDefaultToken/styles.ts
View file

@ -1,5 +1,5 @@
import { fade } from "@material-ui/core/styles/colorManipulator";
import { makeStyles } from "@saleor/theme";
import { makeStyles } from "@saleor/macaw-ui";
export const useStyles = makeStyles(
theme => ({
@ -10,8 +10,8 @@ export const useStyles = makeStyles(
display: "flex",
justifyContent: "flex-end",
position: "relative",
right: -theme.spacing(),
top: -theme.spacing(1)
right: theme.spacing(-1),
top: theme.spacing(-1)
},
content: {
display: "grid",

12
src/apps/components/CustomAppDetailsPage/CustomAppDetailsPage.tsx
View file

@ -1,17 +1,17 @@
import { Button } from "@material-ui/core";
import AccountPermissions from "@saleor/components/AccountPermissions";
import AppHeader from "@saleor/components/AppHeader";
import CardSpacer from "@saleor/components/CardSpacer";
import { ConfirmButtonTransitionState } from "@saleor/components/ConfirmButton";
import Container from "@saleor/components/Container";
import Form from "@saleor/components/Form";
import Grid from "@saleor/components/Grid";
import PageHeader from "@saleor/components/PageHeader";
import SaveButtonBar from "@saleor/components/SaveButtonBar";
import Savebar from "@saleor/components/Savebar";
import { ShopInfo_shop_permissions } from "@saleor/components/Shop/types/ShopInfo";
import { AppErrorFragment } from "@saleor/fragments/types/AppErrorFragment";
import { SubmitPromise } from "@saleor/hooks/useForm";
import { sectionNames } from "@saleor/intl";
import { Backlink } from "@saleor/macaw-ui";
import { PermissionEnum } from "@saleor/types/globalTypes";
import { getFormErrors } from "@saleor/utils/errors";
import getAppErrorMessage from "@saleor/utils/errors/app";
@ -98,9 +98,9 @@ const CustomAppDetailsPage: React.FC<CustomAppDetailsPageProps> = props => {
<Form initial={initialForm} onSubmit={onSubmit} confirmLeave>
{({ data, change, hasChanged, submit }) => (
<Container>
<AppHeader onBack={onBack}>
<Backlink onClick={onBack}>
{intl.formatMessage(sectionNames.apps)}
</AppHeader>
</Backlink>
<PageHeader title={app?.name}>
<Button
variant="text"
@ -176,11 +176,11 @@ const CustomAppDetailsPage: React.FC<CustomAppDetailsPageProps> = props => {
/>
</div>
</Grid>
<SaveButtonBar
<Savebar
disabled={disabled || !hasChanged}
state={saveButtonBarState}
onCancel={onBack}
onSave={submit}
onSubmit={submit}
/>
</Container>
)}

2
src/apps/components/CustomAppTokens/styles.ts
View file

@ -1,4 +1,4 @@
import { makeStyles } from "@saleor/theme";
import { makeStyles } from "@saleor/macaw-ui";
export const useStyles = makeStyles(
theme => ({

2
src/apps/components/DeactivatedText/styles.ts
View file

@ -1,4 +1,4 @@
import { makeStyles } from "@saleor/theme";
import { makeStyles } from "@saleor/macaw-ui";
export const useStyles = makeStyles(
theme => ({

2
src/apps/components/HorizontalSpacer/HorizontalSpacer.tsx
View file

@ -1,4 +1,4 @@
import { makeStyles } from "@saleor/theme";
import { makeStyles } from "@saleor/macaw-ui";
import React from "react";
export interface HorizontalSpacerProps {

2
src/apps/components/TokenCreateDialog/styles.ts
View file

@ -1,5 +1,5 @@
import { fade } from "@material-ui/core/styles/colorManipulator";
import { makeStyles } from "@saleor/theme";
import { makeStyles } from "@saleor/macaw-ui";
export const useStyles = makeStyles(
theme => ({

2
src/apps/styles.ts
View file

@ -1,4 +1,4 @@
import { makeStyles } from "@saleor/theme";
import { makeStyles } from "@saleor/macaw-ui";
export const useStyles = makeStyles(
theme => ({

6
src/attributes/components/AttributeDetails/AttributeDetails.tsx
View file

@ -7,7 +7,7 @@ import SingleSelectField from "@saleor/components/SingleSelectField";
import { AttributeErrorFragment } from "@saleor/fragments/types/AttributeErrorFragment";
import { UseFormResult } from "@saleor/hooks/useForm";
import { commonMessages } from "@saleor/intl";
import { makeStyles } from "@saleor/theme";
import { makeStyles } from "@saleor/macaw-ui";
import {
AttributeEntityTypeEnum,
AttributeInputTypeEnum
@ -36,11 +36,11 @@ const entityTypeMessages = defineMessages({
const useStyles = makeStyles(
theme => ({
inputTypeSection: {
columnGap: theme.spacing(2) + "px",
columnGap: theme.spacing(2),
display: "flex",
[theme.breakpoints.down("md")]: {
flexFlow: "wrap",
rowGap: theme.spacing(3) + "px"
rowGap: theme.spacing(3)
}
}
}),

2
src/attributes/components/AttributeDetails/NumericUnits.tsx
View file

@ -3,7 +3,7 @@ import ControlledCheckbox from "@saleor/components/ControlledCheckbox";
import SingleSelectField from "@saleor/components/SingleSelectField";
import { UseFormResult } from "@saleor/hooks/useForm";
import { commonMessages } from "@saleor/intl";
import { makeStyles } from "@saleor/theme";
import { makeStyles } from "@saleor/macaw-ui";
import { MeasurementUnitsEnum } from "@saleor/types/globalTypes";
import React, { useEffect, useMemo, useState } from "react";
import { useIntl } from "react-intl";

2
src/attributes/components/AttributeList/AttributeList.tsx
View file

@ -7,8 +7,8 @@ import TableCellHeader from "@saleor/components/TableCellHeader";
import TableHead from "@saleor/components/TableHead";
import TablePagination from "@saleor/components/TablePagination";
import { translateBoolean } from "@saleor/intl";
import { makeStyles } from "@saleor/macaw-ui";
import { maybe, renderCollection } from "@saleor/misc";
import { makeStyles } from "@saleor/theme";
import { ListActions, ListProps, SortPage } from "@saleor/types";
import { getArrowDirection } from "@saleor/utils/sort";
import React from "react";

6
src/attributes/components/AttributeListPage/AttributeListPage.tsx
View file

@ -1,8 +1,8 @@
import { Button, Card } from "@material-ui/core";
import { AttributeListUrlSortField } from "@saleor/attributes/urls";
import AppHeader from "@saleor/components/AppHeader";
import FilterBar from "@saleor/components/FilterBar";
import { sectionNames } from "@saleor/intl";
import { Backlink } from "@saleor/macaw-ui";
import React from "react";
import { FormattedMessage, useIntl } from "react-intl";
@ -54,9 +54,9 @@ const AttributeListPage: React.FC<AttributeListPageProps> = ({
return (
<Container>
<AppHeader onBack={onBack}>
<Backlink onClick={onBack}>
<FormattedMessage {...sectionNames.configuration} />
</AppHeader>
</Backlink>
<PageHeader title={intl.formatMessage(sectionNames.attributes)}>
<Button
onClick={onAdd}

4
src/attributes/components/AttributeOrganization/AttributeOrganization.tsx
View file

@ -1,7 +1,7 @@
import { Card, CardContent, Typography } from "@material-ui/core";
import CardTitle from "@saleor/components/CardTitle";
import RadioGroupField from "@saleor/components/RadioGroupField";
import { makeStyles } from "@saleor/theme";
import { makeStyles } from "@saleor/macaw-ui";
import { AttributeTypeEnum } from "@saleor/types/globalTypes";
import React from "react";
import { defineMessages, FormattedMessage, useIntl } from "react-intl";
@ -32,7 +32,7 @@ const useStyles = makeStyles(
overflow: "visible"
},
cardSubtitle: {
fontSize: "1rem",
fontSize: theme.typography.body1.fontSize,
marginBottom: theme.spacing(0.5)
},
label: {

12
src/attributes/components/AttributePage/AttributePage.tsx
View file

@ -1,6 +1,5 @@
import { AttributeDetails_attribute_choices } from "@saleor/attributes/types/AttributeDetails";
import { ATTRIBUTE_TYPES_WITH_DEDICATED_VALUES } from "@saleor/attributes/utils/data";
import AppHeader from "@saleor/components/AppHeader";
import CardSpacer from "@saleor/components/CardSpacer";
import { ConfirmButtonTransitionState } from "@saleor/components/ConfirmButton";
import Container from "@saleor/components/Container";
@ -9,11 +8,12 @@ import Grid from "@saleor/components/Grid";
import Metadata from "@saleor/components/Metadata/Metadata";
import { MetadataFormData } from "@saleor/components/Metadata/types";
import PageHeader from "@saleor/components/PageHeader";
import SaveButtonBar from "@saleor/components/SaveButtonBar";
import Savebar from "@saleor/components/Savebar";
import { ListSettingsUpdate } from "@saleor/components/TablePagination";
import { AttributeDetailsFragment } from "@saleor/fragments/types/AttributeDetailsFragment";
import { AttributeErrorFragment } from "@saleor/fragments/types/AttributeErrorFragment";
import { sectionNames } from "@saleor/intl";
import { Backlink } from "@saleor/macaw-ui";
import { maybe } from "@saleor/misc";
import { ListSettings, ReorderAction } from "@saleor/types";
import {
@ -169,9 +169,9 @@ const AttributePage: React.FC<AttributePageProps> = ({
return (
<Container>
<AppHeader onBack={onBack}>
<Backlink onClick={onBack}>
{intl.formatMessage(sectionNames.attributes)}
</AppHeader>
</Backlink>
<PageHeader
title={
attribute === null
@ -234,11 +234,11 @@ const AttributePage: React.FC<AttributePageProps> = ({
/>
</div>
</Grid>
<SaveButtonBar
<Savebar
disabled={disabled || !hasChanged}
state={saveButtonBarState}
onCancel={onBack}
onSave={submit}
onSubmit={submit}
onDelete={attribute === null ? undefined : onDelete}
/>
</Container>

4
src/attributes/components/AttributeValues/AttributeValues.tsx
View file

@ -17,8 +17,8 @@ import {
} from "@saleor/components/SortableTable";
import TablePagination from "@saleor/components/TablePagination";
import { AttributeValueListFragment_edges_node } from "@saleor/fragments/types/AttributeValueListFragment";
import { makeStyles } from "@saleor/macaw-ui";
import { maybe, renderCollection, stopPropagation } from "@saleor/misc";
import { makeStyles } from "@saleor/theme";
import { ListProps, ReorderAction } from "@saleor/types";
import React from "react";
import { FormattedMessage, useIntl } from "react-intl";
@ -39,7 +39,7 @@ const useStyles = makeStyles(
width: 300
},
columnDrag: {
width: 48 + theme.spacing(1.5)
width: theme.spacing(6 + 1.5)
},
columnStore: {
width: "auto"

8
src/auth/components/Layout.tsx
View file

@ -1,8 +1,8 @@
import backgroundArt from "@assets/images/login-background.svg";
import saleorDarkLogo from "@assets/images/logo-dark.svg";
import saleorLightLogo from "@assets/images/logo-light.svg";
import useTheme from "@saleor/hooks/useTheme";
import { makeStyles } from "@saleor/theme";
import { useTheme } from "@saleor/macaw-ui";
import { makeStyles } from "@saleor/macaw-ui";
import React from "react";
import SVG from "react-inlinesvg";
@ -72,7 +72,7 @@ const Layout: React.FC = props => {
const { children } = props;
const classes = useStyles(props);
const { isDark } = useTheme();
const { themeType } = useTheme();
return (
<div className={classes.root}>
@ -83,7 +83,7 @@ const Layout: React.FC = props => {
<div className={classes.mainPanelContent}>
<SVG
className={classes.logo}
src={isDark ? saleorDarkLogo : saleorLightLogo}
src={themeType === "dark" ? saleorDarkLogo : saleorLightLogo}
/>
{children}
</div>

2
src/auth/components/LoginLoading/LoginLoading.tsx
View file

@ -1,5 +1,5 @@
import { CircularProgress } from "@material-ui/core";
import { makeStyles } from "@saleor/theme";
import { makeStyles } from "@saleor/macaw-ui";
import React from "react";
const useStyles = makeStyles(

2
src/auth/components/LoginPage/LoginPage.tsx
View file

@ -9,7 +9,7 @@ import { AvailableExternalAuthentications_shop_availableExternalAuthentications
import { FormSpacer } from "@saleor/components/FormSpacer";
import { SubmitPromise } from "@saleor/hooks/useForm";
import { commonMessages } from "@saleor/intl";
import { makeStyles } from "@saleor/theme";
import { makeStyles } from "@saleor/macaw-ui";
import React from "react";
import { FormattedMessage, useIntl } from "react-intl";

2
src/auth/components/NewPasswordPage/NewPasswordPage.tsx
View file

@ -2,7 +2,7 @@ import { Button, TextField, Typography } from "@material-ui/core";
import { SetPassword_setPassword_errors } from "@saleor/auth/types/SetPassword";
import Form from "@saleor/components/Form";
import FormSpacer from "@saleor/components/FormSpacer";
import { makeStyles } from "@saleor/theme";
import { makeStyles } from "@saleor/macaw-ui";
import getAccountErrorMessage from "@saleor/utils/errors/account";
import React from "react";
import { FormattedMessage, useIntl } from "react-intl";

2
src/auth/components/ResetPasswordPage/ResetPasswordPage.tsx
View file

@ -2,7 +2,7 @@ import { Button, TextField, Typography } from "@material-ui/core";
import Form from "@saleor/components/Form";
import FormSpacer from "@saleor/components/FormSpacer";
import { commonMessages } from "@saleor/intl";
import { makeStyles } from "@saleor/theme";
import { makeStyles } from "@saleor/macaw-ui";
import React from "react";
import { FormattedMessage, useIntl } from "react-intl";

2
src/auth/components/ResetPasswordSuccessPage/ResetPasswordSuccessPage.tsx
View file

@ -1,6 +1,6 @@
import { Button, Typography } from "@material-ui/core";
import FormSpacer from "@saleor/components/FormSpacer";
import { makeStyles } from "@saleor/theme";
import { makeStyles } from "@saleor/macaw-ui";
import React from "react";
import { FormattedMessage } from "react-intl";

2
src/categories/components/CategoryBackground/CategoryBackground.tsx
View file

@ -5,7 +5,7 @@ import ImageUpload from "@saleor/components/ImageUpload";
import MediaTile from "@saleor/components/MediaTile";
import Skeleton from "@saleor/components/Skeleton";
import { commonMessages } from "@saleor/intl";
import { makeStyles } from "@saleor/theme";
import { makeStyles } from "@saleor/macaw-ui";
import React from "react";
import { FormattedMessage, useIntl } from "react-intl";

12
src/categories/components/CategoryCreatePage/CategoryCreatePage.tsx
View file

@ -1,13 +1,13 @@
import AppHeader from "@saleor/components/AppHeader";
import { CardSpacer } from "@saleor/components/CardSpacer";
import { ConfirmButtonTransitionState } from "@saleor/components/ConfirmButton";
import Container from "@saleor/components/Container";
import Metadata from "@saleor/components/Metadata";
import PageHeader from "@saleor/components/PageHeader";
import SaveButtonBar from "@saleor/components/SaveButtonBar";
import Savebar from "@saleor/components/Savebar";
import SeoForm from "@saleor/components/SeoForm";
import { ProductErrorFragment } from "@saleor/fragments/types/ProductErrorFragment";
import { sectionNames } from "@saleor/intl";
import { Backlink } from "@saleor/macaw-ui";
import React from "react";
import { useIntl } from "react-intl";
@ -35,9 +35,9 @@ export const CategoryCreatePage: React.FC<CategoryCreatePageProps> = ({
<CategoryCreateForm onSubmit={onSubmit}>
{({ data, change, handlers, submit, hasChanged }) => (
<Container>
<AppHeader onBack={onBack}>
<Backlink onClick={onBack}>
{intl.formatMessage(sectionNames.categories)}
</AppHeader>
</Backlink>
<PageHeader
title={intl.formatMessage({
defaultMessage: "Create New Category",
@ -71,9 +71,9 @@ export const CategoryCreatePage: React.FC<CategoryCreatePageProps> = ({
/>
<CardSpacer />
<Metadata data={data} onChange={handlers.changeMetadata} />
<SaveButtonBar
<Savebar
onCancel={onBack}
onSave={submit}
onSubmit={submit}
state={saveButtonBarState}
disabled={disabled || !hasChanged}
/>

2
src/categories/components/CategoryDeleteDialog/CategoryDeleteDialog.tsx
View file

@ -7,7 +7,7 @@ import {
DialogTitle
} from "@material-ui/core";
import { buttonMessages } from "@saleor/intl";
import { makeStyles } from "@saleor/theme";
import { makeStyles } from "@saleor/macaw-ui";
import React from "react";
import { FormattedMessage } from "react-intl";

2
src/categories/components/CategoryList/CategoryList.tsx
View file

@ -7,8 +7,8 @@ import TableCellHeader from "@saleor/components/TableCellHeader";
import TableHead from "@saleor/components/TableHead";
import TablePagination from "@saleor/components/TablePagination";
import { CategoryFragment } from "@saleor/fragments/types/CategoryFragment";
import { makeStyles } from "@saleor/macaw-ui";
import { maybe, renderCollection } from "@saleor/misc";
import { makeStyles } from "@saleor/theme";
import { ListActions, ListProps, SortPage } from "@saleor/types";
import { getArrowDirection } from "@saleor/utils/sort";
import React from "react";

2
src/categories/components/CategoryProductList/CategoryProductList.tsx
View file

@ -8,8 +8,8 @@ import TableCellAvatar from "@saleor/components/TableCellAvatar";
import { AVATAR_MARGIN } from "@saleor/components/TableCellAvatar/Avatar";
import TableHead from "@saleor/components/TableHead";
import TablePagination from "@saleor/components/TablePagination";
import { makeStyles } from "@saleor/macaw-ui";
import { maybe, renderCollection } from "@saleor/misc";
import { makeStyles } from "@saleor/theme";
import { ChannelProps, ListActions, ListProps } from "@saleor/types";
import React from "react";
import { FormattedMessage } from "react-intl";

12
src/categories/components/CategoryUpdatePage/CategoryUpdatePage.tsx
View file

@ -1,18 +1,18 @@
import { Button, Card } from "@material-ui/core";
import AppHeader from "@saleor/components/AppHeader";
import { CardSpacer } from "@saleor/components/CardSpacer";
import CardTitle from "@saleor/components/CardTitle";
import { ConfirmButtonTransitionState } from "@saleor/components/ConfirmButton";
import Container from "@saleor/components/Container";
import Metadata from "@saleor/components/Metadata/Metadata";
import PageHeader from "@saleor/components/PageHeader";
import SaveButtonBar from "@saleor/components/SaveButtonBar";
import Savebar from "@saleor/components/Savebar";
import SeoForm from "@saleor/components/SeoForm";
import { SingleAutocompleteChoiceType } from "@saleor/components/SingleAutocompleteSelectField";
import { Tab, TabContainer } from "@saleor/components/Tab";
import { ProductErrorFragment } from "@saleor/fragments/types/ProductErrorFragment";
import { SubmitPromise } from "@saleor/hooks/useForm";
import { sectionNames } from "@saleor/intl";
import { Backlink } from "@saleor/macaw-ui";
import React from "react";
import { FormattedMessage, useIntl } from "react-intl";
@ -104,9 +104,9 @@ export const CategoryUpdatePage: React.FC<CategoryUpdatePageProps> = ({
<CategoryUpdateForm category={category} onSubmit={onSubmit}>
{({ data, change, handlers, submit, hasChanged }) => (
<Container>
<AppHeader onBack={onBack}>
<Backlink onClick={onBack}>
{intl.formatMessage(sectionNames.categories)}
</AppHeader>
</Backlink>
<PageHeader title={category?.name} />
<CategoryDetailsForm
data={data}
@ -224,10 +224,10 @@ export const CategoryUpdatePage: React.FC<CategoryUpdatePageProps> = ({
toolbar={productListToolbar}
/>
)}
<SaveButtonBar
<Savebar
onCancel={onBack}
onDelete={onDelete}
onSave={submit}
onSubmit={submit}
state={saveButtonBarState}
disabled={disabled || !hasChanged}
/>

2
src/channels/ChannelsWithVariantsAvailabilityCard/ChannelWithVariantAvailabilityItemWrapper.tsx
View file

@ -6,12 +6,12 @@ import {
import { ChannelData } from "@saleor/channels/utils";
import { Messages } from "@saleor/components/ChannelsAvailabilityCard/types";
import IconChevronDown from "@saleor/icons/ChevronDown";
import { makeStyles } from "@saleor/macaw-ui";
import Label from "@saleor/orders/components/OrderHistory/Label";
import { getById } from "@saleor/orders/components/OrderReturnPage/utils";
import { ProductDetails_product_variants } from "@saleor/products/types/ProductDetails";
import { ChannelsWithVariantsData } from "@saleor/products/views/ProductUpdate/types";
import { areAllChannelVariantsSelected } from "@saleor/products/views/ProductUpdate/utils";
import { makeStyles } from "@saleor/theme";
import React from "react";
import { useIntl } from "react-intl";
import { defineMessages } from "react-intl";

2
src/channels/components/ChannelsWithVariantsAvailabilityDialog/ChannelsWithVariantsAvailabilityDialogContent.tsx
View file

@ -9,12 +9,12 @@ import { ChannelData } from "@saleor/channels/utils";
import IconCheckboxChecked from "@saleor/icons/CheckboxChecked";
import IconCheckboxSemiChecked from "@saleor/icons/CheckboxSemiChecked";
import IconChevronDown from "@saleor/icons/ChevronDown";
import { makeStyles } from "@saleor/macaw-ui";
import Label from "@saleor/orders/components/OrderHistory/Label";
import { getById } from "@saleor/orders/components/OrderReturnPage/utils";
import { ProductDetails_product_variants } from "@saleor/products/types/ProductDetails";
import { ChannelsWithVariantsData } from "@saleor/products/views/ProductUpdate/types";
import { areAllChannelVariantsSelected } from "@saleor/products/views/ProductUpdate/utils";
import { makeStyles } from "@saleor/theme";
import map from "lodash/map";
import React, { ChangeEvent } from "react";
import { defineMessages, useIntl } from "react-intl";

2
src/channels/components/ShippingZonesCard/ShippingZonesCard.tsx
View file

@ -6,7 +6,7 @@ import {
Typography
} from "@material-ui/core";
import CardTitle from "@saleor/components/CardTitle";
import { makeStyles } from "@saleor/theme";
import { makeStyles } from "@saleor/macaw-ui";
import React from "react";
import { defineMessages, useIntl } from "react-intl";

2
src/channels/components/ShippingZonesCard/ShippingZonesListHeader.tsx
View file

@ -2,7 +2,7 @@ import { ExpansionPanelSummary, Typography } from "@material-ui/core";
import HorizontalSpacer from "@saleor/apps/components/HorizontalSpacer";
import { ChannelShippingZones } from "@saleor/channels/pages/ChannelDetailsPage/types";
import IconChevronDown from "@saleor/icons/ChevronDown";
import { makeStyles } from "@saleor/theme";
import { makeStyles } from "@saleor/macaw-ui";
import React from "react";
import { defineMessages, useIntl } from "react-intl";

2
src/channels/components/styles.ts
View file

@ -1,4 +1,4 @@
import { makeStyles } from "@saleor/theme";
import { makeStyles } from "@saleor/macaw-ui";
export const useStyles = makeStyles(
theme => ({

6
src/channels/pages/ChannelDetailsPage/ChannelDetailsPage.tsx
View file

@ -3,7 +3,7 @@ import CardSpacer from "@saleor/components/CardSpacer";
import { ConfirmButtonTransitionState } from "@saleor/components/ConfirmButton";
import Form from "@saleor/components/Form";
import Grid from "@saleor/components/Grid";
import SaveButtonBar from "@saleor/components/SaveButtonBar";
import Savebar from "@saleor/components/Savebar";
import { SingleAutocompleteChoiceType } from "@saleor/components/SingleAutocompleteSelectField";
import { ChannelErrorFragment } from "@saleor/fragments/types/ChannelErrorFragment";
import { SearchData } from "@saleor/hooks/makeTopLevelSearch";
@ -163,9 +163,9 @@ export const ChannelDetailsPage: React.FC<ChannelDetailsPageProps> = ({
/>
</div>
</Grid>
<SaveButtonBar
<Savebar
onCancel={onBack}
onSave={submit}
onSubmit={submit}
onDelete={onDelete}
state={saveButtonBarState}
disabled={disabled || formDisabled || !onSubmit || !hasChanged}

15
src/channels/pages/ChannelsListPage/ChannelsListPage.tsx
View file

@ -8,15 +8,15 @@ import {
TableRow
} from "@material-ui/core";
import DeleteIcon from "@material-ui/icons/Delete";
import Alert from "@saleor/components/Alert/Alert";
import AppHeader from "@saleor/components/AppHeader";
import Container from "@saleor/components/Container";
import LimitReachedAlert from "@saleor/components/LimitReachedAlert";
import PageHeader from "@saleor/components/PageHeader";
import ResponsiveTable from "@saleor/components/ResponsiveTable";
import { RefreshLimits_shop_limits } from "@saleor/components/Shop/types/RefreshLimits";
import Skeleton from "@saleor/components/Skeleton";
import TableCellHeader from "@saleor/components/TableCellHeader";
import { sectionNames } from "@saleor/intl";
import { Backlink } from "@saleor/macaw-ui";
import { renderCollection, stopPropagation } from "@saleor/misc";
import { hasLimits, isLimitReached } from "@saleor/utils/limits";
import React from "react";
@ -51,9 +51,9 @@ export const ChannelsListPage: React.FC<ChannelsListPageProps> = ({
return (
<Container>
<AppHeader onBack={onBack}>
<Backlink onClick={onBack}>
{intl.formatMessage(sectionNames.configuration)}
</AppHeader>
</Backlink>
<PageHeader
title={intl.formatMessage(sectionNames.channels)}
limit={
@ -77,15 +77,16 @@ export const ChannelsListPage: React.FC<ChannelsListPageProps> = ({
/>
</Button>
</PageHeader>
<Alert
show={limitReached}
{limitReached && (
<LimitReachedAlert
title={intl.formatMessage({
defaultMessage: "Channel limit reached",
description: "alert"
})}
>
<FormattedMessage defaultMessage="You have reached your channel limit, you will be no longer able to add channels to your store. If you would like to up your limit, contact your administration staff about raising your limits." />
</Alert>
</LimitReachedAlert>
)}
<Card>
<ResponsiveTable>
<TableHead>

2
src/channels/pages/ChannelsListPage/styles.ts
View file

@ -1,4 +1,4 @@
import { makeStyles } from "@saleor/theme";
import { makeStyles } from "@saleor/macaw-ui";
export const useStyles = makeStyles(
theme => ({

6
src/channels/views/ChannelCreate/ChannelCreate.tsx
View file

@ -1,6 +1,5 @@
import { FormData } from "@saleor/channels/components/ChannelForm/ChannelForm";
import { ChannelCreate } from "@saleor/channels/types/ChannelCreate";
import AppHeader from "@saleor/components/AppHeader";
import Container from "@saleor/components/Container";
import PageHeader from "@saleor/components/PageHeader";
import { WindowTitle } from "@saleor/components/WindowTitle";
@ -10,6 +9,7 @@ import useNavigator from "@saleor/hooks/useNavigator";
import useNotifier from "@saleor/hooks/useNotifier";
import { getDefaultNotifierSuccessErrorData } from "@saleor/hooks/useNotifier/utils";
import { sectionNames } from "@saleor/intl";
import { Backlink } from "@saleor/macaw-ui";
import useShippingZonesSearch from "@saleor/searches/useShippingZonesSearch";
import currencyCodes from "currency-codes";
import React from "react";
@ -83,9 +83,9 @@ export const ChannelCreateView = ({}) => {
})}
/>
<Container>
<AppHeader onBack={handleBack}>
<Backlink onClick={handleBack}>
{intl.formatMessage(sectionNames.channels)}
</AppHeader>
</Backlink>
<PageHeader
title={intl.formatMessage({
defaultMessage: "New Channel",

6
src/channels/views/ChannelDetails/ChannelDetails.tsx
View file

@ -2,7 +2,6 @@ import ChannelDeleteDialog from "@saleor/channels/components/ChannelDeleteDialog
import { FormData } from "@saleor/channels/components/ChannelForm/ChannelForm";
import { ChannelDelete } from "@saleor/channels/types/ChannelDelete";
import { getChannelsCurrencyChoices } from "@saleor/channels/utils";
import AppHeader from "@saleor/components/AppHeader";
import Container from "@saleor/components/Container";
import PageHeader from "@saleor/components/PageHeader";
import { WindowTitle } from "@saleor/components/WindowTitle";
@ -13,6 +12,7 @@ import useNavigator from "@saleor/hooks/useNavigator";
import useNotifier from "@saleor/hooks/useNotifier";
import { getDefaultNotifierSuccessErrorData } from "@saleor/hooks/useNotifier/utils";
import { sectionNames } from "@saleor/intl";
import { Backlink } from "@saleor/macaw-ui";
import useShippingZonesSearch from "@saleor/searches/useShippingZonesSearch";
import { useChannelShippingZones } from "@saleor/shipping/queries";
import getChannelsErrorMessage from "@saleor/utils/errors/channels";
@ -178,9 +178,9 @@ export const ChannelDetails: React.FC<ChannelDetailsProps> = ({
})}
/>
<Container>
<AppHeader onBack={handleBack}>
<Backlink onClick={handleBack}>
{intl.formatMessage(sectionNames.channels)}
</AppHeader>
</Backlink>
<PageHeader title={data?.channel?.name} />
<ChannelDetailsPage
channelShippingZones={channelShippingZonesData?.shippingZones?.edges?.map(

12
src/collections/components/CollectionCreatePage/CollectionCreatePage.tsx
View file

@ -1,5 +1,4 @@
import { ChannelCollectionData } from "@saleor/channels/utils";
import AppHeader from "@saleor/components/AppHeader";
import { CardSpacer } from "@saleor/components/CardSpacer";
import ChannelsAvailabilityCard from "@saleor/components/ChannelsAvailabilityCard";
import { ConfirmButtonTransitionState } from "@saleor/components/ConfirmButton";
@ -7,12 +6,13 @@ import { Container } from "@saleor/components/Container";
import Grid from "@saleor/components/Grid";
import Metadata from "@saleor/components/Metadata";
import PageHeader from "@saleor/components/PageHeader";
import SaveButtonBar from "@saleor/components/SaveButtonBar";
import Savebar from "@saleor/components/Savebar";
import SeoForm from "@saleor/components/SeoForm";
import { CollectionChannelListingErrorFragment } from "@saleor/fragments/types/CollectionChannelListingErrorFragment";
import { CollectionErrorFragment } from "@saleor/fragments/types/CollectionErrorFragment";
import { SubmitPromise } from "@saleor/hooks/useForm";
import { sectionNames } from "@saleor/intl";
import { Backlink } from "@saleor/macaw-ui";
import { PermissionEnum } from "@saleor/types/globalTypes";
import React from "react";
import { useIntl } from "react-intl";
@ -56,9 +56,9 @@ const CollectionCreatePage: React.FC<CollectionCreatePageProps> = ({
>
{({ change, data, handlers, hasChanged, submit }) => (
<Container>
<AppHeader onBack={onBack}>
<Backlink onClick={onBack}>
{intl.formatMessage(sectionNames.collections)}
</AppHeader>
</Backlink>
<PageHeader
title={intl.formatMessage({
defaultMessage: "Add Collection",
@ -153,11 +153,11 @@ const CollectionCreatePage: React.FC<CollectionCreatePageProps> = ({
/>
</div>
</Grid>
<SaveButtonBar
<Savebar
state={saveButtonBarState}
disabled={disabled || !hasChanged}
onCancel={onBack}
onSave={submit}
onSubmit={submit}
/>
</Container>
)}

12
src/collections/components/CollectionDetailsPage/CollectionDetailsPage.tsx
View file

@ -1,5 +1,4 @@
import { ChannelCollectionData } from "@saleor/channels/utils";
import AppHeader from "@saleor/components/AppHeader";
import { CardSpacer } from "@saleor/components/CardSpacer";
import ChannelsAvailabilityCard from "@saleor/components/ChannelsAvailabilityCard";
import { ConfirmButtonTransitionState } from "@saleor/components/ConfirmButton";
@ -7,12 +6,13 @@ import { Container } from "@saleor/components/Container";
import Grid from "@saleor/components/Grid";
import Metadata from "@saleor/components/Metadata/Metadata";
import PageHeader from "@saleor/components/PageHeader";
import SaveButtonBar from "@saleor/components/SaveButtonBar";
import Savebar from "@saleor/components/Savebar";
import SeoForm from "@saleor/components/SeoForm";
import { CollectionChannelListingErrorFragment } from "@saleor/fragments/types/CollectionChannelListingErrorFragment";
import { CollectionErrorFragment } from "@saleor/fragments/types/CollectionErrorFragment";
import { SubmitPromise } from "@saleor/hooks/useForm";
import { sectionNames } from "@saleor/intl";
import { Backlink } from "@saleor/macaw-ui";
import { PermissionEnum } from "@saleor/types/globalTypes";
import React from "react";
import { useIntl } from "react-intl";
@ -75,9 +75,9 @@ const CollectionDetailsPage: React.FC<CollectionDetailsPageProps> = ({
>
{({ change, data, handlers, hasChanged, submit }) => (
<Container>
<AppHeader onBack={onBack}>
<Backlink onClick={onBack}>
{intl.formatMessage(sectionNames.collections)}
</AppHeader>
</Backlink>
<PageHeader title={collection?.name} />
<Grid>
<div>
@ -148,12 +148,12 @@ const CollectionDetailsPage: React.FC<CollectionDetailsPageProps> = ({
</div>
</div>
</Grid>
<SaveButtonBar
<Savebar
state={saveButtonBarState}
disabled={disabled || (!hasChanged && !hasChannelChanged)}
onCancel={onBack}
onDelete={onCollectionRemove}
onSave={submit}
onSubmit={submit}
/>
</Container>
)}

2
src/collections/components/CollectionImage/CollectionImage.tsx
View file

@ -5,7 +5,7 @@ import ImageUpload from "@saleor/components/ImageUpload";
import MediaTile from "@saleor/components/MediaTile";
import Skeleton from "@saleor/components/Skeleton";
import { commonMessages } from "@saleor/intl";
import { makeStyles } from "@saleor/theme";
import { makeStyles } from "@saleor/macaw-ui";
import React from "react";
import { FormattedMessage, useIntl } from "react-intl";

2
src/collections/components/CollectionList/CollectionList.tsx
View file

@ -7,8 +7,8 @@ import Skeleton from "@saleor/components/Skeleton";
import TableCellHeader from "@saleor/components/TableCellHeader";
import TableHead from "@saleor/components/TableHead";
import TablePagination from "@saleor/components/TablePagination";
import { makeStyles } from "@saleor/macaw-ui";
import { maybe, renderCollection } from "@saleor/misc";
import { makeStyles } from "@saleor/theme";
import { ChannelProps, ListActions, ListProps, SortPage } from "@saleor/types";
import { getArrowDirection } from "@saleor/utils/sort";
import React from "react";

4
src/collections/components/CollectionProducts/CollectionProducts.tsx
View file

@ -17,7 +17,7 @@ import TableCellAvatar from "@saleor/components/TableCellAvatar";
import { AVATAR_MARGIN } from "@saleor/components/TableCellAvatar/Avatar";
import TableHead from "@saleor/components/TableHead";
import TablePagination from "@saleor/components/TablePagination";
import { makeStyles } from "@saleor/theme";
import { makeStyles } from "@saleor/macaw-ui";
import { mapEdgesToItems } from "@saleor/utils/maps";
import React from "react";
import { FormattedMessage, useIntl } from "react-intl";
@ -32,7 +32,7 @@ const useStyles = makeStyles(
"&:last-child": {
paddingRight: 0
},
width: 76 + theme.spacing(0.5)
width: `calc(76px + ${theme.spacing(0.5)})`
},
colName: {
paddingLeft: 0,

2
src/components/Accordion/Accordion.tsx
View file

@ -1,7 +1,7 @@
import { IconButton, Typography } from "@material-ui/core";
import AddIcon from "@material-ui/icons/Add";
import RemoveIcon from "@material-ui/icons/Remove";
import { makeStyles } from "@saleor/theme";
import { makeStyles } from "@saleor/macaw-ui";
import classNames from "classnames";
import React from "react";

2
src/components/AccountPermissions/AccountPermissions.tsx
View file

@ -11,8 +11,8 @@ import {
import CardTitle from "@saleor/components/CardTitle";
import Skeleton from "@saleor/components/Skeleton";
import useUser from "@saleor/hooks/useUser";
import { makeStyles } from "@saleor/macaw-ui";
import { PermissionData } from "@saleor/permissionGroups/components/PermissionGroupDetailsPage/PermissionGroupDetailsPage";
import { makeStyles } from "@saleor/theme";
import React from "react";
import { useIntl } from "react-intl";

2
src/components/ActionDialog/ActionDialog.tsx
View file

@ -2,7 +2,7 @@ import { Dialog, DialogContent, DialogTitle } from "@material-ui/core";
import { DialogProps } from "@saleor/types";
import React from "react";
import { ConfirmButtonTransitionState } from "../ConfirmButton/ConfirmButton";
import { ConfirmButtonTransitionState } from "../ConfirmButton";
import DialogButtons from "./DialogButtons";
import { ActionDialogVariant } from "./types";

6
src/components/ActionDialog/DialogButtons.tsx
View file

@ -1,13 +1,11 @@
import { Button, DialogActions } from "@material-ui/core";
import { buttonMessages } from "@saleor/intl";
import { makeStyles } from "@saleor/theme";
import { makeStyles } from "@saleor/macaw-ui";
import classNames from "classnames";
import React from "react";
import { FormattedMessage, useIntl } from "react-intl";
import ConfirmButton, {
ConfirmButtonTransitionState
} from "../ConfirmButton/ConfirmButton";
import ConfirmButton, { ConfirmButtonTransitionState } from "../ConfirmButton";
import { ActionDialogVariant } from "./types";
const useStyles = makeStyles(

2
src/components/AddressEdit/AddressEdit.tsx
View file

@ -3,7 +3,7 @@ import { AddressTypeInput } from "@saleor/customers/types";
import { AccountErrorFragment } from "@saleor/fragments/types/AccountErrorFragment";
import { OrderErrorFragment } from "@saleor/fragments/types/OrderErrorFragment";
import { commonMessages } from "@saleor/intl";
import { makeStyles } from "@saleor/theme";
import { makeStyles } from "@saleor/macaw-ui";
import { getFormErrors } from "@saleor/utils/errors";
import getAccountErrorMessage from "@saleor/utils/errors/account";
import getOrderErrorMessage from "@saleor/utils/errors/order";

13
src/components/Alert/Alert.stories.tsx
View file

@ -1,13 +0,0 @@
import Decorator from "@saleor/storybook/Decorator";
import { storiesOf } from "@storybook/react";
import React from "react";
import Alert from "./Alert";
storiesOf("Generics / Alert", module)
.addDecorator(Decorator)
.add("default", () => (
<Alert show={true} title="Title">
Content
</Alert>
));

81
src/components/Alert/Alert.tsx
View file

@ -1,81 +0,0 @@
import alertIconDark from "@assets/images/alert-dark.svg";
import alertIcon from "@assets/images/alert.svg";
import { Card, CardContent, IconButton, Typography } from "@material-ui/core";
import CloseIcon from "@material-ui/icons/Close";
import useStateFromProps from "@saleor/hooks/useStateFromProps";
import useTheme from "@saleor/hooks/useTheme";
import { makeStyles } from "@saleor/theme";
import classNames from "classnames";
import React from "react";
import SVG from "react-inlinesvg";
const useStyles = makeStyles(
theme => ({
close: {
color: theme.palette.common.black,
position: "absolute",
right: theme.spacing(-1),
top: theme.spacing(-2)
},
content: {
color: theme.palette.getContrastText(theme.palette.alert.paper.warning),
columnGap: theme.spacing(2) + "px",
display: "grid",
gridTemplateColumns: "40px 1fr"
},
icon: {
color: theme.palette.alert.icon.warning
},
root: {
background: theme.palette.alert.paper.warning,
marginBottom: theme.spacing(3)
},
titleBar: {
margin: theme.spacing(1, 0),
position: "relative"
}
}),
{ name: "Alert" }
);
export interface AlertProps {
className?: string;
show: boolean;
title: string;
}
const Alert: React.FC<AlertProps> = ({ children, className, show, title }) => {
const classes = useStyles({});
const [visible, setVisible] = useStateFromProps(show);
const { isDark } = useTheme();
return visible ? (
<Card elevation={0} className={classNames(classes.root, className)}>
<CardContent>
<div className={classes.content}>
<div>
<SVG
className={classes.icon}
src={isDark ? alertIconDark : alertIcon}
/>
</div>
<div>
<div className={classes.titleBar}>
<Typography variant="h5">{title}</Typography>
<IconButton
className={classes.close}
onClick={() => setVisible(false)}
>
<CloseIcon />
</IconButton>
</div>
{children}
</div>
</div>
</CardContent>
</Card>
) : null;
};
Alert.displayName = "Alert";
export default Alert;

2
src/components/Alert/InlineAlert.tsx
View file

@ -1,5 +1,5 @@
import { Card } from "@material-ui/core";
import { makeStyles } from "@saleor/theme";
import { makeStyles } from "@saleor/macaw-ui";
import React from "react";
const useStyles = makeStyles(

0
src/components/Alert/index.ts
View file

82
src/components/AppHeader/AppHeader.tsx
View file

@ -1,82 +0,0 @@
import { Portal, Typography } from "@material-ui/core";
import ArrowBackIcon from "@material-ui/icons/ArrowBack";
import { makeStyles } from "@saleor/theme";
import React from "react";
import AppHeaderContext from "../AppLayout/AppHeaderContext";
import Skeleton from "../Skeleton";
export interface AppHeaderProps {
children: React.ReactNode;
onBack();
}
const useStyles = makeStyles(
theme => ({
backArrow: {
fontSize: 30
},
menuButton: {
flex: "0 0 auto",
marginLeft: -theme.spacing(2),
marginRight: theme.spacing(),
marginTop: -theme.spacing(2)
},
root: {
"&:hover": {
color: theme.typography.body1.color
},
alignItems: "center",
color: theme.palette.grey[500],
cursor: "pointer",
display: "flex",
marginTop: theme.spacing(0.5),
transition: theme.transitions.duration.standard + "ms",
[theme.breakpoints.down("sm")]: {
margin: theme.spacing(4, 0, 0, 0)
}
},
skeleton: {
marginBottom: theme.spacing(2),
width: "10rem"
},
title: {
color: "inherit",
flex: 1,
marginLeft: theme.spacing(),
textTransform: "uppercase"
}
}),
{ name: "AppHeader" }
);
const AppHeader: React.FC<AppHeaderProps> = props => {
const { children, onBack } = props;
const classes = useStyles(props);
return (
<AppHeaderContext.Consumer>
{anchor =>
anchor ? (
<Portal container={anchor.current}>
<div
className={classes.root}
onClick={onBack}
data-test-id="app-header-back-button"
>
<ArrowBackIcon className={classes.backArrow} />
{children ? (
<Typography className={classes.title}>{children}</Typography>
) : (
<Skeleton className={classes.skeleton} />
)}
</div>
</Portal>
) : null
}
</AppHeaderContext.Consumer>
);
};
AppHeader.displayName = "AppHeader";
export default AppHeader;

2
src/components/AppHeader/index.ts
View file

@ -1,2 +0,0 @@
export { default } from "./AppHeader";
export * from "./AppHeader";

15
src/components/AppLayout/AppActionContext.tsx
View file

@ -1,15 +0,0 @@
import React from "react";
interface AppAction {
anchor: React.RefObject<HTMLDivElement>;
docked: boolean;
setDocked: (docked: boolean) => void;
}
const AppActionContext = React.createContext<AppAction>({
anchor: undefined,
docked: true,
setDocked: () => undefined
});
export const useAppAction = () => React.useContext(AppActionContext);
export default AppActionContext;

2
src/components/AppLayout/AppChannelSelect.tsx
View file

@ -1,5 +1,5 @@
import { ChannelFragment } from "@saleor/fragments/types/ChannelFragment";
import { makeStyles } from "@saleor/theme";
import { makeStyles } from "@saleor/macaw-ui";
import { ChannelProps } from "@saleor/types";
import { mapNodeToChoice } from "@saleor/utils/maps";
import React from "react";

7
src/components/AppLayout/AppHeaderContext.tsx
View file

@ -1,7 +0,0 @@
import React from "react";
const AppHeaderContext = React.createContext<React.RefObject<HTMLDivElement>>(
undefined
);
export default AppHeaderContext;

75
src/components/AppLayout/AppLayout.tsx
View file

@ -1,11 +1,17 @@
import { LinearProgress, useMediaQuery } from "@material-ui/core";
import { createConfigurationMenu } from "@saleor/configuration";
import useAppState from "@saleor/hooks/useAppState";
import useNavigator from "@saleor/hooks/useNavigator";
import useTheme from "@saleor/hooks/useTheme";
import useUser from "@saleor/hooks/useUser";
import {
makeStyles,
SaleorTheme,
Sidebar,
SidebarDrawer,
useBacklink,
useSavebar,
useTheme
} from "@saleor/macaw-ui";
import { staffMemberDetailsUrl } from "@saleor/staff/urls";
import { makeStyles, SaleorTheme } from "@saleor/theme";
import classNames from "classnames";
import React from "react";
import { useIntl } from "react-intl";
@ -15,15 +21,12 @@ import Container from "../Container";
import ErrorPage from "../ErrorPage";
import Navigator from "../Navigator";
import NavigatorButton from "../NavigatorButton/NavigatorButton";
import SideBar from "../SideBar";
import SideBarDrawer from "../SideBarDrawer/SideBarDrawer";
import UserChip from "../UserChip";
import AppActionContext from "./AppActionContext";
import useAppChannel from "./AppChannelContext";
import AppChannelSelect from "./AppChannelSelect";
import AppHeaderContext from "./AppHeaderContext";
import { appLoaderHeight } from "./consts";
import createMenuStructure from "./menuStructure";
import { isMenuActive } from "./utils";
const useStyles = makeStyles(
theme => ({
@ -103,7 +106,7 @@ const useStyles = makeStyles(
}
},
viewContainer: {
minHeight: `calc(100vh - ${theme.spacing(2) + appLoaderHeight + 70}px)`
minHeight: `calc(100vh + ${appLoaderHeight + 70}px - ${theme.spacing(2)})`
}
}),
{
@ -117,9 +120,9 @@ interface AppLayoutProps {
const AppLayout: React.FC<AppLayoutProps> = ({ children }) => {
const classes = useStyles({});
const { isDark, toggleTheme } = useTheme();
const appActionAnchor = React.useRef<HTMLDivElement>();
const appHeaderAnchor = React.useRef<HTMLDivElement>();
const { themeType, setTheme } = useTheme();
const { anchor: appActionAnchor, docked } = useSavebar();
const appHeaderAnchor = useBacklink();
const { logout, user } = useUser();
const navigate = useNavigator();
const intl = useIntl();
@ -129,7 +132,6 @@ const AppLayout: React.FC<AppLayoutProps> = ({ children }) => {
const isMdUp = useMediaQuery((theme: SaleorTheme) =>
theme.breakpoints.up("md")
);
const [docked, setDocked] = React.useState(true);
const {
availableChannels,
channel,
@ -137,18 +139,10 @@ const AppLayout: React.FC<AppLayoutProps> = ({ children }) => {
setChannel
} = useAppChannel(false);
const menuStructure = createMenuStructure(intl);
const configurationMenu = createConfigurationMenu(intl);
const userPermissions = user?.userPermissions || [];
const renderConfigure = configurationMenu.some(section =>
section.menuItems.some(
menuItem =>
!!userPermissions.find(
userPermission => userPermission.code === menuItem.permission
)
)
);
const menuStructure = createMenuStructure(intl, user);
const activeMenu = menuStructure.find(menuItem =>
isMenuActive(location.pathname, menuItem)
)?.id;
const handleErrorBack = () => {
navigate("/");
@ -160,27 +154,20 @@ const AppLayout: React.FC<AppLayoutProps> = ({ children }) => {
});
};
const isDark = themeType === "dark";
const toggleTheme = () => setTheme(isDark ? "light" : "dark");
return (
<>
<Navigator
visible={isNavigatorVisible}
setVisibility={setNavigatorVisibility}
/>
<AppHeaderContext.Provider value={appHeaderAnchor}>
<AppActionContext.Provider
value={{
anchor: appActionAnchor,
docked,
setDocked
}}
>
<div className={classes.root}>
{isMdUp && (
<SideBar
<Sidebar
active={activeMenu}
menuItems={menuStructure}
location={location.pathname}
user={user}
renderConfigure={renderConfigure}
onMenuItemClick={navigate}
/>
)}
@ -194,26 +181,18 @@ const AppLayout: React.FC<AppLayoutProps> = ({ children }) => {
<div>
<Container>
<div className={classes.header}>
<div
className={classes.headerAnchor}
ref={appHeaderAnchor}
/>
<div className={classes.headerAnchor} ref={appHeaderAnchor} />
<div className={classes.headerToolbar}>
{!isMdUp && (
<SideBarDrawer
<SidebarDrawer
menuItems={menuStructure}
location={location.pathname}
user={user}
renderConfigure={renderConfigure}
onMenuItemClick={navigate}
/>
)}
<div className={classes.spacer} />
<div className={classes.userBar}>
<NavigatorButton
isMac={navigator.platform
.toLowerCase()
.includes("mac")}
isMac={navigator.platform.toLowerCase().includes("mac")}
onClick={() => setNavigatorVisibility(true)}
/>
{channel && (
@ -257,8 +236,6 @@ const AppLayout: React.FC<AppLayoutProps> = ({ children }) => {
/>
</div>
</div>
</AppActionContext.Provider>
</AppHeaderContext.Provider>
</>
);
};

369
src/components/AppLayout/MenuList.tsx
View file

@ -1,369 +0,0 @@
import configureIcon from "@assets/images/menu-configure-icon.svg";
import { Typography } from "@material-ui/core";
import { User } from "@saleor/fragments/types/User";
import useTheme from "@saleor/hooks/useTheme";
import { sectionNames } from "@saleor/intl";
import { makeStyles } from "@saleor/theme";
import classNames from "classnames";
import React from "react";
import SVG from "react-inlinesvg";
import { FormattedMessage, useIntl } from "react-intl";
import { matchPath } from "react-router";
import {
configurationMenuUrl,
createConfigurationMenu
} from "../../configuration";
import { createHref } from "../../misc";
import { orderDraftListUrl, orderListUrl } from "../../orders/urls";
import MenuNested from "./MenuNested";
import { IMenuItem } from "./menuStructure";
const useStyles = makeStyles(
theme => ({
menuIcon: {
"& svg": {
height: 32,
width: 32
},
display: "inline-block",
position: "relative",
top: 8
},
menuIconDark: {
"& path": {
fill: theme.palette.common.white
}
},
menuIconSmall: {
left: -5
},
menuIsActive: {
boxShadow: "0px 0px 12px 1px rgba(0,0,0,0.2)"
},
menuItemHover: {
"& p": {
fontSize: 14,
transition: "color 0.5s ease, opacity 0.3s ease-out"
},
"& path": {
transition: "fill 0.5s ease"
},
"&:hover": {
"& p": {
color: theme.palette.primary.main
},
"& path": {
fill: theme.palette.primary.main
},
"&:before": {
borderLeft: `solid 2px ${theme.palette.primary.main}`,
content: "''",
height: 33,
left: -20,
position: "absolute",
top: 8
},
color: theme.palette.primary.main
},
cursor: "pointer",
position: "relative"
},
menuList: {
display: "flex",
flexDirection: "column",
height: "100%",
marginLeft: theme.spacing(4),
marginTop: theme.spacing(2),
paddingBottom: theme.spacing(3)
},
menuListItem: {
alignItems: "center",
display: "block",
marginBottom: theme.spacing(5),
paddingLeft: 0,
textDecoration: "none",
transition: theme.transitions.duration.standard + "ms"
},
menuListItemActive: {
"& $menuListItemText": {
color: theme.palette.primary.main
},
"& path": {
color: theme.palette.primary.main,
fill: theme.palette.primary.main
}
},
menuListItemOpen: {
"&:after": {
borderBottom: `10px solid transparent`,
borderLeft: `10px solid ${theme.palette.background.paper}`,
borderTop: `10px solid transparent`,
content: "''",
height: 0,
position: "absolute",
right: -30,
top: 15,
width: 0
},
"&:before": {
borderLeft: `solid 2px ${theme.palette.primary.main}`,
content: "''",
height: 33,
left: -20,
position: "absolute",
top: 8
},
position: "relative"
},
menuListItemText: {
"&:hover": {
color: theme.palette.primary.main
},
bottom: 0,
cursor: "pointer",
fontSize: "1rem",
fontWeight: 500,
left: 30,
opacity: 1,
paddingLeft: 16,
position: "absolute",
textTransform: "uppercase",
transition: "opacity 0.5s ease"
},
menuListItemTextHide: {
bottom: 0,
left: 30,
opacity: 0,
position: "absolute"
},
subMenu: {
padding: "0 15px"
},
subMenuDrawer: {
background: "#000",
cursor: "pointer",
height: "100vh",
left: 0,
opacity: 0.2,
position: "absolute",
top: 0,
width: 0,
zIndex: -2
},
subMenuDrawerOpen: {
width: `100vw`
}
}),
{ name: "MenuList" }
);
interface MenuListProps {
className?: string;
menuItems: IMenuItem[];
isMenuSmall: boolean;
location: string;
user: User;
renderConfigure: boolean;
onMenuItemClick: (url: string, event: React.MouseEvent<any>) => void;
}
export interface IActiveSubMenu {
isActive: boolean;
label: string | null;
}
const MenuList: React.FC<MenuListProps> = props => {
const {
className,
menuItems,
isMenuSmall,
location,
user,
renderConfigure,
onMenuItemClick
} = props;
const classes = useStyles(props);
const { isDark } = useTheme();
const [activeSubMenu, setActiveSubMenu] = React.useState<IActiveSubMenu>({
isActive: false,
label: null
});
const intl = useIntl();
const configurationMenu = createConfigurationMenu(intl).map(menu => {
menu.menuItems.map(item =>
user.userPermissions.map(perm => perm.code).includes(item.permission)
);
});
const handleSubMenu = itemLabel => {
setActiveSubMenu({
isActive:
itemLabel === activeSubMenu.label ? !activeSubMenu.isActive : true,
label: itemLabel
});
};
const closeSubMenu = (menuItemUrl, event) => {
setActiveSubMenu({
isActive: false,
label: null
});
if (menuItemUrl && event) {
onMenuItemClick(menuItemUrl, event);
event.stopPropagation();
event.preventDefault();
}
};
return (
<div
className={classNames(className, {
[classes.menuIsActive]: activeSubMenu.isActive
})}
data-test="mainMenu"
>
{/* FIXME: this .split("?")[0] looks gross */}
{menuItems.map(menuItem => {
const isActive = (menuItem: IMenuItem) =>
location.split("?")[0] === orderDraftListUrl().split("?")[0] &&
menuItem.url.split("?")[0] === orderListUrl().split("?")[0]
? false
: !!matchPath(location.split("?")[0], {
exact: menuItem.url.split("?")[0] === "/",
path: menuItem.url.split("?")[0]
});
if (
menuItem.permission &&
!user.userPermissions
.map(perm => perm.code)
.includes(menuItem.permission)
) {
return null;
}
if (!menuItem.url) {
const isAnyChildActive = menuItem.children.reduce(
(acc, child) => acc || isActive(child),
false
);
return (
<div
className={classNames(classes.menuListItem, {
[classes.menuListItemActive]: isAnyChildActive
})}
key={menuItem.label}
data-testid={menuItem.testingContextId}
data-test="menuItemEntry"
>
<div
className={classNames(classes.menuItemHover, {
[classes.menuListItemOpen]:
menuItem.ariaLabel === activeSubMenu.label &&
activeSubMenu.isActive
})}
onClick={() => handleSubMenu(menuItem.ariaLabel)}
>
<SVG
className={classNames(classes.menuIcon, {
[classes.menuIconDark]: isDark,
[classes.menuIconSmall]: !isMenuSmall
})}
src={menuItem.icon}
/>
<Typography
aria-label={menuItem.ariaLabel}
className={classNames(classes.menuListItemText, {
[classes.menuListItemTextHide]: !isMenuSmall
})}
>
{menuItem.label}
</Typography>
</div>
<MenuNested
activeItem={activeSubMenu}
closeSubMenu={setActiveSubMenu}
menuItem={menuItem}
onMenuItemClick={onMenuItemClick}
handleSubMenu={handleSubMenu}
title={menuItem.label}
icon={menuItem.icon}
ariaLabel={menuItem.ariaLabel}
/>
<div
onClick={event => closeSubMenu(null, event)}
className={classNames(classes.subMenuDrawer, {
[classes.subMenuDrawerOpen]: activeSubMenu.isActive
})}
/>
</div>
);
}
return (
<a
className={classNames(classes.menuListItem, {
[classes.menuListItemActive]: isActive(menuItem)
})}
href={createHref(menuItem.url)}
onClick={event => closeSubMenu(menuItem.url, event)}
key={menuItem.label}
data-testid={menuItem.testingContextId}
data-test="menuItemEntry"
>
<div className={classes.menuItemHover}>
<SVG
className={classNames(classes.menuIcon, {
[classes.menuIconDark]: isDark,
[classes.menuIconSmall]: !isMenuSmall
})}
src={menuItem.icon}
/>
<Typography
aria-label={menuItem.ariaLabel}
className={classNames(classes.menuListItemText, {
[classes.menuListItemTextHide]: !isMenuSmall
})}
>
{menuItem.label}
</Typography>
</div>
</a>
);
})}
{renderConfigure && configurationMenu.length > 0 && (
<a
className={classes.menuListItem}
href={createHref(configurationMenuUrl)}
onClick={event => closeSubMenu(configurationMenuUrl, event)}
>
<div className={classes.menuItemHover}>
<SVG
className={classNames(classes.menuIcon, {
[classes.menuIconDark]: isDark,
[classes.menuIconSmall]: !isMenuSmall
})}
src={configureIcon}
/>
<Typography
aria-label="configuration"
className={classNames(classes.menuListItemText, {
[classes.menuListItemTextHide]: !isMenuSmall
})}
>
<FormattedMessage {...sectionNames.configuration} />
</Typography>
</div>
</a>
)}
</div>
);
};
MenuList.displayName = "MenuList";
export default MenuList;

193
src/components/AppLayout/MenuNested.tsx
View file

@ -1,193 +0,0 @@
import menuArrowIcon from "@assets/images/menu-arrow-icon.svg";
import { Hidden, Typography } from "@material-ui/core";
import useTheme from "@saleor/hooks/useTheme";
import { createHref } from "@saleor/misc";
import { makeStyles } from "@saleor/theme";
import classNames from "classnames";
import React from "react";
import SVG from "react-inlinesvg";
import { drawerNestedMenuWidth, drawerWidthExpandedMobile } from "./consts";
import { IActiveSubMenu } from "./MenuList";
import { IMenuItem } from "./menuStructure";
const useStyles = makeStyles(
theme => ({
menuListNested: {
background: theme.palette.background.paper,
height: "100vh",
position: "absolute",
right: 0,
top: 0,
transition: `right ${theme.transitions.duration.shorter}ms ease`,
width: drawerNestedMenuWidth,
zIndex: -1
},
menuListNestedClose: {
"& svg": {
fill: theme.palette.primary.main,
left: 11,
position: "relative",
top: 1
},
border: `solid 1px #EAEAEA`,
borderRadius: "100%",
cursor: "pointer",
height: 32,
position: "absolute",
right: 32,
top: 35,
transform: "rotate(180deg)",
width: 32
},
menuListNestedCloseDark: {
border: `solid 1px #252728`
},
menuListNestedHide: {
opacity: 0
},
menuListNestedIcon: {
"& path": {
fill: "initial"
},
"& svg": { height: 32, position: "relative", top: 7, width: 32 }
},
menuListNestedIconDark: {
"& path": {
fill: theme.palette.common.white
}
},
menuListNestedItem: {
"&:hover": {
"& p": {
color: theme.palette.primary.main
}
},
display: "block",
marginBottom: theme.spacing(2),
padding: "0px 30px",
textDecoration: "none"
},
menuListNestedOpen: {
[theme.breakpoints.down("sm")]: {
right: 0,
width: drawerWidthExpandedMobile,
zIndex: 2
},
right: -drawerNestedMenuWidth,
width: drawerNestedMenuWidth,
zIndex: -1
},
subHeader: {
borderBottom: "solid 1px #EAEAEA",
margin: "30px",
marginBottom: 39,
paddingBottom: 22
},
subHeaderDark: {
borderBottom: "solid 1px #252728"
},
subHeaderTitle: {
[theme.breakpoints.up("md")]: {
paddingLeft: 0
},
display: "inline",
paddingLeft: 10
}
}),
{ name: "MenuNested" }
);
export interface MenuNestedProps {
activeItem: IActiveSubMenu;
ariaLabel: string;
closeSubMenu: ({ isActive, label }: IActiveSubMenu) => void;
icon: string;
menuItem: IMenuItem;
title: string;
handleSubMenu: (itemLabel: string) => void;
onMenuItemClick: (url: string, event: React.MouseEvent<any>) => void;
}
const MenuNested: React.FC<MenuNestedProps> = props => {
const {
activeItem,
ariaLabel,
closeSubMenu,
icon,
menuItem,
onMenuItemClick,
title
} = props;
const classes = useStyles(props);
const menuItems = menuItem.children;
const { isDark } = useTheme();
const closeMenu = (menuItemUrl, event) => {
onMenuItemClick(menuItemUrl, event);
closeSubMenu({
isActive: false,
label: null
});
event.stopPropagation();
event.preventDefault();
};
return (
<>
<div
className={classNames(classes.menuListNested, {
[classes.menuListNestedOpen]:
activeItem.label === ariaLabel && activeItem.isActive
})}
>
<Typography
className={classNames(classes.subHeader, {
[classes.subHeaderDark]: isDark
})}
variant="h5"
>
<Hidden mdUp>
<SVG
className={classNames(classes.menuListNestedIcon, {
[classes.menuListNestedIconDark]: isDark
})}
src={icon}
/>
</Hidden>
<div className={classes.subHeaderTitle}>{title}</div>
<Hidden mdUp>
<div
className={classNames(classes.menuListNestedClose, {
[classes.menuListNestedCloseDark]: isDark
})}
data-test={ariaLabel}
onClick={() =>
closeSubMenu({
isActive: false,
label: null
})
}
>
<SVG src={menuArrowIcon} />
</div>
</Hidden>
</Typography>
{menuItems.map(item => (
<a
className={classNames(classes.menuListNestedItem)}
href={createHref(item.url)}
data-test={ariaLabel}
onClick={event => closeMenu(item.url, event)}
key={item.label}
>
<Typography aria-label={item.ariaLabel}>{item.label}</Typography>
</a>
))}
</div>
</>
);
};
MenuNested.displayName = "MenuNested";
export default MenuNested;

104
src/components/AppLayout/menuStructure.ts
View file

@ -1,11 +1,19 @@
import appsIcon from "@assets/images/menu-apps-icon.svg";
import catalogIcon from "@assets/images/menu-catalog-icon.svg";
import configurationIcon from "@assets/images/menu-configure-icon.svg";
import customerIcon from "@assets/images/menu-customers-icon.svg";
import discountsIcon from "@assets/images/menu-discounts-icon.svg";
import homeIcon from "@assets/images/menu-home-icon.svg";
import ordersIcon from "@assets/images/menu-orders-icon.svg";
import translationIcon from "@assets/images/menu-translation-icon.svg";
import {
configurationMenuUrl,
createConfigurationMenu
} from "@saleor/configuration";
import { MenuItem } from "@saleor/configuration/ConfigurationPage";
import { User } from "@saleor/fragments/types/User";
import { commonMessages, sectionNames } from "@saleor/intl";
import { SidebarMenuItem } from "@saleor/macaw-ui";
import { IntlShape } from "react-intl";
import { appsListPath } from "../../apps/urls";
@ -18,23 +26,20 @@ import { productListUrl } from "../../products/urls";
import { languageListUrl } from "../../translations/urls";
import { PermissionEnum } from "../../types/globalTypes";
export interface IMenuItem {
ariaLabel: string;
children?: IMenuItem[];
icon?: any;
label: string;
permission?: PermissionEnum;
testingContextId: string;
url?: string;
interface FilterableMenuItem extends Omit<SidebarMenuItem, "children"> {
children?: FilterableMenuItem[];
permissions?: PermissionEnum[];
}
function createMenuStructure(intl: IntlShape): IMenuItem[] {
return [
function createMenuStructure(intl: IntlShape, user: User): SidebarMenuItem[] {
const configurationMenu = createConfigurationMenu(intl);
const menuItems: FilterableMenuItem[] = [
{
ariaLabel: "home",
icon: homeIcon,
iconSrc: homeIcon,
label: intl.formatMessage(sectionNames.home),
testingContextId: "home",
id: "home",
url: "/"
},
{
@ -43,26 +48,26 @@ function createMenuStructure(intl: IntlShape): IMenuItem[] {
{
ariaLabel: "products",
label: intl.formatMessage(sectionNames.products),
testingContextId: "products",
id: "products",
url: productListUrl()
},
{
ariaLabel: "categories",
label: intl.formatMessage(sectionNames.categories),
testingContextId: "categories",
id: "categories",
url: categoryListUrl()
},
{
ariaLabel: "collections",
label: intl.formatMessage(sectionNames.collections),
testingContextId: "collections",
id: "collections",
url: collectionListUrl()
}
],
icon: catalogIcon,
iconSrc: catalogIcon,
label: intl.formatMessage(commonMessages.catalog),
permission: PermissionEnum.MANAGE_PRODUCTS,
testingContextId: "catalogue"
permissions: [PermissionEnum.MANAGE_PRODUCTS],
id: "catalogue"
},
{
ariaLabel: "orders",
@ -70,29 +75,29 @@ function createMenuStructure(intl: IntlShape): IMenuItem[] {
{
ariaLabel: "orders",
label: intl.formatMessage(sectionNames.orders),
permission: PermissionEnum.MANAGE_ORDERS,
testingContextId: "orders",
permissions: [PermissionEnum.MANAGE_ORDERS],
id: "orders",
url: orderListUrl()
},
{
ariaLabel: "order drafts",
label: intl.formatMessage(commonMessages.drafts),
permission: PermissionEnum.MANAGE_ORDERS,
testingContextId: "order drafts",
permissions: [PermissionEnum.MANAGE_ORDERS],
id: "order drafts",
url: orderDraftListUrl()
}
],
icon: ordersIcon,
iconSrc: ordersIcon,
label: intl.formatMessage(sectionNames.orders),
permission: PermissionEnum.MANAGE_ORDERS,
testingContextId: "orders"
permissions: [PermissionEnum.MANAGE_ORDERS],
id: "orders"
},
{
ariaLabel: "customers",
icon: customerIcon,
iconSrc: customerIcon,
label: intl.formatMessage(sectionNames.customers),
permission: PermissionEnum.MANAGE_USERS,
testingContextId: "customers",
permissions: [PermissionEnum.MANAGE_USERS],
id: "customers",
url: customerListUrl()
},
@ -102,38 +107,59 @@ function createMenuStructure(intl: IntlShape): IMenuItem[] {
{
ariaLabel: "sales",
label: intl.formatMessage(sectionNames.sales),
testingContextId: "sales",
id: "sales",
url: saleListUrl()
},
{
ariaLabel: "vouchers",
label: intl.formatMessage(sectionNames.vouchers),
testingContextId: "vouchers",
id: "vouchers",
url: voucherListUrl()
}
],
icon: discountsIcon,
iconSrc: discountsIcon,
label: intl.formatMessage(commonMessages.discounts),
permission: PermissionEnum.MANAGE_DISCOUNTS,
testingContextId: "discounts"
permissions: [PermissionEnum.MANAGE_DISCOUNTS],
id: "discounts"
},
{
ariaLabel: "apps",
icon: appsIcon,
iconSrc: appsIcon,
label: intl.formatMessage(sectionNames.apps),
permission: PermissionEnum.MANAGE_APPS,
testingContextId: "apps",
permissions: [PermissionEnum.MANAGE_APPS],
id: "apps",
url: appsListPath
},
{
ariaLabel: "translations",
icon: translationIcon,
iconSrc: translationIcon,
label: intl.formatMessage(sectionNames.translations),
permission: PermissionEnum.MANAGE_TRANSLATIONS,
testingContextId: "translations",
permissions: [PermissionEnum.MANAGE_TRANSLATIONS],
id: "translations",
url: languageListUrl
},
{
ariaLabel: "configure",
iconSrc: configurationIcon,
label: intl.formatMessage(sectionNames.configuration),
permissions: configurationMenu
.reduce(
(sections, section) => [...sections, ...section.menuItems],
[] as MenuItem[]
)
.map(section => section.permission),
id: "configure",
url: configurationMenuUrl
}
];
return menuItems.filter(
menuItem =>
!menuItem.permissions ||
(user?.userPermissions || []).some(permission =>
menuItem.permissions.includes(permission.code)
)
);
}
export default createMenuStructure;

5
src/components/SideBar/utils.ts → src/components/AppLayout/utils.ts
View file

@ -1,9 +1,8 @@
import { SidebarMenuItem } from "@saleor/macaw-ui";
import { orderDraftListUrl, orderListUrl } from "@saleor/orders/urls";
import { matchPath } from "react-router";
import { IMenuItem } from "../AppLayout/menuStructure";
export function isMenuActive(location: string, menuItem: IMenuItem) {
export function isMenuActive(location: string, menuItem: SidebarMenuItem) {
if (menuItem.children) {
return menuItem.children.reduce(
(acc, subMenuItem) => acc || isMenuActive(location, subMenuItem),

2
src/components/AssignAttributeDialog/AssignAttributeDialog.tsx
View file

@ -25,8 +25,8 @@ import useModalDialogErrors from "@saleor/hooks/useModalDialogErrors";
import useModalDialogOpen from "@saleor/hooks/useModalDialogOpen";
import useSearchQuery from "@saleor/hooks/useSearchQuery";
import { buttonMessages } from "@saleor/intl";
import { makeStyles } from "@saleor/macaw-ui";
import { maybe, renderCollection } from "@saleor/misc";
import { makeStyles } from "@saleor/theme";
import { FetchMoreProps } from "@saleor/types";
import classNames from "classnames";
import React from "react";

6
src/components/AssignContainerDialog/AssignContainerDialog.tsx
View file

@ -13,17 +13,15 @@ import {
import ResponsiveTable from "@saleor/components/ResponsiveTable";
import useSearchQuery from "@saleor/hooks/useSearchQuery";
import { buttonMessages } from "@saleor/intl";
import { makeStyles } from "@saleor/macaw-ui";
import useScrollableDialogStyle from "@saleor/styles/useScrollableDialogStyle";
import { makeStyles } from "@saleor/theme";
import { FetchMoreProps, Node } from "@saleor/types";
import React from "react";
import InfiniteScroll from "react-infinite-scroll-component";
import { FormattedMessage } from "react-intl";
import Checkbox from "../Checkbox";
import ConfirmButton, {
ConfirmButtonTransitionState
} from "../ConfirmButton/ConfirmButton";
import ConfirmButton, { ConfirmButtonTransitionState } from "../ConfirmButton";
export interface FormData {
containers: string[];

2
src/components/AssignProductDialog/AssignProductDialog.tsx
View file

@ -17,10 +17,10 @@ import ResponsiveTable from "@saleor/components/ResponsiveTable";
import TableCellAvatar from "@saleor/components/TableCellAvatar";
import useSearchQuery from "@saleor/hooks/useSearchQuery";
import { buttonMessages } from "@saleor/intl";
import { makeStyles } from "@saleor/macaw-ui";
import { maybe } from "@saleor/misc";
import { SearchProducts_search_edges_node } from "@saleor/searches/types/SearchProducts";
import useScrollableDialogStyle from "@saleor/styles/useScrollableDialogStyle";
import { makeStyles } from "@saleor/theme";
import { FetchMoreProps } from "@saleor/types";
import React from "react";
import InfiniteScroll from "react-infinite-scroll-component";

4
src/components/Attributes/Attributes.tsx
View file

@ -7,7 +7,7 @@ import { AttributeValueFragment } from "@saleor/fragments/types/AttributeValueFr
import { PageErrorWithAttributesFragment } from "@saleor/fragments/types/PageErrorWithAttributesFragment";
import { ProductErrorWithAttributesFragment } from "@saleor/fragments/types/ProductErrorWithAttributesFragment";
import { FormsetAtomicData } from "@saleor/hooks/useFormset";
import { makeStyles } from "@saleor/theme";
import { makeStyles } from "@saleor/macaw-ui";
import { FetchMoreProps } from "@saleor/types";
import {
AttributeEntityTypeEnum,
@ -95,7 +95,7 @@ const useStyles = makeStyles(
uploadFileContent: {
color: theme.palette.primary.main,
float: "right",
fontSize: "1rem"
fontSize: theme.typography.body1.fontSize
}
}),
{ name: "Attributes" }

2
src/components/Attributes/BasicAttributeRow.tsx
View file

@ -1,6 +1,6 @@
import { Typography } from "@material-ui/core";
import Grid from "@saleor/components/Grid";
import { makeStyles } from "@saleor/theme";
import { makeStyles } from "@saleor/macaw-ui";
import React from "react";
const useStyles = makeStyles(

2
src/components/Attributes/ExtendedAttributeRow.tsx
View file

@ -1,6 +1,6 @@
import { Button, Typography } from "@material-ui/core";
import Grid from "@saleor/components/Grid";
import { makeStyles } from "@saleor/theme";
import { makeStyles } from "@saleor/macaw-ui";
import React from "react";
const useStyles = makeStyles(

4
src/components/AutocompleteSelectMenu/AutocompleteSelectMenu.tsx
View file

@ -6,7 +6,7 @@ import {
} from "@material-ui/core";
import ArrowBack from "@material-ui/icons/ArrowBack";
import { buttonMessages } from "@saleor/intl";
import { makeStyles } from "@saleor/theme";
import { makeStyles } from "@saleor/macaw-ui";
import Downshift from "downshift";
import React from "react";
import { FormattedMessage } from "react-intl";
@ -48,7 +48,7 @@ const useStyles = makeStyles(
position: "relative"
},
menuBack: {
marginLeft: -theme.spacing(0.5),
marginLeft: theme.spacing(-0.5),
marginRight: theme.spacing(1)
},
paper: {

2
src/components/CardMenu/CardMenu.tsx
View file

@ -8,7 +8,7 @@ import {
Popper
} from "@material-ui/core";
import MoreVertIcon from "@material-ui/icons/MoreVert";
import { makeStyles } from "@saleor/theme";
import { makeStyles } from "@saleor/macaw-ui";
import React from "react";
const ITEM_HEIGHT = 48;

2
src/components/CardSpacer.tsx
View file

@ -1,4 +1,4 @@
import { makeStyles } from "@saleor/theme";
import { makeStyles } from "@saleor/macaw-ui";
import React from "react";
const useStyles = makeStyles(

4
src/components/CardTitle/CardTitle.tsx
View file

@ -1,5 +1,5 @@
import { Typography } from "@material-ui/core";
import { makeStyles } from "@saleor/theme";
import { makeStyles } from "@saleor/macaw-ui";
import classNames from "classnames";
import React from "react";
@ -28,7 +28,7 @@ const useStyles = makeStyles(
lineHeight: 1
},
toolbar: {
marginRight: -theme.spacing(1)
marginRight: theme.spacing(-1)
}
}),
{ name: "CardTitle" }

2
src/components/ChannelsAvailability/styles.ts
View file

@ -1,4 +1,4 @@
import { makeStyles } from "@saleor/theme";
import { makeStyles } from "@saleor/macaw-ui";
export const useStyles = makeStyles(
theme => ({

2
src/components/ChannelsAvailabilityCard/Channel/ChannelAvailabilityItemWrapper.tsx
View file

@ -5,7 +5,7 @@ import {
} from "@material-ui/core";
import { ChannelData } from "@saleor/channels/utils";
import IconChevronDown from "@saleor/icons/ChevronDown";
import { makeStyles } from "@saleor/theme";
import { makeStyles } from "@saleor/macaw-ui";
import React from "react";
import { Messages } from "../types";

2
src/components/ChannelsAvailabilityCard/styles.ts
View file

@ -56,7 +56,7 @@ export const useStyles = makeStyles(
hr: {
left: theme.spacing(-3),
position: "relative",
width: `calc(100% + ${theme.spacing(6)}px)`
width: `calc(100% + ${theme.spacing(6)})`
},
label: {
lineHeight: 1.2,

2
src/components/ChannelsAvailabilityContent/styles.ts
View file

@ -1,4 +1,4 @@
import { makeStyles } from "@saleor/theme";
import { makeStyles } from "@saleor/macaw-ui";
export const useStyles = makeStyles(
theme => ({

2
src/components/ChannelsAvailabilityDialogChannelsList/ChannelsAvailabilityDialogChannelsList.tsx
View file

@ -2,7 +2,7 @@ import { Typography } from "@material-ui/core";
import { Channel } from "@saleor/channels/utils";
import { ControlledCheckbox } from "@saleor/components/ControlledCheckbox";
import Hr from "@saleor/components/Hr";
import { makeStyles } from "@saleor/theme";
import { makeStyles } from "@saleor/macaw-ui";
import React from "react";
export const useStyles = makeStyles(

2
src/components/ChannelsAvailabilityDialogWrapper/ChannelsAvailabilityDialogWrapper.tsx
View file

@ -1,8 +1,8 @@
import { TextField, Typography } from "@material-ui/core";
import { ControlledCheckbox } from "@saleor/components/ControlledCheckbox";
import Hr from "@saleor/components/Hr";
import { makeStyles } from "@saleor/macaw-ui";
import Label from "@saleor/orders/components/OrderHistory/Label";
import { makeStyles } from "@saleor/theme";
import React from "react";
import { useIntl } from "react-intl";
import { defineMessages, FormattedMessage } from "react-intl";

2
src/components/ChannelsAvailabilityDropdown/styles.ts
View file

@ -1,4 +1,4 @@
import { makeStyles } from "@saleor/theme";
import { makeStyles } from "@saleor/macaw-ui";
export const useStyles = makeStyles(
theme => ({

2
src/components/Checkbox/Checkbox.tsx
View file

@ -2,7 +2,7 @@ import MuiCheckbox, {
CheckboxProps as MuiCheckboxProps
} from "@material-ui/core/Checkbox";
import FormHelperText from "@material-ui/core/FormHelperText";
import { makeStyles } from "@saleor/theme";
import { makeStyles } from "@saleor/macaw-ui";
import React from "react";
const useStyles = makeStyles(

2
src/components/Chip/Chip.tsx
View file

@ -1,7 +1,7 @@
import { Typography } from "@material-ui/core";
import { fade } from "@material-ui/core/styles/colorManipulator";
import CloseIcon from "@material-ui/icons/Close";
import { makeStyles } from "@saleor/theme";
import { makeStyles } from "@saleor/macaw-ui";
import classNames from "classnames";
import React from "react";

2
src/components/ColumnPicker/ColumnPicker.tsx
View file

@ -1,7 +1,7 @@
import { ClickAwayListener, Grow, Popper } from "@material-ui/core";
import { fade } from "@material-ui/core/styles/colorManipulator";
import useStateFromProps from "@saleor/hooks/useStateFromProps";
import { makeStyles } from "@saleor/theme";
import { makeStyles } from "@saleor/macaw-ui";
import { toggle } from "@saleor/utils/lists";
import React from "react";

2
src/components/ColumnPicker/ColumnPickerButton.tsx
View file

@ -1,7 +1,7 @@
import { Button } from "@material-ui/core";
import { fade } from "@material-ui/core/styles/colorManipulator";
import ArrowDropDownIcon from "@material-ui/icons/ArrowDropDown";
import { makeStyles } from "@saleor/theme";
import { makeStyles } from "@saleor/macaw-ui";
import classNames from "classnames";
import React from "react";
import { FormattedMessage } from "react-intl";

2
src/components/ColumnPicker/ColumnPickerContent.tsx
View file

@ -7,7 +7,7 @@ import {
} from "@material-ui/core";
import useElementScroll from "@saleor/hooks/useElementScroll";
import { buttonMessages } from "@saleor/intl";
import { makeStyles } from "@saleor/theme";
import { makeStyles } from "@saleor/macaw-ui";
import { FetchMoreProps } from "@saleor/types";
import { isSelected } from "@saleor/utils/lists";
import classNames from "classnames";

2
src/components/CompanyAddressInput/CompanyAddressForm.tsx
View file

@ -9,7 +9,7 @@ import { AccountErrorFragment } from "@saleor/fragments/types/AccountErrorFragme
import { ShopErrorFragment } from "@saleor/fragments/types/ShopErrorFragment";
import { WarehouseErrorFragment } from "@saleor/fragments/types/WarehouseErrorFragment";
import { ChangeEvent } from "@saleor/hooks/useForm";
import { makeStyles } from "@saleor/theme";
import { makeStyles } from "@saleor/macaw-ui";
import { getFormErrors } from "@saleor/utils/errors";
import getAccountErrorMessage from "@saleor/utils/errors/account";
import getShopErrorMessage from "@saleor/utils/errors/shop";

2
src/components/CompanyAddressInput/CompanyAddressInput.tsx
View file

@ -1,5 +1,5 @@
import { Card, CardContent } from "@material-ui/core";
import { makeStyles } from "@saleor/theme";
import { makeStyles } from "@saleor/macaw-ui";
import classNames from "classnames";
import React from "react";

34
src/components/ConfirmButton.tsx Normal file
View file

@ -0,0 +1,34 @@
import { buttonMessages, commonMessages } from "@saleor/intl";
import {
ConfirmButton as MacawConfirmButton,
ConfirmButtonLabels,
ConfirmButtonProps as MacawConfirmButtonProps
} from "@saleor/macaw-ui";
import React from "react";
import { useIntl } from "react-intl";
export { ConfirmButtonTransitionState } from "@saleor/macaw-ui";
export interface ConfirmButtonProps
extends Omit<MacawConfirmButtonProps, "labels"> {
labels?: Partial<ConfirmButtonLabels>;
}
export const ConfirmButton: React.FC<ConfirmButtonProps> = ({
labels = {},
...rest
}) => {
const intl = useIntl();
const defaultLabels: ConfirmButtonLabels = {
confirm: intl.formatMessage(buttonMessages.save),
error: intl.formatMessage(commonMessages.error)
};
const componentLabels: ConfirmButtonLabels = {
...defaultLabels,
...labels
};
return <MacawConfirmButton labels={componentLabels} {...rest} />;
};
ConfirmButton.displayName = "ConfirmButton";
export default ConfirmButton;

188
src/components/ConfirmButton/ConfirmButton.tsx
View file

@ -1,188 +0,0 @@
import { Button, CircularProgress } from "@material-ui/core";
import { ButtonProps } from "@material-ui/core/Button";
import CheckIcon from "@material-ui/icons/Check";
import { DEFAULT_NOTIFICATION_SHOW_TIME } from "@saleor/config";
import { buttonMessages } from "@saleor/intl";
import {
createStyles,
SaleorTheme,
WithStyles,
withStyles
} from "@saleor/theme";
import classNames from "classnames";
import React from "react";
import { FormattedMessage } from "react-intl";
export type ConfirmButtonTransitionState =
| "loading"
| "success"
| "error"
| "default";
const styles = (theme: SaleorTheme) =>
createStyles({
error: {
"&:hover": {
backgroundColor: theme.palette.error.main
},
backgroundColor: theme.palette.error.main,
color: theme.palette.error.contrastText
},
icon: {
marginLeft: "0 !important",
position: "absolute",
transitionDuration: theme.transitions.duration.standard + "ms"
},
invisible: {
opacity: 0
},
label: {
alignItems: "center",
display: "flex",
transitionDuration: theme.transitions.duration.standard + "ms"
},
progress: {
"& svg": {
color: theme.palette.common.white,
margin: 0
},
position: "absolute",
transitionDuration: theme.transitions.duration.standard + "ms"
},
success: {
"&:hover": {
backgroundColor: theme.palette.primary.main
},
backgroundColor: theme.palette.primary.main,
color: theme.palette.primary.contrastText
}
});
export interface ConfirmButtonProps
extends Omit<ButtonProps, "classes">,
WithStyles<typeof styles> {
transitionState: ConfirmButtonTransitionState;
onTransitionToDefault?: () => void;
}
interface ConfirmButtonState {
displayCompletedActionState: boolean;
}
const ConfirmButton = withStyles(styles, { name: "ConfirmButton" })(
class ConfirmButtonComponent extends React.Component<
ConfirmButtonProps &
WithStyles<
"error" | "icon" | "invisible" | "label" | "progress" | "success"
>,
ConfirmButtonState
> {
state: ConfirmButtonState = {
displayCompletedActionState: false
};
timeout = null;
static getDerivedStateFromProps(
nextProps: ConfirmButtonProps,
prevState: ConfirmButtonState
): ConfirmButtonState {
if (nextProps.transitionState === "loading") {
return {
displayCompletedActionState: true
};
}
return prevState;
}
componentDidUpdate(prevProps: ConfirmButtonProps) {
const { transitionState, onTransitionToDefault } = this.props;
if (prevProps.transitionState !== transitionState) {
if (
(["error", "success"] as ConfirmButtonTransitionState[]).includes(
transitionState
)
) {
this.timeout = setTimeout(() => {
this.setState({
displayCompletedActionState: false
});
if (onTransitionToDefault) {
onTransitionToDefault();
}
}, DEFAULT_NOTIFICATION_SHOW_TIME);
} else if (transitionState === "loading") {
clearTimeout(this.timeout);
}
}
}
componentWillUnmount() {
clearTimeout(this.timeout);
}
render() {
const {
children,
classes,
className,
disabled,
transitionState,
onClick,
onTransitionToDefault: _,
...props
} = this.props;
const { displayCompletedActionState } = this.state;
return (
<Button
variant="contained"
onClick={transitionState === "loading" ? undefined : onClick}
color="primary"
className={classNames({
[classes.error]:
transitionState === "error" && displayCompletedActionState,
[classes.success]:
transitionState === "success" && displayCompletedActionState,
[className]: true
})}
disabled={!displayCompletedActionState && disabled}
{...props}
>
<CircularProgress
size={24}
color="inherit"
className={classNames({
[classes.progress]: true,
[classes.invisible]: transitionState !== "loading"
})}
/>
<CheckIcon
className={classNames({
[classes.icon]: true,
[classes.invisible]: !(
transitionState === "success" && displayCompletedActionState
)
})}
/>
<span
className={classNames({
[classes.label]: true,
[classes.invisible]:
(transitionState === "loading" ||
transitionState === "success") &&
displayCompletedActionState
})}
>
{transitionState === "error" && displayCompletedActionState ? (
<FormattedMessage defaultMessage="Error" description="button" />
) : (
children || <FormattedMessage {...buttonMessages.confirm} />
)}
</span>
</Button>
);
}
}
);
ConfirmButton.displayName = "ConfirmButton";
export default ConfirmButton;

2
src/components/ConfirmButton/index.ts
View file

@ -1,2 +0,0 @@
export { default } from "./ConfirmButton";
export * from "./ConfirmButton";

2
src/components/Container.tsx
View file

@ -1,4 +1,4 @@
import { makeStyles } from "@saleor/theme";
import { makeStyles } from "@saleor/macaw-ui";
import classNames from "classnames";
import React from "react";

2
src/components/ControlledSwitch.tsx
View file

@ -1,5 +1,5 @@
import { FormControlLabel, Switch } from "@material-ui/core";
import { makeStyles } from "@saleor/theme";
import { makeStyles } from "@saleor/macaw-ui";
import React from "react";
const useStyles = makeStyles(

Some files were not shown because too many files have changed in this diff Show more