@brightspot/ui 0.0.0-alpha.1

package/README.md

@@ -0,0 +1,153 @@
+<a id="readme-top"></a>
+<div>
+<h2 align="center">brightspot-ui</h2>
+  <p align="center">
+    A UI library for building Brightspot CMS components.
+    <br/>
+  </p>
+</div>
+
+<!-- TOC -->
+<details>
+  <summary>Table of Contents</summary>
+  <ol>
+  <li>
+      <a href="#about">About</a>
+    </li>
+    <li>
+      <a href="#getting-started">Getting Started</a>
+    </li>
+    <li><a href="#prerequisites">Prerequisites</a></li>
+    <li><a href="#installation">Installation</a></li>
+    <li>
+      <a href="#using-plugins">Using Plugins</a>
+    </li>
+    <li>
+      <a href="#development">Development</a>
+    </li>
+    <li>
+      <a href="#frequently-asked-questions">FAQ</a>
+    </li>
+  </ol>
+  </br>
+</details>
+
+## About
+
+Brightspot UI is a package of custom web components and styles to provide a basis for building new CMS components. It uses [TailwindCSS](https://v3.tailwindcss.com/) for styling and [LitElement](https://lit.dev/) 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!
+
+<p align="right">(<a href="#readme-top">back to top</a>)</p>
+
+## 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](https://github.com/perfectsense/brightspot/tree/release/5.0/cms/tool-ui#visual-studio-code).
+
+### Prerequisites
+
+Your codebase needs to be compatible with
+* TailwindCSS **v3**
+
+### Installation
+
+1. Install the Brightspot ui node module as a devDependency
+   ```sh
+   yarn add -D @brightspot/ui
+   ```
+2. Create a `tailwind.config` file and add Brightspot ui as a preset. More on TWCSS presets [here](https://v3.tailwindcss.com/docs/presets#presets).
+   ```ts
+   // (Typescript example) contents of tailwind.config.ts
+    export default {
+      ...
+      presets: [require('@brightspot/ui')],
+      ...
+    }
+   ```
+   ```js
+   // (Javascript example) contents of tailwind.config.js
+    export default {
+      ...
+      presets: [require('@brightspot/ui/dist/tailwind.config.js')],
+      ...
+    }
+   ```
+3. Build your frontend
+
+<p align="right">(<a href="#readme-top">back to top</a>)</p>
+
+## 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:
+```ts
+// 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
+    ```ts
+    require('@brightspot/ui/dist/tailwind-plugin-badge.ts')
+    ```
+2. Button
+    ```ts
+    require('@brightspot/ui/dist/tailwind-plugin-button.ts')
+    ```
+4. Heading
+    ```ts
+    require('@brightspot/ui/dist/tailwind-plugin-heading.ts')
+    ```
+5. Icon
+     ```ts
+    require('@brightspot/ui/dist/tailwind-plugin-icon.ts')
+    ```
+6. Loader
+     ```ts
+    require('@brightspot/ui/dist/tailwind-plugin-loader.ts')
+    ```
+7. ScrollShadow
+    ```ts
+    require('@brightspot/ui/dist/tailwind-plugin-scroll-shadow.ts')
+    ```
+8. Theme
+     ```ts
+    require('@brightspot/ui/dist/tailwind-plugin-theme.ts')
+    ```
+<p align="right">(<a href="#readme-top">back to top</a>)</p>
+
+## 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](https://classic.yarnpkg.com/lang/en/docs/cli/add/).
+* To publish a release, run `npm publish` and follow the prompts. **Make sure to update the version number in the package.json first!**
+
+<p align="right">(<a href="#readme-top">back to top</a>)</p>
+
+## 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: TODO
+
+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"](#using-plugins) section above.
+
+<p align="right">(<a href="#readme-top">back to top</a>)</p>

package/dist/lucide-static.d.ts

@@ -0,0 +1 @@
+declare module 'lucide-static/dist/cjs/lucide-static'

package/dist/tailwind-plugin-badge.js

@@ -0,0 +1,68 @@
+import plugin from 'tailwindcss/plugin';
+const className = '.btu-badge';
+module.exports = plugin(function ({ addComponents, theme, e }) {
+    const sizes = theme('badgeSize');
+    const colors = theme('colors');
+    const fontSizes = theme('fontSize');
+    const iconSizes = theme('iconSize') || {};
+    if (colors) {
+        const badgeColors = [];
+        for (const key in colors) {
+            badgeColors.push({
+                [`${className}-${e(key)}`]: {
+                    '--Icon-size': iconSizes['xs'],
+                    backgroundColor: `oklch(var(--btu-theme-${key}-50))`,
+                    color: `oklch(var(--btu-theme-${key}-700))`,
+                },
+            });
+        }
+        addComponents(badgeColors);
+    }
+    if (sizes && fontSizes) {
+        const badgeSizes = [];
+        const fontSizeStyles = {
+            display: 'inline-block',
+            borderRadius: '1rem',
+        };
+        for (const key in sizes) {
+            const size = sizes[key];
+            const fontSize = fontSizes[size.fontSize];
+            if (fontSize) {
+                badgeSizes.push({
+                    [`${className}-${e(key)}`]: {
+                        gap: '0.38rem',
+                        ...fontSizeStyles,
+                        fontSize: fontSize[0],
+                        lineHeight: fontSize[1],
+                        padding: `${size.paddingTop} ${size.paddingRight}`,
+                        minWidth: size.minWidth,
+                    },
+                });
+            }
+        }
+        addComponents(badgeSizes);
+    }
+}, {
+    theme: {
+        badgeSize: {
+            sm: {
+                fontSize: 'xs',
+                paddingTop: '.13rem',
+                paddingRight: '.5rem',
+                minWidth: '1.375rem',
+            },
+            md: {
+                fontSize: 'sm',
+                paddingTop: '.13rem',
+                paddingRight: '.63rem',
+                minWidth: '1.813rem',
+            },
+            lg: {
+                fontSize: 'sm',
+                paddingTop: '.25rem',
+                paddingRight: '.75rem',
+                minWidth: '1.813rem',
+            },
+        },
+    },
+});

package/dist/tailwind-plugin-badge.ts

@@ -0,0 +1,103 @@
+import plugin from 'tailwindcss/plugin'
+import { CSSRuleObject } from 'tailwindcss/types/config'
+declare let module: any
+
+/**
+ * Badges help highlight important information, such as notifications or new and
+ * unread messages. They’re primarily used for communicating secondary or additional
+ * information to text.
+ *
+ * Class Names:
+ *
+ *  btu-badge-[sm|md|lg] - Size of the Badge.
+ *  btu-badge-[$theme-colors] - Color of the Badge.
+ *
+ * Example Usages:
+ *
+ *  Base   ->  btu-badge-lg btu-badge-purple
+ *  Dot    ->  btu-badge-lg btu-badge-primary before:size-2 before:rounded-lg before:bg-[currentColor] before:[content:'']
+ *  Close  ->  btu-badge-lg btu-badge-error after:btu-icon after:btu-icon-x
+ */
+
+type Size = {
+  fontSize: 'xs' | 'sm'
+  paddingTop: string
+  paddingRight: string
+  minWidth: string
+}
+
+const className = '.btu-badge'
+
+module.exports = plugin(
+  function ({ addComponents, theme, e }) {
+    const sizes = theme('badgeSize')
+    const colors: [CSSRuleObject] = theme('colors')
+    const fontSizes: Record<string, CSSRuleObject> = theme('fontSize')
+    const iconSizes: CSSRuleObject = theme('iconSize') || {}
+
+    if (colors) {
+      const badgeColors: CSSRuleObject[] = []
+      for (const key in colors) {
+        badgeColors.push({
+          [`${className}-${e(key)}`]: {
+            '--Icon-size': iconSizes['xs'],
+            backgroundColor: `oklch(var(--btu-theme-${key}-50))`,
+            color: `oklch(var(--btu-theme-${key}-700))`,
+          },
+        })
+      }
+      addComponents(badgeColors)
+    }
+
+    if (sizes && fontSizes) {
+      const badgeSizes: CSSRuleObject[] = []
+      const fontSizeStyles = {
+        display: 'inline-block',
+        borderRadius: '1rem',
+      }
+
+      for (const key in sizes) {
+        const size: Size = sizes[key]
+        const fontSize = fontSizes[size.fontSize]
+
+        if (fontSize) {
+          badgeSizes.push({
+            [`${className}-${e(key)}`]: {
+              gap: '0.38rem',
+              ...fontSizeStyles,
+              fontSize: fontSize[0],
+              lineHeight: fontSize[1],
+              padding: `${size.paddingTop} ${size.paddingRight}`,
+              minWidth: size.minWidth,
+            },
+          })
+        }
+      }
+      addComponents(badgeSizes)
+    }
+  },
+  {
+    theme: {
+      badgeSize: {
+        sm: {
+          fontSize: 'xs',
+          paddingTop: '.13rem',
+          paddingRight: '.5rem',
+          minWidth: '1.375rem',
+        },
+        md: {
+          fontSize: 'sm',
+          paddingTop: '.13rem',
+          paddingRight: '.63rem',
+          minWidth: '1.813rem',
+        },
+        lg: {
+          fontSize: 'sm',
+          paddingTop: '.25rem',
+          paddingRight: '.75rem',
+          minWidth: '1.813rem',
+        },
+      },
+    },
+  },
+)

package/dist/tailwind-plugin-button.js

@@ -0,0 +1,223 @@
+import plugin from 'tailwindcss/plugin';
+/**
+ * Buttons communicate actions that users can take such as submit a form, begin a new task,
+ * trigger a new UI element to appear or take a new or next step in some process.
+ *
+ * Class Names:
+ *
+ *  btu-button - Establishes a default button container
+ *  btu-button-[fill-none | container-none | outline | text-hidden] - Different types of buttons like solid,
+ *                                                                    outline, icon buttons etc
+ *  btu-button-[sm|md|lg|xl|2xl] - Size of buttons
+ *  btu-button-[$theme-colors] - Color of buttons
+ *     - required if using btu-button-outline to see outline
+ *  btu-button-[pressed | disabled] - States of buttons (active or disabled)
+ *
+ * Example Usages:
+ *
+ *  Publish button in content edit page   ->      btu-button btu-button-primary btu-button-sm
+ *
+ *  Search toolbar icon button            ->      btu-button btu-button-text-hidden btu-button-fill-none
+ *                                                btu-button-gray before:btu-icon before:btu-icon-search
+ */
+module.exports = plugin(function ({ addComponents, addUtilities, theme }) {
+    const textSizes = theme('fontSize');
+    const colors = theme('colors') || {};
+    const iconSizes = theme('iconSize') || {};
+    const prefix = '.btu-button';
+    const disabledStyle = {
+        '--button-bg-gradient': 'none',
+        '--button-disabled-color': `var(--button-disabled-color-fill-none, var(--button-disabled-color-fill, oklch(var(--btu-theme-gray-100))))`,
+        '--button-disabled-text-color': `var(--button-disabled-text-color-fill-none, var(--button-text-color, oklch(var(--btu-theme-gray-400))))`,
+        pointerEvents: 'none',
+        userSelect: 'none',
+    };
+    const activeStyle = {
+        '--button-pressed': ' ',
+    };
+    const components = {
+        '.btu-button': {
+            // default button
+            '--button-bg-gradient': 'none',
+            '--button-color': '',
+            '--button-text-color': '',
+            '--button-pressed': 'initial',
+            '--button-fill-none': 'initial',
+            '--button-padding-xs': '0.25rem 0.5rem',
+            '--button-padding-sm': '0.5rem 0.875rem',
+            '--button-padding-md': '0.625rem 1rem',
+            '--button-padding-lg': '0.625rem 1.125rem',
+            '--button-padding-xl': '0.75rem 1.25rem',
+            '--button-padding-2xl': '1rem 1.75rem',
+            '--button-font-size': textSizes['sm'][0],
+            '--button-line-height': textSizes['sm'][1],
+            display: 'inline-flex',
+            cursor: 'pointer',
+            alignItems: 'center',
+            justifyContent: 'center',
+            gap: '0.5rem',
+            background: 'var(--button-bg-gradient), var(--button-pressed-color, var(--button-disabled-color, var(--button-color)))',
+            borderRadius: 'var(--button-border-radius, 0.5rem)',
+            color: 'var(--button-pressed-text-color, var(--button-disabled-text-color, var(--button-text-color)))',
+            padding: 'var(--button-padding-sm)',
+            fontSize: 'var(--button-font-size)',
+            lineHeight: 'var(--button-line-height)',
+            fontWeight: theme('fontWeight.semibold'),
+            position: 'relative',
+            height: 'var(--button-size-sm, auto)',
+            width: 'var(--button-size-sm, auto)',
+            '&[aria-pressed="true"]': activeStyle,
+            '&:disabled': disabledStyle,
+            '&[disabled]': disabledStyle,
+            textDecoration: 'none',
+            '&:focus': {
+                color: 'var(--button-pressed-text-color, var(--button-disabled-text-color, var(--button-text-color)))',
+            },
+            '&:hover': {
+                color: 'var(--button-pressed-text-color, var(--button-disabled-text-color, var(--button-text-color)))',
+            },
+        },
+        '.btu-button-text-hidden': {
+            '--button-padding-xs': '0.25rem',
+            '--button-padding-sm': '0.5rem',
+            '--button-padding-md': '0.625rem',
+            '--button-padding-lg': '0.75rem',
+            '--button-padding-xl': '0.875rem',
+            '--button-padding-2xl': '1rem',
+            '--button-icon-font-size': '0px',
+            '--button-icon-line-height': '1',
+            '--button-font-size': 'var(--button-icon-font-size)',
+            '--button-line-height': 'var(--button-icon-line-height)',
+            '--button-size-xs': '1.75rem',
+            '--button-size-sm': '2.25rem',
+            '--button-size-md': '2.5rem',
+            '--button-size-lg': '2.75rem',
+            '--button-size-xl': '3rem',
+            '--button-size-2xl': '3.5rem',
+            overflow: 'hidden',
+            gap: '0',
+        },
+        '.btu-button-outline': {
+            '--button-outline-offset-width': '1px',
+            '--button-outline-offset-color': 'var(--button-outline-color)',
+            outline: '1px solid var(--button-outline-color)',
+            '&:focus-visible': {
+                outline: 'none',
+            },
+        },
+        '.btu-button-fill-none': {
+            '--button-fill-none': ' ',
+            backgroundColor: 'var(--button-pressed-color, var(--button-fill-none-color))',
+            color: 'var(--button-pressed-text-color, var(--button-disabled-text-color, var(--button-fill-none-text-color)))',
+            '&:focus': {
+                color: 'var(--button-pressed-text-color, var(--button-disabled-text-color, var(--button-fill-none-text-color)))',
+            },
+            '&:hover': {
+                color: 'var(--button-pressed-text-color, var(--button-disabled-text-color, var(--button-fill-none-text-color)))',
+            },
+        },
+        '.btu-button-disabled': disabledStyle,
+        '.btu-button-pressed': activeStyle,
+    };
+    // background & text colors for buttons in different states
+    for (const key in colors) {
+        if (key === 'currentColor' ||
+            key === 'transparent' ||
+            key === 'white' ||
+            key === 'black')
+            continue;
+        const focusStyle = {
+            '--button-color': `oklch(var(--btu-theme-${key}-${key === 'gray' ? '100' : key === 'success' ? '700' : '600'}))`,
+            '--button-fill-none-color': `transparent`,
+            '--button-fill-none-text-color': `oklch(var(--btu-theme-${key}-${key === 'gray' ? '700' : '600'}))`,
+            '--tw-ring-opacity': '1',
+            '--tw-ring-color': `oklch(var(--btu-theme-${key === 'gray' ? 'primary' : key}-100))`,
+            '--tw-ring-offset-width': '1px',
+            '--tw-ring-offset-color': `${key === 'gray' ? 'oklch(var(--btu-theme-primary-800))' : 'var(--button-outline-offset-color, var(--button-color))'}`,
+        };
+        components[prefix + '-' + key] = {
+            '--button-bg-gradient': `var(--button-fill-none, ${key === 'primary' ? theme('colors.primary.gradient') : 'none'})`,
+            '--button-color': `oklch(var(--btu-theme-${key}-${key === 'gray' ? '100' : key === 'success' ? '700' : '600'}))`,
+            '--button-text-color': `${key === 'gray' ? 'oklch(var(--btu-theme-gray-700))' : 'var(--btu-theme-white)'}`,
+            '--button-fill-none-color': 'transparent',
+            '--button-fill-none-text-color': `oklch(var(--btu-theme-${key}-${key === 'gray' ? '700' : '600'}))`,
+            '--button-outline-color': `oklch(var(--btu-theme-${key}-300))`,
+            '--button-disabled-color-fill': `oklch(var(--btu-theme-${key}-${key === 'gray' ? '100' : key === 'primary' ? '300' : '200'}))`,
+            '--button-disabled-color-fill-none': `var(--button-fill-none) oklch(var(--btu-theme-white))`,
+            '--button-disabled-text-color-fill-none': `var(--button-fill-none) oklch(var(--btu-theme-${key}-${key === 'gray' ? '400' : '300'}))`,
+            '--button-pressed-color': `var(--button-pressed) var(--button-disabled-color, oklch(var(--btu-theme-${key === 'gray' ? 'primary' : key}-50)))`,
+            '--button-pressed-text-color': `var(--button-pressed) var(--button-disabled-text-color, oklch(var(--btu-theme-${key === 'gray' ? 'primary' : key}-800)))`,
+            '&:hover': {
+                '--button-color': `oklch(var(--btu-theme-${key}-${key === 'gray' ? '200' : key === 'success' ? '800' : '700'}))`,
+                '--button-fill-none-color': `oklch(var(--btu-theme-${key}-${key === 'gray' ? '200' : '50'}))`,
+                '--button-fill-none-text-color': `oklch(var(--btu-theme-${key}-${key === 'gray' ? '900' : '800'}))`,
+            },
+            '&:focus': focusStyle,
+            '&.is-focused': focusStyle,
+        };
+    }
+    const buttonSizes = {
+        xs: {
+            fontSize: `var(--button-icon-font-size, ${textSizes['sm'][0]})`,
+            lineHeight: `var(--button-icon-line-height, ${textSizes['sm'][1]})`,
+            padding: 'var(--button-padding-xs)',
+            width: 'var(--button-size-xs, auto)',
+            height: 'var(--button-size-xs, auto)',
+        },
+        sm: {
+            fontSize: `var(--button-icon-font-size, ${textSizes['sm'][0]})`,
+            lineHeight: `var(--button-icon-line-height, ${textSizes['sm'][1]})`,
+            padding: 'var(--button-padding-sm)',
+            width: 'var(--button-size-sm, auto)',
+            height: 'var(--button-size-sm, auto)',
+        },
+        md: {
+            fontSize: `var(--button-icon-font-size, ${textSizes['sm'][0]})`,
+            lineHeight: `var(--button-icon-line-height, ${textSizes['sm'][1]})`,
+            padding: 'var(--button-padding-md)',
+            width: 'var(--button-size-md, auto)',
+            height: 'var(--button-size-md, auto)',
+        },
+        lg: {
+            fontSize: `var(--button-icon-font-size, ${textSizes['md'][0]})`,
+            lineHeight: `var(--button-icon-line-height, ${textSizes['md'][1]})`,
+            padding: 'var(--button-padding-lg)',
+            width: 'var(--button-size-lg, auto)',
+            height: 'var(--button-size-lg, auto)',
+        },
+        xl: {
+            fontSize: `var(--button-icon-font-size, ${textSizes['md'][0]})`,
+            lineHeight: `var(--button-icon-line-height, ${textSizes['md'][1]})`,
+            padding: 'var(--button-padding-xl)',
+            width: 'var(--button-size-xl, auto)',
+            height: 'var(--button-size-xl, auto)',
+        },
+        '2xl': {
+            '--Icon-size': iconSizes['lg'],
+            fontSize: `var(--button-icon-font-size, ${textSizes['lg'][0]})`,
+            lineHeight: `var(--button-icon-line-height, ${textSizes['lg'][1]})`,
+            padding: 'var(--button-padding-2xl)',
+            width: 'var(--button-size-2xl, auto)',
+            height: 'var(--button-size-2xl, auto)',
+        },
+    };
+    for (const key in buttonSizes) {
+        components[prefix + '-' + key] = buttonSizes[key];
+    }
+    addComponents(components);
+    /*
+      The style properties for buttons without a container should always
+      override the default button styles (eg: size, fill).
+      Since the classnames could be in any order in the markup or "@apply" directives,
+      we're utilizing the utility (layer) approach of tailwindcss to achieve this prioritization.
+    */
+    const noContainerButton = {
+        '.btu-button-container-none': {
+            padding: '0',
+            display: 'inline-flex',
+            backgroundColor: 'transparent',
+            color: 'var(--button-pressed-text-color, var(--button-disabled-text-color, var(--button-fill-none-text-color)))',
+        },
+    };
+    addUtilities(noContainerButton);
+});