@brightspot/ui 0.0.0-alpha.1 → 0.0.0-alpha.3

package/dist/storybook/stories-Button-stories.3eeb8754.iframe.bundle.js

@@ -0,0 +1,9 @@
+"use strict";(self.webpackChunk_brightspot_ui=self.webpackChunk_brightspot_ui||[]).push([[791],{"./src/stories/Button.stories.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Primary:()=>Primary,__namedExportsOrder:()=>__namedExportsOrder,default:()=>Button_stories});var lit=__webpack_require__("./node_modules/lit/index.js");const Button_stories={title:"Components/Button",component:"btu-button",tags:["autodocs"],parameters:{docs:{subtitle:"btu-button"},controls:{expanded:!0}},render:args=>(({primary,pressed,fill,contained,outlined,size,label})=>{const mode=primary?"btu-button-primary":"btu-button-gray",depressed=pressed?"btu-button-pressed":"",filled=fill?"btu-button-fill":"btu-button-fill-none",container=contained?"":"btu-button-container-none",outline=outlined?"btu-button-outline":"";return lit.qy`
+    <button
+      type="button"
+      class=${["btu-button",`${size||"btu-button-sm"}`,filled,container,outline,mode,depressed].join(" ")}
+    >
+      ${label}
+    </button>
+  `})(args),argTypes:{size:{control:{type:"select"},options:["btu-button-sm","btu-button-md","btu-button-lg","btu-button-xl","btu-button-2xl"]}},args:{}},Primary={args:{primary:!0,pressed:!1,fill:!0,contained:!0,outlined:!1,label:"Button"}},__namedExportsOrder=["Primary"];Primary.parameters={...Primary.parameters,docs:{...Primary.parameters?.docs,source:{originalSource:"{\n  args: {\n    primary: true,\n    pressed: false,\n    fill: true,\n    contained: true,\n    outlined: false,\n    label: 'Button'\n  }\n}",...Primary.parameters?.docs?.source}}}}}]);
+//# sourceMappingURL=stories-Button-stories.3eeb8754.iframe.bundle.js.map

package/dist/storybook/stories-Button-stories.3eeb8754.iframe.bundle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stories-Button-stories.3eeb8754.iframe.bundle.js","mappings":";;;AAwCA;;AAUA;;AAEA","sources":["webpack://@brightspot/ui/./src/stories/Button.ts"],"sourcesContent":["import { html } from 'lit'\n\nexport interface ButtonProps {\n  primary?: boolean\n  /** Is the button depressed or not? */\n  pressed?: boolean\n  /** Should the button have a background? */\n  fill?: boolean\n  /** Should the button have a container? */\n  contained?: boolean\n  /** Should the button be outlined? */\n  outlined?: boolean\n  /** How large should the button be? */\n  size?:\n    | 'btu-button-sm'\n    | 'btu-button-md'\n    | 'btu-button-lg'\n    | 'btu-button-xl'\n    | 'btu-button-2xl'\n  label: string\n}\n\nexport const Button = ({\n  primary,\n  pressed,\n  fill,\n  contained,\n  outlined,\n  size,\n  label,\n}: ButtonProps) => {\n  const mode = primary ? 'btu-button-primary' : 'btu-button-gray'\n  const depressed = pressed ? 'btu-button-pressed' : ''\n  const filled = fill ? 'btu-button-fill' : 'btu-button-fill-none'\n  const container = contained ? '' : 'btu-button-container-none'\n  const outline = outlined ? 'btu-button-outline' : ''\n\n  return html`\n    <button\n      type=\"button\"\n      class=${[\n        'btu-button',\n        `${size || 'btu-button-sm'}`,\n        filled,\n        container,\n        outline,\n        mode,\n        depressed,\n      ].join(' ')}\n    >\n      ${label}\n    </button>\n  `\n}\n"],"names":[],"sourceRoot":""}

package/dist/storybook/stories-Colors-stories.324d20d0.iframe.bundle.js

@@ -0,0 +1,31 @@
+"use strict";(self.webpackChunk_brightspot_ui=self.webpackChunk_brightspot_ui||[]).push([[471],{"./src/stories/Colors.stories.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Error:()=>Error,Gray:()=>Gray,Primary:()=>Primary,Success:()=>Success,Warning:()=>Warning,__namedExportsOrder:()=>__namedExportsOrder,default:()=>Colors_stories});var lit=__webpack_require__("./node_modules/lit/index.js");const Colors_stories={title:"Design System/Colors",component:"btu-theme",tags:["autodocs"],parameters:{controls:{exclude:["palette"]},docs:{subtitle:"We've replaced the default Tailwind colors with our own palette to match the design vocabulary. Specifically replacing 'blue' with 'primary', 'green' with 'success', 'yellow' with 'warning', and 'red' with 'error'. For example, instead of 'bg-blue-400', use 'bg-primary-400'."}},render:args=>(args=>lit.qy`
+    <div class="my-10">
+      <div
+        class="not-prose grid grid-cols-[auto_minmax(0,_1fr)] items-center gap-4"
+      >
+        <div class="z-9 sticky top-28 bg-white lg:top-14 dark:bg-gray-950">
+          &nbsp;
+        </div>
+        <div
+          class="z-9 top-28 col-start-2 grid grid-cols-11 justify-items-center gap-1.5 bg-white font-medium text-gray-950 *:rotate-180 *:[writing-mode:vertical-lr] max-sm:py-1 sm:gap-4 sm:*:rotate-0 sm:*:[writing-mode:horizontal-tb] lg:top-14 dark:bg-gray-950 dark:text-white"
+        >
+          <div>25</div>
+          <div>50</div>
+          <div>100</div>
+          <div>200</div>
+          <div>300</div>
+          <div>400</div>
+          <div>500</div>
+          <div>600</div>
+          <div>700</div>
+          <div>800</div>
+          <div>900</div>
+        </div>
+        <div></div>
+        <div class="grid h-10 grid-cols-11 gap-1.5 sm:gap-4">
+          ${args.palette?.map((color=>lit.qy`<div class="${color} size-full"></div>`))}
+        </div>
+      </div>
+    </div>
+  `)(args)},Primary={parameters:{docs:{description:{story:"Used for primary call to actions, visual UI elements, active and clicked states, and focused containers."}}},args:{palette:["bg-primary-25","bg-primary-50","bg-primary-100","bg-primary-200","bg-primary-300","bg-primary-400","bg-primary-500","bg-primary-600","bg-primary-700","bg-primary-800","bg-primary-900"]}},Success={parameters:{docs:{description:{story:"Success colors communicate a positive action, postive trend, or a successful confirmation. If you're using green as your primary color, it can be helpful to introduce a different hue for your success green."}}},args:{palette:["bg-success-25","bg-success-50","bg-success-100","bg-success-200","bg-success-300","bg-success-400","bg-success-500","bg-success-600","bg-success-700","bg-success-800","bg-success-900"]}},Warning={parameters:{docs:{description:{story:'Warning colors can communicate that an action is potentially destructive or "on-hold". These colors are commonly used in confirmations to grab the users\' attention.'}}},args:{palette:["bg-warning-25","bg-warning-50","bg-warning-100","bg-warning-200","bg-warning-300","bg-warning-400","bg-warning-500","bg-warning-600","bg-warning-700","bg-warning-800","bg-warning-900"]}},Error={parameters:{docs:{description:{story:'Error colors are used across error states and in "destructive" actions. They communicate a destructive/negative action, such as deleting or archiving an object.'}}},args:{palette:["bg-error-25","bg-error-50","bg-error-100","bg-error-200","bg-error-300","bg-error-400","bg-error-500","bg-error-600","bg-error-700","bg-error-800","bg-error-900"]}},Gray={parameters:{docs:{description:{story:"Gray is a neutral color and is the foundation of the color system. Almost everything in UI design — text, form fields, backgrounds, dividers — are usually gray."}}},args:{palette:["bg-gray-25","bg-gray-50","bg-gray-100","bg-gray-200","bg-gray-300","bg-gray-400","bg-gray-500","bg-gray-600","bg-gray-700","bg-gray-800","bg-gray-900"]}},__namedExportsOrder=["Primary","Success","Warning","Error","Gray"];Primary.parameters={...Primary.parameters,docs:{...Primary.parameters?.docs,source:{originalSource:"{\n  parameters: {\n    docs: {\n      description: {\n        story: 'Used for primary call to actions, visual UI elements, active and clicked states, and focused containers.'\n      }\n    }\n  },\n  args: {\n    palette: ['bg-primary-25', 'bg-primary-50', 'bg-primary-100', 'bg-primary-200', 'bg-primary-300', 'bg-primary-400', 'bg-primary-500', 'bg-primary-600', 'bg-primary-700', 'bg-primary-800', 'bg-primary-900']\n  }\n}",...Primary.parameters?.docs?.source}}},Success.parameters={...Success.parameters,docs:{...Success.parameters?.docs,source:{originalSource:"{\n  parameters: {\n    docs: {\n      description: {\n        story: \"Success colors communicate a positive action, postive trend, or a successful confirmation. If you're using green as your primary color, it can be helpful to introduce a different hue for your success green.\"\n      }\n    }\n  },\n  args: {\n    palette: ['bg-success-25', 'bg-success-50', 'bg-success-100', 'bg-success-200', 'bg-success-300', 'bg-success-400', 'bg-success-500', 'bg-success-600', 'bg-success-700', 'bg-success-800', 'bg-success-900']\n  }\n}",...Success.parameters?.docs?.source}}},Warning.parameters={...Warning.parameters,docs:{...Warning.parameters?.docs,source:{originalSource:"{\n  parameters: {\n    docs: {\n      description: {\n        story: 'Warning colors can communicate that an action is potentially destructive or \"on-hold\". These colors are commonly used in confirmations to grab the users\\' attention.'\n      }\n    }\n  },\n  args: {\n    palette: ['bg-warning-25', 'bg-warning-50', 'bg-warning-100', 'bg-warning-200', 'bg-warning-300', 'bg-warning-400', 'bg-warning-500', 'bg-warning-600', 'bg-warning-700', 'bg-warning-800', 'bg-warning-900']\n  }\n}",...Warning.parameters?.docs?.source}}},Error.parameters={...Error.parameters,docs:{...Error.parameters?.docs,source:{originalSource:"{\n  parameters: {\n    docs: {\n      description: {\n        story: 'Error colors are used across error states and in \"destructive\" actions. They communicate a destructive/negative action, such as deleting or archiving an object.'\n      }\n    }\n  },\n  args: {\n    palette: ['bg-error-25', 'bg-error-50', 'bg-error-100', 'bg-error-200', 'bg-error-300', 'bg-error-400', 'bg-error-500', 'bg-error-600', 'bg-error-700', 'bg-error-800', 'bg-error-900']\n  }\n}",...Error.parameters?.docs?.source}}},Gray.parameters={...Gray.parameters,docs:{...Gray.parameters?.docs,source:{originalSource:"{\n  parameters: {\n    docs: {\n      description: {\n        story: 'Gray is a neutral color and is the foundation of the color system. Almost everything in UI design — text, form fields, backgrounds, dividers — are usually gray.'\n      }\n    }\n  },\n  args: {\n    palette: ['bg-gray-25', 'bg-gray-50', 'bg-gray-100', 'bg-gray-200', 'bg-gray-300', 'bg-gray-400', 'bg-gray-500', 'bg-gray-600', 'bg-gray-700', 'bg-gray-800', 'bg-gray-900']\n  }\n}",...Gray.parameters?.docs?.source}}}}}]);
+//# sourceMappingURL=stories-Colors-stories.324d20d0.iframe.bundle.js.map

package/dist/storybook/stories-Colors-stories.324d20d0.iframe.bundle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stories-Colors-stories.324d20d0.iframe.bundle.js","mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AA4BA;;;;ACdA","sources":["webpack://@brightspot/ui/./src/stories/Colors.ts","webpack://@brightspot/ui/./src/stories/Colors.stories.ts"],"sourcesContent":["import { html } from 'lit'\n\nexport const Colors = (args: ColorProps) => {\n  return html`\n    <div class=\"my-10\">\n      <div\n        class=\"not-prose grid grid-cols-[auto_minmax(0,_1fr)] items-center gap-4\"\n      >\n        <div class=\"z-9 sticky top-28 bg-white lg:top-14 dark:bg-gray-950\">\n          &nbsp;\n        </div>\n        <div\n          class=\"z-9 top-28 col-start-2 grid grid-cols-11 justify-items-center gap-1.5 bg-white font-medium text-gray-950 *:rotate-180 *:[writing-mode:vertical-lr] max-sm:py-1 sm:gap-4 sm:*:rotate-0 sm:*:[writing-mode:horizontal-tb] lg:top-14 dark:bg-gray-950 dark:text-white\"\n        >\n          <div>25</div>\n          <div>50</div>\n          <div>100</div>\n          <div>200</div>\n          <div>300</div>\n          <div>400</div>\n          <div>500</div>\n          <div>600</div>\n          <div>700</div>\n          <div>800</div>\n          <div>900</div>\n        </div>\n        <div></div>\n        <div class=\"grid h-10 grid-cols-11 gap-1.5 sm:gap-4\">\n          ${args.palette?.map(\n            (color) => html`<div class=\"${color} size-full\"></div>`,\n          )}\n        </div>\n      </div>\n    </div>\n  `\n}\n\nexport interface ColorProps {\n  palette?: Array<\n    | 'bg-primary-25'\n    | 'bg-primary-50'\n    | 'bg-primary-100'\n    | 'bg-primary-200'\n    | 'bg-primary-300'\n    | 'bg-primary-400'\n    | 'bg-primary-500'\n    | 'bg-primary-600'\n    | 'bg-primary-700'\n    | 'bg-primary-800'\n    | 'bg-primary-900'\n    | 'bg-success-25'\n    | 'bg-success-50'\n    | 'bg-success-100'\n    | 'bg-success-200'\n    | 'bg-success-300'\n    | 'bg-success-400'\n    | 'bg-success-500'\n    | 'bg-success-600'\n    | 'bg-success-700'\n    | 'bg-success-800'\n    | 'bg-success-900'\n    | 'bg-warning-25'\n    | 'bg-warning-50'\n    | 'bg-warning-100'\n    | 'bg-warning-200'\n    | 'bg-warning-300'\n    | 'bg-warning-400'\n    | 'bg-warning-500'\n    | 'bg-warning-600'\n    | 'bg-warning-700'\n    | 'bg-warning-800'\n    | 'bg-warning-900'\n    | 'bg-error-25'\n    | 'bg-error-50'\n    | 'bg-error-100'\n    | 'bg-error-200'\n    | 'bg-error-300'\n    | 'bg-error-400'\n    | 'bg-error-500'\n    | 'bg-error-600'\n    | 'bg-error-700'\n    | 'bg-error-800'\n    | 'bg-error-900'\n    | 'bg-gray-25'\n    | 'bg-gray-50'\n    | 'bg-gray-100'\n    | 'bg-gray-200'\n    | 'bg-gray-300'\n    | 'bg-gray-400'\n    | 'bg-gray-500'\n    | 'bg-gray-600'\n    | 'bg-gray-700'\n    | 'bg-gray-800'\n    | 'bg-gray-900'\n  >\n}\n","import type { Meta, StoryObj } from '@storybook/web-components'\nimport { Colors } from './Colors'\nimport type { ColorProps } from './Colors'\n\nconst meta: Meta<ColorProps> = {\n  title: 'Design System/Colors',\n  component: 'btu-theme',\n  tags: ['autodocs'],\n  parameters: {\n    controls: { exclude: ['palette'] },\n    docs: {\n      subtitle: `We've replaced the default Tailwind colors with our own palette to match the design vocabulary. Specifically replacing 'blue' with 'primary', 'green' with 'success', 'yellow' with 'warning', and 'red' with 'error'. For example, instead of 'bg-blue-400', use 'bg-primary-400'.`,\n    },\n  },\n  render: (args) => Colors(args),\n}\n\nexport default meta\n\ntype Story = StoryObj<ColorProps>\n\nexport const Primary: Story = {\n  parameters: {\n    docs: {\n      description: {\n        story:\n          'Used for primary call to actions, visual UI elements, active and clicked states, and focused containers.',\n      },\n    },\n  },\n  args: {\n    palette: [\n      'bg-primary-25',\n      'bg-primary-50',\n      'bg-primary-100',\n      'bg-primary-200',\n      'bg-primary-300',\n      'bg-primary-400',\n      'bg-primary-500',\n      'bg-primary-600',\n      'bg-primary-700',\n      'bg-primary-800',\n      'bg-primary-900',\n    ],\n  },\n}\nexport const Success: Story = {\n  parameters: {\n    docs: {\n      description: {\n        story:\n          \"Success colors communicate a positive action, postive trend, or a successful confirmation. If you're using green as your primary color, it can be helpful to introduce a different hue for your success green.\",\n      },\n    },\n  },\n  args: {\n    palette: [\n      'bg-success-25',\n      'bg-success-50',\n      'bg-success-100',\n      'bg-success-200',\n      'bg-success-300',\n      'bg-success-400',\n      'bg-success-500',\n      'bg-success-600',\n      'bg-success-700',\n      'bg-success-800',\n      'bg-success-900',\n    ],\n  },\n}\nexport const Warning: Story = {\n  parameters: {\n    docs: {\n      description: {\n        story:\n          'Warning colors can communicate that an action is potentially destructive or \"on-hold\". These colors are commonly used in confirmations to grab the users\\' attention.',\n      },\n    },\n  },\n  args: {\n    palette: [\n      'bg-warning-25',\n      'bg-warning-50',\n      'bg-warning-100',\n      'bg-warning-200',\n      'bg-warning-300',\n      'bg-warning-400',\n      'bg-warning-500',\n      'bg-warning-600',\n      'bg-warning-700',\n      'bg-warning-800',\n      'bg-warning-900',\n    ],\n  },\n}\nexport const Error: Story = {\n  parameters: {\n    docs: {\n      description: {\n        story:\n          'Error colors are used across error states and in \"destructive\" actions. They communicate a destructive/negative action, such as deleting or archiving an object.',\n      },\n    },\n  },\n  args: {\n    palette: [\n      'bg-error-25',\n      'bg-error-50',\n      'bg-error-100',\n      'bg-error-200',\n      'bg-error-300',\n      'bg-error-400',\n      'bg-error-500',\n      'bg-error-600',\n      'bg-error-700',\n      'bg-error-800',\n      'bg-error-900',\n    ],\n  },\n}\nexport const Gray: Story = {\n  parameters: {\n    docs: {\n      description: {\n        story:\n          'Gray is a neutral color and is the foundation of the color system. Almost everything in UI design — text, form fields, backgrounds, dividers — are usually gray.',\n      },\n    },\n  },\n  args: {\n    palette: [\n      'bg-gray-25',\n      'bg-gray-50',\n      'bg-gray-100',\n      'bg-gray-200',\n      'bg-gray-300',\n      'bg-gray-400',\n      'bg-gray-500',\n      'bg-gray-600',\n      'bg-gray-700',\n      'bg-gray-800',\n      'bg-gray-900',\n    ],\n  },\n}\n"],"names":[],"sourceRoot":""}

package/package.json

@@ -1,27 +1,50 @@
 {
   "name": "@brightspot/ui",
-  "version": "0.0.0-alpha.1",
+  "version": "0.0.0-alpha.3",
   "license": "UNLICENSED",
+  "description": "A UI library for building Brightspot CMS components.",
   "main": "./dist/tailwind.config.ts",
   "scripts": {
     "format": "prettier --write .",
     "clean": "shx rm -rf ./dist/*",
-    "build": "yarn clean && tsc --noEmitOnError && shx cp ./src/*.ts ./dist",
-    "prepack": "yarn build"
+    "build": "yarn clean && tsc --noEmitOnError && shx cp ./src/*.ts ./dist && shx rm ./dist/tailwind.storybook.config* && shx rm -Rf ./dist/stories",
+    "prepack": "yarn build && yarn build-storybook",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build -o ./dist/storybook"
   },
   "devDependencies": {
     "@eslint/js": "^9.23.0",
+    "@storybook/addon-essentials": "^8.6.12",
+    "@storybook/addon-styling-webpack": "^1.0.1",
+    "@storybook/addon-webpack5-compiler-swc": "^3.0.0",
+    "@storybook/blocks": "^8.6.12",
+    "@storybook/test": "^8.6.12",
+    "@storybook/web-components": "^8.6.12",
+    "@storybook/web-components-webpack5": "^8.6.12",
+    "@tailwindcss/container-queries": "^0.1.1",
     "@types/node": "^22.15.3",
+    "autoprefixer": "10.4.21",
+    "css-loader": "7.1.2",
     "eslint": "^9.23.0",
     "eslint-config-prettier": "^10.1.2",
     "eslint-plugin-prettier": "^5.4.0",
+    "eslint-plugin-storybook": "^0.12.0",
     "globals": "^16.0.0",
+    "lit": "^3.3.0",
+    "mini-css-extract-plugin": "2.9.2",
+    "postcss-import": "16.1.0",
+    "postcss-loader": "8",
     "prettier": "^3.5.3",
     "prettier-plugin-tailwindcss": "^0.6.11",
     "shx": "^0.4.0",
+    "storybook": "^8.6.12",
+    "style-loader": "4.0.0",
     "ts-node": "^10.9.2",
     "typescript": "^4.7.3",
-    "typescript-eslint": "^8.29.0"
+    "typescript-eslint": "^8.29.0",
+    "webpack": "^5.99.8",
+    "webpack-cli": "^6.0.1",
+    "webpack-merge": "6.0.1"
   },
   "dependencies": {
     "lucide-static": "0.508.0",