Batch of makeStyles removal

MIGRATION_QUICK_START.md

@@ -0,0 +1,173 @@
+# makeStyles → CSS Modules Migration - Quick Start
+
+> **Full details**: See [MAKESTYLES_TO_CSS_MODULES_MIGRATION.md](./MAKESTYLES_TO_CSS_MODULES_MIGRATION.md)
+
+## Current Status
+
+**Progress**: 11/245 files (4.5%)
+
+**Current Batch**: Batch 1 - Shared Components (11/62 files completed in `/src/components/`)
+
+## Quick Migration Steps
+
+### For Inline Styles
+
+1. **Create CSS module**: `ComponentName.module.css`
+2. **Convert styles**: Copy from `makeStyles` → CSS, convert JSS syntax
+3. **Update component**:
+
+   ```diff
+   - import { makeStyles } from "@saleor/macaw-ui";
+   + import styles from "./ComponentName.module.css";
+
+   - const useStyles = makeStyles({ ... });
+
+   - const classes = useStyles();
+   - <div className={classes.root}>
+   + <div className={styles.root}>
+   ```
+
+### For Separate Styles Files
+
+1. **Create CSS module**: `ComponentName.module.css`
+2. **Convert styles**: Copy from `styles.ts` → CSS
+3. **Update component**: Replace `useStyles` import with CSS module import
+4. **Delete**: `styles.ts` file
+
+## Key Conversions
+
+### Spacing (8px grid)
+
+```javascript
+theme.spacing(1)   → var(--mu-spacing-8)   // 8px
+theme.spacing(2)   → var(--mu-spacing-16)  // 16px
+theme.spacing(3)   → var(--mu-spacing-24)  // 24px
+theme.spacing(4)   → var(--mu-spacing-32)  // 32px
+```
+
+### Colors (contextual)
+
+```javascript
+// Background
+theme.palette... → var(--mu-colors-background-default1)
+
+// Text
+theme.palette... → var(--mu-colors-text-default1)
+theme.palette.saleor.main[3] → var(--mu-colors-text-default2)
+
+// Border
+theme.palette... → var(--mu-colors-border-default1)
+```
+
+### Breakpoints (hardcoded from themeOverrides.ts)
+
+```javascript
+[theme.breakpoints.down("sm")] → @media (max-width: 600px)
+[theme.breakpoints.up("md")]   → @media (min-width: 960px)
+[theme.breakpoints.up("lg")]   → @media (min-width: 1680px)
+```
+
+### JSS Syntax
+
+```javascript
+// Nested selectors
+"& > div" → .root > div
+
+// Pseudo-selectors
+"& input::-webkit..." → .class input::-webkit...
+
+// Increased specificity
+"&&" → .button.button
+```
+
+## Testing Commands
+
+```bash
+pnpm run lint           # Auto-fix formatting
+pnpm run check-types    # Type checking
+pnpm run knip           # Check unused imports
+pnpm run dev            # Visual testing
+```
+
+## Batch Order
+
+1. ✅ **Batch 0**: Setup (No action - CSS vars already exist!)
+2. ⏳ **Batch 1**: Shared Components (~14 files in `/src/components/`)
+3. ⏳ **Batch 2**: Customers (~1-2 files)
+4. ⏳ **Batch 3**: Shipping (~4 files)
+5. ⏳ **Batch 4**: Gift Cards (~4 files)
+6. ⏳ **Batch 5**: Channels (~3 files)
+7. ⏳ **Batch 6**: Taxes (~8 files)
+8. ⏳ **Batch 7**: Extensions (~6 files)
+9. ⏳ **Batch 8-9**: Discounts (~8 files, 2 batches)
+10. ⏳ **Batch 10-15**: Orders (~15 files, 3 batches)
+11. ⏳ **Batch 16+**: Remaining modules
+
+## Example Migration
+
+**Before** (`Pill.tsx`):
+
+```typescript
+import { makeStyles } from "@saleor/macaw-ui";
+
+const useStyles = makeStyles({
+  pill: {
+    borderRadius: "32px",
+    border: "1px solid",
+    fontWeight: 500,
+    paddingLeft: "2px",
+    "& > span": {
+      fontWeight: 500,
+    },
+  },
+}, { name: "Pill" });
+
+export const Pill = (props) => {
+  const classes = useStyles();
+  return <div className={classes.pill}>...</div>;
+};
+```
+
+**After** (`Pill.tsx` + `Pill.module.css`):
+
+`Pill.tsx`:
+
+```typescript
+import styles from "./Pill.module.css";
+
+export const Pill = (props) => {
+  return <div className={styles.pill}>...</div>;
+};
+```
+
+`Pill.module.css`:
+
+```css
+.pill {
+  border-radius: 32px;
+  border: 1px solid;
+  font-weight: 500;
+  padding-left: 2px;
+}
+
+.pill > span {
+  font-weight: 500;
+}
+```
+
+## Workflow
+
+1. Pick a batch from the list
+2. Find files with `makeStyles` using: `grep -r "makeStyles" src/[module]/`
+3. Convert each file following the patterns above
+4. Run testing commands
+5. Update progress in `MAKESTYLES_TO_CSS_MODULES_MIGRATION.md`
+6. Commit batch changes
+7. Move to next batch
+
+## Notes
+
+- CSS variables from `@saleor/macaw-ui-next` are already available globally
+- Drop-in replacement - no functional changes
+- Visual appearance should be identical after migration
+- Use existing CSS modules as reference (see `/src/components/Timeline/*.module.css`)

src/attributes/components/AttributeDetails/AttributeDetails.tsx

@@ -1,6 +1,6 @@
 import { NumericUnits } from "@dashboard/attributes/components/AttributeDetails/NumericUnits";
 import { DashboardCard } from "@dashboard/components/Card";
-import FormSpacer from "@dashboard/components/FormSpacer";
+import { FormSpacer } from "@dashboard/components/FormSpacer";
 import { Select } from "@dashboard/components/Select";
 import {
   AttributeEntityTypeEnum,

src/attributes/components/AttributeProperties/AttributeProperties.tsx

@@ -1,6 +1,6 @@
 import { ATTRIBUTE_TYPES_WITH_CONFIGURABLE_FACED_NAVIGATION } from "@dashboard/attributes/utils/data";
 import { DashboardCard } from "@dashboard/components/Card";
-import FormSpacer from "@dashboard/components/FormSpacer";
+import { FormSpacer } from "@dashboard/components/FormSpacer";
 import { AttributeErrorFragment, AttributeTypeEnum } from "@dashboard/graphql";
 import { FormChange } from "@dashboard/hooks/useForm";
 import { commonMessages } from "@dashboard/intl";

src/auth/components/NewPasswordPage/NewPasswordPage.tsx

@@ -1,5 +1,5 @@
 import Form from "@dashboard/components/Form";
-import FormSpacer from "@dashboard/components/FormSpacer";
+import { FormSpacer } from "@dashboard/components/FormSpacer";
 import { AccountErrorFragment } from "@dashboard/graphql";
 import { SubmitPromise } from "@dashboard/hooks/useForm";
 import getAccountErrorMessage from "@dashboard/utils/errors/account";

src/auth/components/ResetPasswordPage/ResetPasswordPage.tsx

@@ -1,6 +1,6 @@
 import { useLastLoginMethod } from "@dashboard/auth/hooks/useLastLoginMethod";
 import Form from "@dashboard/components/Form";
-import FormSpacer from "@dashboard/components/FormSpacer";
+import { FormSpacer } from "@dashboard/components/FormSpacer";
 import { iconSize, iconStrokeWidth } from "@dashboard/components/icons";
 import { getAppMountUri } from "@dashboard/config";
 import { AccountErrorCode } from "@dashboard/graphql";

src/auth/components/ResetPasswordSuccessPage/ResetPasswordSuccessPage.tsx

@@ -1,4 +1,4 @@
-import FormSpacer from "@dashboard/components/FormSpacer";
+import { FormSpacer } from "@dashboard/components/FormSpacer";
 import { Button, Text } from "@saleor/macaw-ui-next";
 import { FormattedMessage } from "react-intl";
 

src/categories/components/CategoryDetailsForm/CategoryDetailsForm.tsx

@@ -1,5 +1,5 @@
 import { DashboardCard } from "@dashboard/components/Card";
-import FormSpacer from "@dashboard/components/FormSpacer";
+import { FormSpacer } from "@dashboard/components/FormSpacer";
 import RichTextEditor from "@dashboard/components/RichTextEditor";
 import { RichTextEditorLoading } from "@dashboard/components/RichTextEditor/RichTextEditorLoading";
 import { ProductErrorFragment } from "@dashboard/graphql";

src/channels/components/ChannelForm/ChannelForm.tsx

@@ -5,7 +5,7 @@ import {
 } from "@dashboard/channels/pages/ChannelDetailsPage/types";
 import { DashboardCard } from "@dashboard/components/Card";
 import { Combobox } from "@dashboard/components/Combobox";
-import FormSpacer from "@dashboard/components/FormSpacer";
+import { FormSpacer } from "@dashboard/components/FormSpacer";
 import { iconSize, iconStrokeWidth } from "@dashboard/components/icons";
 import {
   ChannelErrorFragment,

src/collections/components/CollectionDetails/CollectionDetails.tsx

@@ -1,5 +1,5 @@
 import { DashboardCard } from "@dashboard/components/Card";
-import FormSpacer from "@dashboard/components/FormSpacer";
+import { FormSpacer } from "@dashboard/components/FormSpacer";
 import RichTextEditor from "@dashboard/components/RichTextEditor";
 import { RichTextEditorLoading } from "@dashboard/components/RichTextEditor/RichTextEditorLoading";
 import { CollectionErrorFragment } from "@dashboard/graphql";

src/components/CardSpacer.module.css

@@ -0,0 +1,9 @@
+.spacer {
+  margin-top: var(--mu-spacing-32);
+}
+
+@media (max-width: 600px) {
+  .spacer {
+    margin-top: var(--mu-spacing-16);
+  }
+}

src/components/CardSpacer.tsx

@@ -1,30 +1,17 @@
-import { makeStyles } from "@saleor/macaw-ui";
 import { vars } from "@saleor/macaw-ui-next";
 import * as React from "react";
 
-const useStyles = makeStyles(
-  theme => ({
-    spacer: {
-      [theme.breakpoints.down("sm")]: {
-        marginTop: theme.spacing(2),
-      },
-      marginTop: theme.spacing(4),
-    },
-  }),
-  { name: "CardSpacer" },
-);
+import styles from "./CardSpacer.module.css";
 
 interface CardSpacerProps {
   children?: React.ReactNode;
   backgroundColor?: keyof typeof vars.colors.background;
 }
 
 export const CardSpacer = ({ children, backgroundColor = "default1" }: CardSpacerProps) => {
-  const classes = useStyles(children);
-
   return (
     <div
-      className={classes.spacer}
+      className={styles.spacer}
       style={{
         backgroundColor: vars.colors.background[backgroundColor],
       }}

src/components/Checkbox/Checkbox.module.css

@@ -0,0 +1,3 @@
+.error {
+  color: var(--mu-colors-text-critical1);
+}

src/components/Checkbox/Checkbox.tsx

@@ -1,16 +1,8 @@
 // @ts-strict-ignore
 import MuiCheckbox, { CheckboxProps as MuiCheckboxProps } from "@material-ui/core/Checkbox";
 import FormHelperText from "@material-ui/core/FormHelperText";
-import { makeStyles } from "@saleor/macaw-ui";
 
-const useStyles = makeStyles(
-  theme => ({
-    error: {
-      color: theme.palette.error.main,
-    },
-  }),
-  { name: "Checkbox" },
-);
+import styles from "./Checkbox.module.css";
 
 type CheckboxProps = Omit<
   MuiCheckboxProps,
@@ -27,7 +19,6 @@ const firefoxHandler = (event, onChange, checked) => {
 };
 const Checkbox = ({ helperText, error, ...props }: CheckboxProps) => {
   const { disableClickPropagation, ...rest } = props;
-  const classes = useStyles();
 
   return (
     <>
@@ -48,7 +39,7 @@ const Checkbox = ({ helperText, error, ...props }: CheckboxProps) => {
         }
       />
       {helperText && (
-        <FormHelperText classes={{ root: error && classes.error }}>{helperText}</FormHelperText>
+        <FormHelperText classes={{ root: error && styles.error }}>{helperText}</FormHelperText>
       )}
     </>
   );

src/components/Chip/Chip.module.css

@@ -0,0 +1,18 @@
+.closeIcon {
+  cursor: pointer;
+  font-size: 16px;
+  margin-left: var(--mu-spacing-8);
+  vertical-align: middle;
+}
+
+.label {
+  color: #fff;
+}
+
+.root {
+  background: color-mix(in srgb, var(--mu-colors-background-accent1), transparent 20%);
+  border-radius: 18px;
+  display: inline-block;
+  margin-right: var(--mu-spacing-16);
+  padding: 6px 12px;
+}

src/components/Chip/Chip.tsx

@@ -1,51 +1,29 @@
 import { iconSize, iconStrokeWidth } from "@dashboard/components/icons";
-import { alpha } from "@material-ui/core/styles";
-import { makeStyles } from "@saleor/macaw-ui";
 import { Text } from "@saleor/macaw-ui-next";
 import clsx from "clsx";
 import { X } from "lucide-react";
 import * as React from "react";
 
+import styles from "./Chip.module.css";
+
 interface ChipProps {
   className?: string;
   label: React.ReactNode;
   onClose?: () => void;
 }
 
-const useStyles = makeStyles(
-  theme => ({
-    closeIcon: {
-      cursor: "pointer",
-      fontSize: 16,
-      marginLeft: theme.spacing(),
-      verticalAlign: "middle",
-    },
-    label: {
-      color: theme.palette.common.white,
-    },
-    root: {
-      background: alpha(theme.palette.primary.main, 0.8),
-      borderRadius: 18,
-      display: "inline-block",
-      marginRight: theme.spacing(2),
-      padding: "6px 12px",
-    },
-  }),
-  { name: "Chip" },
-);
 const Chip = (props: ChipProps) => {
   const { className, label, onClose } = props;
-  const classes = useStyles(props);
 
   return (
-    <div className={clsx(classes.root, className)}>
-      <Text className={classes.label} size={2} fontWeight="medium">
+    <div className={clsx(styles.root, className)}>
+      <Text className={styles.label} size={2} fontWeight="medium">
         {label}
         {onClose && (
           <X
             size={iconSize.small}
             strokeWidth={iconStrokeWidth}
-            className={classes.closeIcon}
+            className={styles.closeIcon}
             onClick={onClose}
           />
         )}

src/components/CompanyAddressInput/CompanyAddressForm.tsx

@@ -1,5 +1,5 @@
 // @ts-strict-ignore
-import FormSpacer from "@dashboard/components/FormSpacer";
+import { FormSpacer } from "@dashboard/components/FormSpacer";
 import Grid from "@dashboard/components/Grid";
 import { AddressTypeInput } from "@dashboard/customers/types";
 import {