bycoders-ui-react

This is bycoders_ ui library for react

Usage no npm install needed!

<script type="module">
  import bycodersUiReact from 'https://cdn.skypack.dev/bycoders-ui-react';
</script>

README

This is bycoders_ oficial React Ui-Kit library.

Usage

yarn add bycoders-ui-react

You'll need to wrap your application with a context to use this library:

  • React:

    // src/index.js

import { ThemeProvider, defaultTheme, ResetCSS } from 'bycoders-ui-react'

function MyApp() {
  return(
    <ThemeProvider theme={defaultTheme}>
      <ResetCSS />
      <Router />
      <OtherComponents />
    </ThemeProvider>
  )
}

export default MyApp

  • Next:

    // src/pages/_app.js

import { ThemeProvider, defaultTheme } from 'bycoders-ui-react'

function MyApp({ Component, pageProps }) {
  return(
    <ThemeProvider theme={defaultTheme}>
      <ResetCSS />
      <Component {...pageProps} />
    </ThemeProvider>
  )
}

export default MyApp

you should import Google's Inter font, which is the default font, in your <head/> tag:

<head>
  ...
  <link rel="preconnect" href="https://fonts.gstatic.com" />
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet" />
  ...
</head>

then you can use components like this:

// src/pages/foo.tsx

import React from 'react';
import { Input } from 'bycoders-ui-react';

export default function Foo() {
  return (
    <Input label="Your Label" error="Foo"/>
  );
}

Customize Theme

You can customize theme colors and add properties:

  • Adding new colors/properties:

    import { defaultTheme } from 'bycoders-ui-react';

const newTheme = {
  ...defaultTheme,
  foo: '#fff',
  baz: '#ABCDEF',
};

  • Customizing existing props:

    You can use BycodersTheme interface to view all properties of the theme.

    import { defaultTheme } from 'bycoders-ui-react';

const newTheme = {
  ...defaultTheme,
  textColor: '#F3F3F3',
};

  • Typescript

    If you're using Typescript maybe you should connect theme with styled-components:

    • If you're using legacy theme:

      // src/@types/styled-components.d.ts

import { BycodersTheme } from 'bycoders-ui-react';

declare module 'styled-components' {
  export interface DefaultTheme extends BycodersTheme {}
}

    • If you're using a custom theme:

      // src/styles/newTheme.ts

import { defaultTheme } from 'bycoders-ui-react';

const newTheme = {
  ...defaultTheme,
  textColor: '#F3F3F3',
};

      // src/@types/styled-components.d.ts

import { newTheme } from '../styles/newTheme';

type MyThemeType = typeof newTheme

declare module 'styled-components' {
  export interface DefaultTheme extends MyThemeType {}
}

Documentation

This project is documented on Storybook. You'll need to clone the project and execute storybook:

git clone git@github.com:ByCodersTec/ui-kit-react.git
yarn install
yarn storybook

Contribute

yarn install

To contribute, merge your desired PR to development and then:

git checkout development
git pull origin development
yarn bump-patch
git push origin development --follow-tags
git checkout master
git pull origin master
git merge development
git push origin master