lodash#upperFirst TypeScript Examples

export async function generateExportStatement(model: APIModel): Promise<string> {
  // Export all enums and interfaces
  const sourceFile = new Project({
    tsConfigFilePath: TS_CONFIG_FILE_PATH,
    libFolderPath: TS_LIB_FOLDER_PATH,
  }).getSourceFileOrThrow(`${model.outputPath}/${API_MODEL_FILE_NAME}`)

  const exports = [...sourceFile.getEnums(), ...sourceFile.getInterfaces()]
    .map(
      (declaration) =>
        `${declaration.getName()} as ${upperFirst(
          camelCase(model.dirname),
        )}${declaration.getName()}`,
    )
    .join(', ')

  return `export { ${exports} } from './${model.dirname}'`
}

export function GeneralFormEditor({
  nodeUid,
}: EditorComponentProps): React.ReactElement {
  const node = useBuilderNode<GeneralFormProperties>({ nodeUid });

  const { layout = LayoutType.Horizontal } = node.$$parsedProperties;

  return (
    <EditorContainer nodeUid={nodeUid} type={EditorBrickType.CONTAINER}>
      <div
        className={className(
          styles.form,
          formSharedStyle[`formEditor${upperFirst(layout)}`]
        )}
      >
        <SlotContainer
          nodeUid={nodeUid}
          slotName="items"
          dropZoneBodyStyle={
            layout !== LayoutType.Inline
              ? { gridTemplateColumns: "minmax(0, 1fr)" }
              : {}
          }
        />
      </div>
    </EditorContainer>
  );
}

generateAPIClientClassname = (apiClientFileName: string): string =>
  upperFirst(camelCase(apiClientFileName))

options = Object.values(Operator).map(item => ({ label: upperFirst(item), value: item }))

transformTypeName(typename: string) {
    return this.options.camelCase ? upperFirst(camelCase(typename)) : typename;
  }

export function FunctionDebuggerStatusbar({
  coverage,
  testStats,
}: FunctionDebuggerStatusbarProps): React.ReactElement {
  const coverageIsOk = coverage && coverage.status !== "failed";
  const totalCoverage = useMemo(
    () => (coverageIsOk ? getTotalCoverage(coverage) : null),
    [coverageIsOk, coverage]
  );
  const coverageStats = useMemo(
    () => (coverageIsOk ? getCoverageStats(coverage) : null),
    [coverageIsOk, coverage]
  );

  return (
    <div className={styles.debuggerStatusbar} data-override-theme="dark">
      <div className={styles.coverage}>
        {coverage == null ? (
          <span>
            <span className={styles.coverageIcon}>
              <QuestionOutlined />
            </span>
            <span>Coverage: expired</span>
          </span>
        ) : testStats?.failed > 0 ? (
          <span className={styles.hasFailedTests}>
            <span className={styles.coverageIcon}>
              <WarningOutlined />
            </span>
            <span>
              {testStats.failed}/{testStats.total} tests failed!
            </span>
          </span>
        ) : coverageIsOk ? (
          <>
            <span
              className={
                totalCoverage < 60
                  ? styles.coverageLow
                  : totalCoverage < 90
                  ? styles.coverageMedium
                  : totalCoverage < 100
                  ? styles.coverageHigh
                  : styles.coverageFull
              }
            >
              <span className={styles.coverageIcon}>
                {totalCoverage < 100 ? <WarningOutlined /> : <CheckOutlined />}
              </span>
              <span>Coverage: {totalCoverage}%</span>
            </span>
            {Object.entries(coverageStats).map(
              ([type, { covered, total, percentage }]) => (
                <span key={type} className={styles.subCoverage}>
                  <span>{upperFirst(type)}: </span>
                  <span>
                    {percentage}% ({covered}/{total})
                  </span>
                </span>
              )
            )}
          </>
        ) : (
          <span className={styles.coverageFailed}>
            <span className={styles.coverageIcon}>
              <CloseOutlined />
            </span>
            <span>{(coverage as RawCoverageFailed).error}</span>
          </span>
        )}
      </div>
    </div>
  );
}

export function getBuilderNode(
  nodeData: BuilderRouteOrBrickNode,
  nodeUid: number,
  isTemplateInternalNode?: boolean
): BuilderRuntimeNode {
  const matchedSelectors: string[] = [];

  if (nodeData.brick) {
    matchedSelectors.push((nodeData.brick as string).replace(/\./g, "\\."));
  }

  const normalized = normalizeBuilderNode(nodeData);

  const jsonFieldsInBrick = ["properties", "events", "lifeCycle"];
  const parsedFields: [string, unknown][] = [];
  let parsedId: string;
  let parsedTestId: string;

  for (const field of jsonFieldsInBrick) {
    const parsed = cloneDeep(
      (normalized as Record<string, unknown>)?.[field]
    ) as Record<string, unknown>;
    parsedFields.push([`$$parsed${upperFirst(field)}`, parsed ?? {}]);

    if (field === "properties") {
      let tempParsedId: string;
      let tempParsedTestId: string;
      if (
        ((tempParsedTestId = (parsed?.dataset as Record<string, string>)
          ?.testid),
        typeof tempParsedTestId === "string") &&
        !computationRegExp.test(tempParsedTestId)
      ) {
        parsedTestId = tempParsedTestId;
      } else if (
        ((tempParsedId = parsed?.id as string),
        typeof tempParsedId === "string") &&
        !computationRegExp.test(tempParsedId)
      ) {
        parsedId = tempParsedId;
        matchedSelectors.push(`#${parsedId}`);
      }
    }
  }

  return Object.fromEntries(
    Object.entries(nodeData)
      .filter((entry) => !nodeIgnoreFields.includes(entry[0]))
      .concat([
        [
          "alias",
          nodeData.alias ||
            (isBrickNode(nodeData)
              ? nodeData.ref ||
                parsedTestId ||
                parsedId ||
                nodeData.brick.split(".").pop()
              : undefined),
        ],
        ["$$uid", nodeUid],
        ["$$matchedSelectors", matchedSelectors],
        ["$$isTemplateInternalNode", isTemplateInternalNode],
        ["$$normalized", normalized],
      ])
      .concat(parsedFields)
  ) as BuilderRuntimeNode;
}

makePrefixedFullName = (name: string, prefix?: string) => {
  return !prefix ? name : prefix + upperFirst(name);
}

normalizeDefinitionName = (name: string) =>
  upperFirst(name.replace(/\.(\w)/g, (_, $1) => $1.toUpperCase()))

export function LegacyVisualPropertyForm(
  props: VisualPropertyFormProps,
  ref: React.Ref<visualFormUtils>
): React.ReactElement {
  const theme = useCurrentTheme();
  const {
    projectId,
    labelIcon,
    propertyTypeList,
    brickProperties,
    brickInfo,
    emptyConfig,
    menuSettingClick,
  } = props;
  const [form] = Form.useForm();
  const [typeList, setTypeList] = useState<UnionPropertyType[]>(
    mergeProperties(propertyTypeList, brickProperties)
  );

  useImperativeHandle(ref, () => ({
    validateFields: form.validateFields,
    resetPropertyFields: (
      typeList: PropertyType[],
      properties: BrickProperties
    ) => {
      const restValue = mergeProperties(typeList, properties);
      setTypeList(restValue);
      form.resetFields();
    },
    getCurTypeList: (): UnionPropertyType[] => {
      return typeList?.map((item) => pick(item, ["name", "type", "mode"]));
    },
  }));

  useEffect(() => {
    const newTypeList = mergeProperties(propertyTypeList, brickProperties);
    setTypeList(newTypeList);

    const newValue = calculateValue(
      propertyTypeList,
      brickProperties,
      newTypeList
    );
    form.setFieldsValue(newValue);
  }, [propertyTypeList, brickProperties]);

  const handleLabelClick = (name: string): void => {
    const selected = typeList.find((item) => item.name === name);
    const index = typeList.findIndex((item) => item.name === name);
    const nextMode =
      selected.mode === ItemModeType.Advanced
        ? ItemModeType.Normal
        : ItemModeType.Advanced;

    let value = selected.value;
    if (nextMode === ItemModeType.Normal) {
      if (supportMenuType.includes(selected.type as string)) {
        value = matchNoramlMenuValue(value);
      }
    } else if (isNil(selected.value)) {
      value = "";
    } else {
      value = yamlStringify(selected.value);
    }
    form.setFieldsValue({
      [name]: value,
    });
    const newTypeList = update(typeList, {
      $splice: [[index, 1, { ...selected, mode: nextMode }]],
    });
    setTypeList(newTypeList);
  };

  const renderLabel = (
    item: UnionPropertyType,
    hideIcon?: boolean
  ): React.ReactElement => {
    return (
      <span>
        <Tooltip title={item.description}>{item.name}</Tooltip>{" "}
        {!hideIcon && labelIcon && (
          <span
            className={styles.iconContainer}
            onClick={() => handleLabelClick(item.name)}
          >
            <GeneralIcon
              icon={
                item.mode === ItemModeType.Advanced
                  ? labelIcon?.advanced
                  : labelIcon.normal
              }
            />
          </span>
        )}
      </span>
    );
  };

  const renderEditorItem = (item: UnionPropertyType, hideIcon?: boolean) => {
    return (
      <CodeEditorFormItem
        key={item.name}
        name={item.name}
        label={renderLabel(item, hideIcon)}
        required={item.required === Required.True}
        theme={theme === "dark-v2" ? "monokai" : "tomorrow"}
        jsonSchema={item?.jsonSchema}
        schemaRef={item?.schemaRef}
        mode="brick_next_yaml"
      />
    );
  };

  const renderStringItem = (item: UnionPropertyType): React.ReactElement => {
    return item.mode === ItemModeType.Advanced ? (
      renderEditorItem(item)
    ) : (
      <Form.Item
        key={item.name}
        label={renderLabel(item)}
        name={item.name}
        rules={[
          {
            required: item.required === Required.True,
            message: `请输入${item.name}`,
          },
        ]}
      >
        <Input />
      </Form.Item>
    );
  };

  const renderBooleanItem = (item: UnionPropertyType): React.ReactElement => {
    return item.mode === ItemModeType.Advanced ? (
      renderEditorItem(item)
    ) : (
      <Form.Item
        key={item.name}
        label={renderLabel(item)}
        name={item.name}
        rules={[
          {
            required: item.required === Required.True,
            message: `请输入${item.name}`,
          },
        ]}
      >
        <Radio.Group>
          <Radio value={true}>true</Radio>
          <Radio value={false}>false</Radio>
        </Radio.Group>
      </Form.Item>
    );
  };

  const renderInputNumberItem = (
    item: UnionPropertyType
  ): React.ReactElement => {
    return item.mode === ItemModeType.Advanced ? (
      renderEditorItem(item)
    ) : (
      <Form.Item
        key={item.name}
        label={renderLabel(item)}
        name={item.name}
        rules={[
          {
            required: item.required === Required.True,
            message: `请输入${item.name}`,
          },
        ]}
      >
        <InputNumber />
      </Form.Item>
    );
  };

  const renderStringListItem = (
    item: UnionPropertyType
  ): React.ReactElement => {
    return item.mode === ItemModeType.Advanced ? (
      renderEditorItem(item)
    ) : (
      <Form.Item
        key={item.name}
        label={renderLabel(item)}
        name={item.name}
        rules={[
          {
            required: item.required === Required.True,
            message: `请输入${item.name}`,
          },
        ]}
      >
        <Select mode="tags" />
      </Form.Item>
    );
  };

  const renderIconItem = (item: UnionPropertyType): React.ReactElement => {
    return (
      <IconSelectFormItem
        key={item.name}
        name={item.name}
        label={renderLabel(item, true)}
        required={item.required === Required.True}
      />
    );
  };

  const renderCodeEditorItem = (item: PropertyType): React.ReactElement => {
    return renderEditorItem(item, true);
  };

  const renderColorItem = (item: PropertyType): React.ReactElement => {
    return (
      <ColorEditorItem
        key={item.name}
        name={item.name}
        label={renderLabel(item, true)}
        required={item.required === Required.True}
      />
    );
  };

  const renderMenuItem = (item: UnionPropertyType): React.ReactElement => {
    return item.mode === ItemModeType.Advanced ? (
      renderEditorItem(item)
    ) : (
      <MenuEditorItem
        projectId={projectId}
        key={item.name}
        name={item.name}
        label={renderLabel(item)}
        required={item.required === Required.True}
        menuSettingClick={menuSettingClick}
      />
    );
  };

  const getFormItem = (item: PropertyType): React.ReactElement => {
    switch (item.type) {
      case "string":
        return renderStringItem(item);
      case "string[]":
        return renderStringListItem(item);
      case "number":
        return renderInputNumberItem(item);
      case "boolean":
        return renderBooleanItem(item);
      case "MenuIcon":
        return renderIconItem(item);
      case "Color":
        return renderColorItem(item);
      case "Menu":
      case "SidebarSubMenu":
        return renderMenuItem(item);
      default:
        return renderCodeEditorItem(item);
    }
  };

  return isEmpty(typeList) ? (
    <Empty
      className={styles.empty}
      description={emptyConfig?.description}
      image={theme === "dark-v2" ? <DarkEmpty /> : Empty.PRESENTED_IMAGE_SIMPLE}
      imageStyle={emptyConfig?.imageStyle}
    />
  ) : (
    <Form
      name="propertyForm"
      layout="vertical"
      form={form}
      onValuesChange={props.onValuesChange}
      initialValues={calculateValue(
        propertyTypeList,
        brickProperties,
        typeList
      )}
    >
      <Collapse ghost defaultActiveKey="0" className={styles.panelContainer}>
        {groupByType(typeList)?.map(([category, list], index) => {
          return (
            <Collapse.Panel
              header={upperFirst(category)}
              key={index}
              forceRender={true}
            >
              {list.map((item) => getFormItem(item))}
            </Collapse.Panel>
          );
        })}

        <Collapse.Panel
          className={styles.otherPanel}
          forceRender={true}
          header={upperFirst(OTHER_FORM_ITEM_FIELD)}
          key={OTHER_FORM_ITEM_FIELD}
        >
          <CodeEditorFormItem
            name={OTHER_FORM_ITEM_FIELD}
            label={
              brickInfo?.type === "template"
                ? "other params"
                : "other properties"
            }
            mode="brick_next_yaml"
            maxLines={Infinity}
          />
        </Collapse.Panel>
      </Collapse>
    </Form>
  );
}

setupCrudResolvers = <
  ModelName extends keyof Helpers.GetGen<"outputs"> & string,
>(
  { extendType, arg, intArg },
  resourceName: ModelName,
  {
    printSecurityWarning = true,
    customize,
    aliasPrefix,
    enableOrderByRelation = false,
  }: ResourceOptions<ModelName> & CommonOptions = {},
) => {
  const typeName = upperFirst(resourceName);

  const queryName = lowerFirst(resourceName);
  const queryAllName = pluralize(queryName);
  const queryCountName = `${pluralize(queryName)}Count`;

  const mutations = [
    { name: `createOne${typeName}`, type: "createOne" },
    { name: `updateOne${typeName}`, type: "updateOne" },
    { name: `updateMany${typeName}`, type: "updateMany" },
    { name: `upsertOne${typeName}`, type: "upsertOne" },
    { name: `deleteOne${typeName}`, type: "deleteOne" },
    { name: `deleteMany${typeName}`, type: "deleteMany" },
  ];
  if (process.env.NODE_ENV === "development" && printSecurityWarning) {
    const queries = [queryName, queryAllName, queryCountName].map((n) =>
      makePrefixedFullName(n, aliasPrefix),
    );
    console.info("");
    console.info(
      `☝ The following resolvers were defined for the resource '${resourceName}' to make it compatible for react-admin`,
    );

    console.info(`Queries:     ${queries.join(" ")}`);
    console.info(`Mutations:   ${mutations.map((m) => m.name).join(" ")}`);

    console.info(
      "☝ please make sure to restirct unauthorized access to these queries using graphq-shield",
    );
    console.info("");
  }
  return {
    Query: extendType({
      type: "Query",
      definition(t) {
        const oneConfig = {
          alias: makePrefixedFullName(queryName, aliasPrefix),
        };
        t.crud[queryName](customize?.one?.(oneConfig as any) ?? oneConfig);
        const manyConfig = {
          filtering: true,
          pagination: true,
          ordering: true,
          alias: makePrefixedFullName(queryAllName, aliasPrefix),
        };
        t.crud[queryAllName](
          customize?.many?.(manyConfig as any) ?? manyConfig,
        );

        t.int(makePrefixedFullName(queryCountName, aliasPrefix), {
          args: {
            where: arg({
              type: `${typeName}WhereInput`,
            }),
            orderBy: arg({
              type: enableOrderByRelation
                ? `${typeName}OrderByWithRelationInput`
                : `${typeName}OrderByInput`,
            }),
            skip: intArg({}),

            cursor: arg({
              type: `${typeName}WhereUniqueInput`,
            }),
            take: intArg({}),
          },

          resolve(root, args, { prisma, db }) {
            return (prisma ?? db)[queryName].count(args);
          },
        });
      },
    }),

    Mutation: extendType({
      type: "Mutation",
      definition(t) {
        mutations.forEach((mutation) => {
          const options = {
            alias: makePrefixedFullName(mutation.name, aliasPrefix),
          };
          t.crud[mutation.name](
            customize?.[mutation.type]?.(options) ?? options,
          );
        });
      },
    }),
  };
}