Segel UI

Sumary

UI component library for the pages from Serturner Institut.

The library es built using React and TailwindCSS.

In order to get the maximum compatibility, we opted to use the rollup library to make the bundle instead webpack. This allows us to create a bundle that can be used in projects that don't use typescript without sacrificing the new ecmascript features. The complete project is written in typescript with a lintern like ESLint to ensure that all the team follows the same code style.

The tool Storybook is used to write a documentation and develop without create a pet project.

Motivation

UNDER CONSTRUCTION

Get started

1. install library

yarn add segel-ui

2. import specific css for tailwind

@import 'ui/src/styles/index.css';

3. configure tailwindcss

Modify the file tailwind.config.js with next code:

module.exports = require('segel-ui').getDefaultConfig() 

You can pass your own configuration to modify the default from the library (NOT READY)

Development Notes

The key words “MUST”, “MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”, “RECOMMENDED”, “MAY”, and “OPTIONAL” in this document are to be interpreted as described in RFC 2119.

In order to develop new components we need to setup the project with the command

yarn install

All components are located in src folder. The components that we want to expose on the library MUST be exported to outside on the index.ts file.

Folder Structure

• src On this folder we can found all components that are available.

• stories Here are located the component stories with some visual examples and how to use

Styling the components

In order to add styles to the components we MUST use the tailwindCSS style, that means use all utility classes defined by tailwind. When the property className is too long and becomes complicated to read or tailwind does not offer a specific solution you can add specific css in the index.css file. (RECOMMEND GUIDELINE)

Example:

/**
 *  Component using styles defined in tailwindcss. It's no necesary create css files unless the class name becomes unreadable or the style is not available
 */
function MyComponent () {
	return <div className="m-4 p-4 border border-blue-600 rounded text-gray-800 hover:bg-blue-100 w-full h-10">
		Hello world!
	</div>
}

Working with the theme

In order to mantain a standart with paddings, margings, etc. We MUST to style the component using the theme methods.

Example:

function MyComponent({ theme }) {
	const padding = theme.padding.sm;
	const maring = theme.margin.sm;
	return <div className={`${padding} ${margin} border border-blue-600 rounded text-gray-800 hover:bg-blue-100 w-full h-10`}>
		Hello world!
	</div>
}
export default withTheme(MyComponent);

ESLint

We use ESLint with the rules provided by airbnb with some modifications that makes sense for us. In order to keep the same style on the coding phase, pull requests are enforced to check the lint rules. If the ESLint rejects the checks you MUST fix it to make the merge with the main branch. You can check any time if you have any errors in ESLint using the command prompt with yarn lint. Or use the ESLint extension for Visual Studio Code.

Typescript

All components SHOULD be exported providing the types for its props and its references. The types MUST be named first with the name of the component and adding either Props or Ref at the end (e.g. BoxProbs view Box.tsx). In the event that you want to use all generic props for an HTML element in React, you SHOULD use the strategy outlined here: React Typescript Cheatsheet

Example with theme:

interface MyComponentProps extends ComponentTheme;

function MyComponent({ theme }: MyComponentProps) {
	const padding = theme.padding.sm;
	const maring = theme.margin.sm;
	return <div className={`${padding} ${margin} border border-blue-600 rounded text-gray-800 hover:bg-blue-100 w-full h-10`}>
		Hello world!
	</div>
}
export default withTheme<MyComponentProps>(MyComponent);

Use StoryBook to create the components

Storybook is an open source tool for building UI components and pages in isolation. So running the command

yarn storybook

you open the storybook panel to develop the components and its edge cases.

Manual Link to a project

Under construction