From 405a398c6b0eac5141740860c29cbd63a0dfc232 Mon Sep 17 00:00:00 2001 From: sriram veeraghanta Date: Fri, 29 Sep 2023 17:33:17 +0530 Subject: [PATCH] feat: adding additional ui components --- packages/ui/dist/index.d.ts | 23 ++++- packages/ui/dist/index.js | 88 +++++++++++++++++++- packages/ui/dist/index.mjs | 84 ++++++++++++++++++- packages/ui/src/form-fields/index.tsx | 1 + packages/ui/src/form-fields/textarea.tsx | 11 ++- packages/ui/src/index.tsx | 1 + packages/ui/src/progress/index.tsx | 1 + packages/ui/src/progress/radial-progress.tsx | 45 ++++++++++ 8 files changed, 246 insertions(+), 8 deletions(-) create mode 100644 packages/ui/src/progress/index.tsx create mode 100644 packages/ui/src/progress/radial-progress.tsx diff --git a/packages/ui/dist/index.d.ts b/packages/ui/dist/index.d.ts index 8fbac38bd..d5161da6c 100644 --- a/packages/ui/dist/index.d.ts +++ b/packages/ui/dist/index.d.ts @@ -1,4 +1,5 @@ import * as React from 'react'; +import { FC } from 'react'; declare const Button: () => JSX.Element; @@ -17,4 +18,24 @@ interface InputProps { } declare const Input: React.ForwardRefExoticComponent>; -export { Button, Input, InputProps }; +interface TextAreaProps { + id: string; + name: string; + placeholder?: string; + value?: string; + rows?: number; + cols?: number; + disabled?: boolean; + onChange: () => void; + mode?: "primary" | "transparent"; + hasError?: boolean; + className?: string; +} +declare const TextArea: React.ForwardRefExoticComponent>; + +interface IRadialProgressBar { + progress: number; +} +declare const RadialProgressBar: FC; + +export { Button, Input, InputProps, RadialProgressBar, TextArea, TextAreaProps }; diff --git a/packages/ui/dist/index.js b/packages/ui/dist/index.js index 8371035d1..e9c8d0e60 100644 --- a/packages/ui/dist/index.js +++ b/packages/ui/dist/index.js @@ -27,7 +27,9 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru var src_exports = {}; __export(src_exports, { Button: () => Button, - Input: () => Input + Input: () => Input, + RadialProgressBar: () => RadialProgressBar, + TextArea: () => TextArea }); module.exports = __toCommonJS(src_exports); @@ -66,8 +68,90 @@ var Input = React2.forwardRef((props, ref) => { }); }); Input.displayName = "form-input-field"; + +// src/form-fields/textarea.tsx +var React3 = __toESM(require("react")); +var useAutoSizeTextArea = (textAreaRef, value) => { + React3.useEffect(() => { + if (textAreaRef) { + textAreaRef.style.height = "0px"; + const scrollHeight = textAreaRef.scrollHeight; + textAreaRef.style.height = scrollHeight + "px"; + } + }, [textAreaRef, value]); +}; +var TextArea = React3.forwardRef( + (props, ref) => { + const { + id, + name, + placeholder = "", + value = "", + rows = 1, + cols = 1, + disabled, + onChange, + mode = "primary", + hasError = false, + className = "" + } = props; + const textAreaRef = React3.useRef(ref); + ref && useAutoSizeTextArea(textAreaRef == null ? void 0 : textAreaRef.current, value); + return /* @__PURE__ */ React3.createElement("textarea", { + id, + name, + ref: textAreaRef, + placeholder, + value, + rows, + cols, + disabled, + onChange, + className: `no-scrollbar w-full bg-transparent placeholder-custom-text-400 px-3 py-2 outline-none ${mode === "primary" ? "rounded-md border border-custom-border-200" : mode === "transparent" ? "rounded border-none bg-transparent ring-0 transition-all focus:ring-1 focus:ring-theme" : ""} ${hasError ? "border-red-500" : ""} ${hasError && mode === "primary" ? "bg-red-100" : ""} ${className}` + }); + } +); + +// src/progress/radial-progress.tsx +var import_react = __toESM(require("react")); +var RadialProgressBar = (props) => { + const { progress } = props; + const [circumference, setCircumference] = (0, import_react.useState)(0); + (0, import_react.useEffect)(() => { + const radius = 40; + const circumference2 = 2 * Math.PI * radius; + setCircumference(circumference2); + }, []); + const progressOffset = (100 - progress) / 100 * circumference; + return /* @__PURE__ */ import_react.default.createElement("div", { + className: "relative h-4 w-4" + }, /* @__PURE__ */ import_react.default.createElement("svg", { + className: "absolute top-0 left-0", + viewBox: "0 0 100 100" + }, /* @__PURE__ */ import_react.default.createElement("circle", { + className: "stroke-current opacity-10", + cx: "50", + cy: "50", + r: "40", + strokeWidth: "12", + fill: "none", + strokeDasharray: `${circumference} ${circumference}` + }), /* @__PURE__ */ import_react.default.createElement("circle", { + className: `stroke-current`, + cx: "50", + cy: "50", + r: "40", + strokeWidth: "12", + fill: "none", + strokeDasharray: `${circumference} ${circumference}`, + strokeDashoffset: progressOffset, + transform: "rotate(-90 50 50)" + }))); +}; // Annotate the CommonJS export names for ESM import in node: 0 && (module.exports = { Button, - Input + Input, + RadialProgressBar, + TextArea }); diff --git a/packages/ui/dist/index.mjs b/packages/ui/dist/index.mjs index 55db46eed..ed0946a33 100644 --- a/packages/ui/dist/index.mjs +++ b/packages/ui/dist/index.mjs @@ -33,7 +33,89 @@ var Input = React2.forwardRef((props, ref) => { }); }); Input.displayName = "form-input-field"; + +// src/form-fields/textarea.tsx +import * as React3 from "react"; +var useAutoSizeTextArea = (textAreaRef, value) => { + React3.useEffect(() => { + if (textAreaRef) { + textAreaRef.style.height = "0px"; + const scrollHeight = textAreaRef.scrollHeight; + textAreaRef.style.height = scrollHeight + "px"; + } + }, [textAreaRef, value]); +}; +var TextArea = React3.forwardRef( + (props, ref) => { + const { + id, + name, + placeholder = "", + value = "", + rows = 1, + cols = 1, + disabled, + onChange, + mode = "primary", + hasError = false, + className = "" + } = props; + const textAreaRef = React3.useRef(ref); + ref && useAutoSizeTextArea(textAreaRef == null ? void 0 : textAreaRef.current, value); + return /* @__PURE__ */ React3.createElement("textarea", { + id, + name, + ref: textAreaRef, + placeholder, + value, + rows, + cols, + disabled, + onChange, + className: `no-scrollbar w-full bg-transparent placeholder-custom-text-400 px-3 py-2 outline-none ${mode === "primary" ? "rounded-md border border-custom-border-200" : mode === "transparent" ? "rounded border-none bg-transparent ring-0 transition-all focus:ring-1 focus:ring-theme" : ""} ${hasError ? "border-red-500" : ""} ${hasError && mode === "primary" ? "bg-red-100" : ""} ${className}` + }); + } +); + +// src/progress/radial-progress.tsx +import React4, { useState, useEffect as useEffect2 } from "react"; +var RadialProgressBar = (props) => { + const { progress } = props; + const [circumference, setCircumference] = useState(0); + useEffect2(() => { + const radius = 40; + const circumference2 = 2 * Math.PI * radius; + setCircumference(circumference2); + }, []); + const progressOffset = (100 - progress) / 100 * circumference; + return /* @__PURE__ */ React4.createElement("div", { + className: "relative h-4 w-4" + }, /* @__PURE__ */ React4.createElement("svg", { + className: "absolute top-0 left-0", + viewBox: "0 0 100 100" + }, /* @__PURE__ */ React4.createElement("circle", { + className: "stroke-current opacity-10", + cx: "50", + cy: "50", + r: "40", + strokeWidth: "12", + fill: "none", + strokeDasharray: `${circumference} ${circumference}` + }), /* @__PURE__ */ React4.createElement("circle", { + className: `stroke-current`, + cx: "50", + cy: "50", + r: "40", + strokeWidth: "12", + fill: "none", + strokeDasharray: `${circumference} ${circumference}`, + strokeDashoffset: progressOffset, + transform: "rotate(-90 50 50)" + }))); +}; export { Button, - Input + Input, + RadialProgressBar, + TextArea }; diff --git a/packages/ui/src/form-fields/index.tsx b/packages/ui/src/form-fields/index.tsx index 4ce4a8893..01cd4edea 100644 --- a/packages/ui/src/form-fields/index.tsx +++ b/packages/ui/src/form-fields/index.tsx @@ -1 +1,2 @@ export * from "./input"; +export * from "./textarea"; diff --git a/packages/ui/src/form-fields/textarea.tsx b/packages/ui/src/form-fields/textarea.tsx index 45ef24372..e9b748230 100644 --- a/packages/ui/src/form-fields/textarea.tsx +++ b/packages/ui/src/form-fields/textarea.tsx @@ -2,10 +2,11 @@ import * as React from "react"; export interface TextAreaProps { id: string; + name: string; placeholder?: string; value?: string; - rows: number; - cols: number; + rows?: number; + cols?: number; disabled?: boolean; onChange: () => void; mode?: "primary" | "transparent"; @@ -35,10 +36,11 @@ const TextArea = React.forwardRef( (props, ref) => { const { id, + name, placeholder = "", value = "", - rows, - cols, + rows = 1, + cols = 1, disabled, onChange, mode = "primary", @@ -53,6 +55,7 @@ const TextArea = React.forwardRef( return (