Nonlinear Performance Magnification

    @telefonica/mistica
    TypeScript icon, indicating that this package has built-in type declarations

    9.10.0 • Public • Published

    Mística for Web


    React components library for Telefonica Design System (Mistica)

    Node.js CI

    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

    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 watch: build package and watch for changes
    • yarn storybook: starts storybook
    • yarn playroom: starts playroom

    More about Mistica

    Mistica in other platforms

    Contributing

    See CONTRIBUTING.md

    Keywords

    none

    Install

    npm i @telefonica/mistica

    DownloadsWeekly Downloads

    403

    Version

    9.10.0

    License

    MIT

    Unpacked Size

    9.67 MB

    Total Files

    5059

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar
    • avatar