@spaced-out/ui-design-system 0.4.13-beta.1 → 0.4.14

package/lib/components/Rating/Rating.stories.js

@@ -1,309 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports._Simple = exports._ReadOnly = exports._CustomLabels = void 0;
-var React = _interopRequireWildcard(require("react"));
-var _typography = require("../../types/typography");
-var _rating = require("../../utils/rating");
-var _Button = require("../Button");
-var _Chip = require("../Chip");
-var _Rating = require("./Rating");
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-const colorOptions = [...Object.values(_typography.TEXT_COLORS)];
-const sizeOptions = [...Object.values(_Button.BUTTON_SIZE)];
-const chipSemanticOptions = [...Object.values(_Chip.CHIP_SEMANTIC)];
-var _default = exports.default = {
-  tags: ['autodocs'],
-  title: 'Components/Rating',
-  component: _Rating.Rating,
-  argTypes: {
-    classNames: {
-      description: 'External classNames to be applied',
-      control: {
-        type: 'object'
-      },
-      table: {
-        type: {
-          summary: '{wrapper?: string, icon?: string, button?: string}'
-        }
-      }
-    },
-    rating: {
-      description: 'The current rating',
-      control: {
-        type: 'number'
-      },
-      table: {
-        type: {
-          summary: 'number'
-        },
-        defaultValue: {
-          summary: 0
-        }
-      }
-    },
-    start: {
-      description: 'Range starting value (exclusive)',
-      control: {
-        type: 'number'
-      },
-      table: {
-        type: {
-          summary: 'number'
-        },
-        defaultValue: {
-          summary: 0
-        }
-      }
-    },
-    end: {
-      description: 'Range stop value (inclusive)',
-      control: {
-        type: 'number'
-      },
-      table: {
-        type: {
-          summary: 'number'
-        },
-        defaultValue: {
-          summary: 5
-        }
-      }
-    },
-    iconName: {
-      description: 'Icon Name represents name of icon as supported by fontawesome',
-      control: {
-        type: 'text'
-      },
-      table: {
-        type: {
-          summary: 'string'
-        },
-        defaultValue: {
-          summary: 'star'
-        }
-      }
-    },
-    size: {
-      description: 'The size of the Rating Component',
-      options: sizeOptions,
-      control: {
-        type: 'select'
-      },
-      table: {
-        type: {
-          summary: 'RatingSize'
-        },
-        defaultValue: {
-          summary: _Rating.RATING_SIZE.medium
-        }
-      }
-    },
-    hideLabel: {
-      description: 'If **true**, hide the right label',
-      control: {
-        type: 'boolean'
-      },
-      table: {
-        type: {
-          summary: 'boolean'
-        },
-        defaultValue: {
-          summary: false
-        }
-      }
-    },
-    readOnly: {
-      description: 'If **true**, the icon\'s hover and selection are disabled, and the button wrapper around it is removed',
-      control: {
-        type: 'boolean'
-      },
-      table: {
-        type: {
-          summary: 'boolean'
-        },
-        defaultValue: {
-          summary: false
-        }
-      }
-    },
-    quiet: {
-      description: 'If **true**, disables hover',
-      control: {
-        type: 'boolean'
-      },
-      table: {
-        type: {
-          summary: 'boolean'
-        },
-        defaultValue: {
-          summary: false
-        }
-      }
-    },
-    onChange: {
-      description: 'Callback function to handle value changes',
-      control: {
-        type: 'function'
-      },
-      action: 'selected',
-      table: {
-        type: {
-          summary: '(value: number) => void'
-        }
-      }
-    },
-    iconColor: {
-      description: 'Same set of colors as supported in text',
-      options: colorOptions,
-      control: {
-        type: 'select'
-      },
-      table: {
-        type: {
-          summary: 'string'
-        },
-        defaultValue: {
-          summary: _typography.TEXT_COLORS.favorite
-        }
-      }
-    },
-    chipSemantic: {
-      options: chipSemanticOptions,
-      description: 'Semantic type of a Chip. It will have different background color for different semantic type',
-      control: {
-        type: 'select'
-      },
-      table: {
-        type: {
-          summary: 'enum'
-        },
-        defaultValue: {
-          summary: _Chip.CHIP_SEMANTIC.warning
-        }
-      }
-    },
-    labels: {
-      description: 'Assign labels to each rating value',
-      control: {
-        type: 'array'
-      },
-      table: {
-        type: {
-          summary: 'Array<string>'
-        },
-        defaultValue: {
-          summary: _rating.RATINGS.join(',|')
-        }
-      }
-    }
-  },
-  parameters: {
-    docs: {
-      subtitle: 'Generates a Rating component.',
-      description: {
-        component: `
-\`\`\`js
-import { Rating } from "@spaced-out/ui-design-system/lib/components/Rating";
-\`\`\`
-The **Rating** component enables users to select a rating by hovering over and choosing a number of icons. A label appears beside the icons, indicating the significance of the selected rating, offering clear user feedback. The component is customizable to fit various design needs.
-### Usage
-
-Here is how you can use the **Rating** component in your React application:
-
-\`\`\`jsx
-import { Rating } from "@spaced-out/ui-design-system/lib/components/Rating";
-
-const App = () => {
-const [rating, setRating] = React.useState(args.rating);
-
-return (
-  <Rating
-    {...args}
-    rating={rating}
-    onChange={(newRating) => setRating(newRating)}
-  />
-};
-\`\`\`
-          `
-      }
-    },
-    storySource: {
-      componentPath: '/src/components/Rating/Rating.jsx'
-    }
-  }
-};
-const _Simple = args => {
-  const [rating, setRating] = React.useState(args.rating);
-  React.useEffect(() => {
-    setRating(args.rating);
-  }, [args.rating]);
-  const onChangeHandler = newRating => {
-    args.onChange?.(newRating);
-    setRating(newRating);
-  };
-  return /*#__PURE__*/React.createElement(_Rating.Rating, _extends({}, args, {
-    rating: rating,
-    onChange: onChangeHandler
-  }));
-};
-exports._Simple = _Simple;
-_Simple.args = {
-  classNames: {
-    wrapper: ''
-  },
-  rating: 1
-};
-const _ReadOnly = args => {
-  const [rating, setRating] = React.useState(args.rating);
-  React.useEffect(() => {
-    setRating(args.rating);
-  }, [args.rating]);
-  const onChangeHandler = newRating => {
-    args.onChange?.(newRating);
-    setRating(newRating);
-  };
-  return /*#__PURE__*/React.createElement(_Rating.Rating, _extends({}, args, {
-    rating: rating,
-    onChange: onChangeHandler
-  }));
-};
-exports._ReadOnly = _ReadOnly;
-_ReadOnly.args = {
-  classNames: {
-    wrapper: ''
-  },
-  iconColor: _typography.TEXT_COLORS.tertiary,
-  hideLabel: true,
-  readOnly: true,
-  rating: 2
-};
-const _CustomLabels = args => {
-  const [rating, setRating] = React.useState(args.rating);
-  React.useEffect(() => {
-    setRating(args.rating);
-  }, [args.rating]);
-  const onChangeHandler = newRating => {
-    args.onChange?.(newRating);
-    setRating(newRating);
-  };
-  return /*#__PURE__*/React.createElement(_Rating.Rating, _extends({}, args, {
-    rating: rating,
-    onChange: onChangeHandler
-  }));
-};
-exports._CustomLabels = _CustomLabels;
-_CustomLabels.args = {
-  classNames: {
-    wrapper: ''
-  },
-  iconColor: _typography.TEXT_COLORS.information,
-  chipSemantic: _Chip.CHIP_SEMANTIC.information,
-  start: 2,
-  end: 6,
-  rating: 2,
-  labels: ['Worst', 'Bad', 'Good', 'Better', 'Best']
-};

package/lib/components/Rating/index.d.ts

@@ -1,2 +0,0 @@
-export * from './Rating';
-//# sourceMappingURL=index.d.ts.map

package/lib/components/Rating/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Rating/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC"}

package/lib/components/ScoreBar/ScoreBar.d.ts

@@ -1,28 +0,0 @@
-import { Flow } from 'flow-to-typescript-codemod';
-export declare const Direction: Readonly<{
-    horizontal: "horizontal";
-    vertical: "vertical";
-}>;
-export type ClassNames = Readonly<{
-    container?: string;
-    wrapper?: string;
-    bar?: string;
-    label?: string;
-}>;
-export type ScoreBarDirection = typeof Direction[keyof typeof Direction];
-export type ScoreBarColorMap = Readonly<{
-    [key: string]: string;
-}>;
-export type ScoreBarLabelMap = ScoreBarColorMap;
-export type ScoreBarProps = {
-    classNames?: ClassNames;
-    direction?: ScoreBarDirection;
-    colorMap?: ScoreBarColorMap;
-    labelMap?: ScoreBarLabelMap;
-    totalBars?: number;
-    score?: number;
-    withBorder?: boolean;
-};
-export declare const DEFAULT_COLOR_MAP: ScoreBarColorMap;
-export declare const ScoreBar: Flow.AbstractComponent<ScoreBarProps, HTMLDivElement>;
-//# sourceMappingURL=ScoreBar.d.ts.map

package/lib/components/ScoreBar/ScoreBar.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ScoreBar.d.ts","sourceRoot":"","sources":["../../../src/components/ScoreBar/ScoreBar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AA0BhD,eAAO,MAAM,SAAS;;;EAGpB,CAAC;AAEH,MAAM,MAAM,UAAU,GAAG,QAAQ,CAAC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC,CAAC;AAEH,MAAM,MAAM,iBAAiB,GAAG,OAAO,SAAS,CAAC,MAAM,OAAO,SAAS,CAAC,CAAC;AACzE,MAAM,MAAM,gBAAgB,GAAG,QAAQ,CAAC;IACtC,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAC;CACvB,CAAC,CAAC;AAEH,MAAM,MAAM,gBAAgB,GAAG,gBAAgB,CAAC;AAEhD,MAAM,MAAM,aAAa,GAAG;IAC1B,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,SAAS,CAAC,EAAE,iBAAiB,CAAC;IAC9B,QAAQ,CAAC,EAAE,gBAAgB,CAAC;IAC5B,QAAQ,CAAC,EAAE,gBAAgB,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAGF,eAAO,MAAM,iBAAiB,EAAE,gBAO/B,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,IAAI,CAAC,iBAAiB,CAAC,aAAa,EAAE,cAAc,CAmEvE,CAAC"}

package/lib/components/ScoreBar/ScoreBar.stories.d.ts

@@ -1,156 +0,0 @@
-import * as React from 'react';
-import type { ScoreBarProps } from './ScoreBar';
-declare const _default: {
-    tags: string[];
-    title: string;
-    component: import("flow-to-typescript-codemod").Flow.AbstractComponent<ScoreBarProps, HTMLDivElement>;
-    argTypes: {
-        classNames: {
-            description: string;
-            control: {
-                type: string;
-            };
-            table: {
-                type: {
-                    summary: string;
-                };
-            };
-        };
-        score: {
-            description: string;
-            control: {
-                type: string;
-            };
-            table: {
-                type: {
-                    summary: string;
-                };
-                defaultValue: {
-                    summary: number;
-                };
-            };
-        };
-        totalBars: {
-            description: string;
-            control: {
-                type: string;
-                min: number;
-            };
-            table: {
-                type: {
-                    summary: string;
-                };
-                defaultValue: {
-                    summary: number;
-                };
-                disable: boolean;
-            };
-        };
-        colorMap: {
-            description: string;
-            control: {
-                type: string;
-            };
-            table: {
-                type: {
-                    summary: string;
-                };
-                defaultValue: {
-                    summary: string;
-                };
-            };
-        };
-        labelMap: {
-            description: string;
-            control: {
-                type: string;
-            };
-            table: {
-                type: {
-                    summary: string;
-                };
-            };
-        };
-        direction: {
-            description: string;
-            options: unknown[];
-            control: {
-                type: string;
-            };
-            table: {
-                type: {
-                    summary: string;
-                };
-                defaultValue: {
-                    summary: "vertical";
-                };
-                disable: boolean;
-            };
-        };
-        withBorder: {
-            description: string;
-            control: string;
-            table: {
-                type: {
-                    summary: string;
-                };
-                defaultValue: {
-                    summary: boolean;
-                };
-            };
-        };
-    };
-    parameters: {
-        docs: {
-            subtitle: string;
-            description: {
-                component: string;
-            };
-        };
-        storySource: {
-            componentPath: string;
-        };
-    };
-};
-export default _default;
-export declare const _Simple: {
-    (args: ScoreBarProps): React.JSX.Element;
-    args: {
-        score: number;
-    };
-};
-export declare const _WithBorder: {
-    (args: ScoreBarProps): React.JSX.Element;
-    args: {
-        score: number;
-        withBorder: boolean;
-    };
-};
-export declare const _WithLabel: {
-    (args: ScoreBarProps): React.JSX.Element;
-    args: {
-        score: number;
-        labelMap: Readonly<{
-            '100': "Excellent Match";
-            '80': "Good Match";
-            '60': "Average Match";
-            '40': "Below Average Match";
-            '20': "Poor match";
-        }>;
-    };
-};
-export declare const _WithLabelAndBorder: {
-    (args: ScoreBarProps): React.JSX.Element;
-    args: {
-        score: number;
-        withBorder: boolean;
-        labelMap: Readonly<{
-            '100': "Excellent Match";
-            '80': "Good Match";
-            '60': "Average Match";
-            '40': "Below Average Match";
-            '20': "Poor match";
-        }>;
-    };
-};
-//# sourceMappingURL=ScoreBar.stories.d.ts.map

package/lib/components/ScoreBar/ScoreBar.stories.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ScoreBar.stories.d.ts","sourceRoot":"","sources":["../../../src/components/ScoreBar/ScoreBar.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,YAAY,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAc9C,wBAyIE;AAEF,eAAO,MAAM,OAAO;WAAU,aAAa;;;;CAA6B,CAAC;AAMzE,eAAO,MAAM,WAAW;WAAU,aAAa;;;;;CAA6B,CAAC;AAO7E,eAAO,MAAM,UAAU;WAAU,aAAa;;;;;;;;;;;CAA6B,CAAC;AAO5E,eAAO,MAAM,mBAAmB;WAAU,aAAa;;;;;;;;;;;;CAA6B,CAAC"}

package/lib/components/ScoreBar/ScoreBar.stories.js

@@ -1,199 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports._WithLabelAndBorder = exports._WithLabel = exports._WithBorder = exports._Simple = void 0;
-var React = _interopRequireWildcard(require("react"));
-var _ScoreBar = require("./ScoreBar");
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
-const scoreBarDirectionOptions = [...Object.values(_ScoreBar.Direction)];
-const SAMPLE_LABEL_MAP = Object.freeze({
-  '100': 'Excellent Match',
-  '80': 'Good Match',
-  '60': 'Average Match',
-  '40': 'Below Average Match',
-  '20': 'Poor match'
-});
-var _default = exports.default = {
-  tags: ['autodocs'],
-  title: 'Components/Score Bar',
-  component: _ScoreBar.ScoreBar,
-  argTypes: {
-    classNames: {
-      description: 'External classNames to be applied',
-      control: {
-        type: 'object'
-      },
-      table: {
-        type: {
-          summary: '{wrapper?: string, container?: string, bar?: string}'
-        }
-      }
-    },
-    score: {
-      description: 'The current score',
-      control: {
-        type: 'number'
-      },
-      table: {
-        type: {
-          summary: 'number'
-        },
-        defaultValue: {
-          summary: 0
-        }
-      }
-    },
-    totalBars: {
-      description: 'The bar count, with a minimum value of 1',
-      control: {
-        type: 'number',
-        min: 1
-      },
-      table: {
-        type: {
-          summary: 'number'
-        },
-        defaultValue: {
-          summary: 5
-        },
-        disable: true
-      }
-    },
-    colorMap: {
-      description: 'The **colorMap** prop is an object where each key is a numeric string representing a percentage of totalBars, and its value is the color to be applied for inputs within a specific range. The ranges are determined by the keys.',
-      control: {
-        type: 'object'
-      },
-      table: {
-        type: {
-          summary: 'object'
-        },
-        defaultValue: {
-          summary: Array.from(Object.entries(_ScoreBar.DEFAULT_COLOR_MAP), _ref => {
-            let [name, value] = _ref;
-            return `${name}: ${String(value)}`;
-          }).join(',|')
-        }
-      }
-    },
-    labelMap: {
-      description: 'The **labelMap** prop is an object where each key is a numeric string representing a percentage of totalBars, and its value is the label to be applied for inputs within a specific range. The ranges are determined by the keys.',
-      control: {
-        type: 'object'
-      },
-      table: {
-        type: {
-          summary: 'object'
-        }
-      }
-    },
-    direction: {
-      description: 'The direction in which the bars will be stacked.',
-      options: scoreBarDirectionOptions,
-      control: {
-        type: 'select'
-      },
-      table: {
-        type: {
-          summary: 'enum'
-        },
-        defaultValue: {
-          summary: _ScoreBar.Direction.vertical
-        },
-        disable: true
-      }
-    },
-    withBorder: {
-      description: 'Determines whether a border is applied to the ScoreBar.',
-      control: 'boolean',
-      table: {
-        type: {
-          summary: 'boolean'
-        },
-        defaultValue: {
-          summary: false
-        }
-      }
-    }
-  },
-  parameters: {
-    docs: {
-      subtitle: 'Generates a Score Bar component.',
-      description: {
-        component: `
-\`\`\`js
-import { ScoreBar } from "@spaced-out/ui-design-system/lib/components/ScoreBar";
-\`\`\`
-The **ScoreBar** component is intended to display a score based on a total rating of 100%. 
-When the score equals the totalBars, it is termed a perfect score. 
-Similarly, percentages are determined using the totalBars and score.
-The score is divided into five percentage categories, each represented by a separate color. 
-The process enables users to rapidly determine where a score falls in a straightforward and logical manner. If the score does not fall inside a specified range, the inactive color is applied.
-
-**Note:** 
-The labelMap and colorMap props are objects where each key is a numeric string representing a percentage of totalBars as a boundary, and their values define labels or colors to be applied to inputs within specific ranges. The ranges are determined by the keys, and the labels or colors are assigned based on the following rules:
-
-- **Boundary Definition:** Each key in labelMap or colorMap acts as a boundary. Inputs are grouped into ranges based on these keys, starting from 0 up to the highest key.
-- **Value Assignment:** For labelMap and colorMap, the value is the label or color applied to all inputs within a range. For colorMap, the value is the color applied to inputs in the same range. colorMap also takes an extra key **inactive** which is applied to the bars outside the range.
-- **Closest Upper Key:** If an input does not match an exact key, the label or color of the closest higher key is applied.
-- **Fallback for Higher Inputs:** If an input exceeds the highest key, it inherits the label or color of the highest key. The highest key should not exceed 100, as the maximum percentage is always 100%.
-
-**Example:**
-If the labelMap is \`\`\`{ '20': 'Low', '50': 'Medium', '80': 'High' }\`\`\`:
-- **0% - 20%:** label 'Low' will be used.
-- **21% - 50%:** label 'Medium' will be used.
-- **51% - 80%:** label 'High' will be used.
-- **>80%:** label 'High' (of the highest key) will be used.
-- **inactive:** Used only in **colorMap** to represent segments outside the calculated range.
-
-### Usage
-
-Here is how you can use the **ScoreBar** component in your React application:
-
-\`\`\`jsx
-import { ScoreBar } from "@spaced-out/ui-design-system/lib/components/ScoreBar";
-
-const App = () => {
-const [score, setScore] = args.score;
-
-return (
-  <ScoreBar
-    {...args}
-    score={score}
-  />
-};
-\`\`\`
-          `
-      }
-    },
-    storySource: {
-      componentPath: '/src/components/ScoreBar/ScoreBar.jsx'
-    }
-  }
-};
-const _Simple = args => /*#__PURE__*/React.createElement(_ScoreBar.ScoreBar, args);
-exports._Simple = _Simple;
-_Simple.args = {
-  score: 1
-};
-const _WithBorder = args => /*#__PURE__*/React.createElement(_ScoreBar.ScoreBar, args);
-exports._WithBorder = _WithBorder;
-_WithBorder.args = {
-  score: 3,
-  withBorder: true
-};
-const _WithLabel = args => /*#__PURE__*/React.createElement(_ScoreBar.ScoreBar, args);
-exports._WithLabel = _WithLabel;
-_WithLabel.args = {
-  score: 4,
-  labelMap: SAMPLE_LABEL_MAP
-};
-const _WithLabelAndBorder = args => /*#__PURE__*/React.createElement(_ScoreBar.ScoreBar, args);
-exports._WithLabelAndBorder = _WithLabelAndBorder;
-_WithLabelAndBorder.args = {
-  score: 5,
-  withBorder: true,
-  labelMap: SAMPLE_LABEL_MAP
-};