@sisense/sdk-shared-ui

SDK Shared UI Components

The SDK Shared UI is a library of internal React components designed to streamline development for frontend developers, primarily focused on use in CSDK-related projects. The goal is to save developers' time by promoting reuse of existing work, enabling faster feature development, quicker bug resolution, and greater consistency across projects.

Status of SDK shared UI Components

🚧 In Progress

Steps for Adding New Components

Follow the Existing Structure: Ensure that the new component follows the same structure and conventions as the existing components in the library.

Unit Tests: Provide unit tests for the new component to ensure it functions correctly.

Storybook Stories: Add Storybook stories for the new component to enable visual testing and documentation.

Update package.json (Export Configuration): Add the new component to the export configuration in the package.json file located in the root of the package.

Update typesVersions Configuration: Include the new component type in the typesVersions configuration in the package.json file located in the root of the package.

Usage

To use the sdk-shared-ui in your React components import the components you need from the library:

// Named import example
import { DEPRECATED_Icon } from '@sisense/sdk-shared-ui';

const App = () => {
  return <DEPRECATED_Icon {...props} />;
};

export default App;

// Default import example from subpath
import DEPRECATED_Icon from '@sisense/sdk-shared-ui/DEPRECATED_Icon';

const App = () => {
  return <DEPRECATED_Icon {...props} />;
};

export default App;

Available Scripts

Build

• yarn build Builds the library in deployment mode.

• yarn build:prod Builds the library in production mode.

• yarn build -p @sisense/sdk-shared-ui --verbose Builds only the @sisense/sdk-shared-ui package in development mode.

• yarn build:prod -p @sisense/sdk-shared-ui --verbose Builds only the @sisense/sdk-shared-ui package in production mode.

Format

• yarn format:check Checks the code formatting using Prettier and ESLint.
• yarn nx:format:check -p @sisense/sdk-shared-ui --verbose Checks the code formatting using Prettier and ESLint for this package.
• yarn format Automatically formats code using Prettier and fixes fixable issues with ESLint.
• yarn nx:format -p @sisense/sdk-shared-ui --verbose Checks the code formatting using Prettier and ESLint for this package.

Unit Tests

• yarn test Runs vitest unit tests.

• yarn nx:test -p @sisense/sdk-shared-ui --verbose Runs unit tests for the @sisense/sdk-shared-ui package.

• yarn test:watch Runs unit tests in watch mode using Vitest.

• yarn workspaces foreach --include @sisense/sdk-shared-ui run test:watch Runs unit tests in watch mode specifically for the @sisense/sdk-shared-ui package.

• yarn test:coverage Runs unit tests with coverage reporting using Vitest.

• yarn nx:test:coverage -p @sisense/sdk-shared-ui --verbose Runs unit tests with coverage reporting specifically for the @sisense/sdk-shared-ui package.