labsense-ui-kit 1.0.0

package/README.md

@@ -0,0 +1,53 @@
+# labSense UI KIT LIBRARY
+
+  labSense UI KIT is a UI components library created in react for faster web applications development.
+
+## Development
+
+If you want to run the project follow the next steps
+
+- Clone repository
+```
+  git clone https://gitlab.com/chirag.jain5/labsense-ui-kit
+```
+
+- Install with npm version 8 node 16 or above from the root folder
+```
+  npm install
+```
+
+- If you want to run the example project, run library workspace first and then the example workspace in a different terminal
+
+```
+  // Terminal 1
+
+  npm start --workspace=packages/ui-lib
+```
+
+```
+  // Terminal 2
+
+  npm start --workspace=packages/example
+```
+
+- If you want to run the storybook
+
+```
+  // Terminal 3
+
+  npm start --workspace=packages/storybook
+```
+
+## Icons
+
+The icons used in this UI Kit are licensed from [Streamline Icons](https://streamlineicons.com/). We are able to provide a limited set in this kit with as per our license agreement. If you wish to extend the icons included in this kit yourself, we highly recommend checking those out if you want to keep a consistent style.
+
+We tend to use the regular weighted icons and process them first to ungroup them. Then we use the above command to process them for inclusion in the UI Kit.
+      
+## License
+
+The labSense UI Kit is released under the [MIT license](../../LICENSE.md).
+
+Please note however that the icon set included in this software is included under license and remains property of Webalys LLC. These icons can be used only in the context of this open source project. For more information regarding this license, see [Streamline Icons Premium License](https://help.streamlineicons.com/license-premium).
+
+

package/dist/Buttons/Button.d.ts

@@ -0,0 +1,21 @@
+import React from "react";
+interface ButtonProps {
+    onClick?: () => void;
+    svg?: React.ReactNode;
+    text: string;
+    width?: string;
+    height?: string;
+    background?: string;
+    color?: string;
+    fontWeight?: string;
+    fontStyle?: string;
+    fontSize?: string;
+    fontFamily?: string;
+    lineHeight?: string;
+    border?: string;
+    borderRadius?: string;
+    padding?: string;
+    gap?: string;
+}
+declare const MultiFunctionButtonComponent: React.FC<ButtonProps>;
+export default MultiFunctionButtonComponent;

package/dist/Buttons/index.d.ts

@@ -0,0 +1,2 @@
+import Button from "./Button";
+export { Button };

package/dist/Inputs/Input.d.ts

@@ -0,0 +1,20 @@
+import React from "react";
+interface InputProps {
+    type?: string;
+    placeholder?: string;
+    width?: string;
+    height?: string;
+    borderColor?: string;
+    backgroundColor?: string;
+    fontColor?: string;
+    fontSize?: string;
+    value?: string;
+    onChange: (value: string) => void;
+}
+interface UserDetailsBoxProps extends InputProps {
+    label: string;
+    value: string;
+    onChange: (value: string) => void;
+}
+declare const Input: ({ label, type, placeholder, width, height, borderColor, backgroundColor, fontColor, fontSize, value, onChange, }: UserDetailsBoxProps) => React.JSX.Element;
+export default Input;

package/dist/Inputs/index.d.ts

@@ -0,0 +1,2 @@
+import Input from "./Input";
+export { Input };

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+import { Button } from "./Buttons";
+import { Input } from "./Inputs";
+export { Button, Input };

package/dist/index.js

@@ -0,0 +1,189 @@
+function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
+
+var React = require('react');
+var React__default = _interopDefault(React);
+var styled = _interopDefault(require('styled-components'));
+
+function _taggedTemplateLiteralLoose(e, t) {
+  return t || (t = e.slice(0)), e.raw = t, e;
+}
+
+var _templateObject, _templateObject2, _templateObject3;
+var Container = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteralLoose([""])));
+var Button = styled.button(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  width: ", ";\n  height: ", ";\n  padding: ", ";\n  box-sizing : border-box;\n  gap: ", ";\n  border: ", ";\n  border-radius: ", ";\n  outline : none;\n  background: ", ";              \n  display: flex;\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\n  opacity : 0.8;\n\n  &:hover{\n    opacity : 1;\n    // border: ", ";\n  }\n\n  &:focus {\n    outline: none;\n    // border : none;\n  }\n"])), function (_ref) {
+  var width = _ref.width;
+  return width || "max-content";
+}, function (_ref2) {
+  var height = _ref2.height;
+  return height || "42px";
+}, function (_ref3) {
+  var padding = _ref3.padding;
+  return padding || '10px 16px';
+}, function (_ref4) {
+  var gap = _ref4.gap;
+  return gap || '10px';
+}, function (_ref5) {
+  var border = _ref5.border;
+  return border || 'none';
+}, function (_ref6) {
+  var borderRadius = _ref6.borderRadius;
+  return borderRadius || '1000px';
+}, function (_ref7) {
+  var background = _ref7.background;
+  return background || " #4c9eeb;";
+}, function (_ref8) {
+  var border = _ref8.border;
+  return border || 'none';
+});
+var ButtonText = styled.p(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  color:  ", ";\n  white-space : nowrap;\n"])), function (_ref9) {
+  var fontFamily = _ref9.fontFamily;
+  return fontFamily || 'Noto Sans';
+}, function (_ref10) {
+  var fontSize = _ref10.fontSize;
+  return fontSize || '18px';
+}, function (_ref11) {
+  var fontWeight = _ref11.fontWeight;
+  return fontWeight || '500';
+}, function (_ref12) {
+  var lineHeight = _ref12.lineHeight;
+  return lineHeight || '18px';
+}, function (_ref13) {
+  var color = _ref13.color;
+  return color || '#ffffff';
+});
+var MultiFunctionButtonComponent = function MultiFunctionButtonComponent(_ref14) {
+  var onClick = _ref14.onClick,
+    text = _ref14.text,
+    width = _ref14.width,
+    height = _ref14.height,
+    background = _ref14.background,
+    color = _ref14.color,
+    border = _ref14.border,
+    borderRadius = _ref14.borderRadius,
+    fontWeight = _ref14.fontWeight,
+    fontSize = _ref14.fontSize,
+    fontFamily = _ref14.fontFamily,
+    lineHeight = _ref14.lineHeight,
+    padding = _ref14.padding,
+    svg = _ref14.svg,
+    gap = _ref14.gap;
+  return React__default.createElement(Container, null, React__default.createElement(Button, {
+    onClick: onClick,
+    width: width,
+    height: height,
+    background: background,
+    border: border,
+    borderRadius: borderRadius,
+    padding: padding,
+    gap: gap
+  }, svg, React__default.createElement(ButtonText, {
+    color: color,
+    fontFamily: fontFamily,
+    fontSize: fontSize,
+    fontWeight: fontWeight,
+    lineHeight: lineHeight
+  }, text)));
+};
+
+var _templateObject$1, _templateObject2$1, _templateObject3$1;
+var InputContainer = styled.div(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteralLoose(["\n  position: relative; \n  width: ", ";\n  height: ", ";\n  border-radius: ", ";\n  border: 1px solid ", ";\n  background: ", ";\n  display: flex; \n  flex-direction: column;\n  justify-content: center; \n"])), function (_ref) {
+  var width = _ref.width;
+  return width || "100%";
+}, function (_ref2) {
+  var height = _ref2.height;
+  return height || "54px";
+}, function (_ref3) {
+  var borderRadius = _ref3.borderRadius;
+  return borderRadius || "4px";
+}, function (_ref4) {
+  var border = _ref4.border;
+  return border ? 'border' : '#657786';
+}, function (_ref5) {
+  var backgroundColor = _ref5.backgroundColor;
+  return backgroundColor || 'transparent';
+});
+var WrittenTextAfterInput = styled.p(_templateObject2$1 || (_templateObject2$1 = _taggedTemplateLiteralLoose(["\n  position: relative; \n  top: 9px;\n  left: 8px;\n  width: auto;\n  height: auto;\n  font-family: Noto Sans;\n  font-size: 14px;\n  font-weight: 400;\n  line-height: 14px;\n  text-align: left;\n  color: #4c9eeb;\n  margin: 2px;\n  visibility: ", ";\n"])), function (_ref6) {
+  var show = _ref6.show;
+  return show ? "visible" : "hidden";
+});
+var InputBlock = styled.input(_templateObject3$1 || (_templateObject3$1 = _taggedTemplateLiteralLoose(["\n  width: ", ";\n  height: ", ";\n  border-radius: ", ";\n  border: 1px solid ", ";\n  background: ", ";\n  color: ", ";\n  padding: ", ";\n  box-sizing: border-box;\n  font-family: Noto Sans;\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  text-align: left;\n  outline: none;\n\n  ::placeholder {\n    color: ", ";\n  }\n"])), function (_ref7) {
+  var width = _ref7.width;
+  return width || "100%";
+}, function (_ref8) {
+  var height = _ref8.height;
+  return height || "54px";
+}, function (_ref9) {
+  var borderRadius = _ref9.borderRadius;
+  return borderRadius || "4px";
+}, function (_ref10) {
+  var borderColor = _ref10.borderColor;
+  return borderColor || "transparent";
+}, function (_ref11) {
+  var backgroundColor = _ref11.backgroundColor;
+  return backgroundColor || "transparent";
+}, function (_ref12) {
+  var fontColor = _ref12.fontColor;
+  return fontColor || "#14171A";
+}, function (_ref13) {
+  var padding = _ref13.padding;
+  return padding || "8px";
+}, function (_ref14) {
+  var fontSize = _ref14.fontSize;
+  return fontSize || "16px";
+}, function (_ref15) {
+  var fontWeight = _ref15.fontWeight;
+  return fontWeight || 400;
+}, function (_ref16) {
+  var lineHeight = _ref16.lineHeight;
+  return lineHeight || '16px';
+}, function (_ref17) {
+  var fontColor = _ref17.fontColor;
+  return fontColor || "#AABBCC";
+});
+var Input = function Input(_ref18) {
+  var label = _ref18.label,
+    type = _ref18.type,
+    placeholder = _ref18.placeholder,
+    width = _ref18.width,
+    height = _ref18.height,
+    borderColor = _ref18.borderColor,
+    backgroundColor = _ref18.backgroundColor,
+    fontColor = _ref18.fontColor,
+    fontSize = _ref18.fontSize,
+    value = _ref18.value,
+    onChange = _ref18.onChange;
+  var _useState = React.useState(false),
+    blockText = _useState[0],
+    setBlockContent = _useState[1];
+  var inputRef = React.useRef(null);
+  var handleInputChange = function handleInputChange(e) {
+    setBlockContent(true);
+    var inputValue = e.target.value;
+    if (type === "phone" && inputValue.length > 10) {
+      inputValue = inputValue.slice(0, 10);
+    }
+    setBlockContent(inputValue.length > 0);
+    onChange(inputValue);
+  };
+  return React__default.createElement(InputContainer, {
+    width: width
+  }, React__default.createElement(WrittenTextAfterInput, {
+    show: blockText
+  }, label), React__default.createElement(InputBlock, {
+    ref: inputRef,
+    type: type === "phone" ? "tel" : type,
+    placeholder: placeholder || label,
+    width: width,
+    height: height,
+    borderColor: borderColor,
+    backgroundColor: backgroundColor,
+    fontColor: fontColor,
+    fontSize: fontSize,
+    value: value,
+    onChange: handleInputChange
+  }));
+};
+
+exports.Button = MultiFunctionButtonComponent;
+exports.Input = Input;
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../src/Buttons/Button.tsx","../src/Inputs/Input.tsx"],"sourcesContent":["import React from \"react\";\nimport styled from \"styled-components\";\n\nconst Container = styled.div``;\n\nconst Button = styled.button<{\n  width?: string;\n  height?: string;\n  background?: string;\n  border?: string;\n  borderRadius?: string;\n  padding? : string;\n  gap?: string;\n  \n}>`\n  width: ${({ width }) => width || \"max-content\"};\n  height: ${({ height }) => height || \"42px\"};\n  padding: ${({padding})=> padding || '10px 16px'};\n  box-sizing : border-box;\n  gap: ${({gap}) => gap || '10px'};\n  border: ${( {border} )=> border || 'none'};\n  border-radius: ${( {borderRadius} )=> borderRadius || '1000px'};\n  outline : none;\n  background: ${({ background }) => background || \" #4c9eeb;\"};              \n  display: flex;\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\n  opacity : 0.8;\n\n  &:hover{\n    opacity : 1;\n    // border: ${( {border} )=> border || 'none'};\n  }\n\n  &:focus {\n    outline: none;\n    // border : none;\n  }\n`;\n\nconst ButtonText = styled.p<{\n  fontFamily?: string;\n  fontSize?: string;\n  fontWeight?: string;\n  lineHeight?: string;\n  color?: string;\n}>`\n  font-family: ${({ fontFamily }) => fontFamily || 'Noto Sans'};\n  font-size: ${( { fontSize } ) => fontSize || '18px'};\n  font-weight: ${ ({ fontWeight }) => fontWeight  || '500' };\n  line-height: ${ ({ lineHeight }) => lineHeight  || '18px' };\n  color:  ${ ({ color }) => color  || '#ffffff' };\n  white-space : nowrap;\n`;\n\ninterface ButtonProps {\n  onClick?: () => void;\n  svg?: React.ReactNode;\n  text: string;\n  width?: string;\n  height? : string;\n  background? : string;\n  color? : string;\n  fontWeight? : string;\n  fontStyle? : string;\n  fontSize? : string;\n  fontFamily? : string;\n  lineHeight? : string;\n  border? : string;\n  borderRadius? : string;\n  padding? : string;\n  gap?: string;\n};\n\nconst MultiFunctionButtonComponent: React.FC<ButtonProps> = ({\n  onClick,\n  text,\n  width,\n  height,\n  background,\n  color,\n  border,\n  borderRadius,\n  fontWeight,\n  fontSize,\n  fontFamily,\n  lineHeight,\n  padding,\n  svg,\n  gap\n}) => {\n  return (\n    <Container>\n      <Button \n        onClick={onClick} \n        width={width} \n        height={height} \n        background={background} \n        border={border} \n        borderRadius={borderRadius} \n        padding={padding}\n        gap={gap}\n      >\n        {svg}\n        <ButtonText \n          color={color} \n          fontFamily={fontFamily} \n          fontSize={fontSize} \n          fontWeight={fontWeight} \n          lineHeight={lineHeight}\n        >\n          {text}\n          </ButtonText>\n      </Button>\n    </Container>\n  );\n};\n\nexport default MultiFunctionButtonComponent;\n","import React, { useRef, useState } from \"react\";\nimport styled from \"styled-components\";\n\nconst InputContainer = styled.div<{\n  width?: string;\n  height?: string;\n  border?: string;\n  backgroundColor?: string;\n  fontColor?: string;\n  fontSize?: string;\n  padding?: string;\n  borderRadius? : string;\n  fontWeight? : string;\n  lineHeight? : string\n  }>`\n  position: relative; \n  width: ${({ width }) => width || \"100%\"};\n  height: ${({ height }) => height || \"54px\"};\n  border-radius: ${({ borderRadius }) => borderRadius || \"4px\"};\n  border: 1px solid ${({ border }) => (border ? 'border' : '#657786')};\n  background: ${({backgroundColor}) => backgroundColor || 'transparent'};\n  display: flex; \n  flex-direction: column;\n  justify-content: center; \n`;\n\n\nconst WrittenTextAfterInput = styled.p<{ show: boolean }>`\n  position: relative; \n  top: 9px;\n  left: 8px;\n  width: auto;\n  height: auto;\n  font-family: Noto Sans;\n  font-size: 14px;\n  font-weight: 400;\n  line-height: 14px;\n  text-align: left;\n  color: #4c9eeb;\n  margin: 2px;\n  visibility: ${({ show }) => (show ? \"visible\" : \"hidden\")};\n`;\n\nconst InputBlock = styled.input<{\n  width?: string;\n  height?: string;\n  borderColor?: string;\n  backgroundColor?: string;\n  fontColor?: string;\n  fontSize?: string;\n  padding?: string;\n  borderRadius? : string;\n  fontWeight? : string;\n  lineHeight? : string\n}>`\n  width: ${({ width }) => width || \"100%\"};\n  height: ${({ height }) => height || \"54px\"};\n  border-radius: ${({ borderRadius }) => borderRadius || \"4px\"};\n  border: 1px solid ${({ borderColor }) => borderColor || \"transparent\"};\n  background: ${({ backgroundColor }) => backgroundColor || \"transparent\"};\n  color: ${({ fontColor }) => fontColor || \"#14171A\"};\n  padding: ${({ padding }) => padding || \"8px\"};\n  box-sizing: border-box;\n  font-family: Noto Sans;\n  font-size: ${({ fontSize }) => fontSize || \"16px\"};\n  font-weight: ${({ fontWeight }) => fontWeight || 400};\n  line-height: ${({ lineHeight }) => lineHeight || '16px'};\n  text-align: left;\n  outline: none;\n\n  ::placeholder {\n    color: ${({ fontColor }) => fontColor || \"#AABBCC\"};\n  }\n`;\n\ninterface InputProps {\n  type?: string;\n  placeholder?: string;\n  width?: string;\n  height?: string;\n  borderColor?: string;\n  backgroundColor?: string;\n  fontColor?: string;\n  fontSize?: string;\n  value?: string;\n  onChange: (value: string) => void;\n}\n\ninterface UserDetailsBoxProps extends InputProps {\n  label: string; // To display label for each input block\n  value: string;\n  onChange: (value: string) => void; // Callback for change in the input value\n}\n\nconst Input = ({\n  label,\n  type,\n  placeholder,\n  width,\n  height,\n  borderColor,\n  backgroundColor,\n  fontColor,\n  fontSize,\n  value,\n  onChange,\n}: UserDetailsBoxProps) => {\n  const [blockText, setBlockContent] = useState(false); // For showing the placeholder at top\n  const inputRef = useRef<HTMLInputElement>(null);\n\n\n  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    setBlockContent(true);\n    let inputValue = e.target.value;\n\n    if (type === \"phone\" && inputValue.length > 10) {\n      inputValue = inputValue.slice(0, 10); // Limiting phone number to 10 digits\n    }\n\n    setBlockContent(inputValue.length > 0); // Show label at top when user starts typing\n    onChange(inputValue); // Pass the input value back to the parent component\n  };\n\n  return (\n    <InputContainer\n      \n      width={width}\n    >\n      <WrittenTextAfterInput show={blockText}>\n        {label} \n      </WrittenTextAfterInput>\n      <InputBlock\n        ref={inputRef}\n        type={type === \"phone\" ? \"tel\" : type} // Use 'tel' for phone input\n        placeholder={placeholder || label}\n        width={width}\n        height={height}\n        borderColor={borderColor}\n        backgroundColor={backgroundColor}\n        fontColor={fontColor}\n        fontSize={fontSize}\n        value={value}\n        onChange={handleInputChange}\n      />\n    </InputContainer>\n  );\n};\n\nexport default Input;\n"],"names":["Container","styled","div","_templateObject","_taggedTemplateLiteralLoose","Button","button","_templateObject2","_ref","width","_ref2","height","_ref3","padding","_ref4","gap","_ref5","border","_ref6","borderRadius","_ref7","background","_ref8","ButtonText","p","_templateObject3","_ref9","fontFamily","_ref10","fontSize","_ref11","fontWeight","_ref12","lineHeight","_ref13","color","MultiFunctionButtonComponent","_ref14","onClick","text","svg","React","InputContainer","backgroundColor","WrittenTextAfterInput","show","InputBlock","input","borderColor","fontColor","_ref15","_ref16","_ref17","Input","_ref18","label","type","placeholder","value","onChange","_useState","useState","blockText","setBlockContent","inputRef","useRef","handleInputChange","e","inputValue","target","length","slice","ref"],"mappings":"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"}

package/dist/index.modern.js

@@ -0,0 +1,185 @@
+import React, { useState, useRef } from 'react';
+import styled from 'styled-components';
+
+function _taggedTemplateLiteralLoose(e, t) {
+  return t || (t = e.slice(0)), e.raw = t, e;
+}
+
+var _templateObject, _templateObject2, _templateObject3;
+var Container = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteralLoose([""])));
+var Button = styled.button(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  width: ", ";\n  height: ", ";\n  padding: ", ";\n  box-sizing : border-box;\n  gap: ", ";\n  border: ", ";\n  border-radius: ", ";\n  outline : none;\n  background: ", ";              \n  display: flex;\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\n  opacity : 0.8;\n\n  &:hover{\n    opacity : 1;\n    // border: ", ";\n  }\n\n  &:focus {\n    outline: none;\n    // border : none;\n  }\n"])), function (_ref) {
+  var width = _ref.width;
+  return width || "max-content";
+}, function (_ref2) {
+  var height = _ref2.height;
+  return height || "42px";
+}, function (_ref3) {
+  var padding = _ref3.padding;
+  return padding || '10px 16px';
+}, function (_ref4) {
+  var gap = _ref4.gap;
+  return gap || '10px';
+}, function (_ref5) {
+  var border = _ref5.border;
+  return border || 'none';
+}, function (_ref6) {
+  var borderRadius = _ref6.borderRadius;
+  return borderRadius || '1000px';
+}, function (_ref7) {
+  var background = _ref7.background;
+  return background || " #4c9eeb;";
+}, function (_ref8) {
+  var border = _ref8.border;
+  return border || 'none';
+});
+var ButtonText = styled.p(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  color:  ", ";\n  white-space : nowrap;\n"])), function (_ref9) {
+  var fontFamily = _ref9.fontFamily;
+  return fontFamily || 'Noto Sans';
+}, function (_ref10) {
+  var fontSize = _ref10.fontSize;
+  return fontSize || '18px';
+}, function (_ref11) {
+  var fontWeight = _ref11.fontWeight;
+  return fontWeight || '500';
+}, function (_ref12) {
+  var lineHeight = _ref12.lineHeight;
+  return lineHeight || '18px';
+}, function (_ref13) {
+  var color = _ref13.color;
+  return color || '#ffffff';
+});
+var MultiFunctionButtonComponent = function MultiFunctionButtonComponent(_ref14) {
+  var onClick = _ref14.onClick,
+    text = _ref14.text,
+    width = _ref14.width,
+    height = _ref14.height,
+    background = _ref14.background,
+    color = _ref14.color,
+    border = _ref14.border,
+    borderRadius = _ref14.borderRadius,
+    fontWeight = _ref14.fontWeight,
+    fontSize = _ref14.fontSize,
+    fontFamily = _ref14.fontFamily,
+    lineHeight = _ref14.lineHeight,
+    padding = _ref14.padding,
+    svg = _ref14.svg,
+    gap = _ref14.gap;
+  return React.createElement(Container, null, React.createElement(Button, {
+    onClick: onClick,
+    width: width,
+    height: height,
+    background: background,
+    border: border,
+    borderRadius: borderRadius,
+    padding: padding,
+    gap: gap
+  }, svg, React.createElement(ButtonText, {
+    color: color,
+    fontFamily: fontFamily,
+    fontSize: fontSize,
+    fontWeight: fontWeight,
+    lineHeight: lineHeight
+  }, text)));
+};
+
+var _templateObject$1, _templateObject2$1, _templateObject3$1;
+var InputContainer = styled.div(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteralLoose(["\n  position: relative; \n  width: ", ";\n  height: ", ";\n  border-radius: ", ";\n  border: 1px solid ", ";\n  background: ", ";\n  display: flex; \n  flex-direction: column;\n  justify-content: center; \n"])), function (_ref) {
+  var width = _ref.width;
+  return width || "100%";
+}, function (_ref2) {
+  var height = _ref2.height;
+  return height || "54px";
+}, function (_ref3) {
+  var borderRadius = _ref3.borderRadius;
+  return borderRadius || "4px";
+}, function (_ref4) {
+  var border = _ref4.border;
+  return border ? 'border' : '#657786';
+}, function (_ref5) {
+  var backgroundColor = _ref5.backgroundColor;
+  return backgroundColor || 'transparent';
+});
+var WrittenTextAfterInput = styled.p(_templateObject2$1 || (_templateObject2$1 = _taggedTemplateLiteralLoose(["\n  position: relative; \n  top: 9px;\n  left: 8px;\n  width: auto;\n  height: auto;\n  font-family: Noto Sans;\n  font-size: 14px;\n  font-weight: 400;\n  line-height: 14px;\n  text-align: left;\n  color: #4c9eeb;\n  margin: 2px;\n  visibility: ", ";\n"])), function (_ref6) {
+  var show = _ref6.show;
+  return show ? "visible" : "hidden";
+});
+var InputBlock = styled.input(_templateObject3$1 || (_templateObject3$1 = _taggedTemplateLiteralLoose(["\n  width: ", ";\n  height: ", ";\n  border-radius: ", ";\n  border: 1px solid ", ";\n  background: ", ";\n  color: ", ";\n  padding: ", ";\n  box-sizing: border-box;\n  font-family: Noto Sans;\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  text-align: left;\n  outline: none;\n\n  ::placeholder {\n    color: ", ";\n  }\n"])), function (_ref7) {
+  var width = _ref7.width;
+  return width || "100%";
+}, function (_ref8) {
+  var height = _ref8.height;
+  return height || "54px";
+}, function (_ref9) {
+  var borderRadius = _ref9.borderRadius;
+  return borderRadius || "4px";
+}, function (_ref10) {
+  var borderColor = _ref10.borderColor;
+  return borderColor || "transparent";
+}, function (_ref11) {
+  var backgroundColor = _ref11.backgroundColor;
+  return backgroundColor || "transparent";
+}, function (_ref12) {
+  var fontColor = _ref12.fontColor;
+  return fontColor || "#14171A";
+}, function (_ref13) {
+  var padding = _ref13.padding;
+  return padding || "8px";
+}, function (_ref14) {
+  var fontSize = _ref14.fontSize;
+  return fontSize || "16px";
+}, function (_ref15) {
+  var fontWeight = _ref15.fontWeight;
+  return fontWeight || 400;
+}, function (_ref16) {
+  var lineHeight = _ref16.lineHeight;
+  return lineHeight || '16px';
+}, function (_ref17) {
+  var fontColor = _ref17.fontColor;
+  return fontColor || "#AABBCC";
+});
+var Input = function Input(_ref18) {
+  var label = _ref18.label,
+    type = _ref18.type,
+    placeholder = _ref18.placeholder,
+    width = _ref18.width,
+    height = _ref18.height,
+    borderColor = _ref18.borderColor,
+    backgroundColor = _ref18.backgroundColor,
+    fontColor = _ref18.fontColor,
+    fontSize = _ref18.fontSize,
+    value = _ref18.value,
+    onChange = _ref18.onChange;
+  var _useState = useState(false),
+    blockText = _useState[0],
+    setBlockContent = _useState[1];
+  var inputRef = useRef(null);
+  var handleInputChange = function handleInputChange(e) {
+    setBlockContent(true);
+    var inputValue = e.target.value;
+    if (type === "phone" && inputValue.length > 10) {
+      inputValue = inputValue.slice(0, 10);
+    }
+    setBlockContent(inputValue.length > 0);
+    onChange(inputValue);
+  };
+  return React.createElement(InputContainer, {
+    width: width
+  }, React.createElement(WrittenTextAfterInput, {
+    show: blockText
+  }, label), React.createElement(InputBlock, {
+    ref: inputRef,
+    type: type === "phone" ? "tel" : type,
+    placeholder: placeholder || label,
+    width: width,
+    height: height,
+    borderColor: borderColor,
+    backgroundColor: backgroundColor,
+    fontColor: fontColor,
+    fontSize: fontSize,
+    value: value,
+    onChange: handleInputChange
+  }));
+};
+
+export { MultiFunctionButtonComponent as Button, Input };
+//# sourceMappingURL=index.modern.js.map

package/dist/index.modern.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.modern.js","sources":["../src/Buttons/Button.tsx","../src/Inputs/Input.tsx"],"sourcesContent":["import React from \"react\";\nimport styled from \"styled-components\";\n\nconst Container = styled.div``;\n\nconst Button = styled.button<{\n  width?: string;\n  height?: string;\n  background?: string;\n  border?: string;\n  borderRadius?: string;\n  padding? : string;\n  gap?: string;\n  \n}>`\n  width: ${({ width }) => width || \"max-content\"};\n  height: ${({ height }) => height || \"42px\"};\n  padding: ${({padding})=> padding || '10px 16px'};\n  box-sizing : border-box;\n  gap: ${({gap}) => gap || '10px'};\n  border: ${( {border} )=> border || 'none'};\n  border-radius: ${( {borderRadius} )=> borderRadius || '1000px'};\n  outline : none;\n  background: ${({ background }) => background || \" #4c9eeb;\"};              \n  display: flex;\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\n  opacity : 0.8;\n\n  &:hover{\n    opacity : 1;\n    // border: ${( {border} )=> border || 'none'};\n  }\n\n  &:focus {\n    outline: none;\n    // border : none;\n  }\n`;\n\nconst ButtonText = styled.p<{\n  fontFamily?: string;\n  fontSize?: string;\n  fontWeight?: string;\n  lineHeight?: string;\n  color?: string;\n}>`\n  font-family: ${({ fontFamily }) => fontFamily || 'Noto Sans'};\n  font-size: ${( { fontSize } ) => fontSize || '18px'};\n  font-weight: ${ ({ fontWeight }) => fontWeight  || '500' };\n  line-height: ${ ({ lineHeight }) => lineHeight  || '18px' };\n  color:  ${ ({ color }) => color  || '#ffffff' };\n  white-space : nowrap;\n`;\n\ninterface ButtonProps {\n  onClick?: () => void;\n  svg?: React.ReactNode;\n  text: string;\n  width?: string;\n  height? : string;\n  background? : string;\n  color? : string;\n  fontWeight? : string;\n  fontStyle? : string;\n  fontSize? : string;\n  fontFamily? : string;\n  lineHeight? : string;\n  border? : string;\n  borderRadius? : string;\n  padding? : string;\n  gap?: string;\n};\n\nconst MultiFunctionButtonComponent: React.FC<ButtonProps> = ({\n  onClick,\n  text,\n  width,\n  height,\n  background,\n  color,\n  border,\n  borderRadius,\n  fontWeight,\n  fontSize,\n  fontFamily,\n  lineHeight,\n  padding,\n  svg,\n  gap\n}) => {\n  return (\n    <Container>\n      <Button \n        onClick={onClick} \n        width={width} \n        height={height} \n        background={background} \n        border={border} \n        borderRadius={borderRadius} \n        padding={padding}\n        gap={gap}\n      >\n        {svg}\n        <ButtonText \n          color={color} \n          fontFamily={fontFamily} \n          fontSize={fontSize} \n          fontWeight={fontWeight} \n          lineHeight={lineHeight}\n        >\n          {text}\n          </ButtonText>\n      </Button>\n    </Container>\n  );\n};\n\nexport default MultiFunctionButtonComponent;\n","import React, { useRef, useState } from \"react\";\nimport styled from \"styled-components\";\n\nconst InputContainer = styled.div<{\n  width?: string;\n  height?: string;\n  border?: string;\n  backgroundColor?: string;\n  fontColor?: string;\n  fontSize?: string;\n  padding?: string;\n  borderRadius? : string;\n  fontWeight? : string;\n  lineHeight? : string\n  }>`\n  position: relative; \n  width: ${({ width }) => width || \"100%\"};\n  height: ${({ height }) => height || \"54px\"};\n  border-radius: ${({ borderRadius }) => borderRadius || \"4px\"};\n  border: 1px solid ${({ border }) => (border ? 'border' : '#657786')};\n  background: ${({backgroundColor}) => backgroundColor || 'transparent'};\n  display: flex; \n  flex-direction: column;\n  justify-content: center; \n`;\n\n\nconst WrittenTextAfterInput = styled.p<{ show: boolean }>`\n  position: relative; \n  top: 9px;\n  left: 8px;\n  width: auto;\n  height: auto;\n  font-family: Noto Sans;\n  font-size: 14px;\n  font-weight: 400;\n  line-height: 14px;\n  text-align: left;\n  color: #4c9eeb;\n  margin: 2px;\n  visibility: ${({ show }) => (show ? \"visible\" : \"hidden\")};\n`;\n\nconst InputBlock = styled.input<{\n  width?: string;\n  height?: string;\n  borderColor?: string;\n  backgroundColor?: string;\n  fontColor?: string;\n  fontSize?: string;\n  padding?: string;\n  borderRadius? : string;\n  fontWeight? : string;\n  lineHeight? : string\n}>`\n  width: ${({ width }) => width || \"100%\"};\n  height: ${({ height }) => height || \"54px\"};\n  border-radius: ${({ borderRadius }) => borderRadius || \"4px\"};\n  border: 1px solid ${({ borderColor }) => borderColor || \"transparent\"};\n  background: ${({ backgroundColor }) => backgroundColor || \"transparent\"};\n  color: ${({ fontColor }) => fontColor || \"#14171A\"};\n  padding: ${({ padding }) => padding || \"8px\"};\n  box-sizing: border-box;\n  font-family: Noto Sans;\n  font-size: ${({ fontSize }) => fontSize || \"16px\"};\n  font-weight: ${({ fontWeight }) => fontWeight || 400};\n  line-height: ${({ lineHeight }) => lineHeight || '16px'};\n  text-align: left;\n  outline: none;\n\n  ::placeholder {\n    color: ${({ fontColor }) => fontColor || \"#AABBCC\"};\n  }\n`;\n\ninterface InputProps {\n  type?: string;\n  placeholder?: string;\n  width?: string;\n  height?: string;\n  borderColor?: string;\n  backgroundColor?: string;\n  fontColor?: string;\n  fontSize?: string;\n  value?: string;\n  onChange: (value: string) => void;\n}\n\ninterface UserDetailsBoxProps extends InputProps {\n  label: string; // To display label for each input block\n  value: string;\n  onChange: (value: string) => void; // Callback for change in the input value\n}\n\nconst Input = ({\n  label,\n  type,\n  placeholder,\n  width,\n  height,\n  borderColor,\n  backgroundColor,\n  fontColor,\n  fontSize,\n  value,\n  onChange,\n}: UserDetailsBoxProps) => {\n  const [blockText, setBlockContent] = useState(false); // For showing the placeholder at top\n  const inputRef = useRef<HTMLInputElement>(null);\n\n\n  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    setBlockContent(true);\n    let inputValue = e.target.value;\n\n    if (type === \"phone\" && inputValue.length > 10) {\n      inputValue = inputValue.slice(0, 10); // Limiting phone number to 10 digits\n    }\n\n    setBlockContent(inputValue.length > 0); // Show label at top when user starts typing\n    onChange(inputValue); // Pass the input value back to the parent component\n  };\n\n  return (\n    <InputContainer\n      \n      width={width}\n    >\n      <WrittenTextAfterInput show={blockText}>\n        {label} \n      </WrittenTextAfterInput>\n      <InputBlock\n        ref={inputRef}\n        type={type === \"phone\" ? \"tel\" : type} // Use 'tel' for phone input\n        placeholder={placeholder || label}\n        width={width}\n        height={height}\n        borderColor={borderColor}\n        backgroundColor={backgroundColor}\n        fontColor={fontColor}\n        fontSize={fontSize}\n        value={value}\n        onChange={handleInputChange}\n      />\n    </InputContainer>\n  );\n};\n\nexport default Input;\n"],"names":["Container","styled","div","_templateObject","_taggedTemplateLiteralLoose","Button","button","_templateObject2","_ref","width","_ref2","height","_ref3","padding","_ref4","gap","_ref5","border","_ref6","borderRadius","_ref7","background","_ref8","ButtonText","p","_templateObject3","_ref9","fontFamily","_ref10","fontSize","_ref11","fontWeight","_ref12","lineHeight","_ref13","color","MultiFunctionButtonComponent","_ref14","onClick","text","svg","React","InputContainer","backgroundColor","WrittenTextAfterInput","show","InputBlock","input","borderColor","fontColor","_ref15","_ref16","_ref17","Input","_ref18","label","type","placeholder","value","onChange","_useState","useState","blockText","setBlockContent","inputRef","useRef","handleInputChange","e","inputValue","target","length","slice","ref"],"mappings":"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"}

package/package.json

@@ -0,0 +1,85 @@
+{
+  "name": "labsense-ui-kit",
+  "version": "1.0.0",
+  "description": "labSense UI Components",
+  "author": "SNet Labs Pvt. Ltd.",
+  "license": "MIT",
+  "repository": {
+    "type": "gitlab",
+    "url": "https://gitlab.com/chirag.jain5/labsense-ui-kit.git"
+  },
+  "main": "dist/index.js",
+  "module": "dist/index.modern.js",
+  "source": "src/index.tsx",
+  "engines": {
+    "node": ">=10"
+  },
+  "scripts": {
+    "build": "microbundle-crl --no-compress --format modern,cjs",
+    "start": "microbundle-crl watch --no-compress --format modern,cjs",
+    "prepublishOnly": "run-s build",
+    "test": "run-s test:unit test:lint test:build",
+    "test:build": "run-s build",
+    "test:lint": "eslint ./src --ext .ts,.tsx",
+    "test:unit": "cross-env CI=1 react-scripts test --env=jsdom",
+    "test:watch": "react-scripts test --env=jsdom",
+    "svgr": "svgr --typescript -d src/svg/ src/svg",
+    "predeploy": "cd ../example && npm run build && cd ../storybook && npm run build-storybook",
+    "deploy": "gh-pages -d ../example/build",
+    "actions-deploy": "gh-pages -d ../example/build",
+    "link": "npm link && npm link react && npm link react-dom && npm link react-router-dom && npm link styled-components"
+  },
+  "peerDependencies": {
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-router": "^5.3.4",
+    "react-router-dom": "^5.3.4",
+    "react-use-websocket": "^2.9.1",
+    "styled-components": "^5.3.11"
+  },
+  "devDependencies": {
+    "@svgr/cli": "^6.5.1",
+    "@types/jest": "^28.1.8",
+    "@types/lodash.debounce": "^4.0.9",
+    "@types/lodash.defaultsdeep": "^4.6.9",
+    "@types/lodash.isequal": "^4.5.8",
+    "@types/node": "^16.18.125",
+    "@types/react": "^17.0.83",
+    "@types/react-router-dom": "^5.3.3",
+    "@types/styled-components": "^5.1.34",
+    "@typescript-eslint/eslint-plugin": "^5.62.0",
+    "@typescript-eslint/parser": "^5.62.0",
+    "babel-eslint": "^10.1.0",
+    "cross-env": "^7.0.3",
+    "eslint": "^7.32.0",
+    "eslint-config-standard-react": "^11.0.1",
+    "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-promise": "^6.6.0",
+    "eslint-plugin-react": "^7.37.4",
+    "eslint-plugin-react-hooks": "^4.6.2",
+    "eslint-plugin-standard": "^4.1.0",
+    "gh-pages": "^5.0.0",
+    "microbundle-crl": "^0.13.11",
+    "npm-run-all": "^4.1.5",
+    "react-scripts": "^5.0.1"
+  },
+  "dependencies": {
+    "@types/react-dom": "^17.0.26",
+    "date-fns": "^2.30.0",
+    "immutability-helper": "^3.1.1",
+    "lodash.debounce": "^4.0.8",
+    "lodash.defaultsdeep": "^4.6.1",
+    "lodash.isequal": "^4.5.0"
+  },
+  "files": [
+    "dist"
+  ],
+  "directories": {
+    "example": "example"
+  },
+  "bugs": {
+    "url": "https://gitlab.com/chirag.jain5/labsense-ui-kit/issues"
+  },
+  "homepage": ""
+}