@creativecodeco/ui 0.4.2 → 0.6.0

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

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+export interface AccordionType {
+    name: string;
+    iconType?: 'arrow' | 'plus';
+    join?: boolean;
+    multiple?: boolean;
+    options: AccordionOption[];
+}
+export interface AccordionOption {
+    header: React.ReactElement;
+    body: React.ReactElement;
+}

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

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

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

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import type { ColorType, SizeType } from '../../../types';
+import type { IconType } from 'react-icons';
+import type { PositionType } from '../../../types';
+export interface BadgeType {
+    children: React.ReactNode;
+    color?: ColorType;
+    outline?: boolean;
+    size?: SizeType;
+    icon?: IconType;
+    iconPosition?: PositionType;
+}

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

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

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import type { ColorButtonType, SizeType } from '../../../types';
+import type { BadgeType, ColorButtonType, SizeType } from '../../../types';
 import type { IconType } from 'react-icons';
 import type { PositionType } from '../../../types';
 export interface ButtonType extends React.ButtonHTMLAttributes<HTMLButtonElement> {
@@ -11,5 +11,8 @@ export interface ButtonType extends React.ButtonHTMLAttributes<HTMLButtonElement
     iconPosition?: PositionType;
     loading?: boolean;
     loadingLabel?: string;
+    withBadge?: boolean;
+    badge?: React.ReactNode;
+    badgeProps?: Omit<BadgeType, 'children' | 'size'>;
 }
 export type ButtonRef = HTMLButtonElement;

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

@@ -1,2 +1,4 @@
+export type * from './accordion.types';
 export type * from './avatar.types';
+export type * from './badge.types';
 export type * from './button.types';

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

@@ -0,0 +1,3 @@
+import type { AccordionType } from '../../../types';
+declare const Accordion: ({ name, join, options, iconType, multiple }: AccordionType) => import("react/jsx-runtime").JSX.Element;
+export default Accordion;

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

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import cls from 'classnames';
+const Accordion = ({ name, join, options, iconType = 'arrow', multiple }) => {
+    return (_jsx("div", { className: cls('flex flex-wrap', {
+            'join join-vertical w-full': join,
+            'gap-2': !join
+        }), children: options.map(({ header, body }, index) => (_jsxs("div", { className: cls('collapse bg-base-200', {
+                [`accordion-type-${iconType}`]: iconType,
+                'join-item border border-base-300': join
+            }), children: [_jsx("input", { type: multiple ? 'checkbox' : 'radio', name: name }), _jsx("div", { className: 'collapse-title text-xl font-medium', children: header }), _jsx("div", { className: 'collapse-content', children: body })] }, index))) }));
+};
+export default Accordion;

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

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

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

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

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

@@ -0,0 +1,3 @@
+import type { BadgeType } from '../../../types';
+declare const Badge: ({ children, color, icon: Icon, iconPosition, outline, size }: BadgeType) => import("react/jsx-runtime").JSX.Element;
+export default Badge;

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

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import cls from 'classnames';
+const Badge = ({ children, color, icon: Icon, iconPosition = 'left', outline, size = 'md' }) => {
+    const newIcon = useMemo(() => {
+        if (!Icon) {
+            return;
+        }
+        return _jsx(Icon, {});
+    }, [Icon]);
+    return (_jsxs("div", { className: cls('badge', {
+            [`badge-color-${color}`]: !outline && color,
+            [`badge-${color}`]: outline && color,
+            'badge-outline': outline,
+            [`badge-size-${size}`]: size !== 'md',
+            'gap-2': Icon
+        }), children: [iconPosition === 'left' && newIcon, children, iconPosition === 'right' && newIcon] }));
+};
+export default Badge;

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

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

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

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

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

@@ -16,10 +16,11 @@ const Button = forwardRef(({ children, isLink, color, outline, size = 'md', icon
         }
         return (_jsxs(_Fragment, { children: [iconPosition === 'left' && newIcon, children, iconPosition === 'right' && newIcon] }));
     }, [loading, loadingLabel, iconPosition, children, newIcon]);
-    return (_jsx("button", { ref: ref, className: cls('button', {
+    return (_jsx("button", { ref: ref, className: cls('btn', {
             'button-link': isLink,
-            'button-outline': !isLink && outline,
-            [`button-color-${color}`]: !isLink && color,
+            'btn-outline': !isLink && outline,
+            [`btn-${color}`]: outline && color,
+            [`button-color-${color}`]: !outline && color,
             [`button-size-${size}`]: size !== 'md',
             'button-loading': loading
         }), ...safeProps, children: content }));

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

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

package/lib/ui/components/index.js

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

package/package.json

@@ -10,7 +10,7 @@
     "framework design",
     "design system"
   ],
-  "version": "0.4.2",
+  "version": "0.6.0",
   "homepage": "https://github.com/creativecodeco/ui",
   "author": {
     "name": "John Toro",
@@ -20,7 +20,7 @@
   "main": "lib/index.js",
   "source": "src/index.ts",
   "scripts": {
-    "dev": "npm run storybook",
+    "dev": "npm run build; npm run storybook",
     "dev:css": "postcss src/theme/main.css -o lib/theme/main.css --watch",
     "build": "rm -rf lib; tsc -p tsconfig.build.json; npm run build:alias; npm run build:css",
     "build:alias": "tsc-alias -p tsconfig.build.json",
@@ -48,42 +48,42 @@
     "usehooks-ts": "2.9.1"
   },
   "dependencies": {
-    "postcss": "8.4.34",
-    "postcss-import": "16.0.0",
+    "postcss": "8.4.35",
+    "postcss-import": "16.0.1",
     "react": "18.2.0",
     "react-hook-form": "7.50.1",
     "tailwindcss": "3.4.1",
-    "usehooks-ts": "2.13.0"
+    "usehooks-ts": "2.15.1"
   },
   "devDependencies": {
-    "@babel/core": "7.23.9",
-    "@babel/preset-env": "7.23.9",
+    "@babel/core": "7.24.0",
+    "@babel/preset-env": "7.24.0",
     "@babel/preset-react": "7.23.3",
     "@babel/preset-typescript": "7.23.3",
     "@jest/globals": "29.7.0",
-    "@storybook/addon-essentials": "7.6.12",
-    "@storybook/addon-interactions": "7.6.12",
-    "@storybook/addon-links": "7.6.12",
-    "@storybook/addon-mdx-gfm": "7.6.12",
-    "@storybook/blocks": "7.6.12",
-    "@storybook/react": "7.6.12",
-    "@storybook/react-webpack5": "7.6.12",
-    "@storybook/test": "7.6.12",
+    "@storybook/addon-essentials": "7.6.17",
+    "@storybook/addon-interactions": "7.6.17",
+    "@storybook/addon-links": "7.6.17",
+    "@storybook/addon-mdx-gfm": "7.6.17",
+    "@storybook/blocks": "7.6.17",
+    "@storybook/react": "7.6.17",
+    "@storybook/react-webpack5": "7.6.17",
+    "@storybook/test": "7.6.17",
     "@testing-library/dom": "9.3.4",
     "@testing-library/jest-dom": "6.4.2",
     "@testing-library/react": "14.2.1",
     "@testing-library/user-event": "14.5.2",
     "@types/jest": "29.5.12",
-    "@types/node": "20.11.16",
-    "@types/react": "18.2.55",
-    "@types/react-dom": "18.2.18",
+    "@types/node": "20.11.24",
+    "@types/react": "18.2.61",
+    "@types/react-dom": "18.2.19",
     "@typescript-eslint/eslint-plugin": "6.21.0",
     "autoprefixer": "10.4.17",
-    "chromatic": "10.7.1",
+    "chromatic": "11.0.0",
     "classnames": "2.5.1",
     "cpx2": "7.0.1",
-    "daisyui": "4.6.1",
-    "eslint": "8.56.0",
+    "daisyui": "4.7.2",
+    "eslint": "8.57.0",
     "eslint-config-prettier": "9.1.0",
     "eslint-config-standard": "17.1.0",
     "eslint-config-standard-react": "13.0.0",
@@ -96,9 +96,9 @@
     "eslint-plugin-promise": "6.1.1",
     "eslint-plugin-react": "7.33.2",
     "eslint-plugin-standard": "5.0.0",
-    "eslint-plugin-storybook": "0.6.15",
-    "eslint-plugin-unused-imports": "3.0.0",
-    "husky": "9.0.10",
+    "eslint-plugin-storybook": "0.8.0",
+    "eslint-plugin-unused-imports": "3.1.0",
+    "husky": "9.0.11",
     "jest": "29.7.0",
     "jest-environment-jsdom": "29.7.0",
     "jest-junit": "16.0.0",
@@ -108,7 +108,7 @@
     "prop-types": "15.8.1",
     "react-dom": "18.2.0",
     "react-icons": "5.0.1",
-    "storybook": "7.6.12",
+    "storybook": "7.6.17",
     "storybook-addon-themes": "6.1.0",
     "string-width": "7.1.0",
     "ts-jest": "29.1.2",