@orangesk/orange-design-system 2.0.0-alpha.2 → 2.0.0-alpha.3

package/src/components/Preview/Interact/helpers.ts

@@ -0,0 +1,60 @@
+/**
+ * Cleanup docgen prop value of string which has this form:
+ * "'string'" and converts it to "string"
+ */
+export const cleanValue = (s: any): any =>
+  typeof s === 'string' ? s.replace(/(^['"]|['"]$)/g, '') : s;
+
+/**
+ * Get docgen props of component
+ * if it's an html element we parse just first level of text to be editable
+ * if it's just a string we create docgen type of string
+ */
+export const getDocgenProps = (component: any): Record<string, any> => {
+  const componentType = component.type;
+
+  if (typeof componentType === 'function') {
+    if (componentType.__docgenInfo) {
+      return componentType.__docgenInfo.props;
+    }
+  } else if (typeof componentType === 'string') {
+    const props = component.props;
+    return Object.keys(props).reduce(
+      (acc: Record<string, any>, curr: string) => ({
+        ...acc,
+        [curr]: {
+          type: {
+            name: typeof props[curr],
+            value: props[curr],
+          },
+        },
+      }),
+      {}
+    );
+  }
+
+  return {
+    children: {
+      type: {
+        name: typeof component,
+        value: component,
+      },
+    },
+  };
+};
+
+/**
+ * parse displayName of component or create custom name
+ */
+export const getDisplayName = (component: any): string =>
+  (component.type && component.type.displayName) ||
+  (typeof component === 'string'
+    ? 'PlainText'
+    : typeof component.type === 'string'
+    ? component.type
+    : 'NoDisplayName');
+
+/**
+ * Helper function for comparision
+ */
+export const is = (value: any, type: any): boolean => value === type; 

package/src/components/Preview/Interact/state.ts

@@ -0,0 +1,18 @@
+import { createContext } from 'react';
+
+interface InteractContextType {
+  liveProps: Record<string, any>;
+  showProps: boolean;
+  docgenProps: Record<string, any>;
+  setDeepState: (propName: string, value: any) => void;
+  handleShowProps: (e: React.MouseEvent) => void;
+  handleInputChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  handleCheckboxChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  handleSelectChange: (event: React.ChangeEvent<HTMLSelectElement>) => void;
+  isDefaultValue: (propName: string) => boolean;
+  getDefaultValue: (docgen: any) => any;
+}
+
+const InteractContext = createContext<InteractContextType | undefined>(undefined);
+
+export default InteractContext; 

package/src/components/Preview/Preview.docs.mdx

@@ -0,0 +1,153 @@
+import { Preview, ComponentDocs, CodeJSX } from './../';
+import PreviewForDocs from './Preview';
+import InteractForDOcs from './Interact/Interact';
+import { Bar, BarItem } from './../Bar';
+
+# Preview
+
+Preview component is dedicated to displaing other components with code preview and colored backgrounds.
+
+## Variants
+
+### Default
+
+<Preview code={<Preview>Default preview</Preview>}>Default preview</Preview>
+
+### Different default background color
+
+<Preview
+  bgTheme="dark"
+  code={<Preview bgTheme="dark">Preview with `dark` background color</Preview>}
+>
+  Preview with <CodeJSX>dark</CodeJSX> background color
+</Preview>
+
+### Disable colors in background color chooser
+
+<Preview
+  bgThemeExcludedColors={['accent']}
+  code={
+    <Preview bgThemeExcludedColors={['accent']}>
+      `accent` background color is not available
+    </Preview>
+  }
+>
+  <CodeJSX>accent</CodeJSX> background color is not available
+</Preview>
+
+### Disable background color chooser
+
+<Preview
+  bgTheme={false}
+  code={`<Preview bgTheme={false}>
+  Disabled background color chooser.
+</Preview>`}
+>
+  Disabled background color chooser
+</Preview>
+
+### Adapt to current background color
+
+<Preview
+  code={`<Preview>
+  {({ bgTheme, bgThemeValue }) => (/*...*/)}
+</Preview>`}
+>
+  {({ bgTheme, bgThemeValue }) => (
+    <React.Fragment>
+      Current background is <CodeJSX>{`${bgTheme} (${bgThemeValue})`}</CodeJSX>
+    </React.Fragment>
+  )}
+</Preview>
+
+### Disable code preview
+
+<Preview hasCodePreview={false}>
+  Pass <CodeJSX>hasCodePreview=&#123;false&#125;</CodeJSX> prop to{' '}
+  <CodeJSX>Preview</CodeJSX>
+</Preview>
+
+### Custom code in show code
+
+<Preview
+  code={
+    <Preview code={<div>This is custom code preview of component</div>}>
+      Different code output will be shown in code preview
+    </Preview>
+  }
+>
+  Different code output will be shown in code preview
+</Preview>
+
+### Code JSX options
+
+Library
+[react-element-to-jsx-string](https://github.com/algolia/react-element-to-jsx-string)
+is used to generate JSX in code example. To overide options of this library, use
+`codeJSXOptions`. This can be usefull to filter some props code preview.
+
+<Preview
+  codeJSXOptions={{ filterProps: ['key'] }}
+  code={
+    <Preview codeJSXOptions={{ filterProps: ['key'] }}>
+      <div key={"key won't show at code example"}>
+        This component has key, but code example hides it
+      </div>
+    </Preview>
+  }
+>
+  <div key={"key won't show at code example"}>
+    This component has key, but code example hides it
+  </div>
+</Preview>
+
+### Code example types
+
+If you need to adjust visible code example types use `codeTypes` property.
+
+<Preview 
+  code={
+    <Preview codeTypes={['html', 'jsx']}>
+      <p>
+        This preview has html as a main code example type
+      </p>
+    </Preview>
+  } 
+  codeTypes={['html', 'jsx']}>
+  <p>
+    This preview has html as a main code example type
+  </p>
+</Preview>
+
+### Preview HTML string
+
+<Preview
+  code={
+    <Preview
+      html={`
+<div class='html'>
+  <div>This is HTML string</div>
+</div>
+`}
+    />
+  }
+>
+  This is HTML string
+</Preview>
+
+### Preview interactiveProps
+
+`interactiveProps` are used as a pipe for sending special props to Interactive elements renderer.
+
+Every component in the `Preview` gets their own Interactive component to `render`.  
+`render` prop is prefilled with parsed component from `Preview`.  
+`filterProps` is set of values that ensures, that user cannot edit these props interactively.  
+`skipChildren` is used to make just the parent element interactive not the children elements.
+
+## Props
+
+<ComponentDocs title="<Preview />" component={PreviewForDocs} />
+
+## Props for interactive component
+
+<ComponentDocs title="<Interact />" component={InteractForDOcs} />

package/src/components/Preview/Preview.test.js

@@ -0,0 +1,66 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+
+import Preview from '.';
+
+describe('rendering', () => {
+  it('Preview', () => {
+    const { getByText } = render(<Preview>Preview</Preview>);
+    expect(getByText('Preview')).toBeInTheDocument();
+  });
+
+  it('HTML preview renders more than 1 child', () => {
+    const { getByText, getByTestId } = render(
+      <Preview>
+        <p>Paragraph 1</p>
+        <p>Paragraph 2</p>
+      </Preview>
+    );
+
+    fireEvent.click(getByText('SHOW CODE'));
+
+    fireEvent.click(getByText('HTML'));
+
+    expect(getByTestId('html')).toBeInTheDocument();
+  });
+
+  it('at least one tab is rendered by default', () => {
+    const { queryAllByTestId, getByText } = render(<Preview>preview</Preview>);
+
+    fireEvent.click(getByText('SHOW CODE'));
+
+    const toggleButtons = queryAllByTestId('code-type-toggle');
+
+    expect(toggleButtons).not.toHaveLength(0);
+  });
+
+  it('order of tabs is same as order of codeTypes', () => {
+    const codeTypes = ['html', 'jsx'];
+
+    const { queryAllByTestId, getByText } = render(
+      <Preview codeTypes={codeTypes}>preview</Preview>
+    );
+
+    fireEvent.click(getByText('SHOW CODE'));
+
+    const toggleButtons = queryAllByTestId('code-type-toggle');
+
+    const buttonTypesArray = toggleButtons.map(button =>
+      button?.innerHTML?.toLowerCase()
+    );
+
+    expect(buttonTypesArray).toEqual(codeTypes);
+  });
+
+  it('render only one tab when html property is set', () => {
+    const { queryAllByTestId, getByText } = render(
+      <Preview html={`<div>preview</div>`}>preview</Preview>
+    );
+
+    fireEvent.click(getByText('SHOW CODE'));
+
+    const toggleButtons = queryAllByTestId('code-type-toggle');
+
+    expect(toggleButtons).toHaveLength(1);
+  });
+});

package/src/components/Preview/Preview.tsx

@@ -0,0 +1,273 @@
+import React, { useState, ReactNode, FunctionComponent } from "react";
+import cx from "classnames";
+
+import PreviewTitleBar from "./PreviewTitleBar";
+import CodeExample from "./CodeExample";
+import Interact from "./Interact/Interact";
+
+import { Card } from "./../Card";
+import { Icon } from "./../Icon";
+import { Button } from "./../Button";
+import { Dropdown, DropdownItem } from "./../Dropdown";
+
+import "./styles/style.scss";
+
+const CLASS_ROOT = "preview";
+
+interface PreviewBackground {
+  value: string;
+  label: string;
+}
+
+interface PreviewProps {
+  bgTheme?: string | boolean;
+  bgThemeColors?: Record<string, string>;
+  bgThemeExcludedColors?: string[];
+  children?:
+    | ReactNode
+    | ((context: { bgTheme: string; bgThemeValue: string }) => ReactNode);
+  className?: string;
+  code?:
+    | ReactNode
+    | ((context: { bgTheme: string; bgThemeValue: string }) => ReactNode);
+  codeJSXOptions?: Record<string, any>;
+  codeTypes?: string[];
+  enableFullscreen?: boolean;
+  hasCodePreview?: boolean;
+  html?: string;
+  interactiveProps?: Record<string, any>;
+  isInteractive?: boolean;
+  [key: string]: any;
+}
+
+const getBackgroundsAsArray = (
+  previewBackgrounds: Record<string, string>,
+  excludedColors: string[] = [],
+): PreviewBackground[] =>
+  Object.keys(previewBackgrounds).reduce<PreviewBackground[]>((acc, name) => {
+    if (!excludedColors.includes(name)) {
+      acc.push({
+        value: previewBackgrounds[name],
+        label: name,
+      });
+    }
+    return acc;
+  }, []);
+
+// Funkcia na detekciu farby a určenie CSS triedy
+const getThemeClass = (backgroundColor: string): string => {
+  // Fallback na základe názvu farby
+  console.log(backgroundColor);
+  const colorName = backgroundColor.toLowerCase();
+  if (colorName === "#000") {
+    return "is-dark";
+  }
+  if (colorName === "#fff" || colorName === "#f5f5f5") {
+    return "is-light";
+  }
+
+  return "is-light"; // default
+};
+
+const Preview: FunctionComponent<PreviewProps> = ({
+  bgTheme = "white",
+  bgThemeColors = { White: "#fff", Gray: "#f5f5f5", Black: "#000" },
+  bgThemeExcludedColors = [],
+  children,
+  className,
+  code,
+  codeJSXOptions,
+  codeTypes,
+  enableFullscreen = true,
+  hasCodePreview = true,
+  html,
+  interactiveProps = {},
+  isInteractive = false,
+  ...other
+}) => {
+  const [isCodeShown, setIsCodeShown] = useState(false);
+  const [isFullscreen, setIsFullscreen] = useState(false);
+  const [showInteract, setShowInteract] = useState(false);
+  const [previewBackground, setPreviewBackground] = useState<PreviewBackground>(
+    () => {
+      if (bgThemeColors && typeof bgTheme === "string") {
+        const bgColorsOptions = getBackgroundsAsArray(
+          bgThemeColors,
+          bgThemeExcludedColors,
+        );
+
+        // Ak je bgTheme string, skús nájsť zodpovedajúcu farbu
+        if (bgThemeColors[bgTheme]) {
+          return {
+            label: bgTheme,
+            value: bgThemeColors[bgTheme],
+          };
+        }
+
+        // Ak bgTheme nie je v bgThemeColors, skús nájsť farbu s rovnakým názvom
+        const matchingOption = bgColorsOptions.find(
+          (option) => option.label.toLowerCase() === bgTheme.toLowerCase(),
+        );
+
+        if (matchingOption) {
+          return matchingOption;
+        }
+
+        // Ak sa nenájde zhoda, použij prvú dostupnú farbu
+        if (bgColorsOptions.length > 0) {
+          return bgColorsOptions[0];
+        }
+
+        return {
+          label: bgTheme,
+          value: bgThemeColors[bgTheme] || "#fff",
+        };
+      }
+      return { label: "white", value: "#fff" };
+    },
+  );
+
+  function handleToggleCode() {
+    setIsCodeShown(!isCodeShown);
+  }
+
+  function handleToggleInteract() {
+    setShowInteract(!showInteract);
+  }
+
+  function handlePreviewBackground(previewBackground: PreviewBackground) {
+    setPreviewBackground(previewBackground);
+  }
+
+  function handleToggleFullscreen() {
+    setIsFullscreen(!isFullscreen);
+  }
+
+  const classes = cx(
+    CLASS_ROOT,
+    className,
+    getThemeClass(previewBackground.value),
+  );
+  const wrapperClasses = cx("previewWrapper", {
+    isFullscreen: isFullscreen,
+  });
+
+  const actions: ReactNode[] = [];
+
+  if (bgTheme && bgThemeColors) {
+    const bgColorsOptions = getBackgroundsAsArray(
+      bgThemeColors,
+      bgThemeExcludedColors,
+    );
+
+    if (bgColorsOptions.length) {
+      actions.push(
+        <Dropdown
+          id="background-select"
+          button={{
+            children: previewBackground.label,
+            iconName: "menu-arrow",
+          }}
+        >
+          {bgColorsOptions.map((option: any) => (
+            <DropdownItem
+              key={option.value}
+              onClick={() => handlePreviewBackground(option)}
+            >
+              {option.label}
+            </DropdownItem>
+          ))}
+        </Dropdown>,
+      );
+    }
+  }
+
+  if (hasCodePreview) {
+    actions.push(
+      <Button key="code-toggle" onClick={handleToggleCode}>
+        <Icon name="code" fill={bgThemeColors?.accent || "#000"} />
+        {isCodeShown ? "HIDE CODE" : "SHOW CODE"}
+      </Button>,
+    );
+  }
+
+  if (isInteractive) {
+    actions.push(
+      <Button key="interact-toggle" onClick={handleToggleInteract}>
+        <Icon name="code" fill={bgThemeColors?.accent || "#000"} />
+        {showInteract ? "HIDE INTERACTIVE" : "SHOW INTERACTIVE"}
+      </Button>,
+    );
+  }
+
+  if (enableFullscreen) {
+    actions.push(
+      <Button key="fullscreen-toggle" onClick={handleToggleFullscreen}>
+        <Icon name={isFullscreen ? "fullscreen-exit" : "fullscreen"} />
+        {isFullscreen ? "MINIMIZE" : "FULLSCREEN"}
+      </Button>,
+    );
+  }
+
+  const renderAsFunctionContext = {
+    bgTheme: previewBackground.label,
+    bgThemeValue: previewBackground.value,
+  };
+
+  const childrenToRender =
+    typeof children === "function"
+      ? children(renderAsFunctionContext)
+      : children;
+
+  const toRender = childrenToRender || (
+    // eslint-disable-next-line react/no-danger
+    <div dangerouslySetInnerHTML={{ __html: html || "" }} />
+  );
+
+  const toCode =
+    (code && typeof code === "function"
+      ? code(renderAsFunctionContext)
+      : code) ||
+    childrenToRender ||
+    html;
+
+  return (
+    <div className={wrapperClasses}>
+      <PreviewTitleBar actions={actions} />
+      <Card
+        className={classes}
+        style={{ backgroundColor: previewBackground.value }}
+        {...other}
+      >
+        {showInteract ? (
+          React.Children.map(childrenToRender, (child) => {
+            if (React.isValidElement(child)) {
+              return (
+                <Interact key="interact" render={child} {...interactiveProps} />
+              );
+            }
+            return null;
+          })
+        ) : (
+          <>
+            <div className="previewLive">{toRender}</div>
+          </>
+        )}
+      </Card>
+      {isCodeShown && hasCodePreview && toCode && (
+        <Card className="codeExample">
+          <CodeExample
+            codeJSXOptions={codeJSXOptions}
+            codeTypes={html ? ["html"] : codeTypes}
+          >
+            {toCode}
+          </CodeExample>
+        </Card>
+      )}
+    </div>
+  );
+};
+
+Preview.displayName = "Preview";
+
+export default Preview;

package/src/components/Preview/PreviewTitleBar.tsx

@@ -0,0 +1,32 @@
+import React, { ReactNode } from "react";
+import cx from "classnames";
+
+interface PreviewTitleBarProps {
+  title?: string;
+  actions?: ReactNode[];
+  className?: string;
+  [key: string]: any;
+}
+
+const CLASS_ROOT = "";
+
+const PreviewTitleBar: React.FC<PreviewTitleBarProps> = ({
+  className,
+  title,
+  actions = [],
+  ...other
+}) => {
+  const classes = cx(CLASS_ROOT, className);
+
+  return (
+    <div className={cx(classes, "bar justify-content-end")} {...other}>
+      {actions.map((action, actionIndex) => (
+        <div key={actionIndex}>{action}</div>
+      ))}
+    </div>
+  );
+};
+
+PreviewTitleBar.displayName = "PreviewTitleBar";
+
+export default PreviewTitleBar;

package/src/components/Preview/index.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import "./styles/style.scss";
+
+import Preview from "./Preview";
+
+interface ThemedPreviewProps {
+  [key: string]: any;
+}
+
+const ThemedPreview: React.FC<ThemedPreviewProps> = (props) => (
+  <Preview
+    {...props}
+  />
+);
+
+export default ThemedPreview;