@ac-ui/react-components

A React Component library

Usage no npm install needed!

<script type="module">
  import acUiReactComponents from 'https://cdn.skypack.dev/@ac-ui/react-components';
</script>

README

@ac-ui/react-components

A React Component library

Installation

  • Install as a npm dependency npm i @ac-ui/react-components
  • Import component
    • import { Subheader } from '~@ac-ui/react-components';

const Example = () => <Subheader title={"Subheader example"}/>

Contribution

Everyone is encouraged and welcome to contribute to @ac-ui/react-components! This library is built (being built) for Avenue Coders to use, and to develop. To maintain usability, keep code consistent, and to ensure a quality product, linting and pre-commit hooks have been added in to the repository.

How do I make a component?

  • Run $ npm run component:stub
  • Rename component to desired name, and update all references
  • Make component exportable by adding it to src/index.js
  • Preview components in styleguidist using npm run styleguide

What does a component need to have

  • A component only needs to have:
    • index.js (with the following content export{ default as ComponentName } from './ComponentName' )
    • ComponentName.jsx
  • As nice to haves
    • ComponentName.md to enhance component in Styleguidist
    • ComponentName.spec.js because unit testing is always smart
    • ComponentName.scss to style things

How do I style a component?

  • Completely custom element?
    • Import the variables, mixins, and helpers all in one go
      • (@import "~@ac-ui/design-system/src/base";)
  • Is it built around a TWBS Component
    • Import the 'bridge', which imports variables, helpers, and utility classes for the component
      • (@import "~@ac-ui/design-system/src/bridge/buttons";)
  • Always style using variables, and TWBS where possible!
    • A variable doesn't exist?
      • Is there one close to it? Use that.
      • Is it going to be used only in this component? Initiate variable there
      • Is it only going to be used in many files? Add it to @ac-ui/design-system