1byte-react-design

1byte-react-design

A React component library built with TypeScript, Antd, and Emotion. This library provides a set of reusable UI components that can be easily integrated into your React applications.

Features

React

A popular JavaScript library for building user interfaces. It allows developers to create reusable UI components and provides a declarative approach to rendering views.

Antd

A UI design language and component library allowing developers to quickly create beautiful and functional user interfaces for web applications.

TypeScript

A superset of JavaScript that adds optional static type checking and other features to the language. It helps catch errors earlier in the development process and improves code readability and maintainability.

Emotion

A library designed for writing CSS styles with JavaScript. It provides powerful and flexible styling capabilities for your components.

Installation

To install the library, you can use either npm or yarn:

npm install 1byte-react-design

or

yarn add 1byte-react-design

Usage

To use the components from the library, you need to import them into your project. You can also configure the design tokens to customize the appearance of the components.

Example

import React from 'react';
import ReactDOM from 'react-dom';
import { config, Button } from '1byte-react-design';
import { globalToken } from '@/assets/styles/customTheme';

const seedToken: Partial<AliasToken> = {
    borderRadius: 6,
    colorLink: generatedTheme.colorPrimary,

    colorPrimary: generatedTheme.colorPrimary,
    colorTextSecondary: generatedTheme.colorSecondary,
    colorTextTertiary: generatedTheme.colorTertiary,
    colorTextQuaternary: generatedTheme.colorQuaternary,

    fontFamily: "'Open Sans', sans-serif",
    fontSize: 14,
    controlHeight: 28,
};

const themeConfig: ThemeConfig = {
    token: seedToken,
};

const globalToken = theme.getDesignToken(themeConfig);

// Set the design token
config.designToken = globalToken;

const App = () => {
    return (
        <div>
            <ConfigProvider theme={customTheme}>
                <App1Byte>
                    <Button type="primary">Click Me</Button>
                </App1Byte>
            </ConfigProvider>
        </div>
    );
};

ReactDOM.render(<App />, document.getElementById('root'));

Note

If you do not provide a designToken, the library will use the default Antd tokens for the components.

Getting Started

Before you start, make sure you have a fresh version of Node.js and Yarn installed. The current Long Term Support (LTS) release is an ideal starting point.

1. Fork this repository and clone your own fork to your computer:

   git clone https://github.com/1Byte-Software/1byte-react-design.git
   

2. From the project's root directory, install the required packages (dependencies):

   yarn install
   

3. To build/deploy the app, you can run:

   yarn build
   

   This will place all files needed for deployment for develop server into the /dist directory.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Contributing

We welcome contributions to improve this library. Please fork the repository and submit pull requests.

Authors

• 1byte dev

Acknowledgments

• Ant Design
• Emotion
• TypeScript

About

This library is developed by 1Byte to unify the interface for the company, optimize component reuse, and ensure that our developers do not need to remember conventions. The library is based on the Atomic Design architecture.