@tcn/sb-blackcat-addon 0.0.1

package/README.md

@@ -0,0 +1,97 @@
+# Storybook Blackcat Addon
+
+A Storybook addon that provides accessibility scaling and layout direction controls for your components. It adds these toolbar controls:
+
+1. A scalar control to adjust component sizes based on user preferences
+2. A direction control to switch between LTR and RTL layouts
+
+## Requirements
+
+- Storybook v8+
+- React
+
+## Installation
+
+```bash
+yarn add -D @tcn/sb-blackcat-addon
+```
+
+## Configuration
+
+Add the addon to your Storybook configuration:
+
+```typescript
+// .storybook/main.ts
+import type { StorybookConfig } from '@storybook/react-vite';
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-onboarding',
+    '@storybook/addon-interactions',
+    '@tcn/sb-blackcat-addon',
+  ],
+  framework: {
+    name: '@storybook/react-vite',
+    options: {},
+  },
+  docs: {
+    autodocs: 'tag',
+  },
+};
+
+export default config;
+```
+
+> Note: The addon ID `BLACKCAT_ADDON_ID` is exported from the package for future parameter configuration.
+
+## Usage
+
+### CSS Variables
+
+The addon sets CSS variables that you can use in your components:
+
+```css
+/* Font size scaling */
+.my-component {
+  font-size: calc(16px * var(--accessibility-scalar));
+}
+
+/* Component sizing */
+.my-component {
+  min-height: calc(100px * var(--accessibility-scalar));
+  padding: calc(16px * var(--accessibility-scalar));
+}
+
+/* When using data attributes,
+ * the scalar should typically still be applied per variant
+ * for responsive scaling */
+
+[data-hierarchy="md"] {
+  min-height: calc(200px * var(--accessibility-scalar));
+  font-size: calc(14px * var(--accessibility-scalar));
+}
+```
+
+### Available Values
+
+#### Accessibility Scalar
+
+The scalar can be set to any numeric value. The following values are pre-configured for testing:
+
+| Value  | Size        |
+|--------|-------------|
+| 0.75   | Extra Small |
+| 0.875  | Small       |
+| 1      | Medium      |
+| 1.125  | Large       |
+| 1.25   | Extra Large |
+
+#### Direction
+
+| Value | Description        |
+|-------|-------------------|
+| ltr   | Left to Right     |
+| rtl   | Right to Left     |

package/dist/index.cjs

@@ -0,0 +1,2 @@
+'use strict';var o="sb-blackcat-addon";exports.BLACKCAT_ADDON_ID=o;//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/constants.ts"],"names":["ADDON_ID"],"mappings":"aAAO,IAAMA,CAAW,CAAA,mBAAA","file":"index.cjs","sourcesContent":["export const ADDON_ID = 'sb-blackcat-addon' as const;\nexport const TOOL_ID = `${ADDON_ID}/tool` as const;\n"]}

package/dist/index.d.cts

@@ -0,0 +1,3 @@
+declare const ADDON_ID: "sb-blackcat-addon";
+
+export { ADDON_ID as BLACKCAT_ADDON_ID };

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+declare const ADDON_ID: "sb-blackcat-addon";
+
+export { ADDON_ID as BLACKCAT_ADDON_ID };

package/dist/index.js

@@ -0,0 +1,2 @@
+var o="sb-blackcat-addon";export{o as BLACKCAT_ADDON_ID};//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/constants.ts"],"names":["ADDON_ID"],"mappings":"AAAO,IAAMA,CAAW,CAAA,mBAAA","file":"index.js","sourcesContent":["export const ADDON_ID = 'sb-blackcat-addon' as const;\nexport const TOOL_ID = `${ADDON_ID}/tool` as const;\n"]}

package/dist/preview.cjs

@@ -0,0 +1,2 @@
+'use strict';var s=require('react');function _interopDefault(e){return e&&e.__esModule?e:{default:e}}var s__default=/*#__PURE__*/_interopDefault(s);var t="sb-blackcat-addon";var l=(i,e)=>{let o=e.globals.direction??"ltr",r=e.globals.scalar??1;return s.useEffect(()=>{document.body.dir=o;},[o]),s.useEffect(()=>{document.body.style.setProperty("--accessibility-scalar",r.toString());},[r]),s__default.default.createElement(i,null)};var c={parameters:{[t]:{}},globalTypes:{direction:{name:"Direction",description:"Layout direction of components based off user settings.",defaultValue:"ltr",toolbar:{icon:"transfer",items:[{value:"ltr",title:"Left to Right"},{value:"rtl",title:"Right to Left"}],showName:true}},scalar:{name:"Accessibility Scalar",description:"Scale text and component sizes based off user settings.",defaultValue:1,toolbar:{icon:"collapse",items:[{value:.75,title:"Extra Small"},{value:.875,title:"Small"},{value:1,title:"Medium"},{value:1.125,title:"Large"},{value:1.25,title:"Extra Large"}]}}},decorators:[l]},b=c;module.exports=b;//# sourceMappingURL=preview.cjs.map
+//# sourceMappingURL=preview.cjs.map

package/dist/preview.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/constants.ts","../src/decorator.tsx","../src/preview.tsx"],"names":["ADDON_ID","TOOL_ID","BlackcatDecorator","Story","context","direction","scalar","useEffect","React","preview","preview_default"],"mappings":"oJAAO,IAAMA,EAAW,mBACXC,CCEN,IAAMC,CAAAA,CAA+B,CAACC,CAAAA,CAAOC,IAAY,CAC9D,IAAMC,CAAYD,CAAAA,CAAAA,CAAQ,QAAQ,SAAa,EAAA,KAAA,CACzCE,CAASF,CAAAA,CAAAA,CAAQ,QAAQ,MAAU,EAAA,CAAA,CAGzC,OAAAG,WAAAA,CAAU,IAAM,CACd,QAAA,CAAS,KAAK,GAAMF,CAAAA,EACtB,EAAG,CAACA,CAAS,CAAC,CAAA,CAEdE,YAAU,IAAM,CACd,QAAS,CAAA,IAAA,CAAK,MAAM,WAAY,CAAA,wBAAA,CAA0BD,CAAO,CAAA,QAAA,EAAU,EAC7E,CAAA,CAAG,CAACA,CAAM,CAAC,CAEJE,CAAAA,kBAAAA,CAAA,aAACL,CAAAA,CAAAA,CAAA,IAAM,CAChB,CAAA,CCFMM,IAAAA,CAAAA,CAAmB,CACvB,UAAY,CAAA,CACV,CAACT,CAAQ,EAAG,EAId,EAOA,WAAa,CAAA,CACX,UAAW,CACT,IAAA,CAAM,WACN,CAAA,WAAA,CAAa,0DACb,YAAc,CAAA,KAAA,CACd,OAAS,CAAA,CACP,KAAM,UACN,CAAA,KAAA,CAAO,CACL,CAAE,MAAO,KAAO,CAAA,KAAA,CAAO,eAAgB,CAAA,CACvC,CAAE,KAAO,CAAA,KAAA,CAAO,KAAO,CAAA,eAAgB,CACzC,CACA,CAAA,QAAA,CAAU,IACZ,CACF,EACA,MAAQ,CAAA,CACN,IAAM,CAAA,sBAAA,CACN,YAAa,yDACb,CAAA,YAAA,CAAc,EACd,OAAS,CAAA,CACP,KAAM,UACN,CAAA,KAAA,CAAO,CACL,CAAE,MAAO,GAAM,CAAA,KAAA,CAAO,aAAc,CAAA,CACpC,CAAE,KAAO,CAAA,IAAA,CAAO,KAAO,CAAA,OAAQ,EAC/B,CAAE,KAAA,CAAO,EAAG,KAAO,CAAA,QAAS,EAC5B,CAAE,KAAA,CAAO,KAAO,CAAA,KAAA,CAAO,OAAQ,CAC/B,CAAA,CAAE,KAAO,CAAA,IAAA,CAAM,MAAO,aAAc,CACtC,CACF,CACF,CACF,CAKA,CAAA,UAAA,CAAY,CAACE,CAAiB,CAChC,EAEOQ,CAAQD,CAAAA","file":"preview.cjs","sourcesContent":["export const ADDON_ID = 'sb-blackcat-addon' as const;\nexport const TOOL_ID = `${ADDON_ID}/tool` as const;\n","import type { Decorator } from '@storybook/react';\nimport React, { useEffect } from 'react';\n\nexport const BlackcatDecorator: Decorator = (Story, context) => {\n  const direction = context.globals.direction ?? 'ltr';\n  const scalar = context.globals.scalar ?? 1;\n  // const params = useParameter<BlackcatParameters>(ADDON_ID, defaultParameters)!;\n\n  useEffect(() => {\n    document.body.dir = direction;\n  }, [direction]);\n\n  useEffect(() => {\n    document.body.style.setProperty('--accessibility-scalar', scalar.toString());\n  }, [scalar]);\n\n  return <Story />;\n};\n","import type { Preview } from '@storybook/react';\nimport { ADDON_ID } from './constants.js';\nimport { BlackcatDecorator } from './decorator.js';\n\n/**\n * A decorator is a way to wrap a story in extra \"rendering\" functionality. Many addons define decorators\n * in order to augment stories:\n * - with extra rendering\n * - gather details about how a story is rendered\n *\n * When writing stories, decorators are typically used to wrap stories with extra markup or context mocking.\n *\n * https://storybook.js.org/docs/react/writing-stories/decorators\n */\n\nconst preview: Preview = {\n  parameters: {\n    [ADDON_ID]: {\n      // enableScalar: true,\n      // enableDirection: true,\n    },\n  },\n\n  /**\n   * This is the global type for storybook that will add a toolbar to change the locale.\n   * You must import this in preview.tsx and add it to the globalTypes object.\n   * For more information, see: https://storybook.js.org/docs/essentials/toolbars-and-globals\n   */\n  globalTypes: {\n    direction: {\n      name: 'Direction',\n      description: 'Layout direction of components based off user settings.',\n      defaultValue: 'ltr',\n      toolbar: {\n        icon: 'transfer',\n        items: [\n          { value: 'ltr', title: 'Left to Right' },\n          { value: 'rtl', title: 'Right to Left' },\n        ],\n        showName: true,\n      },\n    },\n    scalar: {\n      name: 'Accessibility Scalar',\n      description: 'Scale text and component sizes based off user settings.',\n      defaultValue: 1,\n      toolbar: {\n        icon: 'collapse',\n        items: [\n          { value: 0.75, title: 'Extra Small' },\n          { value: 0.875, title: 'Small' },\n          { value: 1, title: 'Medium' },\n          { value: 1.125, title: 'Large' },\n          { value: 1.25, title: 'Extra Large' },\n        ],\n      },\n    },\n  },\n\n  /**\n   * Adds the Blackcat Decorator to all stories.\n   */\n  decorators: [BlackcatDecorator],\n};\n\nexport default preview;\n"]}

package/dist/preview.d.cts

@@ -0,0 +1,15 @@
+import { P } from './public-types-8dd0ccdf.js';
+
+/**
+ * A decorator is a way to wrap a story in extra "rendering" functionality. Many addons define decorators
+ * in order to augment stories:
+ * - with extra rendering
+ * - gather details about how a story is rendered
+ *
+ * When writing stories, decorators are typically used to wrap stories with extra markup or context mocking.
+ *
+ * https://storybook.js.org/docs/react/writing-stories/decorators
+ */
+declare const preview: P;
+
+export { preview as default };

package/dist/preview.d.ts

@@ -0,0 +1,15 @@
+import { P } from './public-types-8dd0ccdf.js';
+
+/**
+ * A decorator is a way to wrap a story in extra "rendering" functionality. Many addons define decorators
+ * in order to augment stories:
+ * - with extra rendering
+ * - gather details about how a story is rendered
+ *
+ * When writing stories, decorators are typically used to wrap stories with extra markup or context mocking.
+ *
+ * https://storybook.js.org/docs/react/writing-stories/decorators
+ */
+declare const preview: P;
+
+export { preview as default };

package/dist/preview.js

@@ -0,0 +1,2 @@
+import s,{useEffect}from'react';var t="sb-blackcat-addon";var l=(i,e)=>{let o=e.globals.direction??"ltr",r=e.globals.scalar??1;return useEffect(()=>{document.body.dir=o;},[o]),useEffect(()=>{document.body.style.setProperty("--accessibility-scalar",r.toString());},[r]),s.createElement(i,null)};var c={parameters:{[t]:{}},globalTypes:{direction:{name:"Direction",description:"Layout direction of components based off user settings.",defaultValue:"ltr",toolbar:{icon:"transfer",items:[{value:"ltr",title:"Left to Right"},{value:"rtl",title:"Right to Left"}],showName:true}},scalar:{name:"Accessibility Scalar",description:"Scale text and component sizes based off user settings.",defaultValue:1,toolbar:{icon:"collapse",items:[{value:.75,title:"Extra Small"},{value:.875,title:"Small"},{value:1,title:"Medium"},{value:1.125,title:"Large"},{value:1.25,title:"Extra Large"}]}}},decorators:[l]},b=c;export{b as default};//# sourceMappingURL=preview.js.map
+//# sourceMappingURL=preview.js.map

package/dist/preview.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/constants.ts","../src/decorator.tsx","../src/preview.tsx"],"names":["ADDON_ID","TOOL_ID","BlackcatDecorator","Story","context","direction","scalar","useEffect","React","preview","preview_default"],"mappings":"gCAAO,IAAMA,EAAW,mBACXC,CCEN,IAAMC,CAAAA,CAA+B,CAACC,CAAAA,CAAOC,IAAY,CAC9D,IAAMC,CAAYD,CAAAA,CAAAA,CAAQ,QAAQ,SAAa,EAAA,KAAA,CACzCE,CAASF,CAAAA,CAAAA,CAAQ,QAAQ,MAAU,EAAA,CAAA,CAGzC,OAAAG,SAAAA,CAAU,IAAM,CACd,QAAA,CAAS,KAAK,GAAMF,CAAAA,EACtB,EAAG,CAACA,CAAS,CAAC,CAAA,CAEdE,UAAU,IAAM,CACd,QAAS,CAAA,IAAA,CAAK,MAAM,WAAY,CAAA,wBAAA,CAA0BD,CAAO,CAAA,QAAA,EAAU,EAC7E,CAAA,CAAG,CAACA,CAAM,CAAC,CAEJE,CAAAA,CAAAA,CAAA,aAACL,CAAAA,CAAAA,CAAA,IAAM,CAChB,CAAA,CCFMM,IAAAA,CAAAA,CAAmB,CACvB,UAAY,CAAA,CACV,CAACT,CAAQ,EAAG,EAId,EAOA,WAAa,CAAA,CACX,UAAW,CACT,IAAA,CAAM,WACN,CAAA,WAAA,CAAa,0DACb,YAAc,CAAA,KAAA,CACd,OAAS,CAAA,CACP,KAAM,UACN,CAAA,KAAA,CAAO,CACL,CAAE,MAAO,KAAO,CAAA,KAAA,CAAO,eAAgB,CAAA,CACvC,CAAE,KAAO,CAAA,KAAA,CAAO,KAAO,CAAA,eAAgB,CACzC,CACA,CAAA,QAAA,CAAU,IACZ,CACF,EACA,MAAQ,CAAA,CACN,IAAM,CAAA,sBAAA,CACN,YAAa,yDACb,CAAA,YAAA,CAAc,EACd,OAAS,CAAA,CACP,KAAM,UACN,CAAA,KAAA,CAAO,CACL,CAAE,MAAO,GAAM,CAAA,KAAA,CAAO,aAAc,CAAA,CACpC,CAAE,KAAO,CAAA,IAAA,CAAO,KAAO,CAAA,OAAQ,EAC/B,CAAE,KAAA,CAAO,EAAG,KAAO,CAAA,QAAS,EAC5B,CAAE,KAAA,CAAO,KAAO,CAAA,KAAA,CAAO,OAAQ,CAC/B,CAAA,CAAE,KAAO,CAAA,IAAA,CAAM,MAAO,aAAc,CACtC,CACF,CACF,CACF,CAKA,CAAA,UAAA,CAAY,CAACE,CAAiB,CAChC,EAEOQ,CAAQD,CAAAA","file":"preview.js","sourcesContent":["export const ADDON_ID = 'sb-blackcat-addon' as const;\nexport const TOOL_ID = `${ADDON_ID}/tool` as const;\n","import type { Decorator } from '@storybook/react';\nimport React, { useEffect } from 'react';\n\nexport const BlackcatDecorator: Decorator = (Story, context) => {\n  const direction = context.globals.direction ?? 'ltr';\n  const scalar = context.globals.scalar ?? 1;\n  // const params = useParameter<BlackcatParameters>(ADDON_ID, defaultParameters)!;\n\n  useEffect(() => {\n    document.body.dir = direction;\n  }, [direction]);\n\n  useEffect(() => {\n    document.body.style.setProperty('--accessibility-scalar', scalar.toString());\n  }, [scalar]);\n\n  return <Story />;\n};\n","import type { Preview } from '@storybook/react';\nimport { ADDON_ID } from './constants.js';\nimport { BlackcatDecorator } from './decorator.js';\n\n/**\n * A decorator is a way to wrap a story in extra \"rendering\" functionality. Many addons define decorators\n * in order to augment stories:\n * - with extra rendering\n * - gather details about how a story is rendered\n *\n * When writing stories, decorators are typically used to wrap stories with extra markup or context mocking.\n *\n * https://storybook.js.org/docs/react/writing-stories/decorators\n */\n\nconst preview: Preview = {\n  parameters: {\n    [ADDON_ID]: {\n      // enableScalar: true,\n      // enableDirection: true,\n    },\n  },\n\n  /**\n   * This is the global type for storybook that will add a toolbar to change the locale.\n   * You must import this in preview.tsx and add it to the globalTypes object.\n   * For more information, see: https://storybook.js.org/docs/essentials/toolbars-and-globals\n   */\n  globalTypes: {\n    direction: {\n      name: 'Direction',\n      description: 'Layout direction of components based off user settings.',\n      defaultValue: 'ltr',\n      toolbar: {\n        icon: 'transfer',\n        items: [\n          { value: 'ltr', title: 'Left to Right' },\n          { value: 'rtl', title: 'Right to Left' },\n        ],\n        showName: true,\n      },\n    },\n    scalar: {\n      name: 'Accessibility Scalar',\n      description: 'Scale text and component sizes based off user settings.',\n      defaultValue: 1,\n      toolbar: {\n        icon: 'collapse',\n        items: [\n          { value: 0.75, title: 'Extra Small' },\n          { value: 0.875, title: 'Small' },\n          { value: 1, title: 'Medium' },\n          { value: 1.125, title: 'Large' },\n          { value: 1.25, title: 'Extra Large' },\n        ],\n      },\n    },\n  },\n\n  /**\n   * Adds the Blackcat Decorator to all stories.\n   */\n  decorators: [BlackcatDecorator],\n};\n\nexport default preview;\n"]}

package/package.json

@@ -0,0 +1,106 @@
+{
+  "name": "@tcn/sb-blackcat-addon",
+  "version": "0.0.1",
+  "type": "module",
+  "author": "TCN",
+  "description": "Storybook addon that provides Blackcat accessibility scalar and layout direction.",
+  "files": [
+    "dist/**/*",
+    "README.md",
+    "*.js",
+    "*.d.ts"
+  ],
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
+  "types": "dist/types/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./preview": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/preview.js",
+      "require": "./dist/preview.cjs"
+    },
+    "./package.json": "./package.json"
+  },
+  "bundler": {
+    "exportEntries": [
+      "src/index.ts"
+    ],
+    "previewEntries": [
+      "src/preview.tsx"
+    ]
+  },
+  "storybook": {
+    "displayName": "Blackcat Addon",
+    "supportedFrameworks": [
+      "react"
+    ],
+    "icon": "https://www.tcn.com/wp-content/uploads/2019/05/tcn-logo.png"
+  },
+  "license": "Apache-2.0",
+  "peerDependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "scripts": {
+    "start": "concurrently 'yarn build-watch' 'yarn storybook --quiet'",
+    "build": "tsup",
+    "build-watch": "tsup --watch",
+    "check-all": "concurrently 'yarn check-types' 'biome check .'",
+    "check-types": "tspc --project ./tsconfig.json --noEmit",
+    "check-format": "biome format .",
+    "check-lint": "biome lint .",
+    "fix-all": "biome check --write",
+    "fix-format": "biome format --write",
+    "fix-lint": "biome lint --write",
+    "fix-imports": "biome check --formatter-enabled=false --linter-enabled=false --organize-imports-enabled=true --write",
+    "test": "vitest run",
+    "test-coverage": "vitest run --coverage",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "yarn build && storybook build"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "1.9.4",
+    "@chromatic-com/storybook": "^1.2.25",
+    "@storybook/addon-essentials": "^8.0.4",
+    "@storybook/addon-interactions": "^8.0.4",
+    "@storybook/addon-links": "^8.0.4",
+    "@storybook/addon-onboarding": "^8.0.4",
+    "@storybook/blocks": "^8.0.4",
+    "@storybook/preview-api": "^8.5.3",
+    "@storybook/react": "^8.0.4",
+    "@storybook/react-vite": "^8.0.4",
+    "@storybook/test": "^8.0.4",
+    "@storybook/testing-library": "^0.2.2",
+    "@types/copyfiles": "^2",
+    "@types/node": "^20.11.30",
+    "@types/react": "^18.2.70",
+    "@types/react-dom": "^18.2.22",
+    "@vitejs/plugin-react": "^4.2.1",
+    "concurrently": "^8.2.2",
+    "copyfiles": "^2.4.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "read-pkg-up": "^11.0.0",
+    "storybook": "^8.0.4",
+    "ts-node": "^10.9.2",
+    "ts-patch": "^3.2.1",
+    "tsup": "^8.2.4",
+    "typescript": "5.4.3",
+    "typescript-transform-paths": "^3.5.1",
+    "vite": "^5.2.6",
+    "vite-css-modules": "^1.5.2",
+    "vitest": "^2.1.4"
+  },
+  "dependencies": {
+    "@tcn/state": "^0.0.4",
+    "@tcn/ui-core": "^0.4.1",
+    "@tcn/ui-layout": "^0.3.15",
+    "classnames": "^2.5.1"
+  },
+  "packageManager": "yarn@4.0.2"
+}

package/preview.js

@@ -0,0 +1 @@
+export * from './dist/preview';