feat: re-syncing with original repo

.github/ISSUE_TEMPLATE/bug_report.md

@@ -4,14 +4,14 @@ about: Create a report to help us improve
 title: ''
 labels: bug
 assignees: ''
-
 ---
 
 **Describe the bug**
 A clear and concise description of what the bug is.
 
 **Steps to Reproduce**
 Steps to reproduce the behavior:
+
 1. Go to '...'
 2. Click on '....'
 3. Scroll down to '....'

.github/ISSUE_TEMPLATE/feature_request.md

@@ -4,7 +4,6 @@ about: Suggest an idea for this project
 title: ''
 labels: enhancement
 assignees: ''
-
 ---
 
 **Is your feature request related to a problem? Please describe.**

.husky/pre-commit

@@ -0,0 +1 @@
+npx lint-staged

.lintstagedrc

@@ -0,0 +1,4 @@
+{
+  "!(*.ts)": "prettier . --check",
+  "*.ts": ["eslint . --report-unused-disable-directives", "prettier . --check"]
+}

.nvmrc

@@ -1 +1 @@
-v16.13.0
+v18.20.4

.prettierignore

@@ -0,0 +1,4 @@
+dist
+node_modules
+*.typegen.ts
+.nvmrc

.prettierrc

@@ -0,0 +1,11 @@
+{
+  "printWidth": 80,
+  "singleQuote": true,
+  "useTabs": false,
+  "tabWidth": 2,
+  "semi": true,
+  "bracketSpacing": true,
+  "arrowParens": "avoid",
+  "trailingComma": "all",
+  "bracketSameLine": false
+}

.vscode/settings.json

@@ -0,0 +1,8 @@
+{
+  "eslint.useFlatConfig": true,
+  "editor.codeActionsOnSave": {
+    "source.fixAll": "always"
+  },
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.formatOnSave": true
+}

README.md

@@ -5,21 +5,22 @@ Converts stencil.js doc json derived from stencils output target
 [`ArgTypes`](https://storybook.js.org/docs/react/api/argtypes).
 
 With this addon activated
+
 - Storybook will render basic controls for properties [Controls](https://storybook.js.org/docs/react/essentials/controls).
 - Storybook will auto generate documentation for Props, Events, Methods, Slots, Shadow Parts and Custom Properties.
-- Storybook doc page will contain stencils component documentation (readme.md or inline)   
+- Storybook doc page will contain stencils component documentation (readme.md or inline)
 
 ## Installation
 
-```
+```bash
 npm i -D @pxtrn/storybook-addon-docs-stencil
 ```
 
 ## Usage
 
 ### Configure stencil to generate docs-json at build time.
 
-```
+```js
 // stencil.config.ts
 
 import { Config } from '@stencil/core';
@@ -36,41 +37,85 @@ export const config: Config = {
 
 ### Configure Storybook
 
-```
+```js
 //.storybook/main.js
 
 module.exports = {
   addons: [
     '@storybook/addon-essentials',
-    '@pxtrn/storybook-addon-docs-stencil'
-  ]
-}
+    '@pxtrn/storybook-addon-docs-stencil',
+  ],
+};
 ```
 
-```
+```js
 //.storybook/preview.js
 
 import { setStencilDocJson } from '@pxtrn/storybook-addon-docs-stencil';
 import docJson from 'path/to/docs.json';
-if(docJson) setStencilDocJson(docJson);
+if (docJson) setStencilDocJson(docJson);
 
 export const parameters = {
-  controls: { hideNoControlsWarning: true }
-}
+  controls: { hideNoControlsWarning: true },
+};
 ```
 
-#### Dash cased properties
+### Configure the argTypes extractor
 
-```
+```js
 //.storybook/preview.js
 
 import { extractArgTypesFactory } from '@pxtrn/storybook-addon-docs-stencil';
 
+/** @type { import('@pxtrn/storybook-addon-docs-stencil').ExtractArgTypesOptions } */
+const options = {
+  excludeCategories: 'porperties',
+  controlsFor: 'attributes',
+  eventNameing: 'jsx',
+};
+
 export const parameters = {
   docs: {
-    extractArgTypes: extractArgTypesFactory({ dashCase: true }),
-  }
-}
+    extractArgTypes: extractArgTypesFactory(options),
+  },
+};
+```
+
+#### ExtractArgTypesOptions
+
+- `excludeCategories: Category[]`: categories to exclude from argTypes and docs (default: `['attributes]`).
+- `controlsFor: 'attributes' | 'properties'`: for wich category to render controls.
+- `eventNameing: 'native' | 'jsx'`: nameing of the arg key for events (default: 'native'). If jsx the args can be spread `<my-component {...args} />` when using JSX to render stories.
+
+### Default render method
+
+When using @storybook/web-components or @storybook/html as renderer args and actions do not get bound automatically. This addon includes an optional default renderer that works out of the box
+
+```js
+//.storybook/preview.js
+
+import {
+  extractArgTypesFactory,
+  stencilRender,
+} from '@pxtrn/storybook-addon-docs-stencil';
+
+/** @type { import('@storybook/web-components').Preview } */
+const preview = {
+  render: stencilRender(),
+};
+
+export default preview;
+```
+
+`stencilRender` can be configured by these options:
+
+- `eventNameing: 'native' | 'jsx'`: use the same nameing used in ExtractArgTypesOptions (default: 'native)
+- `bindEvents: boolean`: wheter events/actions should be bound (default: true)
+
+eg:
+
+```js
+stencilRender({ bindEvents: false });
 ```
 
 ### Component documentation
@@ -80,15 +125,15 @@ export const parameters = {
 If not already created by stencil create `src/components/my-component/readme.md`
 If the line `<!-- Auto Generated Below -->` is not present, stencil will ignore this file.
 
-```
+```md
 Everything above this line will be included in storybook
 
 <!-- Auto Generated Below -->
 ```
 
 #### inline documentation
 
-```
+```ts
 // src/components/my-component/my-component.tsx`
 
 /**
@@ -101,33 +146,22 @@ Everything above this line will be included in storybook
 })
 ```
 
-#### Troubleshooting
-
-##### When using @storybook/web-components
-
-`@storybook/web-components` overrides the preset configuration of this module.
-You can fix this with this preview config.
-
-```
-//.storybook/preview.js
-
-import { extractArgTypes, extractComponentDescription, setStencilDocJson } from '@pxtrn/storybook-addon-docs-stencil';
+If you prefere the inline documentation over the readme, see [issue #15](https://github.com/pixtron/storybook-addon-docs-stencil/issues/15#issuecomment-2387147999).
 
-export const parameters = {
-  ...
-  docs: {
-    extractArgTypes,
-    extractComponentDescription,
-  },
-};
-```
+#### Troubleshooting
 
 ##### Hint your component in your stories
-```
+
+```ts
 // your-story.ts
 
 export default {
   title: 'My Component',
   component: 'my-component',
 };
 ```
+
+### Breaking Changes in v7
+
+- attributes and properties are now shown as own categories, before both where visible under "props" with some inconsitency in naming (dashCase vs camelCase). Use `excludeCategories` to configure which categories are shown.
+- removed configuration `dashCase` properties and attributes are now shown in single sections. Use `controlsFor` and `excludeCategories` instead of `dashCase`.

eslint.config.mjs

@@ -0,0 +1,26 @@
+import eslint from '@eslint/js';
+import tseslint from 'typescript-eslint';
+
+export default tseslint.config(
+  {
+    ignores: ['preset.js', '**/dist/', '**/node_modules'],
+  },
+  {
+    files: ['**/*.ts'],
+    extends: [eslint.configs.recommended, ...tseslint.configs.recommended],
+    plugins: {
+      '@typescript-eslint': tseslint.plugin,
+    },
+    languageOptions: {
+      parser: tseslint.parser,
+      parserOptions: {
+        project: ['./tsconfig.eslint.json', './tsconfig.json'],
+      },
+    },
+    rules: {
+      'no-console': 1,
+      'object-curly-spacing': ['error', 'always'],
+      '@typescript-eslint/ban-ts-comment': 0,
+    },
+  },
+);