@creativecodeco/ui 0.2.0 → 0.4.0

package/lib/types/index.d.ts

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

package/lib/types/index.js

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

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

@@ -1 +1,4 @@
 export type SizeType = 'xs' | 'sm' | 'md' | 'lg';
+export type ColorType = 'primary' | 'secondary' | 'accent' | 'success' | 'warning' | 'info' | 'error';
+export type ColorButtonType = 'primary' | 'secondary' | 'accent' | 'success' | 'warning' | 'info' | 'error' | 'ghost' | 'neutral';
+export type PositionType = 'left' | 'right';

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

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export type ButtonEvent = React.MouseEvent<HTMLButtonElement, MouseEvent>;
+export type ButtonEventHandler = React.MouseEventHandler<HTMLButtonElement>;

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

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

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

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

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

@@ -1,4 +1,4 @@
-import { SizeType } from '../../../types';
+import type { SizeType } from '../../../types';
 export interface AvatarType {
     src: string;
     size?: SizeType;

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

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import type { ColorButtonType, SizeType } from '../../../types';
+import type { IconType } from 'react-icons';
+import type { PositionType } from '../../../types';
+export interface ButtonType extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    isLink?: boolean;
+    color?: ColorButtonType;
+    outline?: boolean;
+    size?: SizeType;
+    icon?: IconType;
+    iconPosition?: PositionType;
+}
+export type ButtonRef = HTMLButtonElement;

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

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

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

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

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

@@ -1,11 +1,17 @@
-import type { ErrorType, SizeType } from '../../../types';
-export interface CheckboxType extends ErrorType {
+import type { ColorType, ErrorType, PositionType, SizeType } from '../../../types';
+export interface CheckboxItemType {
+    label?: string;
+    checked?: boolean;
+    value: string | number;
+}
+export interface CheckboxType extends CheckboxItemType, ErrorType {
     name: string;
     label?: string;
     checked?: boolean;
-    position?: 'left' | 'right';
-    color?: 'primary' | 'secondary' | 'accent' | 'success' | 'warning' | 'info' | 'error';
+    position?: PositionType;
+    color?: ColorType;
     size?: SizeType;
     disabled?: boolean;
+    onChange?: (value: CheckboxItemType) => void;
 }
 export type CheckboxRef = HTMLInputElement;

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

@@ -1,3 +1,4 @@
 export type * from './checkbox.types';
 export type * from './dropdown.types';
+export type * from './radio.types';
 export type * from './text-box.types';

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

@@ -0,0 +1,19 @@
+import type { ColorType, ErrorType, PositionType, SizeType } from '../../../types';
+export interface RadioItemType {
+    label?: string;
+    value?: string | number;
+}
+export interface RadioType extends RadioItemType, ErrorType {
+    name: string;
+    label?: string;
+    checked?: boolean;
+    position?: PositionType;
+    color?: ColorType;
+    size?: SizeType;
+    disabled?: boolean;
+    onChange?: (value: RadioItemType) => void;
+}
+export type RadioRef = HTMLInputElement;
+export interface RadioListType extends RadioType {
+    options: Omit<RadioType, 'name'>[];
+}

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

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

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

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

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

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import cls from 'classnames';
+import { useSafeButtonProps } from '../../../hooks';
+const Button = forwardRef(({ children, isLink, color, outline, size = 'md', icon: Icon, iconPosition = 'left', disabled, ...otherProps }, ref) => {
+    const safeProps = useSafeButtonProps({ disabled, ...otherProps });
+    const getIcon = () => {
+        if (!Icon) {
+            return;
+        }
+        return _jsx(Icon, {});
+    };
+    return (_jsxs("button", { ref: ref, className: cls('button', {
+            'button-link': isLink,
+            'button-outline': !isLink && outline,
+            [`button-color-${color}`]: !isLink && color,
+            [`button-size-${size}`]: size !== 'md'
+        }), ...safeProps, children: [iconPosition === 'left' && getIcon(), children, iconPosition === 'right' && getIcon()] }));
+});
+export default Button;

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

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

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

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

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

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

package/lib/ui/components/index.js

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

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

@@ -1,11 +1,18 @@
 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', {
+const Checkbox = forwardRef(({ name, label, isError, disabled, error, position = 'left', color, size = 'md', checked, value, onChange, ...otherProps }, ref) => {
+    const handleChange = (e) => {
+        onChange?.({
+            isChecked: e.target.checked,
+            value,
+            label
+        });
+    };
+    const checkbox = () => (_jsx("input", { id: name, name: name, "data-testid": name, ref: ref, type: 'checkbox', className: cls('checkbox', {
             [`checkbox-color-${color}`]: color,
             [`checkbox-size-${size}`]: size
-        }), disabled: disabled, ...otherProps }));
+        }), disabled: disabled, checked: checked, onChange: handleChange, ...otherProps }));
     return (_jsxs(_Fragment, { children: [_jsxs("label", { className: cls('label', {
                     'cursor-pointer': !disabled,
                     'cursor-not-allowed': disabled

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

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { FaSortDown } from 'react-icons/fa';
 import { useOnClickOutside } from 'usehooks-ts';
-import { TextBox } from '../../../ui/forms';
+import { TextBox } from '../text-box';
 const Dropdown = forwardRef(({ name, options = [], disabled, onChange, onTextChange, value, ...otherProps }, ref) => {
     const [label, setLabel] = useState('');
     const [open, setOpen] = useState(false);

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

@@ -1,3 +1,5 @@
 export * from '../../ui/forms/checkbox';
 export * from '../../ui/forms/dropdown';
+export * from '../../ui/forms/radio';
+export * from '../../ui/forms/radio-list';
 export * from '../../ui/forms/text-box';

package/lib/ui/forms/index.js

@@ -1,3 +1,5 @@
 export * from '../../ui/forms/checkbox';
 export * from '../../ui/forms/dropdown';
+export * from '../../ui/forms/radio';
+export * from '../../ui/forms/radio-list';
 export * from '../../ui/forms/text-box';

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

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

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

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

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

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

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

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

package/lib/ui/forms/radio-list/index.d.ts

@@ -0,0 +1,2 @@
+import RadioList from './radio-list.component';
+export { RadioList };

package/lib/ui/forms/radio-list/index.js

@@ -0,0 +1,2 @@
+import RadioList from './radio-list.component';
+export { RadioList };

package/lib/ui/forms/radio-list/radio-list.component.d.ts

@@ -0,0 +1,3 @@
+import type { RadioListType } from '../../../types';
+declare const RadioList: ({ name, options, isError, error, value, ...otherOptions }: RadioListType) => import("react/jsx-runtime").JSX.Element | undefined;
+export default RadioList;

package/lib/ui/forms/radio-list/radio-list.component.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Radio } from '../radio';
+const RadioList = ({ name, options, isError, error, value, ...otherOptions }) => {
+    if (!options || options.length === 0) {
+        return;
+    }
+    return (_jsxs("div", { className: 'form-control', children: [options.map((option) => (_jsx(Radio, { name: name, ...option, ...otherOptions, checked: String(option.value) === String(value) }, option.value))), isError && _jsx("p", { className: 'text-red-500', children: error })] }));
+};
+export default RadioList;

package/package.json

@@ -10,7 +10,7 @@
     "framework design",
     "design system"
   ],
-  "version": "0.2.0",
+  "version": "0.4.0",
   "homepage": "https://github.com/creativecodeco/ui",
   "author": {
     "name": "John Toro",
@@ -53,7 +53,7 @@
     "react": "18.2.0",
     "react-hook-form": "7.49.3",
     "tailwindcss": "3.4.1",
-    "usehooks-ts": "2.9.2"
+    "usehooks-ts": "2.9.5"
   },
   "devDependencies": {
     "@babel/core": "7.23.7",
@@ -61,33 +61,33 @@
     "@babel/preset-react": "7.23.3",
     "@babel/preset-typescript": "7.23.3",
     "@jest/globals": "29.7.0",
-    "@storybook/addon-essentials": "7.6.7",
-    "@storybook/addon-interactions": "7.6.7",
-    "@storybook/addon-links": "7.6.7",
-    "@storybook/addon-mdx-gfm": "7.6.7",
-    "@storybook/blocks": "7.6.7",
-    "@storybook/react": "7.6.7",
-    "@storybook/react-webpack5": "7.6.7",
-    "@storybook/test": "7.6.7",
+    "@storybook/addon-essentials": "7.6.10",
+    "@storybook/addon-interactions": "7.6.10",
+    "@storybook/addon-links": "7.6.10",
+    "@storybook/addon-mdx-gfm": "7.6.10",
+    "@storybook/blocks": "7.6.10",
+    "@storybook/react": "7.6.10",
+    "@storybook/react-webpack5": "7.6.10",
+    "@storybook/test": "7.6.10",
     "@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.8",
-    "@types/react": "18.2.47",
+    "@types/node": "20.11.5",
+    "@types/react": "18.2.48",
     "@types/react-dom": "18.2.18",
-    "@typescript-eslint/eslint-plugin": "6.18.1",
-    "autoprefixer": "10.4.16",
-    "chromatic": "10.2.1",
+    "@typescript-eslint/eslint-plugin": "6.19.0",
+    "autoprefixer": "10.4.17",
+    "chromatic": "10.3.1",
     "classnames": "2.5.1",
     "cpx2": "7.0.1",
-    "daisyui": "4.5.0",
+    "daisyui": "4.6.0",
     "eslint": "8.56.0",
     "eslint-config-prettier": "9.1.0",
     "eslint-config-standard": "17.1.0",
     "eslint-config-standard-react": "13.0.0",
-    "eslint-config-standard-with-typescript": "43.0.0",
+    "eslint-config-standard-with-typescript": "43.0.1",
     "eslint-plugin-import": "2.29.1",
     "eslint-plugin-import-order": "2.1.4",
     "eslint-plugin-n": "16.6.2",
@@ -103,15 +103,15 @@
     "jest-environment-jsdom": "29.7.0",
     "jest-junit": "16.0.0",
     "jest-transform-css": "6.0.1",
-    "postcss-cli": "^11.0.0",
-    "prettier": "3.1.1",
+    "postcss-cli": "11.0.0",
+    "prettier": "3.2.4",
     "prop-types": "15.8.1",
     "react-dom": "18.2.0",
-    "react-icons": "5.0.0",
-    "storybook": "7.6.7",
+    "react-icons": "5.0.1",
+    "storybook": "7.6.10",
     "storybook-addon-themes": "6.1.0",
-    "string-width": "7.0.0",
-    "ts-jest": "29.1.1",
+    "string-width": "7.1.0",
+    "ts-jest": "29.1.2",
     "ts-node": "10.9.2",
     "tsc-alias": "1.8.8",
     "tsconfig-paths-webpack-plugin": "4.1.0",