fringe

Fringe is the Axo design system and component library.

Using Fringe in Your Project

Fringe has two main sections: the lib directory, which contains the components themselves and the app contained in src, which documents the components and provides a development sandbox.

$3

To see which components are available and examples of their variations, in both dark and light mode, run Fringe locally:

``bash


Start a dev server, see logs for address/port

(usually http://localhost:5173/):

yarn dev
`

| dark | light |
|--------|-------|
| !darkmode example | !lightmode example |

$3

All apps can import from Fringe using


`js
import COMPONENT from "@axodotdev/fringe/lib/COMPONENT";
`

Thanks to the magic of [TurboRepo], apps within the turbo-axo repository will always point to the most updated code. Apps in different repositories will of course need to point to a new release to get new features.

See the release section for more about releasing a new version.

$3


While the components themselves contain all the information they need to be used in an app, the colors, typography, and other design system aspects also rely on the styles defined in src/assets/main.css and tailwind.config.js.

To include this in your app, import from the package's tailwind.config:

`js
const {
plugins,
theme,
darkMode,
} = require("@axodotdev/fringe/tailwind.config");

module.exports = {
content:[
/ this lines gets styles from uncompiled Vue components /,
"./node_modules/@axodotdev/fringe/lib/*.vue",
/ other, app-specific config /,
],
theme,
plugins,
darkMode,
};
`

Development

This is a [Vue 3] application that uses Node 18 and [yarn] for development and is
deployed as an NPM package.

`bash
#Start a dev server, see logs for address/port:
yarn dev

#Build the application for production:
yarn build

#Locally preview production build:
yarn preview
`

$3

When working on a component in conjunction with work for a repository outside the TurboRepo, it is recommended to use [yarn link] to make changes in package and app simple to keep together.

⚠️ Don't forget to push both branches, though!

(Note: The documentation points to the classic docs, but they are bit more explanatory and still correct for this feature.)

$3

A few good rules for developing a component for Fringe.

* Do it! If this is something we want consistent across apps, put it here.
* Develop the component in the Fringe display page first and look at it in light and dark modes.
* Don't use scoped styles — rather add classes that do not exist in [Tailwind] to src/assets/main.css, so that things like animations and timings, etc., are easily kept consistent across components and apps.
* If you add a component for something you know exists in other apps, try to replace it at the same time — while we are still on the small side, this is a small step that will pay dividends later.

Release

To keep churn as low as possible, new versions of Fringe should only be cut if a new release of an app depends on the new feature. That said, don't let the desire to avoid a new version prevent you from back-porting functionality that is or should be shared by multiple apps.

When you are ready to release a version, follow the checklist.


[Vue 3]: https://vuejs.org/
[yarn]: https://yarnpkg.com/
[yarn link`]: https://classic.yarnpkg.com/lang/en/docs/cli/link/
[TurboRepo]: https://turborepo.org/
[Tailwind]: https://tailwindcss.com/
[ESLint]: https://eslint.org/