DOCSEARCHbyAlgolia
Submit Docs

Alurkerja Docs

website·Indexed 31 days ago

https://alurkerja-docs.vercel.app/

A library for building CRUD applications, featuring a suite of UI components including FormLowcode, TableLowcode, ReactHookWrapper, and various input elements like InputDate, InputYear, and PendingUpload.

Tokens
10.4K
Snippets
79
Records
87
Agent score
74%

What's inside Alurkerja

  2. Contribute to the Alurkerja project

    To contribute to Alurkerja, clone the repository from GitHub and follow the installation steps provided in the project's README file. The project uses a monorepo architecture with the following structure:

    • UI Components and Storybook development: packages/alurkerja-ui
    • Documentation (Next.js project): app/alurkerja-docs
    # Repository URL
https://github.com/shaddamalbz/alurkerja

  3. Use the Input component for basic text entry

    The Input component from alurkerja-ui is a styled wrapper around the standard HTML <input> tag. It supports all standard input attributes and behaviors, allowing it to be used exactly like a native input element.
    import { Input } from 'alurkerja-ui'

export const Example = () => {
	return <Input />
}

  5. Fetch and display data in a Select component

    To populate a Select component with remote data, fetch the data (e.g., using axios), map the response to the required { label, value } format, and use the isLoading prop to indicate the loading state.
    import { Select } from 'alurkerja-ui'
import axios from "axios"
import { useState, useEffect } from 'react'

export const SelectPage = () => {
	const [options, setOptions] = useState()
	const [isLoading, setIsLoading] = useState(false)
	
	useEffect(() => {
	  setIsLoading(true)
	  axios
	   .get('https://dummyjson.com/products')
	   .then((res) => {
	     setOptions(res.data.products.map((item: any) => ({ label: item.title, value: item.id })))
	   })
	   .finally(() => {setIsLoading(false)})
	}, [])

	return(
		<Select options={options} isLoading={isLoading} />
	)
}

  6. Implement a Skeleton loading placeholder

    The Skeleton component from alurkerja-ui is used to create placeholder shapes that indicate content is loading. It supports basic usage, custom dimensions, and different shapes via the variant prop.
    import { Skeleton } from 'alurkerja-ui'

export const LoadingPage = () => {
	return(
		<Skeleton />
	)
}

  7. Implement a basic FormLowcode component

    The FormLowcode component renders a form based on a specification provided via a URL. It requires integration with react-hook-form to manage form state and submission.
    import { FormLowcode } from 'alurkerja-ui'
import { useForm } from 'react-hook-form'

export const FormLowcodePage = () => {
	const { formState, handleSubmit, control, setValue } = useForm()

	return(
		<FormLowcode
		  title="Create"
		  baseUrl="https://alurkerja-ui-bot.vercel.app"
		  specPath="/api/data"
		  formState={formState}
		  handleSubmit={handleSubmit}
		  control={control}
		  setValue={setValue}
		/>
	)
}

  8. Migrate Alurkerja components from v0 to v1

    v1

    When migrating from v0 to v1, be aware of the following breaking changes and component updates:

    1. TableLowcode: In v1, features such as bulk actions, filtering, and searching are disabled by default. You must explicitly pass the corresponding props to enable these features.
    2. Component Renaming: The AlurkerjaForm component has been renamed to FormLowcode.
    3. Removed Components: The Wysiwyg component has been removed in v1.

  9. Customize TableLowcode buttons

    If the default buttons do not meet requirements, use the following props to provide custom renderers. These functions typically receive Modal, Button, and data as arguments.
    // Example for custom filter button
const customButtonFilter = (_Modal: () => JSX.Element, Button: (props: ButtonHTMLAttributes<HTMLButtonElement>) => JSX.Element) => {
  return <Button onClick={() => alert('filter clicked')} />
}

// Usage
<TableLowcode
  baseUrl='...'
  specPath='...'
  customButtonFilter={customButtonFilter}
  customButtonCreate={customButtonCreate}
  customButtonEdit={customButtonEdit}
  customButtonDetail={customButtonDetail}
/>

  10. Create a form using FormLowcodeLite

    The FormLowcodeLite component is used to generate forms based on a provided specification array. It handles the rendering of various input types but does not include built-in CRUD (Create, Read, Update, Delete) functions. Developers must handle the submission logic via the onSubmit prop.
    import { FormLowcodeLite } from 'alurkerja-ui'

export const FormLowcodeLitePage = () => {
	const spec = [
		{
			form_field_type: 'INPUT_TEXT',
			label: 'Nama',
			name: 'nama.tes',
			type: 'text',
		},
		{
			form_field_type: 'INPUT_TEXT',
			label: 'No. Hp',
			name: 'handphone',
			type: 'number',
		},
		{
			form_field_type: 'INPUT_TEXTAREA',
			label: 'Alamat',
			name: 'addres',
			type: 'text',
		},
		{
			form_field_type: 'INPUT_SWITCH',
			label: 'required',
			name: 'required',
			type: 'text',
		},
		{
			form_field_type: 'INPUT_SELECT',
			label: 'Tes',
			name: 'tes',
			type: 'text',
			select_options: {
				method: 'GET',
				option_key: 'id',
				option_label: 'nama',
				options: [
					{
						key: 1,
						label: 'Menu1',
					},
					{
						key: 2,
						label: 'Menu2',
					},
				],
			},
		},
	]

	return(
		<FormLowcodeLite
		  baseUrl="https://alurkerja-ui-bot.vercel.app"
		  onCancel={(_reset) => {}}
		  onSubmit={(data) => console.log(data)}
		  spec={spec}
		/>
	)
}

  11. Configure Tailwind CSS for alurkerja-ui

    To properly integrate alurkerja-ui, update your tailwind.config.js to include the library's distribution files in the content array. This ensures Tailwind scans the UI components for classes. Additionally, the library relies on a specific set of brand colors (alurkerja palette) and the @tailwindcss/forms plugin configured with the class strategy.
    /** @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',
          },
        },
        grey: {
          alurkerja: {
            1: '#7E8299',
            2: '#B5B5C3',
            3: '#E4E6EF',
          },
        },
      },
    },
  },
  plugins: [
    require('@tailwindcss/forms')({
      strategy: 'class',
    }),
  ],
}

  12. Configure FormLowcode layout and grid

    Control the form layout using columnNumber to set the total number of columns and columnSpan to define how many columns a specific field should occupy (mapped by field name).
    <FormLowcode
  // ... other props
  columnNumber={2}
  columnSpan={{ name: 2 }}
/>