@biom3/react - npm Package Compare versions

Comparing version 0.0.5-alpha to 0.0.6-alpha

.eslintrc.js

 module.exports = {
-  root: true,
-  extends: ["custom"],
+  root: false,
+  extends: ['custom'],
 };

next-env.d.ts

@@ -6,1 +6,3 @@ /// <reference types="next" />
 // see https://nextjs.org/docs/basic-features/typescript for more information.
+
+declare module '*.md';

next.config.js

@@ -6,5 +6,4 @@ // @NOTE: this config is ONLY used for test builds.
   reactStrictMode: true,
-  experimental: {
-    transpilePackages: ["@biom3/tokens"],
-  },
+  transpilePackages: ['@biom3/design-tokens'],
+  experimental: {},
 };

nyc.config.js

@@ -15,7 +15,10 @@ // @TODO: once we have components tested, we need to bump this to 90-95
     'src/**/*.test.tsx',
-    'src/mocks/*',
+    'src/mocks/*.*',
     '*.config.ts',
     '*.config.js',
-    'src/components/Icons/Icon*.tsx',
+    'src/utils/testHelpers.tsx',
+    // @TODO: Not ideal that this procuction code is skipped in calcing coverage ...
+    // we probably need to apply some basic testing to all components at some point ...
+    'src/components/Icon/Icon*.tsx',
   ],
 };

package.json

 {
   "name": "@biom3/react",
-  "version": "0.0.5-alpha",
+  "version": "0.0.6-alpha",
   "main": "./dist/index.js",
@@ -27,5 +27,6 @@ "types": "./dist/index.d.ts",
     "@types/lodash.get": "^4.4.7",
-    "@types/lodash.merge": "^4.6.7",
-    "@types/react": "^18.0.26",
-    "@types/react-dom": "^18.0.9",
+    "@types/lodash.isequal": "^4.5.6",
+    "@types/lodash.throttle": "^4.1.7",
+    "@types/react": "*",
+    "@types/react-dom": "*",
     "babel-plugin-istanbul": "^6.0.0",
@@ -36,22 +37,23 @@ "babel-plugin-lodash": "^3.3.4",
     "csstype": "^3.1.1",
-    "cypress": "^12.1.0",
+    "cypress": "^12.3.0",
     "cypress-real-events": "^1.7.4",
-    "eslint": "^7.32.0",
+    "eslint": "*",
     "eslint-config-custom": "*",
-    "next": "13.0.0",
+    "lodash.isequal": "^4.5.0",
     "next-router-mock": "^0.8.0",
     "tsconfig": "*",
-    "tsup": "^6.5.0",
-    "typescript": "^4.9.3"
+    "tsup": "*",
+    "typescript": "*"
   },
   "dependencies": {
     "@biom3/design-tokens": "*",
-    "@emotion/css": "^11.10.5",
-    "@emotion/react": "^11.10.5",
+    "@emotion/css": "*",
+    "@emotion/react": "*",
     "lodash.get": "^4.4.2",
-    "lodash.merge": "^4.6.2",
+    "lodash.throttle": "^4.1.1",
+    "next": "*",
     "querystring": "^0.2.1",
-    "react": "^18.2.0",
-    "ts-deepmerge": "^5.0.0"
+    "react": "*",
+    "ts-deepmerge": "*"
   }
 }

readme.md

@@ -38,3 +38,3 @@ ![logohd](https://user-images.githubusercontent.com/1452237/205757058-6f0b6602-af1a-4ef9-a7d0-51c5feba1b80.png)
 ```tsx
-<PrimaryButton
+<Button
   sx={{
@@ -56,3 +56,3 @@ background: 'base.gradient.3',
   button text
-</PrimaryButton>
+</Button>
 ```
@@ -63,3 +63,3 @@
 ```tsx
-<PrimaryButton
+<Button
   sx={{
@@ -81,3 +81,3 @@ background: 'base.gradient.3',
   button text
-</PrimaryButton>
+</Button>
 ```
@@ -143,3 +143,4 @@
   sx={{
-    padding: (theme: Theme) => `${theme.ui.spacing.x2} ${theme.ui.spacing.x5}`,
+    padding: (theme: Theme) =>
+      `${theme.base.spacing.x2} ${theme.base.spacing.x5}`,
   }}
@@ -195,4 +196,6 @@ />;
 
-## Presence of NextJS config files
+## NextJS dependence
 
-You may notice that this package contains some nextjs config files / settings. Rest assured, the `@biom3/react` package has zero dependence on next. Next is simply used for internal test build tooling, mostly because its soo easy to do so inside of TurboRepo (and has some minor speed benefits).
+You may notice that this package contains some nextjs config files / settings. `@biom3/react` has a small dependence on NextJS, but only for it's next/link types.
+
+Next is also used for internal test build tooling, mostly because its so easy to do so inside of TurboRepo (and has some minor speed benefits).

src/components/Box/readme.md

@@ -23,3 +23,3 @@ # Box
 ```tsx
-<Box sx={{ display: "flex", gap: "ui.spacing.x3" }} />
+<Box sx={{ display: 'flex', gap: 'base.spacing.x3' }} />
 ```
@@ -34,3 +34,3 @@
 ```tsx
-<Box sx={{ bg: "base.color.status.success.bright" }} />
+<Box sx={{ bg: 'base.color.status.success.bright' }} />
 ```
@@ -41,3 +41,3 @@
 ```tsx
-<Box sx={{ bg: "dodgerblue" }} />
+<Box sx={{ bg: 'dodgerblue' }} />
 ```
@@ -44,0 +44,0 @@

src/components/index.ts

@@ -1,8 +0,11 @@
-export * from './Body';
 export * from './Box';
-export * from './Buttons';
-// @TODO: Link component is not yet ready for release.
-// export * from './Buttons';
-export * from './Caption';
-export * from './Heading';
-export * from './Icons';
+export * from './Clickable';
+export * from './Icon';
+export * from './Text';
+export * from './TextInput';
+export * from './Tabs';
+export * from './FormControl';
+export * from './Select';
+
+// @TODO: Document SSRProvider https://immutable.atlassian.net/browse/DS-162
+export { SSRProvider } from '@react-aria/ssr';

src/hooks/index.ts

 export { useConvertSxToEmotionStyles } from './useConvertSxToEmotionStyles';
 export { useForwardLocalDomRef } from './useForwardLocalDomRef';
+export { useGetSubcomponentChildren } from './useGetSubcomponentChildren';
+export { useResizeObserver } from './useResizeObserver';
 export { useTheme } from './useTheme';

src/hooks/useConvertSxToEmotionStyles.ts

@@ -12,2 +12,3 @@ import type * as CSS from 'csstype';
   const themeProps = useTheme();
+
   let styles: CSS.Properties[] = [];
@@ -21,7 +22,7 @@ let rule: keyof SxProps;
   }
-  const flattened = merge({}, ...styles);
+  const flattened = merge({}, ...styles) as CSS.Properties;
 
-  // This is interesting - why has everything become mandatory here?
-  // ! this is a bandaid solution.
-  return flattened as Partial<typeof flattened>;
+  // @TODO: This is interesting - why has everything become mandatory here?
+  // the below is just a bandaid solution.
+  return flattened;
 }

src/providers/BiomeThemeProvider/readme.md

@@ -17,4 +17,4 @@ # BiomeThemeProvider
 ```tsx
-import { onDarkBase, ui } from '@biom3/design-tokens';
-<BiomeThemeProvider theme={{ base: onDarkBase, ui }}>
+import { onDarkBase } from '@biom3/design-tokens';
+<BiomeThemeProvider theme={{ base: onDarkBase }}>
   <App />
@@ -32,3 +32,3 @@ </BiomeThemeProvider>;
   return (
-    <BiomeThemeProvider theme={{ base, ui }}>
+    <BiomeThemeProvider theme={{ base }}>
       <Component {...pageProps} />
@@ -49,4 +49,4 @@ </BiomeThemeProvider>
 ```tsx
-import { ui, onLightBase, onDarkBase } from '@biom3/design-tokens';
-const DEFAULT_THEME = { base: onLightBase, ui };
+import { onLightBase, onDarkBase } from '@biom3/design-tokens';
+const DEFAULT_THEME = { base: onLightBase };
 export const LightOrDarkThemeProvider = ({
@@ -69,3 +69,3 @@ children,
     } else {
-      setTheme({ base: onDarkBase, ui });
+      setTheme({ base: onDarkBase });
     }
@@ -72,0 +72,0 @@ }, [themeBrightness]);

src/types/asDom.ts

@@ -1,24 +0,4 @@
-import { ElementType } from 'react';
+// @TODO: We need to implement a polymorphic as prop to allow htmlFor to be passed properly to the underlying component as per https://immutable.atlassian.net/browse/DS-155
+export type AsDomProps = keyof JSX.IntrinsicElements;
 
-export type AsDomProps =
-  | 'main'
-  | 'div'
-  | 'p'
-  | 'section'
-  | 'article'
-  | 'span'
-  | 'em'
-  | 'i'
-  | 'button'
-  | 'h1'
-  | 'h2'
-  | 'h3'
-  | 'h4'
-  | 'h5'
-  | 'h6';
-export type ClickableAsDomProps = 'button' | 'a' | ElementType;
-// @TODO: should we only permit Next/Link component props in here?
-// export type ClickableAsDomProps = "button" | "a" | ElementType<Omit<LinkProps, "href">>;
-
 export type AsDomComponentProps = { as?: AsDomProps };
-export type ClickableAsDomComponentProps = { as?: ClickableAsDomProps };

src/types/icon.ts

@@ -0,5 +1,9 @@
+import { DetailedHTMLProps, HTMLAttributes } from 'react';
+import { MakeResponsive } from '../utils/sharedStyleHelpers';
+import { IconReactElement, LinkSize, LinkVariant } from './clickable';
 import { BaseComponentPropTypes } from './shared';
-import { SvgSxComponentProps } from './sxProps';
+import { SvgSxComponentProps, SxProps } from './sxProps';
 
 export type IconProps = BaseComponentPropTypes<SVGSVGElement> &
+  DetailedHTMLProps<HTMLAttributes<SVGSVGElement>, SVGSVGElement> &
   SvgSxComponentProps & { variant?: 'bold' | 'regular' };
@@ -10,1 +14,9 @@
 export type GenericIconProps = IconProps | SingleVariantIconProps;
+
+export type LinkIconProps = {
+  children: IconReactElement;
+  sx?: SxProps;
+  size?: MakeResponsive<LinkSize>;
+  variant?: MakeResponsive<LinkVariant>;
+} & BaseComponentPropTypes<HTMLOrSVGElement> &
+  DetailedHTMLProps<HTMLAttributes<SVGSVGElement>, SVGSVGElement>;

src/types/index.ts

@@ -1,5 +0,8 @@
-export type { AsDomComponentProps, AsDomProps } from './asDom';
-export type { IconProps, SingleVariantIconProps } from './icon';
-export type { BreakpointTheme, ResponsiveKey } from './responsive';
-export type { BaseComponentPropTypes } from './shared';
+export * from './asDom';
+export * from './clickable';
+export * from './icon';
+export * from './input';
+export * from './responsive';
+export * from './shared';
 export * from './sxProps';
+export * from './text';

src/types/shared.ts

@@ -1,2 +0,10 @@
-import { MutableRefObject } from 'react';
+import { Interpolation, Theme } from '@emotion/react';
+import {
+  DetailedHTMLProps,
+  HTMLAttributes,
+  InputHTMLAttributes,
+  MutableRefObject,
+} from 'react';
+import { AsDomComponentProps } from './asDom';
+import { SxComponentProps } from './sxProps';
 
@@ -9,2 +17,16 @@ export type BaseComponentPropTypes<
   onClick?: () => void;
+  className?: string;
+  css?: Interpolation<Theme>;
+  // @TODO: This is a temporary workaround as a polymorphic `as` prop is yet to be implemented: https://immutable.atlassian.net/browse/DS-155
+  htmlFor?: string;
 };
+
+// @TODO: Sx is missing css properties https://immutable.atlassian.net/browse/DS-163
+export type StandardComponentWithProps<
+  TElement extends HTMLOrSVGElement = HTMLOrSVGElement,
+  TProps extends {} = {},
+> = BaseComponentPropTypes<TElement> &
+  AsDomComponentProps &
+  SxComponentProps &
+  DetailedHTMLProps<HTMLAttributes<TElement>, TElement> &
+  TProps;

src/types/sxProps.ts

@@ -15,3 +15,3 @@ import { BiomeTheme, ValidSxValues } from '@biom3/design-tokens';
 
-type WidthProps = MeasurementAndResponsiveMeasurement & {};
+type WidthProps = MeasurementAndResponsiveMeasurement;
 export type WidthSxProps = {
@@ -25,3 +25,3 @@ maxw: WidthProps;
 };
-type HeightProps = MeasurementAndResponsiveMeasurement & {};
+type HeightProps = MeasurementAndResponsiveMeasurement;
 export type HeightSxProps = {
@@ -36,3 +36,3 @@ maxh: HeightProps;
 
-type DisplayProps = MeasurementAndResponsiveMeasurement & {};
+type DisplayProps = MeasurementAndResponsiveMeasurement;
 export type DisplaySxProps = {
@@ -48,2 +48,5 @@ d: DisplayProps;
   flexFlow: FlexProps;
+  flexGrow: FlexProps;
+  flexShrink: FlexProps;
+  flexBasis: FlexProps;
   gap: FlexProps;
@@ -64,2 +67,6 @@ alignItems: FlexProps;
   position: PositionProps;
+  top: PositionProps;
+  bottom: PositionProps;
+  left: PositionProps;
+  right: PositionProps;
 };
@@ -75,2 +82,4 @@
   borderRadius: BorderProps;
+  borderColor: BorderProps;
+  borderWidth: BorderProps;
   b: BorderProps;
@@ -88,3 +97,3 @@ bl: BorderProps;
 
-// @TODO - these need to be crossed over to css-type
+// @TODO: these need to be crossed over to css-type
 export const shortHandCssRuleMapping = {
@@ -98,3 +107,3 @@ c: 'color',
   mt: 'marginTop',
-  mb: 'marginButton',
+  mb: 'marginBottom',
   ml: 'marginLeft',
@@ -106,2 +115,3 @@ mr: 'marginRight',
   pt: 'paddingTop',
+  pb: 'paddingBottom',
   pr: 'paddingRight',
@@ -132,3 +142,3 @@ pl: 'paddingLeft',
 
-type MarginProps = MeasurementAndResponsiveMeasurement & {};
+type MarginProps = MeasurementAndResponsiveMeasurement;
 export type MarginSxProps = {
@@ -140,2 +150,4 @@ marginTop: MarginProps;
   margin: MarginProps;
+  marginX: MarginProps;
+  marginY: MarginProps;
   m: MarginProps;
@@ -150,3 +162,3 @@ mt: MarginProps;
 
-type PaddingProps = MeasurementAndResponsiveMeasurement & {};
+type PaddingProps = MeasurementAndResponsiveMeasurement;
 export type PaddingSxProps = {
@@ -158,2 +170,4 @@ paddingTop: PaddingProps;
   padding: PaddingProps;
+  paddingX: PaddingProps;
+  paddingY: PaddingProps;
   p: PaddingProps;
@@ -168,3 +182,3 @@ pt: PaddingProps;
 
-type BackgroundProps = MeasurementAndResponsiveMeasurement & {};
+type BackgroundProps = MeasurementAndResponsiveMeasurement;
 export type BackgroundSxProps = {
@@ -179,3 +193,3 @@ background: BackgroundProps;
 
-type ColorProps = MeasurementAndResponsiveMeasurement & {};
+type ColorProps = MeasurementAndResponsiveMeasurement;
 export type ColorSxProps = {
@@ -188,3 +202,3 @@ c: ColorProps;
 // For now responsive gradients for fill are unsupported.
-type SvgProps = MeasurementAndResponsiveMeasurement & {};
+type SvgProps = MeasurementAndResponsiveMeasurement;
 export type SvgSxProps = {
@@ -194,3 +208,3 @@ fill: SvgProps;
 
-type TypographyProps = MeasurementAndResponsiveMeasurement & {};
+type TypographyProps = MeasurementAndResponsiveMeasurement;
 export type TypographySxProps = {
@@ -200,6 +214,9 @@ fontSize: TypographyProps;
   fontWeight: TypographyProps;
+  fontFamily: TypographyProps;
   fontStyle: TypographyProps;
+  textDecoration: TypographyProps;
+  textAlign: TypographyProps;
 };
 
-type TransformProps = MeasurementAndResponsiveMeasurement & {};
+type TransformProps = MeasurementAndResponsiveMeasurement;
 export type TransformCxssProps = {
@@ -209,3 +226,3 @@ transform: TransformProps;
 
-type GridProps = MeasurementAndResponsiveMeasurement & {};
+type GridProps = MeasurementAndResponsiveMeasurement;
 export type GridSxProps = {
@@ -233,2 +250,18 @@ gridTemplateColumns: GridProps;
 
+type CursorProps = MeasurementAndResponsiveMeasurement;
+export type CursorSxProps = {
+  cursor: CursorProps;
+};
+
+type ZIndexProps = MeasurementAndResponsiveMeasurement;
+export type ZIndexSxProps = {
+  zIndex: ZIndexProps;
+};
+
+type AccessibilityProps = MeasurementAndResponsiveMeasurement;
+export type AccessibilitySxProps = {
+  appearence: AccessibilityProps;
+  outline: AccessibilityProps;
+};
+
 export type DescendantSxProps = {
@@ -238,3 +271,3 @@ [key: string]: SxProps;
 
-// @TODO - this needs to be more specific - only certain tokens for specific props?
+// @TODO: this needs to be more specific - only certain tokens for specific props?
 export type SxProps = Partial<PositionSxProps> &
@@ -253,3 +286,6 @@ Partial<DisplaySxProps> &
   Partial<TransformCxssProps> &
-  Partial<BoxShadowSxProps>;
+  Partial<BoxShadowSxProps> &
+  Partial<CursorSxProps> &
+  Partial<ZIndexSxProps> &
+  Partial<AccessibilitySxProps>;
 
@@ -265,3 +301,3 @@ export type SvgElementSxProps = Partial<PositionSxProps> &
   Partial<SvgSxProps> &
-  Partial<BoxShadowSxProps>;
+  Partial<ZIndexSxProps>;
 
@@ -268,0 +304,0 @@ export type SxComponentProps = {

src/utils/colorHelpers.ts

@@ -24,2 +24,10 @@ import { SxProps } from '../types';
 
+export function hexWithAlphaToRgbaString(hex: string): string {
+  let r = parseInt(hex.slice(1, 3), 16);
+  let g = parseInt(hex.slice(3, 5), 16);
+  let b = parseInt(hex.slice(5, 7), 16);
+  let a = parseInt(hex.slice(7, 9), 16) / 255;
+  return `rgba(${r}, ${g}, ${b}, ${a})`;
+}
+
 export function rgbaToHex(rgba: string): string {
@@ -26,0 +34,0 @@ // Parse the input string to get the individual red, green, blue, and alpha values

src/utils/sharedStyleHelpers.ts

@@ -1,3 +0,2 @@
-import { BaseTokens } from '@biom3/design-tokens';
-import { Theme } from '@emotion/react';
+import { BaseTokens, BiomeTheme } from '@biom3/design-tokens';
 import merge from 'ts-deepmerge';
@@ -10,3 +9,3 @@
 // N extends N makes sure this is distributive across unions!
-type Tuple<T, N extends number> = N extends N
+export type Tuple<T, N extends number> = N extends N
   ? number extends N
@@ -20,6 +19,6 @@ ? T[]
   keyof BaseTokens['text'][T][keyof BaseTokens['text'][T]];
-type GetTypeVariants<T extends keyof BaseTokens['text']> =
+type GetTypeSizes<T extends keyof BaseTokens['text']> =
   keyof BaseTokens['text'][T];
 
-// @TODO - improve this! add and remove brands at better places.
+// @TODO: Improve this! add and remove brands at better places.
 type ErrorBrand<T extends string> = {
@@ -31,3 +30,3 @@ _error: T;
 
-// @TODO - this is hardcoded for now to allow breakpoints of up to 5
+// @TODO: This is hardcoded for now to allow breakpoints of up to 5
 export type MakeResponsive<T> =
@@ -53,3 +52,3 @@ | T
 
-const DEFAULT_TEXT_VARIANTS = {
+const DEFAULT_TEXT_SIZES = {
   heading: 'medium',
@@ -66,3 +65,3 @@ body: 'medium',
 export function renderResponsiveTextStyles<T extends keyof BaseTokens['text']>({
-  variant,
+  size,
   weight,
@@ -73,13 +72,13 @@ tokenTextComponent,
   tokenTextComponent: T;
-  variant: MakeResponsive<GetTypeVariants<T>>;
+  size: MakeResponsive<GetTypeSizes<T>>;
   weight: MakeResponsive<GetFontWeights<T>>;
-  themeProps: Theme;
+  themeProps: BiomeTheme;
 }) {
-  const variantAsArray = Array.isArray(variant) ? [...variant] : [variant];
+  const sizeAsArray = Array.isArray(size) ? [...size] : [size];
   const weightAsArray = Array.isArray(weight) ? [...weight] : [weight];
 
-  // We need to convince TS that the default values are a subset of the types in variantAsArray and weightAsArray
-  const defaultVariant =
-    variantAsArray.shift() ??
-    (DEFAULT_TEXT_VARIANTS[tokenTextComponent] as GetTypeVariants<T>);
+  // We need to convince TS that the default values are a subset of the types in sizeAsArray and weightAsArray
+  const defaultSize =
+    sizeAsArray.shift() ??
+    (DEFAULT_TEXT_SIZES[tokenTextComponent] as GetTypeSizes<T>);
   const defaultWeight =
@@ -89,5 +88,5 @@ weightAsArray.shift() ??
 
-  const variantStyles = merge(
-    ...variantAsArray.map((responsiveVariant, index) => {
-      if (responsiveVariant != null && !isError(responsiveVariant)) {
+  const sizeStyles = merge(
+    ...sizeAsArray.map((responsiveSize, index) => {
+      if (responsiveSize != null && !isError(responsiveSize)) {
         const mediaStyleRule = `@media screen and (min-width: ${themeProps.base.breakpointAsArray?.[index]}px)`;
@@ -100,3 +99,3 @@ return {
                 themeProps.base.text[tokenTextComponent][
-                  responsiveVariant
+                  responsiveSize
                 ] as BaseTokens['text']['heading']['2xLarge']
@@ -106,3 +105,3 @@ ).regular.fontSize,
               themeProps.base.text[tokenTextComponent][
-                responsiveVariant
+                responsiveSize
               ] as BaseTokens['text']['heading']['2xLarge']
@@ -119,6 +118,6 @@ ).regular.lineHeight,
     ...weightAsArray.map((responsiveWeight, index) => {
-      const responsiveVariant = variantAsArray[index] ?? defaultVariant;
+      const responsiveSize = sizeAsArray[index] ?? defaultSize;
       if (
         responsiveWeight != null &&
-        !isError(responsiveVariant) &&
+        !isError(responsiveSize) &&
         !isError(responsiveWeight)
@@ -130,3 +129,3 @@ ) {
             fontWeight: (
-              themeProps.base.text[tokenTextComponent][responsiveVariant][
+              themeProps.base.text[tokenTextComponent][responsiveSize][
                 responsiveWeight
@@ -142,5 +141,5 @@ ] as BaseTokens['text']['heading']['2xLarge']['regular']
 
-  const styles = merge({}, variantStyles, weightStyles);
+  const styles = merge({}, sizeStyles, weightStyles);
   return {
-    defaultVariant: defaultVariant as RemoveErrorBrand<typeof defaultVariant>,
+    defaultSize: defaultSize as RemoveErrorBrand<typeof defaultSize>,
     defaultWeight: defaultWeight as RemoveErrorBrand<typeof defaultWeight>,
@@ -147,0 +146,0 @@ styles,

src/utils/sxToEmotionStyles.ts

@@ -6,3 +6,3 @@ import {
 } from '@biom3/design-tokens';
-import { Theme } from '@emotion/react';
+
 import type * as CSS from 'csstype';
@@ -48,8 +48,6 @@ import merge from 'ts-deepmerge';
 
-export const partOfTokenRegex = /base.|ui./i;
-
 export function applyStyleAmount(
   rule: keyof SxProps,
   value: string | null,
-  themeProps: Theme,
+  themeProps: BiomeTheme,
 ): CSS.Properties {
@@ -84,3 +82,3 @@ if (!value) return {};
   values: ResponsiveMeasurement[],
-  themeProps: Theme,
+  themeProps: BiomeTheme,
 ) {
@@ -162,3 +160,3 @@ const [defaultValue, ...responsiveValues] = values;
   value: MeasurementAndResponsiveMeasurement,
-  themeProps: Theme,
+  themeProps: BiomeTheme,
 ) {
@@ -165,0 +163,0 @@ const cssValue = typeof value === 'function' ? value(themeProps) : value;

tsconfig.json

 {
   "extends": "tsconfig/react-library.json",
-  "include": ["."],
   "compilerOptions": {
-    "types": ["node", "cypress"],
-    "noErrorTruncation": true
+    "types": ["node", "cypress", "cypress-real-events"],
+    "noErrorTruncation": true,
+    "target": "es2015"
   },
+  "include": ["src", "../../externalTypeOverides.d.ts"],
   "exclude": ["dist", "build", "node_modules"]
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Wildcard dependency

Quality

Package has a dependency with a floating version range. This can cause issues if the dependency publishes a new major version.

Found 5 instances in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

4958465

increased by435.44%

Number of package files

189

increased by29.45%

Lines of code

50850

increased by307.68%

Number of lines in readme file

196

increased by1.55%

Number of low supply chain risk alerts

1

decreased by-95.65%

Worsened metrics

Dependency count

9

increased by12.5%

Dev dependency count

22

increased by4.76%

Number of medium quality alerts

6

increased by500%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Addedlodash.throttle@^4.1.1

• + Addednext@*

• + Added@emnapi/runtime@1.3.1(transitive)

• + Added@img/sharp-darwin-arm64@0.33.5(transitive)

• + Added@img/sharp-darwin-x64@0.33.5(transitive)

• + Added@img/sharp-libvips-darwin-arm64@1.0.4(transitive)

• + Added@img/sharp-libvips-darwin-x64@1.0.4(transitive)

• + Added@img/sharp-libvips-linux-arm@1.0.5(transitive)

• + Added@img/sharp-libvips-linux-arm64@1.0.4(transitive)

• + Added@img/sharp-libvips-linux-s390x@1.0.4(transitive)

• + Added@img/sharp-libvips-linux-x64@1.0.4(transitive)

• + Added@img/sharp-libvips-linuxmusl-arm64@1.0.4(transitive)

• + Added@img/sharp-libvips-linuxmusl-x64@1.0.4(transitive)

• + Added@img/sharp-linux-arm@0.33.5(transitive)

• + Added@img/sharp-linux-arm64@0.33.5(transitive)

• + Added@img/sharp-linux-s390x@0.33.5(transitive)

• + Added@img/sharp-linux-x64@0.33.5(transitive)

• + Added@img/sharp-linuxmusl-arm64@0.33.5(transitive)

• + Added@img/sharp-linuxmusl-x64@0.33.5(transitive)

• + Added@img/sharp-wasm32@0.33.5(transitive)

• + Added@img/sharp-win32-ia32@0.33.5(transitive)

• + Added@img/sharp-win32-x64@0.33.5(transitive)

• + Added@next/env@15.0.3(transitive)

• + Added@next/swc-darwin-arm64@15.0.3(transitive)

• + Added@next/swc-darwin-x64@15.0.3(transitive)

• + Added@next/swc-linux-arm64-gnu@15.0.3(transitive)

• + Added@next/swc-linux-arm64-musl@15.0.3(transitive)

• + Added@next/swc-linux-x64-gnu@15.0.3(transitive)

• + Added@next/swc-linux-x64-musl@15.0.3(transitive)

• + Added@next/swc-win32-arm64-msvc@15.0.3(transitive)

• + Added@next/swc-win32-x64-msvc@15.0.3(transitive)

• + Added@swc/counter@0.1.3(transitive)

• + Added@swc/helpers@0.5.13(transitive)

• + Addedbusboy@1.6.0(transitive)

• + Addedcaniuse-lite@1.0.30001683(transitive)

• + Addedclient-only@0.0.1(transitive)

• + Addedcolor@4.2.3(transitive)

• + Addedcolor-convert@2.0.1(transitive)

• + Addedcolor-name@1.1.4(transitive)

• + Addedcolor-string@1.9.1(transitive)

• + Addeddetect-libc@2.0.3(transitive)

• + Addedis-arrayish@0.3.2(transitive)

• + Addedlodash.throttle@4.1.1(transitive)

• + Addednanoid@3.3.7(transitive)

• + Addednext@15.0.3(transitive)

• + Addedpostcss@8.4.31(transitive)

• + Addedsemver@7.6.3(transitive)

• + Addedsharp@0.33.5(transitive)

• + Addedsimple-swizzle@0.2.2(transitive)

• + Addedsource-map-js@1.2.1(transitive)

• + Addedstreamsearch@1.1.0(transitive)

• + Addedstyled-jsx@5.1.6(transitive)

• + Addedts-deepmerge@7.0.2(transitive)

• + Addedtslib@2.8.1(transitive)

• - Removedlodash.merge@^4.6.2

• - Removedlodash.merge@4.6.2(transitive)

• - Removedts-deepmerge@5.0.0(transitive)

• Updated@emotion/css@*

• Updated@emotion/react@*

• Updatedreact@*

• Updatedts-deepmerge@*