Summer UI

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

Installation

Summer UI is available as an npm package.

Components demo is available here & Nightly builds ;)

npm:

npm install @smwb/summer-ui

yarn:

yarn add @smwb/summer-ui

Getting started with Summer UI

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

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

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

Only component

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

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:

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

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

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

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

Integrations

react-final-form

Form demo is available here

Installation:

npm install --save final-form react-final-form

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

Table demo is available here

Installation:

npm install react-table --save

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} />;
  );
};