bundle outputs properly, add stretch labels support

README.md

@@ -80,7 +80,12 @@ All props are optional. You should either use `items` or `rawObject`
 - options `{ object }`:
   - idField `{ string }`: If defined adds fixed and immutable key/value. If that field defined already defined it uses existing one.
   - validateKey `{ RegExp }`: Regular expression to validate your keys
-  - theme `{ 'light' | 'dark' }`: You can choose between `light` and `dark` themes
+  - theme `{ 'light' | 'dark' }`: You can choose between `light` and `dark` themes  
+  - stretchLabels `{ bool, default: true }` sets label widths to max one
+
+    ![light theme](https://imagemarker.s3.eu-central-1.amazonaws.com/kveditor/light-stretch.png)
+
+    ![dark theme](https://imagemarker.s3.eu-central-1.amazonaws.com/kveditor/dark-stretch.png)
 
 ## License
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@imagemarker/kveditor",
-  "version": "0.5.1",
+  "version": "0.6.0",
   "description": "React key/value component library",
   "repository": "github:imagemarker/kveditor",
   "keywords": [
@@ -13,9 +13,9 @@
   ],
   "license": "MIT",
   "types": "dist/index.d.ts",
-  "main": "dist/index.js",
-  "module": "dist/index.js",
-  "browser": "dist/index.js",
+  "main": "dist/cjs/index.js",
+  "module": "dist/es/index.js",
+  "browser": "dist/umd/index.js",
   "files": [
     "dist",
     "package.json",
@@ -37,32 +37,35 @@
     "@rollup/plugin-html": "^0.2.0",
     "@rollup/plugin-node-resolve": "^10.0.0",
     "@rollup/plugin-replace": "^2.3.4",
-    "@rollup/plugin-typescript": "^6.1.0",
     "@testing-library/jest-dom": "^5.11.5",
     "@testing-library/react": "^11.1.0",
     "@types/jest": "^26.0.15",
     "@types/react": "^16.9.55",
     "@types/react-dom": "^16.9.9",
     "@typescript-eslint/eslint-plugin": "^4.6.0",
     "@typescript-eslint/parser": "^4.6.0",
+    "@wessberg/rollup-plugin-ts": "^1.3.8",
     "babel-eslint": "^10.1.0",
+    "canvas": "^2.6.1",
     "eslint": "^7.12.1",
     "eslint-config-prettier": "^6.15.0",
     "eslint-plugin-jest": "^24.1.0",
     "eslint-plugin-prettier": "^3.1.4",
     "eslint-plugin-react": "^7.21.5",
     "eslint-plugin-react-hooks": "^4.2.0",
-    "jest": "^26.6.1",
+    "jest": "^26.6.3",
     "node-sass": "^4.14.1",
     "npm-watch": "^0.7.0",
     "prettier": "^2.1.2",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
     "react-test-renderer": "^17.0.1",
     "rollup": "^2.32.1",
     "rollup-plugin-copy": "^3.3.0",
     "rollup-plugin-postcss": "^3.1.8",
     "rollup-plugin-terser": "^7.0.2",
     "serve": "^11.3.2",
-    "ts-jest": "^26.4.3",
+    "ts-jest": "^26.4.4",
     "tslib": "^2.0.3",
     "typescript": "^4.0.5"
   },
@@ -71,6 +74,7 @@
     "react-dom": "^17.0.1"
   },
   "dependencies": {
+    "@imagemarker/use-text-width": "^0.4.0",
     "nanoid": "^3.1.16"
   },
   "watch": {

rollup.config.js

@@ -1,30 +1,49 @@
 import { nodeResolve } from '@rollup/plugin-node-resolve';
 import replace from '@rollup/plugin-replace';
-import typescript from '@rollup/plugin-typescript';
 import postcss from 'rollup-plugin-postcss';
 import { terser } from "rollup-plugin-terser";
 import copy from 'rollup-plugin-copy';
+import ts from "@wessberg/rollup-plugin-ts";
 
 const production = process.env.NODE_ENV === 'production';
 
 export default {
   input: './src/index.ts',
-  output: {
-    dir: 'dist',
-    name: 'KVEditor',
-    sourcemap: !production,
-    format: 'es',
-    globals: {
-      'react': 'React',
-      'react-dom': 'ReactDOM',
+  output: [
+    {
+      file: 'dist/cjs/index.js',
+      sourcemap: !production,
+      format: 'cjs',
+      globals: {
+        'react': 'React',
+        'react-dom': 'ReactDOM',
+      },
     },
-  },
+    {
+      file: 'dist/es/index.js',
+      sourcemap: !production,
+      format: 'es',
+      globals: {
+        'react': 'React',
+        'react-dom': 'ReactDOM',
+      },
+    },
+    {
+      file: 'dist/umd/index.js',
+      sourcemap: !production,
+      format: 'es',
+      globals: {
+        'react': 'React',
+        'react-dom': 'ReactDOM',
+      },
+    }
+  ],
   external: ['react', 'react-dom'],
   plugins: [
     replace({
       'process.env.NODE_ENV': JSON.stringify(process.env.NODE)
     }),
-    typescript(),
+    ts(),
     copy({
       targets: [
         { src: 'icons/*', dest: 'dist/icons' }
@@ -35,7 +54,7 @@ export default {
       use: ['sass']
     }),
     nodeResolve({
-      browser: true
+      preferBuiltins: true
     }),
     production ? terser() : null
   ]

rollup.examples.config.js

@@ -1,9 +1,9 @@
 import { nodeResolve } from '@rollup/plugin-node-resolve';
 import replace from '@rollup/plugin-replace';
-import typescript from '@rollup/plugin-typescript';
 import html from '@rollup/plugin-html';
 import postcss from 'rollup-plugin-postcss';
 import copy from 'rollup-plugin-copy';
+import ts from "@wessberg/rollup-plugin-ts";
 
 const template = `
 <!DOCTYPE html>
@@ -45,7 +45,7 @@ export default {
     replace({
       'process.env.NODE_ENV': JSON.stringify(process.env.NODE)
     }),
-    typescript(),
+    ts(),
     postcss({
       extract: false,
       use: ['sass']

src/components/KVEditor/KVEditor.tsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useReducer } from 'react';
+import { useTextWidth } from '@imagemarker/use-text-width';
 import { KVEditConfigType, KVEditorType, KVItemType } from './KVEditor.types';
 import KVReducer from '../../hooks/KVReducer';
 import KVItemEdit from '../KVItemEdit/KVItemEdit';
@@ -9,10 +10,12 @@ import './styles.scss';
 const KVEditor: KVEditorType = ({ items, rawObject, options = {}, onChange }): React.ReactElement => {
   const defaults = {
     theme: 'light',
-    validateKey: new RegExp(/^[a-zA-Z][a-zA-Z0-9]*$/)
+    validateKey: new RegExp(/^[a-zA-Z][a-zA-Z0-9]*$/),
+    stretchLabels: true
   };
   const editorOptions: KVEditConfigType = { ...defaults, ...options };
   const [state, dispatch] = useReducer(KVReducer, { items, rawObject, editorOptions }, init);
+  const labelWidth = useTextWidth({ text: state.keys, font: '600 14px "Source Sans Pro", sans-serif' });
 
   useEffect(() => {
     onChange && onChange(state.items);
@@ -21,7 +24,13 @@ const KVEditor: KVEditorType = ({ items, rawObject, options = {}, onChange }): R
   return (
     <div className={`kv-editor ${options.theme || ''}`}>
       {state.items.map((item: KVItemType) => (
-        <KVItemView key={item.key} item={item} dispatch={dispatch} editorOptions={editorOptions} />
+        <KVItemView
+          key={item.key}
+          item={item}
+          dispatch={dispatch}
+          editorOptions={editorOptions}
+          labelWidth={labelWidth}
+        />
       ))}
       <KVItemEdit keys={state.keys} dispatch={dispatch} editorOptions={editorOptions} />
     </div>

src/components/KVEditor/KVEditor.types.ts

@@ -4,6 +4,7 @@ export interface KVEditConfigType {
   validateKey?: RegExp;
   theme?: string;
   idField?: string;
+  stretchLabels?: boolean;
 }
 export interface KVEditorPropsType {
   items?: KVItemType[];

src/components/KVItemView/KVItemView.tsx

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import { KVItemViewType } from './KVItemView.types';
 import './styles.scss';
 
-const KVItemView: KVItemViewType = ({ item, dispatch, editorOptions }) => {
+const KVItemView: KVItemViewType = ({ item, dispatch, editorOptions, labelWidth }) => {
   const { key, value, options = {} } = item;
   const [currentValue, setCurrentValue] = useState(value || '');
   const [isEditing, setEditing] = useState(false);
@@ -22,11 +22,15 @@ const KVItemView: KVItemViewType = ({ item, dispatch, editorOptions }) => {
     setEditing(false);
   };
 
+  const labelWidthStyle = editorOptions.stretchLabels ? { width: `${labelWidth}px` } : {};
+
   if (key === editorOptions.idField) {
     return (
       <div className={`kv-item-view ${editorOptions.theme}`}>
         <div className="key-value key-id">
-          <div className="key">{key}</div>
+          <div className="key" style={labelWidthStyle}>
+            {key}
+          </div>
           <input className="value" name="value" type="text" value={currentValue} disabled={true} />
         </div>
       </div>
@@ -36,7 +40,9 @@ const KVItemView: KVItemViewType = ({ item, dispatch, editorOptions }) => {
   return (
     <form onSubmit={onSubmit} className={`kv-item-view ${editorOptions.theme}`}>
       <div className={`${options.immutable ? 'key-value key-disabled' : 'key-value'}`}>
-        <div className="key">{key}</div>
+        <div className="key" style={labelWidthStyle}>
+          {key}
+        </div>
         <input
           className="value"
           name="value"

src/components/KVItemView/KVItemView.types.ts

@@ -6,6 +6,7 @@ export interface KVItemViewPropsType {
   dispatch: Dispatch<ReducerAction<Reducer<KVState, KVAction>>>;
   item: KVItemType;
   editorOptions: KVEditConfigType;
+  labelWidth?: number;
 }
 export interface KVItemViewType {
   (props: KVItemViewPropsType): JSX.Element;

src/components/KVItemView/styles.scss

@@ -18,6 +18,8 @@
       padding: 3px 5px;
       margin-right: 3px;
       border-radius: 3px 0 0 3px;
+      text-align: right;
+      flex: 0 0 auto;
     }
     .value {
       outline: none;

src/hooks/__tests__/KVReducer.test.ts

@@ -26,7 +26,7 @@ describe('KVReducer', () => {
     const action = { type: 'UPDATE', item: { key: 'foo', value: 'baz' } };
 
     const state = KVReducer(initialState, action);
-    expect(state.items[0]).toEqual({ key: 'foo', value: 'baz' });
+    expect(state.items[0]).toEqual({ key: 'foo', value: 'baz', options: {} });
     expect(state.items.length).toBe(1);
   });
 });