Accelint Design Foundation

This is the Accelint Design Foundation, an open-source component library to serve as part of the entire ecosystem of UX for Accelint.

Running locally

To run the local Storybook instance, use the Design Toolkit Storybook

``bash
pnpm i

pnpm --filter=@accelint/design-toolkit preview
`

If you run into errors, try running
pnpm build after you install the dependencies and then run the preview command again. If you don't have pnpm enabled then you can enable it with the command
corepack enable pnpm .

Run a local build

`bash
pnpm --filter=@accelint/design-foundation run build
`

Run local example app

To demonstrate usage in a Nextjs app:

`bash
pnpm --filter "*apps/next" run dev
`

Helpful extensions for VSCode

If you use Visual Studio Code, there are some helpful extensions you can install when working with Tailwind and Biome.

- Biome
- Tailwind CSS Intellisense
- Class Collapse

Also add the following to your settings.json file for VSCode:

`json
"editor.codeActionsOnSave": {
"quickfix.biome": "explicit"
},
"tailwindCSS.includeLanguages": {
"javascript": "javascript",
"typescript": "typescript",
"html": "html",
"typescriptreact": "html",
"javascriptreact": "html"
},
"tailwindCSS.experimental.classRegex": [
[
"/\\tw\\/ '([^']*)'"
],
[
"([\"'][^\"'].?[\"'])",
"]" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">\"'.?[\"']"
],
],
"files.associations": {
"*.css": "tailwindcss"
}
``

In Depth Documentation

Be sure to view topic specific documentation to understand technology choices, best practices, established patterns, and enforced opinions.

- Tailwind
- Tokens
- Variants