@creativecodeco/ui 0.0.5 → 0.1.0

package/README.md

@@ -25,11 +25,11 @@ yarn add @creativecodeco/ui
 ### Dependencies
 
 ```bash
-npm install --save-dev tailwindcss postcss postcss-import autoprefixer usehooks-ts
+npm install --save-dev tailwindcss postcss postcss-import autoprefixer usehooks-ts cssnano
 
 or
 
-yarn add -D tailwindcss postcss postcss-import autoprefixer usehooks-ts
+yarn add -D tailwindcss postcss postcss-import autoprefixer usehooks-ts cssnano
 ```
 
 ### Setting Tailwind
@@ -46,13 +46,45 @@ const themeConfig = {
     ...creativeCodeTheme.content,
     './src/**/*.{js,jsx,ts,tsx}',
     './app/**/*.{js,jsx,ts,tsx}',
-    './node_modules/@creativecodeco/ui/lib/**/*.{js,jsx,ts,tsx}',
   ],
 };
 
 export default themeConfig;
 ```
 
+#### Custom theme
+
+```js
+/** @type {import('tailwindcss').Config} */
+import { creativeCodeTheme } from '@creativecodeco/ui';
+
+const themeConfig = {
+  ...creativeCodeTheme,
+  content: [
+    ...creativeCodeTheme.content,
+    './src/**/*.{js,jsx,ts,tsx}',
+    './app/**/*.{js,jsx,ts,tsx}',
+  ],
+  daisyui: {
+    ...creativeCodeTheme.daisyui,
+    themes: [
+      {
+        customTheme: {
+          ...require('daisyui/src/theming/themes')['light'],
+          primary: '#08448c',
+          secondary: '#427AA1',
+          neutral: '#EBF2FA',
+          accent: '#679436',
+          other: '#A5BE00',
+        },
+      },
+    ],
+  },
+};
+
+export default themeConfig;
+```
+
 ### Setting Postcss
 
 Create file `postcss.config.js` and add
@@ -64,6 +96,7 @@ module.exports = {
     'tailwindcss/nesting': {},
     tailwindcss: {},
     autoprefixer: {},
+    ...(process.env.NODE_ENV === 'production' ? { cssnano: {} } : {}),
   },
 };
 ```
@@ -75,7 +108,7 @@ Add on layout `layout.tsx`
 ```tsx
 import { CreativeCodeUIProvider } from '@creativecodeco/ui';
 
-import '@creativecodeco/ui/lib/theme/main.css';
+import '@creativecodeco/ui/lib/theme/css/main.css';
 
 export default function RootLayout({ children }) {
   return (

package/lib/index.d.ts

@@ -1,5 +1,7 @@
 export * from './helpers';
 export * from './theme';
+export * from './ui/components';
 export * from './ui/forms';
 export * from './ui/provider';
 export * from './types';
+export * from './utils';

package/lib/index.js

@@ -1,5 +1,7 @@
 export * from './helpers';
 export * from './theme';
+export * from './ui/components';
 export * from './ui/forms';
 export * from './ui/provider';
 export * from './types';
+export * from './utils';

package/lib/theme/css/avatar.css

@@ -0,0 +1,37 @@
+.avatar-size {
+  &-xs {
+    @apply w-8;
+
+    > span {
+      @apply text-xs;
+    }
+  }
+
+  &-sm {
+    @apply w-12;
+
+    > span {
+      @apply text-sm;
+    }
+  }
+
+  &-md {
+    @apply w-16;
+
+    > span {
+      @apply text-xl;
+    }
+  }
+
+  &-lg {
+    @apply w-24;
+
+    > span {
+      @apply text-3xl;
+    }
+  }
+}
+
+.avatar-ring {
+  @apply ring ring-primary ring-offset-base-100 ring-offset-2;
+}

package/lib/theme/css/main.css

@@ -2,4 +2,5 @@
 @import 'tailwindcss/components';
 @import 'tailwindcss/utilities';
 
+@import './avatar.css';
 @import './text-box.css';

package/lib/theme/main.css

@@ -622,6 +622,26 @@ html {
     max-width: 1536px;
   }
 }
+.avatar {
+  position: relative;
+  display: inline-flex;
+}
+.avatar > div {
+  display: block;
+  aspect-ratio: 1 / 1;
+  overflow: hidden;
+}
+.avatar img {
+  height: 100%;
+  width: 100%;
+  -o-object-fit: cover;
+     object-fit: cover;
+}
+.avatar.placeholder > div {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
 @media (hover:hover) {
 
   .label a:hover {
@@ -774,11 +794,61 @@ html {
   --tw-bg-opacity: 1;
   background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity)));
 }
+.join {
+  display: inline-flex;
+  align-items: stretch;
+  border-radius: var(--rounded-btn, 0.5rem);
+}
+.join :where(.join-item) {
+  border-start-end-radius: 0;
+  border-end-end-radius: 0;
+  border-end-start-radius: 0;
+  border-start-start-radius: 0;
+}
+.join .join-item:not(:first-child):not(:last-child),
+  .join *:not(:first-child):not(:last-child) .join-item {
+  border-start-end-radius: 0;
+  border-end-end-radius: 0;
+  border-end-start-radius: 0;
+  border-start-start-radius: 0;
+}
+.join .join-item:first-child:not(:last-child),
+  .join *:first-child:not(:last-child) .join-item {
+  border-start-end-radius: 0;
+  border-end-end-radius: 0;
+}
 .join .dropdown .join-item:first-child:not(:last-child),
   .join *:first-child:not(:last-child) .dropdown .join-item {
   border-start-end-radius: inherit;
   border-end-end-radius: inherit;
 }
+.join :where(.join-item:first-child:not(:last-child)),
+  .join :where(*:first-child:not(:last-child) .join-item) {
+  border-end-start-radius: inherit;
+  border-start-start-radius: inherit;
+}
+.join .join-item:last-child:not(:first-child),
+  .join *:last-child:not(:first-child) .join-item {
+  border-end-start-radius: 0;
+  border-start-start-radius: 0;
+}
+.join :where(.join-item:last-child:not(:first-child)),
+  .join :where(*:last-child:not(:first-child) .join-item) {
+  border-start-end-radius: inherit;
+  border-end-end-radius: inherit;
+}
+@supports not selector(:has(*)) {
+
+  :where(.join *) {
+    border-radius: inherit;
+  }
+}
+@supports selector(:has(*)) {
+
+  :where(.join *:has(.join-item)) {
+    border-radius: inherit;
+  }
+}
 .menu {
   display: flex;
   flex-direction: column;
@@ -858,6 +928,13 @@ html {
 .select[multiple] {
   height: auto;
 }
+.avatar-group :where(.avatar) {
+  overflow: hidden;
+  border-radius: 9999px;
+  border-width: 4px;
+  --tw-border-opacity: 1;
+  border-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-border-opacity)));
+}
 .btm-nav > *.disabled,
     .btm-nav > *[disabled] {
   pointer-events: none;
@@ -964,6 +1041,11 @@ html {
 .input::-webkit-date-and-time-value {
   text-align: inherit;
 }
+.join > :where(*:not(:first-child)) {
+  margin-top: 0px;
+  margin-bottom: 0px;
+  margin-inline-start: -1px;
+}
 :where(.menu li:empty) {
   --tw-bg-opacity: 1;
   background-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-bg-opacity)));
@@ -1189,6 +1271,82 @@ html {
     opacity: 1;
   }
 }
+.join.join-vertical {
+  flex-direction: column;
+}
+.join.join-vertical .join-item:first-child:not(:last-child),
+  .join.join-vertical *:first-child:not(:last-child) .join-item {
+  border-end-start-radius: 0;
+  border-end-end-radius: 0;
+  border-start-start-radius: inherit;
+  border-start-end-radius: inherit;
+}
+.join.join-vertical .join-item:last-child:not(:first-child),
+  .join.join-vertical *:last-child:not(:first-child) .join-item {
+  border-start-start-radius: 0;
+  border-start-end-radius: 0;
+  border-end-start-radius: inherit;
+  border-end-end-radius: inherit;
+}
+.join.join-horizontal {
+  flex-direction: row;
+}
+.join.join-horizontal .join-item:first-child:not(:last-child),
+  .join.join-horizontal *:first-child:not(:last-child) .join-item {
+  border-end-end-radius: 0;
+  border-start-end-radius: 0;
+  border-end-start-radius: inherit;
+  border-start-start-radius: inherit;
+}
+.join.join-horizontal .join-item:last-child:not(:first-child),
+  .join.join-horizontal *:last-child:not(:first-child) .join-item {
+  border-end-start-radius: 0;
+  border-start-start-radius: 0;
+  border-end-end-radius: inherit;
+  border-start-end-radius: inherit;
+}
+.avatar.online:before {
+  content: "";
+  position: absolute;
+  z-index: 10;
+  display: block;
+  border-radius: 9999px;
+  --tw-bg-opacity: 1;
+  background-color: var(--fallback-su,oklch(var(--su)/var(--tw-bg-opacity)));
+  outline-style: solid;
+  outline-width: 2px;
+  outline-color: var(--fallback-b1,oklch(var(--b1)/1));
+  width: 15%;
+  height: 15%;
+  top: 7%;
+  right: 7%;
+}
+.avatar.offline:before {
+  content: "";
+  position: absolute;
+  z-index: 10;
+  display: block;
+  border-radius: 9999px;
+  --tw-bg-opacity: 1;
+  background-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-bg-opacity)));
+  outline-style: solid;
+  outline-width: 2px;
+  outline-color: var(--fallback-b1,oklch(var(--b1)/1));
+  width: 15%;
+  height: 15%;
+  top: 7%;
+  right: 7%;
+}
+.join.join-vertical > :where(*:not(:first-child)) {
+  margin-left: 0px;
+  margin-right: 0px;
+  margin-top: -1px;
+}
+.join.join-horizontal > :where(*:not(:first-child)) {
+  margin-top: 0px;
+  margin-bottom: 0px;
+  margin-inline-start: -1px;
+}
 .relative {
   position: relative;
 }
@@ -1207,17 +1365,76 @@ html {
 .cursor-pointer {
   cursor: pointer;
 }
+.\!rounded {
+  border-radius: 0.25rem !important;
+}
+.rounded {
+  border-radius: 0.25rem;
+}
+.rounded-full {
+  border-radius: 9999px;
+}
 .bg-base-100 {
   --tw-bg-opacity: 1;
   background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity)));
 }
+.bg-neutral {
+  --tw-bg-opacity: 1;
+  background-color: var(--fallback-n,oklch(var(--n)/var(--tw-bg-opacity)));
+}
+.text-neutral-content {
+  --tw-text-opacity: 1;
+  color: var(--fallback-nc,oklch(var(--nc)/var(--tw-text-opacity)));
+}
 .text-red-500 {
   --tw-text-opacity: 1;
   color: rgb(239 68 68 / var(--tw-text-opacity));
 }
+.ring {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
 .filter {
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
+.avatar-size-xs {
+  width: 2rem;
+}
+.avatar-size-xs > span {
+  font-size: 0.75rem;
+  line-height: 1rem;
+}
+.avatar-size-sm {
+  width: 3rem;
+}
+.avatar-size-sm > span {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+.avatar-size-md {
+  width: 4rem;
+}
+.avatar-size-md > span {
+  font-size: 1.25rem;
+  line-height: 1.75rem;
+}
+.avatar-size-lg {
+  width: 6rem;
+}
+.avatar-size-lg > span {
+  font-size: 1.875rem;
+  line-height: 2.25rem;
+}
+.avatar-ring {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+  --tw-ring-opacity: 1;
+  --tw-ring-color: var(--fallback-p,oklch(var(--p)/var(--tw-ring-opacity)));
+  --tw-ring-offset-width: 2px;
+  --tw-ring-offset-color: var(--fallback-b1,oklch(var(--b1)/1));
+}
 .text-box-size-xs {
   height: 1.5rem;
   padding-left: 0.5rem;

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/constants.types.js

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

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

@@ -0,0 +1 @@
+export type * from './constants.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/text-box.types.d.ts

@@ -1,12 +1,13 @@
 /// <reference types="react" />
 import type { IconType } from 'react-icons';
+import { SizeType } from '../../../types';
 export interface TextBoxType extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
     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 } from '../../../utils';
+const Avatar = ({ isOnline = false, ring = false, rounded = false, size = 'md', src, withStatus = false }) => {
+    const isUri = useMemo(() => URL.canParse(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/drop-down/drop-down.component.js

@@ -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) {

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

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

package/lib/ui/forms/index.js

@@ -1,3 +1,2 @@
-import { DropDown } from '../../ui/forms/drop-down';
-import { TextBox } from '../../ui/forms/text-box';
-export { DropDown, TextBox };
+export * from '../../ui/forms/drop-down';
+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,25 @@
+/**
+ * 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;

package/lib/utils/string.utils.js

@@ -0,0 +1,38 @@
+/**
+ * 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('');
+}

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.1.0",
   "homepage": "https://github.com/creativecodeco/ui",
   "author": {
     "name": "John Toro",
@@ -46,6 +47,14 @@
     "tailwindcss": "3.4.0",
     "usehooks-ts": "2.9.1"
   },
+  "dependencies": {
+    "postcss": "8.4.32",
+    "postcss-import": "16.0.0",
+    "react": "18.2.0",
+    "react-hook-form": "7.49.2",
+    "tailwindcss": "3.4.0",
+    "usehooks-ts": "2.9.1"
+  },
   "devDependencies": {
     "@babel/core": "7.23.7",
     "@babel/preset-env": "7.23.7",
@@ -61,7 +70,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/jest-dom": "6.2.0",
     "@testing-library/react": "14.1.2",
     "@testing-library/user-event": "14.5.2",
     "@types/jest": "29.5.11",
@@ -73,7 +82,7 @@
     "chromatic": "10.2.0",
     "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",
@@ -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",
     "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"