react-native-ui-lib 8.0.1 → 8.1.0

package/scripts/build/build.js

@@ -0,0 +1,35 @@
+const childProcess = require('child_process');
+const fs = require('fs');
+
+const BABEL_OPTIONS = `--config-file ./scripts/build/.babelrc.json --extensions '.ts,.tsx' --ignore "src/**/*.d.ts"`;
+const BABEL_INDEX_EXPORTS_OPTIONS = `--config-file ./scripts/build/.babelrc.exports.js`;
+
+console.info('## Start RNUILib Build ##');
+console.info('## Copy files from root ##');
+childProcess.execSync('cp -r ../../lib ./lib'); // TODO: pretty sure we don't need this - needs to be tested
+childProcess.execSync('cp -r ../../scripts .');
+childProcess.execSync('cp ../../README.md ./README.md');
+childProcess.execSync('cp ../../LICENSE ./LICENSE');
+
+console.info('## Build Typescript ##');
+childProcess.execSync('cd ../../ && tsc --p tsconfig.build.json');
+
+console.info('## Build src files - convert TS to JS files ##');
+childProcess.execSync(`../../node_modules/.bin/babel src --out-dir src ${BABEL_OPTIONS}`);
+
+// TODO: pretty sure we don't need this - needs to be tested | if we remove lib then make sure to remove packages/react-native-ui-lib/lib/**/* from tsconfig.json
+console.info('## Build lib (native component) files - convert TS to JS files ##');
+childProcess.execSync(`../../node_modules/.bin/babel lib --out-dir lib ${BABEL_OPTIONS}`);
+
+console.info('## Build main index file - for lazy load exports ##');
+childProcess.execSync(`../../node_modules/.bin/babel ./src/index.js -o ./src/index.js ${BABEL_INDEX_EXPORTS_OPTIONS}`);
+
+console.info('## Build standalone components packages ##');
+require('./buildPackages');
+
+console.info('## Override package.json main entry to use src/index.js file ##');
+const package = JSON.parse(fs.readFileSync('./package.json'));
+package.main = 'src/index.js';
+fs.writeFileSync('./package.json', JSON.stringify(package, null, 2), {encoding: 'utf8'});
+
+console.info('## Complete RNUILib Build ##');

package/scripts/build/buildPackages/buildComponentsPackages.js

@@ -0,0 +1,18 @@
+const fs = require('fs');
+const _ = require('lodash');
+
+/* Write all components as separate packages */
+const path = './src/components';
+fs.readdir(path, (err, files) => {
+  if (!err) {
+    files
+      .filter((f) => f !== 'index.js')
+      .forEach((file) => {
+        fs.writeFileSync(`${file}.js`,
+          `module.exports = require('${path}/${file}').default;\n`);
+        const componentName = _.upperFirst(file);
+        fs.writeFileSync(`${file}.d.ts`,
+          `import {${componentName}} from './src';\nexport default ${componentName};\n`);
+      });
+  }
+});

package/scripts/build/buildPackages/buildCustomPackages.js

@@ -0,0 +1,106 @@
+const fs = require('fs');
+const _ = require('lodash');
+
+const packages = [
+  {
+    filename: 'keyboard.js',
+    content: `module.exports = require('uilib-native').Keyboard;\n`
+  },
+  {
+    filename: 'assets.js',
+    content: `module.exports = require('./src/assets').default;\n`
+  },
+  {
+    filename: 'config.js',
+    content: `module.exports = require('./src/commons/Config').default;\n`
+  },
+  {
+    filename: 'constants.js',
+    content: `module.exports = require('./src/commons/Constants').default;\n`
+  },
+  {
+    filename: 'core.js',
+    components: ['View', 'Text', 'Image', 'TouchableOpacity', 'Button'],
+    styleComponents: [
+      'Colors',
+      'Typography',
+      'Spacings',
+      'BorderRadiuses',
+      'Shadows',
+      'ThemeManager',
+      'Scheme'
+    ]
+  },
+  {
+    filename: 'incubator.js',
+    incubatorComponents: ['ExpandableOverlay', 'Slider', 'Toast']
+  },
+  {
+    filename: 'style.js',
+    styleComponents: [
+      'Colors',
+      'Typography',
+      'BorderRadiuses',
+      'Shadows',
+      'Spacings',
+      'ThemeManager',
+      'Scheme'
+    ]
+  }
+];
+
+/* Write custom packages */
+function addTyping(typings, component) {
+  if (_.isEmpty(typings)) {
+    typings += `{${component}`;
+  } else {
+    typings += `, ${component}`;
+  }
+
+  return typings;
+}
+
+packages.forEach((package) => {
+  let content = package.content || '';
+  let typings = '';
+
+  if (package.components || package.styleComponents) {
+    content += 'module.exports = {\n';
+    _.forEach(package.components, (component) => {
+      content += `get ${component}() {\n`;
+      content += `return require('./src/components/${_.camelCase(component)}').default;`;
+      content += `},\n`;
+
+      typings = addTyping(typings, component);
+    });
+
+    _.forEach(package.styleComponents, (component) => {
+      content += `get ${component}() {\n`;
+      content += `return require('./src/style/${_.camelCase(component)}').default;`;
+      content += `},\n`;
+
+      typings = addTyping(typings, component);
+    });
+    content += '};\n';
+    typings += '}';
+    typings = `import ${typings} from './src';\nexport ${typings};\n`;
+  } else if (package.incubatorComponents) {
+    content = 'module.exports = {\n';
+    _.forEach(package.incubatorComponents, (component) => {
+      content += `get ${component}() {\n`;
+      content += `return require('./src/incubator/${_.camelCase(component)}').default;`;
+      content += `},\n`;
+    });
+
+    content += '};\n';
+
+    typings = `import {ExpandableOverlay, Slider, Toast} from './src/incubator';\n`;
+    typings += `export {ExpandableOverlay, Slider, Toast};\n`;
+  }
+
+  fs.writeFileSync(package.filename, content);
+  if (!_.isEmpty(typings)) {
+    const filename = `${package.filename.substring(0, package.filename.indexOf('.js'))}.d.ts`;
+    fs.writeFileSync(filename, typings);
+  }
+});

package/scripts/build/buildPackages/index.js

@@ -0,0 +1,6 @@
+const childProcess = require('child_process');
+
+const path = 'scripts/build/buildPackages';
+
+childProcess.execSync(`node ${path}/buildComponentsPackages`);
+childProcess.execSync(`node ${path}/buildCustomPackages`);

package/scripts/createCalendarMockData.js

@@ -0,0 +1,37 @@
+const fs = require('fs');
+const HOUR_IN_MS = 60 * 60 * 1000;
+const ID_LENGTH = 10;
+
+function generateId() {
+  let result = '';
+  const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+  const charactersLength = characters.length;
+  for (let i = 0; i < ID_LENGTH; i++) {
+    result += characters.charAt(Math.floor(Math.random() * charactersLength));
+  }
+  return result;
+}
+
+const data = [];
+
+for (let year = 2018; year <= 2028; ++year) {
+  for (let month = 0; month <= 11; ++month) {
+    for (let day = 1; day <= 31; day += Math.random() > 0.5 ? 2 : 1) {
+      for (let hour = 9; hour <= 19; hour += Math.random() > 0.5 ? 4 : 3) {
+        const startDate = new Date(year, month, day, hour, 0);
+        if (startDate.getDay() >= 2 && startDate.getDay() <= 5) {
+          const start = startDate.getTime();
+          const end = start + HOUR_IN_MS * (Math.random() > 0.5 ? 0.5 : 1);
+          const id = generateId();
+          data.push({id, start, end});
+        }
+      }
+    }
+  }
+}
+
+console.log(`${data.length} events were created`);
+
+fs.writeFileSync('demo/src/screens/incubatorScreens/IncubatorCalendarScreen/MockData.ts',
+  `// Note: to generate new data run calendar:createMocks and update createCalendarMockData script \n` +
+  `export const data = ${JSON.stringify(data)};`);

package/scripts/docs/buildDocs.js

@@ -0,0 +1 @@
+require('./buildDocsCommon').buildDocs('./packages/react-native-ui-lib/src ./lib/components');

package/scripts/prepush.js

@@ -0,0 +1,71 @@
+#!/usr/bin/env node
+
+const semver = require('semver');
+const fs = require('fs');
+const path = require('path');
+
+const nodeVersion = fs.readFileSync(path.resolve(process.cwd(), '.nvmrc'), 'utf-8').trim();
+if (!semver.gte(process.version.substring(1), nodeVersion)) {
+  throw new Error(`Node version must be at least ${nodeVersion}`);
+}
+
+const cp = require('child_process');
+const {logGreen, logError} = require('./utils');
+const {Spinner} = require('@topcli/spinner');
+
+const ARGS = process.argv.slice(2);
+const TEST_ARG = 'test';
+const TEST_COMMAND = 'yarn test';
+
+const PRE_PUSH_COMMANDS = [
+  'yarn constraints',
+  'yarn dedupe --check',
+  'yarn lint --quiet',
+  'yarn build:dev >/dev/null'
+];
+
+async function run() {
+  logGreen('Running pre-push checks...');
+  const commands = [...PRE_PUSH_COMMANDS];
+  if (ARGS.includes(TEST_ARG)) {
+    commands.push(TEST_COMMAND);
+  }
+  const promises = commands.map(execute);
+  const results = await Promise.allSettled(promises);
+  const failed = results.filter(result => result.status === 'rejected');
+  if (failed.length > 0) {
+    logError('Pre-push checks failed!');
+    failed.forEach(result => logFailedCommand(result.reason));
+    process.exit(1);
+  }
+  process.exit(0);
+}
+
+function logFailedCommand({command, stdout, stderr}) {
+  logError(`${command}:`);
+  if (stdout) {
+    logError('STDOUT:');
+    logError(stdout);
+  }
+  if (stderr) {
+    logError('STDERR:');
+    logError(stderr);
+  }
+}
+
+async function execute(command) {
+  const spinner = new Spinner();
+  return new Promise((resolve, reject) => {
+    spinner.start(command);
+    cp.exec(command, {encoding: 'utf-8'}, (error, stdout, stderr) => {
+      if (error) {
+        spinner.failed();
+        reject({command, error, stdout, stderr});
+      }
+      spinner.succeed();
+      resolve();
+    });
+  });
+}
+
+run();

package/scripts/release/prReleaseNotes.js

@@ -0,0 +1,6 @@
+const LATEST_VERSION = '7.10.0';
+const NEW_VERSION = '7.11.0';
+const FILE_PREFIX = 'uilib';
+const REPO = 'wix/react-native-ui-lib';
+
+require('./prReleaseNotesCommon').generateReleaseNotes(LATEST_VERSION, NEW_VERSION, FILE_PREFIX, REPO);

package/scripts/release/release.js

@@ -0,0 +1,99 @@
+const exec = require('shell-utils').exec;
+const cp = require('child_process');
+const semver = require('semver');
+const _ = require('lodash');
+
+// Workaround JS
+
+// Export buildkite variables for Release build
+// We cast toString() because function returns 'object'
+const isRelease = process.env.BUILDKITE_MESSAGE?.match?.(/^release$/i);
+let VERSION;
+if (isRelease) {
+  VERSION = cp.execSync(`buildkite-agent meta-data get version`).toString();
+}
+
+const VERSION_TAG = isRelease ? 'latest' : 'snapshot';
+const VERSION_INC = 'patch';
+function run() {
+  console.log('Release UI Lib');
+  if (!validateEnv()) {
+    console.log('Not a valid environment to release in!');
+    return;
+  }
+
+  console.log('Valid environment - releasing...');
+  setupGit();
+  configureNpmToken();
+  versionTagAndPublish();
+}
+
+function validateEnv() {
+  if (!process.env.CI) {
+    throw new Error('releasing is only available from CI');
+  }
+  return (
+    process.env.BUILDKITE_BRANCH === 'master' ||
+    process.env.BUILDKITE_BRANCH === 'release' ||
+    process.env.BUILDKITE_MESSAGE === 'snapshot'
+  );
+}
+
+function setupGit() {
+  exec.execSyncSilent('git config --global push.default simple');
+  exec.execSyncSilent(`git config --global user.email "${process.env.GIT_EMAIL}"`);
+  exec.execSyncSilent(`git config --global user.name "${process.env.GIT_USER}"`);
+  const remoteUrl = new RegExp('https?://(\\S+)').exec(exec.execSyncRead('git remote -v'))[1];
+  exec.execSyncSilent(`git remote add deploy "https://${process.env.GIT_USER}:${process.env.GIT_TOKEN}@${remoteUrl}"`);
+  // exec.execSync(`git checkout ${ONLY_ON_BRANCH}`);
+}
+
+function configureNpmToken() {
+  exec.execSync(`yarn config set npmAuthToken "${process.env.NPM_TOKEN}"`);
+}
+
+function versionTagAndPublish() {
+  const currentPublished = findCurrentPublishedVersion();
+  console.log(`current published version: ${currentPublished}`);
+
+  const version = isRelease ? VERSION : `${currentPublished}-snapshot.${process.env.BUILDKITE_BUILD_NUMBER}`;
+  console.log(`Publishing version: ${version}`);
+
+  tryPublishAndTag(version);
+}
+
+function findCurrentPublishedVersion() {
+  const result = exec.execSyncRead(`yarn npm info ${process.env.npm_package_name} --fields dist-tags --json`);
+  const parsed = JSON.parse(result);
+  return parsed['dist-tags'].latest;
+}
+
+function tryPublishAndTag(version) {
+  let theCandidate = version;
+  for (let retry = 0; retry < 5; retry++) {
+    try {
+      tagAndPublish(theCandidate);
+      console.log(`Released ${theCandidate}`);
+      return;
+    } catch (err) {
+      const alreadyPublished = _.includes(err.toString(), 'You cannot publish over the previously published version');
+      if (!alreadyPublished) {
+        throw err;
+      }
+      console.log(`previously published. retrying with increased ${VERSION_INC}...`);
+      theCandidate = semver.inc(theCandidate, VERSION_INC);
+    }
+  }
+}
+
+function tagAndPublish(newVersion) {
+  console.log(`trying to publish ${newVersion}...`);
+  exec.execSync(`yarn version ${newVersion}`);
+  exec.execSync(`yarn npm publish --tag ${VERSION_TAG}`);
+  if (isRelease) {
+    exec.execSync(`git tag -a ${newVersion} -m "${newVersion}"`);
+  }
+  exec.execSyncSilent(`git push deploy ${newVersion} || true`);
+}
+
+run();

package/scripts/updateWebAssets.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, '../packages/react-native-ui-lib/src/assets/internal/icons');
+const IMAGES_PATH = path.resolve(__dirname, '../packages/react-native-ui-lib/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}'), 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!');

package/scripts/utils.js

@@ -0,0 +1,21 @@
+const chalk = require('chalk');
+
+function logDebug() {
+  console.log(chalk.gray(...arguments));
+}
+
+function logGreen() {
+  console.log(chalk.green(...arguments));
+}
+
+function logError() {
+  // eslint-disable-next-line no-restricted-syntax
+  console.error(chalk.red(...arguments));
+}
+
+
+module.exports = {
+  logDebug,
+  logGreen,
+  logError
+};

package/src/assets/__tests__/Assets.spec.js

@@ -0,0 +1,110 @@
+import {Assets} from '../Assets';
+
+describe('Assets', () => {
+  let assets;
+
+  beforeEach(() => {
+    assets = new Assets();
+  });
+
+  describe('.loadAssetsGroup(groupName, assets)', () => {
+    it('should return the assets object itself', () => {
+      expect(assets.loadAssetsGroup('emojis', {})).toBe(assets);
+    });
+
+    it('should create nested groups', () => {
+      assets.loadAssetsGroup('emojis.ascii', {smile: ':)'});
+      expect(assets.emojis.ascii.smile).toBe(':)');
+    });
+
+    describe('edge cases', () => {
+      it('should throw if group name is not a string', () => {
+        expect(() => assets.loadAssetsGroup(42, {})).toThrowErrorMatchingSnapshot();
+      });
+
+      it('should throw if assets are not a plain object', () => {
+        expect(() => assets.loadAssetsGroup('assets', new class {}())).toThrowErrorMatchingSnapshot();
+      });
+    });
+
+    describe('when called with empty group name', () => {
+      describe('and plain object of assets', () => {
+        it('should create root asset groups', () => {
+          const emojis = {};
+          const icons = {};
+          assets.loadAssetsGroup('', {emojis, icons});
+
+          expect(assets.emojis).toBe(emojis);
+          expect(assets.icons).toBe(icons);
+        });
+      });
+
+      describe('and an object with assets getters', () => {
+        it('should create lazy root asset groups', () => {
+          const emojis = {};
+          const heavyIconsModule = {};
+          const requireHeavyIcons = jest.fn().mockReturnValue(heavyIconsModule);
+
+          assets.loadAssetsGroup('', {
+            emojis,
+            get icons() {
+              return requireHeavyIcons();
+            }
+          });
+
+          expect(assets.emojis).toBe(emojis);
+
+          expect(requireHeavyIcons).not.toHaveBeenCalled();
+          expect(assets.icons).toBe(heavyIconsModule);
+          expect(requireHeavyIcons).toHaveBeenCalled();
+        });
+      });
+    });
+
+    describe('when has a lazy group', () => {
+      let iconsModule;
+
+      beforeEach(() => {
+        iconsModule = {
+          get apply() {
+            return './apply.png';
+          },
+          get back() {
+            return './back.png';
+          }
+        };
+
+        assets.loadAssetsGroup('', {
+          get icons() {
+            return iconsModule;
+          }
+        });
+      });
+
+      describe('and called with the same group name', () => {
+        beforeEach(() => {
+          assets.loadAssetsGroup('icons', {
+            get back() {
+              return './back-dark.png';
+            },
+            get forward() {
+              return './forward-dark.png';
+            }
+          });
+        });
+
+        it('should preserve existing assets upon load', () => {
+          expect(assets.icons.apply).toBe('./apply.png');
+        });
+
+        it('should overwrite existing assets if they have the same names', () => {
+          expect(assets.icons.back).toBe('./back-dark.png');
+        });
+
+        it('should append extra assets to the group', () => {
+          expect(assets.icons.forward).toBe('./forward-dark.png');
+        });
+      });
+    });
+  });
+});

package/src/commons/__tests__/baseComponent.spec.js

@@ -0,0 +1,36 @@
+import baseComponent from '../baseComponent';
+import {Colors} from '../../style';
+
+const BaseComponent = baseComponent(false);
+
+describe('BaseComponent', () => {
+  
+  describe('updateModifiers', () => {
+    it('should update state with new modifiers values if modifiers props have changed', () => {
+      const uut = new BaseComponent({});
+      jest.spyOn(uut, 'setState');
+
+      uut.updateModifiers({someProp: true, 'bg-grey20': true}, {someProp: true, 'bg-grey30': true});
+      expect(uut.setState).toHaveBeenCalledWith({backgroundColor: Colors.grey30});
+
+      uut.updateModifiers({someProp: 'text'}, {'bg-red50': true, 'padding-20': true});
+      expect(uut.setState).toHaveBeenCalledWith({backgroundColor: Colors.red50, paddings: {padding: 20}});
+    });
+
+    it('should not update state if modifiers prop have not changed', () => {
+      const uut = new BaseComponent({});
+      jest.spyOn(uut, 'setState');
+
+      uut.updateModifiers({someProp: true, 'bg-grey20': true}, {someProp: false, 'bg-grey20': true});
+      expect(uut.setState).not.toHaveBeenCalled();
+    });
+
+    it('should not update state if any prop value has changed', () => {
+      const uut = new BaseComponent({});
+      jest.spyOn(uut, 'setState');
+
+      uut.updateModifiers({someProp: true, 'bg-grey20': true}, {someProp: true, 'bg-grey20': true});
+      expect(uut.setState).not.toHaveBeenCalled();
+    });
+  });
+});