Package Exports

@smwb/summer-ui
@smwb/summer-ui/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@smwb/summer-ui) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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