npm package: @smwb/summer-ui
Description: Summer UI is full [**typescript**](https://www.typescriptlang.org/) library with **proto-type** supporting and based on [material](https://material.io/) guideline
Latest version: 0.0.101

# Summer UI

Summer UI is full [**typescript**](https://www.typescriptlang.org/) library with **proto-type** supporting and based on [material](https://material.io/) guideline

![license](https://img.shields.io/badge/license-MIT-blue.svg)

## Installation

Summer UI is available as an [npm package](https://www.npmjs.com/package/@smwb/summer-ui).

Components demo is available [here](https://summerweb.ru/ui) & [Nightly builds ;)](https://summerweb.ru/ui-dev)

**npm:**

```sh
npm install @smwb/summer-ui
```

**yarn:**

```sh
yarn add @smwb/summer-ui
```

## Getting started with Summer UI

Here is an example of a basic app using Summer UI's `Button` component:

```jsx
import * as React from "react";
import "@smwb/summer-ui/styles/normalize.css";
import "@smwb/summer-ui/styles/css/summer-ui.css";
import { Button } from "@smwb/summer-ui";

function App() {
  return <Button>Hello World</Button>;
}
```

### Full library

If you want to use full library you would import components from project root

```jsx
import { Button } from "@smwb/summer-ui";
```

### Only component

If you need minify your project you can import just several components from direct path

```jsx
import Button from "@smwb/summer-ui/dist/components/button/button";
```

### Styles

#### Dark & Light themes

For build-in dark&light themes use the useTheme hook. This hook returns the current theme and a callback for changing the theme:

```jsx
import "@smwb/summer-ui/styles/normalize.css";
import "@smwb/summer-ui/styles/css/summer-ui.css";
import { Button } from "@smwb/summer-ui";
import { useTheme } from "@smwb/summer-ui";

function App() {
  const { theme, setTheme } = useTheme();

  return <Button onClick={() => setTheme("dark")} />;
}
```

#### Default CSS

```jsx
import "@smwb/summer-ui/styles/normalize.css";
import "@smwb/summer-ui/styles/css/summer-ui.css";
```

#### Custom CSS

##### Using one of built-in themes

- theme list `node_modules/@smwb/summer-ui/styles/less/themes`
- copy `node_modules/@smwb/summer-ui/theme.config.example` to the project root and rename to `theme.config`
- add script to package.json
  `"less": "lessc -rp=/ ./node_modules/@smwb/summer-ui/styles/less/components.less src/css/summer-ui.css"`
- execute `npm run less`
- import css in the project root

```jsx
import "./css/summer-ui.css";
```

##### Using own theme

- copy file `node_modules/@smwb/summer-ui/styles/less/variables.less` to folder `/src/css/custom`
- copy file `node_modules/@smwb/summer-ui/theme.config.example` to the project root
  - rename `theme.config.example` to `theme.config`
  - edit `theme.config` **@theme** to `@theme: "custom"`
  - edit `theme.config` **@themesFolder** to `@themesFolder : "/src/css"`;
- edit `custom.variables.less`
- add script to package.json
  `"less": "lessc -rp=/ ./node_modules/@smwb/summer-ui/styles/less/components.less src/css/summer-ui.css"`
- execute `npm run less`
- import css in the project root

```jsx
import "./css/summer-ui.css";
```

### Integrations

#### [react-final-form](https://final-form.org/docs/react-final-form/getting-started)

Form demo is available [here](https://summerweb.ru/ui/?path=/story/connects-react-final-form--form-example)

**Installation:**

```sh
npm install --save final-form react-final-form
```

```jsx
import { Form } from "react-final-form";
import { TextField } from "@smwb/summer-ui/connects/rff";
import { Button } from "@smwb/summer-ui";

interface IForm {
  name: string;
  email: string;
}

const MyForm = () => {
  const onSubmit = (values: IForm) => {
    console.log(values);
  };

  const initialValues: Partial<IForm> = {
    name: "",
    email: "",
  };

  const required = (value: string) => (value ? undefined : "Required Field");

  return (
    <Form
      initialValues={initialValues}
      onSubmit={onSubmit}
      render={({ handleSubmit, values, submitting }) => {
        return (
          <form style={{ display: "flex", gap: "20px", flexDirection: "column" }} onSubmit={handleSubmit}>
            <TextField placeholder="Name" validate={required} name="name" label="Name" />
            <TextField placeholder="Email" validate={required} name="email" type="email" label="Email" />

            <Button type="submit" disabled={submitting}>
              Submit Form
            </Button>
          </form>
        );
      }}
    />
  );
};
```

#### [react-table](https://react-table-v7.tanstack.com/)

Table demo is available [here](https://summerweb.ru/ui/?path=/story/connects-react-table--basic)

**Installation:**

```sh
npm install react-table --save
```

```jsx
import { Column, useTable } from "react-table";
import { Table } from "@smwb/summer-ui/connects/rt";

type Item = {
  name: string;
  lastName: string;
  age: number;
};

const columns: ColumnDef<Item>[] = [
  {
    header: "Name",
    cell: (row) => row.renderValue(),
    accessorKey: "name",
  },
  {
    header: "Age",
    cell: (row) => row.renderValue(),
    accessorKey: "age",
  },
  {
    header: "Last Name",
    cell: (row) => row.renderValue(),
    accessorKey: "lastName",
  },
];

const data: Item[] = [
  { name: "First", age: 20, lastName: "Dach" },
  { name: "Alex", age: 10, lastName: "Fax" },
  { name: "John", age: 35, lastName: "Doe" },
  { name: "Bax", age: 30, lastName: "Heller" },
  { name: "Second", age: 47, lastName: "Name" },
  { name: "Abc", age: 14, lastName: "Def" },
];

export const Table = () => {

  return (
    <Table columns={columns} data={data} />;
  );
};
```