https://github.com/teambit/harmony-base-ui
https://github.com/teambit/harmony-base-ui
Last synced: about 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/teambit/harmony-base-ui
- Owner: teambit
- License: other
- Created: 2020-07-22T14:26:46.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2022-10-03T12:19:01.000Z (over 2 years ago)
- Last Synced: 2025-03-25T08:03:27.332Z (2 months ago)
- Language: TypeScript
- Size: 1.52 MB
- Stars: 6
- Watchers: 5
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://bit.dev/teambit/base-ui)
# Base component design system of Bit.dev
The [reusable set of infra-level React components](https://bit.dev/teambit/base-ui/)
used to build [Bit.dev](https://bit.dev).
## Components
All components in this frontend codebase were [contained and exposed using Bit](https://github.com/teambit/harmony-base-ui) as a set of independently-usable components. See the **[base collection on bit.dev](https://bit.dev/teambit/base-ui/)** to explore and integrate any component into your project.
- Install independent components with npm/yarn.
- Use `bit import` to source and edit components locally for quick editing and integration.
- Try any component hands-on in a live playground.
## This is a component-based micro-frontend
Wait.. what?
The entire bit.dev platform and website **isn't built as one monolithic application**.
Instead, it's built from **[components maintained in different codebases](https://docs.bit.dev/docs/workflows/microfrontends)** which are separately developed, then exposed and integrated together using [Bit](https://github.com/teambit/bit).
### Show me an example!
Take a look at the [bit.dev homepage](https://bit.dev/).
You will notice that it's built from components that live in different front-end codebases:
- ["Evangelist" marketing components](https://github.com/teambit/evangelist).
- [base-ui components](https://github.com/teambit/base-ui).
- Container application (private).
- etc
We use [Bit](https://github.com/teambit/bit) to contain and expose components from any codebase as a set of APIs in [bit.dev](https://bit.dev) that can be integrated into different pages and applications. For example:
- Exposed ["Evangelist" marketing components] on bit.dev.
- Exposed [base-ui components on bit.dev](https://bit.dev/bit/base-ui).
## Structure:
### Theme
All shared styles, colors, sizes, fonts, and css variables, belong here.
[Theme-provider](https://bit.dev/bit/base-ui/theme/theme-provider) applies all of these styles at the root of your app, and different apps may implement their own unique theme.
### Constants
Hard coded singleton values, like storage-url and enums. In case of change, this central location could update all other components.
### Layout
Components controlling the position of elements in the document. (Grid, breakpoints, etc)
### Atoms
Generic building blocks for any front end application.
These components are 'vanilla', meaning they should not contain content (like texts or icons) and no specific styles. This is because different designs could look entirely different, so any styles in the base component could lead to a 'CSS Specificity War'. So, add the bare minimum of css here and keep these components purely logical!
### Utils
Pure logic components and helpers. (no visual components)
## Setup
1. Clone the repository
1. [Install bit](https://docs.bit.dev/docs/installation)
1. Run `yarn install` or `npm install` to install all packages.
1. Run `bit import` to sync components.
1. Start hacking!