@constructor-io/constructorio-ui-autocomplete - npm Package Compare versions

Comparing version 1.2.1 to 1.2.2

lib/cjs/constants.js

@@ -128,3 +128,3 @@ "use strict";
 \`
-import 'node_modules/@constructor-io/constructorio-ui-autocomplete/lib/mjs/components/Autocomplete/Autocomplete.css';
+import '@constructor-io/constructorio-ui-autocomplete/styles.css';
 \`
@@ -134,3 +134,3 @@
 
-- 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
@@ -137,0 +137,0 @@ - These starter styles can be used as a foundation to build on top of, or just as a reference for you to replace completely.

lib/mjs/constants.js

@@ -124,3 +124,3 @@ // Autocomplete key index
 \`
-import 'node_modules/@constructor-io/constructorio-ui-autocomplete/lib/mjs/components/Autocomplete/Autocomplete.css';
+import '@constructor-io/constructorio-ui-autocomplete/styles.css';
 \`
@@ -130,3 +130,3 @@
 
-- 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
@@ -133,0 +133,0 @@ - These starter styles can be used as a foundation to build on top of, or just as a reference for you to replace completely.

lib/types/constants.d.ts

@@ -25,2 +25,2 @@ import { AutocompleteSubmitEvent } from './types';
 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.json

 {
   "name": "@constructor-io/constructorio-ui-autocomplete",
-  "version": "1.2.1",
+  "version": "1.2.2",
   "description": "Constructor.io Autocomplete UI library for web applications",
@@ -8,2 +8,3 @@ "main": "lib/cjs/index.js",
   "exports": {
+    "./styles.css": "./lib/styles.css",
     ".": {
@@ -18,3 +19,3 @@ "import": "./lib/mjs/index.js",
     "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",
@@ -29,3 +30,3 @@ "dev": "storybook dev -p 6006",
     "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"
+    "compile": "rm -rf lib && tsc -p tsconfig.json && tsc -p tsconfig-cjs.json && npm run copy-styles"
   },
@@ -64,3 +65,2 @@ "author": "constructor.io",
     "@typescript-eslint/parser": "^5.38.0",
-    "copyfiles": "^2.4.1",
     "downshift": "^7.0.5",
@@ -67,0 +67,0 @@ "eslint": "^8.23.1",

README.md

@@ -109,3 +109,3 @@ # Constructor.io Autocomplete UI Library
 ```js
-import 'node_modules/@constructor-io/constructorio-ui-autocomplete/lib/mjs/components/Autocomplete/Autocomplete.css';
+import '@constructor-io/constructorio-ui-autocomplete/styles.css';
 ```
@@ -116,3 +116,3 @@
  - 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.
@@ -119,0 +119,0 @@ - These starter styles are intended to be extended by layering in your own css rules

No alert changes

Improved metrics

Dev dependency count

33

decreased by-2.94%

Worsened metrics

Total package byte prevSize

150549

decreased by-1.4%

Number of package files

99

decreased by-1%

Lines of code

1930

decreased by-4.69%

No dependency changes