# DevEx Changelog

This is to track changes to the front end code that affect the developer's experience e.g. new reusable components or changes to the way they are used.

## [#10058](https://github.com/beatchain/beatchain-monorepo/pull/10058)

- :sparkles: New props: `customWidth` and `maxLengthInput` added to `SelectCreatable`.

## [#10032](https://github.com/beatchain/beatchain-monorepo/pull/10032)

- :arrow_up: Upgrade dependancy: `react` and `react-dom` to `18.2.0`
- :arrow_up: Upgrade dependancy: `@types/node` to `18.13.0`.
- :arrow_up: Upgrade dependancy: `@types/react` to `18.0.28`.
- :arrow_up: Upgrade dependancy: `@types/react-dom` to `18.0.10`.
- :heavy_plus_sign: New dependancy: `@acusti/react-code-input`. To replace `react-code-input` but not implemented yet.
- :arrow_up: Upgrade dependancy: `emoji-mart` to `5.5.2`.
- :heavy_plus_sign: New dependancy: `@emoji-mart/data` and `@emoji-mart/react`.
- :heavy_plus_sign: New dependancy: `@hedgedoc/html-to-react`.
- :heavy_minus_sign: Remove dependancy: `react-html-parser`.
- :heavy_plus_sign: New dependancy: `@react-spring/web`.
- :heavy_minus_sign: Remove dependancy: `react-spring`.
- :arrow_up: Upgrade dependancy: `qrcode.react` to `3.1.0`.
- :arrow_up: Upgrade dependancy: `rc-slider` to `10.1.1`.
- :arrow_up: Upgrade dependancy: `react-div-100vh` to `0.7.0`.
- :arrow_up: Upgrade dependancy: `react-select` to `5.4.0`.
- :arrow_up: Upgrade dependancy: `react-switch` to `7.0.0`.
- :heavy_minus_sign: Remove dependancy: `use-interval`.
- :fire: Delete component: `app/PageLoader`.

## [#10001](https://github.com/beatchain/beatchain-monorepo/pull/10001)

- :goal_net: Add typescript version of `no-use-before-define`.

## [#9989](https://github.com/beatchain/beatchain-monorepo/pull/9989)

- :sparkles: New component: `Stepper`.

## [#9978](https://github.com/beatchain/beatchain-monorepo/pull/9978)

- :bug: Fix scrollfade showing when there is no hidden content.

## [#9889](https://github.com/beatchain/beatchain-monorepo/pull/9889)

- :sparkles: Add new prop value: `lg-responsive` to `Modal` size.

## [#9879](https://github.com/beatchain/beatchain-monorepo/pull/9879)

- :fire: Delete `constructQueryParam`, use `URLSearchParams` instead.
- :fire: Delete `NoSubscriptionBlocker`.
- :fire: Delete `AdSettings`.
- :fire: Remove `socials`, `spotifyProfileUrl` and `hasSocialProfileForPosting` from `useActiveArtist`.
- :fire: Remove `onboardedSocial`, `fugaArtistId`, `orgId`, `genres`, `scrapedPlatforms`and `appWebLogo` from `Artist` type.
- :label: Comment out `ad_account`, `facebookPixel` and `facebook_pixel` in `Artist` type.

## [#9816](https://github.com/beatchain/beatchain-monorepo/pull/9816)

- :fire: Delete `useAlertModal`.
- :fire: Delete `useLogOut`.
- :fire: Delete `useModal`.
- :fire: Delete `Alert`.
- :fire: Delete `ModalPadding`.
- :fire: Delete `UnauthorizedModal`.
- :fire: Delete `ui` store and `ModalWrapper`.
- :fire: Remove `dark` from `TextArea`.
- :fire: Remove `isLight` from `Input`.
- :fire: Delete `DspLinksGrid`.
- :fire: Remove `isLightMode` from `Box`.
- :fire: Delete `Dialogue`.
- :fire: Delete `CloseButton`.

## [#9814](https://github.com/beatchain/beatchain-monorepo/pull/9814)

- :sparkles: Add new prop: `overlayColorName` to `PageLoader`.

## [#9806](https://github.com/beatchain/beatchain-monorepo/pull/9806)

- :fire: delete `useOpenWallet`.

## [#9795](https://github.com/beatchain/beatchain-monorepo/pull/9795)

- :fire: Remove `lwarning` from `theme`.
- :lipstick: Change `warning` from `rgb(164, 37, 59)` to `rgb(241, 96, 85)` in `theme`.

## [#9770](https://github.com/beatchain/beatchain-monorepo/pull/9770)

- :sparkles: Add new props: `isFullWidth` and `onGroupSelect` to `Select`.

## [#9754](https://github.com/beatchain/beatchain-monorepo/pull/9754)

- :sparkles: New helper: `toast`. Use instead of directy from `react-toastify`.

## [#9748](https://github.com/beatchain/beatchain-monorepo/pull/9748)

- :sparkles: New prop: `isNotScrollable` added to `TabsItem`.
- :sparkles: New prop: `templateRows` added to `EquallySpacedColumn`.
- :sparkles: New prop: `isFullHeight` added to `EquallySpacedRow`.

## [#9739](https://github.com/beatchain/beatchain-monorepo/pull/9739)

- :fire: Remove `isFullWidth` and `useWhiteText` from `ToggleWithLabels`.
- :fire: Delete never used release step component: `CheckIsExistingArtist`.

## [#9733](https://github.com/beatchain/beatchain-monorepo/pull/9733)

- :fire: Delete `ModalFooter`.

## [#9728](https://github.com/beatchain/beatchain-monorepo/pull/9728)

- :sparkles: Add `hasSavedProfile` and `getSavedProfile` helpers to `useSocials`.
- :fire: Delete hook: `useIsSocialConnected`.
-

## [#9726](https://github.com/beatchain/beatchain-monorepo/pull/9726)

- :label: Change `isInModal`to `isInBox` in 'SelectCreatable`.
- :sparkles: New component: `Dropdown`.

## [#9719](https://github.com/beatchain/beatchain-monorepo/pull/9719)

- :fire: Delete old `Budget` step component.

## [#9715](https://github.com/beatchain/beatchain-monorepo/pull/9715)

- :fire: Remove `style="background-color: black;"` from `body` tag in all HTML files.
- :lipstick: Change `background-color` of `body` from `white` to `theme.black` in `App.styled`.
- :lipstick: Use `theme.lgrey` instead of `rgb(128,128,128)` in `EditHypeLinkLink`.
- :lipstick: Use `theme.black` instead of `black` in `ErrorPage`.
- :lipstick: Change `defaultColors.backgroundColour` from `rgb(0,0,0)` to `rgb(8, 8, 8)` in `hypelinks.config`.
- :lipstick: Change `background` from `rgb(12, 12, 12)` to `rgb(8, 8, 8)` in `theme`.
- :fire: Remove `hasLogOutButton` and `isLightMode` from `FormPage`.
- :fire: Remove `isLightMode` from `Autosuggest`.
- :sparkles: New prop: `isInModal` added to `Autosuggest`.
- :fire: Remove `isLightMode` from `DashboardRow`.

## [#9713](https://github.com/beatchain/beatchain-monorepo/pull/9713)

- :sparkles: New prop: `maxWidth` in `WizardStep`.

## [#9704](https://github.com/beatchain/beatchain-monorepo/pull/9704)

- :fire: Remove actions: `forceChangePassword` and `forceChangePasswordError`.
- :fire: Remove sagas: `forceChangePasswordSaga` and `forceChangePasswordSuccessSaga`.
- :fire: Remove `FORCE_CHANGE_PASSWORD` from`AuthState`.

## [#9703](https://github.com/beatchain/beatchain-monorepo/pull/9703)

- :fire: Remove actions: `requestResetPassword`, `requestResetPasswordSuccess`, `requestResetPasswordError`, `resetPassword`, `resetPasswordSuccess` and `resetPasswordError`.
- :fire: Remove sagas: `requestResetPasswordSaga` and `resetPasswordSaga`.
- :fire: Remove `REQUEST_RESET_PASSWORD` and `RESET_PASSWORD` from `AuthState`

## [#9702](https://github.com/beatchain/beatchain-monorepo/pull/9702)

- :sparkles: New hook: `useScrapeInsights`.

## [#9701](https://github.com/beatchain/beatchain-monorepo/pull/9701)

- :fire: Removed args: `exact` and `use3DecimalPlaces` from `formatCurrency` and `getFormattedAmountWithCurrency`.
- :sparkles: Added arg: `options` to `formatCurrency` and `getFormattedAmountWithCurrency`.

- formatCurrency(cost, props.currency, false, true)
+ formatCurrency(cost, props.currency, { mantissa: 3 })

- :fire: Removed `isLabelEditable` from `ListPage`.
- :sparkles: New prop: `isNotWrappedInCard` in `WizardStep`.

## [#9699](https://github.com/beatchain/beatchain-monorepo/pull/9699)

- :heavy_minus_sign: Uninstall `universal-cookie`. Use `js-cookie` package instead in sagas etc.
- :heavy_plus_sign: Installed `react-cookie` and wrapped `App` in `CookieProvider`. `useCookies` returns the current cookies and allows setting and removing cookies.

	const [cookies, setCookie, removeCookie] = useCookies(['cookieKey']);

- :sparkles: New hook: `useCookie`. Wrapper around `useCookies`. Appends `ActId` to cookie key and handles expiration in days.

	const [cookie, setCookie, removeCookie] = useCookie('cookieKey');

- :fire: Remove `isLightMode` from `ProgressCircle`.
- :fire: Delete `BoxInBoxInBox`. Replaced with `Box`.
- :fire: Remove `isDisabled`, `tooltip` and `tooltipText` from `TabsItem`.
- :truck: Rename `infographics/BoxInBoxWithDropdown` to `common/BoxWithDropdown`
- :fire: Remove `isLight` from `Toggle`.
- :fire: Remove `isLightMode`, `notes` from `Wizard` and `WizardStep`.
- :fire: Remove `type`, `isFullHeight` and `maxWidth` from `WizardStep`.
- :fire: Remove `isModal` from 'Wizard`.
- :fire: Remove `isLightMode` from `ReleasePreview`.

## [#9696](https://github.com/beatchain/beatchain-monorepo/pull/9696)

- :lipstick: Revised greys to 18 per step with 8 base

- grey: 'rgb(119, 119, 119)',
- mgrey: 'rgb(64, 64, 64)',
- dgrey: 'rgb(48, 48, 48)',
- vdgrey: 'rgb(32, 32, 32)',
- vvdgrey: 'rgb(16, 16, 16)',
+ grey: 'rgb(98, 98, 98)',
+ mgrey: 'rgb(80, 80, 80)',
+ dgrey: 'rgb(62, 62, 62)',
+ vdgrey: 'rgb(44, 44, 44)',
+ vvdgrey: 'rgb(26, 26, 26)',
  black: 'rgb(8, 8, 8)',

## [#9687](https://github.com/beatchain/beatchain-monorepo/pull/9687)

- :fire: Remove `templateColumns` and `templateRows` from `Box`.
- :label: Add `space-between` as option for `justifyContent` in `EquallySpacedRow`.
- :fire: Delete component: `Column`.
- :fire: Remove unused props from `Row`.
- :label: Rename `ai` to `alignItems` in `Row`.

## [#9685](https://github.com/beatchain/beatchain-monorepo/pull/9685)

- :fire: Delete component `EditBudgetDialogue` .
- :wastebasket: Remove `openEditBudgetDialogue` from `Budget`. (in favor credits budget step)
- :lipstick: Added colour: `lwarning`. For contrast in the new dark modal.

+ lwarning: 'rgb(241, 96, 85)'

- :sparkles: Modals throughout the app are using dark mode modals
- :construction: The modal with expiring token is WIP until saga updates are made.

## [#9684](https://github.com/beatchain/beatchain-monorepo/pull/9684)

- :fire: Remove `isContentPaddedForScrollbar` from `Scrollbars`.
- :sparkles: New props: `hasPadding` and `showTrack` in`Scrollbars`

## [#9683](https://github.com/beatchain/beatchain-monorepo/pull/9683)

- :label: Rename `h` to `boxHeight` in `Box`.
- :label: Rename `ji` to `justifyItems` in `InfoPair`.

## [#9681](https://github.com/beatchain/beatchain-monorepo/pull/9681)

- :bug: Bring back page titles to aid navigation
- :sparkles: New prop: `wrapperElement` in `ConditionalWrapper`.
- :wastebasket: Old prop: `wrapper`. Use `wrapperElement` instead. This fixes the issue with `wrapper` being defined every render and the lint warning that goes with that.

<ConditionalWrapper
  condition={condition}
-  wrapper={children => <Tooltip id="tooltip_id">{children}</Scrollbars>}
+  wrapperElement={<Tooltip id="tooltip_id" />}
>
  <Button text="Button" />
</ConditionalWrapper>

## [#9661](https://github.com/beatchain/beatchain-monorepo/pull/9661)

- :fire: Delete`useMediaLibrary` completely as well as all the old code in redux and `ModalWrapper`.
- :sparkles: New hook: `useToggle`. Returns a value and a function to toggle value.
- :fire: Removed `isLight` from `Select`, `SelectCreatable` and `getReactSelectStyles`.
- :sparkles: Added `isInModal` to `SelectCreatable`. This is passed into `getReactSelectStyles` as `isInBox`.
- :sparkles: New component: `AlertModal`. Abstraction of `Modal` for small dialogues.

  <AlertModal
    isShown={isDeleteDialogueOpen}
    hide={toggleIsDeleteDialogueOpen}
    headerText="Delete"
    text="Are you sure you want to delete this item?"
    actionButton={{ text: 'Delete', onPress: deleteItem }}
  />

- ~~:sparkles: New props:`h` (height), `templateColumns` and `templateRows` in `Box`.~~
- ~~:label: Replace `isCentered` with `ji` (justify content) in `InfoPair`.~~
- New component: `MediaLibraryModal`. Wraps the main `MediaLibrary` in `Modal` and handles all the insert media logic.

  <MediaLibraryModal
    isShown={isMediaLibraryOpen}
    hide={toggleMediaLibrary}
    headerText="Insert Media"
    onInsert={props.onAddMedia!}
    selectedItemUrl={props.mediaUrl}
    accept={props.accept}
    dropzoneText={props.dropzoneText}
  />

- ~~:sparkles: New component: `Column`~~
- :sparkles: New prop: `isInModal` in `Input`. This can be used alone or in combination with `isInBox` to make inputs even lighter.
- :sparkles: New prop:`isInModal` in `Select` and `getReactSelectStyles`. This is used in combination with `isInBox` to make select inputs even lighter.
- :sparkles: New prop: `isCompact` in `ToggleButton`. This makes it fit content, use Heading text and have a smaller icon.
- :lipstick: `mgrey` changed from `rgb(219, 219, 219)` (between `lgrey` and `vlgrey`) to `rgb(64, 64, 64)` (between `grey` and `dgrey`).
- :lipstick: `black` changed from `rgb(0, 0, 0)` to `rgb(8, 8, 8)`.

## [#9660](https://github.com/beatchain/beatchain-monorepo/pull/9660)

- :sparkles: New prop: `isButtonOnly` in `AudioPlayer`. This can be used to display just a play/pause button.

## [#9657](https://github.com/beatchain/beatchain-monorepo/pull/9657)

- :fire: Deleted`usePaywall` and other paywall files from codebase.
- :fire: Removed `isLightMode` from `TrackApprovalGrid`, `BoxInBoxWithDropdown` and `TextCollapseBox`.
- :fire: Removed `isDarkBg` from `ToggleButton`. Dark mode style used by default.
- :sparkles: New prop: `colourName` added to `Text`. This can be used with any typography element.

- <DescriptionTextPink>{message}</DescriptionTextPink>
+ <DescriptionText colourName="tertiary">{message}</DescriptionText>

## [#9640](https://github.com/beatchain/beatchain-monorepo/pull/9640)

- :sparkles: New declarative `Modal` component. Uses React portal to render it's children at the root of the app.

    <Modal
      isShown={isShown}
      hide={toggleIsShown}
      headerText="Modal Header"
    >
      <Component />
    </Modal>

- :sparkles: New component: `ButtonWithTooltip`. Wraps `Button` in `Tooltip`. Could possibly use `ConditionalWrapper` in the future.

    <ButtonWithTooltip
      tooltip="tooltip text"
      text="Button text"
      onPress={onPress}
    />

- :fire: Removed `isLightMode` from `Version` and `KpiWrapper`.
- :fire: Removed `useDynamicColor` from `KpiWrapper`.

## [#9583](https://github.com/beatchain/beatchain-monorepo/pull/9583)

- :label:`ColourName` added to types. To be used whenever a theme colour name is used.

+ import { ColourName } from 'ui/types';

- colour: string;
+ colour: ColourName;

- ${props =>
-   props.theme[props.colour] && `colour: ${props.theme[props.colour]};`}
+ colour: ${props.theme[props.colour]};