Fringe is the Axo design system and component library.
npm install @axodotdev/fringeFringe is the Axo design system and component library.
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.
``bash`Start a dev server, see logs for address/port
(usually http://localhost:5173/):
yarn dev
| dark | light |
|--------|-------|
| !darkmode example | !lightmode example |
`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.
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/