feat: Replace defaultProps with plain Javascript default parameters

It's not necessarily the cleanest way to do it, but it works.

package.json

@@ -69,7 +69,7 @@
     "eslint-plugin-storybook": "^0.6.12",
     "jsdom": "^16.2.1",
     "mocha": "^10.2.0",
-    "node-sass": "^8.0.0",
+    "sass": "^1.77.8",
     "prop-types": "^15.8.1",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",

src/basic-version.tsx

@@ -21,7 +21,13 @@ export interface Props extends CommonProps {
   children?: ReactNode,
 }
 
-function Sticky(props: Props) {
+export const defaultProps = {
+  ...StickyRenderProp.defaultProps,
+  stickyClassName: 'sticky',
+  wrapperClassName: '',
+  stickyStyle: {},
+};
+function Sticky(props: Partial<Props>) {
   const {
     // props for StickyRenderProp
     mode,
@@ -45,7 +51,10 @@ function Sticky(props: Props) {
 
     // rest of the props that we will forward to wrapper
     ...rest
-  } = props;
+  } = {
+    ...defaultProps,
+    ...props
+  };
 
   return <StickyRenderProp
     mode={mode}
@@ -78,11 +87,4 @@ function Sticky(props: Props) {
   </StickyRenderProp>
 }
 
-Sticky.defaultProps = {
-  ...StickyRenderProp.defaultProps,
-  stickyClassName: 'sticky',
-  wrapperClassName: '',
-  stickyStyle: {},
-};
-
 export default Sticky;

src/render-props-version.tsx

@@ -87,14 +87,14 @@ const isEqual = (obj1: State, obj2: State) => {
 
 class Sticky extends Component<RenderProps, State> {
   static defaultProps = {
-    mode: 'top',
+    mode: 'top' as const,
     topOffset: 0,
     bottomOffset: 0,
     isIOSFixEnabled: true,
     offsetTransforms: true,
     disabled: false,
-    onFixedToggle: null,
-    boundaryElement: null,
+    onFixedToggle: undefined,
+    boundaryElement: undefined,
     hideOnBoundaryHit: true,
     scrollElement: 'window',
     dontUpdateHolderHeightWhenSticky: false,

src/types.tsx

@@ -15,7 +15,7 @@ export interface CommonProps {
    * Callback that is called when sticky state is changed.
    * @param isFixed - `true` if element is sticky.
    */
-  onFixedToggle: (isFixed: boolean) => void,
+  onFixedToggle?: (isFixed: boolean) => void,
   /**
    * If `true` - element will be hidden when boundary reached.
    */

stories/common.tsx

@@ -2,7 +2,7 @@
 
 import React, {ReactNode} from "react";
 import Sticky from "../src";
-import {Props} from "../src/basic-version";
+import {Props, defaultProps as StickyDefaultProps} from "../src/basic-version";
 
 import './examples.scss';
 import {action} from '@storybook/addon-actions';
@@ -12,7 +12,11 @@ interface BlockProps extends Props {
   noFooter: boolean,
 }
 
-export const Block = ({noHeader, noFooter, ...rest}: BlockProps) => {
+export const Block = (props: Partial<BlockProps>) => {
+  const {noHeader, noFooter, ...rest} = {
+    ...defaultProps,
+    ...props
+  };
   return (
     <div className="block">
       {
@@ -56,15 +60,15 @@ export const Block = ({noHeader, noFooter, ...rest}: BlockProps) => {
   );
 };
 
-Block.defaultProps = {
-  ...Sticky.defaultProps,
-  mode: 'top',
+const defaultProps = {
+  ...StickyDefaultProps,
+  mode: 'top' as const,
   topOffset: 0,
   bottomOffset: 0,
   isIOSFixEnabled: true,
   offsetTransforms: true,
   disabled: false,
-  onFixedToggle: null,
+  onFixedToggle: undefined,
   noHeader: false,
   noFooter: false,
   dontUpdateHolderHeightWhenSticky: true,

stories/examples.scss

@@ -64,13 +64,13 @@ h1, h2 {
   }
 
   h2 {
+    line-height: 30px;
     &.header {
       background: #577796;
     }
     &.footer {
       background: #612624;
     }
-    line-height: 30px;
   }
 
   p {

storybook-static/iframe.html

@@ -348,7 +348,7 @@
             window['DOCS_OPTIONS'] = {"defaultName":"Docs","autodocs":"tag"};</script><script type="module">import './sb-preview/runtime.js';
 
 
-      import './runtime~main.a453980e.iframe.bundle.js';
+      import './runtime~main.2967869f.iframe.bundle.js';
 
       import './795.d439681d.iframe.bundle.js';
 

storybook-static/project.json

@@ -1 +1 @@
-{"generatedAt":1687786852107,"hasCustomBabel":false,"hasCustomWebpack":true,"hasStaticDirs":false,"hasStorybookEslint":true,"refCount":0,"packageManager":{"type":"npm","version":"9.6.6"},"framework":{"name":"@storybook/react-webpack5","options":{}},"builder":"@storybook/builder-webpack5","renderer":"@storybook/react","storybookVersion":"7.0.23","storybookVersionSpecifier":"^7.0.23","language":"typescript","storybookPackages":{"@storybook/blocks":{"version":"7.0.23"},"@storybook/react":{"version":"7.0.23"},"@storybook/react-webpack5":{"version":"7.0.23"},"@storybook/testing-library":{"version":"0.0.14-next.2"},"eslint-plugin-storybook":{"version":"0.6.12"},"storybook":{"version":"7.0.23"}},"addons":{"@storybook/addon-links":{"version":"7.0.23"},"@storybook/addon-essentials":{"version":"7.0.23"},"@storybook/addon-interactions":{"version":"7.0.23"}}}
+{"generatedAt":1724032335808,"hasCustomBabel":false,"hasCustomWebpack":true,"hasStaticDirs":false,"hasStorybookEslint":true,"refCount":0,"packageManager":{"type":"npm","version":"9.8.1"},"framework":{"name":"@storybook/react-webpack5","options":{}},"builder":"@storybook/builder-webpack5","renderer":"@storybook/react","storybookVersion":"7.0.23","storybookVersionSpecifier":"^7.0.23","language":"typescript","storybookPackages":{"@storybook/blocks":{"version":"7.0.23"},"@storybook/react":{"version":"7.0.23"},"@storybook/react-webpack5":{"version":"7.0.23"},"@storybook/testing-library":{"version":"0.0.14-next.2"},"eslint-plugin-storybook":{"version":"0.6.12"},"storybook":{"version":"7.0.23"}},"addons":{"@storybook/addon-links":{"version":"7.0.23"},"@storybook/addon-essentials":{"version":"7.0.23"},"@storybook/addon-interactions":{"version":"7.0.23"}}}