1.0.0-alpha.9 • Published 9 months ago

@bloodhoundenterprise/doodleui v1.0.0-alpha.9

Weekly downloads
-
License
Apache-2.0
Repository
github
Last release
9 months ago

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

  1. Install TailwindCSS
  2. Install DoodleUI (example using yarn shown below)
$ yarn add @bloodhoundenterprise/DoodleUI
  1. 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

  1. Install DoodleUI (example using yarn shown below)
$ yarn add @bloodhoundenterprise/DoodleUI
  1. Add the DoodleUI stylesheet to your application
<link rel="stylesheet" href="node_modules/@bloodhoundenterprise/doodleui/dist/styles.css">

Developer Notes

Dependencies

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

CommandDescription
devStart the dev server
buildBuild the component library
lintRun linter checks
testRun vitest
storybookSame as dev
build:storybookBuild storybook documentation
build:stylesGenerate CSS via TailwindCSS
generate-indexUpdate src/components/index.ts automatically
create-component Create a new component in src/components
format:checkCheck file formatting
format:writeFix file formatting
update-badgeUpdates 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.