@pega/dx-component-builder-sdk 0.1.47 → 0.1.49

package/src/tasks/bundle/builderReact/webpack.config.js

@@ -0,0 +1,337 @@
+import { createRequire } from 'module';
+
+import webpack from 'webpack';
+import TerserPlugin from 'terser-webpack-plugin';
+import MiniCssExtractPlugin from 'mini-css-extract-plugin';
+import CssMinimizerPlugin from 'css-minimizer-webpack-plugin';
+import getCSSModuleLocalIdent from 'react-dev-utils/getCSSModuleLocalIdent.js';
+import ModuleNotFoundPlugin from 'react-dev-utils/ModuleNotFoundPlugin.js';
+import CompressionPlugin from 'compression-webpack-plugin';
+
+import paths from './paths.js';
+
+const require = createRequire(import.meta.url);
+
+// const appPackageJson = require(paths.appPackageJson);
+
+// Source maps are resource heavy and can cause out of memory issue for large source files.
+
+const compressionBRConfObj = {
+  filename: '[path][base].br',
+  algorithm: 'brotliCompress',
+  test: /\.(js|css|html|svg|png|jpg|woff|woff2)$/,
+  compressionOptions: { level: 11 }
+};
+
+/* For gzip use below */
+const compressionGZConfObj = {
+  filename: '[path][base].gz',
+  algorithm: 'gzip',
+  test: /\.(js|css|html|svg|png|jpg|woff|woff2)$/,
+  compressionOptions: { level: 9 }
+};
+
+let shouldUseSourceMap = process.env.SOURCE_MAP;
+
+const imageInlineSizeLimit = Number.parseInt(process.env.IMAGE_INLINE_SIZE_LIMIT || '10000', 10);
+
+// style files regex
+const cssRegex = /\.css$/;
+const cssModuleRegex = /\.module\.css$/;
+const sassRegex = /\.(scss|sass)$/;
+const sassModuleRegex = /\.module\.(scss|sass)$/;
+
+// This is the production and development configuration.
+// It is focused on developer experience, fast rebuilds, and a minimal bundle.
+export default (
+  webpackEnv,
+  // eslint-disable-next-line no-unused-vars
+  { inputFile, outputFile, componentKey, externals, globals, sourceMap, devBuild }
+) => {
+  const isEnvDevelopment = webpackEnv === 'development' || devBuild;
+  const isEnvProduction = webpackEnv === 'production';
+  sourceMap = sourceMap === 'true';
+  shouldUseSourceMap = shouldUseSourceMap || sourceMap;
+
+  // common function to get style loaders
+  const getStyleLoaders = (cssOptions, preProcessor) => {
+    const loaders = [
+      isEnvProduction && {
+        loader: MiniCssExtractPlugin.loader
+      },
+      {
+        loader: require.resolve('css-loader'),
+        options: cssOptions
+      },
+      {
+        // Options for PostCSS as we reference these options twice
+        // Adds vendor prefixing based on your specified browser support in
+        // package.json
+        loader: require.resolve('postcss-loader'),
+        options: {
+          postcssOptions: {
+            plugins: [
+              [
+                'postcss-preset-env',
+                {
+                  // Options
+                }
+              ]
+            ]
+          },
+          sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment
+        }
+      }
+    ].filter(Boolean);
+    if (preProcessor) {
+      loaders.push(
+        {
+          loader: require.resolve('resolve-url-loader'),
+          options: {
+            sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
+            root: paths.appSrc
+          }
+        },
+        {
+          loader: require.resolve(preProcessor),
+          options: {
+            sourceMap: true
+          }
+        }
+      );
+    }
+    return loaders;
+  };
+  return {
+    mode: devBuild ? 'development' : 'production',
+    // Stop compilation early in production
+    bail: isEnvProduction,
+    // These are the "entry points" to our application.
+    // This means they will be the "root" imports that are included in JS bundle.
+    entry: inputFile,
+    devtool: devBuild ? 'eval-cheap-module-source-map' : false,
+    output: {
+      // The build folder.
+      path: paths.appBuild,
+      // There will be one main bundle, and one file per asynchronous chunk.
+      // In development, it does not produce real files.
+      filename: isEnvProduction
+        ? `${componentKey}/${componentKey}.js`
+        : isEnvDevelopment && `${componentKey}/${componentKey}.js`,
+      chunkFilename: isEnvProduction
+        ? `${componentKey}/js/[name].[contenthash:8].chunk.js`
+        : isEnvDevelopment && `${componentKey}/js/[name].chunk.js`,
+      library: {
+        name: componentKey,
+        type: 'umd',
+        export: 'default'
+      },
+      publicPath: ''
+    },
+    optimization: {
+      minimize: isEnvProduction,
+      minimizer: [new TerserPlugin(), new CssMinimizerPlugin()]
+    },
+    resolve: {
+      plugins: [],
+      extensions: ['.tsx', '.ts', '.js']
+    },
+    resolveLoader: {
+      plugins: []
+    },
+    module: {
+      strictExportPresence: true,
+      rules: [
+        {
+          // "oneOf" will traverse all following loaders until one will
+          // match the requirements. When no loader matches it will fall
+          // back to the "file" loader at the end of the loader list.
+          oneOf: [
+            // TODO: Merge this config once `image/avif` is in the mime-db
+            // https://github.com/jshttp/mime-db
+            {
+              test: [/\.avif$/],
+              loader: require.resolve('url-loader'),
+              options: {
+                limit: imageInlineSizeLimit,
+                mimetype: 'image/avif',
+                name: `${componentKey}/media/[name].[hash:8].[ext]`
+              }
+            },
+            // "url" loader works like "file" loader except that it embeds assets
+            // smaller than specified limit in bytes as data URLs to avoid requests.
+            // A missing `test` is equivalent to a match.
+            {
+              test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/, /\.svg$/],
+              loader: require.resolve('url-loader'),
+              options: {
+                limit: imageInlineSizeLimit,
+                name: `${componentKey}/media/[name].[hash:8].[ext]`
+              }
+            },
+            // Process application JS with TS-Loader.
+            // The preset includes JSX, Flow, TypeScript, and some ESnext features.
+            {
+              test: /\.(js|mjs|jsx)$/,
+              include: paths.appSrc,
+              loader: 'ts-loader',
+              options: {
+                configFile: paths.appTsConfig
+              },
+              exclude: /node_modules/
+            },
+
+            {
+              test: /\.(ts|tsx)$/,
+              loader: 'ts-loader',
+              options: {
+                configFile: paths.appTsConfig
+              },
+              exclude: /node_modules/
+            },
+            // "postcss" loader applies autoprefixer to our CSS.
+            // "css" loader resolves paths in CSS and adds assets as dependencies.
+            // "style" loader turns CSS into JS modules that inject <style> tags.
+            // In production, we use MiniCSSExtractPlugin to extract that CSS
+            // to a file, but in development "style" loader enables hot editing
+            // of CSS.
+            // By default we support CSS Modules with the extension .module.css
+            {
+              test: cssRegex,
+              exclude: cssModuleRegex,
+              use: getStyleLoaders({
+                importLoaders: 1,
+                sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment
+              }),
+              // Don't consider CSS imports dead code even if the
+              // containing package claims to have no side effects.
+              // Remove this when webpack adds a warning or an error for this.
+              // See https://github.com/webpack/webpack/issues/6571
+              sideEffects: true
+            },
+            // Adds support for CSS Modules (https://github.com/css-modules/css-modules)
+            // using the extension .module.css
+            {
+              test: cssModuleRegex,
+              use: getStyleLoaders({
+                importLoaders: 1,
+                sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
+                modules: {
+                  getLocalIdent: getCSSModuleLocalIdent
+                }
+              })
+            },
+            // Opt-in support for SASS (using .scss or .sass extensions).
+            // By default we support SASS Modules with the
+            // extensions .module.scss or .module.sass
+            {
+              test: sassRegex,
+              exclude: sassModuleRegex,
+              use: getStyleLoaders(
+                {
+                  importLoaders: 3,
+                  sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment
+                },
+                'sass-loader'
+              ),
+              // Don't consider CSS imports dead code even if the
+              // containing package claims to have no side effects.
+              // Remove this when webpack adds a warning or an error for this.
+              // See https://github.com/webpack/webpack/issues/6571
+              sideEffects: true
+            },
+            // Adds support for CSS Modules, but using SASS
+            // using the extension .module.scss or .module.sass
+            {
+              test: sassModuleRegex,
+              use: getStyleLoaders(
+                {
+                  importLoaders: 3,
+                  sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
+                  modules: {
+                    getLocalIdent: getCSSModuleLocalIdent
+                  }
+                },
+                'sass-loader'
+              )
+            },
+            // "file" loader makes sure those assets get served by WebpackDevServer.
+            // When you `import` an asset, you get its (virtual) filename.
+            // In production, they would get copied to the `build` folder.
+            // This loader doesn't use a "test" so it will catch all modules
+            // that fall through the other loaders.
+            {
+              loader: require.resolve('file-loader'),
+              // Exclude `js` files to keep "css" loader working as it injects
+              // its runtime that would otherwise be processed through "file" loader.
+              // Also exclude `html` and `json` extensions so they get processed
+              // by webpack's internal loaders.
+              exclude: [/\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/],
+              options: {
+                name: `${componentKey}/media/[name].[hash:8].[ext]`
+              }
+            }
+            // ** STOP ** Are you adding a new loader?
+            // Make sure to add the new loader(s) before the "file" loader.
+          ]
+        }
+      ]
+    },
+    plugins: [
+      // This gives some necessary context to module not found errors, such as
+      // the requesting resource.
+      new ModuleNotFoundPlugin(paths.appPath),
+      // Makes some environment variables available to the JS code, for example:
+      // if (process.env.NODE_ENV === 'production') { ... }. See `./env.js`.
+      // It is absolutely essential that NODE_ENV is set to production
+      // during a production build.
+      // Otherwise React will be compiled in the very slow development mode.
+      isEnvProduction &&
+        new webpack.DefinePlugin({
+          PRODUCTION: JSON.stringify(true)
+        }),
+      isEnvProduction &&
+        new MiniCssExtractPlugin({
+          // Options similar to the same options in webpackOptions.output
+          // both options are optional
+          filename: `${componentKey}/css/${componentKey}.[contenthash:8].css`,
+          chunkFilename: `${componentKey}/css/${componentKey}.[contenthash:8].chunk.css`
+        }),
+      // Moment.js is an extremely popular library that bundles large locale files
+      // by default due to how webpack interprets its code. This is a practical
+      // solution that requires the user to opt into importing specific locales.
+      // https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
+      // You can remove this if you don't use Moment.js:
+      new webpack.IgnorePlugin({
+        resourceRegExp: /^\.\/locale$/,
+        contextRegExp: /moment$/
+      }),
+      /* Ignore cosmos icons */
+      new webpack.IgnorePlugin({
+        resourceRegExp: /^\.\/icons$/,
+        contextRegExp: /@pega\/cosmos-react-core\/lib\/components\/Icon$/
+      }),
+
+      /* Ignore cosmos icons - windows */
+      new webpack.IgnorePlugin({
+        resourceRegExp: /^\.\/icons$/,
+        contextRegExp: /@pega\\cosmos-react-core\\lib\\components\\Icon$/
+      }),
+
+      new webpack.optimize.LimitChunkCountPlugin({
+        maxChunks: 1
+      }),
+      new webpack.optimize.MinChunkSizePlugin({
+        minChunkSize: 100000 // Minimum number of characters
+      }),
+      !devBuild && new CompressionPlugin(compressionBRConfObj)
+
+      /* Dont generate gzip file */
+      /* isEnvProduction && new CompressionPlugin(compressionGZConfObj) */
+    ].filter(Boolean),
+    performance: {
+      hints: 'warning'
+    },
+    externals
+  };
+};

package/src/tasks/bundle/index.js

@@ -3,13 +3,15 @@ import fs from 'fs';
 import { stat } from 'fs/promises';
 
 import { BUILD_CONFIG_JSON_FILENAME, CATEGORY_CUSTOM } from '../../constants.js';
-import { getComponentDirectoryPath } from '../../util.js';
+import { getComponentDirectoryPath, getFramework, removeComponentPrefix } from '../../util.js';
 
-import buildComponent from './builder/index.js';
+import buildReactComponent from './builderReact/index.js';
+import buildAngularComponent from './builderAngular/index.js';
+import buildAssociatedComponent from './builderAssociated/index.js';
 
 const extensions = ['ts', 'tsx', 'js', 'jsx'];
 
-const bundleComponent = async (componentKey, sourceMap, devBuild, category = CATEGORY_CUSTOM) => {
+export const bundleAssociatedComponent = async (componentKey, sourceMap, devBuild, category = CATEGORY_CUSTOM) => {
   const componentDirectory = await getComponentDirectoryPath(componentKey, category);
 
   const idx = (
@@ -57,7 +59,7 @@ const bundleComponent = async (componentKey, sourceMap, devBuild, category = CAT
   };
 
   globals = { ...globals, ...defaultGlobals };
-  await buildComponent({
+  await buildAssociatedComponent({
     inputFile,
     outputFile,
     componentKey,
@@ -68,4 +70,119 @@ const bundleComponent = async (componentKey, sourceMap, devBuild, category = CAT
   });
 };
 
-export default bundleComponent;
+export const bundleReactComponent = async (componentKey, sourceMap, devBuild, category = CATEGORY_CUSTOM) => {
+  const componentDirectory = await getComponentDirectoryPath(componentKey, category);
+
+  const idx = (
+    await Promise.all(
+      extensions.map(ext =>
+        stat(path.join(componentDirectory, `index.${ext}`))
+          .then(() => true)
+          .catch(() => false)
+      )
+    )
+  ).findIndex(exists => exists);
+
+  if (idx === -1) throw new Error('Index file not found.');
+
+  // remove sub folder, component goes in dist directory without it
+  if (componentKey.indexOf("/") >=0) {
+    const arKey = componentKey.split("/");
+    componentKey = arKey[arKey.length - 1];
+  }
+
+  const inputFile = path.join(componentDirectory, `index.${extensions[idx]}`);
+  const outputFile = `${componentKey}.js`;
+
+  let buildConfig = {};
+
+  if (fs.existsSync(BUILD_CONFIG_JSON_FILENAME)) {
+    buildConfig = JSON.parse(fs.readFileSync(BUILD_CONFIG_JSON_FILENAME, 'utf8'));
+  }
+
+  let externals = buildConfig.externals || [];
+  externals = {
+    react: 'React',
+    'react-dom': 'ReactDOM',
+    PCore: 'PCore',
+    ...buildConfig.externals
+  };
+
+  let globals = buildConfig.globals || {};
+
+  const defaultGlobals = {
+    react: 'React',
+    'react-dom': 'ReactDOM',
+    PCore: 'PCore',
+    ...buildConfig.globals
+  };
+
+  globals = { ...globals, ...defaultGlobals };
+  await buildReactComponent({
+    inputFile,
+    outputFile,
+    componentKey,
+    externals,
+    globals,
+    sourceMap,
+    devBuild
+  });
+};
+
+export const bundleAngularComponent = async (componentKey, sourceMap, devBuild, category = CATEGORY_CUSTOM) => {
+  const componentDirectory = await getComponentDirectoryPath(componentKey, category);
+
+  componentKey = removeComponentPrefix(componentKey);
+
+  const idx = (
+    await Promise.all(
+      extensions.map(ext =>
+        stat(path.join(componentDirectory, `${componentKey}.component.${ext}`))
+          .then(() => true)
+          .catch(() => false)
+      )
+    )
+  ).findIndex(exists => exists);
+
+
+  if (idx === -1) throw new Error('Index file not found.');
+
+  // remove sub folder, component goes in dist directory without it
+  // if (componentKey.indexOf("/") >=0) {
+  //   const arKey = componentKey.split("/");
+  //   componentKey = arKey[arKey.length - 1];
+  // }
+
+  const inputFile = path.join(componentDirectory, `${componentKey}.component.${extensions[idx]}`);
+  const outputFile = `${componentKey}.js`;
+
+  let buildConfig = {};
+
+  if (fs.existsSync(BUILD_CONFIG_JSON_FILENAME)) {
+    buildConfig = JSON.parse(fs.readFileSync(BUILD_CONFIG_JSON_FILENAME, 'utf8'));
+  }
+
+  let externals = buildConfig.externals || [];
+  externals = {
+    PCore: 'PCore',
+    ...buildConfig.externals
+  };
+
+  let globals = buildConfig.globals || {};
+
+  const defaultGlobals = {
+    PCore: 'PCore',
+    ...buildConfig.globals
+  };
+
+  globals = { ...globals, ...defaultGlobals };
+  await buildAngularComponent({
+    inputFile,
+    outputFile,
+    componentKey,
+    externals,
+    globals,
+    sourceMap,
+    devBuild
+  });
+};

package/src/tasks/create/index.js

@@ -8,8 +8,10 @@ import inquirer from 'inquirer';
 import ncp from 'ncp';
 import chalk from 'chalk';
 
-import { checkPathAccess, showVersion, getFramework } from '../../util.js';
-import { CATEGORY_CONSTELLATION, 
+import { checkPathAccess, 
+  showVersion, 
+  getFramework} from '../../util.js';
+import { CATEGORY_CONSTELLATION, CATEGORY_CUSTOM,
   SDK_CONFIG_JSON_FILENAME,
   DXCB_CONFIG, 
   DXCB_COMPONENT_DEFAULTS,
@@ -25,6 +27,7 @@ const pegaConfigInternalJsonPath = path.join(path.resolve(), DXCB_CONFIG_INTERNA
 
 import {
   convertIntoPascalCase,
+  convertIntoKebabCase,
   compileMustacheTemplate,
   getComponentDirectoryPath,
   getPegaConfig,
@@ -110,8 +113,12 @@ export const compileMustacheTemplates = async (
     allowedApplications = [].concat(allowedApplications);
   }
 
+  const componentKeyKebab = convertIntoKebabCase(convertIntoPascalCase(componentKey));
+  const framework = await getFramework();
+
   allowedApplications = allowedApplications.filter(el => !!el.trim()).map(el => el.trim());
   files.forEach(file => {
+
     const filePath = path.join(componentDirectory, file);
 
     const output = compileMustacheTemplate(filePath, {
@@ -119,6 +126,7 @@ export const compileMustacheTemplates = async (
       COMPONENT_NAME: componentName,
       COMPONENT_LABEL: componentLabel,
       COMPONENT_CLASS_NAME: componentClassName,
+      COMPONENT_CLASS_NAME_KEBAB: componentKeyKebab,
       ORGANIZATION: organization,
       VERSION: version,
       LIBRARY: library,
@@ -132,7 +140,24 @@ export const compileMustacheTemplates = async (
       IS_PHONE: isPhone
     });
     fs.writeFileSync(filePath, output);
-    fs.renameSync(filePath, filePath.replace('.mustache', ''));
+
+    switch (framework) {
+      case "SDK-React":
+        fs.renameSync(filePath, filePath.replace('.mustache', ''));
+        break;
+      case "SDK-Angular":
+        let newFilePath = filePath.replace('.mustache', '');
+        const typeAng = convertIntoKebabCase(convertIntoPascalCase(mustacheSubType)).concat(".component");
+        newFilePath = newFilePath.replace(typeAng, componentKeyKebab.concat(".component"));
+
+        fs.renameSync(filePath, newFilePath);
+        break;
+      case "SDK-WebComponents":
+        fs.renameSync(filePath, filePath.replace('.mustache', ''));
+        break;
+    }
+
+    
   });
 };
 
@@ -185,17 +210,29 @@ export const validateCompile = async (
 
   const componentKey = `${organization}_${library}_${componentName}`;
 
+  let targetDirectory = "";
+  switch (framework) {
+    case "SDK-React":
+      targetDirectory = await getComponentDirectoryPath(join(typeLC, "/",componentKey));
+      break;
+    case "SDK-Angular":
+      let componentKeyAng = convertIntoKebabCase(convertIntoPascalCase(componentKey));
+      targetDirectory = await getComponentDirectoryPath(join(typeLC, "/",componentKeyAng));
+      break;
+    case "SDK-WebComponents":
+      break;
+  }
  
-  const targetDirectory = await getComponentDirectoryPath(join(typeLC, "/",componentKey));
+  //const targetDirectory = await getComponentDirectoryPath(join(typeLC, "/",componentKey));
   const targetDirectoryConstellation = await getComponentDirectoryPath(join(typeLC, "/",componentKey), CATEGORY_CONSTELLATION);
 
-  const components = await getComponents(false);
+  const components = await getComponents(false, CATEGORY_CUSTOM, false);
 
   if (!onlyCompanion) {
     if (components.includes(componentKey)) {
       console.log(chalk.red(`${componentKey} component already exists in ${targetDirectory}`));
 
-      let componentsConstellation = await getComponents(false, CATEGORY_CONSTELLATION);
+      let componentsConstellation = await getComponents(false, CATEGORY_CONSTELLATION, false);
       if (components.includes(componentKey)) {
         console.log(chalk.red(`${componentKey} associated component already exists in ${targetDirectoryConstellation}`));
       }
@@ -203,7 +240,7 @@ export const validateCompile = async (
       return;
     }
     // test for constellation
-    const componentsConstellation = await getComponents(false, CATEGORY_CONSTELLATION);
+    const componentsConstellation = await getComponents(false, CATEGORY_CONSTELLATION, false);
     if (componentsConstellation.includes(componentKey)) {
       console.log(chalk.red(`${componentKey} associated component already exists in ${targetDirectoryConstellation}`));
       return;
@@ -211,7 +248,7 @@ export const validateCompile = async (
   }
   else {
     // test for constellation
-    const componentsConstellation = await getComponents(false, CATEGORY_CONSTELLATION);
+    const componentsConstellation = await getComponents(false, CATEGORY_CONSTELLATION, false);
     if (componentsConstellation.includes(componentKey)) {
       console.log(chalk.red(`${componentKey} associated component already exists in ${targetDirectoryConstellation}`));
       return;
@@ -270,14 +307,18 @@ export const validateCompile = async (
 export default async options => {
   showVersion();
 
-  if (options.params[9]) {
+  const framework = await getFramework();
+
+  if (options.params.length >= 12) {
     const type = options.params[3];
     const subtype = options.params[4];
     const componentName = options.params[5];
     const componentLabel = options.params[6];
-    const library = options.params[7];
-    const version = options.params[8];
-    const description = options.params[9];
+    const version = options.params[7];
+    const library = options.params[8];
+    const allowedApplications = options.params[9];
+    const description = options.params[10];
+    const organization = options.params[11];
 
     await validateCompile(
       {
@@ -289,6 +330,7 @@ export default async options => {
         type,
         subtype,
         description,
+        allowedApplications,
         organization
       },
       options

package/src/tasks/create/templates/Constellation/field/Boolean/styles.js.mustache

@@ -1,7 +1,14 @@
-import styled, { css } from 'styled-components';
+// utilizing theming, comment out, if want individual style
+import styled from 'styled-components';
+import { Configuration } from '@pega/cosmos-react-core';
 
-export default styled.div(() => {
-  return css`
-    margin: 0px 0px;
-  `;
-});
+export default styled(Configuration)``;
+
+// individual style, comment out above, and uncomment here and add styles
+// import styled, { css } from 'styled-components';
+//
+// export default styled.div(() => {
+//  return css`
+//    margin: 0px 0;
+//  `;
+// });

package/src/tasks/create/templates/Constellation/field/Date/DateFormatter.js.mustache

@@ -1,13 +1,13 @@
 import dayjs from 'dayjs';
-import relativeTime from 'dayjs/plugin/relativeTime';
-import localizedFormat from 'dayjs/plugin/localizedFormat';
-import utc from 'dayjs/plugin/utc';
-import tzone from 'dayjs/plugin/timezone';
+import relativeTime from 'dayjs/plugin/relativeTime.js';
+import localizedFormat from 'dayjs/plugin/localizedFormat.js';
+import utc from 'dayjs/plugin/utc.js';
+import timezone from 'dayjs/plugin/timezone.js';
 
 dayjs.extend(relativeTime);
 dayjs.extend(localizedFormat);
 dayjs.extend(utc);
-dayjs.extend(tzone);
+dayjs.extend(timezone);
 
 const types = ['fromNow', 'customFormat'];
 
@@ -16,12 +16,12 @@ const types = ['fromNow', 'customFormat'];
 // value should be in ISO 8601 format.
 function DateFormatter(
   value,
-  { type = types[1], format = "DD/MM/YYYY", timezone } = {}
+  { type = types[1], format = "DD/MM/YYYY", tzone } = {}
 ) {
   if (!value) return value;
   switch (type) {
     case types[1]:
-      if (timezone) return dayjs(value).tz(timezone).format(format);
+      if (tzone) return dayjs(value).tz(tzone).format(format);
       return dayjs(value).format(format);
     case types[0]:
       return dayjs(value).from(dayjs());