@phelian/react-body-highlighter 2.0.5

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 GV79
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,119 @@
+# [react-body-highlighter](https://www.npmjs.com/package/react-body-highlighter)
+
+[![CI](https://github.com/GV79/react-body-highlighter/actions/workflows/main.yml/badge.svg)](https://github.com/GV79/react-body-highlighter/actions/workflows/main.yml)
+[![Npm Version][npm-version-image]][npm-version-url]
+[![License][license-image]][license-url]
+[![Downloads][downloads-image]][downloads-url]
+
+This package was created to have a body highlighter component compatible with React.js with minimal dependencies and some extra props for further functionality. The SVG polygons were leveraged from the React Native package [react-native-body-highlighter](https://github.com/HichamELBSI/react-native-body-highlighter).
+
+<p align="center">
+  <img width="260" src="https://raw.githubusercontent.com/GV79/react-body-highlighter/master/image/anterior-example.png" alt="React Body Highlighter">
+</p>
+
+## Installation
+
+```sh
+$ npm install react-body-highlighter
+```
+
+```sh
+$ yarn add react-body-highlighter
+```
+
+## Usage
+
+**Example**
+
+[CodeSandbox](https://codesandbox.io/s/festive-swanson-995db?file=/src/App.tsx)
+
+```ts
+import React from 'react';
+import Model, { IExerciseData, IMuscleStats } from 'react-body-highlighter';
+
+export default function Component() {
+  const data: IExerciseData[] = [
+    { name: 'Bench Press', muscles: ['chest', 'triceps', 'front-deltoids'] },
+    { name: 'Push Ups', muscles: ['chest'] },
+  ];
+  
+  const handleClick = React.useCallback(({ muscle, data }: IMuscleStats) => {
+    const { exercises, frequency } = data;
+
+    alert(`You clicked the ${muscle}! You've worked out this muscle ${frequency} times through the following exercises: ${JSON.stringify(exercises)}`)
+
+  }, [data]);
+
+  return (
+    <Model
+      data={data}
+      style={{ width: '20rem', padding: '5rem' }}
+      onClick={handleClick}
+    />
+  );
+}
+```
+
+## Props
+
+All props are optional so if they are not passed to the component, they will fallback to default values or be undefined.
+
+| Prop              | Purpose                                                                                     | Type             | Default                  |
+| ----------------- | ------------------------------------------------------------------------------------------- | ---------------- | -----------------------  |
+| bodyColor         | Default color of unworked body muscle                                                       | String           | `#B6BDC3`                |
+| data              | Data array containing exercise JSON objects: `{ name: 'Bicep Curl', muscles: ['biceps'] }`. While the `name` and `muscles` attributes are required, you may optionally provide another attribute `frequency` to represent the exercise count/intensity.                       | Object[]         |                          |
+| highlightedColors | Array containing colors to display depending on frequency a muscle was worked (array[frequency-1] = color). For an example of how this works, see the CodeSandbox example above in the *Usage* section.                                                                 | []               | `['#0984e3', '#74b9ff']` |
+| onClick           | Callback when muscle is clicked. The function will get passed a JSON object of the following structure: `{ muscle: 'name', stats: { exercises: [''], frequency: 0 } }`                                                                                                 | (exercise) => {} |                         |
+| style             | CSSProperties style object that gets passed to SVG's parent container (div)                 | Object           |                          |
+| svgStyle          | CSSProperties style object that gets passed to SVG element                                  | Object           |                          |
+| type              | Denotes type of model view (values: `anterior` or `posterior`)                              | String           | `anterior`               |
+
+## List of muscles/parts supported
+
+```
+/* Back */
+trapezius
+upper-back
+lower-back
+
+/* Chest */
+chest
+
+/* Arms */
+biceps
+triceps
+forearm
+back-deltoids
+front-deltoids
+
+/* Abs */
+abs
+obliques
+
+/* Legs */
+adductor
+hamstring
+quadriceps
+abductors
+calves
+gluteal
+
+/* Head */
+head
+neck
+```
+
+## Modifying
+
+The main SVG element has a class name `.rbh` which will allow you to manually change any styles necessary.
+
+For example, you can add something like `.rhb polygon:hover { fill: #757782 !important; }` to your `.css` file to change the muscle color on mouse hover.
+
+Otherwise, feel free to fork the repo and make any adjustments to your liking!
+
+[license-image]: http://img.shields.io/npm/l/react-body-highlighter.svg
+[license-url]: LICENSE
+[downloads-image]: http://img.shields.io/npm/dm/react-body-highlighter.svg
+[downloads-url]: http://npm-stat.com/charts.html?package=react-body-highlighter
+[npm-version-image]: https://img.shields.io/npm/v/react-body-highlighter.svg
+[npm-version-url]: https://www.npmjs.com/package/react-body-highlighter

package/dist/assets/index.d.ts

@@ -0,0 +1,10 @@
+import { Muscle } from '../component/metadata';
+interface ISVGModelData {
+    muscle: Muscle;
+    svgPoints: string[];
+}
+export declare const femaleAnteriorData: ISVGModelData[];
+export declare const femalePosteriorData: ISVGModelData[];
+export declare const anteriorData: ISVGModelData[];
+export declare const posteriorData: ISVGModelData[];
+export {};

package/dist/component/Model.d.ts

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { IModelProps } from './metadata';
+declare const _default: React.NamedExoticComponent<IModelProps>;
+/**
+ * Component which displays a model of a body. Accepts many optional props for manipulating functionality or visuals of the component.
+ *
+ * @param data Array containing exercise objects
+ * @param bodyColor Default color of body model (with no muscles worked)
+ * @param bodyType Body type to display (default `male` vs `female`)
+ * @param highlightedColors Array containing colors to display depending on frequency muscle is worked (where array index = frequency - 1)
+ * @param onClick Callback function when a muscle is clicked (returns back object with muscle-related data)
+ * @param svgStyle Style object that gets passed to SVG element
+ * @param style Style object that gets passed to SVG parent wrapper (div)
+ * @param type Denotes type of model (default `anterior` view vs `posterior` view)
+ *
+ * @component
+ * @example
+ * const data = [{ name: 'Bench Press', muscles: ['chest', 'triceps', 'front-deltoids'] }]
+ * return (
+ *   <Model type="posterior" bodyType="female" data={data} />
+ * )
+ */
+export default _default;

package/dist/component/metadata.d.ts

@@ -0,0 +1,60 @@
+import { CSSProperties } from 'react';
+export declare const MuscleType: {
+    readonly TRAPEZIUS: "trapezius";
+    readonly UPPER_BACK: "upper-back";
+    readonly LOWER_BACK: "lower-back";
+    readonly CHEST: "chest";
+    readonly BICEPS: "biceps";
+    readonly TRICEPS: "triceps";
+    readonly FOREARM: "forearm";
+    readonly BACK_DELTOIDS: "back-deltoids";
+    readonly FRONT_DELTOIDS: "front-deltoids";
+    readonly ABS: "abs";
+    readonly OBLIQUES: "obliques";
+    readonly ADDUCTOR: "adductor";
+    readonly ABDUCTORS: "abductors";
+    readonly HAMSTRING: "hamstring";
+    readonly QUADRICEPS: "quadriceps";
+    readonly CALVES: "calves";
+    readonly GLUTEAL: "gluteal";
+    readonly HEAD: "head";
+    readonly NECK: "neck";
+    readonly KNEES: "knees";
+    readonly LEFT_SOLEUS: "left-soleus";
+    readonly RIGHT_SOLEUS: "right-soleus";
+};
+export declare type Muscle = typeof MuscleType[keyof typeof MuscleType];
+export declare const ModelType: {
+    readonly POSTERIOR: "posterior";
+    readonly ANTERIOR: "anterior";
+};
+declare type ModelType = typeof ModelType[keyof typeof ModelType];
+export declare const BodyType: {
+    readonly MALE: "male";
+    readonly FEMALE: "female";
+};
+declare type BodyType = typeof BodyType[keyof typeof BodyType];
+export interface IExerciseData {
+    name: string;
+    muscles: Muscle[];
+    frequency?: number;
+}
+export interface IMuscleData {
+    exercises: string[];
+    frequency: number;
+}
+export interface IMuscleStats {
+    muscle: Muscle;
+    data: IMuscleData;
+}
+export interface IModelProps {
+    bodyColor?: string;
+    bodyType?: BodyType;
+    data?: IExerciseData[];
+    highlightedColors?: string[];
+    onClick?: ((exercise: IMuscleStats) => void) | (() => void);
+    style?: CSSProperties;
+    svgStyle?: CSSProperties;
+    type?: ModelType;
+}
+export {};

package/dist/constants/index.d.ts

@@ -0,0 +1,6 @@
+import { Muscle, IMuscleData } from '../component/metadata';
+export declare const DEFAULT_MUSCLE_DATA: Record<Muscle, IMuscleData>;
+export declare const DEFAULT_BODY_COLOR = "#B6BDC3";
+export declare const DEFAULT_HIGHLIGHTED_COLORS: string[];
+export declare const DEFAULT_MODEL_TYPE: "anterior";
+export declare const DEFAULT_BODY_TYPE: "male";

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export * from './component/metadata';
+export { default } from './component/Model';

package/dist/index.js

@@ -0,0 +1,8 @@
+
+'use strict'
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./react-body-highlighter.cjs.production.min.js')
+} else {
+  module.exports = require('./react-body-highlighter.cjs.development.js')
+}