Summer UI

Summer UI is full typescript library with proto-type supporting and based on material guideline

!license

Installation

Summer UI is available as an npm package.

Components demo is available here & Nightly builds ;)

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 Hello World;
}
`

$3

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

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

$3

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";
`

$3

#### 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 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";
`

$3

#### react-final-form

Form demo is available here

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 = {
name: "",
email: "",
};

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

return (
initialValues={initialValues}
onSubmit={onSubmit}
render={({ handleSubmit, values, submitting }) => {
return (



Submit Form


);
}}
/>
);
};
`

#### react-table

Table demo is available here

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[] = [
{
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 (


;
);
};
``