Summer UI is full [**typescript**](https://www.typescriptlang.org/) library with **proto-type** supporting and based on [material](https://material.io/) guideline
npm install @smwb/summer-uiSummer UI is full typescript library with proto-type supporting and based on material guideline
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
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 ;
}
`
If you want to use full library you would import components from project root
`jsx`
import { Button } from "@smwb/summer-ui";
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";
#### 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
#### 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/themesnode_modules/@smwb/summer-ui/theme.config.example
- copy to the project root and rename to theme.config"less": "lessc -rp=/ ./node_modules/@smwb/summer-ui/styles/less/components.less src/css/summer-ui.css"
- add script to package.json
npm run less
- execute
- 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/customnode_modules/@smwb/summer-ui/theme.config.example
- copy file to the project roottheme.config.example
- rename to theme.configtheme.config
- edit @theme to @theme: "custom"theme.config
- edit @themesFolder to @themesFolder : "/src/css";custom.variables.less
- edit "less": "lessc -rp=/ ./node_modules/@smwb/summer-ui/styles/less/components.less src/css/summer-ui.css"
- add script to package.json
npm run less
- execute
- import css in the project root
`jsx`
import "./css/summer-ui.css";
#### 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 (
#### 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 (
;
);
};
``