@creativecodeco/ui 0.0.5 → 0.2.0

package/lib/types/index.d.ts

@@ -1,2 +1,3 @@
-import { DropDownOption, DropDownType, TextBoxType, TextBoxRef } from './ui/forms';
-export type { DropDownOption, DropDownType, TextBoxType, TextBoxRef };
+export * from './ui/base';
+export * from './ui/components';
+export * from './ui/forms';

package/lib/types/index.js

@@ -1 +1,3 @@
-export {};
+export * from './ui/base';
+export * from './ui/components';
+export * from './ui/forms';

package/lib/types/ui/base/constants.types.d.ts

@@ -0,0 +1 @@
+export type SizeType = 'xs' | 'sm' | 'md' | 'lg';

package/lib/types/ui/base/error.types.d.ts

@@ -0,0 +1,4 @@
+export interface ErrorType {
+    isError?: boolean;
+    error?: string;
+}

package/lib/types/ui/base/error.types.js

@@ -0,0 +1 @@
+export {};

package/lib/types/ui/base/index.d.ts

@@ -0,0 +1,2 @@
+export type * from './constants.types';
+export type * from './error.types';

package/lib/types/ui/base/index.js

@@ -0,0 +1 @@
+export {};

package/lib/types/ui/components/avatar.types.d.ts

@@ -0,0 +1,9 @@
+import { SizeType } from '../../../types';
+export interface AvatarType {
+    src: string;
+    size?: SizeType;
+    withStatus?: boolean;
+    isOnline?: boolean;
+    rounded?: boolean;
+    ring?: boolean;
+}

package/lib/types/ui/components/avatar.types.js

@@ -0,0 +1 @@
+export {};

package/lib/types/ui/components/index.d.ts

@@ -0,0 +1,2 @@
+import { AvatarType } from './avatar.types';
+export type { AvatarType };

package/lib/types/ui/components/index.js

@@ -0,0 +1 @@
+export {};

package/lib/types/ui/forms/checkbox.types.d.ts

@@ -0,0 +1,11 @@
+import type { ErrorType, SizeType } from '../../../types';
+export interface CheckboxType extends ErrorType {
+    name: string;
+    label?: string;
+    checked?: boolean;
+    position?: 'left' | 'right';
+    color?: 'primary' | 'secondary' | 'accent' | 'success' | 'warning' | 'info' | 'error';
+    size?: SizeType;
+    disabled?: boolean;
+}
+export type CheckboxRef = HTMLInputElement;

package/lib/types/ui/forms/checkbox.types.js

@@ -0,0 +1 @@
+export {};

package/lib/types/ui/forms/{drop-down.types.d.ts → dropdown.types.d.ts}

@@ -1,11 +1,11 @@
 /// <reference types="react" />
 import { TextBoxType } from './text-box.types';
-export interface DropDownOption {
+export interface DropdownOption {
     value: string | number;
     label: string;
 }
-export interface DropDownType extends TextBoxType {
-    options?: DropDownOption[];
+export interface DropdownType extends TextBoxType {
+    options?: DropdownOption[];
     onChange?: (option: React.ChangeEvent<HTMLInputElement>) => void;
     onTextChange?: (text?: string) => void;
 }

package/lib/types/ui/forms/dropdown.types.js

@@ -0,0 +1 @@
+export {};

package/lib/types/ui/forms/index.d.ts

@@ -1,3 +1,3 @@
-import { DropDownOption, DropDownType } from './drop-down.types';
-import { TextBoxType, TextBoxRef } from './text-box.types';
-export type { DropDownOption, DropDownType, TextBoxType, TextBoxRef };
+export type * from './checkbox.types';
+export type * from './dropdown.types';
+export type * from './text-box.types';

package/lib/types/ui/forms/text-box.types.d.ts

@@ -1,12 +1,11 @@
 /// <reference types="react" />
 import type { IconType } from 'react-icons';
-export interface TextBoxType extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
+import type { ErrorType, SizeType } from '../../../types';
+export interface TextBoxType extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>, ErrorType {
     name: string;
     label?: string;
-    isError?: boolean;
-    error?: string;
     disabled?: boolean;
-    size?: 'xs' | 'sm' | 'md' | 'lg';
+    size?: SizeType;
     leftIcon?: IconType;
     rightIcon?: IconType;
     rightButton?: boolean;

package/lib/ui/components/avatar/avatar.component.d.ts

@@ -0,0 +1,3 @@
+import type { AvatarType } from '../../../types';
+declare const Avatar: ({ isOnline, ring, rounded, size, src, withStatus }: AvatarType) => import("react/jsx-runtime").JSX.Element;
+export default Avatar;

package/lib/ui/components/avatar/avatar.component.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import cls from 'classnames';
+import { getInitials, isValidUrl } from '../../../utils';
+const Avatar = ({ isOnline = false, ring = false, rounded = false, size = 'md', src, withStatus = false }) => {
+    const isUri = useMemo(() => isValidUrl(src), [src]);
+    const letters = useMemo(() => getInitials(src), [src, isUri]);
+    return (_jsx("div", { "data-testid": 'avatar', className: cls('avatar', {
+            online: withStatus && isOnline,
+            offline: withStatus && !isOnline,
+            placeholder: !isUri
+        }), children: _jsxs("div", { "data-testid": 'avatar-content', className: cls(`bg-neutral text-neutral-content avatar-size-${size}`, {
+                'rounded-full': rounded,
+                rounded: !rounded,
+                'avatar-ring': ring
+            }), children: [!isUri && _jsx("span", { children: letters }), isUri && _jsx("img", { src: src, alt: 'Avatar' })] }) }));
+};
+export default Avatar;

package/lib/ui/components/avatar/index.d.ts

@@ -0,0 +1,2 @@
+import Avatar from './avatar.component';
+export { Avatar };

package/lib/ui/components/avatar/index.js

@@ -0,0 +1,2 @@
+import Avatar from './avatar.component';
+export { Avatar };

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

@@ -0,0 +1 @@
+export * from './avatar';

package/lib/ui/components/index.js

@@ -0,0 +1 @@
+export * from './avatar';

package/lib/ui/forms/checkbox/checkbox.component.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { CheckboxType } from '../../../types';
+declare const Checkbox: React.ForwardRefExoticComponent<CheckboxType & React.RefAttributes<HTMLInputElement>>;
+export default Checkbox;

package/lib/ui/forms/checkbox/checkbox.component.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import cls from 'classnames';
+const Checkbox = forwardRef(({ name, label, isError, checked, disabled, error, position = 'left', color, size = 'md', ...otherProps }, ref) => {
+    const checkbox = () => (_jsx("input", { id: name, name: name, "data-testid": name, ref: ref, type: 'checkbox', checked: checked, className: cls('checkbox', {
+            [`checkbox-color-${color}`]: color,
+            [`checkbox-size-${size}`]: size
+        }), disabled: disabled, ...otherProps }));
+    return (_jsxs(_Fragment, { children: [_jsxs("label", { className: cls('label', {
+                    'cursor-pointer': !disabled,
+                    'cursor-not-allowed': disabled
+                }), children: [position === 'left' && checkbox(), label && _jsx("span", { className: 'label-text', children: label }), position === 'right' && checkbox()] }), isError && _jsx("p", { className: 'text-red-500', children: error })] }));
+});
+export default Checkbox;

package/lib/ui/forms/checkbox/index.d.ts

@@ -0,0 +1,2 @@
+import Checkbox from './checkbox.component';
+export { Checkbox };

package/lib/ui/forms/checkbox/index.js

@@ -0,0 +1,2 @@
+import Checkbox from './checkbox.component';
+export { Checkbox };

package/lib/ui/forms/dropdown/dropdown.component.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { DropdownType } from '../../../types';
+declare const Dropdown: React.ForwardRefExoticComponent<DropdownType & React.RefAttributes<HTMLInputElement>>;
+export default Dropdown;

package/lib/ui/forms/{drop-down/drop-down.component.js → dropdown/dropdown.component.js}

@@ -3,7 +3,7 @@ import { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'r
 import { FaSortDown } from 'react-icons/fa';
 import { useOnClickOutside } from 'usehooks-ts';
 import { TextBox } from '../../../ui/forms';
-const DropDown = forwardRef(({ name, options = [], disabled, onChange, onTextChange, value, ...otherProps }, ref) => {
+const Dropdown = forwardRef(({ name, options = [], disabled, onChange, onTextChange, value, ...otherProps }, ref) => {
     const [label, setLabel] = useState('');
     const [open, setOpen] = useState(false);
     const [valueFilter, setValueFilter] = useState();
@@ -21,9 +21,11 @@ const DropDown = forwardRef(({ name, options = [], disabled, onChange, onTextCha
         const option = options.find((option) => String(option.value) === String(value));
         if (!option) {
             setLabel('');
+            setValueFilter(undefined);
             return;
         }
         setLabel(option.label);
+        setValueFilter(option.label);
     }, [value]);
     const handleFocus = useCallback(() => {
         if (disabled) {
@@ -48,4 +50,4 @@ const DropDown = forwardRef(({ name, options = [], disabled, onChange, onTextCha
         : options.filter(({ label }) => label.includes(valueFilter)), [valueFilter, options]);
     return (_jsxs("div", { className: 'dropdown block', children: [_jsx(TextBox, { name: name, tabIndex: 0, ref: ref, disabled: disabled, rightButton: true, rightIcon: FaSortDown, onFocus: handleFocus, onChange: handleChange, ...otherProps, value: label }), open && (_jsx("ul", { tabIndex: 0, className: 'dropdown-content z-[1] menu w-full bg-base-100', id: `options-${name}`, ref: refOutside, role: 'listitem', "data-testid": `options-${name}`, children: filterOptions.map((option) => (_jsx("li", { value: option.value, onClick: () => handleSelect(option), children: _jsx("a", { children: option.label }) }, option.value))) }))] }));
 });
-export default DropDown;
+export default Dropdown;

package/lib/ui/forms/dropdown/index.d.ts

@@ -0,0 +1,2 @@
+import Dropdown from './dropdown.component';
+export { Dropdown };

package/lib/ui/forms/dropdown/index.js

@@ -0,0 +1,2 @@
+import Dropdown from './dropdown.component';
+export { Dropdown };

package/lib/ui/forms/index.d.ts

@@ -1,3 +1,3 @@
-import { DropDown } from '../../ui/forms/drop-down';
-import { TextBox } from '../../ui/forms/text-box';
-export { DropDown, TextBox };
+export * from '../../ui/forms/checkbox';
+export * from '../../ui/forms/dropdown';
+export * from '../../ui/forms/text-box';

package/lib/ui/forms/index.js

@@ -1,3 +1,3 @@
-import { DropDown } from '../../ui/forms/drop-down';
-import { TextBox } from '../../ui/forms/text-box';
-export { DropDown, TextBox };
+export * from '../../ui/forms/checkbox';
+export * from '../../ui/forms/dropdown';
+export * from '../../ui/forms/text-box';

package/lib/utils/index.d.ts

@@ -0,0 +1 @@
+export * from './string.utils';

package/lib/utils/index.js

@@ -0,0 +1 @@
+export * from './string.utils';

package/lib/utils/string.utils.d.ts

@@ -0,0 +1,51 @@
+/**
+ * Generates initials from the given name.
+ *
+ * @remarks
+ * This function takes a full name as input and returns the initials.
+ *
+ * @param name - The full name from which initials are generated.
+ * @returns The initials generated from the name.
+ *
+ * @example
+ * ```typescript
+ * // Example 1:
+ * const name1 = "John Doe";
+ * const initials1 = getInitials(name1);
+ * console.log(initials1); // Output: "JD"
+ *
+ * // Example 2:
+ * const name2 = "Alice Bob Charlie";
+ * const initials2 = getInitials(name2);
+ * console.log(initials2); // Output: "AC"
+ * ```
+ *
+ * @public
+ */
+export declare function getInitials(name: string): string;
+/**
+ * Checks whether the provided string is a valid URL.
+ *
+ * @param uri - The string to be checked as a URL.
+ * @returns A boolean indicating whether the provided string is a valid URL.
+ *
+ * @remarks
+ * This function uses the URL constructor to validate whether the input is a well-formed URL.
+ * It returns true if the URL is valid and false otherwise.
+ *
+ * @example
+ * ```typescript
+ * // Example 1:
+ * const url1 = "https://www.example.com";
+ * const isValid1 = isValidUrl(url1);
+ * console.log(isValid1); // Output: true
+ *
+ * // Example 2:
+ * const url2 = "not_a_valid_url";
+ * const isValid2 = isValidUrl(url2);
+ * console.log(isValid2); // Output: false
+ * ```
+ *
+ * @public
+ */
+export declare function isValidUrl(uri?: string): boolean;

package/lib/utils/string.utils.js

@@ -0,0 +1,75 @@
+/**
+ * Generates initials from the given name.
+ *
+ * @remarks
+ * This function takes a full name as input and returns the initials.
+ *
+ * @param name - The full name from which initials are generated.
+ * @returns The initials generated from the name.
+ *
+ * @example
+ * ```typescript
+ * // Example 1:
+ * const name1 = "John Doe";
+ * const initials1 = getInitials(name1);
+ * console.log(initials1); // Output: "JD"
+ *
+ * // Example 2:
+ * const name2 = "Alice Bob Charlie";
+ * const initials2 = getInitials(name2);
+ * console.log(initials2); // Output: "AC"
+ * ```
+ *
+ * @public
+ */
+export function getInitials(name) {
+    const words = name.split(' ');
+    const getCharAt = (word) => word.charAt(0).toUpperCase();
+    if (words.length === 1) {
+        return name.substring(0, 2).toUpperCase();
+    }
+    if (words.length === 2) {
+        return words.map(getCharAt).join('');
+    }
+    return words
+        .filter((_, index) => index % 2 === 0)
+        .map(getCharAt)
+        .join('');
+}
+/**
+ * Checks whether the provided string is a valid URL.
+ *
+ * @param uri - The string to be checked as a URL.
+ * @returns A boolean indicating whether the provided string is a valid URL.
+ *
+ * @remarks
+ * This function uses the URL constructor to validate whether the input is a well-formed URL.
+ * It returns true if the URL is valid and false otherwise.
+ *
+ * @example
+ * ```typescript
+ * // Example 1:
+ * const url1 = "https://www.example.com";
+ * const isValid1 = isValidUrl(url1);
+ * console.log(isValid1); // Output: true
+ *
+ * // Example 2:
+ * const url2 = "not_a_valid_url";
+ * const isValid2 = isValidUrl(url2);
+ * console.log(isValid2); // Output: false
+ * ```
+ *
+ * @public
+ */
+export function isValidUrl(uri) {
+    if (!uri) {
+        return false;
+    }
+    try {
+        new URL(uri);
+        return true;
+    }
+    catch (ignored) {
+        return false;
+    }
+}

package/package.json

@@ -1,15 +1,16 @@
 {
   "name": "@creativecodeco/ui",
-  "description": "CreativeCode.com.co UI",
+  "description": "System Design CreativeCode.com.co",
   "keywords": [
-    "CreativeCode.com.co",
+    "creativeCode.com.co",
     "creativecodeco/ui",
-    "Tailwindcss",
-    "Daisyui",
-    "UI",
-    "Framework Design"
+    "tailwindcss",
+    "daisyui",
+    "ui",
+    "framework design",
+    "design system"
   ],
-  "version": "0.0.5",
+  "version": "0.2.0",
   "homepage": "https://github.com/creativecodeco/ui",
   "author": {
     "name": "John Toro",
@@ -46,9 +47,17 @@
     "tailwindcss": "3.4.0",
     "usehooks-ts": "2.9.1"
   },
+  "dependencies": {
+    "postcss": "8.4.33",
+    "postcss-import": "16.0.0",
+    "react": "18.2.0",
+    "react-hook-form": "7.49.3",
+    "tailwindcss": "3.4.1",
+    "usehooks-ts": "2.9.2"
+  },
   "devDependencies": {
     "@babel/core": "7.23.7",
-    "@babel/preset-env": "7.23.7",
+    "@babel/preset-env": "7.23.8",
     "@babel/preset-react": "7.23.3",
     "@babel/preset-typescript": "7.23.3",
     "@jest/globals": "29.7.0",
@@ -60,20 +69,20 @@
     "@storybook/react": "7.6.7",
     "@storybook/react-webpack5": "7.6.7",
     "@storybook/test": "7.6.7",
-    "@testing-library/dom": "9.3.3",
-    "@testing-library/jest-dom": "6.1.6",
+    "@testing-library/dom": "9.3.4",
+    "@testing-library/jest-dom": "6.2.0",
     "@testing-library/react": "14.1.2",
     "@testing-library/user-event": "14.5.2",
     "@types/jest": "29.5.11",
-    "@types/node": "20.10.6",
-    "@types/react": "18.2.46",
+    "@types/node": "20.10.8",
+    "@types/react": "18.2.47",
     "@types/react-dom": "18.2.18",
-    "@typescript-eslint/eslint-plugin": "6.17.0",
+    "@typescript-eslint/eslint-plugin": "6.18.1",
     "autoprefixer": "10.4.16",
-    "chromatic": "10.2.0",
+    "chromatic": "10.2.1",
     "classnames": "2.5.1",
     "cpx2": "7.0.1",
-    "daisyui": "4.4.24",
+    "daisyui": "4.5.0",
     "eslint": "8.56.0",
     "eslint-config-prettier": "9.1.0",
     "eslint-config-standard": "17.1.0",
@@ -81,9 +90,9 @@
     "eslint-config-standard-with-typescript": "43.0.0",
     "eslint-plugin-import": "2.29.1",
     "eslint-plugin-import-order": "2.1.4",
-    "eslint-plugin-n": "16.6.1",
+    "eslint-plugin-n": "16.6.2",
     "eslint-plugin-node": "11.1.0",
-    "eslint-plugin-prettier": "5.1.2",
+    "eslint-plugin-prettier": "5.1.3",
     "eslint-plugin-promise": "6.1.1",
     "eslint-plugin-react": "7.33.2",
     "eslint-plugin-standard": "5.0.0",
@@ -94,25 +103,19 @@
     "jest-environment-jsdom": "29.7.0",
     "jest-junit": "16.0.0",
     "jest-transform-css": "6.0.1",
-    "postcss": "8.4.32",
-    "postcss-cli": "11.0.0",
-    "postcss-import": "15.1.0",
+    "postcss-cli": "^11.0.0",
     "prettier": "3.1.1",
     "prop-types": "15.8.1",
-    "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-hook-form": "7.49.2",
-    "react-icons": "4.12.0",
+    "react-icons": "5.0.0",
     "storybook": "7.6.7",
     "storybook-addon-themes": "6.1.0",
     "string-width": "7.0.0",
-    "tailwindcss": "3.4.0",
     "ts-jest": "29.1.1",
     "ts-node": "10.9.2",
     "tsc-alias": "1.8.8",
     "tsconfig-paths-webpack-plugin": "4.1.0",
-    "typescript": "5.3.3",
-    "usehooks-ts": "2.9.1"
+    "typescript": "5.3.3"
   },
   "files": [
     "lib"

package/lib/ui/forms/drop-down/drop-down.component.d.ts

@@ -1,4 +0,0 @@
-import React from 'react';
-import type { DropDownType } from '../../../types';
-declare const DropDown: React.ForwardRefExoticComponent<DropDownType & React.RefAttributes<HTMLInputElement>>;
-export default DropDown;

package/lib/ui/forms/drop-down/index.d.ts

@@ -1,2 +0,0 @@
-import DropDown from './drop-down.component';
-export { DropDown };

package/lib/ui/forms/drop-down/index.js

@@ -1,2 +0,0 @@
-import DropDown from './drop-down.component';
-export { DropDown };