Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: rename packages #23

Merged
merged 1 commit into from
Apr 29, 2024
Merged

feat: rename packages #23

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
# React Front Kit Docs
# Haring Docs

This is the documentation website for the [React Front Kit](https://github.com/Smile-SA/react-front-kit) library.
This is the documentation website for the [Haring](https://github.com/Smile-SA/haring) library.

## Doc

You can access the documentation here: https://smile-sa.github.io/react-front-kit-doc
You can access the documentation here: https://smile-sa.github.io/haring-doc

## Usage

Expand Down
42 changes: 21 additions & 21 deletions docs/guide/01-getting-started.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

## Introduction

React Front Kit is a component library based on [Mantine](https://mantine.dev/) that helps you build frontend quickly.
Haring is a component library based on [Mantine](https://mantine.dev/) that helps you build frontend quickly.

## What you'll need

Expand All @@ -13,12 +13,12 @@ Also check the getting started page of [Mantine](https://mantine.dev/getting-sta

## Installation

### `@smile/react-front-kit`
### `@smile/haring-react`

Install `@smile/react-front-kit` on your React based project with:
Install `@smile/haring-react` on your React based project with:

```bash
npm i @smile/react-front-kit @mantine/core @mantine/hooks @phosphor-icons/react
npm i @smile/haring-react @mantine/core @mantine/hooks @phosphor-icons/react
```

Then wrap your application with [the Provider](./theme#custom-provider).
Expand All @@ -27,58 +27,58 @@ And import the styles:

```js
import '@mantine/core/styles.css';
import '@smile/react-front-kit-shared/style.css';
import '@smile/react-front-kit/style.css';
import '@smile/haring-react-shared/style.css';
import '@smile/haring-react/style.css';
```

### `@smile/react-front-kit-dates`
### `@smile/haring-react-dates`

If you need date related components you can install `@smile/react-front-kit-dates`.
If you need date related components you can install `@smile/haring-react-dates`.

You must install `@smile/react-front-kit` first and then add `@smile/react-front-kit-dates` with:
You must install `@smile/haring-react` first and then add `@smile/haring-react-dates` with:

```bash
npm i @smile/react-front-kit-dates @mantine/dates
npm i @smile/haring-react-dates @mantine/dates
```

And import the styles:

```js
import '@mantine/dates/styles.css';
import '@smile/react-front-kit-dates/style.css';
import '@smile/haring-react-dates/style.css';
```

### `@smile/react-front-kit-dropzone`
### `@smile/haring-react-dropzone`

If you need dropzone related components you can install `@smile/react-front-kit-dropzone`.
If you need dropzone related components you can install `@smile/haring-react-dropzone`.

You must install `@smile/react-front-kit` first and then add `@smile/react-front-kit-dropzone` with:
You must install `@smile/haring-react` first and then add `@smile/haring-react-dropzone` with:

```bash
npm i @smile/react-front-kit-dropzone @mantine/dropzone
npm i @smile/haring-react-dropzone @mantine/dropzone
```

And import the styles:

```js
import '@mantine/dropzone/styles.css';
import '@smile/react-front-kit-dropzone/style.css';
import '@smile/haring-react-dropzone/style.css';
```

### `@smile/react-front-kit-table`
### `@smile/haring-react-table`

If you need table related components you can install `@smile/react-front-kit-table`.
If you need table related components you can install `@smile/haring-react-table`.

You must install `@smile/react-front-kit` first and then add `@smile/react-front-kit-table` with:
You must install `@smile/haring-react` first and then add `@smile/haring-react-table` with:

```bash
npm i @smile/react-front-kit-table @mantine/dates dayjs mantine-react-table@beta @tabler/icons-react
npm i @smile/haring-react-table @mantine/dates dayjs mantine-react-table@beta @tabler/icons-react
```

And import the styles:

```js
import '@mantine/dates/styles.css';
import 'mantine-react-table/styles.css';
import '@smile/react-front-kit-table/style.css';
import '@smile/haring-react-table/style.css';
```
4 changes: 2 additions & 2 deletions docs/guide/02-theme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,10 +45,10 @@ The `<Header>` component use a `<MantineProvider>` internally to apply the theme

It may be quite difficult to create these 3 themes that look harmonious so we provide a provider to assist you.

You can import our provider from `@smile/react-front-kit-shared` and use it at the top level of your app:
You can import our provider from `@smile/haring-react-shared` and use it at the top level of your app:

```jsx
import { Provider } from '@smile/react-front-kit-shared';
import { Provider } from '@smile/haring-react-shared';

export default function App({ children }) {
return (
Expand Down
14 changes: 7 additions & 7 deletions docs/guide/03-icons.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

## `@phosphor-icons/react`

`@smile/react-front-kit` depends on `@phosphor-icons/react` for the icons.
`@smile/haring-react` depends on `@phosphor-icons/react` for the icons.

You will need to install it as it required as a peer dependency.

Expand All @@ -27,20 +27,20 @@ Here is the list of available icons in `@phosphor-icons/react`:

## `@tabler/icons-react`

`@smile/react-front-kit-table` depends on `mantine-react-table` that depends on the `@tabler/icons-react` icon library.
`@smile/haring-react-table` depends on `mantine-react-table` that depends on the `@tabler/icons-react` icon library.

You will need to install `@tabler/icons-react` if you use components from `@smile/react-front-kit-table` but you can also customize the icons used by passing any icon you want in the props.
You will need to install `@tabler/icons-react` if you use components from `@smile/haring-react-table` but you can also customize the icons used by passing any icon you want in the props.

## `@smile/react-front-kit-shared`
## `@smile/haring-react-shared`

the `@smile/react-front-kit-shared` expose some icons you can also import and use as you wish.
the `@smile/haring-react-shared` expose some icons you can also import and use as you wish.

you can import then with:

```tsx
import { ColumnPlus } from '@smile/react-front-kit-shared';
import { ColumnPlus } from '@smile/haring-react-shared';
```

Here is the list of available icons in `@smile/react-front-kit-shared`:
Here is the list of available icons in `@smile/haring-react-shared`:

<StorybookEmbed storyId="1-styleguide-icons--custom-icons" height="200" />
2 changes: 1 addition & 1 deletion docs/react-front-kit-dates/_category_.json → docs/haring-react-dates/_category_.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{
"label": "react-front-kit-dates",
"label": "@smile/haring-react-dates",
"position": 3,
"link": { "type": "doc", "id": "introduction" }
}
7 changes: 7 additions & 0 deletions docs/haring-react-dates/introduction.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
# @smile/haring-react-dates

Date related components.

## Installation

See [Getting started](/docs/guide/getting-started#smileharing-react-dates)
2 changes: 1 addition & 1 deletion .../react-front-kit-dropzone/_category_.json → docs/haring-react-dropzone/_category_.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{
"label": "react-front-kit-dropzone",
"label": "@smile/haring-react-dropzone",
"position": 3,
"link": { "type": "doc", "id": "introduction" }
}
8 changes: 4 additions & 4 deletions docs/react-front-kit-dropzone/dropzone.mdx → docs/haring-react-dropzone/dropzone.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,13 @@
extendsInfo={[
{ label: 'Dropzone', link: 'https://v6.mantine.dev/others/dropzone/' },
]}
importExample="import { Dropzone } from '@smile/react-front-kit-dropzone';"
importExample="import { Dropzone } from '@smile/haring-react-dropzone';"
packageInfo={{
label: '@smile/react-front-kit-dropzone',
link: 'https://www.npmjs.com/package/@smile/react-front-kit-dropzone',
label: '@smile/haring-react-dropzone',
link: 'https://www.npmjs.com/package/@smile/haring-react-dropzone',
}}
sourceInfo={{
link: 'https://github.com/Smile-SA/react-front-kit/blob/main/packages/react-front-kit-dropzone/src/Components/Dropzone/Dropzone.tsx',
link: 'https://github.com/Smile-SA/haring/blob/main/packages/haring-react-dropzone/src/Components/Dropzone/Dropzone.tsx',
}}
storybookInfo="3-custom-components-dropzone--docs"
>
Expand Down
7 changes: 7 additions & 0 deletions docs/haring-react-dropzone/introduction.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
# @smile/haring-react-dropzone

File upload components.

## Installation

See [Getting started](/docs/guide/getting-started#smileharing-react-dropzone)
2 changes: 1 addition & 1 deletion docs/react-front-kit-table/_category_.json → docs/haring-react-table/_category_.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{
"label": "react-front-kit-table",
"label": "@smile/haring-react-table",
"position": 3,
"link": { "type": "doc", "id": "introduction" }
}
7 changes: 7 additions & 0 deletions docs/haring-react-table/introduction.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
# @smile/haring-react-table

Table related components.

## Installation

See [Getting started](/docs/guide/getting-started#smileharing-react-table)
44 changes: 22 additions & 22 deletions ...react-front-kit-table/table-grid-view.mdx → docs/haring-react-table/table-grid-view.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,23 +8,23 @@ import Description from '../../src/components/Description/Description';
extendsInfo={[
{
label: 'SwitchableView',
link: '../react-front-kit/components/switchable-view',
link: '../haring-react/components/switchable-view',
logo: <GitHubLogo />,
},
]}
importExample="import { TableGridView } from '@smile/react-front-kit-table';"
importExample="import { TableGridView } from '@smile/haring-react-table';"
packageInfo={{
label: '@smile/react-front-kit-table',
link: 'https://www.npmjs.com/package/@smile/react-front-kit-table',
label: '@smile/haring-react-table',
link: 'https://www.npmjs.com/package/@smile/haring-react-table',
}}
sourceInfo={{
link: 'https://github.com/Smile-SA/react-front-kit/blob/main/packages/react-front-kit-table/src/Components/TableGridView/TableGridView.tsx',
link: 'https://github.com/Smile-SA/haring/blob/main/packages/haring-react-table/src/Components/TableGridView/TableGridView.tsx',
}}
storybookInfo="3-custom-components-tablegridview--docs"
>
Renders a [SwitchableView](../react-front-kit/components/switchable-view)
Renders a [SwitchableView](../haring-react/components/switchable-view)
pre-configured with a [Table](./table) view and a
[ThumbnailGrid](../react-front-kit/components/thumbnail-grid) view, the views
[ThumbnailGrid](../haring-react/components/thumbnail-grid) view, the views
share the same data, selection and actions
</Description>

Expand All @@ -37,21 +37,21 @@ import Description from '../../src/components/Description/Description';

## Props

| Name | Type | Default | Description |
| --------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
| data <Required/> | `Record<string, unknown>[]` | - | Array of data objects, loaded in both views |
| gridProps <Required/> | [`ITableGridViewGridProps`](#itablegridviewgridprops) | - | Props for the grid view, field mapping values are used to convert any data object in `data` into [`Thumbnails`](../react-front-kit/components/thumbnail) |
| tableProp <Required/> | [`Omit<ITablePropsData, 'data'>`](./table#props) | - | Props for the table view, omitting `data` |
| actions | [`IAction`](../shared-types/actions#iactiont)`<`[`ITableData`](./table#itabledatadata-extends-recordstring-unknown)`\|`[`IThumbnailData`](../react-front-kit/components/thumbnail#ithumbnaildata)`>` | - | Array of actions for both views, either individual row/thumbnail or mass actions |
| defaultView | `'grid' \| 'table'` | - | Data view that will be active by default, either `grid` or `table` |
| ... | - | - | Extends [SwitchableView props](../react-front-kit/components/switchable-view#props), omitting `views` |
| Name | Type | Default | Description |
| --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
| data <Required/> | `Record<string, unknown>[]` | - | Array of data objects, loaded in both views |
| gridProps <Required/> | [`ITableGridViewGridProps`](#itablegridviewgridprops) | - | Props for the grid view, field mapping values are used to convert any data object in `data` into [`Thumbnails`](../haring-react/components/thumbnail) |
| tableProp <Required/> | [`Omit<ITablePropsData, 'data'>`](./table#props) | - | Props for the table view, omitting `data` |
| actions | [`IAction`](../shared-types/actions#iactiont)`<`[`ITableData`](./table#itabledatadata-extends-recordstring-unknown)`\|`[`IThumbnailData`](../haring-react/components/thumbnail#ithumbnaildata)`>` | - | Array of actions for both views, either individual row/thumbnail or mass actions |
| defaultView | `'grid' \| 'table'` | - | Data view that will be active by default, either `grid` or `table` |
| ... | - | - | Extends [SwitchableView props](../haring-react/components/switchable-view#props), omitting `views` |

### `ITableGridViewGridProps`

| Attribute | Type | Description |
| ----------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------- |
| iconTypeFieldName | `string` | Name of field in the data object that will be mapped to the [`Thumbnail`](../react-front-kit/components/thumbnail)'s `iconType` field |
| idFieldName | `string` | Name of field in the data object that will be mapped to the [`Thumbnail`](../react-front-kit/components/thumbnail)'s `id` field |
| imageFieldName | `string` | Name of field in the data object that will be mapped to the [`Thumbnail`](../react-front-kit/components/thumbnail)'s `image` field |
| labelFIeldName | `string` | Name of field in the data object that will be mapped to the [`Thumbnail`](../react-front-kit/components/thumbnail)'s `label` field |
| ... | - | Extends [`IThumbnailGridProps`](../react-front-kit/components/thumbnail-grid#props), omitting `thumbnails` |
| Attribute | Type | Description |
| ----------------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------- |
| iconTypeFieldName | `string` | Name of field in the data object that will be mapped to the [`Thumbnail`](../haring-react/components/thumbnail)'s `iconType` field |
| idFieldName | `string` | Name of field in the data object that will be mapped to the [`Thumbnail`](../haring-react/components/thumbnail)'s `id` field |
| imageFieldName | `string` | Name of field in the data object that will be mapped to the [`Thumbnail`](../haring-react/components/thumbnail)'s `image` field |
| labelFIeldName | `string` | Name of field in the data object that will be mapped to the [`Thumbnail`](../haring-react/components/thumbnail)'s `label` field |
| ... | - | Extends [`IThumbnailGridProps`](../haring-react/components/thumbnail-grid#props), omitting `thumbnails` |
Loading
Loading