@babydogeswap/uikit NPM

BabyDogeSwap UI Kit

The BabyDogeSwap UI kit is a collection of React components and hooks used to build pages for BabyDogeSwap's apps. It also includes a theme file for both dark and light modes.

How to Use

To utilize the BabyDogeSwap UI Kit package in your project, follow these steps:

Install the package using your preferred package manager:

Using Yarn:

yarn add @babydogeswap/uikit

Using npm:

npm install @babydogeswap/uikit

Before using BabyDogeSwap UIkit, you need to provide the theme file to styled-components.

First, import the necessary components and theme variables:

import { ThemeProvider } from 'styled-components'
import { light, dark } from '@babydogeswap/uikit'

Next, wrap your application or component tree with the ThemeProvider, passing the selected theme as the theme prop:

const App = () => {
    ...
    return (
        <ThemeProvider theme={isDark}>
            ....
        </ThemeProvider>
    );
};

Styling Components:

The BabyDogeSwap UIkit provides a set of reusable components that you can style easily using styled-components.

Here's an example :

import { Box, Text } from "@babydogeswap/uikit";

const MyComponent = () => {
    return (
        <Box pt="56px" mb="52px">
            <Text color="red" fontSize="2rem">Hello World</Text>
        </Box>
    );
};

In this example, we are using the Box component to create a container with padding at the top and margin at the bottom. Inside the Box, we have a Text component with red color and a font size of 2rem.

This styling is powered by styled-components, which allows you to write CSS-in-JS and style your components in an intuitive and efficient manner.

Reset

A reset CSS is available as a global styled-components.

import { ResetCSS } from '@babydogeswap/uikit'
...
<ResetCSS />

Storybook

The BabyDogeSwap UI Kit comes with a comprehensive documentation provided through Storybook, which allows you to explore and interact with the available components.

Launch the Storybook server:

Using Yarn:

yarn storybook

Using npm:

npm run storybook

Once the server is up and running, you can access the Storybook documentation in your web browser at the provided address (usually http://localhost:6006/)

Development Changes

We strive to maintain a high standard of development and documentation for the BabyDogeSwap UI Kit. When making changes to the kit, whether adding new components, variants, or making modifications, please adhere to the following expectations:

Adding New Components or Variants :

When adding a new component or variant, it is essential to provide a Storybook example for it. Storybook serves as our living documentation, showcasing the capabilities of each component and ensuring that they function as expected.

To add a new Storybook example:

Create a new story file for the component or variant under the appropriate folder.
Use Storybook's story API to define and document the usage of the new component or variant, along with any necessary props or options.
Make sure the Storybook example demonstrates the component in different scenarios or states, showcasing its flexibility and responsiveness.
If applicable, add any relevant information, explanations, or usage tips to the story's description.
Verify that the new example is functioning correctly and displays properly in Storybook.

You can change theme colors in colors config

In order to test how your changes appear in app, build a package using yarn build command, grab "dist" directory and replace it in your_app_name/node_modules/@babydogeswap/uikit There is also ways to automate this flow, you can find one that fits you in this thread: https://stackoverflow.com/questions/14381898/local-dependency-in-package-json

Updating snapshot tests is a vital part of maintaining the BabyDogeSwap UI Kit. Snapshot tests capture the current UI state and serve as a visual safeguard against unintended changes or regressions. By keeping snapshots up to date, we ensure the accuracy of our documentation, maintain consistency, and boost confidence in the UI's reliability.