Instalasi Alurkerja UI

New Project

Untuk new project bisa menggunakan starter dibawah ini. starter ini sudah terinstall Alurkerja UI v1, sudah extends tema tailwindnya, sudah ada contoh unit testing nya, sudah di setup agar bisa check code quality nya menggunakan sonar, setup eslint & prettier, dan sudah includes snippet code alurkerja UI Alurkerja UI Starter

jangan lupa update versi alurkerja-ui nya dengan command yarn add -D alurkerja-ui@beta

Existing Project

1. Pastikan memenuhi Requiremend yang dibutuhkan seperti Node v18 ,React v18, React Router Dom v6, Vite v3, Tailwindcss

2. jalankan perintah yarn add alurkerja-ui atau npm install alurkerja-ui dsb

3. install juga plugin @tailwindcss/forms dan tambahkan di tailwind config

4. di tailwind config bagian content tambahkan lokasi alurkerja-ui terinstall contohnya './node_modules/alurkerja-ui/dist/**/*.{js,ts,jsx,tsx,mdx}'. kemudian untuk menggunakan warna2 alurkerja bisa di extend di tailwind config dan hasilnya kurang lebih seperti ini:

   /** @type {import('tailwindcss').Config} */
   
   const defaultTheme = require('tailwindcss/defaultTheme')
   
   export default {
     content: [
       './index.html',
       './src/**/*.{js,ts,jsx,tsx}',
       './node_modules/alurkerja-ui/dist/*.{js,ts,jsx,tsx}',
     ],
     theme: {
       extend: {
         fontFamily: { sans: ['Poppins', ...defaultTheme.fontFamily.sans] },
         colors: {
           black: '#3F4254',
           red: {
             alurkerja: '#F64E60',
           },
           orange: { alurkerja: '#FFA800' },
           purple: { alurkerja: '#9056FC' },
           blue: { alurkerja: '#586BE2' },
           'main-blue': { alurkerja: '#0095E8' },
           'tifany-blue': { alurkerja: '#17BCB4' },
           green: { alurkerja: '#50CD89' },
           'forst-white': { alurkerja: '#F3F6F9' },
           'light-blue': { alurkerja: '#E1F0FF' },
           black: {
             alurkerja: {
               1: '#1E1E2D',
               2: '#3F4254',
             },
           },
           gray: {
             alurkerja: {
               1: '#7E8299',
               2: '#B5B5C3',
               3: '#E4E6EF',
             },
           },
         },
       },
     },
     plugins: [
       require('@tailwindcss/forms')({
         strategy: 'class',
       }),
       require('tailwind-scrollbar')({ nocompatible: true }),
     ],
   }

5. import css alurkerja dengan menambahkan kode import 'alurkerja-ui/dist/style.css'

6. tambahkan AuthContext contoh:

   import React from 'react'
   import ReactDOM from 'react-dom/client'
   import { RouterProvider } from 'react-router-dom'
   import { AuthContext, ThemeContext } from 'alurkerja-ui'
   
   // routes
   import router from './routes/root'
   
   // styles
   import './index.css'
   import 'alurkerja-ui/dist/style.css'
   
   const axiosInstance = axios.create({
     baseURL: import.meta.env.VITE_API_URL,
   })
   
   ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
     <React.StrictMode>
       <AuthContext.Provider value={axiosInstance}>
           <RouterProvider router={router}/>
       </AuthContext.Provider>
     </React.StrictMode>
   )