Skip to content

Commit f816eba

Browse files
joaltorocjtoroc
joaltoroc
and
jtoroc
authored
Tech/update libs (#53)
* 1.0.3 Update libs --------- Co-authored-by: John Toro <joaltoroc@creativecode.com.co>
1 parent 5b7aabd commit f816eba

7 files changed

Lines changed: 952 additions & 1281 deletions

File tree

‎.husky/pre-commit‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,3 @@
1-
#!/usr/bin/env sh
2-
. "$(dirname -- "$0")/_/husky.sh"
3-
41
npm run lint:fix
52

63
git add .

‎CONTEXT.md‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
# Project Context: @creativecodeco/ui
2+
3+
## Purpose
4+
`@creativecodeco/ui` is the official Design System for **CreativeCode.com.co**. It provides a set of reusable, accessible, and highly customizable UI components built with modern web technologies.
5+
6+
## Technical Stack
7+
- **Framework**: [React 18](https://react.dev/)
8+
- **Styling**: [Tailwind CSS v4](https://tailwindcss.com/) (CSS-first configuration)
9+
- **UI Base**: [DaisyUI v5](https://daisyui.com/)
10+
- **Documentation**: [Storybook 10](https://storybook.js.org/)
11+
- **Language**: [TypeScript](https://www.typescriptlang.org/)
12+
- **Testing**: [Jest](https://jestjs.io/) & [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/)
13+
- **Visual QA**: [Chromatic](https://www.chromatic.com/)
14+
15+
## Architecture & Structure
16+
17+
The project follows an organized, modular structure designed for scalability and ease of maintenance:
18+
19+
### Directory Overview
20+
- **`src/ui/components/`**: Atomic UI components like `Button`, `Avatar`, `Badge`, and `Accordion`. These are designed to be "dumb" components focused on presentation.
21+
- **`src/ui/forms/`**: specialized components for form handling, such as `Textbox`, `Checkbox`, `Radio`, and `Dropdown`.
22+
- **`src/ui/provider/`**: Contains the `CreativeCodeUIProvider`, which manages the application's theme (via `data-theme`) and provides necessary context for components.
23+
- **`src/theme/`**: The heart of the design system's styling. It uses Tailwind CSS v4's CSS-first approach. `main.css` is the entry point that imports component-specific styles and Tailwind/DaisyUI plugins.
24+
- **`src/hooks/`**: Custom React hooks shared across the library and available to consumers.
25+
- **`src/helpers/` & `src/utils/`**: Utility functions for internal logic (e.g., class merging, URL validation).
26+
- **`src/types/`**: Global TypeScript definitions.
27+
28+
### Component Pattern
29+
Each component typically resides in its own directory with:
30+
- `[Component].tsx`: The implementation.
31+
- `[Component].stories.tsx`: Storybook definitions for documentation and testing.
32+
- `[Component].spec.tsx`: Unit tests (if applicable).
33+
- `index.ts`: Public export for that component.
34+
35+
## Styling System
36+
The project has migrated to **Tailwind CSS v4**.
37+
- **CSS-first**: Configuration is handled in `.css` files using `@theme` and `@plugin`.
38+
- **DaisyUI Integration**: Base styles and themes are derived from DaisyUI and extended with CreativeCode's brand identity.
39+
- **Theme Switching**: Controlled via the `CreativeCodeUIProvider` which applies `data-theme="creativecode"` to the `html` element.
40+
41+
## Development Workflow
42+
1. **Component Creation**: Develop one component at a time using Storybook (`npm run dev`).
43+
2. **Visual Verification**: Every PR triggers a Chromatic build to ensure no visual regressions occur.
44+
3. **Building**: The library is built into the `lib/` directory using TypeScript (`npm run build`), producing ESM-compatible code.
45+
4. **Publishing**: Managed via `npm version` and `npm publish`.
46+
47+
## Design Principles
48+
- **Accessibility (A11y)**: Components should use semantic HTML and support ARIA attributes.
49+
- **Responsiveness**: Use Tailwind's utility classes for a mobile-first approach.
50+
- **Consistency**: All components must adhere to the defined theme tokens (colors, spacing, typography).

‎Changelog.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,12 @@
22

33
# Changelog
44

5+
## v1.0.3 - Update Libraries
6+
7+
### ☝🏻 Upgrade
8+
9+
- Upgrade libs
10+
511
## v1.0.0 - Update Libraries
612

713
### ☝🏻 Upgrade

‎README.md‎

Lines changed: 55 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -4,111 +4,91 @@
44

55
> System Design CreativeCode.com.co
66
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)
88

99
## Chromatic
1010

1111
[View Components](https://master--658273f7c6c3c10a909dea3b.chromatic.com/)
1212

13+
---
14+
1315
## Configuration
1416

17+
> [!NOTE]
18+
> This library uses **Tailwind CSS v4** and **DaisyUI v5**. The configuration is primarily CSS-first.
19+
1520
### Install
1621

1722
```bash
1823
npm install @creativecodeco/ui
19-
20-
or
21-
24+
# or
2225
yarn add @creativecodeco/ui
2326
```
2427

2528
### Dependencies
2629

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:
3131

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
3336
```
3437

35-
### Setting Tailwind
38+
### Setting PostCSS
3639

37-
Create file `tailwind.config.js` and add
40+
Create or update your `postcss.config.js`:
3841

3942
```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+
}
5047
};
51-
52-
export default themeConfig;
5348
```
5449

55-
#### Custom theme
50+
### Setting Tailwind CSS
5651

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:
8453

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+
}
8665
```
8766

88-
### Setting Postcss
67+
#### Backwards Compatibility (Optional)
8968

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:
9170

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";
9875
```
9976

10077
### Setting Provider
10178

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:
10382

10483
```tsx
10584
import { CreativeCodeUIProvider } from '@creativecodeco/ui';
10685

86+
// Import the design system CSS
10787
import '@creativecodeco/ui/lib/theme/css/main.css';
10888

10989
export default function RootLayout({ children }) {
11090
return (
111-
<html>
91+
<html lang="en">
11292
<body>
11393
<CreativeCodeUIProvider>{children}</CreativeCodeUIProvider>
11494
</body>
@@ -117,8 +97,20 @@ export default function RootLayout({ children }) {
11797
}
11898
```
11999

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+
120113
## License
121114

122115
MIT © [CreativeCode.com.co](https://github.com/creativecodeco)
123-
124116
Web [CreativeCode.com.co](https://creativecode.com.co)

0 commit comments

Comments
 (0)