@designcrowd/fe-shared-lib 1.2.11 → 1.2.12-ml-259-1

package/src/useSharedLibTranslate.js

@@ -1,74 +1,77 @@
-// eslint-disable-next-line import/no-extraneous-dependencies
-import i18next from 'i18next';
-
-const fallbackLocale = 'en-US';
-
-const relativePathsToTranslationFiles = {
-  'en-US': () => import('./bundles/bundled-translations.json'),
-  'de-DE': () => import('./bundles/bundled-translations.de-DE.json'),
-  'fr-FR': () => import('./bundles/bundled-translations.fr-FR.json'),
-  'es-ES': () => import('./bundles/bundled-translations.es-ES.json'),
-  'pt-PT': () => import('./bundles/bundled-translations.pt-PT.json'),
-};
-
-const setSharedLibLocaleAsync = async (locale = 'en-US') => {
-  const localeToUse = locale || 'en-US';
-
-  if (!i18next.isInitialized) {
-    await i18next.init({
-      debug: false,
-      fallbackLng: fallbackLocale,
-      lng: localeToUse,
-    });
-  }
-
-  const languageFile = (await relativePathsToTranslationFiles[localeToUse]()).default;
-
-  await i18next.addResourceBundle(localeToUse, 'fe-shared-lib', {
-    ...languageFile,
-  });
-};
-
-const tr = (key, valuesToInterpolate = {}) => {
-  const translated = i18next.t(key, { ns: 'fe-shared-lib', ...valuesToInterpolate });
-
-  return translated;
-};
-
-const publishBrandPageModalTr = (key, valuesToInterpolate = {}) =>
-  tr(`publishBrandPageModal.${key}`, valuesToInterpolate);
-
-const sellDomainNameWidgetTr = (key, valuesToInterpolate = {}) =>
-  tr(`sellDomainNameWidget.${key}`, valuesToInterpolate);
-
-const sellDomainNameListSearchResultTr = (key, valuesToInterpolate = {}) =>
-  tr(`sellDomainNameListSearchResult.${key}`, valuesToInterpolate);
-
-const sellDomainNameSearchTr = (key, valuesToInterpolate = {}) =>
-  tr(`sellDomainNameSearch.${key}`, valuesToInterpolate);
-
-const sellDomainNameModalApplicationTr = (key, valuesToInterpolate = {}) =>
-  tr(`sellDomainNameModalApplication.${key}`, valuesToInterpolate);
-
-const sellDomainNameListModalTr = (key, valuesToInterpolate = {}) =>
-  tr(`sellDomainNameListModal.${key}`, valuesToInterpolate);
-
-const sellDomainNameListTr = (key, valuesToInterpolate = {}) => tr(`sellDomainNameList.${key}`, valuesToInterpolate);
-
-const getCurrentLocale = () => {
-  return i18next.language || 'en-US';
-};
-
-export {
-  setSharedLibLocaleAsync,
-  getCurrentLocale,
-  tr,
-  publishBrandPageModalTr,
-  sellDomainNameWidgetTr,
-  sellDomainNameListSearchResultTr,
-  sellDomainNameSearchTr,
-  sellDomainNameModalApplicationTr,
-  sellDomainNameListModalTr,
-  sellDomainNameListTr,
-};
-
+// eslint-disable-next-line import/no-extraneous-dependencies
+import i18next from 'i18next';
+
+const fallbackLocale = 'en-US';
+
+const relativePathsToTranslationFiles = {
+  'en-US': () => import('./bundles/bundled-translations.json'),
+  'de-DE': () => import('./bundles/bundled-translations.de-DE.json'),
+  'fr-FR': () => import('./bundles/bundled-translations.fr-FR.json'),
+  'es-ES': () => import('./bundles/bundled-translations.es-ES.json'),
+  'pt-PT': () => import('./bundles/bundled-translations.pt-PT.json'),
+};
+
+const setSharedLibLocaleAsync = async (locale = 'en-US') => {
+  const localeToUse = locale || 'en-US';
+
+  if (!i18next.isInitialized) {
+    await i18next.init({
+      debug: false,
+      fallbackLng: fallbackLocale,
+      lng: localeToUse,
+    });
+  }
+
+  const languageFile = (await relativePathsToTranslationFiles[localeToUse]()).default;
+
+  await i18next.addResourceBundle(localeToUse, 'fe-shared-lib', {
+    ...languageFile,
+  });
+};
+
+const tr = (key, valuesToInterpolate = {}) => {
+  const translated = i18next.t(key, { ns: 'fe-shared-lib', ...valuesToInterpolate });
+
+  return translated;
+};
+
+const publishBrandPageModalTr = (key, valuesToInterpolate = {}) =>
+  tr(`publishBrandPageModal.${key}`, valuesToInterpolate);
+
+const sellDomainNameWidgetTr = (key, valuesToInterpolate = {}) =>
+  tr(`sellDomainNameWidget.${key}`, valuesToInterpolate);
+
+const sellDomainNameListSearchResultTr = (key, valuesToInterpolate = {}) =>
+  tr(`sellDomainNameListSearchResult.${key}`, valuesToInterpolate);
+
+const sellDomainNameSearchTr = (key, valuesToInterpolate = {}) =>
+  tr(`sellDomainNameSearch.${key}`, valuesToInterpolate);
+
+const sellDomainNameModalApplicationTr = (key, valuesToInterpolate = {}) =>
+  tr(`sellDomainNameModalApplication.${key}`, valuesToInterpolate);
+
+const sellDomainNameListModalTr = (key, valuesToInterpolate = {}) =>
+  tr(`sellDomainNameListModal.${key}`, valuesToInterpolate);
+
+const sellDomainNameListTr = (key, valuesToInterpolate = {}) => tr(`sellDomainNameList.${key}`, valuesToInterpolate);
+
+const priceTr = (key, valuesToInterpolate = {}) => tr(`price.${key}`, valuesToInterpolate);
+
+const getCurrentLocale = () => {
+  return i18next.language || 'en-US';
+};
+
+export {
+  setSharedLibLocaleAsync,
+  getCurrentLocale,
+  tr,
+  publishBrandPageModalTr,
+  sellDomainNameWidgetTr,
+  sellDomainNameListSearchResultTr,
+  sellDomainNameSearchTr,
+  sellDomainNameModalApplicationTr,
+  sellDomainNameListModalTr,
+  sellDomainNameListTr,
+  priceTr,
+};
+

package/src/viewports.js

@@ -1,51 +1,51 @@
-module.exports = {
-  iPhone12Pro: {
-    name: "iPhone 12 Pro",
-    styles: {
-      width: "390px",
-      height: "844px",
-    },
-  },
-  iPhone12ProMax: {
-    name: "iPhone 12 Pro Max",
-    styles: {
-      width: "428px",
-      height: "926px",
-    },
-  },
-  iPhone8: {
-    name: "iPhone 8",
-    styles: {
-      width: "375px",
-      height: "667px",
-    },
-  },
-  iPhone5: {
-    name: "iPhone 5",
-    styles: {
-      width: "320px",
-      height: "568px",
-    },
-  },
-  iPadPro: {
-    name: "iPad Pro",
-    styles: {
-      width: "1024px",
-      height: "1366px",
-    },
-  },
-  iPadAir: {
-    name: "iPad Air",
-    styles: {
-      width: "820px",
-      height: "1180px",
-    },
-  },
-  fullHD: {
-    name: "Full HD",
-    styles: {
-      width: "1920px",
-      height: "1080px",
-    },
-  },
-};
+module.exports = {
+  iPhone12Pro: {
+    name: "iPhone 12 Pro",
+    styles: {
+      width: "390px",
+      height: "844px",
+    },
+  },
+  iPhone12ProMax: {
+    name: "iPhone 12 Pro Max",
+    styles: {
+      width: "428px",
+      height: "926px",
+    },
+  },
+  iPhone8: {
+    name: "iPhone 8",
+    styles: {
+      width: "375px",
+      height: "667px",
+    },
+  },
+  iPhone5: {
+    name: "iPhone 5",
+    styles: {
+      width: "320px",
+      height: "568px",
+    },
+  },
+  iPadPro: {
+    name: "iPad Pro",
+    styles: {
+      width: "1024px",
+      height: "1366px",
+    },
+  },
+  iPadAir: {
+    name: "iPad Air",
+    styles: {
+      width: "820px",
+      height: "1180px",
+    },
+  },
+  fullHD: {
+    name: "Full HD",
+    styles: {
+      width: "1920px",
+      height: "1080px",
+    },
+  },
+};

package/stylelint.config.js

@@ -1,19 +1,19 @@
-module.exports = {
-  extends: ['stylelint-config-standard'],
-  rules: {
-    'at-rule-no-unknown': [
-      true,
-      {
-        ignoreAtRules: [
-          'tailwind',
-          'apply',
-          'variants',
-          'responsive',
-          'screen',
-        ],
-      },
-    ],
-    'declaration-block-trailing-semicolon': null,
-    'no-descending-specificity': null,
-  },
-};
+module.exports = {
+  extends: ['stylelint-config-standard'],
+  rules: {
+    'at-rule-no-unknown': [
+      true,
+      {
+        ignoreAtRules: [
+          'tailwind',
+          'apply',
+          'variants',
+          'responsive',
+          'screen',
+        ],
+      },
+    ],
+    'declaration-block-trailing-semicolon': null,
+    'no-descending-specificity': null,
+  },
+};

package/tailwind.build.js

@@ -1,83 +1,83 @@
-/* eslint-disable global-require */
-/*
-This file will compile tailwind.css files for each theme
-*/
-
-const fse = require('fs-extra');
-const postcss = require('postcss');
-const yargs = require('yargs/yargs');
-
-const { argv } = yargs(process.argv);
-
-const bcTheme = require("./src/themes/bc");
-const bpTheme = require("./src/themes/bp");
-const dcTheme = require("./src/themes/dc");
-const cdTheme = require("./src/themes/cd");
-const dcomTheme = require("./src/themes/dcom");
-const viewports = require("./src/viewports");
-
-const designSystemConfig = {
-  themes: {
-    brandCrowd: bcTheme,
-    brandPage: bpTheme,
-    crazyDomains: cdTheme,
-    designCrowd: dcTheme,
-    designCom: dcomTheme,
-  },
-  viewports,
-};
-
-
-fse.readFile(`${__dirname}/src/css/tailwind.css`, 'utf8', (err, data) => {
-  // Loop through the `design-system-configuration` themes
-  Object.keys(designSystemConfig.themes).forEach((theme) => {
-    const css = data;
-
-    // set the current theme in the environment so
-    // that Tailwind can compile the correct theme
-    // see tailwind.config.js for more info
-    process.env.tailwindTheme = theme;
-
-    // tailwind 3 caches the config context in memory, deleting cache here
-    Object.keys(require.cache)
-    .filter((key) => key.includes('tailwindcss'))
-    .forEach((key) => delete require.cache[key]);
-
-    postcss([
-      require('postcss-nested'),
-      require('autoprefixer'),
-      require('tailwindcss')(`${__dirname}/./tailwind.config.js`),
-    ])
-      .process(css, {
-        from: `${__dirname}/src/css/tailwind.css`,
-        to: `./tailwind-${theme}.css`,
-      })
-      .then((result) => {
-        const outputPath = `${__dirname}/dist/css/tailwind-${theme}.css`;
-        const outputPathForStoryBook = `${__dirname}/public/css/tailwind-${theme}.css`;
-
-        let { css: cssResult } = result;
-
-        if (!argv.storybook) {
-          fse.outputFile(outputPath, cssResult, () => {
-            console.log(`✅ Built Tailwind: ${outputPath}`);
-          });
-        } else {
-          // replace all `tw-` classes
-          cssResult = cssResult.replace(
-            /(\.[a-z]{2}-)/gm,
-            `.theme-${theme} .tw-`,
-          );
-          // replace all variant classes eg `.md\:tw-`
-          cssResult = cssResult.replace(
-            /^\s*(\.[a-zA-Z-]+\\:)/gm,
-            `.theme-${theme} $1`,
-          );
-
-          fse.outputFile(outputPathForStoryBook, cssResult, () => {
-            console.log(`✅ Built Tailwind: ${outputPathForStoryBook}`);
-          });
-        }
-      });
-  });
-});
+/* eslint-disable global-require */
+/*
+This file will compile tailwind.css files for each theme
+*/
+
+const fse = require('fs-extra');
+const postcss = require('postcss');
+const yargs = require('yargs/yargs');
+
+const { argv } = yargs(process.argv);
+
+const bcTheme = require("./src/themes/bc");
+const bpTheme = require("./src/themes/bp");
+const dcTheme = require("./src/themes/dc");
+const cdTheme = require("./src/themes/cd");
+const dcomTheme = require("./src/themes/dcom");
+const viewports = require("./src/viewports");
+
+const designSystemConfig = {
+  themes: {
+    brandCrowd: bcTheme,
+    brandPage: bpTheme,
+    crazyDomains: cdTheme,
+    designCrowd: dcTheme,
+    designCom: dcomTheme,
+  },
+  viewports,
+};
+
+
+fse.readFile(`${__dirname}/src/css/tailwind.css`, 'utf8', (err, data) => {
+  // Loop through the `design-system-configuration` themes
+  Object.keys(designSystemConfig.themes).forEach((theme) => {
+    const css = data;
+
+    // set the current theme in the environment so
+    // that Tailwind can compile the correct theme
+    // see tailwind.config.js for more info
+    process.env.tailwindTheme = theme;
+
+    // tailwind 3 caches the config context in memory, deleting cache here
+    Object.keys(require.cache)
+    .filter((key) => key.includes('tailwindcss'))
+    .forEach((key) => delete require.cache[key]);
+
+    postcss([
+      require('postcss-nested'),
+      require('autoprefixer'),
+      require('tailwindcss')(`${__dirname}/./tailwind.config.js`),
+    ])
+      .process(css, {
+        from: `${__dirname}/src/css/tailwind.css`,
+        to: `./tailwind-${theme}.css`,
+      })
+      .then((result) => {
+        const outputPath = `${__dirname}/dist/css/tailwind-${theme}.css`;
+        const outputPathForStoryBook = `${__dirname}/public/css/tailwind-${theme}.css`;
+
+        let { css: cssResult } = result;
+
+        if (!argv.storybook) {
+          fse.outputFile(outputPath, cssResult, () => {
+            console.log(`✅ Built Tailwind: ${outputPath}`);
+          });
+        } else {
+          // replace all `tw-` classes
+          cssResult = cssResult.replace(
+            /(\.[a-z]{2}-)/gm,
+            `.theme-${theme} .tw-`,
+          );
+          // replace all variant classes eg `.md\:tw-`
+          cssResult = cssResult.replace(
+            /^\s*(\.[a-zA-Z-]+\\:)/gm,
+            `.theme-${theme} $1`,
+          );
+
+          fse.outputFile(outputPathForStoryBook, cssResult, () => {
+            console.log(`✅ Built Tailwind: ${outputPathForStoryBook}`);
+          });
+        }
+      });
+  });
+});

package/tailwind.config.js

@@ -1,37 +1,37 @@
-const bcTheme = require("./src/themes/bc");
-const bpTheme = require("./src/themes/bp");
-const dcTheme = require("./src/themes/dc");
-const cdTheme = require("./src/themes/cd");
-const dcomTheme = require("./src/themes/dcom");
-const viewports = require("./src/viewports");
-
-const designSystemConfig = {
-  themes: {
-    brandCrowd: bcTheme,
-    brandPage: bpTheme,
-    crazyDomains: cdTheme,
-    designCrowd: dcTheme,
-    designCom: dcomTheme,
-  },
-  viewports,
-};
-
-const theme = designSystemConfig.themes[process.env.tailwindTheme]; // use the environment theme from functions/tailwind.js
-module.exports = {
-  prefix: 'tw-',
-  content: ['./src/**/components/**/*.vue'],
-  safelist: [{ pattern: /^!tw-p-/ }, { pattern: /^tw-overflow-y-auto$/ }],
-  theme: {
-    ...theme,
-    extend: {
-      maxWidth: {
-        300: '75rem',
-      },
-    },
-  },
-  plugins: [],
-  corePlugins: {
-    preflight: true,
-  },
-};
-
+const bcTheme = require("./src/themes/bc");
+const bpTheme = require("./src/themes/bp");
+const dcTheme = require("./src/themes/dc");
+const cdTheme = require("./src/themes/cd");
+const dcomTheme = require("./src/themes/dcom");
+const viewports = require("./src/viewports");
+
+const designSystemConfig = {
+  themes: {
+    brandCrowd: bcTheme,
+    brandPage: bpTheme,
+    crazyDomains: cdTheme,
+    designCrowd: dcTheme,
+    designCom: dcomTheme,
+  },
+  viewports,
+};
+
+const theme = designSystemConfig.themes[process.env.tailwindTheme]; // use the environment theme from functions/tailwind.js
+module.exports = {
+  prefix: 'tw-',
+  content: ['./src/**/components/**/*.vue'],
+  safelist: [{ pattern: /^!tw-p-/ }, { pattern: /^tw-overflow-y-auto$/ }],
+  theme: {
+    ...theme,
+    extend: {
+      maxWidth: {
+        300: '75rem',
+      },
+    },
+  },
+  plugins: [],
+  corePlugins: {
+    preflight: true,
+  },
+};
+

package/tailwind.themes.js

@@ -1,59 +1,59 @@
-const fse = require('fs-extra');
-const bcTheme = require("./src/themes/bc");
-const bpTheme = require("./src/themes/bp");
-const dcTheme = require("./src/themes/dc");
-const cdTheme = require("./src/themes/cd");
-const dcomTheme = require("./src/themes/dcom");
-const viewports = require("./src/viewports");
-
-const designSystemConfig = {
-  themes: {
-    brandCrowd: bcTheme,
-    brandPage: bpTheme,
-    crazyDomains: cdTheme,
-    designCrowd: dcTheme,
-    designCom: dcomTheme,
-  },
-  viewports,
-};
-
-const { themes } = designSystemConfig;
-
-const previewHeadFiles = [
-  {
-    master: `${__dirname}/.storybook/preview-head-master.html`,
-    outputFile: `${__dirname}/.storybook/preview-head.html`,
-  },
-  {
-    master: `${__dirname}/.storybook/preview-head-publish-master.html`,
-    outputFile: `${__dirname}/.storybook/preview-head-publish.html`,
-  },
-];
-
-(async () => {
-  const results = previewHeadFiles.map(async (previewHeadFile) => {
-    const masterFile = previewHeadFile.master;
-    const { outputFile } = previewHeadFile;
-
-    const initialMarkup = await fse.readFile(masterFile, 'utf8');
-
-    // Create the initial preview-head.html file
-    await fse.outputFile(outputFile, initialMarkup);
-
-    // Loop through the `design-system-configuration` themes
-    const contents = Object.keys(themes)
-      .sort()
-      .reduce((prev, theme) => {
-        const filename = `tailwind-${theme}.css`;
-        return `${prev}\n<link rel="stylesheet" href="css/${filename}">`;
-      }, '');
-
-    // Append the theme <link to the preview-head.html
-    await fse.appendFile(outputFile, contents, (err) => {
-      if (err) throw err;
-      console.log(`✅ Added css file links to ${previewHeadFile.outputFile}`);
-    });
-  });
-
-  await Promise.all(results);
-})();
+const fse = require('fs-extra');
+const bcTheme = require("./src/themes/bc");
+const bpTheme = require("./src/themes/bp");
+const dcTheme = require("./src/themes/dc");
+const cdTheme = require("./src/themes/cd");
+const dcomTheme = require("./src/themes/dcom");
+const viewports = require("./src/viewports");
+
+const designSystemConfig = {
+  themes: {
+    brandCrowd: bcTheme,
+    brandPage: bpTheme,
+    crazyDomains: cdTheme,
+    designCrowd: dcTheme,
+    designCom: dcomTheme,
+  },
+  viewports,
+};
+
+const { themes } = designSystemConfig;
+
+const previewHeadFiles = [
+  {
+    master: `${__dirname}/.storybook/preview-head-master.html`,
+    outputFile: `${__dirname}/.storybook/preview-head.html`,
+  },
+  {
+    master: `${__dirname}/.storybook/preview-head-publish-master.html`,
+    outputFile: `${__dirname}/.storybook/preview-head-publish.html`,
+  },
+];
+
+(async () => {
+  const results = previewHeadFiles.map(async (previewHeadFile) => {
+    const masterFile = previewHeadFile.master;
+    const { outputFile } = previewHeadFile;
+
+    const initialMarkup = await fse.readFile(masterFile, 'utf8');
+
+    // Create the initial preview-head.html file
+    await fse.outputFile(outputFile, initialMarkup);
+
+    // Loop through the `design-system-configuration` themes
+    const contents = Object.keys(themes)
+      .sort()
+      .reduce((prev, theme) => {
+        const filename = `tailwind-${theme}.css`;
+        return `${prev}\n<link rel="stylesheet" href="css/${filename}">`;
+      }, '');
+
+    // Append the theme <link to the preview-head.html
+    await fse.appendFile(outputFile, contents, (err) => {
+      if (err) throw err;
+      console.log(`✅ Added css file links to ${previewHeadFile.outputFile}`);
+    });
+  });
+
+  await Promise.all(results);
+})();