This package has been deprecated

Author message:

Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

@gib-ui/core

Hızlı geliştirme, kolay bakım ve erişilebilirlik için optimize edilmiş bir bileşen kütüphanesi.

Amacımız, GİB-UI tasarım sistemini kullanan uygulamalar için en uygun kullanıcı deneyimini sunmak üzere titizlikle tasarlanmış ve geliştirilmiş bir UI kütüphanesi sunmaktır. Tasarım ilkelerini ve geliştirme uygulamalarını dikkatli bir şekilde değerlendirerek, GİB tasarım sistemiyle sorunsuz bir şekilde uyum sağlayan ve uygulama kullanıcıları için genel kullanılabilirliği artıran sorunsuz ve kullanıcı dostu bir arayüz sağlamayı amaçlıyoruz.

Gib-Ui Icons

@gib-ui/icons SvgIcon bileşenleri olarak kullanıma hazır 2.100'den fazla ikon içerir.

📦 Install

gib-ui/core ve gib-ui/icons kütüphanelerini yüklemek için:

npm install @gib-ui/core

npm install @gib-ui/icons

yarn add @gib-ui/core

yarn add @gib-ui/icons

pnpm add @gib-ui/core

pnpm add @gib-ui/icons

Bu şekilde gib-ui bileşenleri ve ikonları react projenizin içinde kullanıma hazır olacaktır.

🔨 Usage

import { Button } from "@gib-ui/core";
import { Delete } from "@gib-ui/icons";

export default () => (
  <>
    <Button buttontype="primary">
      <Delete />
    </Button>
  </>
);

✨ Features

• 🎨 İyi tasarlanmış, özelleştirilebilir React bileşenleri.
• 🌍 Internationalization desteği.
• ⭐ Sorunsuz entegrasyon için güvenilir statik tipler sağlayan TypeScript ile yazıldı.

✍️ Custom Hooks

useWindowSize

useWindowSize ile tarayıcı penceresinin boyutlarını takip edin.

Örnek Kullanım

import { useWindowSize } from "@gib-ui/core";

const App = () => {
  const size = useWindowSize();
  // Your component logic here, utilizing width and height values
  return (
    <div>
      The current window dimensions are:
      <p>Width: {width}px</p>
      <p>Height: {height}px</p>
    </div>
  );
};

🔗 Linkler

• Storybook Documentation
• Figma Design Document

🤝 Geliştiriciler

• Erhan Külekci - Frontend Team Lead @erhan.kulekci
• Berkay Yüksel - Frontend Developer @berkay.yuksel
• Funda Kartal - Frontend Developer @funda.kartal
• Umut Güler - Frontend Developer @umut.guler

---

EN

A component library optimized for fast development, easy maintenance, and accessibility. Just import and go—no configuration required.

Our objective is to deliver a meticulously designed and developed UI library, tailored to offer the optimal user experience for applications utilizing the GİB-UI design system. Through careful consideration of design principles and development practices, we aim to provide a seamless and user-friendly interface that aligns seamlessly with the GİB design system, enhancing the overall usability for application users.

Gib-Ui Icons

@gib-ui/icons includes the 2,100+ icons as SvgIcon components.

📦 Install

To install gib-ui/core with all its components and gib-ui/icons run:

npm install @gib-ui/core

npm install @gib-ui/icons

yarn add @gib-ui/core

yarn add @gib-ui/icons

pnpm add @gib-ui/core

pnpm add @gib-ui/icons

This way gib web components and icons will be ready to use inside your react project.

🔨 Usage

import { Button } from "@gib-ui/core";
import { Delete } from "@gib-ui/icons";

export default () => (
  <>
    <Button buttontype="primary">
      <Delete />
    </Button>
  </>
);

✨ Features

• 🌟 Enterprise-class UI designed for web applications.
• 📦 A set of high-quality React components out of the box.
• 🔧 Comprehensive suite of design assets and developer utilities.
• ⭐ Written in TypeScript, ensuring reliable static types for seamless integration.
• 🌍 Internationalization support.
• 🎨 Powerful theme customization.

✍️ Custom Hooks

useWindowSize

Track the dimensions of the browser window with useWindowSize.

Example usage

import { useWindowSize } from "@gib-ui/core";

const App = () => {
  const size = useWindowSize();
  // Your component logic here, utilizing width and height values
  return (
    <div>
      The current window dimensions are:
      <p>Width: {width}px</p>
      <p>Height: {height}px</p>
    </div>
  );
};

🔗 Links

• Storybook Documentation
• Figma Design Document

🤝 Authors

• Erhan Külekci - Frontend Team Lead @erhan.kulekci
• Berkay Yüksel - Frontend Developer @berkay.yuksel
• Funda Kartal - Frontend Developer @funda.kartal
• Umut Güler - Frontend Developer @umut.guler