Revolve

https://revolve.backmarket.com
Admin
Revolve is Back Market's Design System crafted to help designers and engineers build a coherent and...
Tokens:46,941
Snippets:1,184
Trust Score:10
Update:5 months ago
Show doc for...
Tokens:
Raw
### Install vue-sfcmod and jiti

Source: https://revolve.backmarket.com/830f9aaa2/p/968607-codemodding/b/080ddc

Install vue-sfcmod as a codemod engine and jiti as a TypeScript-capable Node.js runtime. This is a necessary first step before using codemods.

```shell
yarn add -D vue-sfcmod jiti
```

--------------------------------

### Initialize Design System Plugin for Testing

Source: https://revolve.backmarket.com/830f9aaa2/p/06db16-setup-and-use/t/563ddd

Configure your test setup file to initialize the Design System plugin, providing necessary components like RouterLinkStub and translation functions. Ensure RevPortal is stubbed if used.

```typescript
// ./tests/setup.ts

import { RouterLinkStub, config } from '@vue/test-utils'

const plugin = createRevolvePlugin({
  RouterLinkComponent: RouterLinkStub,
  illustrationOptimizer: (path) => path,
  locale: ref('en-US'),
  translateFunction: (key, values) => intl.formatMessage(key, values),
})

config.global.plugins = [plugin]
```

```typescript
// ./tests/setup.ts

import { config } from '@vue/test-utils'

config.stubs.RevPortal = true
```

--------------------------------

### Initialize Design System Plugin for Tests

Source: https://revolve.backmarket.com/830f9aaa2/p/06db16

Configure your test setup file to initialize the Design System plugin, providing necessary dependencies like RouterLinkComponent, illustrationOptimizer, locale, and translateFunction.

```typescript
// ./tests/setup.ts

import { RouterLinkStub, config } from '@vue/test-utils'

const plugin = createRevolvePlugin({
  RouterLinkComponent: RouterLinkStub,
  illustrationOptimizer: (path) => path,
  locale: ref('en-US'),
  translateFunction: (key, values) => intl.formatMessage(key, values),
})

config.global.plugins = [plugin]
```

--------------------------------

### Install Revolve Design System Package

Source: https://revolve.backmarket.com/830f9aaa2/p/06db16

Install the Revolve Design System package using pnpm. Ensure you have access to the private BackMarket NPM registry.

```shell
pnpm add @backmarket/design-system
```

--------------------------------

### Set up Event Tracking with Design System Emitter

Source: https://revolve.backmarket.com/830f9aaa2/p/06db16

Import and use the Design System's event emitter to register listeners for tracking events like clicks. Use `emitter.on` to start tracking and `emitter.off` to stop.

```typescript
import { emitter } from '@ds/utils/tracking'

const function clickListener({ context }) {
  // Process the event here.
}

// Start tracking
emitter.on('click', clickListener)

// Stop tracking
emitter.off('click', clickListener)
```

--------------------------------

### Create Revolve Plugin for Nuxt

Source: https://revolve.backmarket.com/830f9aaa2/p/06db16

Integrate the Revolve Design System into a Nuxt.js application by creating a plugin that uses `createRevolvePlugin`. This setup includes defining the locale, router link component, illustration optimizer, and translate function.

```typescript
import { createRevolvePlugin } from '@ds/plugin'

import { defineNuxtPlugin } from '#app'
import { NuxtLink } from '#components'
import { useI18nLocale } from '#imports'

export default defineNuxtPlugin({
  name: 'design-system',
  enforce: 'pre',
  setup(nuxtApp) {
    const locale = useI18nLocale()
    const revolve = createRevolvePlugin({
      locale: locale,
      RouterLinkComponent: NuxtLink,
      illustrationOptimizer: (path: string) => `http://cdn.example.com/${path}`,
      translateFunction: (key, values) => intl.formatMessage(key, values),
    })

    nuxtApp.vueApp.use(revolve)
  }
})

```

--------------------------------

### Use IconView in XML Layouts

Source: https://revolve.backmarket.com/830f9aaa2/n/362594

Integrate the IconView component in XML layouts to display icons. Configure the icon resource, size, and other attributes as needed.

```xml
<com.backmarket.design.system.widget.icon.IconView
    android:id="@+id/icons_item_drawable"
    tools:icon="@drawable/ic_add_to_cart"
    app:size="size20"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"/>
```

--------------------------------

### Configure sfcmod.config.ts

Source: https://revolve.backmarket.com/830f9aaa2/p/968607-codemodding/b/080ddc

Create and configure the sfcmod.config.ts file at the root of your project. This file defines the presets for your codemods, including Design System presets and custom codemod paths.

```typescript
import dsConfig from '@backmarket/design-system/sfcmod.config'

// See https://github.com/sidnioulz/vue-sfcmod#config-file
export default {
  presets: [
    // Copy the DS presets
    ...dsConfig.presets,
    // Add the path to your own codemod scripts folder if you have your own
    'packages/config-codemods/src/*'
  ],
}

```

--------------------------------

### Use Design System Icon Component

Source: https://revolve.backmarket.com/830f9aaa2/p/06db16

Import and use icon components, such as `IconHeartFilled`, from the Design System's icons module. Note the different import path for icons compared to other components.

```vue
<template>
  <IconHeartFilled />
</template>

<script setup lang="ts">
import { IconHeartFilled } from '@ds/icons/IconHeartFilled'
</script>
```

--------------------------------

### Add Design Tokens Dependency (Gradle)

Source: https://revolve.backmarket.com/830f9aaa2/n/362594

Add the design-tokens-android library as a project dependency in your Android project's build.gradle file.

```kotlin
implementation("com.backmarket.design:design-tokens-android:4.34.0")
```

--------------------------------

### Use Colors in Compose

Source: https://revolve.backmarket.com/830f9aaa2/p/830f9aaa2/p/350efd-setup-and-use

Access color tokens within Compose components using RevolveTheme.colors. Ensure RevolveTheme is set up with CompositionLocalProvider.

```kotlin
Text(
    "Hello World",
    colors = RevolveTheme.colors.text.onactionDefaultHi

)
```

--------------------------------

### Use Icons in Compose

Source: https://revolve.backmarket.com/830f9aaa2/p/350efd-setup-and-use

Utilize the RevolveIcon component with Icons object for accessing icons. Customize size and tint as needed.

```kotlin
RevolveIcon(
  icon = Icons.addToCart, 
  size = IconSize.Size20,
  tint = RevolveTheme.colors.text.staticDefaultHiDisabled,
  contentDescription = "Add to cart"


)
```
Tokens:
Raw