Box Package

This package serves as a wrapper for most of the CSS utility needs.

Box Usage

``jsx
import { Box } from '@dt-dds/react';

export const App = () => {
return (



Content 1

Content 2

);
};
`

Properties

| Property | Type | Default | Description |
| ------------ | --------------------- | ------- | ------------------------------------- |
| children | ReactNode | - | Child components to be rendered |
| element | React.ElementType | div | HTML element to be rendered as parent |
| dataTestId | string | - | Customizable test identifier |
| style | React.CSSProperties | - | Gives the Box specific css properties |
| role | AriaRole | - | Gives the Box specific role |

$3

- TypeScript for static type checking
- React — JavaScript library for user interfaces
- Emotion — for writing css styles with JavaScript
- Storybook — UI component environment powered by Vite
- Jest - JavaScript Testing Framework
- React Testing Library - to test UI components in a user-centric way
- ESLint for code linting
- Prettier for code formatting
- Tsup — TypeScript bundler powered by esbuild
- Yarn from managing packages

$3

- yarn build - Build the package
- yarn dev - Run the package locally
- yarn lint - Lint all files within this package
- yarn test - Run all unit tests
- yarn test:report - Open the test coverage report
- yarn test:update:snapshot - Run all unit tests and update the snapshot

$3

Running yarn build from the root of the package will use tsup to compile the raw TypeScript and React code to plain JavaScript.

The /dist folder contains the compiled output.

`bash
box
└── dist
├── index.d.ts <-- Types
├── index.js <-- CommonJS version
└── index.mjs <-- ES Modules version
...
``

$3

Follows semantic versioning

© License

Licensed under MIT License