TTech CORE UI

Welcome to Tyrannosaurus Tech's new Core UI Library! This library is designed to give our development teams a comprehensive set of components and tools to easily create and share user interfaces for our projects. Our Core UI Library provides a wide range of components and features, allowing our developers to create visually appealing designs with minimal effort. This library will make it easier for our teams to create beautiful and functional user interfaces for current and future projects.

View available components on the Storybook deployment.

• TTech CORE UI
  • CORE UI Stack Overview
• Usage
  • Installation
  • Using Components
  • Theming
    • Updates to CORE theme
      • Install Tailwind CSS
      • Update Tailwind config file
• CORE UI Development
  • Install Dependencies
  • Run Storybook
  • Test Changes
  • Commit Changes

CORE UI Stack Overview

1. Styled Components - . It enables developers to style React components by using existing CSS features such as variables, nesting, and mixins in a modular way. It also makes working with CSS easier by allowing developers to use the same code for both the HTML and the CSS, allowing for faster development and easier maintenance.
2. Tailwind CSS - Tailwind CSS is a utility-first CSS framework that provides low-level utility classes that correspond to common CSS properties and values. It allows developers to quickly construct custom designs without having to write custom CSS. Utility classes can be combined to create almost any layout or styling. These classes are highly customizable and can be modified to fit the specific needs of the project.
3. Tailwind UI - Tailwind UI is a collection of professionally designed, pre-built, fully responsive HTML components for building user interfaces with Tailwind CSS. It includes a library of custom-designed components, templates, and utilities that make it easy to create beautiful and consistent interfaces quickly.
4. Headless UI - Headless UI is a collection of open source UI components that allow developers to create interactive UI elements. It is designed to be flexible and can be used in combination with any backend technology. The components provided in Headless UI are built using HTML, CSS, and JavaScript and can be used to create a range of user interfaces, from simple forms to complex dashboards.

Usage

The CORE UI library can be imported into any project, and customized based on theme parameters (see Tailwind below). Simply install using the command below, and start importing components!

This typed package supports autocomplete, so you can quickly access available arguments and variables from the library.

Installation

npm install @tyrannosaurustech/ui

Using Components

import { Button } from "@tyrannosaurustech/ui";

const CustomButton = (props) => <Button {...props} />;

Theming

Use CORE default theme with no changes

// include this in your index file, before loading your components
import "@tyrannosaurustech/ui/src/index.css";

Updates to CORE theme

If you need to customize the theme for a project, you will need to install tailwind into your target project.

Install Tailwind CSS

How to Install Tailwind

npm i -D tailwindcss
npx tailwind init

/* Add to your css file, after following the tailwind setup */
@tailwind base;
@tailwind components;
@tailwind utilities;

Finally, add tailwindcss compilation to your build scripts following the article above.

Update Tailwind config file

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,ts,jsx,tsx}",
    "node_modules/@tyrannosaurustech/ui/src/**/*.{js,ts,jsx,tsx}",
  ], // important to include location of core package to tell tailwind to regenerate css for classes used in our package
  presets: [require("@tyrannosaurustech/ui/tailwind.config.js")], // use the CORE preset
  theme: {
    extend: {
      colors: {
        primary: {
          DEFAULT: `#40C057`,
          neg: "#2F9E44",
          100: "#69DB7C",
          200: "#B2F2BB",
          300: "#EBFBEE",
        },
      },
    },
  plugins: [],
};

NOTE: This tailwind config includes the CORE CSS file above so it is no longer needed to import "@tyrannosaurustech/ui/src/index.css";

CORE UI Development

Install Dependencies

npm i

Run Storybook

npm run storybook

Test Changes

npm run test

Commit Changes

git commit

Unknown Word Errors

CORE UI uses cspell to prevent typos. Deliberately add /* cSpell:disable */ at the top of a file when needed..