@dev-blinq/ui-systems 1.0.0 → 1.0.2

package/src/icons/mail.tsx

@@ -0,0 +1,23 @@
+interface MailIconProps {
+  style?: React.CSSProperties;
+}
+
+export const MailIcon = ({ style }: MailIconProps) => (
+  // edited the svg to style it with the props
+  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none" style={style}>
+    <path
+      d="M17.5 12.5786C17.5 14.8829 15.9627 16.7559 13.6819 16.7503H6.31811C4.0373 16.7559 2.5 14.8829 2.5 12.5786V7.42754C2.5 5.12565 4.0373 3.25024 6.31811 3.25024H13.6819C15.9627 3.25024 17.5 5.12565 17.5 7.42754V12.5786Z"
+      stroke="#939197"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M14.4267 7.63843L11.0943 10.3482C10.4667 10.8468 9.57726 10.8468 8.94968 10.3482L5.58887 7.63843"
+      stroke="#939197"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);

package/src/icons/password-eye.tsx

@@ -0,0 +1,10 @@
+export const PasswordEyeIcon = () => {
+  return (
+    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M4.44393 2.49455C4.36161 2.40174 4.26167 2.3262 4.14993 2.2723C4.0382 2.2184 3.91687 2.18722 3.79299 2.18055C3.66911 2.17389 3.54514 2.19188 3.42826 2.23348C3.31138 2.27508 3.20392 2.33946 3.11211 2.4229C3.0203 2.50634 2.94596 2.60716 2.89341 2.71954C2.84085 2.83192 2.81112 2.95361 2.80594 3.07756C2.80076 3.20152 2.82024 3.32526 2.86324 3.44163C2.90624 3.558 2.9719 3.66468 3.05643 3.75549L4.30643 5.13439C1.61503 6.92658 0.44706 9.49846 0.39081 9.61955C0.337882 9.73955 0.310547 9.86926 0.310547 10.0004C0.310547 10.1316 0.337882 10.2613 0.39081 10.3813C0.419716 10.4453 1.10409 11.9641 2.61659 13.4758C4.63847 15.4953 7.18769 16.5625 10.0002 16.5625C11.3671 16.5701 12.7217 16.3045 13.9846 15.7813L15.5541 17.5078C15.7222 17.6884 15.9547 17.7954 16.2011 17.8057C16.4476 17.816 16.6882 17.7288 16.8708 17.5628C17.0534 17.3969 17.1632 17.1657 17.1764 16.9194C17.1897 16.6731 17.1053 16.4314 16.9416 16.2469L4.44393 2.49455ZM10.0002 14.6875C7.68847 14.6875 5.66659 13.8492 3.99159 12.1969C3.33273 11.5445 2.7658 10.8054 2.30643 10C2.71815 9.27267 3.7744 7.66408 5.58768 6.53986L12.626 14.2828C11.7772 14.5539 10.8912 14.6904 10.0002 14.6875ZM19.6096 10.3813C19.5814 10.4445 18.9064 11.9438 17.4221 13.4406C17.3371 13.535 17.2338 13.6111 17.1185 13.6643C17.0032 13.7175 16.8783 13.7468 16.7513 13.7503C16.6244 13.7538 16.4981 13.7315 16.38 13.6847C16.2619 13.6378 16.1546 13.5675 16.0646 13.478C15.9745 13.3885 15.9036 13.2816 15.8561 13.1638C15.8086 13.046 15.7855 12.9198 15.7882 12.7929C15.791 12.6659 15.8195 12.5408 15.8721 12.4252C15.9246 12.3096 16.0001 12.2059 16.0939 12.1203C16.7175 11.4864 17.2554 10.7735 17.6939 10C17.2348 9.19443 16.6679 8.45531 16.0088 7.80314C14.333 6.1508 12.3119 5.31252 10.0002 5.31252C9.73847 5.31252 9.47675 5.32346 9.21894 5.34533C9.0947 5.35864 8.96905 5.34698 8.84938 5.31104C8.72971 5.27509 8.61844 5.21559 8.52209 5.13602C8.42575 5.05646 8.34628 4.95844 8.28837 4.84772C8.23045 4.737 8.19525 4.61583 8.18483 4.49131C8.17442 4.3668 8.189 4.24145 8.22772 4.12265C8.26644 4.00385 8.32851 3.89399 8.4103 3.79953C8.49208 3.70506 8.59193 3.6279 8.70396 3.57257C8.816 3.51725 8.93796 3.48488 9.06269 3.47736C9.36972 3.4508 9.68769 3.43752 10.0002 3.43752C12.8127 3.43752 15.3619 4.50549 17.3822 6.52502C18.8939 8.03674 19.5783 9.55627 19.6072 9.61955C19.6605 9.73938 19.6882 9.86901 19.6887 10.0002C19.6891 10.1313 19.6621 10.2611 19.6096 10.3813Z"
+        fill="#080808"
+      />
+    </svg>
+  );
+};

package/src/index.ts

@@ -1,3 +1,3 @@
-export { default as Button } from './components/CustomButton/CustomButton';
-export { default as CustomInput } from './components/CustomInput';
-export { default as CustomCheckbox } from './components/CustomCheckbox';
+export { default as Button } from "./components/CustomButton/CustomButton";
+export { default as CustomInput } from "./components/CustomInput/CustomInput";
+export { default as CustomCheckbox } from "./components/CustomCheckbox";

package/src/playground/App.tsx

@@ -1,11 +1,16 @@
 import React, { useState } from "react";
 import { Button, CustomInput, CustomCheckbox } from "../";
-import { ButtonSize, ButtonColorHierarchyType, buttonColorHierarchyArray } from "../components/CustomButton/CustomButtonTypes";
-
+import TypographyCustom from "../components/Typography/Typography";
+import {
+  ButtonSize,
+  ButtonColorHierarchyType,
+  buttonColorHierarchyArray,
+} from "../components/CustomButton/CustomButtonTypes";
+import { MailIcon } from "../icons/index";
 
 function extractPossibleChoices(type: ButtonColorHierarchyType): string[] {
-    console.log(type);
-    return [...new Set(type.split('|').map(t => t.trim()))];
+  console.log(type);
+  return [...new Set(type.split("|").map((t) => t.trim()))];
 }
 
 const App: React.FC = () => {
@@ -24,11 +29,7 @@ const App: React.FC = () => {
         <h2 className="controls-title">Controls</h2>
         <div className="control-item">
           <label htmlFor="size">Size</label>
-          <select
-            id="size"
-            value={size}
-            onChange={(e) => setSize(e.target.value as "sm" | "md" | "lg")}
-          >
+          <select id="size" value={size} onChange={(e) => setSize(e.target.value as "sm" | "md" | "lg")}>
             <option value="sm">Small</option>
             <option value="md">Medium</option>
             <option value="lg">Large</option>
@@ -42,31 +43,23 @@ const App: React.FC = () => {
             id="colorHierarchy"
             value={colorHierarchy}
             onChange={(e) => setColorHierarchy(e.target.value as ButtonColorHierarchyType)}
-            >
+          >
             {buttonColorHierarchyArray.map((colorHierarchy, index) => (
-              <option key={index} value={colorHierarchy}>{colorHierarchy}</option>
+              <option key={index} value={colorHierarchy}>
+                {colorHierarchy}
+              </option>
             ))}
-            </select>
+          </select>
         </div>
 
         <div className="control-item">
           <label htmlFor="disabled">Disabled</label>
-          <input
-            type="checkbox"
-            id="disabled"
-            checked={disabled}
-            onChange={(e) => setDisabled(e.target.checked)}
-          />
+          <input type="checkbox" id="disabled" checked={disabled} onChange={(e) => setDisabled(e.target.checked)} />
         </div>
 
         <div className="control-item">
           <label htmlFor="text">Text</label>
-          <input
-            type="text"
-            id="text"
-            value={text}
-            onChange={(e) => setText(e.target.value)}
-          />
+          <input type="text" id="text" value={text} onChange={(e) => setText(e.target.value)} />
         </div>
       </div>
 
@@ -77,25 +70,33 @@ const App: React.FC = () => {
           colorHierarchy={colorHierarchy}
           disabled={disabled}
           text={text}
+          leftIcon={MailIcon}
           onClick={() => alert("Button clicked!")}
         />
       </div>
 
       <div className="mb-4">
+        <h2 className="text-xl mb-2">Typography</h2>
+        <TypographyCustom category="text" Size="md" bold="semibold">
+          This is a custom typography component
+        </TypographyCustom>
+      </div>
+
+      <div className="mb-4" style={{ paddingLeft: "3em" }}>
         <h2 className="text-xl mb-2">Custom Input</h2>
         <CustomInput
           value={inputValue}
-          onChange={setInputValue}
+          leftIcon={MailIcon}
+          actionLabel="Send"
+          errExists={true}
+          onChange={(e: any) => setInputValue(e.target.value)}
+          label="Label"
           placeholder="Type here..."
         />
       </div>
       <div className="mb-4">
-        <h2 className="text-xl mb-2">Custom Checkbox</h2>
-        <CustomCheckbox
-          checked={checkboxChecked}
-          onChange={setCheckboxChecked}
-          label="Check me"
-        />
+        {/* <h2 className="text-xl mb-2">Custom Checkbox</h2> */}
+        {/* <CustomCheckbox checked={checkboxChecked} onChange={setCheckboxChecked} label="Check me" /> */}
       </div>
     </div>
   );

package/src/playground/main.tsx

@@ -1,8 +1,8 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import App from './App';
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App";
 
-ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
+ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
   <React.StrictMode>
     <App />
   </React.StrictMode>

package/src/svg.d.ts

@@ -0,0 +1,5 @@
+declare module "*.svg" {
+  import React, { ReactNode } from "react";
+  const SVGComponent: any;
+  export default SVGComponent;
+}

package/tsup.config.ts

@@ -0,0 +1,10 @@
+import { defineConfig } from "tsup";
+
+export default defineConfig({
+  entry: ["src/index.ts"],
+  format: ["cjs", "esm"], // Build for commonJS and ESmodules
+  dts: true, // Generate declaration file (.d.ts)
+  splitting: false,
+  sourcemap: true,
+  clean: true,
+});

package/src/components/CustomInput.tsx

@@ -1,22 +0,0 @@
-import React from 'react';
-
-type CustomInputProps = {
-  value: string;
-  onChange: (value: string) => void;
-  placeholder?: string;
-  disabled?: boolean;
-};
-
-const CustomInput: React.FC<CustomInputProps> = ({ value, onChange, placeholder, disabled }) => {
-  return (
-    <input
-      className="border py-2 px-4 rounded"
-      value={value}
-      onChange={(e) => onChange(e.target.value)}
-      placeholder={placeholder}
-      disabled={disabled}
-    />
-  );
-};
-
-export default CustomInput;

package/src/components/Typography/css/size.css

@@ -1 +0,0 @@
-/* text size css */

package/vite.config.ts

@@ -1,28 +0,0 @@
-import { defineConfig } from 'vite';
-import react from '@vitejs/plugin-react';
-
-export default defineConfig({
-  plugins: [react()],
-  build: {
-    lib: {
-      entry: 'src/index.ts',
-      name: 'CustomComponents',
-      fileName: (format) => `custom-components.${format}.js`
-    },
-    rollupOptions: {
-      external: ['react', 'react-dom'],
-      output: {
-        globals: {
-          react: 'React',
-          'react-dom': 'ReactDOM'
-        }
-      }
-    }
-  },
-  server: {
-    port: 3003, 
-    watch: {
-      usePolling: true,
-    },
-  },
-});