tecsinapse/design-system

Hybrid React components library and design system for TecSinapse

TecSinapse Design System

Welcome to TecSinapse Design System. This repo contains core components to build web and mobile applications. Our primary goal is to create a system that can be used to build a wide variety of TecSinapse websites and apps, while providing a consistent and inclusive user experience to our end users. In addition, the design system and component library should be easy to use for developers and designers.

Quick start

Please refer to the official documentation.

Packages

Package	Content	Version
@tecsinapse/react-core	core primitives for CSS-in-JS packages
@tecsinapse/react-web-kit	emotion styled-components for browsers with react-native-web
@tecsinapse/react-native-kit	emotion native styled-components for react-native cross platform development
@tecsinapse/react-charts	charts for react & react-native based on SVG
@tecsinapse/cortex-core	core primitives for tailwindcss packages
@tecsinapse/cortex-react	html based components using cortex-core primitives

Code of conduct

We want to foster an inclusive and friendly community around our Open Source efforts. This project follows the Contributor Covenant Code of Conduct. Please, read it and follow it.

If you feel another member of the community violated our code or you are experiencing problems participating in our community because of another individual's behavior, please get in touch with our maintainers.

Running in GitHub Codespaces

GitHub Codespaces allows you to develop directly in your browser. Follow the steps below to run the project:

1. Open the Repository on GitHub: Go to the main page of the repository on GitHub.

2. Start a Codespace: Click the Code button and then Codespaces. Next, click Create a codespace.

3. Wait for Setup: The Codespace will be set up automatically. This may take a few minutes.

4. Follow the steps below: in "Running locally":

Running locally

Recommended requirements:

• pnpm >= 9
• node >= 20

To run locally, you should install the dependencies first:

pnpm i

After this script, all packages will build. When developing, for a better experience, also use:

pnpm dev

This script watch for changes on any package and rebuild files to reflect on live mode. To run storybook with all components, use:

pnpm storybook

For web development this is sufficient. For mobile, follow additional steps on rn-playground.

How to make local changes available for other projects?

Check these docs.

Contributing

If you have ideas for how we could improve this readme or the project in general, let us know!

About TecSinapse

TecSinapse is a specialist in the automotive industry for over 15 years. We operate with diverse integrated solutions, from client prospecting to after-sales, plus market indicators tools and process improvement for complete management._