Merge branch 'develop' into feat/edit-allocation-modal-makeover

.changeset/soft-pets-breathe.md

@@ -0,0 +1,5 @@
+---
+"@medusajs/client-types": patch
+---
+
+feat(types): package scaffolding for generated types

package.json

@@ -4,6 +4,7 @@
  "workspaces": {
  "packages": [
  "packages/*",
+ "packages/generated/*",
  "packages/oas/*",
  "integration-tests/**/*"
  ]

packages/admin-ui/ui/src/components/atoms/avatar/index.tsx

@@ -34,18 +34,18 @@ const Avatar: React.FC<AvatarProps> = ({
  return (
  <RadixAvatar.Root
  className={clsx(
- "w-full h-full items-center justify-center overflow-hidden select-none rounded-circle",
+ "rounded-circle h-full w-full select-none items-center justify-center overflow-hidden",
  color
  )}
  >
  <RadixAvatar.Image
  src={user?.img}
  alt={username}
- className="object-cover w-full h-full rounded-circle"
+ className="rounded-circle h-full w-full object-cover"
  />
  <RadixAvatar.Fallback
  className={clsx(
- "w-full h-full flex items-center justify-center bg-inherit text-grey-0 rounded-circle",
+ "text-grey-0 rounded-circle flex h-full w-full items-center justify-center bg-inherit",
  font
  )}
  >

packages/admin-ui/ui/src/components/atoms/back-button/index.tsx

@@ -1,5 +1,4 @@
 import clsx from "clsx"
-import React from "react"
 import { useNavigate } from "react-router-dom"
 import ArrowLeftIcon from "../../fundamentals/icons/arrow-left-icon"
 
@@ -18,7 +17,7 @@ const BackButton = ({ path, label = "Go back", className }: Props) => {
  }}
  className={clsx("px-small py-xsmall", className)}
  >
- <div className="flex items-center gap-x-xsmall text-grey-50 inter-grey-40 inter-small-semibold">
+ <div className="gap-x-xsmall text-grey-50 inter-grey-40 inter-small-semibold flex items-center">
  <ArrowLeftIcon size={20} />
  <span className="ml-1">{label}</span>
  </div>

packages/admin-ui/ui/src/components/atoms/checkbox/index.tsx

@@ -12,13 +12,13 @@ const Checkbox = React.forwardRef(
  useImperativeHandle(ref, () => checkboxRef.current)
  return (
  <label
- className={clsx("flex items-center cursor-pointer", className)}
+ className={clsx("flex cursor-pointer items-center", className)}
  htmlFor={id}
  >
  <input
  type="checkbox"
  ref={checkboxRef}
- className="form-checkbox w-[20px] h-[20px] rounded-base text-violet-60 focus:ring-0 mr-small border-grey-30"
+ className="form-checkbox rounded-base text-violet-60 mr-small border-grey-30 h-[20px] w-[20px] focus:ring-0"
  value={value}
  id={id}
  {...rest}

packages/admin-ui/ui/src/components/atoms/date-picker/custom-header.tsx

@@ -12,7 +12,7 @@ const CustomHeader = ({
 
  const year = date.getFullYear()
  return (
- <div className="flex w-full gap-4 items-center">
+ <div className="flex w-full items-center gap-4">
  <div className="flex flex-1 items-center justify-end gap-3">
  <NativeSelect
  defaultValue={monthName}

packages/admin-ui/ui/src/components/atoms/date-picker/date-picker.tsx

@@ -50,13 +50,13 @@ const DatePicker: React.FC<DateTimePickerProps> = ({
  <PopoverPrimitive.Root open={isOpen} onOpenChange={setIsOpen}>
  <PopoverPrimitive.Trigger asChild>
  <button
- className={clsx("w-full rounded-rounded border ", {
+ className={clsx("rounded-rounded w-full border ", {
  "shadow-input border-violet-60": isOpen,
  "border-grey-20": !isOpen,
  })}
  >
- <InputContainer className="border-0 shadown-none focus-within:shadow-none">
- <div className="w-full flex text-grey-50 pr-0.5 justify-between">
+ <InputContainer className="shadown-none border-0 focus-within:shadow-none">
+ <div className="text-grey-50 flex w-full justify-between pr-0.5">
  <InputHeader
  {...{
  label,
@@ -76,23 +76,23 @@ const DatePicker: React.FC<DateTimePickerProps> = ({
  <PopoverPrimitive.Content
  side="top"
  sideOffset={8}
- className="rounded-rounded px-8 border border-grey-20 bg-grey-0 w-full shadow-dropdown"
+ className="rounded-rounded border-grey-20  bg-grey-0 shadow-dropdown w-full border px-8"
  >
  <CalendarComponent date={tempDate} onChange={setTempDate} />
- <div className="flex w-full mb-8 mt-5">
+ <div className="mb-8 mt-5 flex w-full">
  <Button
  variant="ghost"
  size="medium"
  onClick={() => setIsOpen(false)}
- className="mr-2 w-1/3 flex justify-center border border-grey-20"
+ className="border-grey-20 mr-2 flex w-1/3 justify-center border"
  >
  Cancel
  </Button>
  <Button
  size="medium"
  variant="primary"
  onClick={() => submitDate()}
- className="w-2/3 flex justify-center"
+ className="flex w-2/3 justify-center"
  >{`Set ${label}`}</Button>
  </div>
  </PopoverPrimitive.Content>

packages/admin-ui/ui/src/components/atoms/date-picker/time-picker.tsx

@@ -49,13 +49,13 @@ const TimePicker: React.FC<DateTimePickerProps> = ({
  <PopoverPrimitive.Root open={isOpen} onOpenChange={setIsOpen}>
  <PopoverPrimitive.Trigger asChild>
  <button
- className={clsx("w-full rounded-rounded border ", {
+ className={clsx("rounded-rounded w-full border ", {
  "shadow-input border-violet-60": isOpen,
  "border-grey-20": !isOpen,
  })}
  >
- <InputContainer className="border-0 shadown-none focus-within:shadow-none">
- <div className="w-full flex text-grey-50 pr-0.5 justify-between">
+ <InputContainer className="shadown-none border-0 focus-within:shadow-none">
+ <div className="text-grey-50 flex w-full justify-between pr-0.5">
  <InputHeader
  {...{
  label,
@@ -66,7 +66,7 @@ const TimePicker: React.FC<DateTimePickerProps> = ({
  />
  <ArrowDownIcon size={16} />
  </div>
- <div className="w-full items-center flex text-left text-grey-40">
+ <div className="text-grey-40 flex w-full items-center text-left">
  <ClockIcon size={16} />
  <span className="mx-1">UTC</span>
  <span className="text-grey-90">
@@ -79,7 +79,7 @@ const TimePicker: React.FC<DateTimePickerProps> = ({
  <PopoverPrimitive.Content
  side="top"
  sideOffset={8}
- className="rounded-rounded scrollbar-hide border px-6 pt-6 pb-4 border-grey-20 bg-grey-0 w-full flex shadow-dropdown"
+ className="rounded-rounded scrollbar-hide border-grey-20 bg-grey-0 shadow-dropdown flex w-full border px-6 pt-6 pb-4"
  >
  <NumberScroller
  numbers={hourNumbers}
@@ -92,7 +92,7 @@ const TimePicker: React.FC<DateTimePickerProps> = ({
  selected={selectedMinute}
  onSelect={(n) => setSelectedMinute(n)}
  />
- <div className="absolute bottom-4 left-0 right-0 bg-gradient-to-b from-transparent to-grey-0 h-xlarge z-10" />
+ <div className="to-grey-0 h-xlarge absolute bottom-4 left-0 right-0 z-10 bg-gradient-to-b from-transparent" />
  </PopoverPrimitive.Content>
  </PopoverPrimitive.Root>
  </div>

packages/admin-ui/ui/src/components/atoms/fade-wrapper/index.tsx

@@ -37,7 +37,7 @@ const Fade: React.FC<FadeProps> = ({
 
  return (
  <div
- className={clsx("transition-all duration-100 z-50", classes, classname)}
+ className={clsx("z-50 transition-all duration-100", classes, classname)}
  >
  {show ? children : null}
  </div>

packages/admin-ui/ui/src/components/atoms/file-upload-field/index.tsx

@@ -77,7 +77,7 @@ const FileUploadField: React.FC<FileUploadFieldProps> = ({
  onDrop={handleFileDrop}
  onDragOver={(e) => e.preventDefault()}
  className={clsx(
- "flex flex-col select-none inter-base-regular text-grey-50 cursor-pointer items-center justify-center w-full h-full rounded-rounded border-2 border-dashed border-grey-20 transition-colors hover:border-violet-60 hover:text-grey-40",
+ "inter-base-regular text-grey-50 rounded-rounded border-grey-20 hover:border-violet-60 hover:text-grey-40 flex h-full w-full cursor-pointer select-none flex-col items-center justify-center border-2 border-dashed transition-colors",
  className
  )}
  >

packages/admin-ui/ui/src/components/atoms/includes-tax-tooltip/index.tsx

@@ -1,5 +1,4 @@
 import clsx from "clsx"
-import React from "react"
 import TaxesIcon from "../../fundamentals/icons/taxes-icon"
 import Tooltip from "../tooltip"
 
@@ -10,7 +9,7 @@ type Props = {
 const IncludesTaxTooltip = ({ includesTax }: Props) => {
  return (
  <Tooltip content={includesTax ? "Tax incl. price" : "Tax excl. price"}>
- <div className="w-large h-large rounded-rounded border border-grey-20 flex items-center justify-center">
+ <div className="w-large h-large rounded-rounded border-grey-20 flex items-center justify-center border">
  <TaxesIcon
  size={16}
  className={clsx({

packages/admin-ui/ui/src/components/atoms/input-error/index.tsx

@@ -1,6 +1,5 @@
 import { ErrorMessage } from "@hookform/error-message"
 import clsx from "clsx"
-import React from "react"
 import { MultipleFieldErrors } from "react-hook-form"
 import Tooltip from "../tooltip"
 
@@ -22,7 +21,7 @@ const InputError = ({ errors, name, className }: InputErrorProps) => {
  render={({ message, messages }) => {
  return (
  <div
- className={clsx("text-rose-50 inter-small-regular mt-2", className)}
+ className={clsx("inter-small-regular mt-2 text-rose-50", className)}
  >
  {messages ? (
  <MultipleMessages messages={messages} />
@@ -43,12 +42,12 @@ const MultipleMessages = ({ messages }: { messages: MultipleFieldErrors }) => {
  const remainderErrors = errors.slice(1)
 
  return (
- <div className="flex items-center gap-x-1 cursor-default">
+ <div className="flex cursor-default items-center gap-x-1">
  <p>{displayedError}</p>
  {remainderErrors?.length > 0 && (
  <Tooltip
  content={
- <div className="text-rose-50 inter-small-regular">
+ <div className="inter-small-regular text-rose-50">
  {remainderErrors.map((e, i) => {
  return (
  <p key={i}>

packages/admin-ui/ui/src/components/atoms/notification/index.tsx

@@ -30,7 +30,7 @@ const Notification: React.FC<NotificationProps> = ({
  return (
  <ToasterContainer visible={toast.visible} className="w-[380px]">
  <div>{getIcon(type)}</div>
- <div className="flex flex-col ml-small mr-base gap-y-2xsmall flex-grow text-white">
+ <div className="ml-small mr-base gap-y-2xsmall flex flex-grow flex-col text-white">
  <span className="inter-small-semibold">{title}</span>
  <span className="inter-small-regular text-grey-20">{message}</span>
  </div>

packages/admin-ui/ui/src/components/atoms/number-scroller/index.tsx

@@ -18,7 +18,7 @@ const NumberScroller: React.FC<NumberScrollerProps> = ({
  <div
  {...props}
  className={clsx(
- "flex flex-col time-list h-[305px] overflow-y-auto",
+ "time-list flex h-[305px] flex-col overflow-y-auto",
  className
  )}
  >
@@ -27,14 +27,14 @@ const NumberScroller: React.FC<NumberScrollerProps> = ({
  <div
  key={i}
  className={clsx(
- "w-[40px] h-[40px] last:mb-4 rounded inter-base-regular hover:bg-grey-20",
+ "inter-base-regular hover:bg-grey-20 h-[40px] w-[40px] rounded last:mb-4",
  {
- "bg-violet-60 hover:bg-violet-50 text-grey-0 inter-base-semibold":
+ "bg-violet-60 text-grey-0 inter-base-semibold hover:bg-violet-50":
  n === selected,
  }
  )}
  >
- <button onClick={() => onSelect(n)} className="w-full h-full py-2">
+ <button onClick={() => onSelect(n)} className="h-full w-full py-2">
  {n.toLocaleString("en-US", { minimumIntegerDigits: 2 })}
  </button>
  </div>

packages/admin-ui/ui/src/components/atoms/os-shortcut/index.tsx

@@ -1,5 +1,3 @@
-import React from "react"
-
 type OSShortcutProps = {
  winModifiers: string | string[]
  macModifiers: string | string[]
@@ -38,8 +36,8 @@ const OSShortcut = ({ winModifiers, macModifiers, keys }: OSShortcutProps) => {
  }
 
  return (
- <div className="flex items-center text-grey-40">
- <p className="m-0 inter-base-semibold">
+ <div className="text-grey-40 flex items-center">
+ <p className="inter-base-semibold m-0">
  <span className="inter-base-semibold">{modifiers} </span>
  {input}
  </p>

packages/admin-ui/ui/src/components/atoms/save-notification/error-state.tsx

@@ -32,7 +32,7 @@ const ErrorState: React.FC<SavingStateProps> = ({
  <div>
  <XCircleIcon size={20} className="text-rose-40" />
  </div>
- <div className="flex flex-col ml-small mr-base gap-y-2xsmall flex-grow">
+ <div className="ml-small mr-base gap-y-2xsmall flex flex-grow flex-col">
  <span className="inter-small-semibold">{title}</span>
  <span className="inter-small-regular text-grey-50">{message}</span>
  </div>

packages/admin-ui/ui/src/components/atoms/save-notification/index.tsx

@@ -54,21 +54,21 @@ const SaveNotification: React.FC<SaveNotificationProps> = ({
  }
 
  return (
- <ToasterContainer visible={toast.visible} className="p-0 pl-base w-[448px]">
+ <ToasterContainer visible={toast.visible} className="pl-base w-[448px] p-0">
  <div className="py-base">{getIcon(icon)}</div>
- <div className="flex flex-col ml-small mr-base gap-y-2xsmall flex-grow py-base">
+ <div className="ml-small mr-base gap-y-2xsmall py-base flex flex-grow flex-col">
  <span className="inter-small-semibold">{title}</span>
  <span className="inter-small-regular text-grey-50">{message}</span>
  </div>
- <div className="flex flex-col inter-small-semibold border-l border-grey-20 h-full">
+ <div className="inter-small-semibold border-grey-20 flex h-full flex-col border-l">
  <button
  onClick={handleSave}
- className="inter-small-semibold flex items-center justify-center h-1/2 border-b border-grey-20 px-base text-violet-60"
+ className="inter-small-semibold border-grey-20 px-base text-violet-60 flex h-1/2 items-center justify-center border-b"
  >
  Publish
  </button>
  <button
- className="inter-small-semibold flex items-center justify-center h-1/2 px-base"
+ className="inter-small-semibold px-base flex h-1/2 items-center justify-center"
  onClick={onDismiss}
  >
  Discard

packages/admin-ui/ui/src/components/atoms/save-notification/saving-state.tsx

@@ -19,7 +19,7 @@ const SavingState: React.FC<SavingStateProps> = ({
  <div>
  <Spinner variant="secondary" size="large" />
  </div>
- <div className="flex flex-col ml-small mr-base gap-y-2xsmall flex-grow">
+ <div className="ml-small mr-base gap-y-2xsmall flex flex-grow flex-col">
  <span className="inter-small-semibold">{title}</span>
  <span className="inter-small-regular text-grey-50">{message}</span>
  </div>

packages/admin-ui/ui/src/components/atoms/save-notification/success-state.tsx

@@ -32,7 +32,7 @@ const SuccessState: React.FC<SavingStateProps> = ({
  <div>
  <CheckCircleIcon size={20} className="text-emerald-40" />
  </div>
- <div className="flex flex-col ml-small mr-base gap-y-2xsmall flex-grow">
+ <div className="ml-small mr-base gap-y-2xsmall flex flex-grow flex-col">
  <span className="inter-small-semibold">{title}</span>
  <span className="inter-small-regular text-grey-50">{message}</span>
  </div>

packages/admin-ui/ui/src/components/atoms/spinner.tsx

@@ -19,10 +19,10 @@ const Spinner: React.FC<SpinnerProps> = ({
  { "h-[16px] w-[16px]": size === "small" }
  )}
  >
- <div className="flex items-center justify-center relative w-full h-full">
+ <div className="relative flex h-full w-full items-center justify-center">
  <div
  className={clsx(
- "animate-ring border-2 h-4/5 w-4/5 rounded-circle border-transparent",
+ "animate-ring rounded-circle h-4/5 w-4/5 border-2 border-transparent",
  { "border-t-grey-0": variant === "primary" },
  { "border-t-violet-60": variant === "secondary" }
  )}

packages/admin-ui/ui/src/components/atoms/switch/index.tsx

@@ -1,6 +1,5 @@
 import * as RadixSwitch from "@radix-ui/react-switch"
 import clsx from "clsx"
-import React from "react"
 
 /**
  * A controlled switch component atom.
@@ -11,12 +10,12 @@ function Switch(props: RadixSwitch.SwitchProps) {
  {...props}
  disabled={props.disabled}
  className={clsx(
- "w-8 h-[18px] rounded-full transition-bg bg-gray-300 radix-state-checked:bg-violet-60"
+ "transition-bg radix-state-checked:bg-violet-60 h-[18px] w-8 rounded-full bg-gray-300"
  )}
  >
  <RadixSwitch.Thumb
  className={clsx(
- "w-2 h-2 bg-white rounded-full block transition-transform translate-x-[5px] radix-state-checked:translate-x-[19px]"
+ "radix-state-checked:translate-x-[19px] block h-2 w-2 translate-x-[5px] rounded-full bg-white transition-transform"
  )}
  />
  </RadixSwitch.Root>

packages/admin-ui/ui/src/components/atoms/thumbnail/thumbnail.tsx

@@ -11,17 +11,17 @@ export const Thumbnail = ({ src, className, size = "small" }: Props) => {
  return (
  <div
  className={clsx(
- "bg-grey-5 flex items-center justify-center overflow-hidden rounded-rounded",
+ "bg-grey-5 rounded-rounded flex items-center justify-center overflow-hidden",
  {
- "w-[30px] h-10": size === "small",
- "w-9 h-12": size === "medium",
- "w-[170px] h-[226px]": size === "large",
+ "h-10 w-[30px]": size === "small",
+ "h-12 w-9": size === "medium",
+ "h-[226px] w-[170px]": size === "large",
  },
  className
  )}
  >
  {src ? (
- <img src={src} className="object-cover object-center flex-1" />
+ <img src={src} className="flex-1 object-cover object-center" />
  ) : (
  <ImagePlaceholderIcon />
  )}