beeblebrix-ui v0.5.2

Ark-UI

Ark-UI is component library for React JS.

Configuration

Add Dependency file in your project. (ex:Dependencies.ts) Then import as below;

import { Ark } from "ark-ui";

Extract necessary elements;

const buildComponent = Ark.hocs.buildComponent;
const components = Ark.components;

You can choose which theme and components variant will be used. To do that use buildComponent hoc for choosing variant of components then export them.

export const Button = buildComponent(components.button.getDefaultProfile());

Using Components

After configuring and exporting components you can use them anywhere. But you must import them first then you can use like as below.

import { Button } from "./Dependencies";

const App = () => {
  return (
    <div>
      <Button
        variant="tertiary"
        onClick={() => {
          alert("test");
        }}
      >
        test
      </Button>
    </div>
  );
};

Using Theme

To using theme like light or dark you should define context like below. If you want to change the theme or another config, all you have to do is change the state on moment you want.

const [configs, setConfigs] = useState({
  theme: Beeblebrix.themes.dark.default,
});

 const setThemeAsDark = () => {
    setConfigs({...configs, theme: Ark.base.themes.dark.default});
  }

return (
  <AppContext.Provider value={{ configs }}>
    <Button variant="primary">Primary</Button>
    <Button variant="secondary">Secondary</Button>
    <Button variant="tertiary">Tertiary</Button>
    <Button variant="primary" onClick={setThemeAsDark}>Set Theme As Dark</Button>
  </AppContext.Provider>
);