mycro-frontend

Styleguide

Install

Configure your tailwind

• Using tailwind with CSS vars

// entry point application
import { setCssVars } from "@arcanishq/styleguide"
const root: HTMLElement = document.querySelector(":root") as any;

const colors = { /* All Colors */ }

setCssVars(colors, root);

Development

To develop/test our components, we use Storybook.

For quick proof of concept, we use the example/

yarn && yarn storybook
# Open in other terminal to watch CSS changes
yarn css:dev

Tests

List of components

Without Category

• Breadcrumbs
• Button
• Card
• Divider

Form Components

• Checkbox Group
• Checkbox
• Date Picker
• File Upload
• Form
• Input
• RadioBox
• Search Select
• Select
• Slider
• Switch
• Textarea

Layout Components

• Collapse
• Container
• Portal
• View
• Grid
• List

Feedback Components

• Drawer
• Modal
• Spin Loading
• Notify - Change in future to native notifications
• Sidebar
• Steps

Data Components

• Table
• Paragraph
• SubTitle
• Tooltip - Using tippyjs
• Calendar