@constructor-io/constructorio-ui-autocomplete 1.2.1 → 1.2.3

package/README.md

@@ -17,7 +17,7 @@ There are two main methods for consuming this UI Library in a React project:
 The `CioAutocomplete` component handles state management, data fetching, and rendering logic.
 
 ```jsx
-import { CioAutocomplete } from 'constructorio-ui-autocomplete';
+import { CioAutocomplete } from '@constructor-io/constructorio-ui-autocomplete';
 
 function YourComponent() {
   return (
@@ -32,7 +32,7 @@ function YourComponent() {
 The `useCioAutocomplete` hook handles state management and data fetching, but leaves rendering logic up to you.
 
 ```jsx
-import { useCioAutocomplete } from 'constructorio-ui-autocomplete';
+import { useCioAutocomplete } from '@constructor-io/constructorio-ui-autocomplete';
 
 function YourComponent() {
   const {
@@ -106,13 +106,13 @@ By default, importing react components or hooks from this library does not pull
 If you wish to use some starter styles from this library, add an import statement similar to the example import statement below:
 
 ```js
-import 'node_modules/@constructor-io/constructorio-ui-autocomplete/lib/mjs/components/Autocomplete/Autocomplete.css';
+import '@constructor-io/constructorio-ui-autocomplete/styles.css';
 ```
 
 > Note: the path and syntax in this example may change slightly depending on your module bundling strategy
 
  - These starter styles can be used as a foundation to build on top of, or just as a reference for you to replace completely.
- - To opt out of all default styling, do not import the `Autocomplete.css` stylesheet.
+ - To opt out of all default styling, do not import the `styles.css` stylesheet.
  - All starter styles in this library are scoped within the `.cio-autocomplete` css selector.
  - These starter styles are intended to be extended by layering in your own css rules
 - If you like, you can override the container's className like so:
@@ -120,6 +120,23 @@ import 'node_modules/@constructor-io/constructorio-ui-autocomplete/lib/mjs/compo
  - If you like, you can pass additional className(s) of your choosing like so:
 `autocompleteClassName='cio-autocomplete custom-autocomplete-container'`
 
+## Troubleshooting
+
+### Known Issues
+
+**ESLint**
+
+There is a known issue with ESLint where it fails to resolve the paths exposed in the `exports` statement of NPM packages. If you are receiving the following error, you can safely disable ESLint using `// eslint-disable-line` for that line.
+
+`Unable to resolve path to module '@constructor-io/constructorio-ui-autocomplete/styles.css'`
+
+Relevant open issues:
+
+[Issue 1868](https://github.com/import-js/eslint-plugin-import/issues/1868)
+
+[Issue 1810](https://github.com/import-js/eslint-plugin-import/issues/1810)
+
+
 ## Local Development
 
 ### Development scripts

package/lib/cjs/constants.js

@@ -125,12 +125,12 @@ By default, importing react components or hooks from this library does not pull
 If you wish to use some starter styles from this library, add an import statement similar to the example import statement below:
 
 \`
-import 'node_modules/@constructor-io/constructorio-ui-autocomplete/lib/mjs/components/Autocomplete/Autocomplete.css';
+import '@constructor-io/constructorio-ui-autocomplete/styles.css';
 \`
 
 <i></i>
 
-- To opt out of all default styling, do not import the \`Autocomplete.css\` stylesheet.
+- To opt out of all default styling, do not import the \`styles.css\` stylesheet.
 - The path and syntax in the example above may change depending on your module bundling strategy
 - These starter styles can be used as a foundation to build on top of, or just as a reference for you to replace completely.
 - All starter styles in this library are scoped within the \`.cio-autocomplete\` css selector.

package/lib/mjs/constants.js

@@ -121,12 +121,12 @@ By default, importing react components or hooks from this library does not pull
 If you wish to use some starter styles from this library, add an import statement similar to the example import statement below:
 
 \`
-import 'node_modules/@constructor-io/constructorio-ui-autocomplete/lib/mjs/components/Autocomplete/Autocomplete.css';
+import '@constructor-io/constructorio-ui-autocomplete/styles.css';
 \`
 
 <i></i>
 
-- To opt out of all default styling, do not import the \`Autocomplete.css\` stylesheet.
+- To opt out of all default styling, do not import the \`styles.css\` stylesheet.
 - The path and syntax in the example above may change depending on your module bundling strategy
 - These starter styles can be used as a foundation to build on top of, or just as a reference for you to replace completely.
 - All starter styles in this library are scoped within the \`.cio-autocomplete\` css selector.

package/lib/types/constants.d.ts

@@ -22,4 +22,4 @@ export declare const onSubmitDefault: (submitEvent: AutocompleteSubmitEvent) =>
 export declare const zeroStateSectionsDescription = "Use `zeroStateSections` to show suggestions after a user applies focus to the search input field and before they start typing a query";
 export declare const openOnFocusDescription = "Use `openOnFocus: false` to show suggestions after a user clears their query, but not when they initially apply focus to the search input field";
 export declare const multipleSectionsDescription = "Use as many different `recommendations` and `custom` sections as you'd like and in whatever order you would like!";
-export declare const customStylesDescription = "\nBy default, importing react components or hooks from this library does not pull any css into your project.\n\nIf you wish to use some starter styles from this library, add an import statement similar to the example import statement below:\n\n`\nimport 'node_modules/@constructor-io/constructorio-ui-autocomplete/lib/mjs/components/Autocomplete/Autocomplete.css';\n`\n\n<i></i>\n\n- To opt out of all default styling, do not import the `Autocomplete.css` stylesheet.\n- The path and syntax in the example above may change depending on your module bundling strategy\n- These starter styles can be used as a foundation to build on top of, or just as a reference for you to replace completely.\n- All starter styles in this library are scoped within the `.cio-autocomplete` css selector.\n- These starter styles are intended to be extended by layering in your own css rules\n- If you like, you can override the container's className like so:\n`autocompleteClassName='custom-autocomplete-container'`\n- If you like, you can pass additional className(s) of your choosing like so:\n`autocompleteClassName='cio-autocomplete custom-autocomplete-container'`\n\n\n```css\n/* Custom Style Sheet */\n.cio-autocomplete.custom-autocomplete-styles form {\n  height: 44px;\n  width: 600px;\n  border-radius: 8px;\n  background-color: rgb(247, 247, 247);\n}\n\n.cio-autocomplete.custom-autocomplete-styles .cio-input {\n  font-weight: bold;\n}\n\n.cio-autocomplete.custom-autocomplete-styles .cio-form button {\n  width: 44px;\n}\n\n.cio-autocomplete.custom-autocomplete-styles .cio-clear-btn {\n  right: 24px;\n}\n\n.cio-autocomplete.custom-autocomplete-styles .cio-sectionName {\n  margin: 5px 3px;\n}\n\n.cio-autocomplete.custom-autocomplete-styles .cio-results {\n  width: 620px;\n  max-height: 334px;\n  overflow: hidden;\n  border-radius: 0px 0px 8px 8px;\n  color: rgb(51, 51, 51);\n}\n\n.cio-autocomplete.custom-autocomplete-styles .Products p {\n  padding: 5px 5px 0;\n}\n```\n";
+export declare const customStylesDescription = "\nBy default, importing react components or hooks from this library does not pull any css into your project.\n\nIf you wish to use some starter styles from this library, add an import statement similar to the example import statement below:\n\n`\nimport '@constructor-io/constructorio-ui-autocomplete/styles.css';\n`\n\n<i></i>\n\n- To opt out of all default styling, do not import the `styles.css` stylesheet.\n- The path and syntax in the example above may change depending on your module bundling strategy\n- These starter styles can be used as a foundation to build on top of, or just as a reference for you to replace completely.\n- All starter styles in this library are scoped within the `.cio-autocomplete` css selector.\n- These starter styles are intended to be extended by layering in your own css rules\n- If you like, you can override the container's className like so:\n`autocompleteClassName='custom-autocomplete-container'`\n- If you like, you can pass additional className(s) of your choosing like so:\n`autocompleteClassName='cio-autocomplete custom-autocomplete-container'`\n\n\n```css\n/* Custom Style Sheet */\n.cio-autocomplete.custom-autocomplete-styles form {\n  height: 44px;\n  width: 600px;\n  border-radius: 8px;\n  background-color: rgb(247, 247, 247);\n}\n\n.cio-autocomplete.custom-autocomplete-styles .cio-input {\n  font-weight: bold;\n}\n\n.cio-autocomplete.custom-autocomplete-styles .cio-form button {\n  width: 44px;\n}\n\n.cio-autocomplete.custom-autocomplete-styles .cio-clear-btn {\n  right: 24px;\n}\n\n.cio-autocomplete.custom-autocomplete-styles .cio-sectionName {\n  margin: 5px 3px;\n}\n\n.cio-autocomplete.custom-autocomplete-styles .cio-results {\n  width: 620px;\n  max-height: 334px;\n  overflow: hidden;\n  border-radius: 0px 0px 8px 8px;\n  color: rgb(51, 51, 51);\n}\n\n.cio-autocomplete.custom-autocomplete-styles .Products p {\n  padding: 5px 5px 0;\n}\n```\n";

package/package.json

@@ -1,10 +1,14 @@
 {
   "name": "@constructor-io/constructorio-ui-autocomplete",
-  "version": "1.2.1",
+  "version": "1.2.3",
   "description": "Constructor.io Autocomplete UI library for web applications",
   "main": "lib/cjs/index.js",
   "module": "lib/mjs/index.js",
   "exports": {
+    "./styles.css": {
+      "import": "./lib/styles.css",
+      "require": "./lib/styles.css"
+    },
     ".": {
       "import": "./lib/mjs/index.js",
       "require": "./lib/cjs/index.js"
@@ -14,7 +18,7 @@
   "types": "lib/types/index.d.ts",
   "scripts": {
     "lint": "eslint src --ext js,ts,jsx,tsx",
-    "copy-files": "copyfiles -u 1 src/**/*.css lib/cjs && copyfiles -u 1 src/**/*.css lib/mjs",
+    "copy-styles": "cp src/styles.css lib/styles.css",
     "prepare": "husky install",
     "dev": "storybook dev -p 6006",
     "storybook:ci": "storybook dev --ci --quiet -p 6006",
@@ -23,8 +27,9 @@
     "test-storybook:ci": "start-server-and-test storybook:ci http://localhost:6006 test-storybook",
     "build-storybook": "storybook build -o 'docs'",
     "serve-built-storybook": "npx http-server docs",
-    "version": "npm run build-storybook && git add -u ./docs && git add ./docs/* && npm run compile",
-    "compile": "rm -rf lib && tsc -p tsconfig.json && tsc -p tsconfig-cjs.json && npm run copy-files"
+    "verify-node-version": "chmod +x ./scripts/verify-node-version.sh && ./scripts/verify-node-version.sh",
+    "version": "npm run verify-node-version && npm run build-storybook && git add -u ./docs && git add ./docs/* && npm run compile",
+    "compile": "rm -rf lib && tsc -p tsconfig.json && tsc -p tsconfig-cjs.json && npm run copy-styles"
   },
   "author": "constructor.io",
   "license": "MIT",
@@ -58,7 +63,6 @@
     "@types/react-dom": "^18.0.6",
     "@typescript-eslint/eslint-plugin": "^5.38.0",
     "@typescript-eslint/parser": "^5.38.0",
-    "copyfiles": "^2.4.1",
     "downshift": "^7.0.5",
     "eslint": "^8.23.1",
     "eslint-config-airbnb": "^19.0.4",

package/lib/mjs/components/Autocomplete/Autocomplete.css

@@ -1,110 +0,0 @@
-/* Autosuggest Container */
-.cio-autocomplete {
-  position: relative;
-  height: 2rem;
-  padding: 20px;
-  font-family: Arial, Helvetica, sans-serif;
-}
-
-/* Autosuggest Form */
-.cio-autocomplete .cio-form {
-  position: relative;
-  height: 100%;
-  width: 24rem;
-}
-
-.cio-autocomplete .cio-input {
-  width: 100%;
-  height: 100%;
-  border: 1px solid gray;
-  padding: 0 10px;
-  border-radius: 3px;
-  font-size: 1rem;
-}
-
-.cio-autocomplete .cio-submit-btn,
-.cio-autocomplete .cio-clear-btn {
-  position: absolute;
-  top: 1px;
-  bottom: -1px;
-  right: -21px;
-  cursor: pointer;
-}
-
-.cio-autocomplete button:disabled {
-  cursor: not-allowed;
-}
-
-.cio-autocomplete .cio-submit-btn {
-  right: -21px;
-}
-
-.cio-autocomplete .cio-clear-btn {
-  right: 10px;
-}
-
-.cio-autocomplete .cio-icon {
-  display: flex;
-  justify-content: center;
-}
-
-/* Autosuggest Results */
-.cio-autocomplete .cio-results {
-  position: absolute;
-  background-color: white;
-  gap: 20px;
-  padding-left: 0px;
-  list-style: none;
-  display: flex;
-  flex-direction: row;
-  z-index: 1000;
-  margin-top: 5px;
-}
-
-.cio-autocomplete .cio-sectionName {
-  margin: 15px 0;
-  font-size: 1rem;
-}
-
-.cio-autocomplete .cio-section-items {
-  padding: 0;
-}
-
-.cio-autocomplete .cio-item-SearchSuggestions {
-  flex-direction: column;
-  min-width: 160px;
-}
-
-.cio-autocomplete .cio-item {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  cursor: pointer;
-  list-style: none;
-  padding: 5px;
-  border-bottom: 3px solid transparent;
-}
-
-.cio-autocomplete .cio-item[aria-selected='true'] {
-  background-color: hsl(0, 0%, 90%);
-  border-radius: 4px;
-}
-
-.cio-autocomplete .Products .cio-item {
-  display: inline-flex;
-  align-items: center;
-  width: 25%;
-  height: 140px;
-  padding: 5px 0;
-}
-
-.cio-autocomplete .cio-item p {
-  margin: 0;
-  overflow: hidden;
-}
-
-.cio-autocomplete .cio-item img {
-  width: 100%;
-  max-width: 100px;
-  max-height: 100px;
-}