@loomhq/lens 12.8.0 → 12.10.0

package/README.md

@@ -4,6 +4,16 @@
 
 [![npm](https://img.shields.io/npm/v/@loomhq/lens?style=for-the-badge)](https://www.npmjs.com/package/@loomhq/lens)
 
+## Content Overview
+
+- [Installation](#installation) - Add Lens to your project with required dependencies
+- [Running Lens Locally](#running-lens-locally) - Test your Lens changes in development
+- [Contributing](#contributing) - Guidelines and workflows for contributing to Lens
+- [Adding a New Icon](#adding-a-new-icon-to-lens) - Step-by-step process for adding custom icons
+- [Upgrading Lens Versions](#upgrading-lens-versions) - How to publish and update Lens versions
+- [Using ADS Icons](#add-an-icon-to-the-icon-set) - Integrate Atlassian Design System icons
+- [Documentation](#documentation) - Access the full Lens documentation site
+
 ## Installation
 
 Add Lens to your app:
@@ -50,19 +60,37 @@ style.innerHTML = cssUtilities();
 document.head.appendChild(style);
 ```
 
-## Running Locally
+## Running Lens Locally
+
+Want to test if your Lens changes went through? Just like how there's a Loom local, there's a Lens local.
 
-From the Lens directory
+From the Lens directory - found at `libraries/lens`
 
 ```
 pnpm i
 pnpm --filter @loomhq/lens dev
-navigate to: http://localhost:3000
 ```
 
+After running the last `pnpm --filter` in your terminal, a `localhost` address should appear. Follow it to your local lens development website.
+
 ## Contributing
+If you are looking to use an ADS (Atlassian Design System) component, [check out this section for implementation guidance](#add-an-icon-to-the-icon-set).
+
+If you add any new Lens components, please surface any urgent pull requests in [#lens-designsystem](https://useloom.slack.com/archives/CJ52CKB27).
+
+### Adding a New Icon to Lens
+1. Within the `loom` repository, navigate to `projects/libraries/lens/src/components/icon/available-icons`
+2. Create a new file in the `available-icons` folder, and give it a literal name (e.g., bug icon → bug.tsx)
+    - > **If the icon you are trying to add already exists in ADS**, use the same name as what can be found in the [ADS icon explorer](https://atlassian.design/components/icon/icon-explorer)
+3. After creating your new icon, go to `index.ts` (found at `/lens/src/components/icon/available-icons/index.ts`) and add an export statement for your new icon in there.
+4. When you're finished adding your icon into lens library, and run `pnpm build` → this command will automatically register your new icon to Lens and must be ran before you can view or test your new icon locally
+5. [Follow these steps to run Lens locally.](#running-lens-locally)
+6. Once you have finalized your changes and your code is ready for PR, you need to run `pnpm changeset` from the root directory
+7. After running `changeset`, you should be prompted with "what changeset do you need" within your terminal
+8. Select the files that you have changed, and press enter to proceed until you see a `patch bump` prompt. Make sure to select a severity that accurately reflects the scope of your changes.
+    - For example, a change that merely adds a new component or icon would be considered minor, but a change that adds a new component **and** removes support for another component/the previous version of that variant would be considered a **major** change.
 
-Please surface any urgent pull requests in [#lens-designsystem](https://useloom.slack.com/archives/CJ52CKB27).
+> **Note:** If there's no `changeset` file included in your PR, your changes won't be available to use in the rest of the repo until a changeset is merged. Think of it like merging without deploying.
 
 ### Use conventional commits
 
@@ -72,13 +100,13 @@ Use [conventional commits](https://www.conventionalcommits.org/en/v1.0.0/) messa
 
 ### Upgrading Lens versions
 
-#### loom
+#### Loom
 
 From the root of the [main Loom repo](http://github.com/loomhq/loom)
 
-1. Make your updates in /projects/libraries/lens
+1. Make your updates in `/projects/libraries/lens`
 
-2. You should be able to see the updates reflected in the web app
+2. You should be able to see the updates reflected in your local web app.
 
 3. Run `pnpm changeset` when you are done with your changes
 

package/dist/cjs/icons/banner-vector-up.js

@@ -2,8 +2,22 @@ var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -36,18 +50,18 @@ var React = __toESM(require("react"));
 function SvgBannerVectorUp(props) {
   return /* @__PURE__ */ React.createElement(
     "svg",
-    {
+    __spreadValues({
       xmlns: "http://www.w3.org/2000/svg",
       width: "24",
       height: "11",
       viewBox: "0 0 24 11",
       fill: "none"
-    },
+    }, props),
     /* @__PURE__ */ React.createElement(
       "path",
       {
         d: "M24 11L0 11L9.17157 1.82843C10.7337 0.266331 13.2663 0.26633 14.8284 1.82843L24 11Z",
-        fill: "#F8EEFE"
+        fill: "currentColor"
       }
     )
   );

package/dist/cjs/icons/banner-vector-up.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/icon/available-icons/banner-vector-up.tsx"],
-  "sourcesContent": ["import * as React from 'react';\n\nexport function SvgBannerVectorUp(props: any) {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"24\"\n      height=\"11\"\n      viewBox=\"0 0 24 11\"\n      fill=\"none\"\n    >\n      <path\n        d=\"M24 11L0 11L9.17157 1.82843C10.7337 0.266331 13.2663 0.26633 14.8284 1.82843L24 11Z\"\n        fill=\"#F8EEFE\"\n      />\n    </svg>\n  );\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAAuB;AAEhB,SAAS,kBAAkB,OAAY;AAC5C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAM;AAAA,MACN,OAAM;AAAA,MACN,QAAO;AAAA,MACP,SAAQ;AAAA,MACR,MAAK;AAAA;AAAA,IAEL;AAAA,MAAC;AAAA;AAAA,QACC,GAAE;AAAA,QACF,MAAK;AAAA;AAAA,IACP;AAAA,EACF;AAEJ;",
+  "sourcesContent": ["import * as React from 'react';\n\nexport function SvgBannerVectorUp(props: any) {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"24\"\n      height=\"11\"\n      viewBox=\"0 0 24 11\"\n      fill=\"none\"\n      {...props}\n    >\n      <path\n        d=\"M24 11L0 11L9.17157 1.82843C10.7337 0.266331 13.2663 0.26633 14.8284 1.82843L24 11Z\"\n        fill=\"currentColor\"\n      />\n    </svg>\n  );\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAAuB;AAEhB,SAAS,kBAAkB,OAAY;AAC5C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAM;AAAA,MACN,OAAM;AAAA,MACN,QAAO;AAAA,MACP,SAAQ;AAAA,MACR,MAAK;AAAA,OACD;AAAA,IAEJ;AAAA,MAAC;AAAA;AAAA,QACC,GAAE;AAAA,QACF,MAAK;AAAA;AAAA,IACP;AAAA,EACF;AAEJ;",
   "names": []
 }

package/dist/cjs/icons/cursor.js

@@ -0,0 +1,40 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/icon/available-icons/cursor.tsx
+var cursor_exports = {};
+__export(cursor_exports, {
+  SvgCursor: () => SvgCursor
+});
+module.exports = __toCommonJS(cursor_exports);
+var import_cursor = __toESM(require("@atlaskit/icon-lab/core/cursor"));
+var React = __toESM(require("react"));
+var SvgCursor = () => {
+  return /* @__PURE__ */ React.createElement(import_cursor.default, { label: "", testId: "ads-refreshed-icon" });
+};
+//# sourceMappingURL=cursor.js.map

package/dist/cjs/icons/cursor.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/icon/available-icons/cursor.tsx"],
+  "sourcesContent": ["import CursorIcon from '@atlaskit/icon-lab/core/cursor';\nimport * as React from 'react';\n\nexport const SvgCursor = () => {\n  return <CursorIcon label=\"\" testId=\"ads-refreshed-icon\" />;\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAAuB;AACvB,YAAuB;AAEhB,IAAM,YAAY,MAAM;AAC7B,SAAO,oCAAC,cAAAA,SAAA,EAAW,OAAM,IAAG,QAAO,sBAAqB;AAC1D;",
+  "names": ["CursorIcon"]
+}

package/dist/cjs/icons/editions-icon.js

@@ -0,0 +1,40 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/icon/available-icons/editions-icon.tsx
+var editions_icon_exports = {};
+__export(editions_icon_exports, {
+  SvgEditionsIcon: () => SvgEditionsIcon
+});
+module.exports = __toCommonJS(editions_icon_exports);
+var import_editions = __toESM(require("@atlaskit/icon-lab/core/editions"));
+var React = __toESM(require("react"));
+function SvgEditionsIcon() {
+  return /* @__PURE__ */ React.createElement(import_editions.default, { label: "editions" });
+}
+//# sourceMappingURL=editions-icon.js.map

package/dist/cjs/icons/editions-icon.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/icon/available-icons/editions-icon.tsx"],
+  "sourcesContent": ["import EditionsIcon from '@atlaskit/icon-lab/core/editions';\nimport * as React from 'react';\n\nexport function SvgEditionsIcon() {\n  return <EditionsIcon label=\"editions\" />;\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAAyB;AACzB,YAAuB;AAEhB,SAAS,kBAAkB;AAChC,SAAO,oCAAC,gBAAAA,SAAA,EAAa,OAAM,YAAW;AACxC;",
+  "names": ["EditionsIcon"]
+}

package/dist/cjs/icons/editions.js

@@ -34,7 +34,14 @@ __export(editions_exports, {
 module.exports = __toCommonJS(editions_exports);
 var import_editions = __toESM(require("@atlaskit/icon-lab/core/editions"));
 var React = __toESM(require("react"));
-function SvgEditions() {
-  return /* @__PURE__ */ React.createElement(import_editions.default, { label: "", testId: "ads-refreshed-icon" });
+function SvgEditions(props) {
+  return /* @__PURE__ */ React.createElement(
+    import_editions.default,
+    {
+      label: "",
+      testId: "ads-refreshed-icon",
+      color: props.color ? props.color : "currentColor"
+    }
+  );
 }
 //# sourceMappingURL=editions.js.map

package/dist/cjs/icons/editions.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/icon/available-icons/editions.tsx"],
-  "sourcesContent": ["import EditionsIcon from '@atlaskit/icon-lab/core/editions';\nimport * as React from 'react';\n\nexport function SvgEditions() {\n  return <EditionsIcon label=\"\" testId=\"ads-refreshed-icon\" />;\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAAyB;AACzB,YAAuB;AAEhB,SAAS,cAAc;AAC5B,SAAO,oCAAC,gBAAAA,SAAA,EAAa,OAAM,IAAG,QAAO,sBAAqB;AAC5D;",
+  "sourcesContent": ["import EditionsIcon from '@atlaskit/icon-lab/core/editions';\nimport * as React from 'react';\n\nexport function SvgEditions(props) {\n  return (\n    <EditionsIcon\n      label=\"\"\n      testId=\"ads-refreshed-icon\"\n      color={props.color ? props.color : 'currentColor'}\n    />\n  );\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAAyB;AACzB,YAAuB;AAEhB,SAAS,YAAY,OAAO;AACjC,SACE;AAAA,IAAC,gBAAAA;AAAA,IAAA;AAAA,MACC,OAAM;AAAA,MACN,QAAO;AAAA,MACP,OAAO,MAAM,QAAQ,MAAM,QAAQ;AAAA;AAAA,EACrC;AAEJ;",
   "names": ["EditionsIcon"]
 }