@doist/reactist 27.2.1 → 27.3.0

package/README.md

@@ -203,58 +203,36 @@ When you open a GitHub PR, you'll notice the "UI Review" and "UI Tests" CI steps
 
 # Releasing
 
-A new version of reactist is published both on npm and GitHub Package Registry whenever a new release on GitHub is created.
-
-## Before merging your changes
-
-In the GitHub PR that contains your new changes, make sure that you also include the following:
-
-1. Add tests for bugs and new feature
-
-2. Update relevant docs (storybooks, readme)
-
-3. Execute:
-
-```sh
-npm run validate
-```
-
-and make sure no errors nor warnings are shown
-
-4. Describe your changes in [`CHANGELOG.md`](CHANGELOG.md)
-
-5. Bump the version in [`package.json`](package.json) and [`package-lock.json`](package-lock.json) by running:
-
-```sh
-npm --no-git-tag-version version <major|minor|patch>
-```
-
-[ref](https://docs.npmjs.com/cli/v6/commands/npm-version)
-
-Note that the steps above are also documented in the [PR template](.github/PULL_REQUEST_TEMPLATE.md) that you will be prompted with whenever you open a new reactist GitHub PR.
-
-## After merging your changes
-
-Once your changes have been merged to `main`, create a new GitHub release:
-
-1. Visit https://github.com/Doist/reactist/releases/new
-
-2. In the "Choose a tag" dropdown, type the new release version (i.e. vX.Y.Z) and select "Create new tag: vX.Y.Z on publish"
-
-3. In the "Release title" field, type the new release version (i.e. vX.Y.Z)
-
-4. In the "Describe the release" box, paste the same content you added to the [`CHANGELOG.md`](CHANGELOG.md), but without the title header
-
-5. Make sure the "Set as the latest release" checkbox is checked
-
-6. Click "Publish release"
-
-7. Visit https://github.com/Doist/reactist/actions
-
-8. Make sure that a new GitHub action is now running (this will automatically perform all the necessary steps to publish the package)
-
-9. Once the action is complete, check https://npmjs.com/package/@doist/reactist and verify that there's a new public release
-
-Finally, be sure to update both [todoist-web](https://github.com/Doist/todoist-web) and [twist-web](https://github.com/Doist/twist-web) to use the new reactist version you just published.
-
-The storybook hosted on GitHub pages will be automatically updated on each push to `main`. Should there be a problem, try running the action manually from the [Actions settings](https://github.com/Doist/reactist/actions).
+This project uses [release-please](https://github.com/googleapis/release-please) to automate version management and package publishing.
+
+## How it works
+
+1. Make your changes using [Conventional Commits](https://www.conventionalcommits.org/):
+
+    - `feat:` for new features (minor version bump)
+    - `fix:` for bug fixes (patch version bump)
+    - `style:` for code style changes
+    - `perf:` for performance improvements
+    - `refactor:` for refactoring code
+    - `test:` for adding/updating tests
+    - `build:` for build/dependency changes
+    - `docs:` for documentation changes
+    - `ci:` for CI changes
+    - `revert:` for reverting previous commits
+    - `feat!:` or `fix!:` for breaking changes (major version bump)
+    - `chore:` for maintenance tasks (NOTE: these are not included in the changelog)
+
+2. When commits are pushed to `main`:
+
+    - Release-please automatically creates/updates a release PR
+    - The PR includes version bump and changelog updates
+    - Review the PR and merge when ready
+
+3. After merging the release PR:
+    - A new GitHub release is automatically created
+    - A new tag is created
+    - The `publish` workflow is triggered
+    - The package is published to npm and GitHub Packages
+    - Storybook documentation is automatically updated
+
+The storybook hosted on GitHub pages will be automatically updated on each push to `main`. If there's a problem, try running the action manually from the [Actions settings](https://github.com/Doist/reactist/actions).

package/dist/reactist.cjs.development.js

@@ -1905,7 +1905,9 @@ function PasswordHiddenIcon(props) {
 
 var modules_540a88ff = {"container":"d5ff04da","auxiliaryLabel":"_8d2b52f1","bordered":"_49c37b27","error":"_922ff337","primaryLabel":"af23c791","loadingIcon":"_75edcef6"};
 
-const MAX_LENGTH_THRESHOLD = 10;
+// See: https://twist.com/a/1585/ch/765851/t/6664583/c/93631846 for latest spec
+
+const MAX_LENGTH_THRESHOLD = 0;
 
 function fieldToneToTextTone(tone) {
   return tone === 'error' ? 'danger' : tone === 'success' ? 'positive' : 'secondary';
@@ -1959,6 +1961,10 @@ function validateInputLength({
     tone: isNearMaxLength ? 'error' : 'neutral'
   };
 }
+/**
+ * BaseField is a base component that provides a consistent structure for form fields.
+ */
+
 
 function BaseField({
   variant = 'default',
@@ -1973,7 +1979,8 @@ function BaseField({
   maxLength,
   hidden,
   'aria-describedby': originalAriaDescribedBy,
-  id: originalId
+  id: originalId,
+  characterCountPosition = 'below'
 }) {
   const id = useId(originalId);
   const messageId = useId();
@@ -1984,6 +1991,16 @@ function BaseField({
   const [characterCount, setCharacterCount] = React__namespace.useState(inputLength.count);
   const [characterCountTone, setCharacterCountTone] = React__namespace.useState(inputLength.tone);
   const ariaDescribedBy = originalAriaDescribedBy != null ? originalAriaDescribedBy : message ? messageId : null;
+  /**
+   * Renders the character count element.
+   * If the characterCountPosition value is 'hidden', it returns null.
+   */
+
+  function renderCharacterCount() {
+    return characterCountPosition !== 'hidden' ? /*#__PURE__*/React__namespace.createElement(FieldCharacterCount, {
+      tone: characterCountTone
+    }, characterCount) : null;
+  }
 
   const childrenProps = _objectSpread2(_objectSpread2({
     id,
@@ -2004,8 +2021,10 @@ function BaseField({
       });
       setCharacterCount(inputLength.count);
       setCharacterCountTone(inputLength.tone);
-    }
+    },
 
+    // If the character count is inline, we pass it as a prop to the children element so it can be rendered inline
+    characterCountElement: characterCountPosition === 'inline' ? renderCharacterCount() : null
   });
 
   React__namespace.useEffect(function updateCharacterCountOnPropChange() {
@@ -2049,17 +2068,15 @@ function BaseField({
   }, /*#__PURE__*/React__namespace.createElement(FieldMessage, {
     id: messageId,
     tone: tone
-  }, message)) : null, characterCount ? /*#__PURE__*/React__namespace.createElement(Column, {
+  }, message)) : null, characterCountPosition === 'below' ? /*#__PURE__*/React__namespace.createElement(Column, {
     width: "content"
-  }, /*#__PURE__*/React__namespace.createElement(FieldCharacterCount, {
-    tone: characterCountTone
-  }, characterCount)) : null) : null);
+  }, renderCharacterCount()) : null) : null);
 }
 
-var modules_aaf25250 = {"inputWrapper":"f2de4e8d","readOnly":"ee26e40c","bordered":"_3afb1a56","error":"f3ff9f57","slot":"_3eb7b0ef"};
+var modules_aaf25250 = {"inputWrapper":"c8f65b3b","readOnly":"_326f2644","bordered":"_5252fd3d","error":"_0141b7ac","slot":"b79b851f"};
 
-const _excluded$d = ["variant", "id", "label", "value", "auxiliaryLabel", "message", "tone", "type", "maxWidth", "maxLength", "hidden", "aria-describedby", "startSlot", "endSlot", "onChange"],
-      _excluded2$4 = ["onChange"];
+const _excluded$d = ["variant", "id", "label", "value", "auxiliaryLabel", "message", "tone", "type", "maxWidth", "maxLength", "hidden", "aria-describedby", "startSlot", "endSlot", "onChange", "characterCountPosition"],
+      _excluded2$4 = ["onChange", "characterCountElement"];
 const TextField = /*#__PURE__*/React__namespace.forwardRef(function TextField(_ref, ref) {
   let {
     variant = 'default',
@@ -2076,7 +2093,8 @@ const TextField = /*#__PURE__*/React__namespace.forwardRef(function TextField(_r
     'aria-describedby': ariaDescribedBy,
     startSlot,
     endSlot,
-    onChange: originalOnChange
+    onChange: originalOnChange,
+    characterCountPosition = 'below'
   } = _ref,
       props = _objectWithoutProperties(_ref, _excluded$d);
 
@@ -2101,10 +2119,12 @@ const TextField = /*#__PURE__*/React__namespace.forwardRef(function TextField(_r
     maxWidth: maxWidth,
     maxLength: maxLength,
     hidden: hidden,
-    "aria-describedby": ariaDescribedBy
+    "aria-describedby": ariaDescribedBy,
+    characterCountPosition: characterCountPosition
   }, _ref2 => {
     let {
-      onChange
+      onChange,
+      characterCountElement
     } = _ref2,
         extraProps = _objectWithoutProperties(_ref2, _excluded2$4);
 
@@ -2126,12 +2146,12 @@ const TextField = /*#__PURE__*/React__namespace.forwardRef(function TextField(_r
         originalOnChange == null ? void 0 : originalOnChange(event);
         onChange == null ? void 0 : onChange(event);
       }
-    })), endSlot ? /*#__PURE__*/React__namespace.createElement(Box$1, {
+    })), endSlot || characterCountElement ? /*#__PURE__*/React__namespace.createElement(Box$1, {
       className: modules_aaf25250.slot,
       display: "flex",
       marginRight: variant === 'bordered' ? '-xsmall' : 'xsmall',
       marginLeft: variant === 'bordered' ? 'xsmall' : '-xsmall'
-    }, endSlot) : null);
+    }, characterCountElement, endSlot) : null);
   });
 });