turkmvc / local-components

Reusable React components to use in Local by Flywheel!

Local by Flywheel component library

Welcome to the official component library for Local by Flywheel!

What's included in this component library?

We appreciate curious minds and that's a great question! Take a quick look at our living component documentation here.

In additional to a quickly growing set of React components, we also having SVGs, SASS partials, and more to come!

Quick start

1. Clone and pull down the latest
2. Install using yarn
3. Start up Styleguidist yarn start
4. Check it out at http://localhost:6060

Digging deeper

The local-compoennts library can be broken down into 3 main parts:

1. components
2. styles
3. svg

Components

These are the visual elements that make up both Local and its Add-ons. There are currently 40+ React components in the library. Each component consists of a .tsx, index.js, README.md and optional .sass file.

Try it out for yourself!

1. Make changes to the internals of a component through its .tsx and .sass files (they should live reload)
2. Play around with the examples found in the README.md files
3. Have an idea or bug fix? Submit a pull request.

Styles

The component library leverages CSS Modules to manage and scope styles. These are considered local styles (not to be confused with the Local app 😉) Scoped local styles are a beautiful thing that allow Local to isolate components, run Add-ons with multiple versions of local-components and avoid collisions.

As wonderful as local styles are, there are instances where CSS needs to transcend a component. For that, we make use of global styles. Global styles should be familiar to most as that's all the web had for 20+ years. These styles are intended to be used sparingly as they introduce a lot of challenges when scaling an app with a library of Add-ons and Environments.

The following is an instance where a scoped component may use a combination of local and global styles to achieve a specific result:

:global(.WindowsToolbar .DragRegion)

This is something we try to avoid and are actively working to whittle down to the bare essentials.

If you'd like to learn more about scoped styles, please check out CSS Modules here.

SVGs

Coming soon!