TopBrains - Web Library

Web library of the TopBrains project by TB-CORP LLC is a set of styles and components powered by Vue.js and Nuxt.js. The primary goal of the library is to organize prepared set of resource to build TopBrains web project.

Contents

• Installation
• Usage
• Development
• Documentation
• Features
  • Theme setup
  • Components
  • Auto-configuration
  • Design2Code
• Sandbox
• Package
• License

Installation

The library can be installed in nuxt applications, the version that corresponds to the nuxt version in the package dependencies. The installation process involves two steps and does not require complex configuration.

1. Install the library release using npm:

npm install @tb-corp/tb-ds-web-library

You can specify the exact version of the library if you wish:

npm install @tb-corp/[email protected]

2. Bind @nuxt/components and the library as modules to your nuxt application in nuxt.config.js:

export default {
  buildModules: [
    '@nuxt/components',
    '@tb-corp/tb-ds-web-library'
  ],
  // ...
}

The library uses @nuxt/components to load components.

3. Preset the library's tailwindcss configuration in your project's tailwind.config.js:

module.exports = {
  presets: [
    require('@tb-corp/tb-ds-web-library/config/tailwind.config.js')
  ],
  // ...
}

Usage

After successful installation of the library, you can use ready styles and components. The library's styles are written using the CSS framework tailwindcss. Only components you use will be loaded into your project. See Documentation for more information about using styles and components.

Development

To deploy the development environment and implement new functionality and/or fix bugs, you need to do the following:

1. Clone the library repository:

git clone https://github.com/TB-CORP/TB-DS-web-library.git

2. Implement the necessary changes to the project;

3. Prepare a new or existing project for testing (create a new project Nuxt Installation);

4. Navigate the library in the terminal and build a local package;

cd path/to/updated/package

npm pack

5. Install the .tgz file generated in the root of the project into the project for testing:

cd path/to/testing/project

npm install path/to/updated/package/OUTPUT_NAME.tgz

6. Follow Installation 2-3 steps to bind modules and configure styles;

7. After successful testing, write the new version of the library in the package.json:

{
	version: "x.y.z"
}

8. Commit the updated library project into the current repository;

9. Create a git tag equivalent to the new version and push it to the current repository;

10. If necessary, create a GitHub release of the uploaded version (see Package first).

Documentation

The documentation of the styles and components is currently incomplete. For styles, see /config/tailwind.config.js, for components, you can explore component files.

Features

The library includes several useful features, knowing about which will make it easier for you to use the library package.

Theme setup

Theme setup is a set of necessary fundamental styles, on the basis of which all the components were built, resulting in the integrity of the interfaces and ease of development and extendability. Theme setup includes the design project (see Design2Code), Grids, Spacing, Typography, Icons, Colors and Assets.

Components

The UI components of the library include a set of components of different scale, sorted by this scale. If a component is in a particular group, it uses a component from the previous group(s).

• Basic - fundamental, indivisible components;
• General - basic components for building interfaces;
• Complex - components that make up a whole, but consist of several parts;
• Group - independent parts of the interface.

Auto-configuration

After installing the package you don't need to integrate options into your nuxt application configuration, it is done automatically by the package directly into your application configuration. Your nuxt.config.js will extend the library configuration, if there is a conflict your configuration will take priority. All this gives ease of installation and flexibility in configuring your nuxt application.

Design2Code

The design of all entities in the library strictly follows the Design2Code. All styles and components of the library are first carefully developed as a design project (see TB-DS-WL-design) and only then transferred to the code, this reduces the number of patch versions and increases the quality of the library.

Sandbox

Sandbox is the pages located in /sandbox/, which code you can browse to see how theme setup styles and components can be used and all possible variations. If you want to preview the sandbox pages in your browser, simply copy them in your project and adjust your tailwind.config.js's contents'.

Package

The library is distributed as an npm package, which is stored and organized using GitHub Packages and GitHub Actions. Uploading a new version of the package to the registry occurs only when a new release is created.

License

UNLINCESED.