DOCSEARCHbyAlgolia
Submit Docs

Skiff UI

repository·main·Indexed 19 days ago

https://github.com/skiff-org/skiff-ui

An open-source React component library containing reusable interface elements used within Skiff's ecosystem. Version 1.2.5 provides customizable components including Button, Avatar, Chip, Dropdown, IconText, and Input, all managed via a ThemeProvider for consistent styling.

Tokens
20.3K
Snippets
70
Records
105
Agent score
64%

What's inside @skiff-org/skiff-ui

  1. Install Skiff UI via npm or yarn

    main

    To add Skiff UI to your project, use your preferred package manager to install the @skiff-org/skiff-ui package.

    # Install Skiff UI with npm
npm install @skiff-org/skiff-ui --save

# Install Skiff UI with yarn
yarn add @skiff-org/skiff-ui

  2. Configure the ThemeProvider

    main

    To ensure Skiff UI components render with the correct styles, you must wrap your application's root component with the ThemeProvider provided by @skiff-org/skiff-ui.

    import * as React from 'react';
import { ThemeProvider } from '@skiff-org/skiff-ui';

function App({ Component }) {
  return (
    <ThemeProvider>
      <Component />
    </ThemeProvider>
  );
}

  3. Use Skiff UI components

    main

    Skiff UI provides a comprehensive set of React components for building interfaces. You can import components directly from the main entrypoint. Common component categories include:

    • Layout & Surfaces: Surface, Divider, Tabs, Dialog, Portal, Skeleton.
    • Buttons & Actions: Button, IconButton, ButtonGroup, ButtonGroupItem, Toggle.
    • Inputs: InputField, TextArea, Select, CodeInput, Checkbox (via Toggle).
    • Feedback & Overlays: Toast, Tooltip, CircularProgress, Banner, Dropdown.
    • Data Display: Avatar, Chip, Facepile, Typography, MonoTag, Icon.

    Most components follow a standard pattern of accepting a Props interface (e.g., AvatarProps, TypographyProps) to control their appearance and behavior.

  4. Use eslint-config-skiff-eslint for frontend projects

    main

    To apply the Skiff frontend ESLint configuration to your project, install the eslint-config-skiff-eslint package and extend it in your .eslintrc configuration file. This configuration is based on a predefined JSON schema and uses @rushstack/eslint-patch/modern-module-resolution to ensure proper module resolution for ESLint plugins.

    // In your project's .eslintrc.js
module.exports = {
  extends: [
    'eslint-config-skiff-eslint/frontend'
  ],
  // ... other config
};

  5. Install and use eslint-config-skiff-eslint

    main

    The eslint-config-skiff-eslint package provides a pre-configured ESLint configuration for Skiff projects. To use it, install the package and extend it in your project's .eslintrc or eslint.config.js file.

    This configuration uses @rushstack/eslint-patch/modern-module-resolution to ensure proper module resolution for ESLint plugins.

    {
  "extends": ["eslint-config-skiff-eslint"]
}

  6. Use Skiff UI components in your application

    main

    Import components directly from @skiff-org/skiff-ui. For example, you can use the Button component and specify its visual style using the Type enum.

    import { Button, Type } from '@skiff-org/skiff-ui';

<Button onClick={onClick} type={Type.SECONDARY}>
  Click me
</Button>

  8. Configure IconText component props

    main

    The IconText component is used to display text accompanied by one or more icons. It accepts several props to control its layout, styling, and behavior:

    Layout & Content

    • label: The text content of the component. Accepts a string or React.ReactNode.
    • startIcon: An icon to display before the text. Accepts an Icon or an IconComponent (a React.ReactElement<IconProps>).
    • endIcon: An icon to display after the text. Accepts an Icon or an IconComponent.
    • size: Controls the size of the component. Valid values are Size.SMALL, Size.MEDIUM, or Size.LARGE.
    • weight: Controls the text weight. Valid values are TypographyWeight.REGULAR or TypographyWeight.MEDIUM.

    Styling & Appearance

    • color: The color of the IconText content. Uses the Color type.
    • iconColor: Overrides the color of the icons.
    • variant: Determines if the component is filled or unfilled (uses FilledVariant).
    • forceTheme: Forces a specific ThemeMode.
    • className: Standard CSS class name for styled components.
    • style: Standard React inline styles.

    Interaction & Behavior

    • onClick: A callback function triggered on click. Can return void or Promise<void>.
    • disabled: A controlled boolean to disable the component.
    • disableHover: If true, disables the hover state.
    • tooltip: Displays a tooltip on hover. Accepts a string or TooltipLabelProps.

    Testing

    • dataTest: A string identifier used for E2E testing.
    <IconText
  label="Settings"
  startIcon={<SettingsIcon />}
  size={Size.MEDIUM}
  onClick={() => console.log('Clicked')}
/>

  9. Use InputProps for the Input component

    main

    The InputProps interface defines the configuration for the Input component. It extends InputFieldProps and includes the following properties:

    • endAdornment: An optional component (an Icon, React.ReactNode, or an array of nodes) to be displayed at the end of the input.
    • innerRef: A React.Ref<HTMLInputElement> to pass a reference directly to the underlying HTML input element.
    • readOnly: A boolean indicating whether the field is read-only.
    • type: An InputType enum value determining the input mode.
    • onBlur: (e: React.FocusEvent<HTMLInputElement>) => void
    • onChange: (e: React.ChangeEvent<HTMLInputElement>) => void
    • onFocus: (e: React.FocusEvent<HTMLInputElement>) => void
    • onKeyDown: (e: React.KeyboardEvent<HTMLInputElement>) => void
    • onKeyPress: (e: React.KeyboardEvent<HTMLInputElement>) => void
    • onPaste: A React.ClipboardEventHandler<HTMLInputElement> or a function (e?: React.ClipboardEvent<HTMLDivElement>) => void.

  11. Configure Chip component props

    main

    The Chip component accepts several props to control its visual appearance, content, and interaction.

    Content Props

    • label: The text or React node to display inside the chip.
    • avatar: An AvatarComponent to display at the start of the chip.
    • avatarTooltip: Tooltip content for the avatar.
    • icon: An Icon or IconComponent to display at the start of the chip.
    • tooltip: Tooltip content for the entire chip.

    Visual Props

    • variant: Determines if the chip is filled or unfilled (uses FilledVariant).
    • size: Controls the chip dimensions. Accepts Size.SMALL, Size.MEDIUM, or Size.LARGE.
    • color: The color applied to the chip (uses Color).
    • typographyWeight: Controls text weight. Accepts TypographyWeight.REGULAR or TypographyWeight.MEDIUM.
    • noBorder: A boolean that, when true, removes the chip's border.
    • forceTheme: Forces a specific ThemeMode.

    Interaction & Styling Props

    • onClick: Callback function triggered when any part of the chip is clicked.
    • onDelete: Callback function triggered when the 'x' icon (on an input tag) is clicked.
    • className: Standard CSS class for styled components.
    • style: Standard React CSS properties for inline customization.
    • dataTest: String used for E2E testing identification.
    <Chip 
  label="Completed" 
  variant="filled" 
  size={Size.MEDIUM} 
  onDelete={() => console.log('Deleted')} 
/>

  12. Use the ButtonGroup component

    main

    The ButtonGroup component is the default export from the ButtonGroup entrypoint. It is used to group multiple buttons together, typically for related actions. To use it, import the default component and provide the necessary props defined in ButtonGroupProps.

    import ButtonGroup from './components/ButtonGroup';

// Usage example
<ButtonGroup>
  <Button>Action 1</Button>
  <Button>Action 2</Button>
</ButtonGroup>