Skip to content

Commit

Permalink
chore!: update styled-components to 6 & update DS to 2.0.0-beta.3 (#2…
Browse files Browse the repository at this point in the history
…0260)

* chore: update styled-components to 6

* chore: update admin

* chore: update CM

* chore: update ctb

* chore: update other plugin packages

* chore: update content-releases

* chore: update user-permissions

* chore: update upload

* chore: update fields to be dot notation

* chore: update tests

* chore: update yarn.lock

* chore: update snapshots

* chore: update deps

* chore: update snapshots

* fix: left menu

* test: add label prop to NavLink test

* chore: PR tweaks
  • Loading branch information
joshuaellis committed May 7, 2024
1 parent 7a6d9a2 commit b7c6256
Show file tree
Hide file tree
Showing 375 changed files with 6,775 additions and 9,080 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ const MyComponent = ({ onMoveItem }) => {
) : (
<Flex ref={composedRefs} data-handler-id={handlerId}>
<IconButton
forwardedAs="div"
tag="div"
role="button"
tabIndex={0}
aria-label="Drag"
Expand Down Expand Up @@ -99,7 +99,7 @@ const MyComponent = ({ onDropItem }) => {
{isOverDropTarget && <Placeholder direction={direction} />}
<Flex ref={composedRefs} data-handler-id={handlerId}>
<IconButton
forwardedAs="div"
tag="div"
role="button"
tabIndex={0}
aria-label="Drag"
Expand Down Expand Up @@ -153,7 +153,7 @@ const MyComponent = ({ onMoveItem }) => {
) : (
<Flex ref={composedRefs} data-handler-id={handlerId}>
<IconButton
forwardedAs="div"
tag="div"
role="button"
tabIndex={0}
aria-label="Drag"
Expand Down Expand Up @@ -252,7 +252,7 @@ You might notice in the [basic usage](#basic-usage) section this piece of code:

```jsx
<IconButton
forwardedAs="div"
tag="div"
role="button"
tabIndex={0}
aria-label="Drag"
Expand Down
4 changes: 2 additions & 2 deletions examples/getstarted/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
"strapi": "strapi"
},
"dependencies": {
"@strapi/icons": "2.0.0-beta.2",
"@strapi/icons": "2.0.0-beta.3",
"@strapi/plugin-color-picker": "5.0.0-beta.6",
"@strapi/plugin-documentation": "5.0.0-beta.6",
"@strapi/plugin-graphql": "5.0.0-beta.6",
Expand All @@ -33,7 +33,7 @@
"react-intl": "6.6.2",
"react-router-dom": "6.22.3",
"strapi-plugin-workspace-plugin": "workspace:*",
"styled-components": "5.3.11"
"styled-components": "6.1.8"
},
"engines": {
"node": ">=18.0.0 <=20.x.x",
Expand Down

This file was deleted.

Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { PuzzlePiece } from '@strapi/icons';

import { prefixPluginTranslations } from './utils/prefixPluginTranslations';
import PluginIcon from './components/PluginIcon';
import pluginPkg from '../../package.json';
import pluginId from './pluginId';

Expand All @@ -9,7 +10,7 @@ export default {
register(app) {
app.addMenuLink({
to: `plugins/${pluginId}`,
icon: PluginIcon,
icon: PuzzlePiece,
intlLabel: {
id: `${pluginId}.plugin.name`,
defaultMessage: 'My plugin',
Expand Down Expand Up @@ -57,7 +58,7 @@ export default {
defaultMessage: `custom${upcasedType}`,
},
components: {
Input: async () => import('./components/PluginIcon'),
Input: PuzzlePiece,
},
};

Expand Down
2 changes: 1 addition & 1 deletion examples/kitchensink-ts/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "6.22.3",
"styled-components": "5.3.11"
"styled-components": "6.1.8"
},
"engines": {
"node": ">=18.0.0 <=20.x.x",
Expand Down
2 changes: 1 addition & 1 deletion examples/kitchensink/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "6.22.3",
"styled-components": "5.3.11"
"styled-components": "6.1.8"
},
"engines": {
"node": ">=18.0.0 <=20.x.x",
Expand Down

This file was deleted.

5 changes: 3 additions & 2 deletions examples/plugins/workspace-plugin/admin/src/index.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import PluginIcon from './components/PluginIcon';
import { PuzzlePiece } from '@strapi/icons';

import pluginPkg from '../../package.json';
import pluginId from './pluginId';

Expand All @@ -8,7 +9,7 @@ export default {
register(app) {
app.addMenuLink({
to: `/plugins/${pluginId}`,
icon: PluginIcon,
icon: PuzzlePiece,
intlLabel: {
id: `${pluginId}.plugin.name`,
defaultMessage: 'My plugin',
Expand Down
15 changes: 11 additions & 4 deletions packages/core/admin/admin/src/components/ContentBox.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,11 @@
import { Flex, FlexProps, Typography } from '@strapi/design-system';
import styled from 'styled-components';
import {
Flex,
FlexComponent,
FlexProps,
Typography,
TypographyComponent,
} from '@strapi/design-system';
import { styled } from 'styled-components';

interface ContentBoxProps {
title?: string;
Expand Down Expand Up @@ -40,7 +46,7 @@ const ContentBox = ({
);
};

const IconWrapper = styled(Flex)`
const IconWrapper = styled<FlexComponent>(Flex)`
margin-right: ${({ theme }) => theme.spaces[6]};
svg {
Expand All @@ -49,7 +55,8 @@ const IconWrapper = styled(Flex)`
}
`;

const TypographyWordBreak = styled(Typography)`
const TypographyWordBreak = styled<TypographyComponent>(Typography)`
color: ${({ theme }) => theme.colors.neutral800};
word-break: break-all;
`;

Expand Down
14 changes: 11 additions & 3 deletions packages/core/admin/admin/src/components/ErrorElement.tsx
Original file line number Diff line number Diff line change
@@ -1,8 +1,16 @@
import { Alert, Button, Flex, Main, Typography, Link } from '@strapi/design-system';
import {
Alert,
Button,
Flex,
Main,
Typography,
Link,
TypographyComponent,
} from '@strapi/design-system';
import { Duplicate, WarningCircle } from '@strapi/icons';
import { useIntl } from 'react-intl';
import { useRouteError } from 'react-router-dom';
import styled from 'styled-components';
import { styled } from 'styled-components';

import { useClipboard } from '../hooks/useClipboard';

Expand Down Expand Up @@ -98,7 +106,7 @@ const StyledAlert = styled(Alert)`
}
`;

const ErrorType = styled(Typography)`
const ErrorType = styled<TypographyComponent>(Typography)`
word-break: break-all;
color: ${({ theme }) => theme.colors.danger600};
`;
Expand Down
2 changes: 1 addition & 1 deletion packages/core/admin/admin/src/components/Form.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -738,7 +738,7 @@ const Blocker = ({ onProceed = () => {}, onCancel = () => {} }: BlockerProps) =>
<DialogBody>
<Flex direction="column" gap={2}>
<WarningCircle width="24px" height="24px" fill="danger600" />
<Typography as="p" variant="omega" textAlign="center">
<Typography tag="p" variant="omega" textAlign="center">
{formatMessage({
id: 'global.prompt.unsaved',
defaultMessage: 'You have unsaved changes, are you sure you want to leave?',
Expand Down
62 changes: 30 additions & 32 deletions packages/core/admin/admin/src/components/FormInputs/Boolean.tsx
Original file line number Diff line number Diff line change
@@ -1,45 +1,43 @@
import { forwardRef } from 'react';

import { ToggleInput, useComposedRefs } from '@strapi/design-system';
import { Toggle, useComposedRefs, Field } from '@strapi/design-system';
import { useIntl } from 'react-intl';

import { useFocusInputField } from '../../hooks/useFocusInputField';
import { useField } from '../Form';

import { InputProps } from './types';

const BooleanInput = forwardRef<HTMLInputElement, InputProps>((props, ref) => {
const { formatMessage } = useIntl();
const field = useField<boolean | null>(props.name);
const fieldRef = useFocusInputField(props.name);
const BooleanInput = forwardRef<HTMLInputElement, InputProps>(
({ name, required, label, hint, labelAction, ...props }, ref) => {
const { formatMessage } = useIntl();
const field = useField<boolean | null>(name);
const fieldRef = useFocusInputField<HTMLInputElement>(name);

const composedRefs = useComposedRefs<HTMLInputElement | null>(ref, fieldRef);
const composedRefs = useComposedRefs(ref, fieldRef);

return (
// @ts-expect-error – label _could_ be a ReactNode since it's a child, this should be fixed in the DS.
<ToggleInput
ref={composedRefs}
checked={field.value === null ? null : field.value || false}
error={field.error}
/**
* TODO: reintroduce labelActions
*/
// labelAction={labelAction}
offLabel={formatMessage({
id: 'app.components.ToggleCheckbox.off-label',
defaultMessage: 'False',
})}
onLabel={formatMessage({
id: 'app.components.ToggleCheckbox.on-label',
defaultMessage: 'True',
})}
onChange={field.onChange}
onClear={() => {
field.onChange(props.name, null);
}}
{...props}
/>
);
});
return (
<Field.Root error={field.error} name={name} hint={hint} required={required} maxWidth="320px">
<Field.Label action={labelAction}>{label}</Field.Label>
<Toggle
ref={composedRefs}
checked={field.value === null ? null : field.value || false}
offLabel={formatMessage({
id: 'app.components.ToggleCheckbox.off-label',
defaultMessage: 'False',
})}
onLabel={formatMessage({
id: 'app.components.ToggleCheckbox.on-label',
defaultMessage: 'True',
})}
onChange={field.onChange}
{...props}
/>
<Field.Hint />
<Field.Error />
</Field.Root>
);
}
);

export { BooleanInput };
38 changes: 22 additions & 16 deletions packages/core/admin/admin/src/components/FormInputs/Checkbox.tsx
Original file line number Diff line number Diff line change
@@ -1,28 +1,34 @@
import { forwardRef } from 'react';

import { Checkbox, useComposedRefs } from '@strapi/design-system';
import { Checkbox, useComposedRefs, Field } from '@strapi/design-system';

import { useFocusInputField } from '../../hooks/useFocusInputField';
import { useField } from '../Form';

import { InputProps } from './types';

const CheckboxInput = forwardRef<HTMLInputElement, InputProps>((props, ref) => {
const field = useField<boolean>(props.name);
const fieldRef = useFocusInputField(props.name);
const CheckboxInput = forwardRef<HTMLInputElement, InputProps>(
({ name, required, label, hint, ...props }, ref) => {
const field = useField<boolean>(name);
const fieldRef = useFocusInputField<HTMLInputElement>(name);

const composedRefs = useComposedRefs<HTMLInputElement | null>(ref, fieldRef);
const composedRefs = useComposedRefs(ref, fieldRef);

return (
<Checkbox
onValueChange={(checked) => field.onChange(props.name, checked)}
ref={composedRefs}
value={field.value}
{...props}
>
{props.label || props['aria-label']}
</Checkbox>
);
});
return (
<Field.Root error={field.error} name={name} hint={hint} required={required}>
<Checkbox
onValueChange={(checked) => field.onChange(name, checked)}
ref={composedRefs}
value={field.value}
{...props}
>
{label || props['aria-label']}
</Checkbox>
<Field.Hint />
<Field.Error />
</Field.Root>
);
}
);

export { CheckboxInput };

0 comments on commit b7c6256

Please sign in to comment.