-
Notifications
You must be signed in to change notification settings - Fork 7
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
36 changed files
with
957 additions
and
81 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
export * from './useDebouncedValue'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
export { useDebouncedValue, type IUseDebouncedValueParams, type IUseDebouncedValueResult } from './useDebouncedValue'; |
34 changes: 34 additions & 0 deletions
34
src/core/hooks/useDebouncedValue/useDebouncedValue.test.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,34 @@ | ||
import { act, renderHook } from '@testing-library/react'; | ||
import { useDebouncedValue } from './useDebouncedValue'; | ||
|
||
describe('useDebouncedValue hook', () => { | ||
beforeEach(() => { | ||
jest.useFakeTimers(); | ||
}); | ||
|
||
it('returns the value initialised to the value property and a function to update the debounced value', () => { | ||
const value = 'test-value'; | ||
const { result } = renderHook(() => useDebouncedValue(value)); | ||
expect(result.current).toEqual([value, expect.any(Function)]); | ||
}); | ||
|
||
it('debounces the value updates', () => { | ||
const newValue = 'test'; | ||
const { result, rerender } = renderHook((value) => useDebouncedValue(value)); | ||
expect(result.current[0]).toBeUndefined(); | ||
|
||
rerender(newValue); | ||
expect(result.current[0]).toBeUndefined(); | ||
|
||
act(() => jest.runAllTimers()); | ||
expect(result.current[0]).toEqual(newValue); | ||
}); | ||
|
||
it('the returned setter updates the debounced value', () => { | ||
const newValue = 'my-value'; | ||
const { result } = renderHook((value) => useDebouncedValue(value)); | ||
expect(result.current[0]).toBeUndefined(); | ||
act(() => result.current[1](newValue)); | ||
expect(result.current[0]).toEqual(newValue); | ||
}); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,39 @@ | ||
import { useEffect, useRef, useState } from 'react'; | ||
|
||
export interface IUseDebouncedValueParams { | ||
/** | ||
* Debounce time period in milliseconds. | ||
* @default 500 | ||
*/ | ||
delay?: number; | ||
} | ||
|
||
export type IUseDebouncedValueResult<TValue> = [ | ||
/** | ||
* Debounced value. | ||
*/ | ||
TValue, | ||
/** | ||
* Setter for the debounced value. | ||
*/ | ||
(value: TValue) => void, | ||
]; | ||
|
||
export const useDebouncedValue = <TValue>( | ||
value: TValue, | ||
params: IUseDebouncedValueParams = {}, | ||
): IUseDebouncedValueResult<TValue> => { | ||
const { delay } = params; | ||
|
||
const [debouncedValue, setDebouncedValue] = useState(value); | ||
|
||
const timeoutRef = useRef<NodeJS.Timeout>(); | ||
|
||
useEffect(() => { | ||
timeoutRef.current = setTimeout(() => setDebouncedValue(value), delay); | ||
|
||
return () => clearTimeout(timeoutRef.current); | ||
}, [value, delay]); | ||
|
||
return [debouncedValue, setDebouncedValue]; | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,3 +1,4 @@ | ||
export * from './components'; | ||
export * from './hooks'; | ||
export * from './types'; | ||
export * from './utils'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,61 @@ | ||
import { testLogger } from '../../test'; | ||
import { clipboardUtils } from './clipboardUtils'; | ||
|
||
// Navigator.clipboard object is not defined on Jest by default | ||
Object.defineProperty(navigator, 'clipboard', { | ||
value: { writeText: jest.fn(), readText: jest.fn() }, | ||
}); | ||
|
||
describe('clipboard utils', () => { | ||
describe('copy', () => { | ||
const writeTextMock = jest.spyOn(navigator.clipboard, 'writeText'); | ||
|
||
afterEach(() => { | ||
writeTextMock.mockReset(); | ||
}); | ||
|
||
it('copies the specified value on the user clipboard', async () => { | ||
const copyValue = 'copy-value'; | ||
await clipboardUtils.copy(copyValue); | ||
expect(writeTextMock).toHaveBeenCalledWith(copyValue); | ||
}); | ||
|
||
it('calls the onError callback on copy error', async () => { | ||
testLogger.suppressErrors(); | ||
const onError = jest.fn(); | ||
const error = new Error('test-error'); | ||
writeTextMock.mockImplementation(() => { | ||
throw error; | ||
}); | ||
await clipboardUtils.copy('test', { onError }); | ||
expect(onError).toHaveBeenCalledWith(error); | ||
}); | ||
}); | ||
|
||
describe('paste', () => { | ||
const readTextMock = jest.spyOn(navigator.clipboard, 'readText'); | ||
|
||
afterEach(() => { | ||
readTextMock.mockReset(); | ||
}); | ||
|
||
it('reads and returns the user clipboard', async () => { | ||
const clipboardValue = 'test-value'; | ||
readTextMock.mockResolvedValue(clipboardValue); | ||
const result = await clipboardUtils.paste(); | ||
expect(result).toEqual(clipboardValue); | ||
}); | ||
|
||
it('calls the onError callback on paste error', async () => { | ||
testLogger.suppressErrors(); | ||
const onError = jest.fn(); | ||
const error = new Error('test-error'); | ||
readTextMock.mockImplementation(() => { | ||
throw error; | ||
}); | ||
const result = await clipboardUtils.paste({ onError }); | ||
expect(result).toEqual(''); | ||
expect(onError).toHaveBeenCalledWith(error); | ||
}); | ||
}); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,33 @@ | ||
export interface IClipboardUtilsParams { | ||
/** | ||
* Callback called on paste error. | ||
*/ | ||
onError?: (error: unknown) => void; | ||
} | ||
|
||
class ClipboardUtils { | ||
copy = async (value: string, params: IClipboardUtilsParams = {}): Promise<void> => { | ||
const { onError } = params; | ||
|
||
try { | ||
await navigator.clipboard.writeText(value); | ||
} catch (error: unknown) { | ||
onError?.(error); | ||
} | ||
}; | ||
|
||
paste = async (params: IClipboardUtilsParams = {}): Promise<string> => { | ||
const { onError } = params; | ||
let clipboardText = ''; | ||
|
||
try { | ||
clipboardText = await navigator.clipboard.readText(); | ||
} catch (error: unknown) { | ||
onError?.(error); | ||
} | ||
|
||
return clipboardText; | ||
}; | ||
} | ||
|
||
export const clipboardUtils = new ClipboardUtils(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
export { clipboardUtils, type IClipboardUtilsParams } from './clipboardUtils'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,3 +1,4 @@ | ||
export * from './clipboardUtils'; | ||
export * from './formatterUtils'; | ||
export * from './mergeRefs'; | ||
export * from './responsiveUtils'; |
43 changes: 43 additions & 0 deletions
43
src/modules/components/address/addressInput/addressInput.stories.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,43 @@ | ||
import type { Meta, StoryObj } from '@storybook/react'; | ||
import { useState } from 'react'; | ||
import { AddressInput, type IAddressInputProps, type IAddressInputResolvedValue } from './addressInput'; | ||
|
||
const meta: Meta<typeof AddressInput> = { | ||
title: 'Modules/Components/Address/AddressInput', | ||
component: AddressInput, | ||
tags: ['autodocs'], | ||
parameters: { | ||
design: { | ||
type: 'figma', | ||
url: 'https://www.figma.com/file/P0GeJKqILL7UXvaqu5Jj7V/v1.1.0?type=design&node-id=8192-18146&mode=design&t=VfR81DAQucRS3iGm-4', | ||
}, | ||
}, | ||
}; | ||
|
||
type Story = StoryObj<typeof AddressInput>; | ||
|
||
const ControlledComponent = (props: IAddressInputProps) => { | ||
const [value, setValue] = useState<string>(); | ||
const [addressValue, setAddressValue] = useState<IAddressInputResolvedValue>(); | ||
|
||
const stringAddressValue = JSON.stringify(addressValue, null, 2) ?? 'undefined'; | ||
|
||
return ( | ||
<div className="flex grow flex-col gap-2"> | ||
<AddressInput value={value} onChange={setValue} onAccept={setAddressValue} {...props} /> | ||
<code className="[word-break:break-word]">Address value: {stringAddressValue}</code> | ||
</div> | ||
); | ||
}; | ||
|
||
/** | ||
* Default usage of the AddressInput component. | ||
*/ | ||
export const Default: Story = { | ||
args: { | ||
placeholder: 'ENS or 0x …', | ||
}, | ||
render: ({ onChange, onAccept, ...props }) => <ControlledComponent {...props} />, | ||
}; | ||
|
||
export default meta; |
Oops, something went wrong.