papo-components

    1.0.13 • Public • Published

    Wix Style React

    wix-style-react is a collection of React components that conform to Wix Style created by Wix UX guild.

    Demo | Source | Playground

    Installation

    • Install with npm or yarn:
    npm i wix-style-react
    # OR 
    yarn add wix-style-react

    Prerequisites

    wix-style-react uses Stylable, SASS and CSS Modules configuration by default. in order to use wix-style-react, your module bundler should be configured accordingly.

    Example of create-react-app configuration

    • Run

      $ npm run eject
      $ npm i -D node-sass stylable @stylable/webpack-plugin @stylable/core
    • Enhance webpack configuration

      // config/webpack.config.js
      {
        //...
        modules: {
          rules: [
            {
              exclude: /\.st.css$/, //This must appear before the "oneOf" property
              oneOf: [
                //...
                {
                  test: sassRegex,
                  include: [
                    path.join(__dirname, '../node_modules/wix-animations'),
                    path.join(__dirname, '../node_modules/wix-style-react'),
                    path.join(__dirname, '../node_modules/bootstrap-sass')
                  ],
                  exclude: sassModuleRegex,
                  use: getStyleLoaders(
                    {
                      modules: true,
                      importLoaders: 2,
                      sourceMap: isEnvProduction && shouldUseSourceMap,
                      camelCase: true,
                      localIdentName:'[name]__[local]___[hash:base64:5]',
                    },
                    'sass-loader'
                  ),
                  sideEffects: true,
                },
              ]
            },
          ],
          plugins: [
            //...
            new StylableWebpackPlugin({
               experimentalHMR: true,
               useEntryModuleInjection: true
             }),
          ]
        //...
        }
      }

    Typescript support

    Usage

    Requirements

    • Load Wix fonts from CDN
      <link rel="stylesheet" href="//static.parastorage.com/services/third-party/fonts/Helvetica/fontFace.css">

    Usage

    import React from 'react';
    import Button from 'wix-style-react/Button';
     
    const App = () => (
        <Button onClick={() => console.log('thanks for clicking :)')}>
          Click me!
        </Button>
    );

    Tips

    • Use Yoshi as build tool to avoid configuration. Otherwise follow webpack setup instructions here
    • Enable font smoothing with browser specific css properties, for example:
      html {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
      }
    • Use demo pages to find all available components with examples.

    Contributing

    Please refer to the Contributing page

    License

    This project is offered under MIT License.

    Keywords

    none

    Install

    npm i papo-components

    DownloadsWeekly Downloads

    36

    Version

    1.0.13

    License

    MIT

    Unpacked Size

    48.4 MB

    Total Files

    4730

    Last publish

    Collaborators

    • congcd4