Merged in chore/next15 (pull request #1999)
chore (SW-834): Upgrade to Next 15 * wip: apply codemod and upgrade swc plugin * wip: design-system to react 19, fix issues from async (search)params * wip: fix remaining issues from codemod serverClient is now async because context use headers() getLang is now async because it uses headers() * Minor cleanup * Inline react-material-symbols package Package is seemingly not maintained any more and doesn't support React 19. This copies the package source into `design-system`, makes the necessary changes for 19 and export it for others to use. * Fix missing awaits * Disable modal exit animations Enabling modal exit animations via isExiting prop is causing modals to be rendered in "hidden" state and never unmount. Seems to be an issue with react-aria-components, see https://github.com/adobe/react-spectrum/issues/7563. Can probably be fixed by rewriting to a solution similar to https://react-spectrum.adobe.com/react-aria/examples/framer-modal-sheet.html * Remove unstable cache implementation and use in memory cache locally * Fix ref type in SelectFilter * Use cloneElement to add key prop to element Approved-by: Linus Flood
This commit is contained in:
Anton Gunnarsson
@@ -1,5 +1,3 @@
|
||||
import 'react-material-symbols/rounded'
|
||||
|
||||
import type { Meta, StoryObj } from '@storybook/react'
|
||||
|
||||
import { fn } from '@storybook/test'
|
||||
|
||||
@@ -1,7 +1,4 @@
|
||||
import {
|
||||
MaterialSymbol,
|
||||
type MaterialSymbolProps,
|
||||
} from 'react-material-symbols'
|
||||
import { MaterialSymbol, type MaterialSymbolProps } from './MaterialSymbol'
|
||||
|
||||
import { iconVariants } from '../variants'
|
||||
|
||||
|
||||
@@ -0,0 +1,101 @@
|
||||
// This is adapted from https://github.com/edjonesdev/react-material-symbols
|
||||
// since it doesn't support React 19 and is not maintained anymore.
|
||||
// We should probably move to a different solution in the future.
|
||||
|
||||
import type { ElementType, CSSProperties, ReactElement, Ref } from 'react'
|
||||
import type {
|
||||
MaterialSymbolWeight,
|
||||
PolymorphicComponentProps,
|
||||
SymbolCodepoints,
|
||||
} from './types'
|
||||
import { cx } from 'class-variance-authority'
|
||||
export type { MaterialSymbolWeight, SymbolCodepoints } from './types'
|
||||
|
||||
export type MaterialSymbolProps = {
|
||||
/** Required. The name of the icon to render. */
|
||||
icon: SymbolCodepoints
|
||||
/** Default `false`.
|
||||
*
|
||||
* Fill gives you the ability to modify the default icon style. A single icon can render both unfilled and filled states. */
|
||||
fill?: boolean
|
||||
/** Weight defines the symbol’s stroke weight, with a range of weights between thin (100) and heavy (900). Weight can also affect the overall size of the symbol. */
|
||||
weight?: MaterialSymbolWeight
|
||||
/** Weight and grade affect a symbol’s thickness. Adjustments to grade are more granular than adjustments to weight and have a small impact on the size of the symbol. */
|
||||
grade?: number
|
||||
/** Default `'inherit'`.
|
||||
*
|
||||
* Size defines the icon width and height in pixels. For the image to look the same at different sizes, the stroke weight (thickness) changes as the icon size scales. */
|
||||
size?: number
|
||||
/** Default `'inherit'`
|
||||
*
|
||||
* Color accepts key values (`'red'`, `'blue'`, `'indigo'`, etc.), `<hex-color>`, `<rgb()>`, `<hsl()>` and `<hwb()>` values. */
|
||||
color?: CSSProperties['color']
|
||||
className?: string
|
||||
style?: CSSProperties
|
||||
}
|
||||
|
||||
export type PolymorphicMaterialSymbolProps<C extends ElementType> =
|
||||
PolymorphicComponentProps<C, MaterialSymbolProps>
|
||||
|
||||
export const MaterialSymbol = (<C extends ElementType>(
|
||||
{
|
||||
icon,
|
||||
onClick,
|
||||
as,
|
||||
weight,
|
||||
fill = false,
|
||||
grade,
|
||||
size,
|
||||
style: propStyle,
|
||||
color,
|
||||
className,
|
||||
...props
|
||||
}: PolymorphicMaterialSymbolProps<C>,
|
||||
ref: Ref<C>
|
||||
): ReactElement => {
|
||||
const Component =
|
||||
onClick !== undefined ? 'button' : ((as as ElementType) ?? 'span')
|
||||
const style = { color, ...propStyle }
|
||||
|
||||
if (fill)
|
||||
style.fontVariationSettings = [style.fontVariationSettings, '"FILL" 1']
|
||||
.filter(Boolean)
|
||||
.join(', ')
|
||||
if (weight)
|
||||
style.fontVariationSettings = [
|
||||
style.fontVariationSettings,
|
||||
`"wght" ${weight}`,
|
||||
]
|
||||
.filter(Boolean)
|
||||
.join(', ')
|
||||
if (grade)
|
||||
style.fontVariationSettings = [
|
||||
style.fontVariationSettings,
|
||||
`"GRAD" ${grade}`,
|
||||
]
|
||||
.filter(Boolean)
|
||||
.join(', ')
|
||||
if (size) {
|
||||
style.fontVariationSettings = [
|
||||
style.fontVariationSettings,
|
||||
`"opsz" ${size}`,
|
||||
]
|
||||
.filter(Boolean)
|
||||
.join(', ')
|
||||
style.fontSize = size
|
||||
}
|
||||
|
||||
return (
|
||||
<Component
|
||||
{...props}
|
||||
ref={ref}
|
||||
style={style}
|
||||
onClick={onClick}
|
||||
className={cx('material-symbols', className)}
|
||||
>
|
||||
{icon}
|
||||
</Component>
|
||||
)
|
||||
}) as <C extends ElementType>(
|
||||
props: PolymorphicMaterialSymbolProps<C>
|
||||
) => ReactElement
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1 @@
|
||||
export { MaterialSymbol, type MaterialSymbolProps } from './MaterialSymbol'
|
||||
@@ -0,0 +1,55 @@
|
||||
import type {
|
||||
JSXElementConstructor,
|
||||
ComponentPropsWithoutRef,
|
||||
JSX,
|
||||
} from 'react'
|
||||
import type { MaterialSymbolWeightArray, SymbolCodepointsArray } from './consts'
|
||||
|
||||
export type SymbolCodepoints = (typeof SymbolCodepointsArray)[number]
|
||||
|
||||
export type MaterialSymbolWeight = (typeof MaterialSymbolWeightArray)[number]
|
||||
|
||||
export interface AsProperty<C extends React.ElementType> {
|
||||
/**
|
||||
* An override of the default HTML tag.
|
||||
* Can also be another React component.
|
||||
*/
|
||||
as?: C
|
||||
}
|
||||
|
||||
/**
|
||||
* A more sophisticated version of `InheritableElementProps` where
|
||||
* the passed in `as` prop will determine which props can be included
|
||||
*/
|
||||
export type PolymorphicComponentProps<
|
||||
C extends React.ElementType,
|
||||
Properties = Record<string, unknown>,
|
||||
> = InheritableElementProps<C, Properties & AsProperty<C>>
|
||||
|
||||
/**
|
||||
* Source: https://github.com/emotion-js/emotion/blob/master/packages/styled-base/types/helper.d.ts
|
||||
* A more precise version of just React.ComponentPropsWithoutRef on its own
|
||||
*/
|
||||
export type PropsOf<
|
||||
C extends keyof JSX.IntrinsicElements | JSXElementConstructor<unknown>,
|
||||
> = JSX.LibraryManagedAttributes<C, ComponentPropsWithoutRef<C>>
|
||||
|
||||
/**
|
||||
* Allows for extending a set of props (`ExtendedProps`) by an overriding set of props
|
||||
* (`OverrideProps`), ensuring that any duplicates are overridden by the overriding
|
||||
* set of props.
|
||||
*/
|
||||
export type ExtendableProps<
|
||||
ExtendedProperties = Record<string, unknown>,
|
||||
OverrideProperties = Record<string, unknown>,
|
||||
> = OverrideProperties & Omit<ExtendedProperties, keyof OverrideProperties>
|
||||
|
||||
/**
|
||||
* Allows for inheriting the props from the specified element type so that
|
||||
* props like children, className & style work, as well as element-specific
|
||||
* attributes like aria roles. The component (`C`) must be passed in.
|
||||
*/
|
||||
export type InheritableElementProps<
|
||||
C extends React.ElementType,
|
||||
Properties = Record<string, unknown>,
|
||||
> = ExtendableProps<PropsOf<C>, Properties>
|
||||
@@ -1,5 +1,3 @@
|
||||
import 'react-material-symbols/rounded'
|
||||
|
||||
import type { Meta, StoryObj } from '@storybook/react'
|
||||
|
||||
import { Loading } from './Loading'
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import type { Dispatch, SetStateAction } from 'react'
|
||||
import type { Dispatch, JSX, SetStateAction } from 'react'
|
||||
|
||||
export enum AnimationStateEnum {
|
||||
unmounted = 'unmounted',
|
||||
|
||||
@@ -1,5 +1,3 @@
|
||||
import 'react-material-symbols/rounded'
|
||||
|
||||
import type { Meta, StoryObj } from '@storybook/react'
|
||||
|
||||
import { Select } from './Select'
|
||||
|
||||
@@ -99,7 +99,7 @@ export function SelectFilter({
|
||||
const [value, setValue] = useState<Key | null>(defaultSelectedKey ?? null)
|
||||
const iconColor = isDisabled ? 'Icon/Interactive/Disabled' : 'Icon/Default'
|
||||
|
||||
const inputRef = useRef<HTMLInputElement>(null)
|
||||
const inputRef = useRef<HTMLInputElement>(null!)
|
||||
|
||||
return (
|
||||
<ComboBox
|
||||
|
||||
@@ -55,6 +55,7 @@
|
||||
"./Icons/MarskiLogoIcon": "./dist/components/Icons/Logos/MarskiLogo.js",
|
||||
"./Icons/MassageIcon": "./dist/components/Icons/Customised/Amenities_Facilities/Massage.js",
|
||||
"./Icons/MaterialIcon": "./dist/components/Icons/MaterialIcon/index.js",
|
||||
"./Icons/MaterialIcon/MaterialSymbol": "./dist/components/Icons/MaterialIcon/MaterialSymbol/index.js",
|
||||
"./Icons/MinimizeIcon": "./dist/components/Icons/Customised/UI/Minimize.js",
|
||||
"./Icons/MirrorIcon": "./dist/components/Icons/Customised/Amenities_Facilities/Mirror.js",
|
||||
"./Icons/MoneyHandIcon": "./dist/components/Icons/Illustrations/MoneyHand.js",
|
||||
@@ -128,9 +129,9 @@
|
||||
"check-types": "tsc --noEmit"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^18.2.0",
|
||||
"react": "^19.1.0",
|
||||
"react-aria-components": "^1.7.1",
|
||||
"react-dom": "^18.2.0"
|
||||
"react-dom": "^19.1.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@storybook/addon-essentials": "^8.6.12",
|
||||
@@ -143,8 +144,8 @@
|
||||
"@storybook/test": "^8.6.12",
|
||||
"@types/css-modules": "^1.0.5",
|
||||
"@types/node": "^20.17.17",
|
||||
"@types/react": "^18",
|
||||
"@types/react-dom": "^18",
|
||||
"@types/react": "^19",
|
||||
"@types/react-dom": "^19",
|
||||
"@typescript-eslint/eslint-plugin": "^8.32.0",
|
||||
"@typescript-eslint/parser": "^8.32.0",
|
||||
"@vitejs/plugin-react": "^4.4.1",
|
||||
@@ -154,18 +155,17 @@
|
||||
"deepmerge-ts": "^7.1.5",
|
||||
"eslint": "^8",
|
||||
"eslint-plugin-react-hooks": "^5.2.0",
|
||||
"eslint-plugin-react-refresh": "^0.4.18",
|
||||
"eslint-plugin-storybook": "^0.11.2",
|
||||
"eslint-plugin-react-refresh": "^0.4.20",
|
||||
"eslint-plugin-storybook": "^0.12.0",
|
||||
"glob": "^11.0.2",
|
||||
"husky": "^9.1.7",
|
||||
"jiti": "^1.21.0",
|
||||
"lint-staged": "^15.5.2",
|
||||
"motion": "^12.10.0",
|
||||
"prettier": "^3.5.3",
|
||||
"react": "^18.2.0",
|
||||
"react": "^19.1.0",
|
||||
"react-aria-components": "^1.8.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-material-symbols": "^4.4.0",
|
||||
"react-dom": "^19.1.0",
|
||||
"rollup": "^4.40.2",
|
||||
"rollup-preserve-directives": "^1.1.3",
|
||||
"storybook": "^8.6.12",
|
||||
|
||||
Reference in New Issue
Block a user