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.

Viewing Components

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

# Start a dev server, see logs for address/port
# (usually http://localhost:5173/):
yarn dev

| dark | light | |--------|-------| | | |

Importing Components

All apps can import from Fringe using

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.

Using the Full System: Tailwind

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:

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.

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

#Build the application for production:
yarn build

#Locally preview production build:
yarn preview

Working Locally

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.)

Guidelines

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.