Skip to content

Commit ec47942

Browse files
dragosctdragosct
authored
Merge pull request #74 from creativetimofficial/npm-david-ai-1.0.6
Npm david ai 1.0.6
2 parents bfeb004 + d14dca4 commit ec47942

90 files changed

Lines changed: 14166 additions & 2989 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎CHANGELOG.md‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,40 @@
11
# Change Log
22

3+
## [1.0.6] 2024-12-30
4+
5+
### Added for NPM
6+
7+
- Added TypeScript support for all JavaScript components
8+
- Accordion component rewritten in TypeScript
9+
- Added AccordionConfig interface and IAccordion interface
10+
- Added programmatic Accordion class implementation
11+
- Gallery component rewritten in TypeScript
12+
- Stepper component rewritten in TypeScript
13+
- Added StepperConfig interface and IStepper interface
14+
- Added programmatic Stepper class implementation
15+
- Popover component rewritten in TypeScript
16+
- Added PopoverConfig interface and IPopover interface
17+
- Added programmatic Popover class implementation
18+
- Tooltip component rewritten in TypeScript
19+
- Added TooltipConfig interface and ITooltip interface
20+
- Added programmatic Tooltip class implementation
21+
- Tabs component rewritten in TypeScript
22+
- Added TabsConfig interface and ITabs interface
23+
- Added programmatic Tabs class implementation
24+
- Modal component rewritten in TypeScript
25+
- Added ModalConfig interface and IModal interface
26+
- Added programmatic Modal class implementation
27+
- Dropdown component rewritten in TypeScript
28+
- Added DropdownConfig interface and IDropdown interface
29+
- Added programmatic Dropdown class implementation
30+
- Collapse component rewritten in TypeScript
31+
- Added CollapseConfig interface and ICollapse interface
32+
- Added programmatic Collapse class implementation
33+
- Alert component rewritten in TypeScript
34+
- All future components will be written in TypeScript
35+
- Added TypeScript type definitions and interfaces
36+
- Improved type safety and developer experience with strict typing
37+
338
## [1.0.5] 2024-12-24
439

540
### Added for NPM

‎README.md‎

Lines changed: 128 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -5,35 +5,155 @@
55

66
[David UI](https://www.creative-tim.com/david-ui) is a free and open-source collection of customizable, production-ready UI components built with **Tailwind CSS**. Designed to be developer-friendly and performance-focused, David UI streamlines the creation of modern, visually appealing interfaces, helping you deliver high-quality user experiences faster.
77

8-
98
[![David UI Thumb](https://github.com/creativetimofficial/public-assets/blob/master/ct-assets/david-ai.png?raw=true)](https://www.creative-tim.com/david-ui/html/overview)
109

10+
<div align="center">
11+
12+
[![npm version](https://img.shields.io/npm/v/david-ai.svg)](https://www.npmjs.com/package/david-ai)
13+
[![npm downloads](https://img.shields.io/npm/dm/david-ai.svg)](https://www.npmjs.com/package/david-ai)
14+
15+
</div>
16+
1117
## Table of Contents
18+
1219
- [David UI - Free Tailwind CSS Components Library](#david-ui---free-tailwind-css-components-library)
1320
- [Table of Contents](#table-of-contents)
14-
- [Quick Start](#quick-start)
15-
- [Install `david-ai`](#install-david-ai)
21+
- [Getting Started](#getting-started)
22+
- [Using with CDN](#using-with-cdn)
23+
- [Basic Usage NPM](#basic-usage-npm)
24+
- [Using with Global Access](#using-with-global-access)
25+
- [Typescript](#typescript)
1626
- [Documentation](#documentation)
1727
- [Explore Components](#explore-components)
1828
- [Community](#community)
1929
- [License](#license)
20-
- [Older Version](#older-version)
2130
- [Contribute \& Feedback](#contribute--feedback)
2231

23-
24-
## Quick Start
32+
## Getting Started
2533

2634
Learn how to use `david-ai` components to quickly and easily create elegant and flexible pages using Tailwind CSS.
2735

2836
`david-ai` is working with Tailwind CSS classes and you need to have Tailwind CSS installed on your project - <a href="https://tailwindcss.com/docs/installation" target="_blank">Tailwind CSS Installation.</a>
2937

38+
### Using with CDN
3039

31-
### Install `david-ai`
40+
You can include david-ai via a CDN and initialize alerts globally in the browser. Add the following script to your HTML file:
41+
42+
```html
43+
<script
44+
src="https://cdn.jsdelivr.net/gh/creativetimofficial/david-ai@1.0.6/packages/dist/david-ai.min.js"
45+
defer
46+
></script>
47+
```
48+
49+
### Basic Usage NPM
3250

3351
```bash
3452
npm i david-ai
3553
```
3654

55+
After installing, you can use the components in your project across different frameworks:
56+
57+
```tsx
58+
import { initAlert } from "david-ai";
59+
60+
// Initialize alerts
61+
initAlert();
62+
```
63+
64+
### Using with Global Access
65+
66+
If you prefer, you can use the DavidAI global object instead of directly importing initAlert:
67+
68+
```tsx
69+
import * as DavidAI from "david-ai";
70+
71+
// Initialize alerts
72+
DavidAI.initAlert();
73+
```
74+
75+
## TypeScript
76+
77+
David AI components can be used in two ways - through simple ESM imports or programmatically with TypeScript support. Here's how to use both approaches:
78+
79+
### Simple ESM Import
80+
81+
The quickest way to use components is through direct ESM imports:
82+
83+
```tsx
84+
import { initAlert } from "david-ai";
85+
86+
// Initialize alerts
87+
initAlert();
88+
```
89+
90+
### Programmatic Usage with TypeScript
91+
92+
For more control and type safety, you can use the programmatic approach with full TypeScript support:
93+
94+
This programmatic approach provides:
95+
96+
- Full TypeScript support
97+
- Fine-grained control over component behavior
98+
- Access to component instance methods
99+
- Proper cleanup on unmount
100+
101+
```tsx
102+
import { Accordion } from "david-ai";
103+
import type { AccordionConfig, IAccordion } from "david-ai";
104+
105+
document.addEventListener("DOMContentLoaded", () => {
106+
const container = document.getElementById("accordion-container");
107+
108+
if (container) {
109+
const config: AccordionConfig = {
110+
exclusive: true,
111+
allOpen: false,
112+
};
113+
114+
const accordion: IAccordion = new Accordion(container, config);
115+
116+
// Handle external button controls
117+
const showAllButton = document.getElementById("show-all");
118+
const hideAllButton = document.getElementById("hide-all");
119+
const toggleFirstButton = document.getElementById("toggle-first");
120+
121+
showAllButton?.addEventListener("click", () => {
122+
accordion.showAll();
123+
});
124+
125+
hideAllButton?.addEventListener("click", () => {
126+
accordion.hideAll();
127+
});
128+
129+
toggleFirstButton?.addEventListener("click", () => {
130+
const firstButton = document.getElementById("button-1") as HTMLElement;
131+
if (firstButton) {
132+
accordion.toggle(firstButton);
133+
}
134+
});
135+
136+
// Cleanup on unmount
137+
window.addEventListener("unload", () => {
138+
accordion.cleanup();
139+
});
140+
}
141+
});
142+
```
143+
144+
For detailed usage of each component, check out their respective documentation:
145+
146+
- [Accordion](https://www.creative-tim.com/david-ui/docs/html/accordion) (ESM & Programmatic)
147+
- [Alert](https://www.creative-tim.com/david-ui/docs/html/alert) (ESM)
148+
- [Collapse](https://www.creative-tim.com/david-ui/docs/html/collapse) (ESM & Programmatic)
149+
- [Dropdown](https://www.creative-tim.com/david-ui/docs/html/dropdown) (ESM & Programmatic)
150+
- [Gallery](https://www.creative-tim.com/david-ui/docs/html/gallery) (ESM)
151+
- [Modal](https://www.creative-tim.com/david-ui/docs/html/modal) (ESM & Programmatic)
152+
- [Popover](https://www.creative-tim.com/david-ui/docs/html/popover) (ESM & Programmatic)
153+
- [Stepper](https://www.creative-tim.com/david-ui/docs/html/stepper) (ESM & Programmatic)
154+
- [Tabs](https://www.creative-tim.com/david-ui/docs/html/tabs) (ESM & Programmatic)
155+
- [Tooltip](https://www.creative-tim.com/david-ui/docs/html/tooltip) (ESM & Programmatic)
156+
37157
Congratulations 🥳, you did it, now you're ready to use `david-ai`.
38158

39159
## Documentation
@@ -42,8 +162,6 @@ David UI’s documentation includes code snippets, previews, and detailed usage
42162

43163
Visit the **[David UI Docs](https://www.creative-tim.com/david-ui)** to explore the entire library.
44164

45-
46-
47165
## Explore Components
48166

49167
<table>
@@ -321,12 +439,10 @@ Visit the **[David UI Docs](https://www.creative-tim.com/david-ui)** to explore
321439
</tr>
322440
</table>
323441

324-
325442
## Community
326443

327444
- We're excited to see the community adopt David AI, raise issues, and provide feedback.
328445
- Whether it's a feature request, bug report, or a project to showcase, please get involved!
329-
330446

331447
## License
332448

@@ -335,6 +451,7 @@ Copyright (c) 2020-2025 [Creative Tim](https://www.creative-tim.com)
335451
David UI is distributed under the **[MIT License](https://creative-tim.com/david-ui/docs/html/license)**, providing freedom and flexibility for all projects.
336452

337453
## Older Version
454+
338455
You can find the older version of the David UI in the [tailwind-starter-kit](https://github.com/creativetimofficial/david-ai/tree/tailwind-starter-kit) branch.
339456

340457
## Contribute & Feedback
@@ -344,4 +461,3 @@ We welcome contributions and feedback! If you have suggestions, encounter issues
344461
---
345462

346463
**Build better, faster, and smarter with David UI.** Explore the documentation and start leveraging our components to deliver polished, user-friendly interfaces with ease.
347-

‎components/stepper/stepper-custom-styles.html‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,47 @@
11

2-
<div data-stepper-container data-initial-step="1" class="w-full">
2+
<div data-dui-stepper-container data-dui-initial-step="1" class="w-full">
33
<div class="flex w-full items-center bg-stone-800 p-2 rounded-full">
4-
<div aria-disabled="false" data-step class="group w-full flex items-center">
4+
<div aria-disabled="false" data-dui-step class="group w-full flex items-center">
55
<div class="relative">
66
<span class="relative grid h-4 w-4 place-items-center rounded-full bg-stone-600 group-data-[active=true]:bg-stone-50 group-data-[active=true]:text-stone-800 group-data-[completed=true]:bg-stone-50 group-data-[completed=true]:text-stone-800"></span></div>
77
<div class="flex-1 h-0.5 bg-stone-600 group-data-[completed=true]:bg-stone-50"></div>
88
</div>
9-
<div aria-disabled="true" data-step class="group w-full flex items-center">
9+
<div aria-disabled="true" data-dui-step class="group w-full flex items-center">
1010
<div class="relative">
1111
<span class="relative grid h-4 w-4 place-items-center rounded-full bg-stone-600 group-data-[active=true]:bg-stone-50 group-data-[active=true]:text-stone-800 group-data-[completed=true]:bg-stone-50 group-data-[completed=true]:text-stone-800"></span>
1212
</div>
1313
<div class="flex-1 h-0.5 bg-stone-600 group-data-[completed=true]:bg-stone-50"></div>
1414
</div>
15-
<div aria-disabled="true" data-step class="group flex items-center">
15+
<div aria-disabled="true" data-dui-step class="group flex items-center">
1616
<div class="relative">
1717
<span class="relative grid h-4 w-4 place-items-center rounded-full bg-stone-600 group-data-[active=true]:bg-stone-50 group-data-[active=true]:text-stone-800 group-data-[completed=true]:bg-stone-50 group-data-[completed=true]:text-stone-800"></span>
1818
</div>
1919
</div>
2020
</div>
2121

2222
<div class="mt-8">
23-
<div data-step-content="1" class="step-content hidden">
23+
<div data-dui-step-content="1" class="step-content hidden">
2424
<p class="text-xl font-semibold mb-4">Step 1 Content</p>
2525
<p class="text-stone-500">This is the content for step 1. Add whatever content you need here.</p>
2626
</div>
27-
<div data-step-content="2" class="step-content">
27+
<div data-dui-step-content="2" class="step-content">
2828
<p class="text-xl font-semibold mb-4">Step 2 Content</p>
2929
<p class="text-stone-500">This is the content for step 2. Add whatever content you need here.</p>
3030
</div>
31-
<div data-step-content="3" class="step-content hidden">
31+
<div data-dui-step-content="3" class="step-content hidden">
3232
<p class="text-xl font-semibold mb-4">Step 3 Content</p>
3333
<p class="text-stone-500">This is the content for step 3. Add whatever content you need here.</p>
3434
</div>
3535
</div>
3636

3737
<div class="mt-6 flex w-full justify-between gap-4">
3838
<button
39-
data-stepper-prev
39+
data-dui-stepper-prev
4040
class="inline-flex items-center justify-center border align-middle select-none font-sans font-medium text-center duration-300 ease-in disabled:opacity-50 disabled:shadow-none disabled:cursor-not-allowed focus:shadow-none text-sm py-2 px-4 shadow-sm hover:shadow-md bg-stone-800 hover:bg-stone-700 relative bg-gradient-to-b from-stone-700 to-stone-800 border-stone-900 text-stone-50 rounded-lg hover:bg-gradient-to-b hover:from-stone-800 hover:to-stone-800 hover:border-stone-900 after:absolute after:inset-0 after:rounded-[inherit] after:box-shadow after:shadow-[inset_0_1px_0px_rgba(255,255,255,0.25),inset_0_-2px_0px_rgba(0,0,0,0.35)] after:pointer-events-none transition antialiased">
4141
Previous
4242
</button>
4343
<button
44-
data-stepper-next
44+
data-dui-stepper-next
4545
class="inline-flex items-center justify-center border align-middle select-none font-sans font-medium text-center duration-300 ease-in disabled:opacity-50 disabled:shadow-none disabled:cursor-not-allowed focus:shadow-none text-sm py-2 px-4 shadow-sm hover:shadow-md bg-stone-800 hover:bg-stone-700 relative bg-gradient-to-b from-stone-700 to-stone-800 border-stone-900 text-stone-50 rounded-lg hover:bg-gradient-to-b hover:from-stone-800 hover:to-stone-800 hover:border-stone-900 after:absolute after:inset-0 after:rounded-[inherit] after:box-shadow after:shadow-[inset_0_1px_0px_rgba(255,255,255,0.25),inset_0_-2px_0px_rgba(0,0,0,0.35)] after:pointer-events-none transition antialiased">
4646
Next
4747
</button>

‎components/stepper/stepper-demo.html‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,23 @@
11

2-
<div data-stepper-container data-initial-step="1" class="w-full">
2+
<div data-dui-stepper-container data-dui-initial-step="1" class="w-full">
33
<div class="flex w-full items-center justify-between">
4-
<div aria-disabled="false" data-step class="group w-full flex items-center">
4+
<div aria-disabled="false" data-dui-step class="group w-full flex items-center">
55
<div class="relative">
66
<span class="relative grid h-10 w-10 place-items-center rounded-full bg-stone-200 group-data-[active=true]:bg-stone-800 group-data-[active=true]:text-white group-data-[completed=true]:bg-stone-800 group-data-[completed=true]:text-white">
77
1
88
</span>
99
</div>
1010
<div class="flex-1 h-1 bg-stone-200 group-data-[completed=true]:bg-stone-800"></div>
1111
</div>
12-
<div aria-disabled="true" data-step class="group w-full flex items-center">
12+
<div aria-disabled="true" data-dui-step class="group w-full flex items-center">
1313
<div class="relative">
1414
<span class="relative grid h-10 w-10 place-items-center rounded-full bg-stone-200 group-data-[active=true]:bg-stone-800 group-data-[active=true]:text-white group-data-[completed=true]:bg-stone-800 group-data-[completed=true]:text-white">
1515
2
1616
</span>
1717
</div>
1818
<div class="flex-1 h-1 bg-stone-200 group-data-[completed=true]:bg-stone-800"></div>
1919
</div>
20-
<div aria-disabled="true" data-step class="group flex items-center">
20+
<div aria-disabled="true" data-dui-step class="group flex items-center">
2121
<div class="relative">
2222
<span class="relative grid h-10 w-10 place-items-center rounded-full bg-stone-200 group-data-[active=true]:bg-stone-800 group-data-[active=true]:text-white group-data-[completed=true]:bg-stone-800 group-data-[completed=true]:text-white">
2323
3
@@ -27,28 +27,28 @@
2727
</div>
2828

2929
<div class="mt-8">
30-
<div data-step-content="1" class="step-content hidden">
30+
<div data-dui-step-content="1" class="step-content hidden">
3131
<p class="text-xl font-semibold mb-4">Step 1 Content</p>
3232
<p class="text-stone-500">This is the content for step 1. Add whatever content you need here.</p>
3333
</div>
34-
<div data-step-content="2" class="step-content">
34+
<div data-dui-step-content="2" class="step-content">
3535
<p class="text-xl font-semibold mb-4">Step 2 Content</p>
3636
<p class="text-stone-500">This is the content for step 2. Add whatever content you need here.</p>
3737
</div>
38-
<div data-step-content="3" class="step-content hidden">
38+
<div data-dui-step-content="3" class="step-content hidden">
3939
<p class="text-xl font-semibold mb-4">Step 3 Content</p>
4040
<p class="text-stone-500">This is the content for step 3. Add whatever content you need here.</p>
4141
</div>
4242
</div>
4343

4444
<div class="mt-6 flex w-full justify-between gap-4">
4545
<button
46-
data-stepper-prev
46+
data-dui-stepper-prev
4747
class="inline-flex items-center justify-center border align-middle select-none font-sans font-medium text-center duration-300 ease-in disabled:opacity-50 disabled:shadow-none disabled:cursor-not-allowed focus:shadow-none text-sm py-2 px-4 shadow-sm hover:shadow-md bg-stone-800 hover:bg-stone-700 relative bg-gradient-to-b from-stone-700 to-stone-800 border-stone-900 text-stone-50 rounded-lg hover:bg-gradient-to-b hover:from-stone-800 hover:to-stone-800 hover:border-stone-900 after:absolute after:inset-0 after:rounded-[inherit] after:box-shadow after:shadow-[inset_0_1px_0px_rgba(255,255,255,0.25),inset_0_-2px_0px_rgba(0,0,0,0.35)] after:pointer-events-none transition antialiased">
4848
Previous
4949
</button>
5050
<button
51-
data-stepper-next
51+
data-dui-stepper-next
5252
class="inline-flex items-center justify-center border align-middle select-none font-sans font-medium text-center duration-300 ease-in disabled:opacity-50 disabled:shadow-none disabled:cursor-not-allowed focus:shadow-none text-sm py-2 px-4 shadow-sm hover:shadow-md bg-stone-800 hover:bg-stone-700 relative bg-gradient-to-b from-stone-700 to-stone-800 border-stone-900 text-stone-50 rounded-lg hover:bg-gradient-to-b hover:from-stone-800 hover:to-stone-800 hover:border-stone-900 after:absolute after:inset-0 after:rounded-[inherit] after:box-shadow after:shadow-[inset_0_1px_0px_rgba(255,255,255,0.25),inset_0_-2px_0px_rgba(0,0,0,0.35)] after:pointer-events-none transition antialiased">
5353
Next
5454
</button>

0 commit comments

Comments
 (0)