@brightspot/ui v1.0.0-alpha.1

About

Brightspot UI is a package of custom web components and styles to provide a basis for building new CMS components. It uses TailwindCSS for styling and LitElement for web components.

If you're developing a Brightspot CMS plugin or creating custom CMS UI for your project, then you've come to the right place!

Getting Started

Note: To get the best developer experience we recommend using VSCode editor. The marketplace of extensions that are available provide code formatting and intellisense for all the TailwindCSS classnames and our plugins, etc. The VSCode setup is documented here.

Prerequisites

Your codebase needs to be compatible with

• TailwindCSS v3

Installation

1. Install the Brightspot ui node module as a devDependency

   yarn add -D @brightspot/ui

2. Create a tailwind.config file and add Brightspot ui as a preset. More on TWCSS presets here.

   // (Typescript example) contents of tailwind.config.ts
    export default {
      ...
      presets: [require('@brightspot/ui')],
      ...
    }

   // (Javascript example) contents of tailwind.config.js
    export default {
      ...
      presets: [require('@brightspot/ui/dist/tailwind.config.js')],
      ...
    }

3. Build your frontend

Using Plugins

Brightspot UI comes with a variety of TailwindCSS plugins to make styling simpler and declarative.

To use our plugins, include them in your TailwindCSS config as usual. Plugin files are provided in both Typescript and Javascript variants and are available under the dist path in the brightspot-ui module.

An example of including all the plugins:

// your tailwind.config.ts
  ...
  plugins: [
    require('@brightspot/ui/dist/tailwind-plugin-theme.ts'),
    require('@brightspot/ui/dist/tailwind-plugin-badge.ts'),
    require('@brightspot/ui/dist/tailwind-plugin-button.ts'),
    require('@brightspot/ui/dist/tailwind-plugin-heading.ts'),
    require('@brightspot/ui/dist/tailwind-plugin-icon.ts'),
    require('@brightspot/ui/dist/tailwind-plugin-loader.ts'),
    require('@brightspot/ui/dist/tailwind-plugin-scroll-shadow.ts')
    ...

Available plugins:

1. Badge

   require('@brightspot/ui/dist/tailwind-plugin-badge.ts')

2. Button

   require('@brightspot/ui/dist/tailwind-plugin-button.ts')

3. Heading

   require('@brightspot/ui/dist/tailwind-plugin-heading.ts')

4. Icon

   require('@brightspot/ui/dist/tailwind-plugin-icon.ts')

5. Loader

   require('@brightspot/ui/dist/tailwind-plugin-loader.ts')

6. ScrollShadow

   require('@brightspot/ui/dist/tailwind-plugin-scroll-shadow.ts')

7. Theme

    ```ts
   require('@brightspot/ui/dist/tailwind-plugin-theme.ts')
   ```

Examples

We use Storybook for interactive previewing of our ui components. Launch that in the browser by running:

  yarn storybook

Development

• To build, run yarn build from the package root to create the dist folder
• To use this package locally, run yarn pack to create a distribution package. Then install the node module in your project using yarn add {/PATH/TO/TARBALL}/brightspot-ui-v{VERSION}.tgz. Note: You could also use yarn link for this or local paths.
• To publish a release, run npm publish and follow the prompts. Make sure to update the version number in the package.json first!

Frequently Asked Questions

Q: How do I know that I set it up correctly?

A: TODO

Q: How can I see examples of the components and theme?

A: See the "Examples" section above.

Q: Can I choose which Brightspot UI plugins my project uses?

A: You have full control over which plugins you include in the tailwind.config file. See the "using plugins" section above.