@react-ui-org/react-ui 0.52.0 → 0.53.0

package/src/lib/components/Table/README.mdx

@@ -1,275 +0,0 @@
----
-name: Table
-menu: 'Miscellaneous'
-route: /components/table
----
-
-# Table
-
-Table presents complex tabular data in an easy-to-scan way.
-
-import {
-  Playground,
-  Props,
-} from 'docz'
-import Icon from '../../../docs/_components/Icon'
-import {
-  ScrollView,
-  Table,
-} from '../..'
-
-## Basic Usage
-
-To implement the Table component, you need to import it first:
-
-```js
-import { Table } from '@react-ui-org/react-ui';
-```
-
-And use it:
-
-<Playground>
-  <Table
-    columns={[
-      {
-        label: 'ID',
-        name: 'id',
-      },
-      {
-        label: 'Name',
-        name: 'name',
-      },
-      {
-        format: (date) => date.toLocaleDateString('en-GB'),
-        label: 'Date of birth',
-        name: 'dateOfBirth',
-      },
-    ]}
-    rows={[
-      {
-        dateOfBirth: new Date(1940, 10, 9),
-        id: 1,
-        name: 'John Lennon',
-      },
-      {
-        dateOfBirth: new Date(1942, 6, 18),
-        id: 2,
-        name: 'Paul McCartney',
-      },
-      {
-        dateOfBirth: new Date(1943, 2, 25),
-        id: 3,
-        name: 'George Harrison',
-      },
-      {
-        dateOfBirth: new Date(1940, 7, 7),
-        id: 4,
-        name: 'Richard Starkey (Ringo Starr)',
-      },
-    ]}
-  />
-</Playground>
-
-See [API](#api) for all available options.
-
-## General Guidelines
-
-- **Keep headers short** so users can quickly scan the content of the table.
-  Just one or two words should be enough.
-
-- Tables are **good for displaying complex tabular data.** For simpler data sets
-  or even plain key-value pairs, consider using the
-  [Grid](/components/grid) component.
-
-- Tables make **lots of information easier to scan and compare.** If you have
-  fewer sections and want to emphasize each group more, consider using
-  [Cards](/components/card).
-
-## Responsive Tables
-
-The easiest way to make tables responsive is to wrap them with the
-[ScrollView](/components/scroll-view) component in the horizontal mode.
-
-<Playground>
-  <ScrollView direction="horizontal" shadowSize="100px">
-    <Table
-      columns={[
-        {
-          label: 'ID',
-          name: 'id',
-        },
-        {
-          format: (name) => (
-            <span style={{ whiteSpace: 'nowrap' }}>{name}</span>
-          ),
-          label: 'Name',
-          name: 'name',
-        },
-        {
-          format: (note) => (
-            <span style={{ whiteSpace: 'nowrap' }}>{note}</span>
-          ),
-          label: 'Note',
-          name: 'note',
-        },
-        {
-          format: (date) => date.toLocaleDateString('en-GB'),
-          label: 'Date of birth',
-          name: 'dateOfBirth',
-        },
-      ]}
-      rows={[
-        {
-          dateOfBirth: new Date(1940, 10, 9),
-          id: 1,
-          name: 'John Lennon',
-          note: 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. '
-            + 'Aenean commodo ligula eget dolor. Aenean massa. Cum sociis '
-            + 'natoque penatibus et magnis dis parturient montes, nascetur '
-            + 'ridiculus mus. Donec quam felis, ultricies nec, pellentesque '
-            + 'eu, pretium quis, sem.',
-        },
-        {
-          dateOfBirth: new Date(1942, 6, 18),
-          id: 2,
-          name: 'Paul McCartney',
-          note: 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. '
-            + 'Aenean commodo ligula eget dolor. Aenean massa. Cum sociis '
-            + 'natoque penatibus et magnis dis parturient montes, nascetur '
-            + 'ridiculus mus. Donec quam felis, ultricies nec, pellentesque '
-            + 'eu, pretium quis, sem.',
-        },
-        {
-          dateOfBirth: new Date(1943, 2, 25),
-          id: 3,
-          name: 'George Harrison',
-          note: 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. '
-            + 'Aenean commodo ligula eget dolor. Aenean massa. Cum sociis '
-            + 'natoque penatibus et magnis dis parturient montes, nascetur '
-            + 'ridiculus mus. Donec quam felis, ultricies nec, pellentesque '
-            + 'eu, pretium quis, sem.',
-        },
-        {
-          dateOfBirth: new Date(1940, 7, 7),
-          id: 4,
-          name: 'Richard Starkey (Ringo Starr)',
-          note: 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. '
-            + 'Aenean commodo ligula eget dolor. Aenean massa. Cum sociis '
-            + 'natoque penatibus et magnis dis parturient montes, nascetur '
-            + 'ridiculus mus. Donec quam felis, ultricies nec, pellentesque '
-            + 'eu, pretium quis, sem.',
-        },
-      ]}
-    />
-  </ScrollView>
-</Playground>
-
-## Sortable Columns
-
-The Table supports sorting indicators by adding a simple configuration.
-
-⚠️ The Table component only provides necessary visual support for sorting. Aside
-from icons, you must **provide the comparing functionality yourself** if you
-aren't rendering **already sorted data.** The reason for this decision is that
-client often does not have access to the full dataset.
-
-The following is an example of custom sorting function executed on the client.
-
-<Playground>
-  {() => {
-    const [tableSortColumn, setTableSortColumn] = React.useState('id');
-    const [tableSortDirection, setTableSortDirection] = React.useState('asc');
-    const [rows, setRows] = React.useState([
-      {
-        dateOfBirth: new Date(1940, 10, 9),
-        id: 1,
-        name: 'John Lennon',
-      },
-      {
-        dateOfBirth: new Date(1942, 6, 18),
-        id: 2,
-        name: 'Paul McCartney',
-      },
-      {
-        dateOfBirth: new Date(1943, 2, 25),
-        id: 3,
-        name: 'George Harrison',
-      },
-      {
-        dateOfBirth: new Date(1940, 7, 7),
-        id: 4,
-        name: 'Richard Starkey (Ringo Starr)',
-      },
-    ]);
-    const compare = (items, key, direction) => {
-      const sortedItems = [...items];
-      if (key === 'id' || key === 'dateOfBirth') {
-        sortedItems.sort((a, b) => b[key] - a[key]);
-      } else if (key === 'name') {
-        sortedItems.sort((a, b) => {
-          if (a.name < b.name) {
-            return -1;
-          }
-          if (a.name > b.name) {
-            return 1;
-          }
-          return 0;
-        });
-      }
-      return direction === 'desc' ? sortedItems.reverse() : sortedItems;
-    };
-    const columns = [
-      {
-        isSortable: true,
-        label: 'ID',
-        name: 'id',
-      },
-      {
-        isSortable: true,
-        label: 'Name',
-        name: 'name',
-      },
-      {
-        format: (date) => date.toISOString(),
-        isSortable: true,
-        label: 'Date of birth',
-        name: 'dateOfBirth',
-      },
-    ];
-    return (
-      <Table
-        columns={columns}
-        rows={rows}
-        sort={{
-          ascendingIcon: <Icon icon="up" />,
-          column: tableSortColumn,
-          descendingIcon: <Icon icon="down" />,
-          direction: tableSortDirection,
-          onClick: (column, direction) => {
-            setTableSortColumn(column);
-            setTableSortDirection(direction === 'asc' ? 'desc' : 'asc');
-            setRows(compare(rows, column, direction));
-          },
-        }}
-      />
-    );
-  }}
-</Playground>
-
-## Forwarding HTML Attributes
-
-In addition to the options below in the [component's API](#api) section, you
-can specify [React synthetic events] or **any HTML attribute you like.** All
-attributes that don't interfere with the API are forwarded to the `<table>` HTML
-element. This enables making the component interactive and helps to improve its
-accessibility.
-
-👉 Refer to the MDN reference for the full list of supported attributes of the
-[table] element.
-
-## API
-
-<Props table of={Table} />
-
-[React synthetic events]: https://reactjs.org/docs/events.html
-[table]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table#attributes

package/src/lib/components/Text/README.mdx

@@ -1,241 +0,0 @@
----
-name: Text
-menu: 'Miscellaneous'
-route: /components/text
----
-
-# Text
-
-import {
-  Playground,
-  Props,
-} from 'docz'
-import { Placeholder } from '../../../docs/_components/Placeholder/Placeholder'
-import {
-  Button,
-  ButtonGroup,
-  Text,
-  TextField,
-  Toolbar,
-  ToolbarGroup,
-  ToolbarItem,
-} from '../..'
-
-Text is a tiny component to control wrapping of text content.
-
-## Basic Usage
-
-To implement the Text component, you need to import it first:
-
-```js
-import { Text } from '@react-ui-org/react-ui';
-```
-
-And use it:
-
-<Playground>
-  <Placeholder>
-    <Text lines={3}>
-      Hello! This text will be clamped to three lines.
-      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo
-      ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis
-      dis parturient montes, nascetur ridiculus mus. Donec quam felis,
-      ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa
-      quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget,
-      arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.
-    </Text>
-  </Placeholder>
-</Playground>
-
-See [API](#api) for all available options.
-
-## General Guidelines
-
-- Use Text anytime you need to **control potentially long strings** and
-  prevent them from overflowing or breaking their container.
-
-- **By default, Text doesn't alter rendering of its content.** Use available
-  options to achieve the result you need.
-
-- **Text renders as `<span>` by default,** so it can only contain
-  inline-level HTML elements (like `<strong>` or `<a>`, but not `<div>`, `<p>`,
-  or `<h2>`). If necessary, use the `blockLevel` option to render as `<div>` to
-  keep your HTML valid.
-
-- **Use Text for short pieces of text content.** Including a couple of HTML tags
-  shouldn't cause any harm, but keep in mind Text is not intended to wrap
-  complex HTML structures or even React components.
-
-## Number of Lines
-
-Specify how many `lines` of text should be visible if content doesn't fit its
-container. If the number of lines is exceeded, the content is truncated and
-appended by an ellipsis (`…`).
-
-<Playground>
-  {() => {
-    const [lines, setLines] = React.useState(1);
-    return (
-      <div>
-        <Toolbar align="baseline">
-          <ToolbarItem>
-            <TextField
-              label="Number of lines"
-              min={1}
-              max={100}
-              onChange={(e) => setLines(Number(e.target.value))}
-              type="number"
-              value={lines}
-            />
-          </ToolbarItem>
-        </Toolbar>
-        <Placeholder>
-          <Text lines={lines}>
-            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
-            commodo ligula eget dolor. Aenean massa. Cum sociis natoque
-            penatibus et magnis dis parturient montes, nascetur ridiculus mus.
-            Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.
-            Nulla consequat massa quis enim. Donec pede justo, fringilla vel,
-            aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut,
-            imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede
-            mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum
-            semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula,
-            porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem
-            ante, dapibus in, viverra quis, feugiat a, tellus.
-          </Text>
-        </Placeholder>
-      </div>
-    );
-  }}
-</Playground>
-
-## Word Wrapping
-
-There are three possible ways of controlling wrapping of long words if they do
-not fit on a line. Set `wordWrapping` to one of the following values:
-
-- `normal`: Do not force any wrapping (default behavior).
-
-- `long-words`: To prevent overflow, an otherwise unbreakable string of
-  characters — like a long word or URL — may be broken at any point if there are
-  no otherwise-acceptable break points in the line.
-
-- `anywhere`: Create a break at the exact place where text would otherwise
-  overflow its container (even if putting an entire word on its own line would
-  negate the need for a break).
-
-📖 [Read more about wrapping and breaking text at MDN.](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Text/Wrapping_Text)
-
-### Hyphens
-
-The `hyphens` option specifies how words should be hyphenated when text wraps
-across multiple lines. It can prevent hyphenation entirely, hyphenate at
-manually-specified points within the text, or let the browser automatically
-insert hyphens where appropriate.
-
-👉 The `auto` setting's behavior depends on the language being properly tagged
-to select the appropriate hyphenation rules. **You must specify a language**
-using the `lang` HTML attribute (e.g.
-[on `<html>` tag](/getting-started/usage#full-example)) to guarantee that
-automatic hyphenation is applied in that language.
-
-👉 [Manually suggested line break opportunities](https://developer.mozilla.org/en-US/docs/Web/CSS/hyphens#suggesting_line_break_opportunities)
-will override automatic break point selection in `auto` mode when present.
-
-📖 [Read more about `hyphens` CSS property at MDN.](https://developer.mozilla.org/en-US/docs/Web/CSS/hyphens)
-
-<Playground>
-  {() => {
-    const [hyphens, setHyphens] = React.useState('none');
-    const [wordWrapping, setWordWrapping] = React.useState('normal');
-    return (
-      <div>
-        <Toolbar>
-          <ToolbarGroup align="baseline">
-            <ToolbarItem>
-              <span id="word-wrapping-options-label">Word wrapping:</span>
-            </ToolbarItem>
-            <ToolbarItem>
-              <ButtonGroup aria-labelledby="word-wrapping-options-label" priority="outline">
-                <Button
-                  aria-pressed={wordWrapping === 'normal'}
-                  color={wordWrapping === 'normal' ? 'selected' : 'secondary'}
-                  label="normal"
-                  onClick={() => setWordWrapping('normal')}
-                />
-                <Button
-                  aria-pressed={wordWrapping === 'long-words'}
-                  color={wordWrapping === 'long-words' ? 'selected' : 'secondary'}
-                  label="long-words"
-                  onClick={() => setWordWrapping('long-words')}
-                />
-                <Button
-                  aria-pressed={wordWrapping === 'anywhere'}
-                  color={wordWrapping === 'anywhere' ? 'selected' : 'secondary'}
-                  label="anywhere"
-                  onClick={() => setWordWrapping('anywhere')}
-                />
-              </ButtonGroup>
-            </ToolbarItem>
-          </ToolbarGroup>
-          <ToolbarGroup align="baseline">
-            <ToolbarItem>
-              <span id="hyphens-options-label">Hyphens:</span>
-            </ToolbarItem>
-            <ToolbarItem>
-              <ButtonGroup aria-labelledby="hyphens-options-label" priority="outline">
-                <Button
-                  aria-pressed={hyphens === 'none'}
-                  color={hyphens === 'none' ? 'selected' : 'secondary'}
-                  label="none"
-                  onClick={() => setHyphens('none')}
-                />
-                <Button
-                  aria-pressed={hyphens === 'auto'}
-                  color={hyphens === 'auto' ? 'selected' : 'secondary'}
-                  label="auto"
-                  onClick={() => setHyphens('auto')}
-                />
-                <Button
-                  aria-pressed={hyphens === 'manual'}
-                  color={hyphens === 'manual' ? 'selected' : 'secondary'}
-                  label="manual"
-                  onClick={() => setHyphens('manual')}
-                />
-              </ButtonGroup>
-            </ToolbarItem>
-          </ToolbarGroup>
-        </Toolbar>
-        <Placeholder width="11em" bordered>
-          <Text hyphens={hyphens} wordWrapping={wordWrapping}>
-            {hyphens === 'manual'
-              ? (<>LongWord&shy;ThatHasManual&shy;Breaking&shy;Possibilities</>)
-              : (<>LongWordThatHasNoBreakingPossibilities</>)}
-            {' '}
-            and a couple of ordinary words that are nice and well behaved.
-          </Text>
-        </Placeholder>
-      </div>
-    );
-  }}
-</Playground>
-
-## Forwarding HTML Attributes
-
-In addition to the options below in the [component's API](#api) section, you
-can specify [React synthetic events] or **any HTML attribute you like.** All
-attributes that don't interfere with the API are forwarded either to the
-`<span>` or to the `<div>` HTML element in case that `blockLevel` is set to
-`true`. This enables making the component interactive and helps to improve its
-accessibility.
-
-👉 Refer to the MDN reference for the full list of supported attributes of the
-[span] and [div] element.
-
-## API
-
-<Props table of={Text} />
-
-[React synthetic events]: https://reactjs.org/docs/events.html
-[span]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span#attributes
-[div]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div#attributes