@developer_tribe/react-builder 0.1.0 → 0.1.4

package/src/build-components/View/View.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import type { ViewPropsGenerated } from './ViewProps.generated';
+import RenderNode from '../RenderNode.generated';
+import { Node, NodeData } from '../../types/Node';
+
+function mapAttributesToStyle(
+  attributes: ViewPropsGenerated['attributes'],
+): React.CSSProperties {
+  const scrollable = attributes?.scrollable ?? false;
+  const style: React.CSSProperties = {
+    display: 'flex',
+    flexDirection: 'column',
+  };
+  if (!attributes) return style;
+  if (scrollable) {
+    if (attributes.flexDirection === 'row') {
+      style.overflowX = 'auto';
+      style.overflowY = 'hidden';
+      style.maxWidth = '100%';
+      style.maxHeight = '100%';
+    } else {
+      style.overflowY = 'auto';
+      style.overflowX = 'hidden';
+      style.maxHeight = '100%';
+      style.maxWidth = '100%';
+    }
+  }
+  if (attributes.flexDirection) style.flexDirection = attributes.flexDirection;
+  if (attributes.alignItems)
+    style.alignItems =
+      attributes.alignItems as React.CSSProperties['alignItems'];
+  if (attributes.justifyContent)
+    style.justifyContent =
+      attributes.justifyContent as React.CSSProperties['justifyContent'];
+  if (attributes.gap !== undefined) style.gap = attributes.gap;
+  if (attributes.padding !== undefined) style.padding = attributes.padding;
+  if (attributes.margin !== undefined) style.margin = attributes.margin;
+  if (attributes.backgroundColor)
+    style.backgroundColor = attributes.backgroundColor;
+  if (attributes.borderRadius !== undefined)
+    style.borderRadius = attributes.borderRadius;
+  if (attributes.width !== undefined) style.width = attributes.width;
+  if (attributes.height !== undefined) style.height = attributes.height;
+  return style;
+}
+
+type ViewComponentProps = {
+  node: NodeData<ViewPropsGenerated['attributes']>;
+};
+
+export function View({ node }: ViewComponentProps) {
+  return (
+    <div
+      style={mapAttributesToStyle(node.attributes ?? {})}
+      className="primitive primitive-view"
+    >
+      <RenderNode node={node.children as Node} />
+    </div>
+  );
+}
+
+export default React.memo(View);

package/src/build-components/View/ViewProps.generated.ts

@@ -0,0 +1,24 @@
+/* AUTO-GENERATED FILE - DO NOT EDIT */
+
+export interface ViewPropsGenerated {
+  child: string;
+  attributes: {
+    scrollable?: boolean;
+    flexDirection?: 'row' | 'column';
+    alignItems?: 'flex-start' | 'center' | 'flex-end' | 'stretch' | 'baseline';
+    justifyContent?:
+      | 'flex-start'
+      | 'center'
+      | 'flex-end'
+      | 'space-between'
+      | 'space-around'
+      | 'space-evenly';
+    gap?: number;
+    padding?: number;
+    margin?: number;
+    backgroundColor?: string;
+    borderRadius?: number;
+    width?: number;
+    height?: number;
+  };
+}

package/src/build-components/View/pattern.json

@@ -0,0 +1,28 @@
+{
+  "schemaVersion": 1,
+  "allowUnknownAttributes": false,
+  "pattern": {
+    "type": "view",
+    "children": ["node", "array"],
+    "attributes": {
+      "scrollable": "boolean",
+      "flexDirection": ["row", "column"],
+      "alignItems": ["flex-start", "center", "flex-end", "stretch", "baseline"],
+      "justifyContent": [
+        "flex-start",
+        "center",
+        "flex-end",
+        "space-between",
+        "space-around",
+        "space-evenly"
+      ],
+      "gap": "number",
+      "padding": "number",
+      "margin": "number",
+      "backgroundColor": "string",
+      "borderRadius": "number",
+      "width": "number",
+      "height": "number"
+    }
+  }
+}

package/src/build-components/other.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import type { Node } from '../types/Node';
+
+export function other(type: string, node: Node): React.ReactNode {
+  return null;
+}

package/src/index.ts

@@ -0,0 +1,24 @@
+import './styles/index.scss';
+import RenderNode from './build-components/RenderNode.generated';
+import AttributesEditor from './AttributesEditor';
+
+export { TargetedScreenSize } from './types/TargetedScreenSize';
+export { Node, NodeData, NodeDefaultAttribute } from './types/Node';
+export { Project } from './types/Project';
+export {
+  isNodeNullOrUndefined,
+  isNodeString,
+  isNodeArray,
+  isEmptyObject,
+  analyseNode,
+} from './utils/analyseNode';
+export { getSamples } from './assets/samples/getSamples';
+export { PreviewConfig } from './types/PreviewConfig';
+export { RenderPage } from './RenderPage';
+export { RenderMainNode } from './RenderMainNode';
+export { novaToJson } from './utils/novaToJson';
+export type { Localication } from './types/PreviewConfig';
+export { RenderNode };
+export { getDevices } from './utils/getDevices';
+export type { Device } from './types/Device';
+export { AttributesEditor };

package/src/styles/index.scss

@@ -0,0 +1,114 @@
+.embla {
+  max-width: 48rem;
+  margin: auto;
+  --slide-height: 19rem;
+  --slide-spacing: 1rem;
+  --slide-size: 70%;
+}
+.embla__viewport {
+  overflow: hidden;
+}
+.embla__container {
+  display: flex;
+  touch-action: pan-y pinch-zoom;
+  margin-left: calc(var(--slide-spacing) * -1);
+}
+.embla__slide {
+  transform: translate3d(0, 0, 0);
+  flex: 0 0 var(--slide-size);
+  min-width: 0;
+  padding-left: var(--slide-spacing);
+  flex: 0 0 100%;
+}
+.embla__slide__number {
+  box-shadow: inset 0 0 0 0.2rem var(--detail-medium-contrast);
+  border-radius: 1.8rem;
+  font-size: 4rem;
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: var(--slide-height);
+  user-select: none;
+}
+.embla__controls {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  justify-content: space-between;
+  gap: 1.2rem;
+  margin-top: 1.8rem;
+}
+.embla__buttons {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 0.6rem;
+  align-items: center;
+}
+.embla__button {
+  -webkit-tap-highlight-color: rgba(var(--text-high-contrast-rgb-value), 0.5);
+  -webkit-appearance: none;
+  appearance: none;
+  background-color: transparent;
+  touch-action: manipulation;
+  display: inline-flex;
+  text-decoration: none;
+  cursor: pointer;
+  border: 0;
+  padding: 0;
+  margin: 0;
+  box-shadow: inset 0 0 0 0.2rem var(--detail-medium-contrast);
+  width: 3.6rem;
+  height: 3.6rem;
+  z-index: 1;
+  border-radius: 50%;
+  color: var(--text-body);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.embla__button:disabled {
+  color: var(--detail-high-contrast);
+}
+.embla__button__svg {
+  width: 35%;
+  height: 35%;
+}
+.embla__dots {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+  margin-right: 0;
+  height: 50px;
+}
+.embla__dot {
+  -webkit-tap-highlight-color: rgba(var(--text-high-contrast-rgb-value), 0.5);
+  -webkit-appearance: none;
+  appearance: none;
+  background-color: transparent;
+  touch-action: manipulation;
+  display: inline-flex;
+  text-decoration: none;
+  cursor: pointer;
+  border: 0;
+  padding: 0;
+  margin: 0;
+  width: 2.6rem;
+  height: 2.6rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+}
+.embla__dot:after {
+  box-shadow: inset 0 0 0 0.2rem var(--detail-medium-contrast);
+  width: 1.4rem;
+  height: 1.4rem;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  content: '';
+}
+.embla__dot--selected:after {
+  box-shadow: inset 0 0 0 0.2rem var(--text-body);
+}

package/src/types/Device.ts

@@ -0,0 +1,12 @@
+export interface Device {
+  name: string;
+  platform: string; // ios, android
+  width: number;
+  height: number;
+  type: 'phone' | 'tablet';
+  /**
+   * Relative importance for generic targeting and display ordering.
+   * 1 = highest importance, 5 = lowest importance
+   */
+  importance?: 1 | 2 | 3 | 4 | 5;
+}

package/src/types/Node.ts

@@ -0,0 +1,19 @@
+export type NodeDefaultAttribute = Record<
+  string,
+  boolean | string | number | null | undefined | string[]
+>;
+
+export type Node<T = NodeDefaultAttribute> =
+  | null
+  | undefined
+  | string
+  | {}
+  | Node<T>[]
+  | NodeData<T>;
+
+export interface NodeData<T = Record<string, unknown>> {
+  type: string;
+  children: Node<Record<string, unknown>>;
+  attributes?: T;
+  key?: string;
+}

package/src/types/PreviewConfig.ts

@@ -0,0 +1,19 @@
+import { TargetedScreenSize } from './TargetedScreenSize';
+
+export interface PreviewConfig {
+  theme: 'light' | 'dark';
+  screenSize: TargetedScreenSize;
+  isRtl: boolean;
+  screenStyle: {
+    light: { backgroundColor: string; color: string };
+    dark: { backgroundColor: string; color: string };
+  };
+  localication: Localication;
+  defaultLanguage?: string;
+}
+
+export type Localication = {
+  [key: string]: {
+    [key: string]: string;
+  };
+};

package/src/types/Project.ts

@@ -0,0 +1,11 @@
+import { Node } from '../types/Node';
+import { PreviewConfig } from './PreviewConfig';
+
+export interface ProjectBase<T> {
+  name: string;
+  version: string;
+  data: T;
+  previewConfig: PreviewConfig;
+}
+
+export interface Project extends ProjectBase<Node> {}

package/src/types/TargetedScreenSize.ts

@@ -0,0 +1,4 @@
+export interface TargetedScreenSize {
+  width: number;
+  height: number;
+}

package/src/utils/analyseNode.ts

@@ -0,0 +1,77 @@
+import { Node, NodeData, NodeDefaultAttribute } from '../types/Node';
+
+export function isNodeNullOrUndefined<T = NodeDefaultAttribute>(
+  node: Node<T>,
+): boolean {
+  return node === null || node === undefined;
+}
+export function isNodeString<T = NodeDefaultAttribute>(node: Node<T>): boolean {
+  return typeof node === 'string';
+}
+export function isNodeArray<T = NodeDefaultAttribute>(node: Node<T>): boolean {
+  return node instanceof Array;
+}
+export function isEmptyObject<T = NodeDefaultAttribute>(
+  node: Node<T>,
+): boolean {
+  return Object.keys(node as Object).length === 0;
+}
+
+export function analyseNode(node: Node<NodeDefaultAttribute>): {
+  valid: boolean;
+  message?: string;
+} {
+  if (isNodeNullOrUndefined(node)) {
+    return {
+      valid: true,
+      message: 'null or undefined is valid',
+    };
+  }
+
+  if (isNodeString(node)) {
+    return {
+      valid: true,
+      message: 'string is valid',
+    };
+  }
+
+  if (isNodeArray(node)) {
+    const nodeArray = node as unknown as Node[];
+    for (const value of nodeArray) {
+      const { valid, message } = analyseNode(value);
+      if (!valid) {
+        return {
+          valid: false,
+          message: message,
+        };
+      }
+    }
+    return {
+      // array is valid
+      valid: true,
+      message: 'Array is valid',
+    };
+  }
+  const recordData = node as NodeData;
+  if (isEmptyObject(recordData)) {
+    return {
+      valid: true,
+      message: 'empty object is valid',
+    };
+  } else {
+    if (recordData.children) {
+      const { valid, message } = analyseNode(recordData.children);
+      if (!valid) {
+        return {
+          valid: false,
+          message: message,
+        };
+      }
+    }
+
+    return {
+      valid: true,
+      message: 'everthing is valid',
+    };
+  }
+}

package/src/utils/generateRandomKeyForNode.ts

@@ -0,0 +1,3 @@
+export function generateRandomKeyForNode(type: string) {
+  return type + '-' + Math.random().toString(36).substring(2, 15);
+}

package/src/utils/getDevices.ts

@@ -0,0 +1,6 @@
+import { Device } from '../types/Device';
+import devices from '../assets/devices.json';
+
+export function getDevices(): Device[] {
+  return devices as Device[];
+}

package/src/utils/isCarousel.ts

@@ -0,0 +1,36 @@
+import { Node, NodeData } from '../types/Node';
+
+export const isCarouselProvider = (node: Node): node is NodeData => {
+  if (!node || typeof node !== 'object' || Array.isArray(node)) return false;
+  return 'type' in node && node.type === 'carouselProvider';
+};
+
+export const isCarousel = (node: Node): node is NodeData => {
+  if (!node || typeof node !== 'object' || Array.isArray(node)) return false;
+  return 'type' in node && node.type === 'carousel';
+};
+
+export const isCarouselItem = (node: Node): node is NodeData => {
+  if (!node || typeof node !== 'object' || Array.isArray(node)) return false;
+  return 'type' in node && node.type === 'carouselItem';
+};
+
+export const isCarouselDots = (node: Node): node is NodeData => {
+  if (!node || typeof node !== 'object' || Array.isArray(node)) return false;
+  return 'type' in node && node.type === 'carouselDots';
+};
+
+export const isCarouselButtons = (node: Node): node is NodeData => {
+  if (!node || typeof node !== 'object' || Array.isArray(node)) return false;
+  return 'type' in node && node.type === 'carouselButtons';
+};
+
+export const isCarouselComponent = (node: Node): boolean => {
+  return (
+    isCarouselProvider(node) ||
+    isCarousel(node) ||
+    isCarouselItem(node) ||
+    isCarouselDots(node) ||
+    isCarouselButtons(node)
+  );
+};

package/src/utils/isOnboard.ts

@@ -0,0 +1,54 @@
+import { Node, NodeData } from '../types/Node';
+
+export const isOnboardProvider = (node: Node): node is NodeData => {
+  if (!node || typeof node !== 'object' || Array.isArray(node)) return false;
+  return 'type' in node && (node as NodeData).type === 'OnboardProvider';
+};
+
+export const isOnboard = (node: Node): node is NodeData => {
+  if (!node || typeof node !== 'object' || Array.isArray(node)) return false;
+  return 'type' in node && (node as NodeData).type === 'Onboard';
+};
+
+export const isOnboardItem = (node: Node): node is NodeData => {
+  if (!node || typeof node !== 'object' || Array.isArray(node)) return false;
+  return 'type' in node && (node as NodeData).type === 'OnboardItem';
+};
+
+export const isOnboardExpandingDot = (node: Node): node is NodeData => {
+  if (!node || typeof node !== 'object' || Array.isArray(node)) return false;
+  return 'type' in node && (node as NodeData).type === 'OnboardExpandingDot';
+};
+
+export const isOnboardBoardTitle = (node: Node): node is NodeData => {
+  if (!node || typeof node !== 'object' || Array.isArray(node)) return false;
+  return 'type' in node && (node as NodeData).type === 'OnboardBoardTitle';
+};
+
+export const isOnboardSubtitle = (node: Node): node is NodeData => {
+  if (!node || typeof node !== 'object' || Array.isArray(node)) return false;
+  return 'type' in node && (node as NodeData).type === 'OnboardSubtitle';
+};
+
+export const isOnboardComponent = (node: Node): boolean => {
+  return (
+    isOnboardProvider(node) ||
+    isOnboard(node) ||
+    isOnboardItem(node) ||
+    isOnboardExpandingDot(node) ||
+    isOnboardBoardTitle(node) ||
+    isOnboardSubtitle(node) ||
+    (function isOnboardButtons(n: Node): n is NodeData {
+      if (!n || typeof n !== 'object' || Array.isArray(n)) return false;
+      return 'type' in n && (n as NodeData).type === 'OnboardButtons';
+    })(node) ||
+    (function isOnboardButton(n: Node): n is NodeData {
+      if (!n || typeof n !== 'object' || Array.isArray(n)) return false;
+      return 'type' in n && (n as NodeData).type === 'OnboardButton';
+    })(node) ||
+    (function isOnboardImage(n: Node): n is NodeData {
+      if (!n || typeof n !== 'object' || Array.isArray(n)) return false;
+      return 'type' in n && (n as NodeData).type === 'OnboardImage';
+    })(node)
+  );
+};