Skip to content
Toyota Motor Europe DXP Reference Guide

Packages

DXP offers a handful of NPM packages to make your life easier.

Styleguide

Section titled “Styleguide”
Terminal window
npm install --save-dev @tmedxp/styleguide

Usage

Section titled “Usage”
import '@tmedxp/styleguide/main.css'; // styleguide without tokens
import '@tmedxp/styleguide/toyota.css'; // styleguide with toyota tokens
import '@tmedxp/styleguide/toyota/icons'; // toyota icons reference
import '@tmedxp/styleguide/lexus.css'; // styleguide with lexus tokens
import '@tmedxp/styleguide/lexus/icons'; // lexus icons reference

React Component Library

Section titled “React Component Library”
Terminal window
npm install --save-dev @tmdxp/dxp-headless-components
 
import { Overlay } from '@tmdxp/dxp-headless-components';


export const Component = () => <Overlay />;

Tools

Section titled “Tools”

Browserslist Config

Section titled “Browserslist Config”

You can use our browserslist config when building / bundling your styles or JavaScript.

This will automatically compile your code to support our Browser Support Matrix.

Terminal window
npm install --save-dev @tmedxp/browserslist-config

Babel Preset Env

Section titled “Babel Preset Env”
babel.config.js
import browserslistTargets from '@tmedxp/browserslist-config/targets';


export default {
  presets: [['@babel/preset-env', { targets: browserslistTargets }]],
};

Postcss Preset Env

Section titled “Postcss Preset Env”
postcss.config.js
import browserslistTargets from '@tmedxp/browserslist-config/targets';
import postcssPresetEnv from 'postcss-preset-env';


export default {
  plugins: [postcssPresetEnv({ browsers: browserslistTargets })],
};

ESLint Config

Section titled “ESLint Config”
Terminal window
npm install --save-dev @tmedxp/eslint-config
eslint.config.js
import dxpConfig from '@tmedxp/eslint-config';


export default [
  ...dxpConfig,
  // { /* Add your own plugins and rules */ },
];

Prettier Config

Section titled “Prettier Config”
Terminal window
npm install --save-dev @tmedxp/prettier-config
package.json
{
  "prettier": "@tmedxp/prettier-config"
}

TSConfig

Section titled “TSConfig”
Terminal window
npm install --save-dev @tmedxp/tsconfig
tsconfig.json
{
  "extends": "@tmedxp/tsconfig/base.json",
  "include": ["src/"]
}