@creativecodeco/ui 0.3.0 → 0.4.1

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,3 +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/button.types.d.ts

@@ -0,0 +1,15 @@
+/// <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;
+    loading?: boolean;
+    loadingLabel?: string;
+}
+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/radio.types.d.ts

@@ -1,7 +1,6 @@
 import type { ColorType, ErrorType, PositionType, SizeType } from '../../../types';
 export interface RadioItemType {
     label?: string;
-    checked?: boolean;
     value?: string | number;
 }
 export interface RadioType extends RadioItemType, ErrorType {

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,27 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useMemo } from 'react';
+import cls from 'classnames';
+import { useSafeButtonProps } from '../../../hooks';
+const Button = forwardRef(({ children, isLink, color, outline, size = 'md', icon: Icon, iconPosition = 'left', loading, loadingLabel, ...otherProps }, ref) => {
+    const safeProps = useSafeButtonProps({ loading, ...otherProps });
+    const newIcon = useMemo(() => {
+        if (!Icon) {
+            return;
+        }
+        return _jsx(Icon, {});
+    }, [Icon]);
+    const content = useMemo(() => {
+        if (loading) {
+            return (_jsxs(_Fragment, { children: [_jsx("span", { className: 'span-loading' }), loadingLabel] }));
+        }
+        return (_jsxs(_Fragment, { children: [iconPosition === 'left' && newIcon, children, iconPosition === 'right' && newIcon] }));
+    }, [loading, loadingLabel, iconPosition, children, newIcon]);
+    return (_jsx("button", { ref: ref, className: cls('button', {
+            'button-link': isLink,
+            'button-outline': !isLink && outline,
+            [`button-color-${color}`]: !isLink && color,
+            [`button-size-${size}`]: size !== 'md',
+            'button-loading': loading
+        }), ...safeProps, children: content }));
+});
+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/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/radio-list/radio-list.component.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Radio } from '../../../ui/forms';
+import { Radio } from '../radio';
 const RadioList = ({ name, options, isError, error, value, ...otherOptions }) => {
     if (!options || options.length === 0) {
         return;

package/package.json

@@ -10,7 +10,7 @@
     "framework design",
     "design system"
   ],
-  "version": "0.3.0",
+  "version": "0.4.1",
   "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/jest-dom": "6.2.1",
     "@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.1",
+    "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",