p-elements-core 2.1.0-rc8 → 2.1.0

package/storybook/storybook-p-element-vite/README.md

@@ -1,97 +0,0 @@
-# P-Element Storybook Plugin
-
-A Storybook framework plugin for [p-elements](https://github.com/outsystems/p-elements-core), enabling seamless integration of p-element web components in Storybook.
-
-## Features
-
-- 🧩 **Component Support**: Full support for p-element web components
-- 📖 **Auto Documentation**: Automatic source code extraction for Docs tab
-- 🎨 **TypeScript**: Complete TypeScript support with proper type definitions
-- ⚡ **Vite Integration**: Optimized build configuration with Vite
-- 🔄 **Portable Stories**: Support for portable stories across different environments
-
-## Installation
-
-```bash
-npm install --save-dev p-element-storybook-plugin
-```
-
-## Configuration
-
-Add the framework to your `.storybook/main.ts`:
-
-```typescript
-import type { StorybookConfig } from '@storybook/html-vite';
-
-const config: StorybookConfig = {
-  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],
-  framework: {
-    name: 'p-element-storybook-plugin',
-    options: {}
-  },
-  addons: [
-    '@storybook/addon-docs'
-  ]
-};
-
-export default config;
-```
-
-## Usage
-
-### Writing Stories
-
-```typescript
-import type { Meta, StoryObj } from 'p-element-storybook-plugin';
-import './my-component'; // Import your p-element component
-
-type Args = {
-  name: string;
-  disabled: boolean;
-};
-
-const meta: Meta<Args> = {
-  title: 'Components/MyComponent',
-  tags: ['autodocs'],
-  argTypes: {
-    name: { control: 'text' },
-    disabled: { control: 'boolean' }
-  },
-  render: (args: Args) => <my-component name={args.name} disabled={args.disabled ? "disabled" : undefined}></my-component>,
-};
-
-export default meta;
-type Story = StoryObj<Args>;
-
-export const Default: Story = {
-  args: {
-    name: 'Hello World',
-    disabled: false
-  }
-};
-```
-
-### Component Types
-
-The plugin supports multiple component types:
-
-1. **String Templates**: Simple HTML strings with argument interpolation
-2. **HTML Elements**: Direct HTMLElement instances
-3. **Function Components**: Functions that return VNode
-
-
-The plugin uses [tsdown](https://github.com/sxzz/tsdown) for building both ESM and CJS outputs with TypeScript declaration files.
-
-## Development
-
-### Building
-
-```bash
-npm run build
-```
-
-### Watching for Changes
-
-```bash
-npm run watch
-```

package/storybook/storybook-p-element-vite/package.json

@@ -1,81 +0,0 @@
-{
-  "name": "storybook-p-element-vite",
-  "version": "2.0.0-rc1",
-  "description": "Storybook plugin for p-element",
-  "license": "MIT",
-  "keywords": [
-    "storybook",
-    "p-elements-core",
-    "webcomponents",
-    "components",
-    "framework"
-  ],
-  "type": "module",
-  "main": "dist/index.js",
-  "module": "dist/index.js",
-  "types": "dist/index.d.ts",
-  "files": [
-    "dist",
-    "template",
-    "@types",
-    "preset.js"
-  ],
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.js",
-      "require": "./dist/index.cjs"
-    },
-    "./preset": {
-      "types": "./dist/preset.d.ts",
-      "import": "./dist/preset.js",
-      "require": "./dist/preset.cjs"
-    },
-    "./preview": {
-      "types": "./dist/preview.d.ts",
-      "import": "./dist/preview.js",
-      "require": "./dist/preview.cjs"
-    },
-    "./dist/preview.js": {
-      "types": "./dist/preview.d.ts",
-      "import": "./dist/preview.js",
-      "require": "./dist/preview.cjs"
-    },
-    "./node": {
-      "types": "./dist/node/index.d.ts",
-      "import": "./dist/node/index.js",
-      "require": "./dist/node/index.cjs"
-    },
-    "./package.json": "./package.json"
-  },
-  "scripts": {
-    "build": "tsdown",
-    "dev": "tsdown --watch",
-    "watch": "tsdown --watch",
-    "clean": "rm -rf dist",
-    "prepublishOnly": "npm run build",
-    "lint": "echo 'Add linting here'",
-    "test": "echo 'Add tests here'"
-  },
-  "dependencies": {
-    "@storybook/builder-vite": "^10.2.7",
-    "@storybook/global": "^5.0.0",
-    "@storybook/html": "^10.2.7",
-    "p-elements-core": "2.1.0-rc6"
-  },
-  "peerDependencies": {
-    "storybook": "^10.2.7"
-  },
-  "devDependencies": {
-    "@types/node": "^22.19.10",
-    "tsdown": "^0.20.3",
-    "typescript": "~5.9.3",
-    "vite": "^7.3.1"
-  },
-  "engines": {
-    "node": ">=20"
-  },
-  "publishConfig": {
-    "access": "public"
-  }
-}

package/storybook/storybook-p-element-vite/preset.js

@@ -1,2 +0,0 @@
-// This file seems to only be necessary for Windows
-export * from './dist/preset.mjs';

package/storybook/storybook-p-element-vite/src/docs/index.ts

@@ -1,8 +0,0 @@
-/**
- * Documentation utilities for p-element Storybook plugin
- * 
- * This module exports decorators and utilities specifically
- * designed for documentation generation in Storybook.
- */
-
-export { sourceDecorator } from './source-decorator';

package/storybook/storybook-p-element-vite/src/docs/source-decorator.ts

@@ -1,55 +0,0 @@
-import { emitTransformCode, useEffect } from 'storybook/internal/preview-api';
-import type { DecoratorFunction } from 'storybook/internal/types';
-import type { PElementRenderer } from '../types';
-import { instance } from 'storybook/internal/node-logger';
-
-/**
- * Source decorator for p-element stories
- * 
- * This decorator extracts the rendered HTML from stories and displays it
- * in the Docs tab as source code. It handles different source languages
- * and provides error handling for edge cases.
- */
-export const sourceDecorator: DecoratorFunction<PElementRenderer<unknown>> = (storyFn, context) => {
-  const story = storyFn();
-  
-  useEffect(() => {
-    try {
-      const sourceLanguage = context.parameters.docs?.source?.language;
-      
-      switch (sourceLanguage) {
-        case 'html': {
-
-          
-          if (context.unboundStoryFn && typeof context.unboundStoryFn(context)  === "object") {
-            const vnode = context.unboundStoryFn(context);
-            if (vnode instanceof HTMLElement) {
-              emitTransformCode(vnode.outerHTML, context);
-              return;
-            }
-            emitTransformCode(Maquette.dom.create(vnode).domNode.outerHTML, context);
-            return;
-          }
-          const element = context.canvasElement?.firstChild as HTMLElement;
-          if (element?.outerHTML) {
-            emitTransformCode(element.outerHTML, context);
-            
-          } else {
-            console.warn('No HTML element found to extract source code from');
-            emitTransformCode('<!-- No HTML content found -->', context);
-          }
-          break;
-        }
-        default: {
-          console.warn(`Unsupported source language: ${sourceLanguage}`);
-          break;
-        }
-      }
-    } catch (error) {
-      console.error('Error in source decorator:', error);
-      emitTransformCode('<!-- Error extracting source code -->', context);
-    }
-  });
-  
-  return story;
-};

package/storybook/storybook-p-element-vite/src/entry-preview-docs.ts

@@ -1,16 +0,0 @@
-import { SourceType } from 'storybook/internal/docs-tools';
-import type { DecoratorFunction, Parameters } from 'storybook/internal/types';
-import { sourceDecorator } from './docs/source-decorator';
-import type { PElementRenderer } from './types';
-
-export const decorators: DecoratorFunction<PElementRenderer<unknown>>[] = [sourceDecorator];
-
-export const parameters: Parameters = {
-  docs: {
-    story: { inline: true },
-    source: {
-      type: SourceType.DYNAMIC,
-      language: 'html',
-    },
-  },
-};

package/storybook/storybook-p-element-vite/src/entry-preview.ts

@@ -1,8 +0,0 @@
-import { enhanceArgTypes } from 'storybook/internal/docs-tools';
-import type { ArgTypesEnhancer, Parameters } from 'storybook/internal/types';
-
-export const parameters: Parameters = { renderer: 'p-element' };
-
-export { render, renderToCanvas } from './render';
-
-export const argTypesEnhancers: ArgTypesEnhancer[] = [enhanceArgTypes];

package/storybook/storybook-p-element-vite/src/index.ts

@@ -1,9 +0,0 @@
-/**
- * Main entry point for the p-element Storybook plugin
- * 
- * This module exports the core types and portable stories functionality
- * needed to use p-element components in Storybook.
- */
-
-export * from './types.js';
-export * from './portable-stories.js';

package/storybook/storybook-p-element-vite/src/node/index.ts

@@ -1,5 +0,0 @@
-import type { StorybookConfig } from '../types';
-
-export function defineMain(config: StorybookConfig) {
-  return config;
-}

package/storybook/storybook-p-element-vite/src/portable-stories.ts

@@ -1,35 +0,0 @@
-import type { NamedOrDefaultProjectAnnotations, NormalizedProjectAnnotations } from 'storybook/internal/types';
-
-import {
-  setProjectAnnotations as originalSetProjectAnnotations,
-  setDefaultProjectAnnotations,
-} from 'storybook/preview-api';
-
-import * as pElementAnnotations from './entry-preview';
-import type { PElementRenderer } from './types';
-
-/**
- * Function that sets the globalConfig of your storybook. The global config is the preview module of
- * your .storybook folder.
- *
- * It should be run a single time, so that your global config (e.g. decorators) is applied to your
- * stories when using `composeStories` or `composeStory`.
- *
- * Example:
- *
- * ```jsx
- * // setup-file.js
- * import { setProjectAnnotations } from '@storybook/web-components';
- * import projectAnnotations from './.storybook/preview';
- *
- * setProjectAnnotations(projectAnnotations);
- * ```
- *
- * @param projectAnnotations - E.g. (import projectAnnotations from '../.storybook/preview')
- */
-export function setProjectAnnotations(
-  projectAnnotations: NamedOrDefaultProjectAnnotations<any> | NamedOrDefaultProjectAnnotations<any>[],
-): NormalizedProjectAnnotations<PElementRenderer<unknown>> {
-  setDefaultProjectAnnotations(pElementAnnotations);
-  return originalSetProjectAnnotations(projectAnnotations) as NormalizedProjectAnnotations<PElementRenderer<unknown>>;
-}

package/storybook/storybook-p-element-vite/src/preset.ts

@@ -1,69 +0,0 @@
-/**
- * Storybook preset configuration for p-element framework
- * 
- * Note: We can't prefix Node.js imports with `node:` because it will break
- * within Storybook due to its Vite setup.
- */
-import { createRequire } from 'module';
-import { dirname, join } from 'path';
-import { fileURLToPath } from 'url';
-import { mergeConfig } from 'vite';
-import { StorybookConfig } from './types';
-
-const require = createRequire(import.meta.url);
-
-/**
- * Helper function to resolve absolute paths for Storybook dependencies
- */
-const getAbsolutePath = <I extends string>(input: I): I => 
-  dirname(require.resolve(join(input, 'package.json'))) as I;
-
-const __dirname = dirname(fileURLToPath(import.meta.url));
-const renderer = join(__dirname, 'entry-preview.mjs');
-
-/**
- * Core Storybook configuration
- */
-export const core: StorybookConfig['core'] = {
-  builder: '@storybook/builder-vite',
-  renderer,
-};
-
-/**
- * Vite configuration customization
- */
-export const viteFinal: StorybookConfig['viteFinal'] = async (defaultConfig, { configType }) => {
-  const baseConfig = mergeConfig(defaultConfig, {
-    build: {
-      target: 'es2020',
-    },
-    plugins: [],
-  });
-
-  if (configType === 'DEVELOPMENT') {
-    return mergeConfig(baseConfig, {
-      build: {
-        rollupOptions: {
-          // Add development-specific rollup options here if needed
-        },
-      },
-    });
-  }
-
-  return baseConfig;
-};
-
-/**
- * Preview annotations configuration
- * Determines which preview files to load based on enabled features
- */
-export const previewAnnotations: StorybookConfig['previewAnnotations'] = async (input = [], options) => {
-  const docsEnabled = Object.keys(await options.presets.apply('docs', {}, options)).length > 0;
-  const annotations: string[] = [renderer];
-
-  if (docsEnabled) {
-    annotations.push(join(__dirname, 'entry-preview-docs.mjs'));
-  }
-
-  return [...input, ...annotations];
-};

package/storybook/storybook-p-element-vite/src/render.ts

@@ -1,96 +0,0 @@
-import { ArgsStoryFn, RenderContext } from 'storybook/internal/types';
-import { simulatePageLoad } from 'storybook/preview-api';
-
-import type { PElementRenderer } from './types';
-import { instance } from 'storybook/internal/node-logger';
-
-/**
- * Main render function for p-element stories
- * Handles different component types: string templates, HTML elements, and functions
- */
-export const render: ArgsStoryFn<PElementRenderer<unknown>> = (args, context) => {
-  const { id, component: Component } = context;
-
-  // Handle string templates with argument interpolation
-  if (typeof Component === 'string') {
-    return interpolateStringTemplate(Component, args);
-  }
-
-  // Handle HTML elements by cloning and setting attributes
-  if (Component instanceof HTMLElement) {
-    return cloneElementWithArgs(Component, args);
-  }
-
-  // Handle function components
-  if (typeof Component === 'function') {
-    return Component(args, context);
-  }
-
-  const errorMessage = `Storybook's p-element renderer only supports rendering DOM elements, strings, and functions. Received: ${typeof Component}`;
-  console.error(errorMessage, Component);
-  throw new Error(`Unable to render story ${id}: ${errorMessage}`);
-};
-
-/**
- * Interpolates args into a string template
- */
-function interpolateStringTemplate(template: string, args: Record<string, any>): string {
-  return Object.entries(args).reduce((output, [key, value]) => {
-    const placeholder = `{{${key}}}`;
-    return output.replace(new RegExp(placeholder, 'g'), String(value));
-  }, template);
-}
-
-/**
- * Clones an HTML element and sets attributes from args
- */
-function cloneElementWithArgs(element: HTMLElement, args: Record<string, any>): HTMLElement {
-  const output = element.cloneNode(true) as HTMLElement;
-  
-  Object.entries(args).forEach(([key, value]) => {
-    const attributeValue = typeof value === 'string' ? value : JSON.stringify(value);
-    output.setAttribute(key, attributeValue);
-  });
-
-  return output;
-}
-
-/**
- * Renders the story to the canvas element
- */
-export function renderToCanvas(
-  { storyFn, showMain }: RenderContext<PElementRenderer<unknown>>,
-  canvasElement: PElementRenderer<unknown>['canvasElement'],
-): void {
-  const vdom = storyFn();
-  showMain();
-
-  // Clear existing content
-  while (canvasElement.firstChild) {
-    canvasElement.removeChild(canvasElement.firstChild);
-  }
-
-  // Create and append new content
-  if (typeof vdom === 'string') {
-    const element = document.createElement('div');
-    element.innerHTML = vdom;
-    canvasElement.appendChild(element);
-    simulatePageLoad(element);
-  } else if (vdom instanceof HTMLElement) {
-    canvasElement.appendChild(vdom);
-    simulatePageLoad(vdom);
-  } else if (vdom && 'vnodeSelector' in vdom) {
-    if (!Maquette) {
-       throw new Error('Maquette DOM library is required for rendering VNodes');
-    }
-    const vnode = Maquette.dom.create(vdom);
-    const element = vnode.domNode;
-    canvasElement.appendChild(element);
-    simulatePageLoad(element);
-  } else if (vdom instanceof Element) {
-    canvasElement.appendChild(vdom);
-    simulatePageLoad(vdom);
-  } else {
-    throw new Error('Render function returned an unsupported type');
-  }
-}

package/storybook/storybook-p-element-vite/src/types.ts

@@ -1,99 +0,0 @@
-import { StorybookConfigVite } from '@storybook/builder-vite';
-import type {
-  AnnotatedStoryFn,
-  Args,
-  ComponentAnnotations,
-  DecoratorFunction,
-  StoryContext as GenericStoryContext,
-  LoaderFunction,
-  ProjectAnnotations,
-  StoryAnnotations,
-  StorybookConfig as StorybookConfigBase,
-  StrictArgs,
-  WebRenderer,
-} from 'storybook/internal/types';
-
-/**
- * Utility type to extract public properties from a component props type
- * Excludes properties that end with '$' (considered private)
- */
-type PublicProps<PROPS> = (PROPS extends Record<any, any>
-  ? Omit<PROPS, `${string}$`>
-  : unknown extends PROPS
-    ? {}
-    : PROPS)
-
-/**
- * Function component type for p-element components
- */
-type FunctionComponent<P = unknown> = {
-  renderFn(props: P, key: string | null, flags: number): VNode | string | Element;
-}['renderFn'];
-
-/**
- * Generic component type that can be either a function component or any other component
- */
-type Component<PROPS = unknown> = FunctionComponent<PublicProps<PROPS>>;
-
-/**
- * P-Element renderer interface extending Storybook's WebRenderer
- * Defines the shape of components, story results, and args for p-element stories
- */
-export interface PElementRenderer<T> extends WebRenderer {
-  component: Component<T> | any;
-  storyResult: ReturnType<Component<T>>;
-  args: T;
-}
-
-/**
- * Preview configuration type for p-element projects
- * Used to configure global decorators, parameters, and other project-wide settings
- */
-export type Preview = ProjectAnnotations<PElementRenderer<unknown>>;
-
-/**
- * Metadata to configure the stories for a component.
- * 
- * @see [Default export](https://storybook.js.org/docs/formats/component-story-format/#default-export)
- */
-export type Meta<TArgs = Args> = ComponentAnnotations<PElementRenderer<TArgs>, TArgs>;
-
-/**
- * Story function that represents a CSFv2 component example.
- * 
- * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
- */
-export type StoryFn<TArgs = Args> = AnnotatedStoryFn<PElementRenderer<TArgs>, TArgs>;
-
-/**
- * Story object that represents a CSFv3 component example.
- * 
- * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
- */
-export type StoryObj<TArgs = Args> = StoryAnnotations<PElementRenderer<TArgs>, TArgs>;
-
-/**
- * Decorator function type for p-element stories
- * Used to wrap stories with additional functionality or styling
- */
-export type Decorator<TArgs = StrictArgs> = DecoratorFunction<PElementRenderer<TArgs>, TArgs>;
-
-/**
- * Loader function type for p-element stories
- * Used to load data or perform setup before story rendering
- */
-export type Loader<TArgs = StrictArgs> = LoaderFunction<PElementRenderer<TArgs>, TArgs>;
-
-/**
- * Story context type providing access to story metadata and configuration
- */
-export type StoryContext<TArgs = StrictArgs> = GenericStoryContext<PElementRenderer<TArgs>, TArgs>;
-
-/**
- * Storybook configuration type specific to p-element framework
- * Extends the base Storybook config with Vite-specific options
- */
-export type StorybookConfig = Omit<StorybookConfigBase, 'framework'> & {
-  framework: 'storybook-p-element-vite' | { name: 'storybook-p-element-vite' };
-} & StorybookConfigVite;
-

package/storybook/storybook-p-element-vite/tsconfig.json

@@ -1,14 +0,0 @@
-{
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "rootDir": "./src",
-    "jsx": "react",
-    "jsxFactory": "h",
-    "jsxFragmentFactory": "h.Fragment",
-    "moduleResolution": "bundler",
-    "target": "ES2020",
-    "module": "ES2020",
-    "types": ["p-elements-core"]
-  },
-  "include": ["src/**/*"]
-}

package/storybook/storybook-p-element-vite/tsdown.config.ts

@@ -1,26 +0,0 @@
-import { defineConfig } from 'tsdown';
-
-export default defineConfig({
-  entry: [
-    './src/index.ts',
-    './src/preset.ts',
-    './src/entry-preview.ts',
-    './src/entry-preview-docs.ts',
-    './src/docs/index.ts',
-    './src/node/index.ts',
-  ],
-  // Externalize native modules and problematic dependencies
-  external: [
-    'fsevents', // macOS file watching native module
-    'esbuild', // Contains native binaries
-    'vite', // May contain native dependencies
-  ],
-  outDir: './dist',
-  format: ['esm', 'cjs'],
-  target: 'es2020',
-  platform: 'node',
-  sourcemap: true,
-  clean: true,
-  dts: true,
-  tsconfig: './tsconfig.json',
-});