React components library for Telefonica Design System (Mistica)
yarn add @telefonica/mistica
or
npm install @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>
);
const misticaTheme = {
skin: getMovistarSkin(),
i18n: {locale: 'es-ES', phoneNumberFormattingRegionCode: 'ES'},
};
ReactDOM.render(
<ThemeContextProvider theme={misticaTheme}>
<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.
theme
object is constant and won't need to change dynamically in your application, in
that case we recommend to extract it to an external const
variable outside of the component, this way the
object reference will be the same in every re-render. If for some reason the theme
must be dynamic in your
app, consider to memoize it (for example, with React.useMemo
hook).
Explore the components in Mistica storybook
Start prototyping interfaces with Mistica components in the Mistica playroom
- 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
yarn test
: run testsyarn 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 codestyleyarn ts-check
: check static typesyarn build
: build packageyarn storybook
: starts storybookyarn playroom
: starts playroom
See CONTRIBUTING.md