@adobe-commerce/elsie 1.0.0-alpha1

package/dist/types/elsie/src/lib/signals.d.ts

@@ -0,0 +1,2 @@
+export * from '@preact/signals';
+//# sourceMappingURL=signals.d.ts.map

package/dist/types/elsie/src/lib/slot.d.ts

@@ -0,0 +1,45 @@
+import { ComponentChildren, RefObject, VNode } from 'preact';
+import { StateUpdater } from 'preact/hooks';
+import { Lang } from '../i18n';
+import { HTMLAttributes } from 'preact/compat';
+
+type MutateElement = (elem: HTMLElement) => void;
+interface State {
+    get: (key: string) => void;
+    set: (key: string, value: any) => void;
+}
+interface SlotElement {
+    appendChild: MutateElement;
+    prependChild: MutateElement;
+    appendSibling: MutateElement;
+    prependSibling: MutateElement;
+}
+interface PrivateContext<T> {
+    _setProps: (s: StateUpdater<{}>) => void;
+    _registerMethod: (cb: (next: T & DefaultSlotContext<T>, state: State) => void) => void;
+    _htmlElementToVNode: (element: HTMLElement) => VNode;
+}
+interface DefaultSlotContext<T> extends PrivateContext<T> {
+    dictionary: Lang;
+    getSlotElement: (key: string) => SlotElement;
+    replaceWith: MutateElement;
+    appendChild: MutateElement;
+    prependChild: MutateElement;
+    appendSibling: MutateElement;
+    prependSibling: MutateElement;
+    onRender: (cb: (next: T & DefaultSlotContext<T>) => void) => void;
+    onChange: (cb: (next: T & DefaultSlotContext<T>) => void) => void;
+}
+type Context<T> = T & ThisType<DefaultSlotContext<T>>;
+export type SlotProps<T = any> = (ctx: T & DefaultSlotContext<T>, element: HTMLDivElement | null) => Promise<void> | void;
+export type SlotMethod<P = any> = (callback: (next: unknown, state: State) => P) => void;
+export declare function useSlot<K, V extends HTMLDivElement>(name: string, context?: Context<K>, callback?: SlotProps<K>, children?: ComponentChildren, render?: Function): [RefObject<V>, Record<string, any>];
+interface SlotPropsComponent<T> extends Omit<HTMLAttributes<HTMLDivElement>, 'slot'> {
+    name: string;
+    slot?: SlotProps<T>;
+    context?: Context<T>;
+    render?: (props: Record<string, any>) => VNode | VNode[];
+}
+export declare function Slot<T>({ name, context, slot, children, render, ...props }: Readonly<SlotPropsComponent<T>>): import("preact").JSX.Element;
+export {};
+//# sourceMappingURL=slot.d.ts.map

package/dist/types/elsie/src/lib/tests.d.ts

@@ -0,0 +1,5 @@
+import { RenderOptions, RenderResult } from '@testing-library/preact';
+
+export * from '@testing-library/preact';
+export declare const render: (ui: any, options?: Omit<RenderOptions, 'queries'>) => RenderResult;
+//# sourceMappingURL=tests.d.ts.map

package/dist/types/elsie/src/lib/types.d.ts

@@ -0,0 +1,10 @@
+import { FunctionComponent } from 'preact';
+
+export type Container<T, D = {
+    [key: string]: any;
+}> = FunctionComponent<T & {
+    initialData?: D;
+}> & {
+    getInitialData?: (props: T) => Promise<D>;
+};
+//# sourceMappingURL=types.d.ts.map

package/dist/types/elsie/src/lib/vcomponent.d.ts

@@ -0,0 +1,9 @@
+import { VNode, ComponentChildren } from 'preact';
+
+export type VComponentProps = {
+    node: VNode | VNode[];
+    children?: ComponentChildren;
+    [key: string]: any;
+};
+export declare function VComponent({ node, ...props }: VComponentProps): import("preact").JSX.Element | null;
+//# sourceMappingURL=vcomponent.d.ts.map

package/package.json

@@ -0,0 +1,114 @@
+{
+  "name": "@adobe-commerce/elsie",
+  "version": "1.0.0-alpha1",
+  "license": "SEE LICENSE IN LICENSE.md",
+  "description": "Domain Package SDK",
+  "engines": {
+    "node": ">=18"
+  },
+  "sideEffects": false,
+  "main": "./package.json",
+  "bin": {
+    "elsie": "./bin/index.js"
+  },
+  "scripts": {
+    "dev": "concurrently 'yarn storybook' 'yarn serve'",
+    "storybook": "elsie storybook",
+    "serve": "elsie serve --config vite.config.mjs",
+    "lint": "elsie lint --max-warnings=0",
+    "test": "elsie test",
+    "test:ci": "jest --config jest.config.js --passWithNoTests --coverage",
+    "build": "elsie build --config vite.config.mjs",
+    "analyze": "ANALYZE=true elsie build --config vite.config.mjs",
+    "build-storybook": "storybook build --disable-telemetry",
+    "test-storybook": "test-storybook",
+    "test-storybook-ci": "concurrently -k -s first -n \"SB,TEST\" -c \"magenta,blue\" \"yarn build-storybook --quiet && npx http-server storybook-static --port 6006 --silent\" \"npx wait-on tcp:127.0.0.1:6006 && test-storybook\"",
+    "cleanup": "rimraf dist"
+  },
+  "devDependencies": {
+    "@adobe-commerce/event-bus": "~1.0.0",
+    "@adobe-commerce/fetch-graphql": "~1.0.0",
+    "@adobe-commerce/recaptcha": "~1.0.0",
+    "@adobe-commerce/storefront-design": "~1.0.0",
+    "@dropins/build-tools": "~1.0.0",
+    "preact": "~10.22.1",
+    "vite-plugin-banner": "^0.8.0"
+  },
+  "dependencies": {
+    "@adobe/elsie": "file:../../packages/elsie",
+    "@babel/core": "^7.24.9",
+    "@babel/preset-env": "^7.24.8",
+    "@babel/preset-typescript": "^7.24.7",
+    "@chromatic-com/storybook": "^1",
+    "@graphql-codegen/cli": "^5.0.0",
+    "@graphql-codegen/client-preset": "^4.1.0",
+    "@graphql-codegen/typescript-operations": "^4.0.1",
+    "@preact/preset-vite": "^2.8.2",
+    "@preact/signals": "^1.3.0",
+    "@storybook/addon-a11y": "^8.2.3",
+    "@storybook/addon-actions": "^8.2.3",
+    "@storybook/addon-coverage": "^1.0.1",
+    "@storybook/addon-essentials": "^8.2.3",
+    "@storybook/addon-interactions": "^8.2.3",
+    "@storybook/addon-links": "^8.2.3",
+    "@storybook/addon-webpack5-compiler-babel": "^3.0.3",
+    "@storybook/blocks": "^8.2.3",
+    "@storybook/manager-api": "^8.2.3",
+    "@storybook/preact": "^8.2.3",
+    "@storybook/preact-vite": "^8.2.3",
+    "@storybook/preact-webpack5": "^8.2.3",
+    "@storybook/storybook-deployer": "^2.8.16",
+    "@storybook/test": "^8.2.3",
+    "@storybook/test-runner": "^0.19.1",
+    "@storybook/theming": "^8.2.3",
+    "@svgr/webpack": "^8.1.0",
+    "@testing-library/jest-dom": "^6.4.6",
+    "@testing-library/preact": "^3.2.4",
+    "@types/css-modules": "^1.0.2",
+    "@types/jest": "^29.5.12",
+    "@types/preact-i18n": "^2.3.1",
+    "@typescript-eslint/eslint-plugin": "^5.32.0",
+    "@typescript-eslint/parser": "^5.32.0",
+    "axe-playwright": "^2.0.1",
+    "babel-jest": "^29.7.0",
+    "babel-loader": "^9.1.3",
+    "babel-plugin-tsconfig-paths": "^1.0.3",
+    "common-tags": "^1.8.2",
+    "concurrently": "^7.3.0",
+    "core-js": "^3.24.0",
+    "cssnano": "^6.0.1",
+    "deepmerge": "^4.2.2",
+    "detect-package-manager": "^3.0.2",
+    "dotenv": "^16.0.1",
+    "eslint": "^8.21.0",
+    "eslint-config-preact": "^1.3.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-mdx": "^2.1.0",
+    "eslint-plugin-storybook": "^0.8.0",
+    "glob": "^10.3.15",
+    "graphql": "^16.7.1",
+    "graphql-codegen-typescript-mock-data": "^3.5.0",
+    "graphql-config": "^5.0.2",
+    "jest": "^29.7.0",
+    "jest-preset-preact": "^4.1.1",
+    "optimize-plugin": "^1.3.1",
+    "postcss": "^8.4.39",
+    "preact-i18n": "2.4.0-preactx",
+    "preact-render-to-string": "^5.1.4",
+    "prettier": "^2.7.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "rimraf": "^3.0.2",
+    "rollup-plugin-visualizer": "^5.12.0",
+    "storybook": "^8.2.3",
+    "typescript": "^4.7.3",
+    "vite": "^5.2.10",
+    "vite-plugin-banner": "^0.8.0",
+    "vite-plugin-css-injected-by-js": "^3.5.1",
+    "vite-plugin-dts": "^3.9.1",
+    "vite-plugin-svgr": "^4.2.0",
+    "vite-tsconfig-paths": "^4.3.2",
+    "webpack": "^5.93.0",
+    "yargs": "^17.5.1"
+  }
+}

package/src/components/Accordion/Accordion.css

@@ -0,0 +1,79 @@
+/* https://cssguidelin.es/#bem-like-naming */
+
+.dropin-accordion-section__heading {
+  display: grid;
+  grid-template-columns: 1fr max-content;
+}
+
+.dropin-accordion-section p {
+  font: var(--type-body-1-default-font);
+  letter-spacing: var(--type-body-1-default-letter-spacing);
+  color: var(--color-neutral-700);
+  margin: 0;
+}
+
+.dropin-accordion-section__flex {
+  display: flex;
+  justify-content: space-between;
+  cursor: pointer;
+  align-items: center;
+}
+
+.dropin-accordion-section__title-container,
+.dropin-accordion-section__secondary-text-container {
+  display: flex;
+  gap: var(--spacing-xsmall);
+  align-items: center;
+}
+
+.dropin-accordion-section__secondary-text-container h4 {
+  margin: 0;
+}
+
+.dropin-accordion-section__title-container h3 {
+  margin: 0;
+}
+
+.dropin-accordion-section__title {
+  color: var(--color-neutral-800);
+  font: var(--type-body-1-strong-font);
+  letter-spacing: var(--type-body-1-strong-letter-spacing);
+  cursor: pointer;
+}
+
+.dropin-accordion-section__secondary-text {
+  color: var(--color-neutral-700);
+  font: var(--type-body-2-default-font);
+  letter-spacing: var(--type-body-1-default-letter-spacing);
+}
+
+.dropin-accordion-section__secondary-text a {
+  font: var(--type-body-2-strong-font);
+  letter-spacing: var(--type-body-2-strong-letter-spacing);
+}
+
+.dropin-accordion-section svg {
+  cursor: pointer;
+}
+
+.dropin-accordion-section__content-container {
+  display: grid;
+  margin: var(--spacing-medium) 0;
+  gap: var(--spacing-medium);
+}
+
+.dropin-accordion-section__content-container:empty {
+  margin: 0;
+}
+
+/* Medium (portrait tablets and large phones, 768px and up) */
+/* @media only screen and (min-width: 768px) { } */
+
+/* Large (landscape tablets, 1024px and up) */
+/* @media only screen and (min-width: 1024px) { } */
+
+/* XLarge (laptops/desktops, 1366px and up) */
+/* @media only screen and (min-width: 1366px) { } */
+
+/* XXlarge (large laptops and desktops, 1920px and up) */
+/* @media only screen and (min-width: 1920px) { } */