npm package: @murilo.matias/liquid-ai-components
Description: ## Introdução
Latest version: 0.1.3

# @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](https://mui.com/), 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](https://mui.com/material-ui/customization/theming/#main-content) é 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:

```javascript
"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:

```javascript
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**](https://mui.com/system/getting-started/the-sx-prop/):

```javascript
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_**:

```javascript
// 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:

```javascript
// 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:

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

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

```javascript
// 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:

```javascript
// 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:

```javascript
// 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:

```javascript
// 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](https://mui.com/material-ui/customization/theme-components/) do Material UI.