Telefonica / mistica-web

React components library for Telefonica Design System (Mistica)

Getting started

Install

yarn add @telefonica/mistica

or

npm install @telefonica/mistica

Start using @telefonica/mistica

Before using any of our components you have to add <ThemeContextProvider> in the root of your React app. Here is a complete example of a form with two text fields and a submit button:

import ReactDOM from 'react-dom';
import React from 'react';
import {
  ThemeContextProvider,
  Form,
  Box,
  Stack,
  TextField,
  EmailField,
  ButtonLayout,
  ButtonPrimary,
  alert,
  getMovistarSkin,
} from '@telefonica/mistica';

const App = () => (
  <Form
    onSubmit={(formData) =>
      alert({
        title: 'This is your data',
        message: JSON.stringify(formData, null, 2),
      })
    }
  >
    <Box padding={16}>
      <Stack space={16}>
        <TextField name="name" label="Name" />
        <EmailField name="email" label="Email" />
        <ButtonLayout>
          <ButtonPrimary submit>Send</ButtonPrimary>
        </ButtonLayout>
      </Stack>
    </Box>
  </Form>
);

ReactDOM.render(
  <ThemeContextProvider
    theme={{skin: getMovistarSkin(), i18n: {locale: 'es-ES', phoneNumberFormattingRegionCode: 'ES'}}}
  >
    <App />
  </ThemeContextProvider>,
  document.getElementById('app')
);

The theme prop in ThemeContextProvider is mandatory, and you can use it to configure some aspects of the library. There are multiple settings but the only two mandatory fields are skin and i18n. Read the theme config doc for more info.

Components

Explore the components in Mistica storybook

Start prototyping interfaces with Mistica components in the Mistica playroom

More docs

• Understanding Mistica's layout components
• Working with forms
• Theme config options
• Customize media query break points
• Customize default texts
• Analytics
• Style your components
• Fonts
• Testing notes

Development

• yarn test: run tests
• yarn test-acceptance: run acceptance tests headless (you need to start storybook first)
• yarn test-acceptance --ui: run acceptance tests with ui (you need to start storybook first)
• yarn lint: check codestyle
• yarn ts-check: check static types
• yarn build: build package
• yarn storybook: starts storybook
• yarn playroom: starts playroom

More about Mistica

• Mistica, the Telefonica Design System

Mistica in other platforms

• Android
• iOS

Contributing

See CONTRIBUTING.md