@builder.io/sdk-qwik 0.0.2-0

package/src/blocks/button/button.jsx

@@ -0,0 +1,211 @@
+// GENERATED BY MITOSIS
+
+import { Fragment, Host, component$, h } from "@builder.io/qwik";
+export const Button = component$((props) => {
+  return (
+    <Host q:host-pseudo="">
+      <Fragment>
+        {props.link ? (
+          <a
+            role="button"
+            {...props.attributes}
+            href={props.link}
+            target={props.openLinkInNewTab ? "_blank" : undefined}
+          >
+            {props.text}
+          </a>
+        ) : (
+          <span {...props.attributes}>{props.text}</span>
+        )}
+      </Fragment>
+    </Host>
+  );
+});
+export default Button;
+export const COMPONENT = {
+  "@type": "@builder.io/mitosis/component",
+  imports: [],
+  exports: {},
+  inputs: [],
+  meta: {},
+  refs: {},
+  state: {},
+  children: [
+    {
+      "@type": "@builder.io/mitosis/node",
+      name: "Host",
+      meta: {},
+      scope: {},
+      properties: {
+        "q:host-pseudo": "",
+      },
+      bindings: {},
+      children: [
+        {
+          "@type": "@builder.io/mitosis/node",
+          name: "Fragment",
+          meta: {},
+          scope: {},
+          properties: {},
+          bindings: {},
+          children: [
+            {
+              "@type": "@builder.io/mitosis/node",
+              name: "div",
+              meta: {},
+              scope: {},
+              properties: {
+                _text: "\n      ",
+              },
+              bindings: {},
+              children: [],
+            },
+            {
+              "@type": "@builder.io/mitosis/node",
+              name: "Show",
+              meta: {
+                else: {
+                  "@type": "@builder.io/mitosis/node",
+                  name: "span",
+                  meta: {},
+                  scope: {},
+                  properties: {},
+                  bindings: {
+                    _spread: {
+                      code: "props.attributes",
+                    },
+                  },
+                  children: [
+                    {
+                      "@type": "@builder.io/mitosis/node",
+                      name: "div",
+                      meta: {},
+                      scope: {},
+                      properties: {},
+                      bindings: {
+                        _text: {
+                          code: "props.text",
+                        },
+                      },
+                      children: [],
+                    },
+                  ],
+                },
+              },
+              scope: {},
+              properties: {},
+              bindings: {
+                when: {
+                  code: "props.link",
+                },
+              },
+              children: [
+                {
+                  "@type": "@builder.io/mitosis/node",
+                  name: "div",
+                  meta: {},
+                  scope: {},
+                  properties: {
+                    _text: "\n        ",
+                  },
+                  bindings: {},
+                  children: [],
+                },
+                {
+                  "@type": "@builder.io/mitosis/node",
+                  name: "a",
+                  meta: {},
+                  scope: {},
+                  properties: {
+                    role: "button",
+                  },
+                  bindings: {
+                    _spread: {
+                      code: "props.attributes",
+                    },
+                    href: {
+                      code: "props.link",
+                    },
+                    target: {
+                      code: "props.openLinkInNewTab ? '_blank' : undefined",
+                    },
+                  },
+                  children: [
+                    {
+                      "@type": "@builder.io/mitosis/node",
+                      name: "div",
+                      meta: {},
+                      scope: {},
+                      properties: {
+                        _text: "\n          ",
+                      },
+                      bindings: {},
+                      children: [],
+                    },
+                    {
+                      "@type": "@builder.io/mitosis/node",
+                      name: "div",
+                      meta: {},
+                      scope: {},
+                      properties: {},
+                      bindings: {
+                        _text: {
+                          code: "props.text",
+                        },
+                      },
+                      children: [],
+                    },
+                    {
+                      "@type": "@builder.io/mitosis/node",
+                      name: "div",
+                      meta: {},
+                      scope: {},
+                      properties: {
+                        _text: "\n        ",
+                      },
+                      bindings: {},
+                      children: [],
+                    },
+                  ],
+                },
+                {
+                  "@type": "@builder.io/mitosis/node",
+                  name: "div",
+                  meta: {},
+                  scope: {},
+                  properties: {
+                    _text: "\n      ",
+                  },
+                  bindings: {},
+                  children: [],
+                },
+              ],
+            },
+            {
+              "@type": "@builder.io/mitosis/node",
+              name: "div",
+              meta: {},
+              scope: {},
+              properties: {
+                _text: "\n    ",
+              },
+              bindings: {},
+              children: [],
+            },
+          ],
+        },
+      ],
+    },
+  ],
+  hooks: {},
+  context: {
+    get: {},
+    set: {},
+  },
+  name: "Button",
+  subComponents: [],
+  interfaces: [
+    "export interface ButtonProps {\n  attributes?: any;\n  text?: string;\n  link?: string;\n  openLinkInNewTab?: boolean;\n}",
+  ],
+  propsTypeRef: "ButtonProps",
+};

package/src/blocks/button/component-info.js

@@ -0,0 +1,41 @@
+const componentInfo = {
+  name: "Core:Button",
+  builtIn: true,
+  image: "https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2F81a15681c3e74df09677dfc57a615b13",
+  defaultStyles: {
+    appearance: "none",
+    paddingTop: "15px",
+    paddingBottom: "15px",
+    paddingLeft: "25px",
+    paddingRight: "25px",
+    backgroundColor: "#000000",
+    color: "white",
+    borderRadius: "4px",
+    textAlign: "center",
+    cursor: "pointer"
+  },
+  inputs: [
+    {
+      name: "text",
+      type: "text",
+      defaultValue: "Click me!",
+      bubble: true
+    },
+    {
+      name: "link",
+      type: "url",
+      bubble: true
+    },
+    {
+      name: "openLinkInNewTab",
+      type: "boolean",
+      defaultValue: false,
+      friendlyName: "Open link in new tab"
+    }
+  ],
+  static: true,
+  noWrap: true
+};
+export {
+  componentInfo
+};

package/src/blocks/columns/columns.jsx

@@ -0,0 +1,288 @@
+// GENERATED BY MITOSIS
+
+import RenderBlocks from "../../components/render-blocks";
+import {
+  Fragment,
+  Host,
+  component$,
+  h,
+  useScopedStyles$,
+} from "@builder.io/qwik";
+export const getGutterSize = function getGutterSize(props, state) {
+  return typeof props.space === "number" ? props.space || 0 : 20;
+};
+export const getColumns = function getColumns(props, state) {
+  return props.columns || [];
+};
+export const getWidth = function getWidth(props, state, index) {
+  const columns = getColumns(props, state);
+  return columns[index]?.width || 100 / columns.length;
+};
+export const getColumnCssWidth = function getColumnCssWidth(
+  props,
+  state,
+  index
+) {
+  const columns = getColumns(props, state);
+  const gutterSize = getGutterSize(props, state);
+  const subtractWidth = (gutterSize * (columns.length - 1)) / columns.length;
+  return `calc(${getWidth(props, state, index)}% - ${subtractWidth}px)`;
+};
+export const maybeApplyForTablet = function maybeApplyForTablet(
+  props,
+  state,
+  prop
+) {
+  const _stackColumnsAt = props.stackColumnsAt || "tablet";
+
+  return _stackColumnsAt === "tablet" ? prop : "inherit";
+};
+export const columnsCssVars = function columnsCssVars(props, state) {
+  const flexDir =
+    props.stackColumnsAt === "never"
+      ? "inherit"
+      : props.reverseColumnsWhenStacked
+      ? "column-reverse"
+      : "column";
+  return {
+    "--flex-dir": flexDir,
+    "--flex-dir-tablet": maybeApplyForTablet(props, state, flexDir),
+  };
+};
+export const columnCssVars = function columnCssVars(props, state) {
+  const width = "100%";
+  const marginLeft = "0";
+  return {
+    "--column-width": width,
+    "--column-margin-left": marginLeft,
+    "--column-width-tablet": maybeApplyForTablet(props, state, width),
+    "--column-margin-left-tablet": maybeApplyForTablet(
+      props,
+      state,
+      marginLeft
+    ),
+  };
+};
+export const Columns = component$(
+  (props) => {
+    useScopedStyles$(STYLES);
+    const state = {};
+    return (
+      <Host
+        class="builder-columns div-Columns"
+        style={columnsCssVars(props, state)}
+      >
+        {(props.columns || []).map((column, index) => {
+          return (
+            <div
+              class="builder-column div-Columns-2"
+              style={{
+                width: getColumnCssWidth(props, state, index),
+                marginLeft: `${
+                  index === 0 ? 0 : getGutterSize(props, state)
+                }px`,
+                ...columnCssVars(props, state),
+              }}
+              key={index}
+            >
+              <RenderBlocks blocks={column.blocks}></RenderBlocks>
+            </div>
+          );
+        })}
+      </Host>
+    );
+  },
+  { tagName: "div" }
+);
+export default Columns;
+export const STYLES = `
+.div-Columns {
+  display: flex;
+  align-items: stretch;
+  line-height: normal;
+}
+@media (max-width: 999px) {
+  .div-Columns {
+    flex-direction: var(--flex-dir-tablet);
+  }
+}
+@media (max-width: 639px) {
+  .div-Columns {
+    flex-direction: var(--flex-dir);
+  }
+}
+.div-Columns-2 {
+  flex-grow: 1;
+}
+@media (max-width: 999px) {
+  .div-Columns-2 {
+    width: var(--column-width-tablet) !important;
+    margin-left: var(--column-margin-left-tablet) !important;
+  }
+}
+@media (max-width: 639px) {
+  .div-Columns-2 {
+    width: var(--column-width) !important;
+    margin-left: var(--column-margin-left) !important;
+  }
+}
+`;
+export const COMPONENT = {
+  "@type": "@builder.io/mitosis/component",
+  imports: [
+    {
+      imports: {
+        RenderBlocks: "default",
+      },
+      path: "../../components/render-blocks.lite",
+    },
+  ],
+  exports: {},
+  inputs: [],
+  meta: {},
+  refs: {},
+  state: {
+    getGutterSize:
+      "@builder.io/mitosis/method:getGutterSize() {\n  return typeof props.space === 'number' ? props.space || 0 : 20;\n}",
+    getColumns:
+      "@builder.io/mitosis/method:getColumns() {\n  return props.columns || [];\n}",
+    getWidth:
+      "@builder.io/mitosis/method:getWidth(index: number) {\n  const columns = getColumns(props,state,);\n  return columns[index]?.width || 100 / columns.length;\n}",
+    getColumnCssWidth:
+      "@builder.io/mitosis/method:getColumnCssWidth(index: number) {\n  const columns = getColumns(props,state,);\n  const gutterSize = getGutterSize(props,state,);\n  const subtractWidth = gutterSize * (columns.length - 1) / columns.length;\n  return `calc(${getWidth(props,state,index)}% - ${subtractWidth}px)`;\n}",
+    maybeApplyForTablet:
+      "@builder.io/mitosis/method:maybeApplyForTablet(prop: JSX.CSS['flexDirection']) {\n  const _stackColumnsAt = props.stackColumnsAt || 'tablet';\n\n  return _stackColumnsAt === 'tablet' ? prop : 'inherit';\n}",
+    columnsCssVars:
+      "@builder.io/mitosis/method:get columnsCssVars() {\n  const flexDir = props.stackColumnsAt === 'never' ? 'inherit' : props.reverseColumnsWhenStacked ? 'column-reverse' : 'column';\n  return {\n    '--flex-dir': flexDir,\n    '--flex-dir-tablet': maybeApplyForTablet(props,state,flexDir)\n  };\n}",
+    columnCssVars:
+      "@builder.io/mitosis/method:get columnCssVars() {\n  const width = '100%';\n  const marginLeft = '0';\n  return {\n    '--column-width': width,\n    '--column-margin-left': marginLeft,\n    '--column-width-tablet': maybeApplyForTablet(props,state,width),\n    '--column-margin-left-tablet': maybeApplyForTablet(props,state,marginLeft)\n  };\n}",
+  },
+  children: [
+    {
+      "@type": "@builder.io/mitosis/node",
+      name: "Host",
+      meta: {},
+      scope: {},
+      properties: {
+        class: "builder-columns div-Columns",
+      },
+      bindings: {
+        style: {
+          code: "columnsCssVars(props,state)",
+        },
+      },
+      children: [
+        {
+          "@type": "@builder.io/mitosis/node",
+          name: "div",
+          meta: {},
+          scope: {},
+          properties: {
+            _text: "\n      ",
+          },
+          bindings: {},
+          children: [],
+        },
+        {
+          "@type": "@builder.io/mitosis/node",
+          name: "For",
+          meta: {},
+          scope: {
+            For: ["column", "index"],
+          },
+          properties: {
+            _forName: "column",
+            _indexName: "index",
+          },
+          bindings: {
+            each: {
+              code: "props.columns",
+            },
+          },
+          children: [
+            {
+              "@type": "@builder.io/mitosis/node",
+              name: "div",
+              meta: {},
+              scope: {},
+              properties: {
+                class: "builder-column div-Columns-2",
+              },
+              bindings: {
+                style: {
+                  code: "{\n  width: getColumnCssWidth(props,state,index),\n  marginLeft: `${index === 0 ? 0 : getGutterSize(props,state,)}px`,\n  ...columnCssVars(props,state)\n}",
+                },
+                key: {
+                  code: "index",
+                },
+              },
+              children: [
+                {
+                  "@type": "@builder.io/mitosis/node",
+                  name: "div",
+                  meta: {},
+                  scope: {},
+                  properties: {
+                    _text: "\n            ",
+                  },
+                  bindings: {},
+                  children: [],
+                },
+                {
+                  "@type": "@builder.io/mitosis/node",
+                  name: "RenderBlocks",
+                  meta: {},
+                  scope: {},
+                  properties: {},
+                  bindings: {
+                    blocks: {
+                      code: "column.blocks",
+                    },
+                  },
+                  children: [],
+                },
+                {
+                  "@type": "@builder.io/mitosis/node",
+                  name: "div",
+                  meta: {},
+                  scope: {},
+                  properties: {
+                    _text: "\n          ",
+                  },
+                  bindings: {},
+                  children: [],
+                },
+              ],
+            },
+          ],
+        },
+        {
+          "@type": "@builder.io/mitosis/node",
+          name: "div",
+          meta: {},
+          scope: {},
+          properties: {
+            _text: "\n    ",
+          },
+          bindings: {},
+          children: [],
+        },
+      ],
+    },
+  ],
+  hooks: {},
+  context: {
+    get: {},
+    set: {},
+  },
+  name: "Columns",
+  subComponents: [],
+  types: [
+    "type Column = {\n  blocks: any; // TODO: Implement this when support for dynamic CSS lands\n\n  width?: number;\n};",
+    "type StackColumnsAt = 'tablet' | 'mobile' | 'never';",
+  ],
+  interfaces: [
+    "export interface ColumnProps {\n  columns?: Column[]; // TODO: Implement this when support for dynamic CSS lands\n\n  space?: number; // TODO: Implement this when support for dynamic CSS lands\n\n  stackColumnsAt?: StackColumnsAt; // TODO: Implement this when support for dynamic CSS lands\n\n  reverseColumnsWhenStacked?: boolean;\n}",
+  ],
+  propsTypeRef: "ColumnProps",
+};