discussify-styleguide | Discussify 's living styleguide | Awesome List library

It's assumed that you will consume this package in an application bundled with Webpack. Follow the steps below:.
Activate CSS modules Activate CSS modules for this package directory (or for your whole project if you like): { test: /\.css$/, include: path.resolve(__dirname, 'node_modules/@discussify/styleguide'), loader: [ { loader: require.resolve('style-loader'), }, { loader: require.resolve('css-loader'), options: { modules: true, sourceMap: true, importLoaders: 1, localIdentName: '[name]__[local]___[hash:base64:5]!', }, }, ], }, If you are going to use any of the CSS variables or mixins, please add postcss-loader after css-loader: { loader: require.resolve('postcss-loader'), options: require('postcss-preset-moxy')({ url: 'rebase', }), }
Add SVG rule Support inline SVGs by using raw-loader for this package directory (or for your whole project if you like): { test: /\.svg$/, include: path.resolve(__dirname, 'node_modules/@discussify/styleguide'), use: [ require.resolve('raw-loader'), { loader: require.resolve('svgo-loader'), options: { plugins: [ { removeTitle: true }, { removeDimensions: true }, { cleanupIDs: false }, ], }, }, // Uniquify classnames and ids so they don't conflict with each other { loader: require.resolve('svg-css-modules-loader'), options: { transformId: true, }, }, ], }, Alternatively, you may setup external-svg-sprite-loader for performance reasons. Check out this project storybook webpack config for an example.
Import base styles Import the styleguide base styles in the app's entry CSS file: /* src/index.css */ @import "@discussify/styleguide/styles"; ..or in your entry JavaScript file: // src/index.js import "@discussify/styleguide/styles/index.css";
Wrap your app Wrap your app with KeyboardOnlyOutlines components to disable outlines when using a pointer device, such as a mouse: import { KeyboardOnlyOutlines } from '@discussify/styleguide'; <KeyboardOnlyOutlines> <MyApp /> </KeyboardOnlyOutlines>
Use the components import { TypingIndicator } from '@discussify/styleguide'; <TypingIndicator /> You may take a look at all the components by running the Storybook. If you are using the Modal component, please call Modal.setAppElement with your app element.
Run the following command in your main project to install postcss-import-webpack-resolver. NOTE: if using postcss-preset-moxy, it should be of version '^3.0.0' or older.