@liquidpass/liquid-ai-components

Introdução

O RisKnow Components é uma biblioteca de componentes React e ícones no padrão do Design System da RisKnow. É feita com base nos componentes do Material UI, que foram modificados para ficar com o estilo desejado. É importante ter um bom entendimento sobre como a modificação do tema padrão do Material UI é feita.

Data da última revisão do README: 20/04/2023. Revisado por: Gabriel Kauer

Utilização

Para utilizar os componentes dentro da aplicação, adicione a biblioteca como dependência:

"dependencies": {
  "@liquidpass/liquid-ai-components": "^x.x.x",
}

Obs: a versão do pacote deve estar de acordo.

E então importe os componentes que deseja usar dentro do seu código:

import { RknTypography } from "@liquidpass/liquid-ai-components";

function App() {
  return <RknTypography>Texto RisKnow</RknTypography>;
}

Todos os componentes possuem a mesma API das suas versões-base no Material UI, e podem ser customizados usando a prop sx:

import { RknTypography } from "@liquidpass/liquid-ai-components";

function App() {
  return (
    <RknTypography
      sx={{
        color: "rgba(33, 36, 42, 1)",
        fontSize: "14px",
        borderTop: "1px solid rgba(0, 0, 0, 1)",
        px: 1,
      }}
    >
      Texto RisKnow
    </RknTypography>
  );
}

Desenvolvimento

Você pode iniciar o storybook rodando o comando abaixo na pasta raíz do repositório:

yarn dev:risknow-components

Adicionando novos componentes

Comece criando uma pasta para o componente dentro de src/components. Dentro dela, crie um arquivo NomeDoComponent.tsx:

// NomeDoComponent/NomeDoComponent.tsx
import React from "react";

type NomeDoComponentProps = {
  // Declaração de props aqui
};

export default function NomeDoComponent(props: NomeDoComponentProps) {
  return <>Meu componente</>;
}

Obs: ao criar ícones, crie dentro da pasta src/icons.

Geralmente ele irá extender um component do Material UI:

// components/NomeDoComponent/NomeDoComponent.tsx
import React from "react";
import { Box, BoxProps } from "@mui/material";

interface NomeDoComponentProps extends BoxProps {
  myCustomProp: string;
}

export default function NomeDoComponent(props: NomeDoComponentProps) {
  return (
    <Box sx={{ backgroundColor: "rgba(255, 238, 221, 1)" }} myCustomProp="Foo">
      Meu component
    </Box>
  );
}

É necessário criar um arquivo index.js que faça o export do componente para fora da pasta:

// components/MyComponent/index.ts
export { default } from "./NomeDoComponent";

Em seguida, é necessário declarar o componente recém-criado dentro do index.js da biblioteca:

// components/index.ts
export { default as NomeDoComponent } from "./NomeDoComponent";

Com isso, o componente está pronto para ser usado. Basta realizar o build da biblioteca, rodando o comando abaixo na pasta raíz do repositório:

yarn build:risknow-components

É recomendado criar um story para o component para que ele seja mais facilmente testado e visualizado:

// components/NomeDoComponent/NomeDoComponent.stories.tsx
import React from "react";
import NomeDoComponent from "./NomeDoComponent";

export default {
  title: "NomeDoComponent",
  component: NomeDoComponent,
  argTypes: {
    myCustomProp: {
      control: "boolean",
    },
  },
};

const Template = (args: { [key: string]: any }) => (
  <>
    <RknComponent {...args} />
  </>
);

export const MyStory = Template.bind({});

MyStory.decorators = [(Story: any) => <Story />];

MyStory.args = {
  children: "Meu componente",
  myCustomProps: true,
};

Geralmente, um componente é feito tendo variações de tema. Neste caso, use o themeProvider:

// components/NomeDoComponent/NomeDoComponent.stories.tsx
import React from "react";
import NomeDoComponent from "./NomeDoComponent";
import { ThemeProvider } from "@mui/material";
import { themes } from "@liquidpass/liquid-ai-components";

export default {
  title: "NomeDoComponent",
  component: NomeDoComponent,
  argTypes: {
    myCustomProp: {
      control: "boolean",
    },
  },
};

const Template = (args: { [key: string]: any }) => (
  <>
    <RknComponent {...args} />
  </>
);

export const MyStory = Template.bind({});

MyStory.decorators = [
  (Story: any) => (
    <ThemeProvider theme={themes.Green}>
      <Story />
    </ThemeProvider>
  ),
];

MyStory.args = {
  children: "Meu component",
  myCustomProps: true,
};

Desta forma será possível adicionar estilos específicos para o componente em um determinado tema:

// components/NomeDoComponent/Themes/Green.ts
export const MuiBox = {
  styleOverrides: {
    root: {
      borderColor: "rgba(161, 168, 207, 1)",
    },
  },
};

Para mais detalhes sobre como criar estilos para dependentes de tema para os components, verifique a documentação do Material UI.