@adobe-commerce/elsie 1.0.0-alpha1

package/config/eslint.js

@@ -0,0 +1,103 @@
+module.exports = {
+  env: {
+    browser: true,
+  },
+  plugins: ['@typescript-eslint'],
+  extends: [
+    'preact',
+    'prettier',
+    'plugin:storybook/recommended',
+    'plugin:mdx/recommended',
+  ],
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: true,
+    },
+    ecmaVersion: 12,
+    sourceType: 'module',
+  },
+  settings: {
+    'mdx/code-blocks': true,
+  },
+  rules: {
+    '@typescript-eslint/no-unused-vars': [
+      'error',
+      {
+        argsIgnorePattern: '^_|^children$',
+      },
+    ],
+  },
+  overrides: [
+    {
+      files: ['*.mdx', '*.md'],
+      extends: ['plugin:mdx/overrides'],
+      rules: {
+        'react/self-closing-comp': 'off',
+      },
+    },
+    {
+      files: ['./src/**/*'],
+      rules: {
+        'no-restricted-imports': [
+          'error',
+          {
+            patterns: [
+              {
+                group: ['@adobe/elsie/src/*'],
+                message:
+                  'Please import from "@adobe/elsie" instead of "@adobe/elsie/src/*".',
+              },
+              {
+                group: ['@adobe/elsie/components/*'],
+                message:
+                  'Please use "@adobe/elsie/components" instead. Otherwise, the component will not be externalized and be included in your bundle instead.',
+              },
+              {
+                group: ['preact-i18n'],
+                message: 'Please use "@adobe/elsie/i18n" instead of "preact-i18n".',
+              },
+            ],
+          },
+        ],
+      },
+    },
+    {
+      files: ['./src/**/*'],
+      excludedFiles: ['./src/api/fetch-graphql/fetch-graphql.*'],
+      rules: {
+        'no-restricted-imports': [
+          'error',
+          {
+            patterns: [
+              {
+                group: ['@adobe/fetch-graphql'],
+                message:
+                  'Please use your project instance of fetch-graphql "@/<project>/api" instead of "@adobe/fetch-graphql".',
+              },
+            ],
+          },
+        ],
+      },
+    },
+    {
+      files: ['./src/**/*'],
+      excludedFiles: ['@preact/signals'],
+      rules: {
+        'no-restricted-imports': [
+          'error',
+          {
+            patterns: [
+              {
+                group: ['@preact/signals'],
+                message:
+                  'Please use "@adobe/elsie/lib/signals" instead of "@preact/signals".',
+              },
+            ],
+          },
+        ],
+      },
+    },
+  ],
+  ignorePatterns: ['node_modules/', 'dist/', 'src/__generated__/'],
+};

package/config/jest.js

@@ -0,0 +1,81 @@
+const path = require('path');
+
+const { compilerOptions } = require(path.resolve(
+  process.cwd(),
+  'tsconfig.json'
+));
+
+const paths = { ...compilerOptions.paths };
+
+module.exports = {
+  preset: 'jest-preset-preact',
+
+  prettierPath: null,
+
+  setupFiles: [
+    path.resolve(__dirname, '../tests/__mocks__/browserMocks.ts'),
+    path.resolve(__dirname, './setEnvVars.js'),
+  ],
+
+  collectCoverage: true,
+
+  collectCoverageFrom: [
+    './bin/**/*.{js,jsx,ts,tsx}',
+    './src/**/*.{js,jsx,ts,tsx}',
+    '!./src/**/*.stories.{js,jsx,ts,tsx}',
+    '!./src/**/*.stories.helpers.{js,jsx,ts,tsx}',
+  ],
+
+  moduleNameMapper: {
+    '\\.(css|less|scss|sass)$': 'identity-obj-proxy',
+    '\\.svg': '@adobe/elsie/__mocks__/svg.js',
+    '^@adobe/elsie/(.*)$': path.resolve(__dirname, '../src/$1'),
+
+    // generated mocks.ts uses relative path to types.ts
+    '^\\.{2}/types$': '<rootDir>/src/__generated__/types.ts',
+
+    // Map project's tsconfig.json paths
+    ...Object.entries(paths).reduce((acc, [key, value]) => {
+      const alias = key.replace(/\*$/, '');
+      const valueWithoutStar = value[0].replace(/\*$/, '');
+      const resolved = path.resolve(valueWithoutStar);
+      return { ...acc, [`^${alias}(.*)$`]: `${resolved}/$1` };
+    }, {}),
+  },
+
+  coverageThreshold: {
+    global: {
+      branches: 100,
+      functions: 100,
+      lines: 100,
+      statements: 100,
+    },
+  },
+
+  transform: {
+    '\\.[jt]sx?$': [
+      'babel-jest',
+      {
+        presets: [
+          [
+            '@babel/preset-env',
+            {
+              targets: {
+                esmodules: true,
+              },
+            },
+          ],
+          ['@babel/preset-typescript', { jsxPragma: 'h' }],
+        ],
+        plugins: [
+          ['babel-plugin-tsconfig-paths'],
+          ['@babel/transform-react-jsx', { runtime: 'automatic' }],
+        ],
+      },
+    ],
+  },
+
+  transformIgnorePatterns: [
+    '/node_modules/(?!(@adobe/elsie|@adobe/fetch-graphql|@adobe/event-bus|@adobe/recaptcha)/)',
+  ],
+};

package/config/prettier.js

@@ -0,0 +1,7 @@
+module.exports = {
+  tabWidth: 2,
+  useTabs: false,
+  singleQuote: true,
+  trailingComma: 'es5',
+  semi: true,
+};

package/config/setEnvVars.js

@@ -0,0 +1,5 @@
+// Used in the Price component to avoid using the system locale in tests, which can be different between computers
+process.env.LOCALE = "en-US"; 
+
+// Used mainly for the elsie generator to avoid issues with the system locale in tests
+process.env.LANG = "en_US.UTF-8";

package/config/storybook/addon.js

@@ -0,0 +1,121 @@
+const path = require('path');
+
+module.exports = {
+  managerWebpack: async (config) => {
+    return config;
+  },
+
+  managerBabel: async (config) => {
+    return config;
+  },
+
+  webpackFinal: async (config) => {
+    // Development Server
+    config.devServer = {
+      ...config.devServer,
+      headers: {
+        ...config.devServer?.headers,
+        'Access-Control-Allow-Origin': '*',
+        'Access-Control-Allow-Methods':
+          'GET, POST, PUT, DELETE, PATCH, OPTIONS',
+        'Access-Control-Allow-Headers':
+          'X-Requested-With, content-type, Authorization',
+      },
+    };
+
+    // this modifies the existing image rule to exclude .svg files
+    // since we want to handle those files with @svgr/webpack
+    const imageRule = config.module.rules.find((rule) =>
+      rule.test.test('.svg')
+    );
+
+    imageRule.exclude = /\.svg$/;
+
+    // configure .svg files to be loaded with @svgr/webpack fo ts/tsx files
+    config.module.rules.push({
+      test: /\.svg$/,
+      issuer: /\.tsx?$/,
+      loader: '@svgr/webpack',
+      options: {
+        svgoConfig: {
+          plugins: [
+            {
+              name: 'prefixIds',
+              params: {
+                prefixIds: false,
+                prefixClassNames: false,
+              },
+            },
+          ],
+        },
+      },
+    });
+
+    // configure .svg files to be loaded as static files for mdx files
+    config.module.rules.push({
+      test: /\.svg$/,
+      issuer: /\.mdx$/,
+      type: 'asset/resource',
+      generator: { filename: 'static/media/[path][name][ext]' },
+    });
+
+    // Modify the Babel configuration to include a rule for node_modules files
+    // that are not transpiled by default
+    config.module.rules.push({
+      test: /\.(mjs|tsx?|jsx?)$/,
+      loader: 'babel-loader',
+      exclude: {
+        and: [/node_modules/],
+        not: [/@adobe/],
+      },
+      options: {
+        presets: [
+          ['@babel/preset-env'],
+          ['@babel/preset-typescript', { jsxPragma: 'h' }],
+        ],
+        plugins: [
+          ['babel-plugin-tsconfig-paths'],
+          ['@babel/transform-react-jsx', { runtime: 'automatic' }],
+        ],
+      },
+    });
+
+    // Return the altered config
+    return config;
+  },
+
+  babel: async (config) => {
+    config.cacheDirectory = false;
+
+    config.presets = [
+      ['@babel/typescript', { jsxPragma: 'h' }],
+      ...(config.presets || []),
+    ];
+
+    config.plugins = [
+      ['babel-plugin-tsconfig-paths'],
+      ...(config.plugins || []),
+    ];
+
+    return config;
+  },
+
+  previewHead: (head) => {
+    return head;
+  },
+
+  previewAnnotations: (entry = []) => {
+    return [...entry, path.resolve(__dirname, './preview')];
+  },
+
+  managerEntries: (entry = []) => {
+    return [...entry, path.resolve(__dirname, './manager')];
+  },
+
+  docs: (docsConfig, { docs: docsMode }) => ({
+    ...docsConfig,
+    docsMode,
+    autodocs: 'tag',
+    defaultName: 'Overview',
+  }),
+};

package/config/storybook/components/FileTree/FileTree.jsx

@@ -0,0 +1,183 @@
+import { createContext, memo, useCallback, useContext, useState } from 'react';
+
+const ctx = createContext(0);
+
+function useIndent() {
+  return useContext(ctx);
+}
+
+const Tree = ({ children }) => (
+  <div
+    style={{
+      marginTop: '0.5rem',
+      userSelect: 'none',
+      fontSize: '14px',
+      color: '#333333',
+    }}
+  >
+    <div
+      style={{
+        display: 'inline-flex',
+        flexDirection: 'column',
+        borderRadius: '0.375rem',
+        border: '1px solid',
+        padding: '0.5rem 1rem 0.5rem .25rem',
+        borderColor: 'rgb(229, 231, 235)',
+      }}
+    >
+      {children}
+    </div>
+  </div>
+);
+
+function Indent() {
+  const indent = useIndent();
+
+  return (
+    <>
+      {[...Array(indent)].map((_, i) => (
+        <span style={{ display: 'inline-block', width: '0' }} key={i} />
+      ))}
+    </>
+  );
+}
+
+const Folder = memo(
+  ({
+    label,
+    name,
+    description = null,
+    open,
+    children,
+    defaultOpen = false,
+    onToggle,
+  }) => {
+    const indent = useIndent();
+    const [isOpen, setIsOpen] = useState(defaultOpen);
+
+    const toggle = useCallback(() => {
+      onToggle?.(!isOpen);
+      setIsOpen(!isOpen);
+    }, [isOpen, onToggle]);
+
+    const isFolderOpen = open === undefined ? isOpen : open;
+
+    return (
+      <li
+        style={{
+          display: 'flex',
+          listStyleType: 'none',
+          flexDirection: 'column',
+        }}
+      >
+        <a
+          onClick={toggle}
+          title={name}
+          style={{
+            display: 'inline-flex',
+            cursor: 'pointer',
+            alignItems: 'center',
+            padding: '0',
+            fontSize: '0.875rem',
+            color: '#333333',
+            textDecoration: 'none',
+            backgroundColor: 'transparent',
+            border: 'none',
+            outline: 'none',
+            transition: 'opacity 0.2s ease-in-out',
+          }}
+        >
+          <Indent />
+          <svg
+            width="1.5em"
+            height="1.5em"
+            viewBox="0 0 24 24"
+            style={{
+              marginLeft: '0.25rem',
+              marginRight: '0',
+              fill: 'none',
+              stroke: 'currentColor',
+              strokeLinecap: 'round',
+              strokeLinejoin: 'round',
+              strokeWidth: 1,
+            }}
+          >
+            <path
+              d={
+                isFolderOpen
+                  ? 'M5 19a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h4l2 2h4a2 2 0 0 1 2 2v1M5 19h14a2 2 0 0 0 2-2v-5a2 2 0 0 0-2-2H9a2 2 0 0 0-2 2v5a2 2 0 0 1-2 2Z'
+                  : 'M3 7v10a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-6l-2-2H5a2 2 0 0 0-2 2Z'
+              }
+            />
+          </svg>
+          <span style={{ marginLeft: '0.25rem', fontSize: '14px' }}>
+            {label ?? name} {description}
+          </span>
+        </a>
+        {isFolderOpen && (
+          <ul
+            style={{
+              paddingLeft: '1.25rem',
+              marginTop: 'auto',
+              marginBottom: 'auto',
+            }}
+          >
+            <ctx.Provider value={indent + 1}>{children}</ctx.Provider>
+          </ul>
+        )}
+      </li>
+    );
+  }
+);
+Folder.displayName = 'Folder';
+
+const File = memo(({ label, name, description }) => (
+  <li
+    style={{ display: 'flex', listStyleType: 'none', flexDirection: 'column' }}
+  >
+    <a
+      style={{
+        display: 'inline-flex',
+        cursor: 'default',
+        alignItems: 'center',
+        padding: '0 0 0 .25rem',
+        fontSize: '0.875rem',
+        color: '#333333',
+        textDecoration: 'none',
+        backgroundColor: 'transparent',
+        border: 'none',
+        outline: 'none',
+      }}
+    >
+      <Indent />
+      <svg
+        width="1.3em"
+        height="1.3em"
+        viewBox="0 0 24 24"
+        style={{
+          marginLeft: '0',
+          marginRight: '0',
+          fill: 'none',
+          stroke: 'currentcolor',
+          strokeLinecap: 'round',
+          strokeLinejoin: 'round',
+          strokeWidth: 1,
+        }}
+      >
+        <path d="M9 12h6m-6 4h6m2 5H7a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5.586a1 1 0 0 1 .707.293l5.414 5.414a1 1 0 0 1 .293.707V19a2 2 0 0 1-2 2Z" />
+      </svg>
+      <span
+        style={{
+          marginLeft: '0.25rem',
+          marginBottom: '-1px',
+          fontSize: '14px',
+        }}
+      >
+        {label ?? name} {description}
+      </span>
+    </a>
+  </li>
+));
+File.displayName = 'File';
+
+export const FileTree = Object.assign(Tree, { Folder, File });

package/config/storybook/components/FileTree/index.js

@@ -0,0 +1 @@
+export * from '@adobe/elsie/config/storybook/components/FileTree/FileTree';

package/config/storybook/components/Flex/Flex.jsx

@@ -0,0 +1,12 @@
+import styles from './Flex.module.css';
+
+export function Flex({ direction = 'row', itemsPerRow = 2, children }) {
+  const gaps = itemsPerRow - 1;
+  const root = document.documentElement;
+
+  root.style.setProperty('--flex-direction', direction);
+  root.style.setProperty('--items-per-row', itemsPerRow);
+  root.style.setProperty('--number-of-gaps', gaps);
+
+  return <div className={`${styles.flexItems}`}>{children}</div>;
+}

package/config/storybook/components/Flex/Flex.module.css

@@ -0,0 +1,20 @@
+:root {
+  --flex-direction: row;
+  --items-per-row: 2;
+  --number-of-gaps: 0;
+}
+
+.flexItems {
+  display: flex;
+  flex-direction: var(--flex-direction);
+  flex-wrap: wrap;
+  gap: 1rem;
+  margin-top: 2rem;
+}
+
+div.flexItems > * {
+  flex-basis: calc(
+    (100% / var(--items-per-row)) -
+      ((var(--number-of-gaps) * 16px + 0px) / var(--items-per-row))
+  );
+}

package/config/storybook/components/Flex/index.js

@@ -0,0 +1 @@
+export * from '@adobe/elsie/config/storybook/components/Flex/Flex';

package/config/storybook/components/OptionsTable/OptionsTable.jsx

@@ -0,0 +1,79 @@
+import React from 'react';
+import styles from './OptionsTable.module.css';
+
+export function OptionsTable({ options, compact = false }) {
+  const [headers, ...rows] = options;
+
+  const cellClassName = compact ? styles.compactCell : styles.cell;
+
+  const newHeaders = headers.map((header) => {
+    const isCodeHeader = header.endsWith('(code)');
+    const headerText = isCodeHeader ? header.replace('(code)', '') : header;
+    const minWidthMatch = headerText.match(/\d+px/);
+    const minWidth = minWidthMatch ? minWidthMatch[0] : null;
+    const newHeaderText = minWidth
+      ? headerText.replace(minWidth, '')
+      : headerText;
+
+    return {
+      text: newHeaderText,
+      minWidth: minWidth,
+    };
+  });
+
+  const newRows = rows.map((row) => {
+    if (row.length === 0) {
+      return [' ', ' ', ' ', ' '];
+    } else {
+      return row;
+    }
+  });
+
+  return (
+    <div className={styles.optionsTable}>
+      <table className={styles.table}>
+        <thead className={styles.tableHeader}>
+          <tr className={styles.headerRow}>
+            {newHeaders.map((header, index) => {
+              const isCodeHeader = headers[index].endsWith('(code)');
+              let headerClassName = styles.headerCell;
+              if (header.minWidth) {
+                headerClassName += ` ${styles.minWidth}`;
+              }
+
+              return (
+                <th
+                  key={headers[index]}
+                  className={headerClassName}
+                  style={{ minWidth: header.minWidth }}
+                >
+                  {header.text}
+                </th>
+              );
+            })}
+          </tr>
+        </thead>
+        <tbody className={styles.body}>
+          {newRows.map((row, rowIndex) => (
+            <tr key={rowIndex}>
+              {row.map((cell, index) => {
+                const isCodeCell = headers[index].endsWith('(code)');
+                let cellClassNameOverride = isCodeCell
+                  ? compact
+                    ? styles.compactCodeCell
+                    : styles.codeCell
+                  : cellClassName;
+
+                return (
+                  <td key={index} className={cellClassNameOverride}>
+                    {cell}
+                  </td>
+                );
+              })}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}