@mertcankocak/ui

Kişisel kullanım için React + TypeScript UI bileşen paketi. Şimdilik sadece Dropdown wrapper içerir.

Kurulum

npm i @mertcankocak/ui

Kullanım

import * as React from "react";
import {
  Dropdown,
  MultiSelect,
  type DropdownOption,
  type MultiSelectOption,
} from "@scarfe/ui";

const options: DropdownOption[] = [
  { label: "Türkiye", value: "TR" },
  { label: "Almanya", value: "DE" },
];

export function Example() {
  const [country, setCountry] = React.useState("");
  const [countries, setCountries] = React.useState<string[]>([]);

  const multiOptions: MultiSelectOption[] = [
    { label: "İstanbul", value: "istanbul" },
    { label: "Ankara", value: "ankara" },
    { label: "İzmir", value: "izmir" },
  ];

  return (
    <>
      <Dropdown
        options={options}
        value={country}
        onValueChange={setCountry}
        placeholder="Ülke seç"
        aria-label="Country"
      />

      <MultiSelect
        options={multiOptions}
        values={countries}
        onValuesChange={setCountries}
        aria-label="Cities"
        size={3}
      />
    </>
  );
}

Formik + MUI örneği (FormikTextField)

FormikTextField kullanmak için consumer projende şunlar kurulu olmalı: formik, @mui/material, @emotion/react, @emotion/styled, lodash.debounce.

import { Formik, Form } from "formik";
import { FormikTextField } from "@scarfe/ui";

export function ExampleFormik() {
  return (
    <Formik initialValues={{ city: "" }} onSubmit={() => {}}>
      <Form>
        <FormikTextField
          name="city"
          label="City"
          fieldToSearch="city"
          onSuggestionSearch={async (_field, term) => {
            return ["Istanbul", "Ankara", "Izmir"].filter((x) =>
              x.toLowerCase().includes(term.toLowerCase())
            );
          }}
        />
      </Form>
    </Formik>
  );
}

Formik + MUI örneği (FormikDropdown)

import { Formik, Form } from "formik";
import { FormikDropdown } from "@scarfe/ui";

export function ExampleDropdown() {
  return (
    <Formik initialValues={{ country: "" }} onSubmit={() => {}}>
      <Form>
        <FormikDropdown
          name="country"
          label="Country"
          placeholder="Seçiniz"
          options={[
            { label: "Türkiye", value: "TR" },
            { label: "Almanya", value: "DE" },
          ]}
        />
      </Form>
    </Formik>
  );
}

Build

npm run build

Yayınlama (tamamen ücretsiz)

NPM'e public paket yayınlamak ücretsizdir.

1. İsim çakışmaması için package.json içindeki "name" alanını kendine göre değiştir.
2. NPM hesabınla giriş yap:

npm login

3. Public yayınla:

npm publish --access public