• A unified group of utility functions commonly used, and spread across different projects
• A unified group of reusable UI components commonly used, and spread across different projects
• W3C standards, common tooling, and high quality through CI/CD lifecycle
• Accessibility meeting WCAG 2.1 AA standards
• Faster developments and implementations
• Easy collaboration and Maintenance
• Versioning and changelogs
• Documentation

• Storybook/Developer documentation
• Figma (private design files)
• Confluence (private docs)

@dt-dds/react uses CSS-IN-JS behind the scenes. You'll also need to add Emotion as a project dependency.

yarn add @dt-dds/react @emotion/css @emotion/react @emotion/styled

Import the DT-DDS global styles in the root component.

import '@dt-dds/react/index.css';

And wrap your code in a ThemeProvider component to make it available to all components.

import { Provider as ThemeProvider, theme } from '@dt-dds/react';

function App() {
  return <ThemeProvider theme={theme}>
    ...
  <ThemeProvider/>
}

We provide a default Daimler Truck theme, available under the package react-core/themes

• Node.js >= v18.0.0
• Yarn

• Clone the repo
• yarn for package install

• 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
• Changesets for managing versioning and changelogs
• changeset-conventional-commits (forked - custom package) for automatically generating changesets based on conventional commits
• Tsup — TypeScript bundler powered by esbuild
• Yarn from managing packages
• Turbo-gen/Plop for custom generators

• yarn build - Build all packages, including the Storybook site
• yarn dev - Run all packages locally
• yarn lint - Lint all packages
• yarn clean - Clean up all node_modules and dist folders (runs each package's clean script)
• yarn format - Format all TypeScript, TypeScript with JSX, and Markdown files based on prettier
• yarn test - Run tests for all packages
• yarn changesets:add - Generates changesets based on conventional commits
• yarn changesets:version - Consumes all changesets, and updates to the most appropriate semver version based on those changesets. It also writes changelog entries for each consumed changeset
• yarn changesets:tag - Commits the newly created changelogs with the latest packages version and adds the git-tag as <package-name>@<package-version>
• yarn changesets:ci - Runs the whole changesets flow, useful for pipelines to generate changesets, versioning and tags
• 🚧 yarn release - Build all packages and run npm publish in each package that is of a later version than the one currently listed on npm

This Turborepo includes the following packages and applications:

• apps/docs: Developer documentation site, built with Storybook
• packages/dt-ui-react: Parent React library
• packages/react-packages: React components
• packages/tsconfig: Shared tsconfig.jsons used throughout the Turborepo
• packages/eslint-config-custom: ESLint preset
• packages/jest-config: Shared jest configuration file
• packages/changeset-conventional-commits: Changeset plugin used to automatically generate changesets and tagging versions

See the contributing guidelines.

If you've encountered a bug in our project, please follow these steps to report it:

1. Search Existing Issues: Before creating a new issue, please search the existing issues to check if the bug has already been reported. If you find a similar issue, you can add a comment to provide additional details.

2. Create a New Issue: If you couldn't find an existing issue, create a new issue and use the "Bug Report" template. Provide as much detail as possible, including steps to reproduce, expected behavior, and actual behavior. Screenshots, error messages, and relevant code snippets are highly appreciated.

To propose a new feature:

1. Search Existing Requests: First, search the existing issues to see if the feature has already been suggested. You can upvote and add your insights to existing feature requests.

2. Create a New Issue: If your feature idea hasn't been proposed yet, create a new issue and use the "Feature request" template.

• Be respectful and considerate when commenting on issues.
• Please do not post comments consisting solely of "+1" or ":thumbsup:". Use GitHub's "reactions" feature instead.
• Provide additional information promptly if requested by maintainers.

Licensed under MIT License