CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-teste-ui--system

Chakra UI system primitives providing styled API for atomic, theme-aware component styling

—

Pending
Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

Teste UI System

Chakra UI system primitives providing a styled API for creating atomic, theme-aware component styling. This package enables creating customizable, theme-aware React components with style props and theming capabilities.

Package Information

  • Package Name: @teste-ui/system
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install @teste-ui/system or yarn add @teste-ui/system

Core Imports

import { chakra, styled, useTheme, ThemeProvider } from "@teste-ui/system";

For CommonJS:

const { chakra, styled, useTheme, ThemeProvider } = require("@teste-ui/system");

Basic Usage

import { chakra, ThemeProvider } from "@teste-ui/system";

// Create enhanced JSX elements with style props
function App() {
  return (
    <ThemeProvider theme={theme}>
      <chakra.button 
        bg="green.200" 
        _hover={{ bg: "green.300" }}
        px={4}
        py={2}
      >
        Click me
      </chakra.button>
      
      <chakra.h1 fontSize="lg" color="blue.500">
        Heading
      </chakra.h1>
      
      {/* Create custom styled components */}
      <chakra.div 
        as="section"
        bg="gray.50"
        p={6}
        borderRadius="md"
      >
        Content area
      </chakra.div>
    </ThemeProvider>
  );
}

Architecture

The system is built around several key components:

  • Chakra Factory: The chakra function creates enhanced JSX elements with style props
  • Styled System: Integration with style props for responsive, theme-aware styling
  • Theme Provider: Context for theme and color mode management
  • Style Configuration: Component theming system with variants, sizes, and color schemes
  • TypeScript Integration: Full type safety for style props and component composition

Capabilities

Chakra Factory

Create enhanced JSX elements that accept style props and theme-aware styling.

declare const chakra: ChakraFactory & HTMLChakraComponents;

type ChakraFactory = {
  <T extends As, P = {}>(component: T, options?: ChakraStyledOptions): ChakraComponent<T, P>;
};

type HTMLChakraComponents = {
  [Tag in DOMElements]: ChakraComponent<Tag, {}>;
};

Styled Component Creation

Create custom styled components with theme awareness and style props.

function styled<T extends As, P = {}>(
  component: T, 
  options?: ChakraStyledOptions
): ChakraComponent<T, P>;

interface ChakraStyledOptions extends Dict {
  shouldForwardProp?(prop: string): boolean;
  label?: string;
  baseStyle?: SystemStyleObject | ((props: StyleResolverProps) => SystemStyleObject);
}

Theme Provider

Provides theme context and CSS custom properties for the application.

function ThemeProvider(props: ThemeProviderProps): JSX.Element;

interface ThemeProviderProps extends EmotionThemeProviderProps {
  cssVarsRoot?: string;
}

function useTheme<T extends object = Dict>(): WithCSSVar<T>;

Style Configuration Hooks

Hooks for applying component theming with variants, sizes, and color schemes.

function useStyleConfig(
  themeKey: string, 
  props?: ThemingProps & Dict
): CSSObject;

function useMultiStyleConfig(
  themeKey: string, 
  props?: ThemingProps & Dict
): Record<string, CSSObject>;

Theme Hooks

Access theme values and color mode functionality.

function useChakra<T extends Dict = Dict>(): {
  theme: T;
  colorMode: ColorMode;
  toggleColorMode: () => void;
  setColorMode: (value: any) => void;
};

function useToken<T extends StringOrNumber | StringOrNumber[]>(
  scale: string, 
  token: T, 
  fallback?: T
): T;

Styles Context

Create and manage component-specific style contexts.

function createStylesContext(componentName: string): [
  React.Provider<Dict<CSSObject>>, 
  () => Dict<CSSObject>, 
  React.Context<Dict<CSSObject>>
];

Forward Ref Utility

Enhanced forwardRef with proper TypeScript support for polymorphic components.

function forwardRef<Props extends object, Component extends As>(
  component: React.ForwardRefRenderFunction<
    any, 
    RightJoinProps<PropsOf<Component>, Props> & { as?: As; }
  >
): ComponentWithAs<Component, Props>;

Types

interface ChakraProps extends SystemProps {
  /** Used to truncate text at a specific number of lines */
  noOfLines?: ResponsiveValue<number>;
  /** Used for internal css management */
  __css?: SystemStyleObject;
  /** Used to pass theme-aware style props */
  sx?: SystemStyleObject;
  /** The emotion's css style object */
  css?: Interpolation<{}>;
}

interface ThemingProps<ThemeComponent extends string = any> {
  variant?: ResponsiveValue<string>;
  size?: ResponsiveValue<string>;
  colorScheme?: ThemeTypings["colorSchemes"];
  orientation?: "vertical" | "horizontal";
  styleConfig?: Dict;
}

type As<Props = any> = React.ElementType<Props>;

type PropsOf<T extends As> = React.ComponentPropsWithoutRef<T> & {
  as?: As;
};

interface ChakraComponent<T extends As, P = {}> 
  extends ComponentWithAs<T, ChakraProps & P> {}

type HTMLChakraProps<T extends As> = Omit<PropsOf<T>, "ref" | keyof StyleProps> & 
  ChakraProps & { as?: As; };

Re-exported APIs

This package also re-exports functionality from related packages:

  • @teste-ui/color-mode: Color mode utilities and hooks
  • @teste-ui/styled-system: Style props and responsive utilities
  • @emotion/react: keyframes and Interpolation types
Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@teste-ui/system@2.2.x
Publish Source
CLI
Badge
tessl/npm-teste-ui--system badge