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

Replace classnames with clsx (#2759)

Browse source 
* Replace classnames with clsx

* Add clsx to package.json

* Remove classnames

* Remove classnames types

* Restrict classnames in eslint rules
This commit is contained in:
Michał Droń 2022-12-02 11:45:19 +01:00 committed by GitHub
parent d2496679c0
commit 347e32ef4a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
91 changed files with 216 additions and 261 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
.eslintrc.json
View file

@ -190,7 +190,7 @@
"no-restricted-imports": [
"error",
{
"paths": ["lodash", "@material-ui/icons/Delete"]
"paths": ["lodash", "@material-ui/icons/Delete", "classnames"]
}
]
},

27
package-lock.json generated
View file

@ -31,7 +31,7 @@
"@uiw/react-color-material": "^0.1.0",
"@uiw/react-color-saturation": "0.0.34",
"apollo-upload-client": "^17.0.0",
"classnames": "^2.2.6",
"clsx": "^1.2.1",
"color-convert": "^2.0.1",
"crc-32": "^1.2.0",
"currency-codes": "^2.1.0",
@ -113,7 +113,6 @@
"@testing-library/react": "^12.1.5",
"@testing-library/react-hooks": "^8.0.1",
"@types/apollo-upload-client": "^17.0.0",
"@types/classnames": "^2.2.9",
"@types/color-convert": "^2.0.0",
"@types/enzyme": "^3.10.8",
"@types/fuzzaldrin": "^2.1.2",
@ -8247,12 +8246,6 @@
"@types/node": "*"
}
},
"node_modules/@types/classnames": {
"version": "2.2.11",
"resolved": "https://registry.npmjs.org/@types/classnames/-/classnames-2.2.11.tgz",
"integrity": "sha512-2koNhpWm3DgWRp5tpkiJ8JGc1xTn2q0l+jUNUE7oMKXUf5NpI9AIdC4kbjGNFBdHtcxBD18LAksoudAVhFKCjw==",
"dev": true
},
"node_modules/@types/color-convert": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/@types/color-convert/-/color-convert-2.0.0.tgz",
@ -13863,9 +13856,9 @@
}
},
"node_modules/clsx": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/clsx/-/clsx-1.1.1.tgz",
"integrity": "sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA==",
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz",
"integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==",
"engines": {
"node": ">=6"
}
@ -45989,12 +45982,6 @@
"@types/node": "*"
}
},
"@types/classnames": {
"version": "2.2.11",
"resolved": "https://registry.npmjs.org/@types/classnames/-/classnames-2.2.11.tgz",
"integrity": "sha512-2koNhpWm3DgWRp5tpkiJ8JGc1xTn2q0l+jUNUE7oMKXUf5NpI9AIdC4kbjGNFBdHtcxBD18LAksoudAVhFKCjw==",
"dev": true
},
"@types/color-convert": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/@types/color-convert/-/color-convert-2.0.0.tgz",
@ -50701,9 +50688,9 @@
}
},
"clsx": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/clsx/-/clsx-1.1.1.tgz",
"integrity": "sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA=="
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz",
"integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg=="
},
"co": {
"version": "4.6.0",

3
package.json
View file

@ -38,7 +38,7 @@
"@uiw/react-color-material": "^0.1.0",
"@uiw/react-color-saturation": "0.0.34",
"apollo-upload-client": "^17.0.0",
"classnames": "^2.2.6",
"clsx": "^1.2.1",
"color-convert": "^2.0.1",
"crc-32": "^1.2.0",
"currency-codes": "^2.1.0",
@ -120,7 +120,6 @@
"@testing-library/react": "^12.1.5",
"@testing-library/react-hooks": "^8.0.1",
"@types/apollo-upload-client": "^17.0.0",
"@types/classnames": "^2.2.9",
"@types/color-convert": "^2.0.0",
"@types/enzyme": "^3.10.8",
"@types/fuzzaldrin": "^2.1.2",

7
src/apps/components/AppInstallPage/AppInstallPage.tsx
View file

@ -10,7 +10,7 @@ import Skeleton from "@saleor/components/Skeleton";
import { AppFetchMutation, AppInstallMutation } from "@saleor/graphql";
import { SubmitPromise } from "@saleor/hooks/useForm";
import { buttonMessages } from "@saleor/intl";
import classNames from "classnames";
import clsx from "clsx";
import React from "react";
import { FormattedMessage, useIntl } from "react-intl";
@ -60,10 +60,7 @@ export const AppInstallPage: React.FC<AppInstallPageProps> = ({
) : (
<div className={classes.installAppContainer}>
<div
className={classNames(
classes.installIcon,
classes.installSaleorIcon,
)}
className={clsx(classes.installIcon, classes.installSaleorIcon)}
>
<img src={saleorDarkLogoSmall} alt="" />
</div>

7
src/apps/components/AppPage/AppPage.tsx
View file

@ -8,7 +8,7 @@ import Grid from "@saleor/components/Grid";
import Hr from "@saleor/components/Hr";
import { AppQuery } from "@saleor/graphql";
import { sectionNames } from "@saleor/intl";
import classNames from "classnames";
import clsx from "clsx";
import React from "react";
import { FormattedMessage, useIntl } from "react-intl";
@ -44,10 +44,7 @@ export const AppPage: React.FC<AppPageProps> = ({
<div className={classes.breadcrumbContainer}>
<div className={classes.breadcrumbs}>
<Typography
className={classNames(
classes.breadcrumb,
classes.breadcrumbDisabled,
)}
className={clsx(classes.breadcrumb, classes.breadcrumbDisabled)}
variant="h5"
>
{data?.name}

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

@ -19,7 +19,7 @@ import {
TooltipMountWrapper,
} from "@saleor/macaw-ui";
import { renderCollection } from "@saleor/misc";
import classNames from "classnames";
import clsx from "clsx";
import React from "react";
import { FormattedMessage, useIntl } from "react-intl";
@ -58,10 +58,7 @@ const AppsInProgress: React.FC<AppsInProgressProps> = ({
</TableCell>
{status === JobStatusEnum.PENDING && (
<TableCell
className={classNames(
classes.colAction,
classes.colInstallAction,
)}
className={clsx(classes.colAction, classes.colInstallAction)}
>
<Typography variant="body2" className={classes.text}>
<FormattedMessage
@ -77,10 +74,7 @@ const AppsInProgress: React.FC<AppsInProgressProps> = ({
)}
{status === JobStatusEnum.FAILED && (
<TableCell
className={classNames(
classes.colAction,
classes.colInstallAction,
)}
className={clsx(classes.colAction, classes.colInstallAction)}
>
<Typography variant="body2" className={classes.error}>
<FormattedMessage

4
src/channels/components/AssignmentList/SortableHandle.tsx
View file

@ -1,5 +1,5 @@
import { DragIcon, makeStyles } from "@saleor/macaw-ui";
import classNames from "classnames";
import clsx from "clsx";
import React from "react";
import { SortableHandle as SortableHandleHoc } from "react-sortable-hoc";
@ -22,7 +22,7 @@ const SortableHandle = SortableHandleHoc((props: SortableHandleProps) => {
return (
<DragIcon
className={classNames(classes.drag, className)}
className={clsx(classes.drag, className)}
tabIndex={0}
{...restProps}
/>

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

@ -2,7 +2,7 @@ import { Typography } from "@material-ui/core";
import AddIcon from "@material-ui/icons/Add";
import RemoveIcon from "@material-ui/icons/Remove";
import { IconButton, makeStyles } from "@saleor/macaw-ui";
import classNames from "classnames";
import clsx from "clsx";
import React from "react";
import Hr from "../Hr";
@ -54,7 +54,7 @@ const Accordion: React.FC<AccordionProps> = ({
const [expanded, setExpanded] = React.useState(!!initialExpand);
return (
<div className={classNames(classes.root, className)} {...props}>
<div className={clsx(classes.root, className)} {...props}>
<div className={classes.title}>
<Typography className={classes.titleText}>{title}</Typography>
<div className={classes.expandButton}>

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

@ -11,7 +11,7 @@ import {
useTheme,
} from "@saleor/macaw-ui";
import { isDarkTheme } from "@saleor/misc";
import classNames from "classnames";
import clsx from "clsx";
import React from "react";
import { useIntl } from "react-intl";
import useRouter from "use-react-router";
@ -212,7 +212,7 @@ const AppLayout: React.FC<AppLayoutProps> = ({
</Container>
</div>
<main
className={classNames(classes.view, {
className={clsx(classes.view, {
[classes.viewMargins]: !fullSize,
})}
>

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

@ -24,7 +24,7 @@ import useSearchQuery from "@saleor/hooks/useSearchQuery";
import { ConfirmButtonTransitionState, makeStyles } from "@saleor/macaw-ui";
import { maybe, renderCollection } from "@saleor/misc";
import { FetchMoreProps } from "@saleor/types";
import classNames from "classnames";
import clsx from "clsx";
import React from "react";
import InfiniteScroll from "react-infinite-scroll-component";
import { FormattedMessage, useIntl } from "react-intl";
@ -212,7 +212,7 @@ const AssignAttributeDialog: React.FC<AssignAttributeDialogProps> = ({
</DialogContent>
)}
<DialogActions
className={classNames(classes.actions, {
className={clsx(classes.actions, {
[classes.dropShadow]: !isScrolledToBottom(anchor, position),
})}
>

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

@ -15,7 +15,7 @@ import { FormsetAtomicData } from "@saleor/hooks/useFormset";
import { ChevronIcon, IconButton, makeStyles } from "@saleor/macaw-ui";
import { FetchMoreProps } from "@saleor/types";
import { RichTextGetters } from "@saleor/utils/richText/useMultipleRichText";
import classNames from "classnames";
import clsx from "clsx";
import React from "react";
import { defineMessages, FormattedMessage, useIntl } from "react-intl";
@ -154,7 +154,7 @@ const Attributes: React.FC<AttributesProps> = ({
data-test-id="attributes-expand"
>
<ChevronIcon
className={classNames(classes.expansionBarButtonIcon, {
className={clsx(classes.expansionBarButtonIcon, {
[classes.rotate]: expanded,
})}
/>

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

@ -2,7 +2,7 @@ import { Typography } from "@material-ui/core";
import HelpOutline from "@material-ui/icons/HelpOutline";
import Grid from "@saleor/components/Grid";
import { Tooltip } from "@saleor/macaw-ui";
import classNames from "classnames";
import clsx from "clsx";
import React from "react";
import { useBasicAttributeStyles } from "./styles";
@ -38,7 +38,7 @@ const BasicAttributeRow: React.FC<BasicAttributeRowProps> = ({
</div>
<div
data-test-id="attribute-value"
className={classNames(classes.value, {
className={clsx(classes.value, {
[classes.flex]: flexValueContainer,
})}
>

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

@ -9,7 +9,7 @@ import {
Typography,
} from "@material-ui/core";
import { IconButtonProps, makeStyles, SettingsIcon } from "@saleor/macaw-ui";
import classNames from "classnames";
import clsx from "clsx";
import React, { useEffect, useRef, useState } from "react";
import { FormattedMessage } from "react-intl";
@ -180,7 +180,7 @@ const CardMenu: React.FC<CardMenuProps> = props => {
button
>
<div
className={classNames(className, {
className={clsx(className, {
[classes.loadingContent]: isWithLoading,
})}
>

4
src/components/ChannelsAvailabilityCard/Channel/ChannelAvailabilityItemContent.tsx
View file

@ -6,7 +6,7 @@ import RadioSwitchField from "@saleor/components/RadioSwitchField";
import useCurrentDate from "@saleor/hooks/useCurrentDate";
import useDateLocalize from "@saleor/hooks/useDateLocalize";
import { getFormErrors, getProductErrorMessage } from "@saleor/utils/errors";
import classNames from "classnames";
import clsx from "clsx";
import React, { useState } from "react";
import { useIntl } from "react-intl";
@ -244,7 +244,7 @@ const ChannelContent: React.FC<ChannelContentProps> = ({
disabled={disabled}
label={
<>
<p className={classNames(classes.label, classes.listingLabel)}>
<p className={clsx(classes.label, classes.listingLabel)}>
{intl.formatMessage(availabilityItemMessages.hideInListings)}
</p>
<span className={classes.secondLabel}>

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

@ -2,7 +2,7 @@ import { Typography } from "@material-ui/core";
import { alpha } from "@material-ui/core/styles";
import CloseIcon from "@material-ui/icons/Close";
import { makeStyles } from "@saleor/macaw-ui";
import classNames from "classnames";
import clsx from "clsx";
import React from "react";
export interface ChipProps {
@ -38,7 +38,7 @@ const Chip: React.FC<ChipProps> = props => {
const classes = useStyles(props);
return (
<div className={classNames(classes.root, className)}>
<div className={clsx(classes.root, className)}>
<Typography className={classes.label} variant="caption">
{label}
{onClose && (

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

@ -2,7 +2,7 @@ import { alpha } from "@material-ui/core/styles";
import ArrowDropDownIcon from "@material-ui/icons/ArrowDropDown";
import { Button } from "@saleor/components/Button";
import { makeStyles } from "@saleor/macaw-ui";
import classNames from "classnames";
import clsx from "clsx";
import React from "react";
import { FormattedMessage } from "react-intl";
@ -42,7 +42,7 @@ const ColumnPickerButton: React.FC<ColumnPickerButtonProps> = props => {
return (
<Button
className={classNames(classes.root, className, {
className={clsx(classes.root, className, {
[classes.rootActive]: active,
})}
onClick={onClick}
@ -54,7 +54,7 @@ const ColumnPickerButton: React.FC<ColumnPickerButtonProps> = props => {
description="select visible columns button"
/>
<ArrowDropDownIcon
className={classNames(classes.icon, {
className={clsx(classes.icon, {
[classes.rotate]: active,
})}
/>

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

@ -1,6 +1,6 @@
import { Card, CardContent } from "@material-ui/core";
import { makeStyles } from "@saleor/macaw-ui";
import classNames from "classnames";
import clsx from "clsx";
import React from "react";
import CardTitle from "../CardTitle";
@ -27,7 +27,7 @@ const CompanyAddressInput: React.FC<CompanyAddressInputProps> = props => {
const classes = useStyles(props);
return (
<Card className={classNames(classes.root, className)}>
<Card className={clsx(classes.root, className)}>
<CardTitle title={header} />
<CardContent>
<CompanyAddressForm {...formProps} />

4
src/components/Container.tsx
View file

@ -1,5 +1,5 @@
import { makeStyles } from "@saleor/macaw-ui";
import classNames from "classnames";
import clsx from "clsx";
import React from "react";
const useStyles = makeStyles(
@ -31,7 +31,7 @@ export const Container: React.FC<ContainerProps> = props => {
const classes = useStyles(props);
return <div className={classNames(classes.root, className)} {...rest} />;
return <div className={clsx(classes.root, className)} {...rest} />;
};
Container.displayName = "Container";
export default Container;

14
src/components/CountryList/CountryList.tsx
View file

@ -7,7 +7,7 @@ import Skeleton from "@saleor/components/Skeleton";
import TableRowLink from "@saleor/components/TableRowLink";
import { CountryFragment } from "@saleor/graphql";
import { DeleteIcon, IconButton, makeStyles } from "@saleor/macaw-ui";
import classNames from "classnames";
import clsx from "clsx";
import React from "react";
import { FormattedMessage } from "react-intl";
@ -110,9 +110,7 @@ const CountryList: React.FC<CountryListProps> = props => {
<ResponsiveTable>
<TableBody>
<TableRowLink className={classes.pointer} onClick={toggleCollapse}>
<TableCell
className={classNames(classes.wideColumn, classes.toLeft)}
>
<TableCell className={clsx(classes.wideColumn, classes.toLeft)}>
<FormattedMessage
id="62Ywh2"
defaultMessage="{number} Countries"
@ -122,13 +120,11 @@ const CountryList: React.FC<CountryListProps> = props => {
}}
/>
</TableCell>
<TableCell
className={classNames(classes.textRight, classes.iconCell)}
>
<TableCell className={clsx(classes.textRight, classes.iconCell)}>
<IconButton variant="secondary">
<ArrowDropDownIcon
data-test-id="countries-drop-down-icon"
className={classNames({
className={clsx({
[classes.rotate]: !isCollapsed,
})}
/>
@ -158,7 +154,7 @@ const CountryList: React.FC<CountryListProps> = props => {
)}
</TableCell>
<TableCell
className={classNames(classes.textRight, classes.iconCell)}
className={clsx(classes.textRight, classes.iconCell)}
>
<IconButton
data-test-id="delete-icon"

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

@ -1,6 +1,6 @@
import { Typography } from "@material-ui/core";
import { makeStyles } from "@saleor/macaw-ui";
import classNames from "classnames";
import clsx from "clsx";
import React from "react";
export interface Step<T> {
@ -60,7 +60,7 @@ function makeCreatorSteps<T extends string | number>() {
return (
<div
className={classNames(classes.tab, {
className={clsx(classes.tab, {
[classes.tabActive]: step.value === currentStep,
[classes.tabVisited]: visitedStep,
})}

10
src/components/Datagrid/Datagrid.tsx
View file

@ -10,7 +10,7 @@ import DataEditor, {
import { Card, CardContent, Typography } from "@material-ui/core";
import { usePreventHistoryBack } from "@saleor/hooks/usePreventHistoryBack";
import { MoreHorizontalIcon, useTheme } from "@saleor/macaw-ui";
import classNames from "classnames";
import clsx from "clsx";
import range from "lodash/range";
import throttle from "lodash/throttle";
import React from "react";
@ -268,12 +268,12 @@ export const Datagrid: React.FC<DatagridProps> = ({
}}
rightElement={
<div
className={classNames(classes.rowActionBar, {
className={clsx(classes.rowActionBar, {
[classes.rowActionBarScrolledToRight]: scrolledToRight,
})}
>
<div
className={classNames(classes.rowActionBarShadow, {
className={clsx(classes.rowActionBarShadow, {
[classes.rowActionBarShadowActive]: !scrolledToRight,
})}
/>
@ -297,7 +297,7 @@ export const Datagrid: React.FC<DatagridProps> = ({
</div>
{hasColumnGroups && (
<div
className={classNames(classes.rowAction, {
className={clsx(classes.rowAction, {
[classes.rowActionScrolledToRight]: scrolledToRight,
})}
/>
@ -306,7 +306,7 @@ export const Datagrid: React.FC<DatagridProps> = ({
.fill(0)
.map((_, index) => (
<div
className={classNames(classes.rowAction, {
className={clsx(classes.rowAction, {
[classes.rowActionSelected]: selection?.rows.hasIndex(
index,
),

4
src/components/Datagrid/Header.tsx
View file

@ -1,6 +1,6 @@
import FullScreenIcon from "@saleor/icons/FullScreenIcon";
import { Button, makeStyles, PlusSmallIcon } from "@saleor/macaw-ui";
import classNames from "classnames";
import clsx from "clsx";
import React, { FC, PropsWithChildren } from "react";
import CardTitle from "../CardTitle";
@ -46,7 +46,7 @@ const ButtonFullScreen: FC<PropsWithChildren<ButtonFullScreenProps>> = ({
onClick={onToggle}
>
<FullScreenIcon
className={classNames(classes.fullScreenIcon, {
className={clsx(classes.fullScreenIcon, {
[classes.fullScreenIconClose]: isOpen,
})}
/>

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

@ -8,7 +8,7 @@ import {
import { TextFieldProps } from "@material-ui/core/TextField";
import useForm from "@saleor/hooks/useForm";
import { makeStyles } from "@saleor/macaw-ui";
import classNames from "classnames";
import clsx from "clsx";
import React from "react";
const useStyles = makeStyles(
@ -77,7 +77,7 @@ export const EditableTableCell: React.FC<EditableTableCellProps> = props => {
const disable = () => setOpenStatus(false);
return (
<TableCell className={classNames(classes.container, className)}>
<TableCell className={clsx(classes.container, className)}>
{opened && <div className={classes.overlay} onClick={disable} />}
<Typography variant="caption" onClick={enable} className={classes.text}>
{value || defaultValue}

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

@ -1,6 +1,6 @@
import { Card, CardContent, Typography } from "@material-ui/core";
import { makeStyles } from "@saleor/macaw-ui";
import classNames from "classnames";
import clsx from "clsx";
import React from "react";
interface ErrorNoticeBarProps {
className?: string;
@ -23,7 +23,7 @@ const ErrorNoticeBar: React.FC<ErrorNoticeBarProps> = props => {
const classes = useStyles(props);
return (
<Card className={classNames(classes.root, className)}>
<Card className={clsx(classes.root, className)}>
<CardContent>
<Typography variant="body1">{message}</Typography>
</CardContent>

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

@ -1,6 +1,6 @@
import { Divider } from "@material-ui/core";
import { makeStyles } from "@saleor/macaw-ui";
import classNames from "classnames";
import clsx from "clsx";
import React from "react";
const useStyles = makeStyles(
@ -80,13 +80,13 @@ const ExtendedPageHeader: React.FC<ExtendedPageHeaderProps> = props => {
<>
<div
data-test-id={testId}
className={classNames(classes.root, className, {
className={clsx(classes.root, className, {
[classes.block]: !inline,
[classes.underline]: underline,
})}
>
<div className={classes.titleRow}>{title}</div>
<div className={classNames(classes.action, childrenWrapperClassName)}>
<div className={clsx(classes.action, childrenWrapperClassName)}>
{children}
</div>
</div>

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

@ -1,7 +1,7 @@
import { ClickAwayListener, Grow, Popper, Typography } from "@material-ui/core";
import { alpha } from "@material-ui/core/styles";
import { Button, makeStyles } from "@saleor/macaw-ui";
import classNames from "classnames";
import clsx from "clsx";
import React, { useState } from "react";
import { FormattedMessage } from "react-intl";
@ -128,7 +128,7 @@ const Filter: React.FC<FilterProps> = props => {
>
<div ref={anchor}>
<Button
className={classNames(classes.filterButton, {
className={clsx(classes.filterButton, {
[classes.addFilterButtonActive]:
isFilterMenuOpened || isFilterActive,
})}

4
src/components/Filter/FilterContent/FilterContentBody.tsx
View file

@ -7,7 +7,7 @@ import { useCommonStyles } from "@saleor/components/Filter/FilterContent/utils";
import { MultiAutocompleteChoiceType } from "@saleor/components/MultiAutocompleteSelectField";
import Skeleton from "@saleor/components/Skeleton";
import { makeStyles } from "@saleor/macaw-ui";
import classNames from "classnames";
import clsx from "clsx";
import React from "react";
import FilterAutocompleteField, {
@ -133,7 +133,7 @@ const FilterContentBody = <K extends string = string>({
{isFilterType(filter, FieldType.boolean) &&
filter.options.map(option => (
<div
className={classNames(classes.option, classes.optionRadio)}
className={clsx(classes.option, classes.optionRadio)}
key={option.value}
>
<FormControlLabel

4
src/components/Filter/FilterOptionField.tsx
View file

@ -1,7 +1,7 @@
import { FormControlLabel, Radio } from "@material-ui/core";
import { makeStyles } from "@saleor/macaw-ui";
import { toggle } from "@saleor/utils/lists";
import classNames from "classnames";
import clsx from "clsx";
import React from "react";
import Checkbox from "../Checkbox";
@ -44,7 +44,7 @@ const FilterOptionField: React.FC<FilterFieldBaseProps<
<div className={classes.root} {...rest}>
{filter.options.map(option => (
<div
className={classNames(classes.option, {
className={clsx(classes.option, {
[classes.optionRadio]: !filter.multiple,
})}
key={option.value}

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

@ -1,5 +1,5 @@
import { makeStyles } from "@saleor/macaw-ui";
import classNames from "classnames";
import clsx from "clsx";
import React from "react";
export type GridVariant = "default" | "inverted" | "uniform";
@ -46,7 +46,7 @@ export const Grid: React.FC<GridProps> = props => {
return (
<div
className={classNames(className, classes.root, {
className={clsx(className, classes.root, {
[classes.default]: variant === "default",
[classes.inverted]: variant === "inverted",
[classes.uniform]: variant === "uniform",

4
src/components/Hr.tsx
View file

@ -1,5 +1,5 @@
import { makeStyles } from "@saleor/macaw-ui";
import classNames from "classnames";
import clsx from "clsx";
import React from "react";
interface HrProps {
@ -25,7 +25,7 @@ export const Hr: React.FC<HrProps> = props => {
const classes = useStyles(props);
return <hr className={classNames(classes.root, className)} />;
return <hr className={clsx(classes.root, className)} />;
};
Hr.displayName = "Hr";
export default Hr;

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

@ -1,6 +1,6 @@
import { TableCell } from "@material-ui/core";
import { IconButton, ICONBUTTON_SIZE, makeStyles } from "@saleor/macaw-ui";
import classNames from "classnames";
import clsx from "clsx";
import React from "react";
import { stopPropagation } from "../../misc";
@ -30,7 +30,7 @@ const IconButtonTableCell: React.FC<IconButtonTableCellProps> = props => {
const classes = useStyles(props);
return (
<TableCell className={classNames(classes.root, className)}>
<TableCell className={clsx(classes.root, className)}>
<IconButton
variant="secondary"
color="primary"

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

@ -1,7 +1,7 @@
import { Typography } from "@material-ui/core";
import { alpha } from "@material-ui/core/styles";
import { ImageIcon, makeStyles } from "@saleor/macaw-ui";
import classNames from "classnames";
import clsx from "clsx";
import React from "react";
import { FormattedMessage } from "react-intl";
@ -78,14 +78,14 @@ export const ImageUpload: React.FC<ImageUploadProps> = props => {
<>
<div
{...getRootProps()}
className={classNames(className, classes.photosIconContainer, {
className={clsx(className, classes.photosIconContainer, {
[classes.backdrop]: isDragActive,
[isActiveClassName]: isDragActive,
})}
>
{!hideUploadIcon && (
<div
className={classNames(iconContainerClassName, {
className={clsx(iconContainerClassName, {
[iconContainerActiveClassName]: isDragActive,
})}
>

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

@ -1,4 +1,4 @@
import classNames from "classnames";
import clsx from "clsx";
import React from "react";
import { Link, LinkProps } from "react-router-dom";
@ -7,7 +7,7 @@ import { useStyles } from "./styles";
export const InternalLink: React.FC<LinkProps> = ({ className, ...props }) => {
const classes = useStyles();
return <Link className={classNames(classes.root, className)} {...props} />;
return <Link className={clsx(classes.root, className)} {...props} />;
};
export default InternalLink;

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

@ -11,7 +11,7 @@ import {
import ArrowDropDown from "@material-ui/icons/ArrowDropDown";
import { LanguageCodeEnum, LanguageFragment } from "@saleor/graphql";
import { makeStyles } from "@saleor/macaw-ui";
import classNames from "classnames";
import clsx from "clsx";
import React from "react";
import { FormattedMessage } from "react-intl";
import { Link } from "react-router-dom";
@ -71,7 +71,7 @@ const LanguageSwitch: React.FC<LanguageSwitchProps> = props => {
>
<Typography>{currentLanguage}</Typography>
<ArrowDropDown
className={classNames(classes.arrow, {
className={clsx(classes.arrow, {
[classes.rotate]: isExpanded,
})}
/>

4
src/components/Link.tsx
View file

@ -2,7 +2,7 @@ import { Typography } from "@material-ui/core";
import { TypographyProps } from "@material-ui/core/Typography";
import { makeStyles } from "@saleor/macaw-ui";
import { isExternalURL } from "@saleor/utils/urls";
import classNames from "classnames";
import clsx from "clsx";
import React from "react";
import { Link as RouterLink } from "react-router-dom";
@ -60,7 +60,7 @@ const Link: React.FC<LinkProps> = props => {
const opensNewTab = target === "_blank";
const commonLinkProps = {
className: classNames(className, {
className: clsx(className, {
[classes.root]: true,
[classes[color]]: true,
[classes.underline]: underline,

8
src/components/LinkChoice/LinkChoice.tsx
View file

@ -1,7 +1,7 @@
import { ClickAwayListener, MenuItem, Paper, Popper } from "@material-ui/core";
import { FormChange } from "@saleor/hooks/useForm";
import ArrowDropdown from "@saleor/icons/ArrowDropdown";
import classNames from "classnames";
import clsx from "clsx";
import { codes } from "keycode";
import React from "react";
@ -66,7 +66,7 @@ const LinkChoice: React.FC<LinkChoiceProps> = ({
return (
<span
className={classNames(classes.root, className)}
className={clsx(classes.root, className)}
ref={anchor}
onKeyDown={handleKeyPress}
tabIndex={0}
@ -74,7 +74,7 @@ const LinkChoice: React.FC<LinkChoiceProps> = ({
<Link onClick={() => setOpen(open => !open)}>
{current.label}
<ArrowDropdown
className={classNames(classes.arrow, {
className={clsx(classes.arrow, {
[classes.rotate]: open,
})}
color="primary"
@ -96,7 +96,7 @@ const LinkChoice: React.FC<LinkChoiceProps> = ({
<Paper className={classes.paper}>
{choices.map((choice, choiceIndex) => (
<MenuItem
className={classNames(classes.menuItem, {
className={clsx(classes.menuItem, {
[classes.highlighted]: highlightedIndex === choiceIndex,
})}
selected={choice.value === value}

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

@ -1,5 +1,5 @@
import { BaseListItemProps, ListItem, makeStyles } from "@saleor/macaw-ui";
import clsx from "classnames";
import clsx from "clsx";
import React from "react";
import Link from "../Link";

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

@ -1,7 +1,7 @@
import { CircularProgress } from "@material-ui/core";
import { IconButton } from "@saleor/components/IconButton";
import { DeleteIcon, EditIcon, makeStyles } from "@saleor/macaw-ui";
import classNames from "classnames";
import clsx from "clsx";
import React from "react";
const useStyles = makeStyles(
@ -103,7 +103,7 @@ const MediaTile: React.FC<MediaTileProps> = props => {
return (
<div className={classes.mediaContainer} data-test-id="product-image">
<div
className={classNames(classes.mediaOverlay, {
className={clsx(classes.mediaOverlay, {
[classes.mediaOverlayShadow]: loading,
})}
>

4
src/components/Metadata/MetadataCard.tsx
View file

@ -14,7 +14,7 @@ import TableRowLink from "@saleor/components/TableRowLink";
import { MetadataInput } from "@saleor/graphql";
import { FormChange } from "@saleor/hooks/useForm";
import { DeleteIcon, ExpandIcon, IconButton } from "@saleor/macaw-ui";
import classNames from "classnames";
import clsx from "clsx";
import React, { useEffect } from "react";
import { FormattedMessage, useIntl } from "react-intl";
@ -74,7 +74,7 @@ const MetadataCard: React.FC<MetadataCardProps> = ({
description: "header",
})}
<IconButton
className={classNames(classes.expandBtn, {
className={clsx(classes.expandBtn, {
[classes.rotate]: expanded,
})}
hoverOutline={false}

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

@ -8,7 +8,7 @@ import CloseIcon from "@material-ui/icons/Close";
import Debounce, { DebounceProps } from "@saleor/components/Debounce";
import { ChevronIcon, IconButton } from "@saleor/macaw-ui";
import { FetchMoreProps } from "@saleor/types";
import classNames from "classnames";
import clsx from "clsx";
import Downshift, { ControllerStateAndHelpers } from "downshift";
import { filter } from "fuzzaldrin";
import React from "react";
@ -157,7 +157,7 @@ const MultiAutocompleteSelectFieldComponent: React.FC<MultiAutocompleteSelectFie
handleToggleMenu();
handleFocus();
}}
className={classNames(classes.adornment, {
className={clsx(classes.adornment, {
[classes.adornmentRotate]: isOpen,
})}
>

4
src/components/MultiAutocompleteSelectField/MultiAutocompleteSelectFieldContent.tsx
View file

@ -13,7 +13,7 @@ import useElementScroll, {
} from "@saleor/hooks/useElementScroll";
import { makeStyles } from "@saleor/macaw-ui";
import { FetchMoreProps } from "@saleor/types";
import classNames from "classnames";
import clsx from "clsx";
import { GetItemPropsOptions } from "downshift";
import React, { ReactNode } from "react";
import SVG from "react-inlinesvg";
@ -337,7 +337,7 @@ const MultiAutocompleteSelectFieldContent: React.FC<MultiAutocompleteSelectField
{choices.length > maxMenuItems && (
<div className={classes.arrowContainer}>
<div
className={classNames(classes.arrowInnerContainer, {
className={clsx(classes.arrowInnerContainer, {
// Needs to be explicitely compared to false because
// scrolledToBottom can be either true, false or undefined
[classes.hide]: scrolledToBottom !== false,

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

@ -2,7 +2,7 @@ import { Grow, Paper, Popper } from "@material-ui/core";
import { IconButtonProps } from "@material-ui/core/IconButton";
import { LayoutButton, makeStyles, NavigatorIcon } from "@saleor/macaw-ui";
import { triangle } from "@saleor/styles/mixins";
import classNames from "classnames";
import clsx from "clsx";
import React from "react";
import { FormattedMessage } from "react-intl";
@ -89,7 +89,7 @@ const NavigatorButton: React.FC<NavigatorButtonProps> = ({
return (
<>
<LayoutButton
className={classNames(className, classes.root)}
className={clsx(className, classes.root)}
data-test-id="navigator"
onMouseEnter={setHelper}
onMouseLeave={clearHelper}

10
src/components/RadioGroupField/RadioGroupField.tsx
View file

@ -6,7 +6,7 @@ import {
Radio,
RadioGroup,
} from "@material-ui/core";
import classNames from "classnames";
import clsx from "clsx";
import React from "react";
import { FormattedMessage } from "react-intl";
@ -54,7 +54,7 @@ export const RadioGroupField: React.FC<RadioGroupFieldProps> = props => {
return (
<FormControl
className={classNames(classes.root, className, {
className={clsx(classes.root, className, {
[classes.rootNoLabel]: !label,
})}
error={error}
@ -66,7 +66,7 @@ export const RadioGroupField: React.FC<RadioGroupFieldProps> = props => {
name={name}
value={value}
onChange={onChange}
className={classNames({
className={clsx({
[classes.radioGroupInline]: variant === "inline",
[innerContainerClassName]: !!innerContainerClassName,
})}
@ -76,7 +76,7 @@ export const RadioGroupField: React.FC<RadioGroupFieldProps> = props => {
<FormControlLabel
disabled={choice.disabled}
value={choice.value}
className={classNames({
className={clsx({
[classes.radioLabel]: variant !== "inline",
[classes.radioLabelInline]: variant === "inline",
})}
@ -85,7 +85,7 @@ export const RadioGroupField: React.FC<RadioGroupFieldProps> = props => {
}}
control={
<Radio
className={classNames({
className={clsx({
[classes.alignTop]: alignTop,
})}
color="secondary"

14
src/components/RadioSwitchField/RadioSwitchField.tsx
View file

@ -5,7 +5,7 @@ import {
RadioGroup,
} from "@material-ui/core";
import { makeStyles } from "@saleor/macaw-ui";
import classNames from "classnames";
import clsx from "clsx";
import React from "react";
const useStyles = makeStyles(
@ -71,7 +71,7 @@ export const RadioSwitchField: React.FC<RadioSwitchFieldProps> = props => {
return (
<FormControl
className={classNames(classes.formControl, className)}
className={clsx(classes.formControl, className)}
error={error}
disabled={disabled}
>
@ -83,20 +83,14 @@ export const RadioSwitchField: React.FC<RadioSwitchFieldProps> = props => {
>
<FormControlLabel
value="true"
className={classNames(
classes.radioLabel,
overrideClasses?.radioLabel,
)}
className={clsx(classes.radioLabel, overrideClasses?.radioLabel)}
control={<Radio color="secondary" />}
label={firstOptionLabel}
name={name}
/>
<FormControlLabel
value="false"
className={classNames(
classes.radioLabel,
overrideClasses?.radioLabel,
)}
className={clsx(classes.radioLabel, overrideClasses?.radioLabel)}
control={<Radio color="secondary" />}
label={secondOptionLabel}
name={name}

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

@ -1,6 +1,6 @@
import { Table } from "@material-ui/core";
import { makeStyles } from "@saleor/macaw-ui";
import classNames from "classnames";
import clsx from "clsx";
import React from "react";
const useStyles = makeStyles(
@ -34,7 +34,7 @@ const ResponsiveTable: React.FC<ResponsiveTableProps> = props => {
return (
<div className={classes.root}>
<Table className={classNames(classes.table, className)}>{children}</Table>
<Table className={clsx(classes.table, className)}>{children}</Table>
</div>
);
};

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

@ -2,7 +2,7 @@ import { LogLevels, OutputData } from "@editorjs/editorjs";
import { FormControl, FormHelperText, InputLabel } from "@material-ui/core";
import { useId } from "@reach/auto-id";
import { Props as ReactEditorJSProps } from "@react-editor-js/core";
import classNames from "classnames";
import clsx from "clsx";
import React from "react";
import { createReactEditorJS } from "react-editor-js";
@ -91,7 +91,7 @@ const RichTextEditor: React.FC<RichTextEditorProps> = ({
>
<div
id={id}
className={classNames(classes.editor, classes.root, {
className={clsx(classes.editor, classes.root, {
[classes.rootActive]: isFocused,
[classes.rootDisabled]: disabled,
[classes.rootError]: error,

4
src/components/RichTextEditor/RichTextEditorContent.tsx
View file

@ -1,6 +1,6 @@
import { LogLevels } from "@editorjs/editorjs";
import { useId } from "@reach/auto-id";
import classNames from "classnames";
import clsx from "clsx";
import React from "react";
import { createReactEditorJS } from "react-editor-js";
@ -44,7 +44,7 @@ const RichTextEditorContent: React.FC<RichTextEditorContentProps> = ({
>
<div
id={id}
className={classNames(classes.editor, classes.rootStatic, className)}
className={clsx(classes.editor, classes.rootStatic, className)}
/>
</ReactEditorJS>
);

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

@ -8,7 +8,7 @@ import {
import { makeStyles } from "@saleor/macaw-ui";
import { getFieldError, getProductErrorMessage } from "@saleor/utils/errors";
import getPageErrorMessage from "@saleor/utils/errors/page";
import classNames from "classnames";
import clsx from "clsx";
import React from "react";
import { defineMessages, FormattedMessage, useIntl } from "react-intl";
import slugify from "slugify";
@ -179,9 +179,7 @@ const SeoForm: React.FC<SeoFormProps> = props => {
/>
<CardContent>
{shouldDisplayHelperText && (
<Typography
className={classNames({ [classes.helperText]: expanded })}
>
<Typography className={clsx({ [classes.helperText]: expanded })}>
{helperText}
</Typography>
)}

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

@ -9,7 +9,7 @@ import { InputProps } from "@material-ui/core/Input";
import { ExtendedFormHelperTextProps } from "@saleor/channels/components/ChannelForm/types";
import { ChevronIcon } from "@saleor/macaw-ui";
import { FetchMoreProps } from "@saleor/types";
import classNames from "classnames";
import clsx from "clsx";
import Downshift from "downshift";
import { filter } from "fuzzaldrin";
import React from "react";
@ -189,7 +189,7 @@ const SingleAutocompleteSelectFieldComponent: React.FC<SingleAutocompleteSelectF
handleToggleMenu();
handleFocus();
}}
className={classNames(classes.adornment, {
className={clsx(classes.adornment, {
[classes.adornmentRotate]: isOpen,
})}
>
@ -214,7 +214,7 @@ const SingleAutocompleteSelectFieldComponent: React.FC<SingleAutocompleteSelectF
return (
<div
className={classNames(
className={clsx(
classes.container,
"click-outside-ignore",
className,

6
src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectFieldContent.tsx
View file

@ -11,7 +11,7 @@ import useElementScroll, {
} from "@saleor/hooks/useElementScroll";
import { makeStyles } from "@saleor/macaw-ui";
import { FetchMoreProps } from "@saleor/types";
import classNames from "classnames";
import clsx from "clsx";
import { GetItemPropsOptions } from "downshift";
import React, { ReactElement } from "react";
import SVG from "react-inlinesvg";
@ -206,7 +206,7 @@ const SingleAutocompleteSelectFieldContent: React.FC<SingleAutocompleteSelectFie
return (
<Paper
// click-outside-ignore is used by glide-datagrid
className={classNames("click-outside-ignore", classes.root)}
className={clsx("click-outside-ignore", classes.root)}
elevation={8}
style={style}
>
@ -323,7 +323,7 @@ const SingleAutocompleteSelectFieldContent: React.FC<SingleAutocompleteSelectFie
{choices.length > maxMenuItems && (
<div className={classes.arrowContainer}>
<div
className={classNames(classes.arrowInnerContainer, {
className={clsx(classes.arrowInnerContainer, {
// Needs to be explicitly compared to false because
// scrolledToBottom can be either true, false or undefined
[classes.hide]: scrolledToBottom !== false,

5
src/components/SingleSelectField/SingleSelectField.tsx
View file

@ -9,7 +9,6 @@ import {
} from "@material-ui/core";
import { SelectProps } from "@material-ui/core/Select";
import { makeStyles } from "@saleor/macaw-ui";
import classNames from "classnames";
import clsx from "clsx";
import React from "react";
import { FormattedMessage } from "react-intl";
@ -91,7 +90,7 @@ export const SingleSelectField: React.FC<SingleSelectFieldProps> = props => {
return (
<FormControl
className={classNames(classes.formControl, className)}
className={clsx(classes.formControl, className)}
error={error}
disabled={disabled}
>
@ -114,7 +113,7 @@ export const SingleSelectField: React.FC<SingleSelectFieldProps> = props => {
{...InputProps}
classes={{
...(InputProps?.classes || {}),
input: classNames(InputProps?.classes?.input, {
input: clsx(InputProps?.classes?.input, {
[classes.noLabel]: !label,
}),
}}

4
src/components/Skeleton.tsx
View file

@ -1,5 +1,5 @@
import { makeStyles } from "@saleor/macaw-ui";
import classNames from "classnames";
import clsx from "clsx";
import React from "react";
const useStyles = makeStyles(
@ -43,7 +43,7 @@ const Skeleton: React.FC<SkeletonProps> = props => {
return (
<span
data-test-id="skeleton"
className={classNames(classes.skeleton, className, {
className={clsx(classes.skeleton, className, {
[classes.primary]: primary,
})}
style={style}

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

@ -1,7 +1,7 @@
import { Typography } from "@material-ui/core";
import CloseIcon from "@material-ui/icons/Close";
import { makeStyles } from "@saleor/macaw-ui";
import classNames from "classnames";
import clsx from "clsx";
import React from "react";
import { SortableElement, SortableElementProps } from "react-sortable-hoc";
@ -56,7 +56,7 @@ const SortableChip = SortableElement((props: SortableChipProps) => {
};
return (
<div className={classNames(classes.root, className)}>
<div className={clsx(classes.root, className)}>
<div className={classes.content}>
<SortableHandle
className={classes.sortableHandle}

4
src/components/SortableChip/SortableHandle.tsx
View file

@ -1,5 +1,5 @@
import { DragIcon, makeStyles } from "@saleor/macaw-ui";
import classNames from "classnames";
import clsx from "clsx";
import React from "react";
import { SortableHandle as SortableHandleHoc } from "react-sortable-hoc";
@ -22,7 +22,7 @@ const SortableHandle = SortableHandleHoc((props: SortableHandleProps) => {
return (
<DragIcon
className={classNames(classes.drag, className)}
className={clsx(classes.drag, className)}
tabIndex={0}
{...restProps}
/>

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

@ -1,7 +1,7 @@
import { Typography } from "@material-ui/core";
import { alpha } from "@material-ui/core/styles";
import { makeStyles } from "@saleor/macaw-ui";
import classNames from "classnames";
import clsx from "clsx";
import React from "react";
const useStyles = makeStyles(
@ -51,7 +51,7 @@ export function Tab<T>(value: T) {
<Typography
component="span"
data-test-id={testId}
className={classNames({
className={clsx({
[classes.root]: true,
[classes.active]: isActive,
})}

8
src/components/TableCellAvatar/Avatar.tsx
View file

@ -1,6 +1,6 @@
import { Avatar as MuiAvatar } from "@material-ui/core";
import { ImageIcon, makeStyles } from "@saleor/macaw-ui";
import classNames from "classnames";
import clsx from "clsx";
import React from "react";
export const AVATAR_MARGIN = 40;
@ -57,18 +57,18 @@ const Avatar: React.FC<AvatarProps> = ({
return (
<div
className={classNames(classes.content, {
className={clsx(classes.content, {
[classes.alignRight]: alignRight,
})}
>
{badge}
{!thumbnail ? (
<MuiAvatar className={classNames(classes.avatar, avatarProps)}>
<MuiAvatar className={clsx(classes.avatar, avatarProps)}>
<ImageIcon color="primary" data-test-id="imageIcon" />
</MuiAvatar>
) : (
<MuiAvatar
className={classNames(classes.avatar, avatarProps)}
className={clsx(classes.avatar, avatarProps)}
src={thumbnail}
/>
)}

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

@ -1,7 +1,7 @@
import { TableCell } from "@material-ui/core";
import { TableCellProps } from "@material-ui/core/TableCell";
import { makeStyles } from "@saleor/macaw-ui";
import classNames from "classnames";
import clsx from "clsx";
import React from "react";
import Avatar, { AvatarProps } from "./Avatar";
@ -32,7 +32,7 @@ const TableCellAvatar: React.FC<TableCellAvatarProps> = props => {
return (
<TableCell
className={classNames(classes.root, className)}
className={clsx(classes.root, className)}
data-test-id="table-cell-avatar"
{...rest}
>

10
src/components/TableCellHeader/TableCellHeader.tsx
View file

@ -1,7 +1,7 @@
import { TableCell } from "@material-ui/core";
import { TableCellProps } from "@material-ui/core/TableCell";
import { makeStyles } from "@saleor/macaw-ui";
import classNames from "classnames";
import clsx from "clsx";
import React from "react";
import ArrowSort from "../../icons/ArrowSort";
@ -88,13 +88,13 @@ const TableCellHeader = React.forwardRef<unknown, TableCellHeaderProps>(
onClick(e);
}
}}
className={classNames(classes.root, className, {
className={clsx(classes.root, className, {
[classes.disabled]: disabled,
[classes.notSortable]: !onClick,
})}
>
<div
className={classNames(classes.labelContainer, {
className={clsx(classes.labelContainer, {
[classes.labelContainerActive]: !!direction && !!arrowPosition,
[classes.labelContainerCenter]: textAlign === "center",
[classes.labelContainerRight]: textAlign === "right",
@ -102,7 +102,7 @@ const TableCellHeader = React.forwardRef<unknown, TableCellHeaderProps>(
>
{!!direction && arrowPosition === "left" && (
<ArrowSort
className={classNames(classes.arrow, classes.arrowLeft, {
className={clsx(classes.arrow, classes.arrowLeft, {
[classes.arrowUp]: direction === "asc",
})}
/>
@ -110,7 +110,7 @@ const TableCellHeader = React.forwardRef<unknown, TableCellHeaderProps>(
<div className={classes.label}>{children}</div>
{!!direction && arrowPosition === "right" && (
<ArrowSort
className={classNames(classes.arrow, {
className={clsx(classes.arrow, {
[classes.arrowUp]: direction === "asc",
})}
/>

4
src/components/TableFilter/FilterTab.tsx
View file

@ -1,6 +1,6 @@
import { Tab } from "@material-ui/core";
import { makeStyles } from "@saleor/macaw-ui";
import classNames from "classnames";
import clsx from "clsx";
import React from "react";
const useStyles = makeStyles(
@ -46,7 +46,7 @@ export const FilterTab: React.FC<FilterTabProps> = props => {
label={label}
classes={{
root: classes.tabRoot,
wrapper: classNames(classes.tabLabel, {
wrapper: clsx(classes.tabLabel, {
[classes.selectedTabLabel]: selected,
}),
}}

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

@ -6,7 +6,7 @@ import {
import { TableHeadProps as MuiTableHeadProps } from "@material-ui/core/TableHead";
import TableRowLink from "@saleor/components/TableRowLink";
import { makeStyles } from "@saleor/macaw-ui";
import classNames from "classnames";
import clsx from "clsx";
import React from "react";
import { FormattedMessage } from "react-intl";
@ -89,7 +89,7 @@ const TableHead: React.FC<TableHeadProps> = props => {
{(items === undefined || items.length > 0) && (
<TableCell
padding="checkbox"
className={classNames(classes.cell, {
className={clsx(classes.cell, {
[classes.dragRows]: dragRows,
})}
>
@ -104,7 +104,7 @@ const TableHead: React.FC<TableHeadProps> = props => {
{selected ? (
<>
<TableCell
className={classNames(classes.cell, classes.root)}
className={clsx(classes.cell, classes.root)}
colSpan={getColSpan(colSpan, dragRows)}
>
<div className={classes.container}>

8
src/components/TablePagination/TablePaginationActions.tsx
View file

@ -3,7 +3,7 @@ import ArrowLeft from "@material-ui/icons/ArrowLeft";
import ArrowRight from "@material-ui/icons/ArrowRight";
import { IconButton, makeStyles, useTheme } from "@saleor/macaw-ui";
import { isDarkTheme } from "@saleor/misc";
import classNames from "classnames";
import clsx from "clsx";
import React from "react";
const useStyles = makeStyles(
@ -79,10 +79,10 @@ export const TablePaginationActions: React.FC<TablePaginationActionsProps> = pro
const isDark = isDarkTheme(themeType);
return (
<div className={classNames(classes.root, className)} {...other}>
<div className={clsx(classes.root, className)} {...other}>
<IconButton
variant="secondary"
className={classNames(classes.iconButton, {
className={clsx(classes.iconButton, {
[classes.dark]: isDark,
[classes.disabled]: !hasPreviousPage,
})}
@ -94,7 +94,7 @@ export const TablePaginationActions: React.FC<TablePaginationActionsProps> = pro
{direction === "rtl" ? <ArrowRight /> : <ArrowLeft />}
</IconButton>
<IconButton
className={classNames(classes.iconButton, {
className={clsx(classes.iconButton, {
[classes.dark]: isDark,
[classes.disabled]: !hasNextPage,
})}

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

@ -1,7 +1,7 @@
import { TableRow, TableRowTypeMap } from "@material-ui/core";
import { makeStyles } from "@saleor/macaw-ui";
import { isExternalURL } from "@saleor/utils/urls";
import clsx from "classnames";
import clsx from "clsx";
import React from "react";
import { Link } from "react-router-dom";

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

@ -3,7 +3,7 @@ import SingleSelectField, {
Choices,
} from "@saleor/components/SingleSelectField";
import { ChangeEvent, FormChange } from "@saleor/hooks/useForm";
import classNames from "classnames";
import clsx from "clsx";
import React from "react";
import { useStyles } from "./styles";
@ -99,7 +99,7 @@ const TextWithSelectField: React.FC<TextWithSelectFieldProps> = ({
min: textFieldMinValue,
}}
InputProps={{
className: classNames(classes.textField, {
className: clsx(classes.textField, {
[classes.textFieldCentered]: !textFieldLabel,
}),
endAdornment: (

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

@ -9,7 +9,7 @@ import { ChangeEvent } from "@saleor/hooks/useForm";
import { makeStyles } from "@saleor/macaw-ui";
import { UserError } from "@saleor/types";
import { getFieldError } from "@saleor/utils/errors";
import classNames from "classnames";
import clsx from "clsx";
import React from "react";
import { useIntl } from "react-intl";
@ -279,9 +279,7 @@ export const VisibilityCard: React.FC<VisibilityCardProps> = props => {
disabled={disabled}
label={
<>
<p
className={classNames(classes.label, classes.listingLabel)}
>
<p className={clsx(classes.label, classes.listingLabel)}>
{intl.formatMessage(visibilityCardMessages.hideInListings)}
</p>

4
src/customers/components/CustomerAddressChoiceCard/CustomerAddressChoiceCard.tsx
View file

@ -3,7 +3,7 @@ import AddressFormatter from "@saleor/components/AddressFormatter";
import { AddressFragment } from "@saleor/graphql";
import { commonMessages } from "@saleor/intl";
import { EditIcon } from "@saleor/macaw-ui";
import classNames from "classnames";
import clsx from "clsx";
import React from "react";
import { useIntl } from "react-intl";
@ -25,7 +25,7 @@ const CustomerAddressChoiceCard: React.FC<CustomerAddressChoiceCardProps> = prop
return (
<Card
className={classNames(classes.card, {
className={clsx(classes.card, {
[classes.cardSelected]: selected,
[classes.selectableCard]: !editable && !selected,
})}

4
src/discounts/components/SaleList/SaleList.tsx
View file

@ -18,7 +18,7 @@ import { makeStyles } from "@saleor/macaw-ui";
import { maybe, renderCollection } from "@saleor/misc";
import { ChannelProps, ListActions, ListProps, SortPage } from "@saleor/types";
import { getArrowDirection } from "@saleor/utils/sort";
import classNames from "classnames";
import clsx from "clsx";
import React from "react";
import { FormattedMessage, useIntl } from "react-intl";
@ -203,7 +203,7 @@ const SaleList: React.FC<SaleListProps> = props => {
/>
</TableCell>
<TableCell
className={classNames(classes.colName, classes.textOverflow)}
className={clsx(classes.colName, classes.textOverflow)}
>
{maybe<React.ReactNode>(() => sale.name, <Skeleton />)}
</TableCell>

4
src/discounts/components/VoucherList/VoucherList.tsx
View file

@ -18,7 +18,7 @@ import { makeStyles } from "@saleor/macaw-ui";
import { maybe, renderCollection } from "@saleor/misc";
import { ChannelProps, ListActions, ListProps, SortPage } from "@saleor/types";
import { getArrowDirection } from "@saleor/utils/sort";
import classNames from "classnames";
import clsx from "clsx";
import React from "react";
import { FormattedMessage, useIntl } from "react-intl";
@ -259,7 +259,7 @@ const VoucherList: React.FC<VoucherListProps> = props => {
/>
</TableCell>
<TableCell
className={classNames(classes.colName, classes.textOverflow)}
className={clsx(classes.colName, classes.textOverflow)}
>
{voucher?.code ?? <Skeleton />}
</TableCell>

4
src/giftCards/GiftCardCreateDialog/ContentWithProgress.tsx
View file

@ -1,6 +1,6 @@
import { CircularProgress } from "@material-ui/core";
import { makeStyles } from "@saleor/macaw-ui";
import classNames from "classnames";
import clsx from "clsx";
import React from "react";
interface ContentWithProgressProps {
@ -30,7 +30,7 @@ const ContentWithProgress: React.FC<ContentWithProgressProps> = ({
return children ? (
<>{children}</>
) : (
<div className={classNames(classes.container, containerClassName)}>
<div className={clsx(classes.container, containerClassName)}>
<CircularProgress />
</div>
);

6
src/giftCards/GiftCardUpdate/GiftCardUpdateDetailsCard/GiftCardUpdateDetailsBalanceSection.tsx
View file

@ -2,7 +2,7 @@ import { Typography } from "@material-ui/core";
import HorizontalSpacer from "@saleor/apps/components/HorizontalSpacer";
import CardSpacer from "@saleor/components/CardSpacer";
import Money from "@saleor/components/Money";
import classNames from "classnames";
import clsx from "clsx";
import React from "react";
import { useIntl } from "react-intl";
@ -24,9 +24,7 @@ const GiftCardUpdateDetailsBalanceSection: React.FC = () => {
return (
<>
<div
className={classNames(classes.labelsContainer, classes.wideContainer)}
>
<div className={clsx(classes.labelsContainer, classes.wideContainer)}>
<Typography>{intl.formatMessage(messages.cardBalanceLabel)}</Typography>
<Typography className={classes.labelsContainer}>
<Money money={currentBalance} />

4
src/home/components/HomeProductListCard/HomeProductListCard.tsx
View file

@ -9,7 +9,7 @@ import { HomeQuery } from "@saleor/graphql";
import { makeStyles } from "@saleor/macaw-ui";
import { productVariantEditUrl } from "@saleor/products/urls";
import { RelayToFlat } from "@saleor/types";
import classNames from "classnames";
import clsx from "clsx";
import React from "react";
import { FormattedMessage, useIntl } from "react-intl";
@ -77,7 +77,7 @@ export const HomeProductList: React.FC<HomeProductListProps> = props => {
<TableRowLink
key={variant ? variant.id : "skeleton"}
hover={!!variant}
className={classNames({
className={clsx({
[classes.tableRow]: !!variant,
})}
href={productVariantEditUrl(variant.product.id, variant.id)}

8
src/navigation/components/MenuItems/MenuItems.tsx
View file

@ -11,7 +11,7 @@ import {
useTheme,
} from "@saleor/macaw-ui";
import { RecursiveMenuItem } from "@saleor/navigation/types";
import classNames from "classnames";
import clsx from "clsx";
import React from "react";
import { FormattedMessage, useIntl } from "react-intl";
import SortableTree, { NodeRendererProps } from "react-sortable-tree";
@ -152,12 +152,12 @@ const Node: React.FC<NodeRendererProps<TreeItemProps>> = props => {
} = props;
const classes = useStyles(props);
const draggedClassName = classNames(
const draggedClassName = clsx(
classes.rowContainer,
classes.rowContainerDragged,
);
const defaultClassName = isDragging ? draggedClassName : classes.rowContainer;
const placeholderClassName = classNames(
const placeholderClassName = clsx(
classes.rowContainer,
classes.rowContainerPlaceholder,
);
@ -244,7 +244,7 @@ const MenuItems: React.FC<MenuItemsProps> = props => {
}
/>
<div
className={classNames(classes.container, {
className={clsx(classes.container, {
[classes.darkContainer]: themeType === "dark",
})}
style={{

4
src/orders/components/OrderDraftDetailsProducts/TableLine.tsx
View file

@ -11,7 +11,7 @@ import {
} from "@saleor/graphql";
import { DeleteIcon, IconButton, makeStyles } from "@saleor/macaw-ui";
import { OrderLineDiscountContextConsumerProps } from "@saleor/products/components/OrderDiscountProviders/OrderLineDiscountProvider";
import classNames from "classnames";
import clsx from "clsx";
import React, { useRef } from "react";
import { maybe } from "../../../misc";
@ -106,7 +106,7 @@ const TableLine: React.FC<TableLineProps> = ({
return (
<TableRowLink key={id}>
<TableCell
className={classNames({
className={clsx({
[classes.colStatusEmpty]: !alerts.length,
})}
>

6
src/orders/components/OrderFulfillLine/OrderFulfillLine.tsx
View file

@ -16,7 +16,7 @@ import {
getWarehouseStock,
OrderFulfillLineFormData,
} from "@saleor/orders/utils/data";
import classNames from "classnames";
import clsx from "clsx";
import React from "react";
import { useIntl } from "react-intl";
@ -121,7 +121,7 @@ export const OrderFulfillLine: React.FC<OrderFulfillLineProps> = props => {
<TextField
type="number"
inputProps={{
className: classNames(classes.quantityInnerInput, {
className: clsx(classes.quantityInnerInput, {
[classes.quantityInnerInputNoRemaining]: !line.variant
?.trackInventory,
}),
@ -169,7 +169,7 @@ export const OrderFulfillLine: React.FC<OrderFulfillLineProps> = props => {
) : (
<IconButton
onClick={onWarehouseChange}
className={classNames(
className={clsx(
classes.warehouseButton,
"MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-adornedEnd MuiOutlinedInput-adornedEnd",
)}

4
src/orders/components/OrderFulfillPage/OrderFulfillPage.tsx
View file

@ -42,7 +42,7 @@ import {
getToFulfillOrderLines,
OrderFulfillLineFormData,
} from "@saleor/orders/utils/data";
import classNames from "classnames";
import clsx from "clsx";
import React from "react";
import { FormattedMessage, useIntl } from "react-intl";
@ -235,7 +235,7 @@ const OrderFulfillPage: React.FC<OrderFulfillPageProps> = props => {
<FormattedMessage {...messages.sku} />
</TableCell>
<TableCell
className={classNames(
className={clsx(
classes.colQuantity,
classes.colQuantityHeader,
)}

4
src/orders/components/OrderFulfilledProductsCard/ExtraInfoLines.tsx
View file

@ -2,7 +2,7 @@ import { TableCell, Typography } from "@material-ui/core";
import TableRowLink from "@saleor/components/TableRowLink";
import { FulfillmentStatus, OrderDetailsFragment } from "@saleor/graphql";
import { getStringOrPlaceholder } from "@saleor/misc";
import classNames from "classnames";
import clsx from "clsx";
import React from "react";
import { FormattedMessage, useIntl } from "react-intl";
@ -37,7 +37,7 @@ const ExtraInfoLines: React.FC<ExtraInfoLinesProps> = ({ fulfillment }) => {
: extraInfoMessages.fulfilled,
)}
<Typography
className={classNames(classes.infoLabel, {
className={clsx(classes.infoLabel, {
[classes.infoLabelWithMargin]: !!trackingNumber,
})}
color="textPrimary"

4
src/orders/components/OrderInvoiceList/OrderInvoiceList.tsx
View file

@ -14,7 +14,7 @@ import TableRowLink from "@saleor/components/TableRowLink";
import { InvoiceFragment } from "@saleor/graphql";
import { buttonMessages } from "@saleor/intl";
import { makeStyles } from "@saleor/macaw-ui";
import classNames from "classnames";
import clsx from "clsx";
import React from "react";
import { FormattedMessage, useIntl } from "react-intl";
@ -90,7 +90,7 @@ const OrderInvoiceList: React.FC<OrderInvoiceListProps> = props => {
}
/>
<CardContent
className={classNames({
className={clsx({
[classes.cardContentTable]: generatedInvoices?.length,
})}
>

4
src/orders/components/OrderRefundReturnAmount/OrderRefundReturnAmountValues.tsx
View file

@ -1,7 +1,7 @@
import Money, { IMoney } from "@saleor/components/Money";
import Skeleton from "@saleor/components/Skeleton";
import { makeStyles } from "@saleor/macaw-ui";
import classNames from "classnames";
import clsx from "clsx";
import reduce from "lodash/reduce";
import React from "react";
import { defineMessages, useIntl } from "react-intl";
@ -121,7 +121,7 @@ const OrderRefundAmountValues: React.FC<OrderRefundAmountValuesProps> = props =>
<div className={classes.container}>
{items.map(({ key, data, highlighted }) => (
<div
className={classNames(classes.row, {
className={clsx(classes.row, {
[classes.highlightedRow]: highlighted,
})}
key={key}

4
src/permissionGroups/components/AssignMembersDialog/AssignMembersDialog.tsx
View file

@ -30,7 +30,7 @@ import {
RelayToFlat,
SearchPageProps,
} from "@saleor/types";
import classNames from "classnames";
import clsx from "clsx";
import React from "react";
import InfiniteScroll from "react-infinite-scroll-component";
import { FormattedMessage, useIntl } from "react-intl";
@ -303,7 +303,7 @@ const AssignMembersDialog: React.FC<AssignMembersDialogProps> = ({
</InfiniteScroll>
</DialogContent>
<DialogActions
className={classNames({
className={clsx({
[classes.dropShadow]: dropShadow,
})}
>

4
src/permissionGroups/components/PermissionGroupMemberList/PermissionGroupMemberList.tsx
View file

@ -25,7 +25,7 @@ import { sortMembers } from "@saleor/permissionGroups/sort";
import { MembersListUrlSortField } from "@saleor/permissionGroups/urls";
import { ListActions, SortPage } from "@saleor/types";
import { getArrowDirection } from "@saleor/utils/sort";
import classNames from "classnames";
import clsx from "clsx";
import React from "react";
import { FormattedMessage, useIntl } from "react-intl";
@ -202,7 +202,7 @@ const PermissionGroupMemberList: React.FC<PermissionGroupProps> = props => {
return (
<TableRowLink
className={classNames({
className={clsx({
[classes.tableRow]: !!user,
})}
hover={!!user}

4
src/products/components/ProductList/ProductList.tsx
View file

@ -38,7 +38,7 @@ import TDisplayColumn, {
DisplayColumnProps,
} from "@saleor/utils/columns/DisplayColumn";
import { getArrowDirection } from "@saleor/utils/sort";
import classNames from "classnames";
import clsx from "clsx";
import React from "react";
import { FormattedMessage, useIntl } from "react-intl";
@ -187,7 +187,7 @@ export const ProductList: React.FC<ProductListProps> = props => {
<TableCellHeader
data-test-id="col-name-header"
arrowPosition="right"
className={classNames(classes.colName, {
className={clsx(classes.colName, {
[classes.colNameFixed]: settings.columns.length > 4,
})}
direction={

4
src/products/components/ProductMedia/ProductMedia.tsx
View file

@ -8,7 +8,7 @@ import { makeStyles } from "@saleor/macaw-ui";
import { ProductMediaPopper } from "@saleor/products/components/ProductMediaPopper/ProductMediaPopper";
import { ReorderAction } from "@saleor/types";
import createMultiFileUploadHandler from "@saleor/utils/handlers/multiFileUploadHandler";
import classNames from "classnames";
import clsx from "clsx";
import React from "react";
import { defineMessages, useIntl } from "react-intl";
import { SortableContainer, SortableElement } from "react-sortable-hoc";
@ -280,7 +280,7 @@ const ProductMedia: React.FC<ProductMediaProps> = props => {
media={media}
preview={imagesToUpload}
onSortEnd={onImageReorder}
className={classNames({
className={clsx({
[classes.root]: true,
[classes.rootDragActive]: isDragActive,
})}

4
src/products/components/ProductMediaNavigation/ProductMediaNavigation.tsx
View file

@ -2,7 +2,7 @@ import { Card, CardContent } from "@material-ui/core";
import CardTitle from "@saleor/components/CardTitle";
import Skeleton from "@saleor/components/Skeleton";
import { makeStyles } from "@saleor/macaw-ui";
import classNames from "classnames";
import clsx from "clsx";
import React from "react";
import { defineMessages, useIntl } from "react-intl";
@ -81,7 +81,7 @@ const ProductMediaNavigation: React.FC<ProductMediaNavigationProps> = props => {
return (
<div
className={classNames({
className={clsx({
[classes.imageContainer]: true,
[classes.highlightedImageContainer]:
mediaObj.id === highlighted,

4
src/products/components/ProductVariantImageSelectDialog/ProductVariantMediaSelectDialog.tsx
View file

@ -7,7 +7,7 @@ import {
import BackButton from "@saleor/components/BackButton";
import { ProductMediaFragment } from "@saleor/graphql";
import { makeStyles } from "@saleor/macaw-ui";
import classNames from "classnames";
import clsx from "clsx";
import React from "react";
import { FormattedMessage } from "react-intl";
@ -83,7 +83,7 @@ const ProductVariantMediaSelectDialog: React.FC<ProductVariantImageSelectDialogP
parsedMediaOembedData?.thumbnail_url || mediaObj.url;
return (
<div
className={classNames([
className={clsx([
classes.imageContainer,
{
[classes.selectedImageContainer]:

6
src/products/components/ProductVariantNavigation/ProductVariantNavigation.tsx
View file

@ -19,7 +19,7 @@ import {
productVariantEditUrl,
} from "@saleor/products/urls";
import { ReorderAction } from "@saleor/types";
import classNames from "classnames";
import clsx from "clsx";
import React from "react";
import { FormattedMessage, useIntl } from "react-intl";
@ -70,7 +70,7 @@ const ProductVariantNavigation: React.FC<ProductVariantNavigationProps> = props
hover={!!variant}
key={variant ? variant.id : "skeleton"}
index={variantIndex || 0}
className={classNames(classes.link, {
className={clsx(classes.link, {
[classes.rowActive]: isActive,
})}
href={
@ -109,7 +109,7 @@ const ProductVariantNavigation: React.FC<ProductVariantNavigationProps> = props
<TableRowLink>
<TableCellAvatar
alignRight
className={classNames(
className={clsx(
classes.colAvatar,
classes.rowActive,
classes.noHandle,

6
src/shipping/components/ShippingZonePostalCodes/ShippingZonePostalCodes.tsx
View file

@ -19,7 +19,7 @@ import {
import ArrowDropdown from "@saleor/icons/ArrowDropdown";
import { DeleteIcon, IconButton, makeStyles } from "@saleor/macaw-ui";
import { renderCollection } from "@saleor/misc";
import classNames from "classnames";
import clsx from "clsx";
import React from "react";
import { FormattedMessage, useIntl } from "react-intl";
@ -125,7 +125,7 @@ const ShippingZonePostalCodes: React.FC<ShippingZonePostalCodesProps> = ({
</Button>
}
/>
<CardContent className={classNames(classes.radioContainer)}>
<CardContent className={clsx(classes.radioContainer)}>
<RadioGroupField
alignTop
choices={[
@ -204,7 +204,7 @@ const ShippingZonePostalCodes: React.FC<ShippingZonePostalCodesProps> = ({
onClick={() => setExpanded(!expanded)}
>
<ArrowDropdown
className={classNames(classes.arrow, {
className={clsx(classes.arrow, {
[classes.arrowRotate]: expanded,
})}
/>

4
src/staff/components/StaffList/StaffList.tsx
View file

@ -24,7 +24,7 @@ import {
} from "@saleor/staff/urls";
import { ListProps, RelayToFlat, SortPage } from "@saleor/types";
import { getArrowDirection } from "@saleor/utils/sort";
import classNames from "classnames";
import clsx from "clsx";
import React from "react";
import { FormattedMessage, useIntl } from "react-intl";
@ -141,7 +141,7 @@ const StaffList: React.FC<StaffListProps> = props => {
staffMembers,
staffMember => (
<TableRowLink
className={classNames({
className={clsx({
[classes.tableRow]: !!staffMember,
})}
hover={!!staffMember}

2
src/taxes/pages/TaxChannelsPage/TaxChannelsMenu/TaxChannelsMenu.tsx
View file

@ -6,7 +6,7 @@ import { List, ListHeader, ListItem, ListItemCell } from "@saleor/macaw-ui";
import { taxesMessages } from "@saleor/taxes/messages";
import { taxConfigurationListUrl } from "@saleor/taxes/urls";
import { isLastElement } from "@saleor/taxes/utils/utils";
import clsx from "classnames";
import clsx from "clsx";
import React from "react";
import { FormattedMessage } from "react-intl";

4
src/translations/components/ProductContextSwitcher/ProductContextSwitcher.tsx
View file

@ -17,7 +17,7 @@ import {
productVariantUrl,
TranslatableEntities,
} from "@saleor/translations/urls";
import classNames from "classnames";
import clsx from "clsx";
import React from "react";
import { FormattedMessage, useIntl } from "react-intl";
@ -118,7 +118,7 @@ const ProductContextSwitcher: React.FC<ProductContextSwitcherProps> = ({
{items.find(({ value }) => value === selectedId)?.label || "-"}
</Typography>
<ArrowDropDown
className={classNames(classes.arrow, {
className={clsx(classes.arrow, {
[classes.rotate]: isExpanded,
})}
/>

4
src/translations/components/TranslationFields/TranslationFields.tsx
View file

@ -19,7 +19,7 @@ import {
TranslationFieldType,
} from "@saleor/translations/types";
import { ListProps } from "@saleor/types";
import classNames from "classnames";
import clsx from "clsx";
import React from "react";
import { FormattedMessage } from "react-intl";
@ -145,7 +145,7 @@ const TranslationFields: React.FC<TranslationFieldsProps> = props => {
onClick={() => setExpandedState(!expanded)}
>
<ArrowIcon
className={classNames({
className={clsx({
[classes.rotate]: expanded,
})}
/>

4
src/translations/components/TranslationsEntitiesList/TranslationsEntitiesList.tsx
View file

@ -9,7 +9,7 @@ import Skeleton from "@saleor/components/Skeleton";
import { TablePaginationWithContext } from "@saleor/components/TablePagination";
import TableRowLink from "@saleor/components/TableRowLink";
import { makeStyles } from "@saleor/macaw-ui";
import classNames from "classnames";
import clsx from "clsx";
import React from "react";
import { FormattedMessage, useIntl } from "react-intl";
@ -79,7 +79,7 @@ const TranslationsEntitiesList: React.FC<TranslationsEntitiesListProps> = props
entities,
entity => (
<TableRowLink
className={classNames({
className={clsx({
[classes.tableRow]: !!entity,
})}
hover={!!entity}

10
src/webhooks/components/WebhooksList/WebhooksList.tsx
View file

@ -16,7 +16,7 @@ import { DeleteIcon, IconButton, Pill } from "@saleor/macaw-ui";
import { renderCollection, stopPropagation } from "@saleor/misc";
import { webhookPath } from "@saleor/webhooks/urls";
import { isUnnamed } from "@saleor/webhooks/utils";
import classNames from "classnames";
import clsx from "clsx";
import React from "react";
import { FormattedMessage, useIntl } from "react-intl";
@ -63,9 +63,7 @@ const WebhooksList: React.FC<WebhooksListProps> = ({
<TableCellHeader>
{intl.formatMessage(commonMessages.status)}
</TableCellHeader>
<TableCell
className={classNames(classes.colAction, classes.colRight)}
>
<TableCell className={clsx(classes.colAction, classes.colRight)}>
<FormattedMessage {...messages.action} />
</TableCell>
</TableRowLink>
@ -81,7 +79,7 @@ const WebhooksList: React.FC<WebhooksListProps> = ({
key={webhook ? webhook.id : "skeleton"}
>
<TableCell
className={classNames(classes.colName, {
className={clsx(classes.colName, {
[classes.colNameUnnamed]: isUnnamed(webhook),
})}
>
@ -106,7 +104,7 @@ const WebhooksList: React.FC<WebhooksListProps> = ({
)}
</TableCell>
<TableCell
className={classNames(classes.colAction, classes.colRight)}
className={clsx(classes.colAction, classes.colRight)}
>
<TableButtonWrapper>
<IconButton