@bloodhoundenterprise/doodleui 1.0.0-alpha.0 → 1.0.0-alpha.10
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 +72 -14
- package/dist/doodleui.js +4659 -2885
- package/dist/index.d.ts +465 -0
- package/dist/styles.css +1 -0
- package/dist/vendor-CIleLpqO.js +12819 -0
- package/package.json +52 -21
- package/dist/style.css +0 -1
package/README.md
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<p align="center">
|
|
2
|
-
<img src="https://img.shields.io/badge/version-1.0.0--alpha.
|
|
2
|
+
<img src="https://img.shields.io/badge/version-1.0.0--alpha.10-teal" alt="version 1.0.0-alpha.10"/>
|
|
3
3
|
<a href="https://ghst.ly/BHSlack">
|
|
4
4
|
<img src="https://img.shields.io/badge/BloodHound Slack-4A154B?logo=slack&logoColor=EEF0F2"
|
|
5
5
|
alt="BloodHound Slack"></a>
|
|
@@ -11,12 +11,69 @@ A component library for use with [BloodHound Community Edition](https://github.c
|
|
|
11
11
|
|
|
12
12
|
This library is written in TypeScript and leverages [Radix](https://www.radix-ui.com/) components as its foundation via [shadcn](https://ui.shadcn.com/). [Tailwind CSS](https://tailwindcss.com/) is used for styling along with [Class Variance Authority](https://cva.style/docs) for creating opinionated variants as defined by our design system.
|
|
13
13
|
|
|
14
|
+
# Installation
|
|
15
|
+
|
|
16
|
+
## Using TailwindCSS
|
|
17
|
+
|
|
18
|
+
1. Install [TailwindCSS](https://tailwindcss.com/docs/installation)
|
|
19
|
+
2. Install DoodleUI (example using `yarn` shown below)
|
|
20
|
+
|
|
21
|
+
```
|
|
22
|
+
$ yarn add @bloodhoundenterprise/DoodleUI
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
3. Update your Tailwind configuration to include the DoodleUI plugin, preset and content
|
|
26
|
+
|
|
27
|
+
```
|
|
28
|
+
import { DoodleUIPlugin, DoodleUIPreset } from '@bloodhoundenterprise/doodleui';
|
|
29
|
+
|
|
30
|
+
module.exports = {
|
|
31
|
+
content: [
|
|
32
|
+
"./src/**/*.{html,js}" // your application source code
|
|
33
|
+
"node_modules/@bloodhoundenterprise/doodleui/dist/index.js" // DoodleUI components
|
|
34
|
+
],
|
|
35
|
+
plugins: [DoodleUIPlugin],
|
|
36
|
+
presets: [DoodleUIPreset],
|
|
37
|
+
...
|
|
38
|
+
}
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
These configuration options provide the base theme customizations and additional utility classes required to render DoodleUI components in alignment with the design system used by BloodHound Community Edition and BloodHound Enterprise.
|
|
42
|
+
|
|
43
|
+
## Manual Installation
|
|
44
|
+
|
|
45
|
+
1. Install DoodleUI (example using `yarn` shown below)
|
|
46
|
+
|
|
47
|
+
```
|
|
48
|
+
$ yarn add @bloodhoundenterprise/DoodleUI
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
2. Add the DoodleUI stylesheet to your application
|
|
52
|
+
|
|
53
|
+
```
|
|
54
|
+
<link rel="stylesheet" href="node_modules/@bloodhoundenterprise/doodleui/dist/styles.css">
|
|
55
|
+
```
|
|
56
|
+
|
|
14
57
|
## Developer Notes
|
|
15
58
|
|
|
16
59
|
### Dependencies
|
|
17
60
|
|
|
18
61
|
- [Node.js 20.x](https://nodejs.org/)
|
|
19
62
|
|
|
63
|
+
These components are built for usage with the Roboto font though there are fallback fonts in place if Roboto is not found. The Roboto font will need to be included in your project's assets or it will need to be pulled in via CDN for the font to display as expected.
|
|
64
|
+
|
|
65
|
+
Via Fontsource:
|
|
66
|
+
|
|
67
|
+
```
|
|
68
|
+
yarn add @fontsource/roboto
|
|
69
|
+
```
|
|
70
|
+
|
|
71
|
+
Then import the font in your entrypoint:
|
|
72
|
+
|
|
73
|
+
```
|
|
74
|
+
import '@fontsource/roboto/400.css';
|
|
75
|
+
```
|
|
76
|
+
|
|
20
77
|
### Getting Started
|
|
21
78
|
|
|
22
79
|
Clone this repository
|
|
@@ -40,19 +97,20 @@ yarn dev
|
|
|
40
97
|
|
|
41
98
|
### Other Scripts
|
|
42
99
|
|
|
43
|
-
| Command | Description
|
|
44
|
-
| --------------------------------- |
|
|
45
|
-
| dev | Start the dev server
|
|
46
|
-
| build | Build the component library
|
|
47
|
-
| lint | Run linter checks
|
|
48
|
-
| test | Run vitest
|
|
49
|
-
| storybook | Same as dev
|
|
50
|
-
| build:storybook | Build storybook documentation
|
|
51
|
-
| build:styles | Generate CSS via TailwindCSS
|
|
52
|
-
| generate-index | Update `src/components/index.ts` automatically
|
|
53
|
-
| create-component <component name> | Create a new component in `src/components`
|
|
54
|
-
| format:check | Check file formatting
|
|
55
|
-
| format:write | Fix file formatting
|
|
100
|
+
| Command | Description |
|
|
101
|
+
| --------------------------------- | ---------------------------------------------------- |
|
|
102
|
+
| dev | Start the dev server |
|
|
103
|
+
| build | Build the component library |
|
|
104
|
+
| lint | Run linter checks |
|
|
105
|
+
| test | Run vitest |
|
|
106
|
+
| storybook | Same as dev |
|
|
107
|
+
| build:storybook | Build storybook documentation |
|
|
108
|
+
| build:styles | Generate CSS via TailwindCSS |
|
|
109
|
+
| generate-index | Update `src/components/index.ts` automatically |
|
|
110
|
+
| create-component <component name> | Create a new component in `src/components` |
|
|
111
|
+
| format:check | Check file formatting |
|
|
112
|
+
| format:write | Fix file formatting |
|
|
113
|
+
| update-badge | Updates the version badge in the [README](README.md) |
|
|
56
114
|
|
|
57
115
|
## Licensing
|
|
58
116
|
|