@creativecodeco/ui 1.0.2 → 1.0.3

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.
Files changed (3) hide show
  1. package/README.md +55 -63
  2. package/lib/theme/main.css +1 -1
  3. package/package.json +23 -19
package/README.md CHANGED
@@ -4,111 +4,91 @@
4
4
 
5
5
  > System Design CreativeCode.com.co
6
6
 
7
- ![NPM](https://img.shields.io/badge/NPM-%23CB3837.svg?style=for-the-badge&logo=npm&logoColor=white) ![TypeScript](https://img.shields.io/badge/typescript-%23007ACC.svg?style=for-the-badge&logo=typescript&logoColor=white) ![React](https://img.shields.io/badge/react-%2320232a.svg?style=for-the-badge&logo=react&logoColor=%2361DAFB) ![Tailwindcss](https://img.shields.io/badge/Tailwind_CSS-38B2AC?style=for-the-badge&logo=tailwind-css&logoColor=white) ![Daisyui](https://img.shields.io/badge/daisyUI-1ad1a5?style=for-the-badge&logo=daisyui&logoColor=white) ![Postcss](https://img.shields.io/badge/postcss-DD3A0A?style=for-the-badge&logo=postcss&logoColor=white) ![Storybook](https://img.shields.io/badge/storybook-FF4785?style=for-the-badge&logo=storybook&logoColor=white)
7
+ ![NPM](https://img.shields.io/badge/NPM-%23CB3837.svg?style=for-the-badge&logo=npm&logoColor=white) ![TypeScript](https://img.shields.io/badge/typescript-%23007ACC.svg?style=for-the-badge&logo=typescript&logoColor=white) ![React](https://img.shields.io/badge/react-%2320232a.svg?style=for-the-badge&logo=react&logoColor=%2361DAFB) ![Tailwindcss](https://img.shields.io/badge/Tailwind_CSS-38B2AC?style=for-the-badge&logo=tailwind-css&logoColor=white) ![Daisyui](https://img.shields.io/badge/daisyUI-16D1A5?style=for-the-badge&logo=daisyui&logoColor=white) ![Storybook](https://img.shields.io/badge/storybook-FF4785?style=for-the-badge&logo=storybook&logoColor=white)
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
- ```bash
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
- yarn add -D tailwindcss postcss usehooks-ts cssnano
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 Tailwind
38
+ ### Setting PostCSS
36
39
 
37
- Create file `tailwind.config.js` and add
40
+ Create or update your `postcss.config.js`:
38
41
 
39
42
  ```js
40
- /** @type {import('tailwindcss').Config} */
41
- import { creativeCodeTheme } from '@creativecodeco/ui';
42
-
43
- const themeConfig = {
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
- #### Custom theme
50
+ ### Setting Tailwind CSS
56
51
 
57
- ```js
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
- export default themeConfig;
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
- ### Setting Postcss
67
+ #### Backwards Compatibility (Optional)
89
68
 
90
- Create file `postcss.config.js` and add
69
+ If you prefer using a `tailwind.config.js` file, you can import it in your CSS:
91
70
 
92
- ```js
93
- module.exports = {
94
- plugins: {
95
- '@tailwindcss/postcss': {}
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
- Add on layout `layout.tsx`
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)
package/lib/theme/main.css CHANGED
@@ -1,4 +1,4 @@
1
- /*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */
1
+ /*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */
2
2
  @layer properties;
3
3
  @layer theme, base, components, utilities;
4
4
  @layer theme {
package/package.json CHANGED
@@ -10,7 +10,7 @@
10
10
  "framework design",
11
11
  "design system"
12
12
  ],
13
- "version": "1.0.2",
13
+ "version": "1.0.3",
14
14
  "homepage": "https://github.com/creativecodeco/ui",
15
15
  "author": {
16
16
  "name": "John Toro",
@@ -48,34 +48,34 @@
48
48
  "usehooks-ts": "3.1.1"
49
49
  },
50
50
  "dependencies": {
51
- "@tailwindcss/postcss": "4.2.1",
51
+ "@tailwindcss/postcss": "4.2.2",
52
52
  "postcss": "8.5.8",
53
53
  "react": "18.3.1",
54
- "react-hook-form": "7.71.2",
55
- "tailwindcss": "4.2.1",
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.0",
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.0.1",
64
- "@eslint/js": "9.39.3",
65
- "@jest/globals": "30.2.0",
66
- "@storybook/addon-docs": "10.2.14",
67
- "@storybook/addon-links": "10.2.14",
68
- "@storybook/addon-webpack5-compiler-swc": "4.0.2",
69
- "@storybook/react-webpack5": "10.2.14",
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.3.3",
75
+ "@types/node": "25.5.0",
76
76
  "@types/react": "18.3.28",
77
77
  "@types/react-dom": "18.3.7",
78
- "chromatic": "13.3.5",
78
+ "chromatic": "16.0.0",
79
79
  "classnames": "2.5.1",
80
80
  "cpx2": "8.0.0",
81
81
  "daisyui": "5.5.19",
@@ -91,12 +91,12 @@
91
91
  "eslint-plugin-promise": "6.6.0",
92
92
  "eslint-plugin-react": "7.37.5",
93
93
  "eslint-plugin-standard": "5.0.0",
94
- "eslint-plugin-storybook": "10.2.14",
94
+ "eslint-plugin-storybook": "10.3.3",
95
95
  "eslint-plugin-unused-imports": "4.4.1",
96
96
  "globals": "17.4.0",
97
97
  "husky": "9.1.7",
98
98
  "jest": "29.7.0",
99
- "jest-environment-jsdom": "30.2.0",
99
+ "jest-environment-jsdom": "30.3.0",
100
100
  "jest-junit": "16.0.0",
101
101
  "jest-transform-css": "6.0.3",
102
102
  "postcss-cli": "11.0.1",
@@ -104,16 +104,20 @@
104
104
  "prop-types": "15.8.1",
105
105
  "react-dom": "18.3.1",
106
106
  "react-icons": "5.6.0",
107
- "storybook": "10.2.14",
107
+ "storybook": "10.3.3",
108
108
  "string-width": "8.2.0",
109
109
  "ts-jest": "29.4.6",
110
110
  "ts-node": "10.9.2",
111
111
  "tsc-alias": "1.8.16",
112
112
  "tsconfig-paths-webpack-plugin": "4.2.0",
113
113
  "typescript": "5.9.3",
114
- "typescript-eslint": "8.56.1"
114
+ "typescript-eslint": "8.58.0"
115
115
  },
116
116
  "files": [
117
117
  "lib"
118
- ]
118
+ ],
119
+ "overrides": {
120
+ "handlebars": "4.7.9",
121
+ "minimatch": "9.0.7"
122
+ }
119
123
  }