@bloodhoundenterprise/doodleui NPM

DoodleUI

A component library for use with BloodHound Community Edition and BloodHound Enterprise.

This library is written in TypeScript and leverages Radix components as its foundation via shadcn. Tailwind CSS is used for styling along with Class Variance Authority for creating opinionated variants as defined by our design system.

Installation

Using TailwindCSS

Install TailwindCSS
Install DoodleUI (example using yarn shown below)

$ yarn add @bloodhoundenterprise/DoodleUI

Update your Tailwind configuration to include the DoodleUI plugin, preset and content

import { DoodleUIPlugin, DoodleUIPreset } from '@bloodhoundenterprise/doodleui';

module.exports = {
  content: [
    "./src/**/*.{html,js}" // your application source code
    "node_modules/@bloodhoundenterprise/doodleui/dist/index.js" // DoodleUI components
  ],
  plugins: [DoodleUIPlugin],
  presets: [DoodleUIPreset],
  ...
}

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.

Manual Installation

Install DoodleUI (example using yarn shown below)

$ yarn add @bloodhoundenterprise/DoodleUI

Add the DoodleUI stylesheet to your application

<link rel="stylesheet" href="node_modules/@bloodhoundenterprise/doodleui/dist/styles.css">

Developer Notes

Dependencies

Node.js 20.x

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.

Via Fontsource:

yarn add @fontsource/roboto

Then import the font in your entrypoint:

import '@fontsource/roboto/400.css';

Getting Started

Clone this repository

git clone git@github.com:SpecterOps/DoodleUI.git

Install dependencies with yarn

cd DoodleUI
yarn

Start the dev server

yarn dev

Other Scripts

Command	Description
dev	Start the dev server
build	Build the component library
lint	Run linter checks
test	Run vitest
storybook	Same as dev
build:storybook	Build storybook documentation
build:styles	Generate CSS via TailwindCSS
generate-index	Update `src/components/index.ts` automatically
create-component	Create a new component in `src/components`
format:check	Check file formatting
format:write	Fix file formatting
update-badge	Updates the version badge in the README

Licensing

Copyright 2024 Specter Ops, Inc.

Licensed under the Apache License, Version 2.0
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

Unless otherwise annotated by a lower-level LICENSE file or license header, all files in this repository are released under the Apache-2.0 license. A full copy of the license may be found in the top-level LICENSE file.