Skip to content

Infra/assets internal new structure #3635

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 39 commits into from
Mar 20, 2025
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
39 commits
Select commit Hold shift + click to select a range
627ecbb
Add internal assets module with icons and images
adids1221 Mar 16, 2025
09884c2
Refactor icon imports to use internal assets for consistency
adids1221 Mar 16, 2025
517b077
Refactor asset imports to use internal structure and remove assets.ic…
adids1221 Mar 16, 2025
2219ccb
Add xSmall icon and update ChipsInput to use internal assets
adids1221 Mar 16, 2025
bf5b253
Add transparentSwatch icon and update ColorSwatch component to use it
adids1221 Mar 16, 2025
9c59698
Add dropdown to icons and update useFieldType to utilize internal assets
adids1221 Mar 16, 2025
76d7e03
Add hintTip icons and update Hint component to use internal assets
adids1221 Mar 16, 2025
c25d1e5
Add checkMarkSmall and exclamationSmall icons, update WizardStates to…
adids1221 Mar 16, 2025
1224520
Add gradient overlay images and update Overlay component to use inter…
adids1221 Mar 16, 2025
5bac3cf
Add gradientOverlay image and update ScrollBar component to use it
adids1221 Mar 16, 2025
893c73e
move hint, swatch assets to internal.images
adids1221 Mar 17, 2025
656b0ac
Rename icons.dropdown to icons.chevronDown
adids1221 Mar 17, 2025
d9168a8
Add icons.demo and update references in components screens
adids1221 Mar 17, 2025
f5099c3
rename checkSmall icon file and update icons - index.js reference
adids1221 Mar 17, 2025
64e5930
Merge branch 'master' into infra/Assets_internal
adids1221 Mar 17, 2025
94b12f8
Update ColorSwatch to use internal.images for transparentSwatch
adids1221 Mar 18, 2025
9857ed7
Refactor icon and image exports to include URI and dimensions
adids1221 Mar 18, 2025
e8c0415
Refactor image handling to extract image source and apply dimensions …
adids1221 Mar 18, 2025
730a5c9
Update snapshots to reflect changes in image in Avatar, TextField, Bu…
adids1221 Mar 18, 2025
50761fa
remove unnecessary default export in check icon
adids1221 Mar 18, 2025
121d646
Add script to extract image dimensions and update package.json
adids1221 Mar 18, 2025
33629c6
Merge branch 'master' into infra/Assets_internal_new_strucure
adids1221 Mar 19, 2025
fde6928
Revert new structure, split into index.web filesÏ
adids1221 Mar 19, 2025
c7e17a0
Merge branch 'master' into infra/Assets_internal
adids1221 Mar 19, 2025
52fdada
Merge branch 'infra/Assets_internal' into infra/Assets_internal_new_s…
adids1221 Mar 19, 2025
c21c826
Icon remove DEFAULT_WEB_ICON_SIZE
adids1221 Mar 19, 2025
9aee276
Stepper local assets remove, move to Assets
adids1221 Mar 19, 2025
fd939f3
Merge branch 'infra/Assets_internal' into infra/Assets_internal_new_s…
adids1221 Mar 19, 2025
0c88600
Add new icon variants: minusOutline, minusOutlineSmall, plusOutline, …
adids1221 Mar 19, 2025
0caa8d2
Update asset imports to use .default for images and icons
adids1221 Mar 19, 2025
7dc1ac4
Remove esModule option from url-loader configuration in webpack
adids1221 Mar 19, 2025
267e930
Remove docuilib configurations from ReactLiveScope
adids1221 Mar 19, 2025
06f0d96
Bump version to 3.14.0 in package.json
adids1221 Mar 19, 2025
4d64cbf
Refactor icon asset loading to use the new web assets structure
adids1221 Mar 20, 2025
4adb167
Rename update-web-assets script to updateWebAssets in package.json
adids1221 Mar 20, 2025
34b9e07
changed extract-dimensions script to use console.error
adids1221 Mar 20, 2025
e81cd7e
Update file filtering in createIndexFile to exclude sized assets
adids1221 Mar 20, 2025
ae1eff4
rename extract-dimensions script
adids1221 Mar 20, 2025
58eb45c
Merge branch 'master' into infra/Assets_internal_new_strucure
adids1221 Mar 20, 2025
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion docuilib/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "uilib-docs",
"version": "3.13.0",
"version": "3.14.0",
"main": "./src/index.ts",
"scripts": {
"docusaurus": "docusaurus",
Expand Down
11 changes: 0 additions & 11 deletions docuilib/src/theme/ReactLiveScope/configurations.ts

This file was deleted.

11 changes: 6 additions & 5 deletions docuilib/src/theme/ReactLiveScope/index.js
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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,
Expand Down
3 changes: 2 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
88 changes: 88 additions & 0 deletions scripts/assets/extractDimensions.js
Original file line number Diff line number Diff line change
@@ -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!');
50 changes: 50 additions & 0 deletions src/assets/internal/icons/index.web.js
Original file line number Diff line number Diff line change
@@ -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};
}
};
26 changes: 26 additions & 0 deletions src/assets/internal/images/index.web.js
Original file line number Diff line number Diff line change
@@ -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};
}
};
28 changes: 14 additions & 14 deletions src/components/icon/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -47,11 +47,9 @@ export type IconProps = Omit<RNImageProps, 'source' | 'tintColor'> &

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,
Expand Down Expand Up @@ -86,17 +84,19 @@ const Icon = forwardRef((props: Props, ref: any) => {
return source;
}, [source, assetGroup, assetName]);

const renderImage = () => (
<Image
accessible={false}
accessibilityRole={'image'}
fsTagName={recorderTag}
{...others}
ref={ref}
source={iconSource}
style={[margins, iconSize, shouldFlipRTL && styles.rtlFlipped, !!tintColor && {tintColor}, style]}
/>
);
const renderImage = () => {
return (
<Image
accessible={false}
accessibilityRole={'image'}
fsTagName={recorderTag}
{...others}
ref={ref}
source={iconSource}
style={[margins, iconSize, shouldFlipRTL && styles.rtlFlipped, !!tintColor && {tintColor}, style]}
/>
);
};

const renderSvg = () => <SvgImage fsTagName={recorderTag} data={source} {...iconSize} {...props}/>;

Expand Down
3 changes: 1 addition & 2 deletions webDemo/webpack.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -43,8 +43,7 @@ const imageLoaderConfiguration = {
use: {
loader: 'url-loader',
options: {
name: '[name].[ext]',
esModule: false
name: '[name].[ext]'
}
}
};
Expand Down