@instabuy/chakra-extension-rita v0.7.0-alpha.9

Chakra Extension Rita

This library is based on Chakra UI library. The extension purpose is to fit in Instabuy design system. for the Next.js projects. The design system can be viewed in Intabuy's Storybook.

Installation

Inside your Next.js project, install the Chakra Extension and the typings generator by running:

yarn add @instabuy/chakra-extension-rita

Set up Provider

For Chakra Extension Rita to work correctly, you need to set up the ChakraProvider at the root of your application. Go to the root of your application and do this:

// pages/_app.tsx

import { ChakraProvider, ibTheme } from "@instabuy/chakra-extension-rita";

function MyApp({ Component, pageProps }) {
  return (
    <ChakraProvider theme={ibTheme}>
      <Component {...pageProps} />;
    </ChakraProvider>
  );
}

export default MyApp;

Customizing Theme

Chakra Extension Rita is built to have some prebuilt customizations, by default, the defaultTheme is declared as:

export const defaultTheme = extendTheme(
	{
		direction: 'ltr',
		...foundations, // foundations overrides.
		styles, // styles overrides.
		config: {
	    useSystemColorMode: false,
	    initialColorMode: 'light',
	    cssVarPrefix: 'ib',
	},
	withTypography({ title: 'Poppins', body: 'Poppins' }),
);

Chakra UI, by default has some theme extensions. Chakra Extension Rita add the following theme extensions:

• withTypography

When adding new components, component variations, sizes, colors and other theme foundations, you can extend the internal theme typings to provide autocomplete for your application theme. Check Chakra UI official documentation.

Contribute

This project was scaffolded by TSDX and uses Git Flow as the default workflow.

The project is automaticaly publish in NPM when a new tag is pushed to GitHub. But, the workflow isn't configured to published the Instabuy's Storybook documentation. To publish the storybook documentation, don't forget to build the static files folder with: yarn build-storybook. After pushing the changes to the master branch in GitHub, it is necessary to trigger the workflow Publish Storybook in the actions tab.

Commands

Develop the new features in /src folder and build stories for them in stories folder. The recommended workflow is to run the storybook while developing:

yarn storybook

NOTE: Stories should reference the components as if using the library. This means importing from the root project directory. This has been aliased in the tsconfig and the storybook webpack config as a helper.

Configuration

Code quality is set up for you with prettier, husky, and lint-staged. Adjust the respective fields in package.json accordingly.

Jest

Jest tests are set up to run with yarn test.

Bundle analysis

Calculates the real cost of your library using size-limit with yarn size and visulize it with yarn analyze.

Setup Files

This is the folder structure we set up for you:

/src
  index.tsx         # Library exports.
  /theme            # Chakra theme customization.
  /themeExtensions  # Theme extensions.
  /components       # Components not presented in Charka UI.
/test               # Tests.
/stories            # Stories to Storybook.
/.storybook
  main.js
  preview-head.html # Fonts imports
  preview.tsx