@toptal/picasso-fade 1.0.1

package/dist-package/src/Fade/Fade.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import type { BaseProps, TransitionProps } from '@toptal/picasso-shared';
+export interface Props extends TransitionProps, BaseProps {
+    children: React.ReactElement;
+    in: boolean;
+    onEnter?: (node: HTMLElement, isAppearing: boolean) => void;
+}
+export declare const Fade: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
+export default Fade;
+//# sourceMappingURL=Fade.d.ts.map

package/dist-package/src/Fade/Fade.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Fade.d.ts","sourceRoot":"","sources":["../../../src/Fade/Fade.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiB,MAAM,OAAO,CAAA;AAErC,OAAO,KAAK,EAAE,SAAS,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAA;AAGxE,MAAM,WAAW,KAAM,SAAQ,eAAe,EAAE,SAAS;IAEvD,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAA;IAE5B,EAAE,EAAE,OAAO,CAAA;IAEX,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,WAAW,EAAE,WAAW,EAAE,OAAO,KAAK,IAAI,CAAA;CAC5D;AAED,eAAO,MAAM,IAAI,8EAiDhB,CAAA;AAED,eAAe,IAAI,CAAA"}

package/dist-package/src/Fade/Fade.js

@@ -0,0 +1,24 @@
+import React, { useRef } from 'react';
+import { Transition } from 'react-transition-group';
+import { useMultipleForwardRefs } from '@toptal/picasso-utils';
+export const Fade = React.forwardRef(({ timeout = 300, children, in: inProp, style, onEnter, onExited }, ref) => {
+    const nodeRef = useRef(null);
+    const transitionStyles = {
+        entering: { opacity: 1 },
+        entered: { opacity: 1 },
+        exiting: { opacity: 0 },
+        exited: { opacity: 0 },
+    };
+    const combinedRef = useMultipleForwardRefs([
+        ref,
+        nodeRef,
+        // TODO: come up with proper type for children.ref
+        // @ts-ignore
+        children.ref,
+    ]);
+    return (React.createElement(Transition, { appear: true, nodeRef: nodeRef, in: inProp, timeout: timeout, onExited: onExited, onEnter: onEnter }, (state, childProps) => {
+        return React.cloneElement(children, Object.assign({ style: Object.assign(Object.assign(Object.assign({ visibility: state === 'exited' && !inProp ? 'hidden' : undefined, transitionDuration: `${timeout}ms` }, transitionStyles[state]), style), children.props.style), className: `opacity-0 transition-opacity ${children.props.className || ''}`, ref: combinedRef }, childProps));
+    }));
+});
+export default Fade;
+//# sourceMappingURL=Fade.js.map

package/dist-package/src/Fade/Fade.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Fade.js","sourceRoot":"","sources":["../../../src/Fade/Fade.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AACrC,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAA;AAEnD,OAAO,EAAE,sBAAsB,EAAE,MAAM,uBAAuB,CAAA;AAW9D,MAAM,CAAC,MAAM,IAAI,GAAG,KAAK,CAAC,UAAU,CAClC,CAAC,EAAE,OAAO,GAAG,GAAG,EAAE,QAAQ,EAAE,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,GAAG,EAAE,EAAE;IACzE,MAAM,OAAO,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;IAC5B,MAAM,gBAAgB,GAAG;QACvB,QAAQ,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE;QACxB,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE;QACvB,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE;QACvB,MAAM,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE;KACvB,CAAA;IAED,MAAM,WAAW,GAAG,sBAAsB,CAAC;QACzC,GAAG;QACH,OAAO;QACP,kDAAkD;QAClD,aAAa;QACb,QAAQ,CAAC,GAAG;KACb,CAAC,CAAA;IAEF,OAAO,CACL,oBAAC,UAAU,IACT,MAAM,QACN,OAAO,EAAE,OAAO,EAChB,EAAE,EAAE,MAAM,EACV,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,IAEf,CACC,KAAoD,EACpD,UAAc,EACd,EAAE;QACF,OAAO,KAAK,CAAC,YAAY,CAAC,QAAQ,kBAChC,KAAK,8CACH,UAAU,EAAE,KAAK,KAAK,QAAQ,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,EAChE,kBAAkB,EAAE,GAAG,OAAO,IAAI,IAC/B,gBAAgB,CAAC,KAAK,CAAC,GACvB,KAAK,GACL,QAAQ,CAAC,KAAK,CAAC,KAAK,GAEzB,SAAS,EAAE,gCACT,QAAQ,CAAC,KAAK,CAAC,SAAS,IAAI,EAC9B,EAAE,EACF,GAAG,EAAE,WAAW,IACb,UAAU,EACb,CAAA;IACJ,CAAC,CACU,CACd,CAAA;AACH,CAAC,CACF,CAAA;AAED,eAAe,IAAI,CAAA"}

package/dist-package/src/Fade/index.d.ts

@@ -0,0 +1,5 @@
+import type { OmitInternalProps } from '@toptal/picasso-shared';
+import type { Props } from './Fade';
+export { default as Fade } from './Fade';
+export declare type FadeProps = OmitInternalProps<Props>;
+//# sourceMappingURL=index.d.ts.map

package/dist-package/src/Fade/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Fade/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAA;AAE/D,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,QAAQ,CAAA;AAEnC,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAA;AACxC,oBAAY,SAAS,GAAG,iBAAiB,CAAC,KAAK,CAAC,CAAA"}

package/dist-package/src/Fade/index.js

@@ -0,0 +1,2 @@
+export { default as Fade } from './Fade';
+//# sourceMappingURL=index.js.map

package/dist-package/src/Fade/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/Fade/index.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAA"}

package/dist-package/src/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Fade';
+//# sourceMappingURL=index.d.ts.map

package/dist-package/src/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAA"}

package/dist-package/src/index.js

@@ -0,0 +1,2 @@
+export * from './Fade';
+//# sourceMappingURL=index.js.map

package/dist-package/src/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAA"}

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@toptal/picasso-fade",
+  "version": "1.0.1",
+  "description": "Toptal UI components library - Fade",
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "./dist-package/src/index.js",
+  "module": "./dist-package/src/index.js",
+  "scripts": {
+    "build:package": "tsc -b tsconfig.json",
+    "prepublishOnly": "yarn build:package"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/toptal/picasso.git"
+  },
+  "author": "Toptal",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/toptal/picasso/issues"
+  },
+  "homepage": "https://github.com/toptal/picasso/tree/master/packages/picasso#readme",
+  "dependencies": {
+    "@toptal/picasso-utils": "1.0.1",
+    "react-transition-group": "^4.4.5"
+  },
+  "sideEffects": false,
+  "peerDependencies": {
+    "@toptal/picasso-tailwind": ">2.1.0",
+    "react": ">=16.12.0 < 19.0.0",
+    "tailwindcss": ">=3"
+  },
+  "exports": {
+    ".": "./dist-package/src/index.js"
+  },
+  "devDependencies": {
+    "@toptal/picasso-test-utils": "1.0.1"
+  },
+  "files": [
+    "dist-package/**",
+    "!dist-package/tsconfig.tsbuildinfo",
+    "src"
+  ]
+}

package/src/Fade/Fade.tsx

@@ -0,0 +1,66 @@
+import React, { useRef } from 'react'
+import { Transition } from 'react-transition-group'
+import type { BaseProps, TransitionProps } from '@toptal/picasso-shared'
+import { useMultipleForwardRefs } from '@toptal/picasso-utils'
+
+export interface Props extends TransitionProps, BaseProps {
+  /* Element that accepts ref */
+  children: React.ReactElement
+  /* Show the component; triggers the enter or exit states */
+  in: boolean
+  /* Callback fired when the component has entered */
+  onEnter?: (node: HTMLElement, isAppearing: boolean) => void
+}
+
+export const Fade = React.forwardRef<HTMLDivElement, Props>(
+  ({ timeout = 300, children, in: inProp, style, onEnter, onExited }, ref) => {
+    const nodeRef = useRef(null)
+    const transitionStyles = {
+      entering: { opacity: 1 },
+      entered: { opacity: 1 },
+      exiting: { opacity: 0 },
+      exited: { opacity: 0 },
+    }
+
+    const combinedRef = useMultipleForwardRefs([
+      ref,
+      nodeRef,
+      // TODO: come up with proper type for children.ref
+      // @ts-ignore
+      children.ref,
+    ])
+
+    return (
+      <Transition
+        appear
+        nodeRef={nodeRef}
+        in={inProp}
+        timeout={timeout}
+        onExited={onExited}
+        onEnter={onEnter}
+      >
+        {(
+          state: 'entering' | 'entered' | 'exiting' | 'exited',
+          childProps: {}
+        ) => {
+          return React.cloneElement(children, {
+            style: {
+              visibility: state === 'exited' && !inProp ? 'hidden' : undefined,
+              transitionDuration: `${timeout}ms`,
+              ...transitionStyles[state],
+              ...style,
+              ...children.props.style,
+            },
+            className: `opacity-0 transition-opacity ${
+              children.props.className || ''
+            }`,
+            ref: combinedRef,
+            ...childProps,
+          })
+        }}
+      </Transition>
+    )
+  }
+)
+
+export default Fade

package/src/Fade/index.ts

@@ -0,0 +1,6 @@
+import type { OmitInternalProps } from '@toptal/picasso-shared'
+
+import type { Props } from './Fade'
+
+export { default as Fade } from './Fade'
+export type FadeProps = OmitInternalProps<Props>

package/src/Fade/story/Default.example.tsx

@@ -0,0 +1,21 @@
+import { Container, Button } from '@toptal/picasso'
+import { Fade } from '@toptal/picasso-fade'
+import { SPACING_4 } from '@toptal/picasso-utils'
+import React, { useState } from 'react'
+
+const Example = () => {
+  const [faded, setFaded] = useState(false)
+
+  const handleOnClick = () => setFaded(prevFaded => !prevFaded)
+
+  return (
+    <Container bottom={SPACING_4}>
+      <Button onClick={handleOnClick}>Toggle Fade</Button>
+      <Fade in={faded} timeout={3000}>
+        <div className='bg-red-500 p-4'>Fade in</div>
+      </Fade>
+    </Container>
+  )
+}
+
+export default Example

package/src/Fade/story/index.jsx

@@ -0,0 +1,18 @@
+import { Fade } from '../Fade'
+import PicassoBook from '~/.storybook/components/PicassoBook'
+
+const page = PicassoBook.section('Components').createPage('Fade')
+
+page.createTabChapter('Props').addComponentDocs({
+  component: Fade,
+  name: 'Fade',
+})
+
+page.createChapter().addExample(
+  'Fade/story/Default.example.tsx',
+  {
+    title: 'Default',
+    takeScreenshot: false,
+  },
+  'base/Fade'
+)

package/src/Fade/test.tsx

@@ -0,0 +1,76 @@
+import React from 'react'
+import { act, cleanup, render } from '@toptal/picasso-test-utils'
+
+import Fade from './Fade'
+
+const SomeChildComponent = React.forwardRef<HTMLDivElement>((props, ref) => (
+  <div ref={ref} data-testid='child-div' {...props}>
+    Hello, I'm child div!
+  </div>
+))
+
+describe('Fade', () => {
+  beforeEach(() => {
+    jest.useFakeTimers()
+  })
+
+  afterEach(() => {
+    cleanup()
+    jest.useRealTimers()
+  })
+
+  it('renders without errors', () => {
+    const { getByTestId } = render(
+      <Fade in={true}>
+        <SomeChildComponent />
+      </Fade>
+    )
+
+    expect(getByTestId('child-div')).toBeInTheDocument()
+  })
+
+  it('transitions based on the `in` prop', () => {
+    const { getByTestId, rerender } = render(
+      <Fade in={false}>
+        <SomeChildComponent />
+      </Fade>
+    )
+
+    expect(getByTestId('child-div')).toHaveStyle('visibility: hidden')
+
+    act(() => {
+      rerender(
+        <Fade in={true}>
+          <SomeChildComponent />
+        </Fade>
+      )
+      jest.runAllTimers()
+    })
+
+    expect(getByTestId('child-div')).toHaveStyle('visibility: visible')
+  })
+
+  it('forwards the ref', () => {
+    const ref = React.createRef<HTMLDivElement>()
+    const { getByTestId } = render(
+      <Fade in={true} ref={ref}>
+        <SomeChildComponent />
+      </Fade>
+    )
+
+    expect(ref.current).toBe(getByTestId('child-div'))
+  })
+
+  it('applies transition duration style', () => {
+    const timeout = 500
+    const { getByTestId } = render(
+      <Fade in={true} timeout={timeout}>
+        <SomeChildComponent />
+      </Fade>
+    )
+
+    expect(getByTestId('child-div')).toHaveStyle({
+      transitionDuration: `${timeout}ms`,
+    })
+  })
+})

package/src/index.ts

@@ -0,0 +1 @@
+export * from './Fade'