@gx-ui/core v1.0.0

Gib-Ui Icons

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

📦 Install

Öncelikle eğer daha önce oluşturmadıysanız projenizin ana dizini içerisine .npmrc uzantılı bir dosya oluşturup aşağıdaki satırları içerisine kopyalamanız gerekmektedir.

strict-ssl=false
registry=http://10.251.55.7:2081/repository/npm-all/
https-proxy=http://proxy.ggm.bim:8080
proxy=http://proxy.ggm.bim:8080
noproxy=10.251.55.7, nexus-host, 172.28.*

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

Ö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

Gib-Ui Icons

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

📦 Install

Firstly, if you haven't already, you need to create a file named .npmrc in the root directory of your project and copy the following lines into it.

strict-ssl=false
registry=http://10.251.55.7:2081/repository/npm-all/
https-proxy=http://proxy.ggm.bim:8080
proxy=http://proxy.ggm.bim:8080
noproxy=10.251.55.7, nexus-host, 172.28.*

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

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