@adobe-commerce/elsie 1.0.0-alpha04071347

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

@@ -0,0 +1,88 @@
+/********************************************************************
+ *  Copyright 2024 Adobe
+ *  All Rights Reserved.
+ *
+ * NOTICE:  Adobe permits you to use, modify, and distribute this 
+ * file in accordance with the terms of the Adobe license agreement 
+ * accompanying it. 
+ *******************************************************************/
+
+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>
+  );
+}

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

@@ -0,0 +1,104 @@
+/********************************************************************
+ *  Copyright 2024 Adobe
+ *  All Rights Reserved.
+ *
+ * NOTICE:  Adobe permits you to use, modify, and distribute this 
+ * file in accordance with the terms of the Adobe license agreement 
+ * accompanying it. 
+ *******************************************************************/
+
+.optionsTable {
+  margin-left: -1.25rem;
+  margin-right: -1.25rem;
+  margin-bottom: 1rem;
+  margin-top: 1.5rem;
+  overflow-x: auto;
+  overscroll-behavior-x: contain;
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
+  padding-bottom: 1rem;
+  mask-image: linear-gradient(
+    transparent 0.8em,
+    white 1.5em,
+    white calc(100% - 1.5em),
+    transparent calc(100% - 0.8em)
+  );
+}
+
+.optionsTable::-webkit-scrollbar {
+  width: 0;
+}
+
+.table {
+  border-collapse: collapse;
+  font-size: 0.9rem;
+  line-height: 1.25rem;
+  width: 100%;
+}
+
+.tableHeader {
+  border-top: 0 none transparent;
+  border-bottom: 1px solid rgb(220, 220, 220);
+  padding: 1rem 0;
+  text-align: left;
+}
+
+.headerRow {
+  border-top: 0 none transparent;
+  border-bottom: 1px solid rgb(220, 220, 220);
+  padding: 1rem 0;
+  text-align: left;
+}
+
+.headerCell {
+  border: none;
+  padding: 0.5rem 0;
+  font-weight: 600;
+  color: #222;
+}
+
+.body {
+  vertical-align: baseline;
+  color: rgb(17 24 39);
+}
+
+.row {
+  border-bottom: 1px solid rgb(135, 29, 29);
+}
+
+.cell {
+  padding: 0.5rem 0 0.5rem 0;
+  line-height: 1.5rem;
+  font-family: inherit;
+  border-bottom: 1px solid rgb(220, 220, 220);
+}
+
+.codeCell {
+  border: none;
+  white-space: pre;
+  padding: 0.5rem 0 0.5rem 0;
+  line-height: 1.5rem;
+  font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;
+  font-size: 0.75rem;
+  color: rgb(0, 93, 160);
+  border-bottom: 1px solid rgb(220, 220, 220);
+}
+
+.compactCell {
+  padding: 0;
+  border: none;
+  line-height: 1.5rem;
+  font-family: inherit;
+  border-bottom: 1px solid rgb(220, 220, 220);
+}
+
+.compactCodeCell {
+  border: none;
+  white-space: pre;
+  padding: 0;
+  line-height: 1.5rem;
+  font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;
+  font-size: 0.75rem;
+  color: rgb(0, 93, 160);
+  border-bottom: 1px solid rgb(220, 220, 220);
+}

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

@@ -0,0 +1,10 @@
+/********************************************************************
+ *  Copyright 2024 Adobe
+ *  All Rights Reserved.
+ *
+ * NOTICE:  Adobe permits you to use, modify, and distribute this 
+ * file in accordance with the terms of the Adobe license agreement 
+ * accompanying it. 
+ *******************************************************************/
+
+export * from '@adobe-commerce/elsie/config/storybook/components/OptionsTable/OptionsTable';

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

@@ -0,0 +1,56 @@
+/********************************************************************
+ *  Copyright 2024 Adobe
+ *  All Rights Reserved.
+ *
+ * NOTICE:  Adobe permits you to use, modify, and distribute this 
+ * file in accordance with the terms of the Adobe license agreement 
+ * accompanying it. 
+ *******************************************************************/
+
+.panel {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  border: 1px solid #d5d5d5;
+  border-radius: 0.25rem;
+  padding: 1rem;
+  width: 100%;
+}
+
+.panelHeader {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #f5f5f5;
+  width: 100%;
+  height: 100%;
+  min-height: 130px;
+}
+
+.panelHeader img {
+  object-fit: cover;
+  width: 100%;
+  height: 100%;
+}
+
+.panelContent {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+}
+
+.panelContent h3 {
+  margin: 1rem 0 0 0;
+}
+
+.panelFooter {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  width: 100%;
+}
+
+.panelFooter p:last-child {
+  margin: 0;
+}

package/config/storybook/components/Panel/Panel.tsx

@@ -0,0 +1,46 @@
+/********************************************************************
+ *  Copyright 2024 Adobe
+ *  All Rights Reserved.
+ *
+ * NOTICE:  Adobe permits you to use, modify, and distribute this 
+ * file in accordance with the terms of the Adobe license agreement 
+ * accompanying it. 
+ *******************************************************************/
+
+import { FunctionComponent, toChildArray } from 'preact';
+import { HTMLAttributes } from 'preact/compat';
+import styles from './Panel.module.css';
+
+export interface PanelProps extends HTMLAttributes<HTMLDivElement> {
+  header?: boolean;
+  footer?: boolean;
+}
+
+export const Panel: FunctionComponent<PanelProps> = ({
+  header,
+  footer,
+  children,
+}) => {
+  const hasHeader = Boolean(header);
+  const hasFooter = Boolean(footer);
+  const childrenArray = toChildArray(children);
+  const firstChild = childrenArray[0];
+  const lastChild = childrenArray.slice(-1)[0];
+
+  const content =
+    hasHeader && !hasFooter
+      ? childrenArray.slice(1)
+      : !hasHeader && hasFooter
+      ? childrenArray.slice(0, -1)
+      : hasHeader && hasFooter
+      ? childrenArray.slice(1, -1)
+      : childrenArray;
+
+  return (
+    <div className={`${styles.panel}`}>
+      {hasHeader && <div className={styles.panelHeader}>{firstChild}</div>}
+      <div className={styles.panelContent}>{content}</div>
+      {hasFooter && <div className={styles.panelFooter}>{lastChild}</div>}
+    </div>
+  );
+};

package/config/storybook/components/Panel/index.ts

@@ -0,0 +1,10 @@
+/********************************************************************
+ *  Copyright 2024 Adobe
+ *  All Rights Reserved.
+ *
+ * NOTICE:  Adobe permits you to use, modify, and distribute this 
+ * file in accordance with the terms of the Adobe license agreement 
+ * accompanying it. 
+ *******************************************************************/
+
+export * from '@adobe-commerce/elsie/config/storybook/components/Panel/Panel';

package/config/storybook/components/Screenshot/Screenshot.jsx

@@ -0,0 +1,23 @@
+/********************************************************************
+ *  Copyright 2024 Adobe
+ *  All Rights Reserved.
+ *
+ * NOTICE:  Adobe permits you to use, modify, and distribute this 
+ * file in accordance with the terms of the Adobe license agreement 
+ * accompanying it. 
+ *******************************************************************/
+
+import styles from './Screenshot.module.css';
+
+export function Screenshot({ src, alt }) {
+  const image = {
+    src,
+    alt,
+  };
+
+  return (
+    <div className={styles.screenshotContainer}>
+      <img src={image.src} alt={image.alt} className={styles.image} />
+    </div>
+  );
+}

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

@@ -0,0 +1,28 @@
+/********************************************************************
+ *  Copyright 2024 Adobe
+ *  All Rights Reserved.
+ *
+ * NOTICE:  Adobe permits you to use, modify, and distribute this 
+ * file in accordance with the terms of the Adobe license agreement 
+ * accompanying it. 
+ *******************************************************************/
+
+.screenshotContainer {
+  margin-bottom: 24px;
+  margin-top: 6px;
+  display: flex;
+  justify-content: center;
+  overflow: hidden;
+  border-radius: 0.5rem;
+  border: 1px solid rgb(234, 237, 242);
+  background-color: rgb(250, 250, 252);
+}
+
+.image {
+  user-select: none;
+  background-color: white;
+  outline-width: 1px;
+  outline-color: rgb(156, 163, 175);
+  width: 100%;
+  object-fit: cover;
+}

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

@@ -0,0 +1,10 @@
+/********************************************************************
+ *  Copyright 2024 Adobe
+ *  All Rights Reserved.
+ *
+ * NOTICE:  Adobe permits you to use, modify, and distribute this 
+ * file in accordance with the terms of the Adobe license agreement 
+ * accompanying it. 
+ *******************************************************************/
+
+export * from '@adobe-commerce/elsie/config/storybook/components/Screenshot/Screenshot';

package/config/storybook/components/Steps/Steps.jsx

@@ -0,0 +1,21 @@
+/********************************************************************
+ *  Copyright 2024 Adobe
+ *  All Rights Reserved.
+ *
+ * NOTICE:  Adobe permits you to use, modify, and distribute this 
+ * file in accordance with the terms of the Adobe license agreement 
+ * accompanying it. 
+ *******************************************************************/
+
+import { Unstyled } from '@storybook/blocks';
+import styles from './Steps.module.css';
+
+export function Steps({ children }) {
+  return (
+    <Unstyled>
+      <div className={`${styles.stepsContainer} ${styles.steps}`}>
+        {children}
+      </div>
+    </Unstyled>
+  );
+}

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

@@ -0,0 +1,43 @@
+/********************************************************************
+ *  Copyright 2024 Adobe
+ *  All Rights Reserved.
+ *
+ * NOTICE:  Adobe permits you to use, modify, and distribute this 
+ * file in accordance with the terms of the Adobe license agreement 
+ * accompanying it. 
+ *******************************************************************/
+
+.stepsContainer {
+  counter-reset: step;
+  padding-left: 1.5rem;
+  margin-left: 0.75rem !important;
+  margin-bottom: 3rem;
+  border-left: 1px solid rgba(229, 231, 235);
+  overflow-wrap: break-word;
+  /* border-color: rgba(229,231,235);
+  border-left-width: 1px; */
+}
+
+.steps h3 {
+  counter-increment: step;
+  color: rgba(15, 23, 42);
+  letter-spacing: -0.015em;
+  margin: 2rem 0 0 0;
+}
+
+.steps h3::before {
+  display: inline-block;
+  border: 6px solid;
+  border-color: rgba(255, 255, 255);
+  background-color: rgba(243, 244, 246);
+  text-align: center;
+  color: rgba(122, 122, 122);
+  content: counter(step);
+  border-radius: 9999px;
+  margin: 0 0 0 -44px;
+  font-size: 1rem;
+  font-weight: 400;
+  height: 26px;
+  width: 26px;
+  line-height: 1.5rem;
+}

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

@@ -0,0 +1,10 @@
+/********************************************************************
+ *  Copyright 2024 Adobe
+ *  All Rights Reserved.
+ *
+ * NOTICE:  Adobe permits you to use, modify, and distribute this 
+ * file in accordance with the terms of the Adobe license agreement 
+ * accompanying it. 
+ *******************************************************************/
+
+export * from '@adobe-commerce/elsie/config/storybook/components/Steps/Steps';

package/config/storybook/components/StoryWrapper/StoryWrapper.jsx

@@ -0,0 +1,18 @@
+/********************************************************************
+ *  Copyright 2024 Adobe
+ *  All Rights Reserved.
+ *
+ * NOTICE:  Adobe permits you to use, modify, and distribute this 
+ * file in accordance with the terms of the Adobe license agreement 
+ * accompanying it. 
+ *******************************************************************/
+
+import styles from './StoryWrapper.module.css';
+
+export function StoryWrapper({ direction = 'row', children }) {
+  const root = document.documentElement;
+
+  root.style.setProperty('--flex-direction', direction);
+
+  return <div className={`${styles.flexItems}`}>{children}</div>;
+}

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

@@ -0,0 +1,22 @@
+/********************************************************************
+ *  Copyright 2024 Adobe
+ *  All Rights Reserved.
+ *
+ * NOTICE:  Adobe permits you to use, modify, and distribute this 
+ * file in accordance with the terms of the Adobe license agreement 
+ * accompanying it. 
+ *******************************************************************/
+
+:root {
+  --flex-direction: row;
+}
+
+.flexItems {
+  display: flex;
+  flex-direction: var(--flex-direction);
+  gap: 2rem;
+  margin-top: 1rem;
+  margin-bottom: 0;
+  background-color: #f5f5f5;
+  padding: 1rem;
+}

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

@@ -0,0 +1,10 @@
+/********************************************************************
+ *  Copyright 2024 Adobe
+ *  All Rights Reserved.
+ *
+ * NOTICE:  Adobe permits you to use, modify, and distribute this 
+ * file in accordance with the terms of the Adobe license agreement 
+ * accompanying it. 
+ *******************************************************************/
+
+export * from '@adobe-commerce/elsie/config/storybook/components/StoryWrapper/StoryWrapper';

package/config/storybook/components/Summary/Summary.jsx

@@ -0,0 +1,19 @@
+/********************************************************************
+ *  Copyright 2024 Adobe
+ *  All Rights Reserved.
+ *
+ * NOTICE:  Adobe permits you to use, modify, and distribute this 
+ * file in accordance with the terms of the Adobe license agreement 
+ * accompanying it. 
+ *******************************************************************/
+
+import { Unstyled } from '@storybook/blocks';
+import styles from './Summary.module.css';
+
+export function Summary({ children }) {
+  return (
+    <Unstyled>
+      <div className={`${styles.summary}`}>{children}</div>
+    </Unstyled>
+  );
+}

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

@@ -0,0 +1,20 @@
+/********************************************************************
+ *  Copyright 2024 Adobe
+ *  All Rights Reserved.
+ *
+ * NOTICE:  Adobe permits you to use, modify, and distribute this 
+ * file in accordance with the terms of the Adobe license agreement 
+ * accompanying it. 
+ *******************************************************************/
+
+div.summary {
+  font-weight: 400;
+  margin: 0 0 1rem 0;
+  color: #6d6d6d;
+  font-size: 1.3rem;
+  line-height: 1.8rem;
+}
+
+div.summary strong {
+  color: #222222;
+}

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

@@ -0,0 +1,10 @@
+/********************************************************************
+ *  Copyright 2024 Adobe
+ *  All Rights Reserved.
+ *
+ * NOTICE:  Adobe permits you to use, modify, and distribute this 
+ * file in accordance with the terms of the Adobe license agreement 
+ * accompanying it. 
+ *******************************************************************/
+
+export * from '@adobe-commerce/elsie/config/storybook/components/Summary/Summary';

package/config/storybook/components/Variants/Variants.js

@@ -0,0 +1,57 @@
+/********************************************************************
+ *  Copyright 2024 Adobe
+ *  All Rights Reserved.
+ *
+ * NOTICE:  Adobe permits you to use, modify, and distribute this 
+ * file in accordance with the terms of the Adobe license agreement 
+ * accompanying it. 
+ *******************************************************************/
+
+import { useState } from 'preact/hooks';
+import { useOf, Story, Source } from '@storybook/blocks';
+import './docs.css';
+
+export const Variants = ({ of, storyOrder = [] }) => {
+  const info = useOf(of || 'story', ['story', 'meta', 'component']);
+  const stories = Object.values(info.csfFile.stories).map(
+    (story) => story.moduleExport
+  );
+  const [bgColor, setBgColor] = useState('#F5F5F5');
+  const toggleBgColor = () => {
+    setBgColor((prevColor) =>
+      prevColor === '#F5F5F5' ? '#222222' : '#F5F5F5'
+    );
+  };
+
+  // Sort stories by custom order
+  const sortedStories = Object.values(stories).sort((a, b) => {
+    const indexA = storyOrder.indexOf(a);
+    const indexB = storyOrder.indexOf(b);
+    if (indexA === -1 || indexB === -1) {
+      return 0; // do not change order if story name is not in customOrder
+    }
+    return indexA - indexB;
+  });
+
+  return (
+    <div>
+      <button onClick={toggleBgColor}>Toggle Background Color</button>
+      <div className="stories">
+        {sortedStories.map((story, index) => (
+          <div key={index} className="story">
+            <div className="story__item story__item--left">
+              <h3 className="docs__header3">{story.name}</h3>
+              <p className="docs__paragraph">
+                {story.parameters.docs.description || `Add description to ${story.name}.stories.tsx.`}
+              </p>
+            </div>
+            <div className="story__item story__item--right" style={{ backgroundColor: bgColor }}>
+              <Story of={story} />
+              <Source of={story} />
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};

package/config/storybook/components/Variants/docs.css

@@ -0,0 +1,48 @@
+/********************************************************************
+ *  Copyright 2024 Adobe
+ *  All Rights Reserved.
+ *
+ * NOTICE:  Adobe permits you to use, modify, and distribute this 
+ * file in accordance with the terms of the Adobe license agreement 
+ * accompanying it. 
+ *******************************************************************/
+
+.stories {
+  display: flex;
+  flex-direction: column;
+}
+
+.stories .story {
+  display: flex;
+  flex-direction: row;
+  border: 1px solid #ddd;
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+
+.story__item {
+  min-height: 0;
+}
+
+.story__item--left {
+  display: flex;
+  flex-direction: column;
+  padding: 1rem;
+  flex-basis: 30%;
+}
+
+.story__item--right {
+  display: flex;
+  flex-direction: column;
+  padding: 1rem;
+  flex-basis: 70%;
+}
+
+.stories .docs__header3.docs__header3 {
+  margin-top: 4px;
+}
+
+.stories .docs__paragraph.docs__paragraph {
+  margin-top: 0;
+  font-size: 1rem;
+}

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

@@ -0,0 +1,10 @@
+/********************************************************************
+ *  Copyright 2024 Adobe
+ *  All Rights Reserved.
+ *
+ * NOTICE:  Adobe permits you to use, modify, and distribute this 
+ * file in accordance with the terms of the Adobe license agreement 
+ * accompanying it. 
+ *******************************************************************/
+
+export * from '@adobe-commerce/elsie/config/storybook/components/Variants/Variants';