bojagi / pablo

Bojagi Design System

Bojagi - Bring your designers to code review ✅

Documentation ◆ Bojagi Website ◆ Join the open beta

💁‍♀️ What is Bojagi?

Bojagi is a service to review your UI changes visually. We are connected to your repository on GitHub and render your components in real time. This way your teammates or designer can review the visual changes and play around with your component. It's like hosting your Storybook, but more interactive.

Bojagi is currently in open beta, join here!

🏆 Why use Bojagi?

Bojagi reduces your development cycle times by removing the back and forth of reviewing your UI designs on your development environment.

• No more waiting until you deployed to staging or QA, do it before you merge to master! 🏃‍♀️
• Reduce communication effort: write comments, mark proposed changes visually and quickly give feedback 🚦
• Present your components to peers and customers without the need to click though your whole app 👩‍🎨
• See review feedback directly in GitHub 🤓

🤷‍♀️ How does it work?

Upload your components with our CLI and we display them! After you open your PR in GitHub you can easily review all the changes. The review status is then automatically sent to GitHub so you see if you got greenlit without needing to leave GitHub! Start with writing stories (Storybook works out of the box 📦).

Look a the quickstart guide here!

🔮 How to use the CLI?

Install it into your project with yarn:

yarn add -D @bojagi/cli

or npm:

npm install --save-dev @bojagi/cli

After writing your stories you can test if everything works by listing the components:

yarn bojagi preview # or: npx bojagi preview

After that you can try to deploy to Bojagi:

yarn bojagi deploy # or: npx bojagi deploy

Read more on using the CLI here

License

3-Clause BSD License

pablo's Issues

Unit based spacing

We want to go back to unit based spacing as enum based spacing is quite inflexible and hard to remember.
When using spacing, users define a multiplier that is multiplied by the spacing unit (8px by default).

licence missing

currently pablo is

"license": "UNLICENSED"

Add InteractionCard component

Currently the Card component is quite plain. As we often use the Card component as an interactive/button-like component there should be a special variant that has the following properties:

• Pointer cursor
• Visible hover state (e.g. slightly darker)
• Visible active state after click (e.g. a bit darker than hover state)
• Uses button instead of div
• Focusable (with outline we use for the others)

Add "overflow" option for tabs

Currently tabs are bound the width of the container. That is a problem when there are too many tabs.
There needs to be an option/prop that only shows Tab items that fit into the Tabs component.
Everything else would only be visible when clicking on a three dots or "more" button.

Bojagi compatability changes

Button

• as together with Link is not working
• Needs default values for text-decoration
• Support endIcon and switch icon prop to startIcon
• Adjust button sizes

Modal

• Modal custom max width and multiple different default max widths

Tooltip

• Tooltip use Portal and calculate position (optional: use react-popper)

Tabs

• Tabs has jumping height when switching selected Tab
• as prop of Tab is not working -> no Link tabs possible
• Tab not exposed in index.ts

Typography

• Add typography related styled-system options (e.g. text-align) (optional)

Theme

• support setting custom colors (e.g. secondary colors) (optional)

IconButton

• Support setting background and icon color in the component itself (optional)

General

• Use React.forwardRef for every component
• Move styleHelpers to top folder (currently in utils folder) (optional)
• Add missing spacings (maybe drop small scale spacings 2px and 6px) => maybe go back to multiplier? (optional)

Add Menu component

The Menu component is a list of interactable items that are contained in a Popover component.
A menu can be attached to any component via ref and has a boolean open state.

For now it's enough when the anchor of the Menu is only on the bottom right of an element. Optional it can be configurable (if not too much work).

Clicking on a menu item closes the menu again. Clicking outside of the menu closes it as well.

Create a reusable Popover component that also can be used by the ToolTip component and utilises the React Portal.

Long term TODO list

Concepts:

• breakpoints
• Mobile/Desktop show/hide components
• elevation (Box)
• Grid

Components:

• Select
• Searchable select
• Autosuggest
• Alert
• Badge
• Table
• Tags
• Tag dropdown/select
• Checkbox Group (with label)
• Label for RadioGroup
• Switch group
• Standalone Label
• Breadcrumb
• Pagination

Add ProgressBar component

The ProgressBar component needs to take a 0 to 1 value and display it as a progress bar.
Should be able to switch colors (brand, plain, positive, negative).
Non progressed space should have a light color, the progressed space should use the main color.
Progress should animate as well, animation duration should be configurable via props.

Add Spinner component

The Spinner component should indicate loading/processing.
Sizes should be configurable via prop and be similar to the Avatar sizes.
Example is the CircularProgress component of @material-ui/core.

For now ignore setting progress via prop.

dont hide toast while on hover

not sure how to implement this nicely but i wouldnt hide while you hover a toast.

Originally posted by @JohannesMerz in #22 (comment)

Add Icon component

Using icons currently is a bit of a mess. Some places enforce the right size, but using icons standalone often needs configuration (depending on the iconset).

This new Icon component helps with this. It forces the right sizes and also makes it easy to color the icons.

It should have the following props:

prop	type	description
size	'small' | 'medium' | 'large'	Enforces themewide sizes to the icon
color	string	Path to color to use for the icon, default common.black
icon	ReactNode | ReactElement	Icon component or element of icon component