diff --git a/src/assets/icons/check.png b/demo/src/assets/icons/check.png similarity index 100% rename from src/assets/icons/check.png rename to demo/src/assets/icons/check.png diff --git a/src/assets/icons/check@1.5x.png b/demo/src/assets/icons/check@1.5x.png similarity index 100% rename from src/assets/icons/check@1.5x.png rename to demo/src/assets/icons/check@1.5x.png diff --git a/src/assets/icons/check@2x.png b/demo/src/assets/icons/check@2x.png similarity index 100% rename from src/assets/icons/check@2x.png rename to demo/src/assets/icons/check@2x.png diff --git a/src/assets/icons/check@3x.png b/demo/src/assets/icons/check@3x.png similarity index 100% rename from src/assets/icons/check@3x.png rename to demo/src/assets/icons/check@3x.png diff --git a/src/assets/icons/check@4x.png b/demo/src/assets/icons/check@4x.png similarity index 100% rename from src/assets/icons/check@4x.png rename to demo/src/assets/icons/check@4x.png diff --git a/src/assets/icons/minusSmall.png b/demo/src/assets/icons/minusSmall.png similarity index 100% rename from src/assets/icons/minusSmall.png rename to demo/src/assets/icons/minusSmall.png diff --git a/src/assets/icons/minusSmall@1.5x.png b/demo/src/assets/icons/minusSmall@1.5x.png similarity index 100% rename from src/assets/icons/minusSmall@1.5x.png rename to demo/src/assets/icons/minusSmall@1.5x.png diff --git a/src/assets/icons/minusSmall@2x.png b/demo/src/assets/icons/minusSmall@2x.png similarity index 100% rename from src/assets/icons/minusSmall@2x.png rename to demo/src/assets/icons/minusSmall@2x.png diff --git a/src/assets/icons/minusSmall@3x.png b/demo/src/assets/icons/minusSmall@3x.png similarity index 100% rename from src/assets/icons/minusSmall@3x.png rename to demo/src/assets/icons/minusSmall@3x.png diff --git a/src/assets/icons/minusSmall@4x.png b/demo/src/assets/icons/minusSmall@4x.png similarity index 100% rename from src/assets/icons/minusSmall@4x.png rename to demo/src/assets/icons/minusSmall@4x.png diff --git a/src/assets/icons/x.png b/demo/src/assets/icons/x.png similarity index 100% rename from src/assets/icons/x.png rename to demo/src/assets/icons/x.png diff --git a/src/assets/icons/x@2x.png b/demo/src/assets/icons/x@2x.png similarity index 100% rename from src/assets/icons/x@2x.png rename to demo/src/assets/icons/x@2x.png diff --git a/src/assets/icons/x@3x.png b/demo/src/assets/icons/x@3x.png similarity index 100% rename from src/assets/icons/x@3x.png rename to demo/src/assets/icons/x@3x.png diff --git a/demo/src/configurations.js b/demo/src/configurations.js index cf1d9a1636..15e03ea627 100644 --- a/demo/src/configurations.js +++ b/demo/src/configurations.js @@ -16,7 +16,10 @@ export const loadDemoConfigurations = () => { settings: require('./assets/icons/settings.png'), share: require('./assets/icons/share.png'), info: require('./assets/icons/info.png'), - exclamation: require('./assets/icons/exclamationFillSmall.png') + exclamation: require('./assets/icons/exclamationFillSmall.png'), + check: require('./assets/icons/check.png'), + x: require('./assets/icons/x.png'), + minus: require('./assets/icons/minusSmall.png') }); Assets.loadAssetsGroup('images.demo', { diff --git a/demo/src/screens/__tests__/__snapshots__/AvatarScreen.spec.js.snap b/demo/src/screens/__tests__/__snapshots__/AvatarScreen.spec.js.snap index 3ca334b2fc..1337485f47 100644 --- a/demo/src/screens/__tests__/__snapshots__/AvatarScreen.spec.js.snap +++ b/demo/src/screens/__tests__/__snapshots__/AvatarScreen.spec.js.snap @@ -937,6 +937,7 @@ exports[`AvatarScreen renders screen 1`] = ` } style={ [ + false, undefined, undefined, { @@ -1194,6 +1195,7 @@ exports[`AvatarScreen renders screen 1`] = ` } style={ [ + false, undefined, undefined, { @@ -1465,6 +1467,7 @@ exports[`AvatarScreen renders screen 1`] = ` } style={ [ + false, undefined, undefined, { @@ -1659,6 +1662,7 @@ exports[`AvatarScreen renders screen 1`] = ` } style={ [ + false, undefined, undefined, { @@ -1916,6 +1920,7 @@ exports[`AvatarScreen renders screen 1`] = ` } style={ [ + false, undefined, undefined, { @@ -2046,6 +2051,7 @@ exports[`AvatarScreen renders screen 1`] = ` } style={ [ + false, null, undefined, undefined, @@ -2218,6 +2224,7 @@ exports[`AvatarScreen renders screen 1`] = ` } style={ [ + false, undefined, undefined, { @@ -2448,6 +2455,7 @@ exports[`AvatarScreen renders screen 1`] = ` } style={ [ + false, undefined, undefined, { @@ -2678,6 +2686,7 @@ exports[`AvatarScreen renders screen 1`] = ` } style={ [ + false, undefined, undefined, { @@ -2866,6 +2875,7 @@ exports[`AvatarScreen renders screen 1`] = ` } style={ [ + false, undefined, undefined, { diff --git a/demo/src/screens/__tests__/__snapshots__/TextFieldScreen.spec.js.snap b/demo/src/screens/__tests__/__snapshots__/TextFieldScreen.spec.js.snap index fc410125e5..6a9942c2a0 100644 --- a/demo/src/screens/__tests__/__snapshots__/TextFieldScreen.spec.js.snap +++ b/demo/src/screens/__tests__/__snapshots__/TextFieldScreen.spec.js.snap @@ -3933,7 +3933,7 @@ exports[`TextField Screen renders screen 1`] = ` accessible={false} source={ { - "testUri": "../../../src/assets/icons/xFlat.png", + "testUri": "../../../src/assets/internal/icons/xFlat.png", } } style={ diff --git a/demo/src/screens/componentScreens/CheckboxScreen.tsx b/demo/src/screens/componentScreens/CheckboxScreen.tsx index ca1866e41e..6075228fd9 100644 --- a/demo/src/screens/componentScreens/CheckboxScreen.tsx +++ b/demo/src/screens/componentScreens/CheckboxScreen.tsx @@ -51,7 +51,7 @@ export default class CheckboxScreen extends Component { borderRadius={2} size={30} color={Colors.purple30} - selectedIcon={Assets.icons.x} + selectedIcon={Assets.icons.demo.x} marginL-s5 /> diff --git a/demo/src/screens/componentScreens/IconScreen.tsx b/demo/src/screens/componentScreens/IconScreen.tsx index c91e2b7c36..8e54206eba 100644 --- a/demo/src/screens/componentScreens/IconScreen.tsx +++ b/demo/src/screens/componentScreens/IconScreen.tsx @@ -24,7 +24,7 @@ const IconScreen = () => { { ]} leftButtons={[ { - icon: Assets.icons.x, + icon: Assets.icons.demo.x, onPress: () => Alert.alert('back'), buttonProps: {hitSlop: BUTTONS_HIT_SLOP, iconStyle: {tintColor: Colors.yellow10}} } diff --git a/demo/src/screens/componentScreens/PickerScreen.tsx b/demo/src/screens/componentScreens/PickerScreen.tsx index fa7459bffa..7bec6e2304 100644 --- a/demo/src/screens/componentScreens/PickerScreen.tsx +++ b/demo/src/screens/componentScreens/PickerScreen.tsx @@ -44,7 +44,7 @@ const renderContact = (contactValue: any, props: any) => { {contact?.name} - {props.isSelected && } + {props.isSelected && } ); }; diff --git a/demo/src/screens/componentScreens/RadioButtonScreen.js b/demo/src/screens/componentScreens/RadioButtonScreen.js index 12e6a1b735..0e9239035f 100644 --- a/demo/src/screens/componentScreens/RadioButtonScreen.js +++ b/demo/src/screens/componentScreens/RadioButtonScreen.js @@ -102,8 +102,8 @@ export default class RadioButtonScreen extends Component { Yes or No? - {this.renderRadioButtonWithImage('yes', Assets.icons.check, {tintColor: 'green'})} - {this.renderRadioButtonWithImage('no', Assets.icons.x, {tintColor: 'red'})} + {this.renderRadioButtonWithImage('yes', Assets.icons.demo.check, {tintColor: 'green'})} + {this.renderRadioButtonWithImage('no', Assets.icons.demo.x, {tintColor: 'red'})} You chose: {this.state.value} diff --git a/demo/src/screens/componentScreens/SegmentedControlScreen.tsx b/demo/src/screens/componentScreens/SegmentedControlScreen.tsx index 22bd160842..ffd627a267 100644 --- a/demo/src/screens/componentScreens/SegmentedControlScreen.tsx +++ b/demo/src/screens/componentScreens/SegmentedControlScreen.tsx @@ -1,6 +1,16 @@ import React, {useCallback, useState} from 'react'; import {StyleSheet} from 'react-native'; -import {Text, View, Colors, SegmentedControl, Assets, Spacings, BorderRadiuses, Typography, SegmentedControlItemProps} from 'react-native-ui-lib'; +import { + Text, + View, + Colors, + SegmentedControl, + Assets, + Spacings, + BorderRadiuses, + Typography, + SegmentedControlItemProps +} from 'react-native-ui-lib'; const segments: Record> = { first: [{label: 'Default'}, {label: 'Form'}], @@ -8,7 +18,7 @@ const segments: Record> = { third: [ { label: 'Very Long Label with icon', - iconSource: Assets.icons.search, + iconSource: Assets.icons.demo.search, iconStyle: {marginLeft: Spacings.s1, width: 16, height: 16}, iconOnRight: true }, @@ -18,7 +28,11 @@ const segments: Record> = { fifth: [{label: 'Full'}, {label: 'Width'}], sixth: [{label: 'Full'}, {label: 'Width'}, {label: 'With'}, {label: 'A'}, {label: 'Very Long Segment'}], seventh: [{label: '$'}, {label: '%'}], - eighth: [{label: 'Plus', iconSource: Assets.icons.plusSmall}, {label: 'Minus', iconSource: Assets.icons.minusSmall}, {label: 'Check', iconSource: Assets.icons.checkSmall}], + eighth: [ + {label: 'Plus', iconSource: Assets.icons.demo.plus}, + {label: 'Minus', iconSource: Assets.icons.demo.minus}, + {label: 'Check', iconSource: Assets.icons.demo.check} + ], ninth: [{label: 'with'}, {label: 'a'}, {label: 'label'}] }; @@ -72,7 +86,9 @@ const SegmentedControlScreen = () => { segmentLabelStyle={styles.customTypography} preset={screenPreset} /> - With Icons + + With Icons + Custom Styling diff --git a/demo/src/screens/componentScreens/TabControllerScreen/tab1.tsx b/demo/src/screens/componentScreens/TabControllerScreen/tab1.tsx index 6bbe9d8879..10c735d88d 100644 --- a/demo/src/screens/componentScreens/TabControllerScreen/tab1.tsx +++ b/demo/src/screens/componentScreens/TabControllerScreen/tab1.tsx @@ -24,7 +24,7 @@ class Tab1 extends Component { round style={{width: 50}} size={Button.sizes.small} - iconSource={Assets.icons.search} + iconSource={Assets.icons.demo.search} white /> diff --git a/demo/src/screens/componentScreens/ToastsScreen.js b/demo/src/screens/componentScreens/ToastsScreen.js index 9c932febba..d067c711cf 100644 --- a/demo/src/screens/componentScreens/ToastsScreen.js +++ b/demo/src/screens/componentScreens/ToastsScreen.js @@ -108,7 +108,7 @@ export default class ToastsScreen extends Component { onDismiss={this.dismissTopToast} // autoDismiss={3000} showDismiss={showDismiss} - // action={{iconSource: Assets.icons.x, onPress: () => console.log('dismiss')}} + // action={{iconSource: Assets.icons.demo.x, onPress: () => console.log('dismiss')}} showLoader={showLoader} /> { // console.warn('dismiss press'); diff --git a/expoDemo/MainScreen.tsx b/expoDemo/MainScreen.tsx index 39f7fd70d7..3d05ef4a43 100644 --- a/expoDemo/MainScreen.tsx +++ b/expoDemo/MainScreen.tsx @@ -83,7 +83,7 @@ export default function MainScreen({navigation}) { preset={null} text70 fieldStyle={styles.fieldStyle} - leadingAccessory={} + leadingAccessory={} /> } sections={sections} diff --git a/package.json b/package.json index 16620d94d9..433514f173 100644 --- a/package.json +++ b/package.json @@ -14,6 +14,7 @@ "url": "https://github.com/wix/react-native-ui-lib" }, "scripts": { + "update-web-assets": "node scripts/assets/extract-dimensions.js", "start": "watchman watch-del-all && react-native start", "start:web": "npm --prefix webDemo run start", "ios": "react-native run-ios", @@ -83,6 +84,7 @@ "@types/hoist-non-react-statics": "^3.3.1", "@types/jest": "^29.2.1", "@types/lodash": "^4.0.0", + "@types/mime-types": "^2.1.4", "@types/prop-types": "^15.5.3", "@types/react": "18.3.7", "@types/react-native": "0.73.0", @@ -100,9 +102,11 @@ "eslint-plugin-react": "^7.24.0", "eslint-plugin-react-hooks": "^4.0.4", "eslint-plugin-react-native": "^4.0.0", + "image-size": "^2.0.1", "jest": "^29.6.3", "light-date": "^1.2.0", "metro-react-native-babel-preset": "0.73.10", + "mime-types": "^2.1.35", "moment": "^2.24.0", "object-hash": "^3.0.0", "postcss": "^8.4.21", diff --git a/scripts/assets/extract-dimensions.js b/scripts/assets/extract-dimensions.js new file mode 100644 index 0000000000..432f381d7d --- /dev/null +++ b/scripts/assets/extract-dimensions.js @@ -0,0 +1,85 @@ +const fs = require('fs'); +const path = require('path'); +const mime = require('mime-types'); +const {imageSize: sizeOf} = require('image-size'); + +// Base paths +const ICONS_PATH = path.resolve(__dirname, '../../src/assets/internal/icons'); +const IMAGES_PATH = path.resolve(__dirname, '../../src/assets/internal/images'); + +// Function to check if file is an image +function isImageFile(filePath) { + const mimeType = mime.lookup(filePath); + return !!mimeType && mimeType.includes('image'); +} + +// Function to get dimensions of an image +function getDimensions(imagePath) { + try { + if (!isImageFile(imagePath)) { + console.warn(`File is not an image: ${imagePath}`); + return {width: 0, height: 0}; + } + + try { + const buffer = fs.readFileSync(imagePath); + const dimensions = sizeOf(buffer); + return { + width: dimensions.width, + height: dimensions.height + }; + } catch (sizeError) { + console.error(`Error getting dimensions for ${imagePath}:`, sizeError); + // Default dimensions if sizeOf fails + return {width: 24, height: 24}; + } + } catch (error) { + console.error(`Error getting dimensions for ${imagePath}:`, error); + return {width: 0, height: 0}; + } +} + +// Function to create index files with dimensions +function createIndexFile(sourcePath, targetPath, fileType) { + const files = fs.readdirSync(sourcePath).filter(file => !file.includes('@') && !file.startsWith('.')); + + let content = ''; + + if (fileType === 'icons') { + content = 'export const icons = {\n'; + } else if (fileType === 'images') { + content = 'export const images = {\n'; + } + + files.forEach(file => { + const filePath = path.join(sourcePath, file); + const mimeType = mime.lookup(filePath); + const isImage = !!mimeType && mimeType.includes('image'); + + if (!isImage) { + console.warn(`Skipping non-image file: ${filePath}`); + return; + } + + const name = path.basename(file, path.extname(file)); + const dimensions = getDimensions(filePath); + + // Handle hyphenated filenames by converting to camelCase + const propertyName = name.replace(/-([a-z])/g, (match, letter) => letter.toUpperCase()); + + content += ` get ${propertyName}() {\n`; + content += ` return {uri: require('./${file}'), dimensions: {width: ${dimensions.width}, height: ${dimensions.height}}};\n`; + content += ` },\n`; + }); + + content += '};\n'; + + fs.writeFileSync(targetPath, content); + console.log(`Created ${targetPath}`); +} + +// Create index files +createIndexFile(ICONS_PATH, path.join(ICONS_PATH, 'index.ts'), 'icons'); +createIndexFile(IMAGES_PATH, path.join(IMAGES_PATH, 'index.ts'), 'images'); + +console.log('Index files created successfully!'); diff --git a/src/assets/images/index.js b/src/assets/images/index.js deleted file mode 100644 index f0fc6b5c97..0000000000 --- a/src/assets/images/index.js +++ /dev/null @@ -1,5 +0,0 @@ -export const images = { - get gradient() { - return require('./gradient.png'); - } -}; diff --git a/src/assets/index.ts b/src/assets/index.ts index d388e7af8d..1ecedc90fb 100644 --- a/src/assets/index.ts +++ b/src/assets/index.ts @@ -1,13 +1,10 @@ import {Assets} from './Assets'; export default new Assets().loadAssetsGroup('', { - get icons() { - return require('./icons').icons; - }, get emojis() { return require('./emojis').emojis; }, - get images() { - return require('./images').images; + get internal() { + return require('./internal').internal; } }); diff --git a/src/assets/internal/icons/check.png b/src/assets/internal/icons/check.png new file mode 100644 index 0000000000..dc0f085e7e Binary files /dev/null and b/src/assets/internal/icons/check.png differ diff --git a/src/assets/internal/icons/check@1.5x.png b/src/assets/internal/icons/check@1.5x.png new file mode 100644 index 0000000000..c43c034a57 Binary files /dev/null and b/src/assets/internal/icons/check@1.5x.png differ diff --git a/src/assets/internal/icons/check@2x.png b/src/assets/internal/icons/check@2x.png new file mode 100644 index 0000000000..8ee55e6f55 Binary files /dev/null and b/src/assets/internal/icons/check@2x.png differ diff --git a/src/assets/internal/icons/check@3x.png b/src/assets/internal/icons/check@3x.png new file mode 100644 index 0000000000..ffd49135dd Binary files /dev/null and b/src/assets/internal/icons/check@3x.png differ diff --git a/src/assets/internal/icons/check@4x.png b/src/assets/internal/icons/check@4x.png new file mode 100644 index 0000000000..54951341dc Binary files /dev/null and b/src/assets/internal/icons/check@4x.png differ diff --git a/src/components/wizard/assets/checkMarkSmall.png b/src/assets/internal/icons/checkMarkSmall.png similarity index 100% rename from src/components/wizard/assets/checkMarkSmall.png rename to src/assets/internal/icons/checkMarkSmall.png diff --git a/src/components/wizard/assets/checkMarkSmall@1.5x.png b/src/assets/internal/icons/checkMarkSmall@1.5x.png similarity index 100% rename from src/components/wizard/assets/checkMarkSmall@1.5x.png rename to src/assets/internal/icons/checkMarkSmall@1.5x.png diff --git a/src/components/wizard/assets/checkMarkSmall@2x.png b/src/assets/internal/icons/checkMarkSmall@2x.png similarity index 100% rename from src/components/wizard/assets/checkMarkSmall@2x.png rename to src/assets/internal/icons/checkMarkSmall@2x.png diff --git a/src/components/wizard/assets/checkMarkSmall@3x.png b/src/assets/internal/icons/checkMarkSmall@3x.png similarity index 100% rename from src/components/wizard/assets/checkMarkSmall@3x.png rename to src/assets/internal/icons/checkMarkSmall@3x.png diff --git a/src/components/wizard/assets/checkMarkSmall@4x.png b/src/assets/internal/icons/checkMarkSmall@4x.png similarity index 100% rename from src/components/wizard/assets/checkMarkSmall@4x.png rename to src/assets/internal/icons/checkMarkSmall@4x.png diff --git a/src/assets/icons/check-small.png b/src/assets/internal/icons/checkSmall.png similarity index 100% rename from src/assets/icons/check-small.png rename to src/assets/internal/icons/checkSmall.png diff --git a/src/assets/icons/check-small@1.5x.png b/src/assets/internal/icons/checkSmall@1.5x.png similarity index 100% rename from src/assets/icons/check-small@1.5x.png rename to src/assets/internal/icons/checkSmall@1.5x.png diff --git a/src/assets/icons/check-small@2x.png b/src/assets/internal/icons/checkSmall@2x.png similarity index 100% rename from src/assets/icons/check-small@2x.png rename to src/assets/internal/icons/checkSmall@2x.png diff --git a/src/assets/icons/check-small@3x.png b/src/assets/internal/icons/checkSmall@3x.png similarity index 100% rename from src/assets/icons/check-small@3x.png rename to src/assets/internal/icons/checkSmall@3x.png diff --git a/src/assets/icons/check-small@4x.png b/src/assets/internal/icons/checkSmall@4x.png similarity index 100% rename from src/assets/icons/check-small@4x.png rename to src/assets/internal/icons/checkSmall@4x.png diff --git a/src/components/picker/assets/dropdown.png b/src/assets/internal/icons/chevronDown.png similarity index 100% rename from src/components/picker/assets/dropdown.png rename to src/assets/internal/icons/chevronDown.png diff --git a/src/components/picker/assets/dropdown@1.5x.png b/src/assets/internal/icons/chevronDown@1.5x.png similarity index 100% rename from src/components/picker/assets/dropdown@1.5x.png rename to src/assets/internal/icons/chevronDown@1.5x.png diff --git a/src/components/picker/assets/dropdown@2x.png b/src/assets/internal/icons/chevronDown@2x.png similarity index 100% rename from src/components/picker/assets/dropdown@2x.png rename to src/assets/internal/icons/chevronDown@2x.png diff --git a/src/components/picker/assets/dropdown@3x.png b/src/assets/internal/icons/chevronDown@3x.png similarity index 100% rename from src/components/picker/assets/dropdown@3x.png rename to src/assets/internal/icons/chevronDown@3x.png diff --git a/src/components/picker/assets/dropdown@4x.png b/src/assets/internal/icons/chevronDown@4x.png similarity index 100% rename from src/components/picker/assets/dropdown@4x.png rename to src/assets/internal/icons/chevronDown@4x.png diff --git a/src/components/wizard/assets/exclamationSmall.png b/src/assets/internal/icons/exclamationSmall.png similarity index 100% rename from src/components/wizard/assets/exclamationSmall.png rename to src/assets/internal/icons/exclamationSmall.png diff --git a/src/components/wizard/assets/exclamationSmall@1.5x.png b/src/assets/internal/icons/exclamationSmall@1.5x.png similarity index 100% rename from src/components/wizard/assets/exclamationSmall@1.5x.png rename to src/assets/internal/icons/exclamationSmall@1.5x.png diff --git a/src/components/wizard/assets/exclamationSmall@2x.png b/src/assets/internal/icons/exclamationSmall@2x.png similarity index 100% rename from src/components/wizard/assets/exclamationSmall@2x.png rename to src/assets/internal/icons/exclamationSmall@2x.png diff --git a/src/components/wizard/assets/exclamationSmall@3x.png b/src/assets/internal/icons/exclamationSmall@3x.png similarity index 100% rename from src/components/wizard/assets/exclamationSmall@3x.png rename to src/assets/internal/icons/exclamationSmall@3x.png diff --git a/src/components/wizard/assets/exclamationSmall@4x.png b/src/assets/internal/icons/exclamationSmall@4x.png similarity index 100% rename from src/components/wizard/assets/exclamationSmall@4x.png rename to src/assets/internal/icons/exclamationSmall@4x.png diff --git a/src/assets/icons/index.js b/src/assets/internal/icons/index.js similarity index 59% rename from src/assets/icons/index.js rename to src/assets/internal/icons/index.js index 4c7d3978da..e5137b606d 100644 --- a/src/assets/icons/index.js +++ b/src/assets/internal/icons/index.js @@ -2,8 +2,17 @@ export const icons = { get check() { return require('./check.png'); }, + get checkMarkSmall() { + return require('./checkMarkSmall.png'); + }, get checkSmall() { - return require('./check-small.png'); + return require('./checkSmall.png'); + }, + get chevronDown() { + return require('./chevronDown.png'); + }, + get exclamationSmall() { + return require('./exclamationSmall.png'); }, get minusSmall() { return require('./minusSmall.png'); @@ -17,10 +26,13 @@ export const icons = { get x() { return require('./x.png'); }, + get xFlat() { + return require('./xFlat.png'); + }, get xMedium() { return require('./xMedium.png'); }, - get xFlat() { - return require('./xFlat.png'); + get xSmall() { + return require('./xSmall.png'); } }; diff --git a/src/assets/internal/icons/index.ts b/src/assets/internal/icons/index.ts new file mode 100644 index 0000000000..12545ffaa4 --- /dev/null +++ b/src/assets/internal/icons/index.ts @@ -0,0 +1,38 @@ +export const icons = { + get check() { + return {uri: require('./check.png'), dimensions: {width: 21, height: 15}}; + }, + get checkMarkSmall() { + return {uri: require('./checkMarkSmall.png'), dimensions: {width: 16, height: 16}}; + }, + get checkSmall() { + return {uri: require('./checkSmall.png'), dimensions: {width: 24, height: 24}}; + }, + get chevronDown() { + return {uri: require('./chevronDown.png'), dimensions: {width: 16, height: 16}}; + }, + get exclamationSmall() { + return {uri: require('./exclamationSmall.png'), dimensions: {width: 16, height: 16}}; + }, + get minusSmall() { + return {uri: require('./minusSmall.png'), dimensions: {width: 16, height: 16}}; + }, + get plusSmall() { + return {uri: require('./plusSmall.png'), dimensions: {width: 16, height: 16}}; + }, + get search() { + return {uri: require('./search.png'), dimensions: {width: 24, height: 24}}; + }, + get x() { + return {uri: require('./x.png'), dimensions: {width: 17, height: 16}}; + }, + get xFlat() { + return {uri: require('./xFlat.png'), dimensions: {width: 16, height: 16}}; + }, + get xMedium() { + return {uri: require('./xMedium.png'), dimensions: {width: 24, height: 24}}; + }, + get xSmall() { + return {uri: require('./xSmall.png'), dimensions: {width: 16, height: 16}}; + } +}; diff --git a/src/assets/internal/icons/minusSmall.png b/src/assets/internal/icons/minusSmall.png new file mode 100644 index 0000000000..9db92470be Binary files /dev/null and b/src/assets/internal/icons/minusSmall.png differ diff --git a/src/assets/internal/icons/minusSmall@1.5x.png b/src/assets/internal/icons/minusSmall@1.5x.png new file mode 100644 index 0000000000..a1b0d0ec72 Binary files /dev/null and b/src/assets/internal/icons/minusSmall@1.5x.png differ diff --git a/src/assets/internal/icons/minusSmall@2x.png b/src/assets/internal/icons/minusSmall@2x.png new file mode 100644 index 0000000000..18de576888 Binary files /dev/null and b/src/assets/internal/icons/minusSmall@2x.png differ diff --git a/src/assets/internal/icons/minusSmall@3x.png b/src/assets/internal/icons/minusSmall@3x.png new file mode 100644 index 0000000000..1fdc36347b Binary files /dev/null and b/src/assets/internal/icons/minusSmall@3x.png differ diff --git a/src/assets/internal/icons/minusSmall@4x.png b/src/assets/internal/icons/minusSmall@4x.png new file mode 100644 index 0000000000..62ef8d1572 Binary files /dev/null and b/src/assets/internal/icons/minusSmall@4x.png differ diff --git a/src/assets/icons/plusSmall.png b/src/assets/internal/icons/plusSmall.png similarity index 100% rename from src/assets/icons/plusSmall.png rename to src/assets/internal/icons/plusSmall.png diff --git a/src/assets/icons/plusSmall@1.5x.png b/src/assets/internal/icons/plusSmall@1.5x.png similarity index 100% rename from src/assets/icons/plusSmall@1.5x.png rename to src/assets/internal/icons/plusSmall@1.5x.png diff --git a/src/assets/icons/plusSmall@2x.png b/src/assets/internal/icons/plusSmall@2x.png similarity index 100% rename from src/assets/icons/plusSmall@2x.png rename to src/assets/internal/icons/plusSmall@2x.png diff --git a/src/assets/icons/plusSmall@3x.png b/src/assets/internal/icons/plusSmall@3x.png similarity index 100% rename from src/assets/icons/plusSmall@3x.png rename to src/assets/internal/icons/plusSmall@3x.png diff --git a/src/assets/icons/plusSmall@4x.png b/src/assets/internal/icons/plusSmall@4x.png similarity index 100% rename from src/assets/icons/plusSmall@4x.png rename to src/assets/internal/icons/plusSmall@4x.png diff --git a/src/assets/icons/search.png b/src/assets/internal/icons/search.png similarity index 100% rename from src/assets/icons/search.png rename to src/assets/internal/icons/search.png diff --git a/src/assets/icons/search@1.5x.png b/src/assets/internal/icons/search@1.5x.png similarity index 100% rename from src/assets/icons/search@1.5x.png rename to src/assets/internal/icons/search@1.5x.png diff --git a/src/assets/icons/search@2x.png b/src/assets/internal/icons/search@2x.png similarity index 100% rename from src/assets/icons/search@2x.png rename to src/assets/internal/icons/search@2x.png diff --git a/src/assets/icons/search@3x.png b/src/assets/internal/icons/search@3x.png similarity index 100% rename from src/assets/icons/search@3x.png rename to src/assets/internal/icons/search@3x.png diff --git a/src/assets/icons/search@4x.png b/src/assets/internal/icons/search@4x.png similarity index 100% rename from src/assets/icons/search@4x.png rename to src/assets/internal/icons/search@4x.png diff --git a/src/assets/internal/icons/x.png b/src/assets/internal/icons/x.png new file mode 100644 index 0000000000..6e55104df6 Binary files /dev/null and b/src/assets/internal/icons/x.png differ diff --git a/src/assets/internal/icons/x@2x.png b/src/assets/internal/icons/x@2x.png new file mode 100644 index 0000000000..084abe6e12 Binary files /dev/null and b/src/assets/internal/icons/x@2x.png differ diff --git a/src/assets/internal/icons/x@3x.png b/src/assets/internal/icons/x@3x.png new file mode 100644 index 0000000000..0f5f60143b Binary files /dev/null and b/src/assets/internal/icons/x@3x.png differ diff --git a/src/assets/icons/xFlat.png b/src/assets/internal/icons/xFlat.png similarity index 100% rename from src/assets/icons/xFlat.png rename to src/assets/internal/icons/xFlat.png diff --git a/src/assets/icons/xFlat@1.5x.png b/src/assets/internal/icons/xFlat@1.5x.png similarity index 100% rename from src/assets/icons/xFlat@1.5x.png rename to src/assets/internal/icons/xFlat@1.5x.png diff --git a/src/assets/icons/xFlat@2x.png b/src/assets/internal/icons/xFlat@2x.png similarity index 100% rename from src/assets/icons/xFlat@2x.png rename to src/assets/internal/icons/xFlat@2x.png diff --git a/src/assets/icons/xFlat@3x.png b/src/assets/internal/icons/xFlat@3x.png similarity index 100% rename from src/assets/icons/xFlat@3x.png rename to src/assets/internal/icons/xFlat@3x.png diff --git a/src/assets/icons/xFlat@4x.png b/src/assets/internal/icons/xFlat@4x.png similarity index 100% rename from src/assets/icons/xFlat@4x.png rename to src/assets/internal/icons/xFlat@4x.png diff --git a/src/assets/icons/xMedium.png b/src/assets/internal/icons/xMedium.png similarity index 100% rename from src/assets/icons/xMedium.png rename to src/assets/internal/icons/xMedium.png diff --git a/src/assets/icons/xMedium@1.5x.png b/src/assets/internal/icons/xMedium@1.5x.png similarity index 100% rename from src/assets/icons/xMedium@1.5x.png rename to src/assets/internal/icons/xMedium@1.5x.png diff --git a/src/assets/icons/xMedium@2x.png b/src/assets/internal/icons/xMedium@2x.png similarity index 100% rename from src/assets/icons/xMedium@2x.png rename to src/assets/internal/icons/xMedium@2x.png diff --git a/src/assets/icons/xMedium@3x.png b/src/assets/internal/icons/xMedium@3x.png similarity index 100% rename from src/assets/icons/xMedium@3x.png rename to src/assets/internal/icons/xMedium@3x.png diff --git a/src/assets/icons/xMedium@4x.png b/src/assets/internal/icons/xMedium@4x.png similarity index 100% rename from src/assets/icons/xMedium@4x.png rename to src/assets/internal/icons/xMedium@4x.png diff --git a/src/components/chipsInput/assets/xSmall.png b/src/assets/internal/icons/xSmall.png similarity index 100% rename from src/components/chipsInput/assets/xSmall.png rename to src/assets/internal/icons/xSmall.png diff --git a/src/components/chipsInput/assets/xSmall@1.5x.png b/src/assets/internal/icons/xSmall@1.5x.png similarity index 100% rename from src/components/chipsInput/assets/xSmall@1.5x.png rename to src/assets/internal/icons/xSmall@1.5x.png diff --git a/src/components/chipsInput/assets/xSmall@2x.png b/src/assets/internal/icons/xSmall@2x.png similarity index 100% rename from src/components/chipsInput/assets/xSmall@2x.png rename to src/assets/internal/icons/xSmall@2x.png diff --git a/src/components/chipsInput/assets/xSmall@3x.png b/src/assets/internal/icons/xSmall@3x.png similarity index 100% rename from src/components/chipsInput/assets/xSmall@3x.png rename to src/assets/internal/icons/xSmall@3x.png diff --git a/src/components/chipsInput/assets/xSmall@4x.png b/src/assets/internal/icons/xSmall@4x.png similarity index 100% rename from src/components/chipsInput/assets/xSmall@4x.png rename to src/assets/internal/icons/xSmall@4x.png diff --git a/src/assets/images/gradient.png b/src/assets/internal/images/gradient.png similarity index 100% rename from src/assets/images/gradient.png rename to src/assets/internal/images/gradient.png diff --git a/src/components/scrollBar/assets/gradientOverlay.png b/src/assets/internal/images/gradientOverlay.png similarity index 100% rename from src/components/scrollBar/assets/gradientOverlay.png rename to src/assets/internal/images/gradientOverlay.png diff --git a/src/components/overlay/assets/GradientOverlayHigh.png b/src/assets/internal/images/gradientOverlayHigh.png similarity index 100% rename from src/components/overlay/assets/GradientOverlayHigh.png rename to src/assets/internal/images/gradientOverlayHigh.png diff --git a/src/components/overlay/assets/GradientOverlayHigh@1.5x.png b/src/assets/internal/images/gradientOverlayHigh@1.5x.png similarity index 100% rename from src/components/overlay/assets/GradientOverlayHigh@1.5x.png rename to src/assets/internal/images/gradientOverlayHigh@1.5x.png diff --git a/src/components/overlay/assets/GradientOverlayHigh@2x.png b/src/assets/internal/images/gradientOverlayHigh@2x.png similarity index 100% rename from src/components/overlay/assets/GradientOverlayHigh@2x.png rename to src/assets/internal/images/gradientOverlayHigh@2x.png diff --git a/src/components/overlay/assets/GradientOverlayHigh@3x.png b/src/assets/internal/images/gradientOverlayHigh@3x.png similarity index 100% rename from src/components/overlay/assets/GradientOverlayHigh@3x.png rename to src/assets/internal/images/gradientOverlayHigh@3x.png diff --git a/src/components/overlay/assets/GradientOverlayHigh@4x.png b/src/assets/internal/images/gradientOverlayHigh@4x.png similarity index 100% rename from src/components/overlay/assets/GradientOverlayHigh@4x.png rename to src/assets/internal/images/gradientOverlayHigh@4x.png diff --git a/src/components/overlay/assets/GradientOverlayLow.png b/src/assets/internal/images/gradientOverlayLow.png similarity index 100% rename from src/components/overlay/assets/GradientOverlayLow.png rename to src/assets/internal/images/gradientOverlayLow.png diff --git a/src/components/overlay/assets/GradientOverlayLow@1.5x.png b/src/assets/internal/images/gradientOverlayLow@1.5x.png similarity index 100% rename from src/components/overlay/assets/GradientOverlayLow@1.5x.png rename to src/assets/internal/images/gradientOverlayLow@1.5x.png diff --git a/src/components/overlay/assets/GradientOverlayLow@2x.png b/src/assets/internal/images/gradientOverlayLow@2x.png similarity index 100% rename from src/components/overlay/assets/GradientOverlayLow@2x.png rename to src/assets/internal/images/gradientOverlayLow@2x.png diff --git a/src/components/overlay/assets/GradientOverlayLow@3x.png b/src/assets/internal/images/gradientOverlayLow@3x.png similarity index 100% rename from src/components/overlay/assets/GradientOverlayLow@3x.png rename to src/assets/internal/images/gradientOverlayLow@3x.png diff --git a/src/components/overlay/assets/GradientOverlayLow@4x.png b/src/assets/internal/images/gradientOverlayLow@4x.png similarity index 100% rename from src/components/overlay/assets/GradientOverlayLow@4x.png rename to src/assets/internal/images/gradientOverlayLow@4x.png diff --git a/src/components/overlay/assets/GradientOverlayMedium.png b/src/assets/internal/images/gradientOverlayMedium.png similarity index 100% rename from src/components/overlay/assets/GradientOverlayMedium.png rename to src/assets/internal/images/gradientOverlayMedium.png diff --git a/src/components/overlay/assets/GradientOverlayMedium@1.5x.png b/src/assets/internal/images/gradientOverlayMedium@1.5x.png similarity index 100% rename from src/components/overlay/assets/GradientOverlayMedium@1.5x.png rename to src/assets/internal/images/gradientOverlayMedium@1.5x.png diff --git a/src/components/overlay/assets/GradientOverlayMedium@2x.png b/src/assets/internal/images/gradientOverlayMedium@2x.png similarity index 100% rename from src/components/overlay/assets/GradientOverlayMedium@2x.png rename to src/assets/internal/images/gradientOverlayMedium@2x.png diff --git a/src/components/overlay/assets/GradientOverlayMedium@3x.png b/src/assets/internal/images/gradientOverlayMedium@3x.png similarity index 100% rename from src/components/overlay/assets/GradientOverlayMedium@3x.png rename to src/assets/internal/images/gradientOverlayMedium@3x.png diff --git a/src/components/overlay/assets/GradientOverlayMedium@4x.png b/src/assets/internal/images/gradientOverlayMedium@4x.png similarity index 100% rename from src/components/overlay/assets/GradientOverlayMedium@4x.png rename to src/assets/internal/images/gradientOverlayMedium@4x.png diff --git a/src/components/hint/assets/hintTipMiddle.png b/src/assets/internal/images/hintTipMiddle.png similarity index 100% rename from src/components/hint/assets/hintTipMiddle.png rename to src/assets/internal/images/hintTipMiddle.png diff --git a/src/components/hint/assets/hintTipMiddle@1.5x.png b/src/assets/internal/images/hintTipMiddle@1.5x.png similarity index 100% rename from src/components/hint/assets/hintTipMiddle@1.5x.png rename to src/assets/internal/images/hintTipMiddle@1.5x.png diff --git a/src/components/hint/assets/hintTipMiddle@2x.png b/src/assets/internal/images/hintTipMiddle@2x.png similarity index 100% rename from src/components/hint/assets/hintTipMiddle@2x.png rename to src/assets/internal/images/hintTipMiddle@2x.png diff --git a/src/components/hint/assets/hintTipMiddle@3x.png b/src/assets/internal/images/hintTipMiddle@3x.png similarity index 100% rename from src/components/hint/assets/hintTipMiddle@3x.png rename to src/assets/internal/images/hintTipMiddle@3x.png diff --git a/src/components/hint/assets/hintTipMiddle@4x.png b/src/assets/internal/images/hintTipMiddle@4x.png similarity index 100% rename from src/components/hint/assets/hintTipMiddle@4x.png rename to src/assets/internal/images/hintTipMiddle@4x.png diff --git a/src/components/hint/assets/hintTipSide.png b/src/assets/internal/images/hintTipSide.png similarity index 100% rename from src/components/hint/assets/hintTipSide.png rename to src/assets/internal/images/hintTipSide.png diff --git a/src/components/hint/assets/hintTipSide@1.5x.png b/src/assets/internal/images/hintTipSide@1.5x.png similarity index 100% rename from src/components/hint/assets/hintTipSide@1.5x.png rename to src/assets/internal/images/hintTipSide@1.5x.png diff --git a/src/components/hint/assets/hintTipSide@2x.png b/src/assets/internal/images/hintTipSide@2x.png similarity index 100% rename from src/components/hint/assets/hintTipSide@2x.png rename to src/assets/internal/images/hintTipSide@2x.png diff --git a/src/components/hint/assets/hintTipSide@3x.png b/src/assets/internal/images/hintTipSide@3x.png similarity index 100% rename from src/components/hint/assets/hintTipSide@3x.png rename to src/assets/internal/images/hintTipSide@3x.png diff --git a/src/components/hint/assets/hintTipSide@4x.png b/src/assets/internal/images/hintTipSide@4x.png similarity index 100% rename from src/components/hint/assets/hintTipSide@4x.png rename to src/assets/internal/images/hintTipSide@4x.png diff --git a/src/assets/internal/images/index.js b/src/assets/internal/images/index.js new file mode 100644 index 0000000000..c07cdb9b27 --- /dev/null +++ b/src/assets/internal/images/index.js @@ -0,0 +1,26 @@ +export const images = { + get gradient() { + return require('./gradient.png'); + }, + get gradientOverlay() { + return require('./gradientOverlay.png'); + }, + get gradientOverlayHigh() { + return require('./gradientOverlayHigh.png'); + }, + get gradientOverlayLow() { + return require('./gradientOverlayLow.png'); + }, + get gradientOverlayMedium() { + return require('./gradientOverlayMedium.png'); + }, + get hintTipMiddle() { + return require('./hintTipMiddle.png'); + }, + get hintTipSide() { + return require('./hintTipSide.png'); + }, + get transparentSwatch() { + return require('./transparentSwatch.png'); + } +}; diff --git a/src/assets/internal/images/index.ts b/src/assets/internal/images/index.ts new file mode 100644 index 0000000000..c6f049c951 --- /dev/null +++ b/src/assets/internal/images/index.ts @@ -0,0 +1,26 @@ +export const images = { + get gradient() { + return {uri: require('./gradient.png'), dimensions: {width: 56, height: 2}}; + }, + get gradientOverlay() { + return {uri: require('./gradientOverlay.png'), dimensions: {width: 76, height: 48}}; + }, + get gradientOverlayHigh() { + return {uri: require('./gradientOverlayHigh.png'), dimensions: {width: 1, height: 297}}; + }, + get gradientOverlayLow() { + return {uri: require('./gradientOverlayLow.png'), dimensions: {width: 1, height: 297}}; + }, + get gradientOverlayMedium() { + return {uri: require('./gradientOverlayMedium.png'), dimensions: {width: 1, height: 297}}; + }, + get hintTipMiddle() { + return {uri: require('./hintTipMiddle.png'), dimensions: {width: 20, height: 7}}; + }, + get hintTipSide() { + return {uri: require('./hintTipSide.png'), dimensions: {width: 20, height: 24}}; + }, + get transparentSwatch() { + return {uri: require('./transparentSwatch.png'), dimensions: {width: 100, height: 100}}; + } +}; diff --git a/src/components/colorSwatch/assets/transparentSwatch/TransparentSwatch.png b/src/assets/internal/images/transparentSwatch.png similarity index 100% rename from src/components/colorSwatch/assets/transparentSwatch/TransparentSwatch.png rename to src/assets/internal/images/transparentSwatch.png diff --git a/src/components/colorSwatch/assets/transparentSwatch/TransparentSwatch@1.5x.png b/src/assets/internal/images/transparentSwatch@1.5x.png similarity index 100% rename from src/components/colorSwatch/assets/transparentSwatch/TransparentSwatch@1.5x.png rename to src/assets/internal/images/transparentSwatch@1.5x.png diff --git a/src/components/colorSwatch/assets/transparentSwatch/TransparentSwatch@2x.png b/src/assets/internal/images/transparentSwatch@2x.png similarity index 100% rename from src/components/colorSwatch/assets/transparentSwatch/TransparentSwatch@2x.png rename to src/assets/internal/images/transparentSwatch@2x.png diff --git a/src/components/colorSwatch/assets/transparentSwatch/TransparentSwatch@3x.png b/src/assets/internal/images/transparentSwatch@3x.png similarity index 100% rename from src/components/colorSwatch/assets/transparentSwatch/TransparentSwatch@3x.png rename to src/assets/internal/images/transparentSwatch@3x.png diff --git a/src/components/colorSwatch/assets/transparentSwatch/TransparentSwatch@4x.png b/src/assets/internal/images/transparentSwatch@4x.png similarity index 100% rename from src/components/colorSwatch/assets/transparentSwatch/TransparentSwatch@4x.png rename to src/assets/internal/images/transparentSwatch@4x.png diff --git a/src/assets/internal/index.ts b/src/assets/internal/index.ts new file mode 100644 index 0000000000..6b281d4294 --- /dev/null +++ b/src/assets/internal/index.ts @@ -0,0 +1,8 @@ +export const internal = { + get icons() { + return require('./icons').icons; + }, + get images() { + return require('./images').images; + } +}; diff --git a/src/components/animatedImage/index.tsx b/src/components/animatedImage/index.tsx index a29e98a20a..defc4ea8a0 100644 --- a/src/components/animatedImage/index.tsx +++ b/src/components/animatedImage/index.tsx @@ -51,18 +51,16 @@ const AnimatedImage = (props: AnimatedImageProps) => { } }, [loader]); - const onLoad = useCallback( - (event: NativeSyntheticEvent) => { - setIsLoading(false); - propsOnLoad?.(event); - // did not start the animation already - if (opacity.value === 0) { - opacity.value = withTiming(1, {duration: animationDuration}); - } - }, - // eslint-disable-next-line react-hooks/exhaustive-deps - [setIsLoading, propsOnLoad, animationDuration] - ); + const onLoad = useCallback((event: NativeSyntheticEvent) => { + setIsLoading(false); + propsOnLoad?.(event); + // did not start the animation already + if (opacity.value === 0) { + opacity.value = withTiming(1, {duration: animationDuration}); + } + }, + // eslint-disable-next-line react-hooks/exhaustive-deps + [setIsLoading, propsOnLoad, animationDuration]); const onLoadStart = useCallback(() => { setIsLoading(true); diff --git a/src/components/card/index.tsx b/src/components/card/index.tsx index a48cc3b104..e80f5cbbd9 100644 --- a/src/components/card/index.tsx +++ b/src/components/card/index.tsx @@ -23,7 +23,7 @@ const DEFAULT_SELECTION_PROPS = { borderWidth: 2, color: Colors.$backgroundPrimaryHeavy, indicatorSize: 20, - icon: Assets.icons.checkSmall, + icon: Assets.internal.icons.checkSmall, iconColor: Colors.$iconDefaultLight, hideIndicator: false }; diff --git a/src/components/checkbox/__tests__/index.spec.tsx b/src/components/checkbox/__tests__/index.spec.tsx index 411e137771..55cae8275e 100644 --- a/src/components/checkbox/__tests__/index.spec.tsx +++ b/src/components/checkbox/__tests__/index.spec.tsx @@ -42,8 +42,7 @@ describe('Checkbox renderer test', () => { checkboxInitialValue | checkboxExpectedValue ${false} | ${true} ${true} | ${false} - `( - 'Send value ($checkboxInitialValue)', + `('Send value ($checkboxInitialValue)', async ({ checkboxInitialValue, checkboxExpectedValue @@ -59,8 +58,7 @@ describe('Checkbox renderer test', () => { expect(onValueChange).toHaveBeenCalledTimes(1); expect(onValueChange).toHaveBeenCalledWith(checkboxExpectedValue); - } - ); + }); }); describe('Press', () => { diff --git a/src/components/checkbox/index.tsx b/src/components/checkbox/index.tsx index 7fb1db98e7..603a70bb04 100644 --- a/src/components/checkbox/index.tsx +++ b/src/components/checkbox/index.tsx @@ -280,7 +280,7 @@ class Checkbox extends Component { > diff --git a/src/components/chip/index.tsx b/src/components/chip/index.tsx index 6e2f94cc38..b9ae49e212 100644 --- a/src/components/chip/index.tsx +++ b/src/components/chip/index.tsx @@ -146,7 +146,7 @@ const Chip = ({ containerStyle, onDismiss, dismissColor = Colors.$iconDefault, - dismissIcon = Assets.icons.x, + dismissIcon = Assets.internal.icons.x, dismissIconStyle, dismissContainerStyle, iconProps, diff --git a/src/components/chipsInput/index.tsx b/src/components/chipsInput/index.tsx index 781b042f48..2c80fea45c 100644 --- a/src/components/chipsInput/index.tsx +++ b/src/components/chipsInput/index.tsx @@ -4,10 +4,9 @@ import {isUndefined, map} from 'lodash'; import {Constants} from '../../commons/new'; import {useCombinedRefs, useDidUpdate} from '../../hooks'; import TextField, {TextFieldProps} from '../textField'; +import Assets from '../../assets'; import Chip, {ChipProps} from '../chip'; -const removeIcon = require('./assets/xSmall.png'); - export enum ChipsInputChangeReason { Added = 'added', Removed = 'removed' @@ -122,7 +121,7 @@ const ChipsInput = forwardRef((props: ChipsInputProps, refToForward: React.Ref {