Skip to content
devel
Go to file
Code

Latest commit

Derek Hammond
Update Slack notification settings. This was copied from https://docs.travis-ci.com/user/notifications/ and I believe this is necessary via travis.com and the old format was only working for travis.org.
ad5c9db

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

README.md

OUI Component Library

A custom CSS framework and React component library that powers the Optimizely user interface.

Build Status codecov npm version

🔗 Links

📦 Install

git clone https://github.com/optimizely/oui.git
yarn install
yarn storybook

ʦ TypeScript

Typescript types are generated for src/components from their JS files to aid consumption of this repo in Typescript. The optimizely-oui declaration file (types/templates/module-declaration.d.ts) exports all named component exports. To build the exported declaration file (types/index.d.ts), the autogenerated individual component module declarations are merged with the main declaration file (see yarn generate-types).

PropTypes

PropTypes can still be used for non-Typescript (.js) components as well as when more complex validation is needed. The (babel-plugin-typescript-to-proptypes)[https://www.npmjs.com/package/babel-plugin-typescript-to-proptypes] plugin is used to ensure that all components (typed or not) are exported with PropTypes.

💪 Contribute

Read how to contribute to OUI for instructions on making pull requests.

🚢 Release

Check out the Release a New Version section for instructions on releasing a new version of OUI

⚡️ React

To use an OUI component inside your React app:

import React from 'react';
import { Button } from 'optimizely-oui';
...
return ( <Button size="tiny">Click Me</Button> );

🧪 Testing

Thanks to Chromatic, OUI runs visual regression tests on every pull request and merge. These tests are snapshots of each Storybook story within the repository. For implementation details, see the Chromatic section of the contributing guidelines

💅 Sass

To use OUI Sass variables and mixins in your project read how to use OUI sass.