diff --git a/docuilib/package.json b/docuilib/package.json index 0e0e46f183..e761696272 100644 --- a/docuilib/package.json +++ b/docuilib/package.json @@ -1,6 +1,6 @@ { "name": "uilib-docs", - "version": "3.13.0", + "version": "3.14.0", "main": "./src/index.ts", "scripts": { "docusaurus": "docusaurus", diff --git a/docuilib/src/theme/ReactLiveScope/configurations.ts b/docuilib/src/theme/ReactLiveScope/configurations.ts deleted file mode 100644 index 78100e237c..0000000000 --- a/docuilib/src/theme/ReactLiveScope/configurations.ts +++ /dev/null @@ -1,11 +0,0 @@ -import {ThemeManager} from 'react-native-ui-lib/core'; - -ThemeManager.setComponentForcedTheme('Icon', props => { - const {source} = props; - return source?.default ? {source: source.default} : source?.source ? source : undefined; -}); - -ThemeManager.setComponentForcedTheme('Image', props => { - const {source} = props; - return source?.default ? {source: source.default} : source; -}); diff --git a/docuilib/src/theme/ReactLiveScope/index.js b/docuilib/src/theme/ReactLiveScope/index.js index 80f7932efb..dfe2910327 100644 --- a/docuilib/src/theme/ReactLiveScope/index.js +++ b/docuilib/src/theme/ReactLiveScope/index.js @@ -1,6 +1,5 @@ import React from 'react'; import products from '../../assets/data/products'; -require('./configurations'); import {Colors} from 'react-native-ui-lib/style'; import {BorderRadiuses, Button, Image, Spacings, Text, TouchableOpacity, View} from 'react-native-ui-lib/core'; import ActionBar from 'react-native-ui-lib/actionBar'; @@ -34,16 +33,18 @@ import * as Playground from './Playground'; Assets.loadAssetsGroup('icons.demo', { // chevronDown: require('../../assets/icons/chevronDown.png').default, chevronRight: { - source: require('../../assets/icons/chevronRight.png').default, - style: {width: 24, height: 24} + uri: require('../../assets/icons/chevronRight.png').default, + width: 24, + height: 24 }, // add: require('../../assets/icons/add.png').default, // camera: require('../../assets/icons/cameraSelected.png').default, // close: require('../../assets/icons/close.png').default, // dashboard: require('../../assets/icons/dashboard.png').default, drag: { - source: require('../../assets/icons/drag.png').default, - style: {width: 10, height: 16} + uri: require('../../assets/icons/drag.png').default, + width: 10, + height: 16 } // image: require('../../assets/icons/image.png').default, // plus: require('../../assets/icons/plus.png').default, diff --git a/package.json b/package.json index e7e774bbee..68440b9b1f 100644 --- a/package.json +++ b/package.json @@ -39,7 +39,8 @@ "releaseDemo": "./scripts/release/releaseDemo.sh", "releaseDocs": "./scripts/release/releaseDocs.sh", "releaseEslint": "./scripts/release/releaseEslint.sh", - "releaseNative": "./scripts/release/releaseNative.sh" + "releaseNative": "./scripts/release/releaseNative.sh", + "updateWebAssets": "node scripts/assets/extractDimensions.js" }, "dependencies": { "babel-plugin-transform-inline-environment-variables": "^0.0.2", diff --git a/scripts/assets/extractDimensions.js b/scripts/assets/extractDimensions.js new file mode 100644 index 0000000000..ee4b37b3f8 --- /dev/null +++ b/scripts/assets/extractDimensions.js @@ -0,0 +1,88 @@ +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) { + // eslint-disable-next-line no-restricted-syntax + console.error(`Error getting dimensions for ${imagePath}:`, sizeError); + // Default dimensions if sizeOf fails + return {width: 24, height: 24}; + } + } catch (error) { + // eslint-disable-next-line no-restricted-syntax + 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('@')); + + let content = ''; + + if (fileType === 'icons') { + content = 'export const icons = {\n'; + } else if (fileType === 'images') { + content = 'export const images = {\n'; + } + + files.forEach((file, index) => { + 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`; + // eslint-disable-next-line max-len + content += ` return {uri: require('./${file}').default, width: ${dimensions.width}, height: ${dimensions.height}};\n`; + content += index === files.length - 1 ? ` }\n` : ` },\n`; // Conditional check for the last file + }); + + content += '};\n'; + + fs.writeFileSync(targetPath, content); + console.log(`Created ${targetPath}`); +} + +// Create index files +createIndexFile(ICONS_PATH, path.join(ICONS_PATH, 'index.web.js'), 'icons'); +createIndexFile(IMAGES_PATH, path.join(IMAGES_PATH, 'index.web.js'), 'images'); + +console.log('Index files created successfully!'); diff --git a/src/assets/internal/icons/index.web.js b/src/assets/internal/icons/index.web.js new file mode 100644 index 0000000000..8aa92259eb --- /dev/null +++ b/src/assets/internal/icons/index.web.js @@ -0,0 +1,50 @@ +export const icons = { + get check() { + return {uri: require('./check.png').default, width: 21, height: 15}; + }, + get checkMarkSmall() { + return {uri: require('./checkMarkSmall.png').default, width: 16, height: 16}; + }, + get checkSmall() { + return {uri: require('./checkSmall.png').default, width: 24, height: 24}; + }, + get chevronDown() { + return {uri: require('./chevronDown.png').default, width: 16, height: 16}; + }, + get exclamationSmall() { + return {uri: require('./exclamationSmall.png').default, width: 16, height: 16}; + }, + get minusOutline() { + return {uri: require('./minusOutline.png').default, width: 32, height: 32}; + }, + get minusOutlineSmall() { + return {uri: require('./minusOutlineSmall.png').default, width: 24, height: 24}; + }, + get minusSmall() { + return {uri: require('./minusSmall.png').default, width: 16, height: 16}; + }, + get plusOutline() { + return {uri: require('./plusOutline.png').default, width: 32, height: 32}; + }, + get plusOutlineSmall() { + return {uri: require('./plusOutlineSmall.png').default, width: 24, height: 24}; + }, + get plusSmall() { + return {uri: require('./plusSmall.png').default, width: 16, height: 16}; + }, + get search() { + return {uri: require('./search.png').default, width: 24, height: 24}; + }, + get x() { + return {uri: require('./x.png').default, width: 17, height: 16}; + }, + get xFlat() { + return {uri: require('./xFlat.png').default, width: 16, height: 16}; + }, + get xMedium() { + return {uri: require('./xMedium.png').default, width: 24, height: 24}; + }, + get xSmall() { + return {uri: require('./xSmall.png').default, width: 16, height: 16}; + } +}; diff --git a/src/assets/internal/images/index.web.js b/src/assets/internal/images/index.web.js new file mode 100644 index 0000000000..6ec9d307de --- /dev/null +++ b/src/assets/internal/images/index.web.js @@ -0,0 +1,26 @@ +export const images = { + get gradient() { + return {uri: require('./gradient.png').default, width: 56, height: 2}; + }, + get gradientOverlay() { + return {uri: require('./gradientOverlay.png').default, width: 76, height: 48}; + }, + get gradientOverlayHigh() { + return {uri: require('./gradientOverlayHigh.png').default, width: 1, height: 297}; + }, + get gradientOverlayLow() { + return {uri: require('./gradientOverlayLow.png').default, width: 1, height: 297}; + }, + get gradientOverlayMedium() { + return {uri: require('./gradientOverlayMedium.png').default, width: 1, height: 297}; + }, + get hintTipMiddle() { + return {uri: require('./hintTipMiddle.png').default, width: 20, height: 7}; + }, + get hintTipSide() { + return {uri: require('./hintTipSide.png').default, width: 20, height: 24}; + }, + get transparentSwatch() { + return {uri: require('./transparentSwatch.png').default, width: 100, height: 100}; + } +}; diff --git a/src/components/icon/index.tsx b/src/components/icon/index.tsx index a517880b5d..c7ae95cf6c 100644 --- a/src/components/icon/index.tsx +++ b/src/components/icon/index.tsx @@ -47,11 +47,9 @@ export type IconProps = Omit & type Props = IconProps & BaseComponentInjectedProps; -const DEFAULT_WEB_ICON_SIZE = 16; - const Icon = forwardRef((props: Props, ref: any) => { const { - size = Constants.isWeb ? DEFAULT_WEB_ICON_SIZE : undefined, + size, tintColor, style, supportRTL, @@ -86,17 +84,19 @@ const Icon = forwardRef((props: Props, ref: any) => { return source; }, [source, assetGroup, assetName]); - const renderImage = () => ( - - ); + const renderImage = () => { + return ( + + ); + }; const renderSvg = () => ; diff --git a/webDemo/webpack.config.js b/webDemo/webpack.config.js index 56fa94340e..4f32bf677d 100644 --- a/webDemo/webpack.config.js +++ b/webDemo/webpack.config.js @@ -43,8 +43,7 @@ const imageLoaderConfiguration = { use: { loader: 'url-loader', options: { - name: '[name].[ext]', - esModule: false + name: '[name].[ext]' } } };