Type keyword

Start Developing

OneFish Design System provides a seamless maker experience from design to development to delivery. Dive into the OneFish Design System UI code libraries with these easy steps.

Pick your platform

Bring your app to your audience where and when they need it. OneFish Design System’s cohesive design language is carried through each platform-specific OneFish Design System UI library to ensure you can build the same great experiences across one platform or across them all.

Onefish Farmer Facing Documentation

OneFish Farmer Facing come to help you to build eFishery app ecosystem wrapped by Chakra UI based by our design language system.
Farmer Facing
Read our component documentation to create fully accessible
Disclaimer
The fastest way to build UI Kit is just use what big community build, and modify it for our use-cases, and we choose Chakra UI to build it. With the concept above, this documentation just showing what we make and modify. So, the first thing is look at Chakra UI documentation. If you don't find what you're looking for, please read this documentation. Found bug or feature request? please direct message to @jun @villian @zeihan aulia on slack or mention @core-softeng
Post-install
Register balong to your .yarnrc
npm config set //balong.efishery.com/:_authToken=<token>
npm config set registry=https://balong.efishery.com
npm config set always-auth=true
Grab token at Bitwarden vault with name "verdaccio balong token", ask to Infra Team to get Bitwarden account.
Installation guide
yarn add @efishery/onefish --registry https://balong.efishery.com
and then install peer dependencies
yarn add @chakra-ui/react@^1.8.8 @chakra-ui/icons @chakra-ui/system @emotion/react@^11 @emotion/styled@^11 framer-motion@^4.1.17 @fontsource/inter

Add to your project

create-react-app
We need to set up the
OnefishProvider
at the root applications. In this example, we assume the root of applications in
src/index.js

import '@fontsource/inter'

import { OneFishProvider } from '@efishery/onefish'

function App({ Component, pageProps }) {

return (

<OneFishProvider>

<OurApplicationHere />

</OneFishProvider>

)

}

export default App

NextJs

Provider Setup
We need to set up the OneFishProvider at the root applications, for NextJs add the OneFishProvider in src/_app.js or src/_app.tsx (for typescript).

import { OnefishProvider } '@chakra-ui/react'

function MyApp({ Component, pageProps }) {

return (

<OneFishProvider>

<Components {...pageProps} />

</OneFishProvider>

)

}

export default MyApp

Color Mode Script
We need to setup ColorModeScript by Chakra-UI when we want to setting initial color mode. create or update pages/_document.jsx or pages/_document.tsx. In this example we use
dark

import { ColorModeScript } from '@chakra-ui/react'

import NextDocument { Html, Head, Main, NextScript } from 'next/document'

export default class Document extends NextDocument {

render() {

return (

<Html lang='en'>

<Head />

<body>

<ColorModeScript initialColorMode={'dark'} />

<Main />

<body />

</html>

)

}

}