@jobber/design 1.0.0-alpha.0 → 1.0.0-pre.1

package/CHANGELOG.md

@@ -8,6 +8,60 @@ menu: Changelog
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.0.0-pre.1](https://github.com/GetJobber/atlantis/compare/@jobber/design@1.0.0-pre.0...@jobber/design@1.0.0-pre.1) (2023-01-24)
+
+**Note:** Version bump only for package @jobber/design
+
+
+
+
+
+# [1.0.0-pre.0](https://github.com/GetJobber/atlantis/compare/@jobber/design@0.26.0...@jobber/design@1.0.0-pre.0) (2023-01-24)
+
+
+### Features
+
+* **design:** BREAKING CHANGE: Implement new typefaces in Atlantis [JOB-46209] ([#952](https://github.com/GetJobber/atlantis/issues/952)) ([15f604c](https://github.com/GetJobber/atlantis/commit/15f604cc51ee6881a5ed9c1be01081c76cf5ce6e))
+
+
+### BREAKING CHANGES
+
+* **design:** Added Jobber Fonts support
+
+* Remove file that was needed for major bump in design
+
+* Revert "update button styles"
+
+This reverts commit d5278133003f4f770af56d583ef104b5abc8b886.
+
+* Remove unneeded logging
+
+* Update install instructions for non-jobber developers
+
+* Changed how package works when being installed to better support non jobber devs.
+
+* Use variables in docz instead of a string
+
+* Remove change that caused failures for Jobber people
+
+* Moved script location
+
+* Maybe fix cloudflare builds. Hopefully
+
+* Update README.md
+
+* Updated prerelease docs.
+Verify fonts aren't bundled with pre-releases.
+
+* rebuild cloudflare
+
+Co-authored-by: Chris Murray <39704901+chris-at-jobber@users.noreply.github.com>
+Co-authored-by: Michael Paradis <michael.p@getjobber.com>
+
+
+
+
+
 # [1.0.0-alpha.0](https://github.com/GetJobber/atlantis/compare/@jobber/design@0.26.0...@jobber/design@1.0.0-alpha.0) (2023-01-24)
 
 

package/buildColors.js

@@ -0,0 +1,15 @@
+/* eslint-env node */
+/* eslint-disable @typescript-eslint/no-var-requires */
+const fs = require("fs");
+const postcss = require("postcss");
+const postcssCustomProperties = require("postcss-custom-properties");
+
+const colors = fs.readFileSync("src/colors.css");
+
+postcss([
+  postcssCustomProperties({
+    exportTo: ["colors.js"],
+  }),
+])
+  .process(colors, { from: undefined })
+  .then();

package/buildFoundation.js

@@ -0,0 +1,15 @@
+/* eslint-env node */
+/* eslint-disable @typescript-eslint/no-var-requires */
+const fs = require("fs");
+const postcss = require("postcss");
+const postcssCustomProperties = require("postcss-custom-properties");
+
+const foundation = fs.readFileSync("./foundation.css");
+
+postcss([
+  postcssCustomProperties({
+    exportTo: ["src/foundation.js"],
+  }),
+])
+  .process(foundation, { from: undefined })
+  .then();

package/buildIconStyles.js

@@ -0,0 +1,44 @@
+/* eslint-env node */
+/* eslint-disable @typescript-eslint/no-var-requires */
+
+const fs = require("fs");
+const path = require("path");
+const postcss = require("postcss");
+const postcssCustomProperties = require("postcss-custom-properties");
+const postcssCalc = require("postcss-calc");
+const transform = require("css-to-react-native-transform").default;
+
+const icon = fs.readFileSync("src/icons/Icon.css");
+const size = fs.readFileSync("src/icons/Sizes.css");
+const color = fs.readFileSync("src/icons/Colors.css");
+
+const allCss = [icon, size, color].join("\n");
+
+postcss([
+  postcssCustomProperties({
+    preserve: false,
+    importFrom: ["foundation.css"],
+  }),
+  postcssCalc(),
+])
+  .process(allCss, { from: undefined })
+  .then(function (result) {
+    const calculated = transform(result.css);
+    const jsonContent =
+      "/* This file is automatically generated by buildIconStyle.js and should not be edited. */\n" +
+      "export const iconStyles = " +
+      JSON.stringify(calculated, undefined, 2);
+
+    fs.writeFile(
+      path.join(__dirname, "src/icons/iconStyles.ts"),
+      jsonContent,
+      "utf8",
+      function (err) {
+        if (err) {
+          console.log("An error occurred while writing JSON object to File.");
+          return console.log(err);
+        }
+        console.log("JSON file has been saved.");
+      },
+    );
+  });

package/foundation_config/postcss-filter-rules/index.js

@@ -0,0 +1,17 @@
+/* eslint-env node */
+/* eslint-disable @typescript-eslint/no-var-requires */
+
+const postcss = require("postcss");
+
+module.exports = postcss.plugin(
+  "postcss-filter-rules",
+  (opts = { ruleFilters: [] }) => {
+    // Work with options here
+
+    return root => {
+      root.nodes.forEach(rule => {
+        opts.ruleFilters.forEach(filter => filter(rule));
+      });
+    };
+  },
+);

package/foundation_config/postcss.config.js

@@ -0,0 +1,58 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+/* eslint-env node */
+
+const postcssCustomProperties = require("postcss-custom-properties");
+const postcssImport = require("postcss-import");
+const postcssCopy = require("postcss-copy");
+const removeRule = require("./postcss-filter-rules");
+
+let maintainPath;
+let hasJobberFonts = false;
+try {
+  ({ maintainPath } = require("@jobber/fonts"));
+  hasJobberFonts = true;
+} catch (e) {
+  hasJobberFonts = false;
+}
+function removeFontImport(rule) {
+  if (rule.params?.includes("@jobber/fonts")) {
+    if (!hasJobberFonts) {
+      console.warn("remove rule in foundation config", { hasJobberFonts });
+      rule.remove();
+    }
+  }
+}
+const postcssCopyInstance = postcssCopy({
+  dest: "./dist",
+  basePath: ["./src", "./node_modules"],
+  preservePath: true,
+  template(fileMeta) {
+    return fileMeta.filename;
+  },
+});
+const postcssImportInstance = postcssImport({
+  basedir: ["./src", "./node_modules"],
+  filter: path => {
+    if (path.includes("@jobber/fonts")) {
+      console.warn("include fonts, import, foundation config", {
+        hasJobberFonts,
+      });
+      return hasJobberFonts;
+    } else {
+      return true;
+    }
+  },
+});
+
+module.exports = {
+  plugins: [
+    removeRule({ ruleFilters: [removeFontImport] }),
+    postcssImportInstance,
+    hasJobberFonts && postcssCopyInstance,
+    hasJobberFonts &&
+      maintainPath({ pathToFind: "dist/fonts", pathToSet: "./dist/fonts" }),
+    postcssCustomProperties({
+      exportTo: ["src/foundation.js"],
+    }),
+  ],
+};

package/jobberStyle.js

@@ -0,0 +1,164 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+const fs = require("fs");
+// eslint-disable-next-line import/no-internal-modules
+const customPropertiesObject = require("./src/foundation.js");
+
+const regexExpressions = {
+  cssVars: /var\((.*)\)/,
+  calculations: /calc\((.*)\)/,
+  rgbVars: /rgb\(var\((.*)\)\)/,
+  rgbaVars: /rgba\(var\((.*)\),?(.*)\)/,
+  removeAllNonNumerals: /[^0-9.+\-/*]/gi,
+  extractAllVarGroups: /var\(.*?\)/g,
+};
+
+const customProperties = customPropertiesObject.customProperties;
+
+const resolvedCssVars = getResolvedCSSVars(customProperties);
+
+const jsonContent =
+  "export const JobberStyle = " + JSON.stringify(resolvedCssVars, undefined, 2);
+
+fs.writeFile("./foundation.js", jsonContent, "utf8", function (err) {
+  if (err) {
+    console.log("An error occured while writing JSON object to File.");
+    return console.log(err);
+  }
+  console.log("JSON file has been saved.");
+});
+
+const scssColors = getResolvedSCSSColors(resolvedCssVars);
+
+fs.writeFile(
+  "./foundation.scss",
+  scssColors.join("\n"),
+  "utf-8",
+  function (err) {
+    if (err) {
+      console.log("An error occured while writing SCSS to File.");
+      return console.log(err);
+    }
+    console.log("SCSS file has been saved.");
+  },
+);
+
+/**
+ * Recursively resolve css custom properties.
+ *
+ * eg:
+ * ```
+ * jobberStyle(`
+ *   "--base": "5px",
+ *   "--foo": "calc(var(--base) * 2),
+ * `);
+ * ```
+ * =>
+ * ```
+ * {
+ *   "--base": "5",
+ *   "--foo": "10",
+ * }
+ * ```
+ */
+
+function jobberStyle(styling) {
+  const styleValue = customProperties[styling];
+
+  //varRegexResult returns --base-unit from var(--base-unit)
+  const varRegexResult = regexExpressions.cssVars.exec(styleValue);
+  //rgbVarRegexResult returns --base-unit from rgb(var(--base-unit))
+  const rgbVarRegexResult = regexExpressions.rgbVars.exec(styleValue);
+  //rgbaVarRegexResult returns --base-unit and alpha (if exists) from rgba(var(--base-unit), alpha)
+  const rgbaVarRegexResult = regexExpressions.rgbaVars.exec(styleValue);
+
+  //calcRegexResult returns var(--base-unit) / 16 from calc(var(--base-unit) / 16)
+  const calcRegexResult = regexExpressions.calculations.exec(styleValue);
+  if (calcRegexResult) {
+    return handleCalc(calcRegexResult);
+  } else if (rgbVarRegexResult) {
+    return jobberStyle(rgbVarRegexResult[1]);
+  } else if (rgbaVarRegexResult) {
+    return handleRbga(rgbaVarRegexResult);
+  } else if (varRegexResult) {
+    return jobberStyle(varRegexResult[1]);
+  } else {
+    return isSpacingValue(styleValue) ? parseFloat(styleValue) : styleValue;
+  }
+}
+
+function handleCalc(calcRegexResult) {
+  const finalExpression = handleExpressionsInCalc(calcRegexResult);
+  // eslint-disable-next-line no-new-func
+  const calculatedValue = new Function(
+    "return " +
+      finalExpression.replace(regexExpressions.removeAllNonNumerals, ""),
+  )();
+  return isSpacingValue(calculatedValue)
+    ? parseFloat(calculatedValue)
+    : calculatedValue;
+}
+
+function handleRbga(rgbaVarRegexResult) {
+  let resolved = "rgba(" + jobberStyle(rgbaVarRegexResult[1]);
+  if (rgbaVarRegexResult[2]) {
+    resolved += "," + rgbaVarRegexResult[2];
+  }
+  resolved += ")";
+
+  return resolved;
+}
+
+function handleExpressionsInCalc(calcRegexResult) {
+  const calcExtract = calcRegexResult[1];
+  const varGroups = calcExtract.match(regexExpressions.extractAllVarGroups);
+  let finalExpression = calcExtract;
+  varGroups &&
+    varGroups.forEach(group => {
+      const cssVariableRegexResult = regexExpressions.cssVars.exec(group);
+      if (cssVariableRegexResult) {
+        finalExpression = resolveCssVarsInExpression({
+          group,
+          cssVariableRegexResult,
+          finalExpression,
+        });
+      }
+    });
+  return finalExpression;
+}
+
+function resolveCssVarsInExpression({
+  group,
+  cssVariableRegexResult,
+  finalExpression,
+}) {
+  const cssVariable = cssVariableRegexResult[1];
+  const realValue = jobberStyle(cssVariable);
+  const unresolvedCssVariable = group;
+  return finalExpression.replace(unresolvedCssVariable, realValue);
+}
+
+function isSpacingValue(value) {
+  return !!String(value).match(
+    /(^\d+(px|%|rem|em|ex|ch|vw|vh|vmin|vmax)$)|(^\d+$)/,
+  );
+}
+
+function getResolvedCSSVars(cssProperties) {
+  const allKeys = Object.keys(cssProperties);
+  return allKeys.reduce((acc, key) => {
+    const newKey = key.replace("--", "");
+    acc[newKey] = jobberStyle(key);
+    return acc;
+  }, {});
+}
+
+function getResolvedSCSSColors(cssProperties) {
+  const allKeys = Object.keys(cssProperties);
+  return allKeys.reduce((acc, cssVar) => {
+    if (cssVar.includes("color")) {
+      return [...acc, `$${cssVar}: ${resolvedCssVars[cssVar]};`];
+    } else {
+      return acc;
+    }
+  }, []);
+}