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

package/src/components/Preview/Interact/Interact.tsx

@@ -0,0 +1,263 @@
+import React, { useState, useEffect, ReactNode, ReactElement } from "react";
+
+// import useId from '../../../utils/useId';
+
+const useId = (prefix: string) =>
+  `${prefix}-${Math.random().toString(36).substr(2, 9)}`;
+
+import PropsGroup from "./PropsGroup";
+import ButtonShowPropsGroup from "./ButtonShowPropsGroup";
+import InteractContext from "./state";
+
+import { cleanValue, getDocgenProps, getDisplayName } from "./helpers";
+
+interface InteractProps {
+  /** Element id */
+  id?: string;
+  /** Which props should be filtered */
+  filterProps?: string[];
+  /** Render element */
+  render: ReactElement | ((props: any) => ReactElement);
+  /** Parser should skip children */
+  skipChildren?: boolean;
+}
+
+interface LiveProps {
+  [key: string]: any;
+}
+
+interface InteractState {
+  liveProps: LiveProps;
+  showProps: LiveProps;
+}
+
+/**
+ * Component that creates interactive playground
+ * for experimenting with possibilities of components props
+ */
+const Interact: React.FC<InteractProps> = ({
+  id,
+  filterProps = [],
+  render,
+  skipChildren = false,
+}) => {
+  const component = render;
+  const generatedId = useId("interactive");
+  const componentId = id || generatedId;
+
+  const [liveProps, setLiveProps] = useState<LiveProps>({});
+  const [showProps, setShowProps] = useState<LiveProps>({});
+  const [docgen, setDocgen] = useState<{ liveProps: LiveProps }>({
+    liveProps: {},
+  });
+
+  useEffect(() => {
+    const initialLiveProps = generateProps("live", component);
+    const initialShowProps = generateProps("show", component);
+    const initialDocgen = { liveProps: generateProps("docgen", component) };
+
+    setLiveProps(initialLiveProps);
+    setShowProps(initialShowProps);
+    setDocgen(initialDocgen);
+  }, [component]);
+
+  const getPropValue = (name: string, component: any) => {
+    if (typeof component === "string") {
+      return component;
+    }
+
+    if (component && component.props && component.props[name] !== undefined) {
+      return component.props[name];
+    }
+
+    return null;
+  };
+
+  const isDefaultValue = (id: string, name: string) => {
+    const docgenProps = docgen.liveProps[id] || {};
+    return docgenProps[name] !== undefined;
+  };
+
+  const getDefaultValue = (docgen: any) => {
+    if (!docgen) return null;
+
+    const { defaultValue } = docgen;
+    if (defaultValue && defaultValue.value !== undefined) {
+      return cleanValue(defaultValue.value);
+    }
+
+    return null;
+  };
+
+  const setDeepState = (target: string, name: string, value: any) => {
+    setLiveProps((prev) => ({
+      ...prev,
+      [target]: {
+        ...prev[target],
+        [name]: value,
+      },
+    }));
+  };
+
+  const handleShowProps = (e: React.MouseEvent, id: string) => {
+    setShowProps((prev) => ({
+      ...prev,
+      [id]: !prev[id],
+    }));
+  };
+
+  const handleInputChange = (
+    type: string,
+    event: React.ChangeEvent<HTMLInputElement>,
+  ) => {
+    const { target } = event;
+    const { name, value } = target;
+    setDeepState(type, name, value);
+  };
+
+  const handleCheckboxChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const { target } = event;
+    const { name, checked } = target;
+    const type = name.split(".")[0];
+    const propName = name.split(".")[1];
+    setDeepState(type, propName, checked);
+  };
+
+  const handleSelectChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
+    const { target } = event;
+    const { name, value } = target;
+    const type = name.split(".")[0];
+    const propName = name.split(".")[1];
+    setDeepState(type, propName, value);
+  };
+
+  const generateProps = (
+    type: string,
+    component: any,
+    id = 0,
+    prefix = "",
+  ): LiveProps => {
+    if (!component) return {};
+
+    const componentInfo = getComponentInfo(component, id, prefix);
+    const { name, props } = componentInfo;
+
+    const result: LiveProps = {
+      [name]: props,
+    };
+
+    if (type === "live") {
+      setLiveProps((prev) => ({
+        ...prev,
+        [name]: props,
+      }));
+    }
+
+    if (type === "show") {
+      setShowProps((prev) => ({
+        ...prev,
+        [name]: false,
+      }));
+    }
+
+    return result;
+  };
+
+  const getComponentInfo = (component: any, id = 0, prefix = "") => {
+    const name = prefix + getDisplayName(component) + id;
+    const props = getDocgenProps(component) || {};
+    const propValues = Object.keys(props).reduce((acc: any, propName) => {
+      const value =
+        typeof component !== "string"
+          ? getPropValue(propName, component)
+          : component;
+      return {
+        ...acc,
+        ...(value !== null ? { [propName]: value } : {}),
+      };
+    }, {});
+
+    return { name, props: propValues };
+  };
+
+  const getComponentDocgenProps = (component: any, id = 0, prefix = "") => {
+    const name = prefix + getDisplayName(component) + id;
+    const props = getDocgenProps(component) || {};
+
+    return {
+      [name]: props,
+    };
+  };
+
+  const renderInteractive = (
+    component: any,
+    id = 0,
+    prefix = "",
+  ): ReactNode => {
+    if (!component) return null;
+
+    const componentInfo = getComponentInfo(component, id, prefix);
+    const { name, props } = componentInfo;
+
+    const livePropsForComponent = liveProps[name] || {};
+    const showPropsForComponent = showProps[name] || false;
+    const docgenPropsForComponent = docgen.liveProps[name] || {};
+
+    const filteredProps = Object.keys(livePropsForComponent).filter(
+      (propName) => !filterProps.includes(propName),
+    );
+
+    const componentToRender = React.cloneElement(
+      component,
+      livePropsForComponent,
+    );
+
+    return (
+      <InteractContext.Provider
+        key={name}
+        value={{
+          liveProps: livePropsForComponent,
+          showProps: showPropsForComponent,
+          docgenProps: docgenPropsForComponent,
+          setDeepState: (propName: string, value: any) =>
+            setDeepState(name, propName, value),
+          handleShowProps: (e: React.MouseEvent) => handleShowProps(e, name),
+          handleInputChange: (event: React.ChangeEvent<HTMLInputElement>) =>
+            handleInputChange(name, event),
+          handleCheckboxChange,
+          handleSelectChange,
+          isDefaultValue: (propName: string) => isDefaultValue(name, propName),
+          getDefaultValue: (docgen: any) => getDefaultValue(docgen),
+        }}
+      >
+        <div className="interactContainer">
+          {componentToRender}
+          {filteredProps.length > 0 && (
+            <ButtonShowPropsGroup
+              id={name}
+              componentName={name}
+              deepness={0}
+              onClick={(e: React.MouseEvent) => handleShowProps(e, name)}
+              isVisible={showPropsForComponent}
+            />
+          )}
+          {showPropsForComponent && (
+            <PropsGroup
+              id={name}
+              showId={name}
+              props={livePropsForComponent}
+              docgenProps={docgenPropsForComponent}
+              filteredProps={filteredProps}
+            />
+          )}
+        </div>
+      </InteractContext.Provider>
+    );
+  };
+
+  return <div className="interact">{renderInteractive(component, 0, "")}</div>;
+};
+
+Interact.displayName = "Interact";
+
+export default Interact;

package/src/components/Preview/Interact/PropCheckbox.tsx

@@ -0,0 +1,50 @@
+import React, { useContext } from 'react';
+
+import InteractContext from './state';
+
+import PropLabelWithTooltip from './PropLabelWithTooltip';
+
+
+interface PropCheckboxProps {
+  inputProps: {
+    key: string;
+    id: string;
+    name: string;
+    'data-component-id': string;
+  };
+  componentInfo: {
+    id: string;
+    name: string;
+  };
+}
+
+const PropCheckbox: React.FC<PropCheckboxProps> = ({ inputProps, componentInfo }) => {
+  const context = useContext(InteractContext);
+
+  if (!context) {
+    return null;
+  }
+
+  const { liveProps, handleCheckboxChange } = context;
+  const { id, name } = componentInfo;
+
+  return (
+    <PropLabelWithTooltip
+      inputProps={{
+        ...inputProps,
+        input: (
+          <input
+            {...inputProps}
+            type="checkbox"
+            className="checkbox"
+            checked={liveProps[name] ? true : false}
+            onChange={handleCheckboxChange}
+          />
+        ),
+      }}
+      componentInfo={componentInfo}
+    />
+  );
+};
+
+export default PropCheckbox; 

package/src/components/Preview/Interact/PropFormField.tsx

@@ -0,0 +1,76 @@
+import React, { useContext } from 'react';
+
+import PropInput from './PropInput';
+import PropCheckbox from './PropCheckbox';
+import PropSelect from './PropSelect';
+
+import InteractContext from './state';
+
+import { is } from './helpers';
+
+
+interface PropFormFieldProps {
+  id: string;
+  name: string;
+}
+
+const PropFormField: React.FC<PropFormFieldProps> = ({ id, name }) => {
+  const context = useContext(InteractContext);
+
+  if (!context) {
+    return null;
+  }
+
+  const { docgenProps, isDefaultValue } = context;
+  const propInfo = docgenProps[name];
+
+  let field: React.ReactNode;
+
+  const fieldProps = {
+    inputProps: {
+      key: name,
+      id: name,
+      name,
+      'data-component-id': id,
+    },
+    componentInfo: {
+      id,
+      name,
+    },
+  };
+
+  if (propInfo?.type) {
+    const type = propInfo.type.name;
+
+    if (is(type, 'string') || is(type, 'number')) {
+      field = <PropInput {...fieldProps} />;
+    } else if (is(type, 'bool')) {
+      field = <PropCheckbox {...fieldProps} />;
+    } else if (is(type, 'enum')) {
+      field = <PropSelect {...fieldProps} />;
+    } else {
+      field = <PropInput {...fieldProps} type={type} isDisabled />;
+      /*
+      any, array, func, object, node, element, symbol, 
+      instanceOf, oneOfType, arrayOf, objectOf, shape, custom
+
+      these types of props cannot be parsed because their value in 
+      __docgenInfo defaultValue.value is very complex form but is stored
+      as a simple string not a JSON, so its impossible for now to parse them
+      */
+    }
+  }
+
+  return (
+    <div className="field">
+      {field}
+      {isDefaultValue(name) && (
+        <div className="defaultValue">
+          <small>Default</small>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default PropFormField; 

package/src/components/Preview/Interact/PropInput.tsx

@@ -0,0 +1,72 @@
+import React, { useContext } from "react";
+
+import { is } from "./helpers";
+
+import PropLabelWithTooltip from "./PropLabelWithTooltip";
+
+import InteractContext from "./state";
+
+interface PropInputProps {
+  type?: string;
+  isDisabled?: boolean;
+  inputProps: {
+    key: string;
+    id: string;
+    name: string;
+    "data-component-id": string;
+  };
+  componentInfo: {
+    id: string;
+    name: string;
+  };
+}
+
+const PropInput: React.FC<PropInputProps> = ({
+  type,
+  isDisabled = false,
+  inputProps,
+  componentInfo,
+}) => {
+  const context = useContext(InteractContext);
+
+  if (!context) {
+    return null;
+  }
+
+  const { liveProps, handleInputChange } = context;
+  const { name } = componentInfo;
+  const value = liveProps[name];
+
+  return (
+    <React.Fragment>
+      <PropLabelWithTooltip
+        isDisabled={isDisabled}
+        inputProps={inputProps}
+        componentInfo={componentInfo}
+      />
+      {isDisabled ? (
+        <input
+          {...inputProps}
+          className="input"
+          disabled
+          value={
+            is(typeof value, "object")
+              ? JSON.stringify(value)
+              : value?.toString() || ""
+          }
+        />
+      ) : (
+        <input
+          {...inputProps}
+          className="input"
+          value={value || ""}
+          onChange={(e) => {
+            handleInputChange(e);
+          }}
+        />
+      )}
+    </React.Fragment>
+  );
+};
+
+export default PropInput;

package/src/components/Preview/Interact/PropLabelWithTooltip.tsx

@@ -0,0 +1,77 @@
+import React, { useContext } from "react";
+
+import { Bar, BarItem } from "../../Bar";
+
+import Tooltip from "./Tooltip";
+
+import InteractContext from "./state";
+
+interface PropLabelWithTooltipProps {
+  isDisabled?: boolean;
+  inputProps: {
+    key: string;
+    id: string;
+    name: string;
+    "data-component-id": string;
+    input?: React.ReactNode;
+  };
+  componentInfo: {
+    id: string;
+    name: string;
+  };
+}
+
+const PropLabelWithTooltip: React.FC<PropLabelWithTooltipProps> = ({
+  isDisabled = false,
+  inputProps,
+  componentInfo,
+}) => (
+  <Bar className="bar">
+    <BarItem>
+      <PropLabel
+        {...inputProps}
+        {...(isDisabled ? { style: { color: "grey" } } : {})}
+      />
+    </BarItem>
+    <BarItem>
+      <PropTooltip {...componentInfo} />
+    </BarItem>
+  </Bar>
+);
+
+interface PropLabelProps {
+  id: string;
+  name: string;
+  input?: React.ReactNode;
+  [key: string]: any;
+}
+
+const PropLabel: React.FC<PropLabelProps> = ({ id, name, input, ...other }) => (
+  <label htmlFor={id} className="label" {...other}>
+    {input} <strong>{name.replace(/^\w/, (m) => m.toUpperCase())}</strong>
+  </label>
+);
+
+interface PropTooltipProps {
+  id: string;
+  name: string;
+}
+
+const PropTooltip: React.FC<PropTooltipProps> = ({ id, name }) => {
+  const context = useContext(InteractContext);
+
+  if (!context) {
+    return null;
+  }
+
+  const { docgenProps } = context;
+  const propInfo = docgenProps[name];
+
+  return (
+    <Tooltip dialog={propInfo?.description || "No valuable description found"}>
+      i
+    </Tooltip>
+  );
+};
+
+export default PropLabelWithTooltip;

package/src/components/Preview/Interact/PropSelect.tsx

@@ -0,0 +1,60 @@
+import React, { useContext } from 'react';
+
+import InteractContext from './state';
+
+import PropLabelWithTooltip from './PropLabelWithTooltip';
+
+import { cleanValue } from './helpers';
+
+
+interface PropSelectProps {
+  inputProps: {
+    key: string;
+    id: string;
+    name: string;
+    'data-component-id': string;
+  };
+  componentInfo: {
+    id: string;
+    name: string;
+  };
+}
+
+const PropSelect: React.FC<PropSelectProps> = ({ inputProps, componentInfo }) => {
+  const context = useContext(InteractContext);
+
+  if (!context) {
+    return null;
+  }
+
+  const { liveProps, docgenProps, handleSelectChange } = context;
+  const { id, name } = componentInfo;
+  const propInfo = docgenProps[name];
+
+  return (
+    <React.Fragment>
+      <PropLabelWithTooltip
+        inputProps={inputProps}
+        componentInfo={componentInfo}
+      />
+      <select
+        {...inputProps}
+        className="select"
+        value={liveProps[name] || 'null'}
+        onChange={handleSelectChange}
+      >
+        <option value="null">None</option>
+        {propInfo?.type?.value && Object.values(propInfo.type.value).map((option: any, index: number) => {
+          const optionValue = cleanValue(option.value);
+          return (
+            <option key={index.toString()} value={optionValue}>
+              {optionValue}
+            </option>
+          );
+        })}
+      </select>
+    </React.Fragment>
+  );
+};
+
+export default PropSelect; 

package/src/components/Preview/Interact/PropsGroup.tsx

@@ -0,0 +1,49 @@
+import React, { useContext } from 'react';
+
+import InteractContext from './state';
+
+import PropFormField from './PropFormField';
+
+
+interface PropsGroupProps {
+  id: string;
+  showId: string;
+  props: Record<string, any>;
+  docgenProps: Record<string, any>;
+  filteredProps: string[];
+}
+
+const PropsGroup: React.FC<PropsGroupProps> = ({ 
+  id, 
+  showId, 
+  props, 
+  docgenProps, 
+  filteredProps 
+}) => {
+  const context = useContext(InteractContext);
+
+  if (!context) {
+    return null;
+  }
+
+  const statePropNames = Object.keys(docgenProps);
+  const propCount = statePropNames.length;
+
+  return (
+    <div className="group">
+      {propCount ? (
+        statePropNames.map((name, index) => {
+          return filteredProps.find(
+            (filtered) => filtered === name
+          ) ? null : (
+            <PropFormField key={index.toString()} id={id} name={name} />
+          );
+        })
+      ) : (
+        <p>There are no props to edit, try another component!</p>
+      )}
+    </div>
+  );
+};
+
+export default PropsGroup; 

package/src/components/Preview/Interact/Tooltip.tsx

@@ -0,0 +1,17 @@
+import React, { ReactNode } from 'react';
+
+
+interface TooltipProps {
+  children: ReactNode;
+  dialog: string;
+  [key: string]: any;
+}
+
+const Tooltip: React.FC<TooltipProps> = ({ children, dialog, ...other }) => (
+  <div className="tooltip" {...other}>
+    <div className="tooltipTrigger">{children}</div>
+    <div className="tooltipTitle">{dialog}</div>
+  </div>
+);
+
+export default Tooltip;