Skip to content

Commit

Permalink
Update deps
Browse files Browse the repository at this point in the history
  • Loading branch information
adhamu committed Jan 7, 2023
1 parent 18e5057 commit 4839707
Show file tree
Hide file tree
Showing 14 changed files with 2,311 additions and 2,121 deletions.
1 change: 1 addition & 0 deletions .eslintignore
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
node_modules
dist
.coverage
public/script.js
15 changes: 1 addition & 14 deletions .eslintrc.json
Original file line number Diff line number Diff line change
@@ -1,16 +1,3 @@
{
"extends": ["./node_modules/@adhamu/zero/eslint/typescript-react"],
"overrides": [
{
"files": ["./setupTests.ts"],
"rules": {
"import/no-extraneous-dependencies": [
"error",
{
"devDependencies": true
}
]
}
}
]
"extends": ["./node_modules/@adhamu/zero/eslint"]
}
2 changes: 1 addition & 1 deletion .nvmrc
Original file line number Diff line number Diff line change
@@ -1 +1 @@
16.14
18.13
2 changes: 1 addition & 1 deletion .stylelintrc.json
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{
"extends": ["./node_modules/@adhamu/zero/stylelint/css"],
"extends": ["./node_modules/@adhamu/zero/stylelint"],
"overrides": [
{
"files": ["**/*.{js,ts,jsx,tsx}"],
Expand Down
2 changes: 1 addition & 1 deletion LICENCE
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
Copyright 2022 Amit Dhamu
Copyright 2023 Amit Dhamu

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
Expand Down
4 changes: 1 addition & 3 deletions esbuild.config.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@
const path = require('path')

const { arge } = require('arge')
const chokidar = require('chokidar')
const esbuild = require('esbuild')
Expand All @@ -11,7 +9,7 @@ const { build = false, dev = false, watch = false } = arge(process.argv)

const common = {
bundle: true,
inject: [path.join(__dirname, './react-shim.js')],
jsx: 'automatic',
sourcemap: false,
}

Expand Down
42 changes: 21 additions & 21 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "react-input-suggestions",
"version": "2.2.0",
"version": "2.3.0",
"description": "A React input component with pluggable suggestions and autocomplete",
"keywords": [
"react",
Expand Down Expand Up @@ -32,40 +32,40 @@
"deploy": "gh-pages -d public",
"dev": "node esbuild.config.js dev --watch",
"lint": "yarn lint:scripts && yarn lint:styles",
"lint:scripts": "eslint 'src/**/*.ts*' --ignore-path=.eslintignore --config=.eslintrc.json",
"lint:scripts": "eslint .",
"lint:styles": "stylelint 'src/**/*.ts*'",
"test": "jest --colors",
"test:coverage": "yarn test --coverage",
"type": "tsc --noEmit"
},
"dependencies": {
"@emotion/react": "^11.8.2",
"@emotion/styled": "^11.8.1",
"react": "^18.1.0",
"react-dom": "^18.1.0",
"@emotion/react": "^11.10.5",
"@emotion/styled": "^11.10.5",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-string-replace": "^1.1.0"
},
"devDependencies": {
"@adhamu/zero": "^4.3.1",
"@emotion/jest": "^11.8.0",
"@adhamu/zero": "^5.1.2",
"@emotion/jest": "^11.10.5",
"@stylelint/postcss-css-in-js": "^0.38.0",
"@swc/core": "^1.2.186",
"@swc/jest": "^0.2.21",
"@testing-library/jest-dom": "^5.16.4",
"@testing-library/react": "^13.2.0",
"@testing-library/user-event": "^14.2.0",
"@types/jest": "^27.5.1",
"@types/react": "^18.0.9",
"@types/react-dom": "^18.0.4",
"arge": "^1.1.4",
"@swc/core": "^1.3.25",
"@swc/jest": "^0.2.24",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^14.4.3",
"@types/jest": "^29.2.5",
"@types/react": "^18.0.26",
"@types/react-dom": "^18.0.10",
"arge": "^1.2.0",
"chokidar": "^3.5.3",
"esbuild": "^0.14.39",
"esbuild": "^0.16.15",
"gh-pages": "^4.0.0",
"jest": "^28.1.0",
"jest-environment-jsdom": "^28.1.0",
"jest": "^29.3.1",
"jest-environment-jsdom": "^29.3.1",
"live-server": "^1.2.2",
"postcss-syntax": "^0.36.2",
"typescript": "^4.6.4"
"typescript": "^4.9.4"
},
"peerDependencies": {
"react": "^18.1.0",
Expand Down
4 changes: 0 additions & 4 deletions react-shim.js

This file was deleted.

12 changes: 6 additions & 6 deletions src/InputSuggestions.tsx
Original file line number Diff line number Diff line change
@@ -1,10 +1,9 @@
import type { ReactNode } from 'react'
import { useRef, useState } from 'react'

import type { Props } from './types'

import { getElementText, wrapElementText } from './elementText'
import { elementText } from './elementText'
import { Styled } from './styled'
import type { Props } from './types'
import { useSuggestions } from './useSuggestions'

const InputSuggestions = ({
Expand Down Expand Up @@ -34,7 +33,8 @@ const InputSuggestions = ({
const filterSuggestions = (e: { target: { value: string } }) =>
setResults(
suggestions.filter(suggestion =>
getElementText(suggestion)
elementText
.get(suggestion)
?.toLowerCase()
.includes(e.target.value.toLowerCase() || '')
)
Expand Down Expand Up @@ -64,12 +64,12 @@ const InputSuggestions = ({
<ul ref={searchSuggestionsRef}>
{results.map(suggestion => (
<li
key={getElementText(suggestion)}
key={elementText.get(suggestion)}
onMouseOver={onResultsHover}
onKeyDown={onResultsKeyDown}
>
{highlightKeywords
? wrapElementText(
? elementText.wrap(
suggestion,
inputSearchRef.current?.value || ''
)
Expand Down
6 changes: 3 additions & 3 deletions src/__tests__/InputSuggestions.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { render, screen, waitFor } from '@testing-library/react'
import userEvent from '@testing-library/user-event'

import InputSuggestions from '../InputSuggestions'
import * as elementText from '../elementText'
import { elementText } from '../elementText'

const suggestions = ['reddit', 'facebook', 'twitter'].map(word => (
<a key={word} href={`https://${word}.com`}>
Expand All @@ -11,8 +11,8 @@ const suggestions = ['reddit', 'facebook', 'twitter'].map(word => (
))

describe('InputSuggestions', () => {
const mockGetElementText = jest.spyOn(elementText, 'getElementText')
const mockWrapElementText = jest.spyOn(elementText, 'wrapElementText')
const mockGetElementText = jest.spyOn(elementText, 'get')
const mockWrapElementText = jest.spyOn(elementText, 'wrap')

beforeEach(jest.clearAllMocks)

Expand Down
20 changes: 10 additions & 10 deletions src/__tests__/elementText.test.tsx
Original file line number Diff line number Diff line change
@@ -1,24 +1,24 @@
import { render } from '@testing-library/react'

import { getElementText, wrapElementText } from '../elementText'
import { elementText } from '../elementText'

describe('elementText', () => {
describe('getElementText', () => {
describe('get', () => {
const Test = ({ children }: { children?: React.ReactNode }) => (
<div>{children}</div>
)

it('handles strings', () => {
expect(getElementText('This is a test')).toBe('This is a test')
expect(elementText.get('This is a test')).toBe('This is a test')
})

it('handles numbers', () => {
expect(getElementText(100)).toBe(100)
expect(elementText.get(100)).toBe(100)
})

it('handles nested markup', () => {
expect(
getElementText(
elementText.get(
<ul>
<li>Option 1</li>
<li>Option 2</li>
Expand All @@ -31,7 +31,7 @@ describe('elementText', () => {

it('handles React elements', () => {
expect(
getElementText(
elementText.get(
<Test>
<span>Level 1</span>
<span>Level 2</span>
Expand All @@ -42,13 +42,13 @@ describe('elementText', () => {
})

it('returns undefined if no text found', () => {
expect(getElementText(<Test />)).toBeUndefined()
expect(elementText.get(<Test />)).toBeUndefined()
})
})

describe('wrapElementText', () => {
describe('wrap', () => {
it('can handle strings', () => {
const Result = () => <>{wrapElementText(<div>Level One</div>, 'one')}</>
const Result = () => <>{elementText.wrap(<div>Level One</div>, 'one')}</>

const { container } = render(<Result />)

Expand All @@ -58,7 +58,7 @@ describe('elementText', () => {
it('can handle elements with children', () => {
const Result = () => (
<>
{wrapElementText(
{elementText.wrap(
<div>
<ul>
<li>
Expand Down
99 changes: 51 additions & 48 deletions src/elementText.tsx
Original file line number Diff line number Diff line change
@@ -1,54 +1,57 @@
/* eslint-disable import/prefer-default-export */
import type { ReactElement } from 'react'
import React, { Children, cloneElement } from 'react'

import reactStringReplace from 'react-string-replace'

export const getElementText = (node: React.ReactNode): string | undefined => {
if (['string', 'number'].includes(typeof node)) {
return node as string
}

if (node instanceof Array) {
return [...new Set(node.map(getElementText))].join(' ')
}

if (typeof node === 'object' && node) {
return getElementText((node as ReactElement).props.children)
}

return undefined
}

const highlightKeyword = (content: string, keyword: string) =>
reactStringReplace(content, keyword, (match, key) => (
<mark key={key}>{match}</mark>
))

const cloneChildren = (children: ReactElement[], keyword: string): any =>
Children.map(children, child =>
child.props
? cloneElement(child, {
children: highlightKeyword(
cloneChildren(child.props.children, keyword),
keyword
),
})
: child
)

export const wrapElementText = (
node: React.ReactNode,
keyword: string
): ReactElement | React.ReactNode => {
const n = node as React.ReactElement
const {
props: { children },
} = n

return React.cloneElement(n, {
children:
typeof children === 'string'
? highlightKeyword(children, keyword)
: cloneChildren(children, keyword),
})
export const elementText = {
get: (node: React.ReactNode): string | undefined => {
if (['string', 'number'].includes(typeof node)) {
return node as string
}

if (node instanceof Array) {
return [...new Set(node.map(elementText.get))].join(' ')
}

if (typeof node === 'object' && node) {
return elementText.get((node as ReactElement).props.children)
}

return undefined
},

highlightKeyword: (content: string, keyword: string) =>
reactStringReplace(content, keyword, (match, key) => (
<mark key={key}>{match}</mark>
)),

cloneChildren: (children: ReactElement[], keyword: string): any =>
Children.map(children, child =>
child.props
? cloneElement(child, {
children: elementText.highlightKeyword(
elementText.cloneChildren(child.props.children, keyword),
keyword
),
})
: child
),

wrap: (
node: React.ReactNode,
keyword: string
): ReactElement | React.ReactNode => {
const n = node as React.ReactElement
const {
props: { children },
} = n

return React.cloneElement(n, {
children:
typeof children === 'string'
? elementText.highlightKeyword(children, keyword)
: elementText.cloneChildren(children, keyword),
})
},
}
2 changes: 1 addition & 1 deletion tsconfig.json
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{
"extends": "./node_modules/@adhamu/zero/tsconfig/react.json",
"extends": "@adhamu/zero/tsconfig/react.json",
"include": ["src/**/*.ts*"],
"exclude": ["node_modules", "dist"],
"compilerOptions": {
Expand Down
Loading

0 comments on commit 4839707

Please sign in to comment.