@creativecodeco/ui 1.0.2 → 1.0.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md
CHANGED
|
@@ -4,111 +4,91 @@
|
|
|
4
4
|
|
|
5
5
|
> System Design CreativeCode.com.co
|
|
6
6
|
|
|
7
|
-
         
|
|
8
8
|
|
|
9
9
|
## Chromatic
|
|
10
10
|
|
|
11
11
|
[View Components](https://master--658273f7c6c3c10a909dea3b.chromatic.com/)
|
|
12
12
|
|
|
13
|
+
---
|
|
14
|
+
|
|
13
15
|
## Configuration
|
|
14
16
|
|
|
17
|
+
> [!NOTE]
|
|
18
|
+
> This library uses **Tailwind CSS v4** and **DaisyUI v5**. The configuration is primarily CSS-first.
|
|
19
|
+
|
|
15
20
|
### Install
|
|
16
21
|
|
|
17
22
|
```bash
|
|
18
23
|
npm install @creativecodeco/ui
|
|
19
|
-
|
|
20
|
-
or
|
|
21
|
-
|
|
24
|
+
# or
|
|
22
25
|
yarn add @creativecodeco/ui
|
|
23
26
|
```
|
|
24
27
|
|
|
25
28
|
### Dependencies
|
|
26
29
|
|
|
27
|
-
|
|
28
|
-
npm install --save-dev tailwindcss postcss usehooks-ts cssnano
|
|
29
|
-
|
|
30
|
-
or
|
|
30
|
+
Ensure you have the required dependencies for Tailwind v4 and PostCSS:
|
|
31
31
|
|
|
32
|
-
|
|
32
|
+
```bash
|
|
33
|
+
npm install --save-dev tailwindcss @tailwindcss/postcss postcss
|
|
34
|
+
# or
|
|
35
|
+
yarn add -D tailwindcss @tailwindcss/postcss postcss
|
|
33
36
|
```
|
|
34
37
|
|
|
35
|
-
### Setting
|
|
38
|
+
### Setting PostCSS
|
|
36
39
|
|
|
37
|
-
Create
|
|
40
|
+
Create or update your `postcss.config.js`:
|
|
38
41
|
|
|
39
42
|
```js
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
...creativeCodeTheme,
|
|
45
|
-
content: [
|
|
46
|
-
...creativeCodeTheme.content,
|
|
47
|
-
'./src/**/*.{js,jsx,ts,tsx}',
|
|
48
|
-
'./app/**/*.{js,jsx,ts,tsx}'
|
|
49
|
-
]
|
|
43
|
+
module.exports = {
|
|
44
|
+
plugins: {
|
|
45
|
+
'@tailwindcss/postcss': {}
|
|
46
|
+
}
|
|
50
47
|
};
|
|
51
|
-
|
|
52
|
-
export default themeConfig;
|
|
53
48
|
```
|
|
54
49
|
|
|
55
|
-
|
|
50
|
+
### Setting Tailwind CSS
|
|
56
51
|
|
|
57
|
-
|
|
58
|
-
/** @type {import('tailwindcss').Config} */
|
|
59
|
-
import { creativeCodeTheme } from '@creativecodeco/ui';
|
|
60
|
-
|
|
61
|
-
const themeConfig = {
|
|
62
|
-
...creativeCodeTheme,
|
|
63
|
-
content: [
|
|
64
|
-
...creativeCodeTheme.content,
|
|
65
|
-
'./src/**/*.{js,jsx,ts,tsx}',
|
|
66
|
-
'./app/**/*.{js,jsx,ts,tsx}'
|
|
67
|
-
],
|
|
68
|
-
daisyui: {
|
|
69
|
-
...creativeCodeTheme.daisyui,
|
|
70
|
-
themes: [
|
|
71
|
-
{
|
|
72
|
-
customTheme: {
|
|
73
|
-
...require('daisyui/src/theming/themes')['light'],
|
|
74
|
-
primary: '#08448c',
|
|
75
|
-
secondary: '#427AA1',
|
|
76
|
-
neutral: '#EBF2FA',
|
|
77
|
-
accent: '#679436',
|
|
78
|
-
other: '#A5BE00'
|
|
79
|
-
}
|
|
80
|
-
}
|
|
81
|
-
]
|
|
82
|
-
}
|
|
83
|
-
};
|
|
52
|
+
In your main CSS entry point (e.g., `globals.css` or `main.css`), import Tailwind and DaisyUI:
|
|
84
53
|
|
|
85
|
-
|
|
54
|
+
```css
|
|
55
|
+
@import "tailwindcss";
|
|
56
|
+
@plugin "daisyui";
|
|
57
|
+
|
|
58
|
+
/* Optional: Custom Theme Configuration */
|
|
59
|
+
@theme {
|
|
60
|
+
--color-primary: #08448c;
|
|
61
|
+
--color-secondary: #427AA1;
|
|
62
|
+
--color-accent: #679436;
|
|
63
|
+
--color-neutral: #EBF2FA;
|
|
64
|
+
}
|
|
86
65
|
```
|
|
87
66
|
|
|
88
|
-
|
|
67
|
+
#### Backwards Compatibility (Optional)
|
|
89
68
|
|
|
90
|
-
|
|
69
|
+
If you prefer using a `tailwind.config.js` file, you can import it in your CSS:
|
|
91
70
|
|
|
92
|
-
```
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
}
|
|
97
|
-
};
|
|
71
|
+
```css
|
|
72
|
+
@import "tailwindcss";
|
|
73
|
+
@config "../tailwind.config.js";
|
|
74
|
+
@plugin "daisyui";
|
|
98
75
|
```
|
|
99
76
|
|
|
100
77
|
### Setting Provider
|
|
101
78
|
|
|
102
|
-
|
|
79
|
+
Wrap your application with the `CreativeCodeUIProvider` to automatically apply the design system's theme and styles.
|
|
80
|
+
|
|
81
|
+
Add on layout `layout.tsx` (for Next.js) or your root component:
|
|
103
82
|
|
|
104
83
|
```tsx
|
|
105
84
|
import { CreativeCodeUIProvider } from '@creativecodeco/ui';
|
|
106
85
|
|
|
86
|
+
// Import the design system CSS
|
|
107
87
|
import '@creativecodeco/ui/lib/theme/css/main.css';
|
|
108
88
|
|
|
109
89
|
export default function RootLayout({ children }) {
|
|
110
90
|
return (
|
|
111
|
-
<html>
|
|
91
|
+
<html lang="en">
|
|
112
92
|
<body>
|
|
113
93
|
<CreativeCodeUIProvider>{children}</CreativeCodeUIProvider>
|
|
114
94
|
</body>
|
|
@@ -117,8 +97,20 @@ export default function RootLayout({ children }) {
|
|
|
117
97
|
}
|
|
118
98
|
```
|
|
119
99
|
|
|
100
|
+
## Features
|
|
101
|
+
|
|
102
|
+
- **Atomic Components**: Button, Avatar, Badge, Accordion.
|
|
103
|
+
- **Form Controls**: TextBox, Checkbox, Radio, Dropdown.
|
|
104
|
+
- **Theme Support**: Built on DaisyUI with custom CreativeCode branding.
|
|
105
|
+
- **Visual Testing**: Integrated with Storybook and Chromatic.
|
|
106
|
+
|
|
107
|
+
## Development
|
|
108
|
+
|
|
109
|
+
- `npm run dev`: Start Storybook for component development.
|
|
110
|
+
- `npm run build`: Build the library for production.
|
|
111
|
+
- `npm test`: Run unit tests with Jest.
|
|
112
|
+
|
|
120
113
|
## License
|
|
121
114
|
|
|
122
115
|
MIT © [CreativeCode.com.co](https://github.com/creativecodeco)
|
|
123
|
-
|
|
124
116
|
Web [CreativeCode.com.co](https://creativecode.com.co)
|
|
@@ -7,7 +7,7 @@ function useSafeButtonProps({ onClick, onSubmit, loading, ...props }) {
|
|
|
7
7
|
if (!props.disabled && !loading) {
|
|
8
8
|
callback(event);
|
|
9
9
|
}
|
|
10
|
-
}, [props.disabled]);
|
|
10
|
+
}, [props.disabled, loading]);
|
|
11
11
|
const handleClick = (0, react_1.useCallback)((event) => {
|
|
12
12
|
if (onClick) {
|
|
13
13
|
wrapper(onClick, event);
|
package/lib/theme/main.css
CHANGED
|
@@ -9,7 +9,7 @@ const classnames_1 = __importDefault(require("classnames"));
|
|
|
9
9
|
const utils_1 = require("../../../utils");
|
|
10
10
|
const Avatar = ({ isOnline = false, ring = false, rounded = false, size = 'md', src, withStatus = false }) => {
|
|
11
11
|
const isUri = (0, react_1.useMemo)(() => (0, utils_1.isValidUrl)(src), [src]);
|
|
12
|
-
const letters = (0, react_1.useMemo)(() => (0, utils_1.getInitials)(src), [src
|
|
12
|
+
const letters = (0, react_1.useMemo)(() => (0, utils_1.getInitials)(src), [src]);
|
|
13
13
|
return ((0, jsx_runtime_1.jsx)("div", { "data-testid": 'avatar', className: (0, classnames_1.default)('avatar', {
|
|
14
14
|
'avatar-online': withStatus && isOnline,
|
|
15
15
|
'avatar-offline': withStatus && !isOnline,
|
|
@@ -28,13 +28,13 @@ const Dropdown = (0, react_1.forwardRef)(({ name, options = [], disabled, onChan
|
|
|
28
28
|
}
|
|
29
29
|
setLabel(option.label);
|
|
30
30
|
setValueFilter(option.label);
|
|
31
|
-
}, [value]);
|
|
31
|
+
}, [value, options]);
|
|
32
32
|
const handleFocus = (0, react_1.useCallback)(() => {
|
|
33
33
|
if (disabled) {
|
|
34
34
|
return;
|
|
35
35
|
}
|
|
36
36
|
setOpen(true);
|
|
37
|
-
}, [
|
|
37
|
+
}, [disabled]);
|
|
38
38
|
const handleSelect = (0, react_1.useCallback)((option) => {
|
|
39
39
|
onChange?.({
|
|
40
40
|
target: { value: String(option.value) }
|
|
@@ -50,6 +50,6 @@ const Dropdown = (0, react_1.forwardRef)(({ name, options = [], disabled, onChan
|
|
|
50
50
|
const filterOptions = (0, react_1.useMemo)(() => !valueFilter
|
|
51
51
|
? options
|
|
52
52
|
: options.filter(({ label }) => label.includes(valueFilter)), [valueFilter, options]);
|
|
53
|
-
return ((0, jsx_runtime_1.jsxs)("div", { className: 'dropdown
|
|
53
|
+
return ((0, jsx_runtime_1.jsxs)("div", { className: 'block dropdown', children: [(0, jsx_runtime_1.jsx)(textbox_1.TextBox, { name: name, tabIndex: 0, ref: ref, disabled: disabled, rightButton: true, rightIcon: fa_1.FaSortDown, onFocus: handleFocus, onChange: handleChange, ...otherProps, value: label }), open && ((0, jsx_runtime_1.jsx)("ul", { tabIndex: 0, className: 'z-1 bg-base-100 shadow rounded-box w-full dropdown-content menu', id: `options-${name}`, ref: refOutside, role: 'listitem', "data-testid": `options-${name}`, children: filterOptions.map((option) => ((0, jsx_runtime_1.jsx)("li", { value: option.value, onClick: () => handleSelect(option), children: (0, jsx_runtime_1.jsx)("a", { children: option.label }) }, option.value))) }))] }));
|
|
54
54
|
});
|
|
55
55
|
exports.default = Dropdown;
|
package/package.json
CHANGED
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
"framework design",
|
|
11
11
|
"design system"
|
|
12
12
|
],
|
|
13
|
-
"version": "1.0.
|
|
13
|
+
"version": "1.0.4",
|
|
14
14
|
"homepage": "https://github.com/creativecodeco/ui",
|
|
15
15
|
"author": {
|
|
16
16
|
"name": "John Toro",
|
|
@@ -48,55 +48,49 @@
|
|
|
48
48
|
"usehooks-ts": "3.1.1"
|
|
49
49
|
},
|
|
50
50
|
"dependencies": {
|
|
51
|
-
"@tailwindcss/postcss": "4.2.
|
|
51
|
+
"@tailwindcss/postcss": "4.2.2",
|
|
52
52
|
"postcss": "8.5.8",
|
|
53
53
|
"react": "18.3.1",
|
|
54
|
-
"react-hook-form": "7.
|
|
55
|
-
"tailwindcss": "4.2.
|
|
54
|
+
"react-hook-form": "7.72.0",
|
|
55
|
+
"tailwindcss": "4.2.2",
|
|
56
56
|
"usehooks-ts": "3.1.1"
|
|
57
57
|
},
|
|
58
58
|
"devDependencies": {
|
|
59
59
|
"@babel/core": "7.29.0",
|
|
60
|
-
"@babel/preset-env": "7.29.
|
|
60
|
+
"@babel/preset-env": "7.29.2",
|
|
61
61
|
"@babel/preset-react": "7.28.5",
|
|
62
62
|
"@babel/preset-typescript": "7.28.5",
|
|
63
|
-
"@chromatic-com/storybook": "5.
|
|
64
|
-
"@eslint/js": "9.39.
|
|
65
|
-
"@jest/globals": "30.
|
|
66
|
-
"@storybook/addon-docs": "10.
|
|
67
|
-
"@storybook/addon-links": "10.
|
|
68
|
-
"@storybook/addon-webpack5-compiler-swc": "4.0.
|
|
69
|
-
"@storybook/react-webpack5": "10.
|
|
63
|
+
"@chromatic-com/storybook": "5.1.1",
|
|
64
|
+
"@eslint/js": "9.39.4",
|
|
65
|
+
"@jest/globals": "30.3.0",
|
|
66
|
+
"@storybook/addon-docs": "10.3.3",
|
|
67
|
+
"@storybook/addon-links": "10.3.3",
|
|
68
|
+
"@storybook/addon-webpack5-compiler-swc": "4.0.3",
|
|
69
|
+
"@storybook/react-webpack5": "10.3.3",
|
|
70
70
|
"@testing-library/dom": "10.4.1",
|
|
71
71
|
"@testing-library/jest-dom": "6.9.1",
|
|
72
72
|
"@testing-library/react": "16.3.2",
|
|
73
73
|
"@testing-library/user-event": "14.6.1",
|
|
74
74
|
"@types/jest": "30.0.0",
|
|
75
|
-
"@types/node": "25.
|
|
75
|
+
"@types/node": "25.5.0",
|
|
76
76
|
"@types/react": "18.3.28",
|
|
77
77
|
"@types/react-dom": "18.3.7",
|
|
78
|
-
"chromatic": "
|
|
78
|
+
"chromatic": "16.0.0",
|
|
79
79
|
"classnames": "2.5.1",
|
|
80
80
|
"cpx2": "8.0.0",
|
|
81
81
|
"daisyui": "5.5.19",
|
|
82
|
-
"eslint": "
|
|
82
|
+
"eslint": "9.39.4",
|
|
83
83
|
"eslint-config-prettier": "10.1.8",
|
|
84
|
-
"eslint-config-standard": "17.1.0",
|
|
85
|
-
"eslint-config-standard-react": "13.0.0",
|
|
86
|
-
"eslint-config-standard-with-typescript": "43.0.1",
|
|
87
84
|
"eslint-plugin-import": "2.32.0",
|
|
88
|
-
"eslint-plugin-n": "16.6.2",
|
|
89
|
-
"eslint-plugin-node": "11.1.0",
|
|
90
85
|
"eslint-plugin-prettier": "5.5.5",
|
|
91
|
-
"eslint-plugin-promise": "6.6.0",
|
|
92
86
|
"eslint-plugin-react": "7.37.5",
|
|
93
|
-
"eslint-plugin-
|
|
94
|
-
"eslint-plugin-storybook": "10.
|
|
87
|
+
"eslint-plugin-react-hooks": "7.0.1",
|
|
88
|
+
"eslint-plugin-storybook": "10.3.3",
|
|
95
89
|
"eslint-plugin-unused-imports": "4.4.1",
|
|
96
90
|
"globals": "17.4.0",
|
|
97
91
|
"husky": "9.1.7",
|
|
98
92
|
"jest": "29.7.0",
|
|
99
|
-
"jest-environment-jsdom": "30.
|
|
93
|
+
"jest-environment-jsdom": "30.3.0",
|
|
100
94
|
"jest-junit": "16.0.0",
|
|
101
95
|
"jest-transform-css": "6.0.3",
|
|
102
96
|
"postcss-cli": "11.0.1",
|
|
@@ -104,16 +98,21 @@
|
|
|
104
98
|
"prop-types": "15.8.1",
|
|
105
99
|
"react-dom": "18.3.1",
|
|
106
100
|
"react-icons": "5.6.0",
|
|
107
|
-
"storybook": "10.
|
|
101
|
+
"storybook": "10.3.3",
|
|
108
102
|
"string-width": "8.2.0",
|
|
109
103
|
"ts-jest": "29.4.6",
|
|
110
104
|
"ts-node": "10.9.2",
|
|
111
105
|
"tsc-alias": "1.8.16",
|
|
112
106
|
"tsconfig-paths-webpack-plugin": "4.2.0",
|
|
113
107
|
"typescript": "5.9.3",
|
|
114
|
-
"typescript-eslint": "8.
|
|
108
|
+
"typescript-eslint": "8.58.0"
|
|
115
109
|
},
|
|
116
110
|
"files": [
|
|
117
111
|
"lib"
|
|
118
|
-
]
|
|
112
|
+
],
|
|
113
|
+
"overrides": {
|
|
114
|
+
"handlebars": "4.7.9",
|
|
115
|
+
"minimatch": "9.0.7",
|
|
116
|
+
"lodash": "4.17.23"
|
|
117
|
+
}
|
|
119
118
|
}
|