@react-ui-org/react-ui 0.44.1 → 0.47.0

package/src/lib/components/List/List.scss

@@ -1,53 +0,0 @@
-@use '../../styles/tools/reset';
-@use '../../styles/tools/spacing';
-@use 'theme';
-
-.root {
-  @include spacing.bottom(layouts);
-}
-
-.list {
-  @include reset.list();
-
-  display: flex;
-  flex-direction: column;
-}
-
-.item {
-  width: 100%;
-  margin-bottom: theme.$row-gap;
-
-  &:last-child {
-    margin-bottom: 0;
-  }
-}
-
-.alignStart {
-  align-items: flex-start;
-  text-align: left;
-}
-
-.alignEnd {
-  align-items: flex-end;
-  text-align: right;
-}
-
-[dir="rtl"] .alignStart {
-  text-align: right;
-}
-
-[dir="rtl"] .alignEnd {
-  text-align: left;
-}
-
-.isAutoWidth .list {
-  display: inline-flex;
-}
-
-.isAutoWidth .item {
-  width: auto;
-}
-
-.item .root {
-  margin-bottom: 0;
-}

package/src/lib/components/List/ListItem.jsx

@@ -1,31 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import { withProviderContext } from '../../provider';
-import styles from './List.scss';
-
-export const ListItem = ({ children }) => {
-  if (!children) {
-    return null;
-  }
-
-  return (
-    <li className={styles.item}>
-      {children}
-    </li>
-  );
-};
-
-ListItem.defaultProps = {
-  children: null,
-};
-
-ListItem.propTypes = {
-  /**
-   * Content of the list item.
-   */
-  children: PropTypes.node,
-};
-
-export const ListItemWithContext = withProviderContext(ListItem, 'ListItem');
-
-export default ListItemWithContext;

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

@@ -1,114 +0,0 @@
----
-name: List
-menu: 'Layouts'
-route: /components/list
----
-
-# List
-
-import {
-  Playground,
-  Props,
-} from 'docz'
-import { Placeholder } from '../../../docs/_components/Placeholder/Placeholder'
-import { List } from './List'
-import { ListItem } from './ListItem'
-
-The List aligns content into an organized list.
-
-## Basic Usage
-
-To implement the List component, you need to import it first:
-
-```js
-import { List, ListItem } from '@react-ui-org/react-ui';
-```
-
-And use it:
-
-<Playground>
-  <List>
-    <ListItem>
-      <Placeholder bordered>List item</Placeholder>
-    </ListItem>
-    <ListItem>
-      <Placeholder bordered>List item</Placeholder>
-    </ListItem>
-    <ListItem>
-      <Placeholder bordered>List item</Placeholder>
-    </ListItem>
-  </List>
-</Playground>
-
-See [API](#api) for all available options.
-
-## General Guidelines
-
-- **Wrap your items** into the [ListItem](#listitem) component. This ensures
-  your content is properly spaced and aligned with other List elements. Do
-  **not** try to put any custom HTML or React components directly into the
-  List layout without wrapping it with the ListItem first.
-
-- For forms, use rather the [FormLayout](/components/form-layout)
-  component which is designed specifically for that purpose.
-
-## List Alignment
-
-You can simply set the list alignment by specifying the `align` option.
-
-👉 At the current stage of development, React UI is **RTL aware** so switching
-to a fully RTL-compatible behavior in the future should be painless. That's why
-the alignment values are called rather `start` than `left` and `end` instead of
-`right`.
-
-<Playground>
-  <List align="end">
-    <ListItem>
-      <Placeholder bordered>List item</Placeholder>
-    </ListItem>
-    <ListItem>
-      <Placeholder bordered>List item</Placeholder>
-    </ListItem>
-    <ListItem>
-      <Placeholder bordered>List item</Placeholder>
-    </ListItem>
-  </List>
-</Playground>
-
-## Auto Width
-
-For cases when you prefer the list items to keep their original width and don't
-want them to expand over the full width of the parent of the list, there is the
-`autoWidth` option. It **shrinks the list according to its longest item.**
-However, the root div always behaves as a full-width block element (unless you
-put it inside a flex or grid layout).
-
-<Playground>
-  <List align="end" autoWidth>
-    <ListItem>
-      <Placeholder bordered>List item</Placeholder>
-    </ListItem>
-    <ListItem>
-      <Placeholder bordered>List item that is longer</Placeholder>
-    </ListItem>
-    <ListItem>
-      <Placeholder bordered>List item that is even a bit longer</Placeholder>
-    </ListItem>
-  </List>
-</Playground>
-
-## API
-
-<Props table of={List} />
-
-### ListItem API
-
-A wrapper for individual list items.
-
-<Props table of={ListItem} />
-
-## Theming
-
-| Custom Property                                      | Description                                                  |
-|------------------------------------------------------|--------------------------------------------------------------|
-| `--rui-List__row-gap`                                | Gap between list items                                       |

package/src/lib/components/List/_theme.scss

@@ -1 +0,0 @@
-$row-gap: var(--rui-List__row-gap);

package/src/lib/components/List/index.js

@@ -1,2 +0,0 @@
-export { default as List } from './List';
-export { default as ListItem } from './ListItem';

package/src/lib/components/Media/Media.jsx

@@ -1,29 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import { withProviderContext } from '../../provider';
-import styles from './Media.scss';
-
-export const Media = (props) => {
-  const {
-    children,
-  } = props;
-
-  return (
-    <div className={styles.media}>
-      {children}
-    </div>
-  );
-};
-
-Media.propTypes = {
-  /**
-   * Nested elements. Supported types are:
-   * * `MediaBody`
-   * * `MediaObject`
-   */
-  children: PropTypes.node.isRequired,
-};
-
-export const MediaWithContext = withProviderContext(Media, 'Media');
-
-export default MediaWithContext;

package/src/lib/components/Media/Media.scss

@@ -1,16 +0,0 @@
-@use '../../styles/tools/spacing';
-
-.media {
-  @include spacing.bottom(layouts);
-
-  display: flex;
-  align-items: flex-start;
-}
-
-.object {
-  margin-right: spacing.of(3);
-}
-
-.body {
-  flex: 1;
-}

package/src/lib/components/Media/MediaBody.jsx

@@ -1,21 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import { withProviderContext } from '../../provider';
-import styles from './Media.scss';
-
-export const MediaBody = ({ children }) => (
-  <div className={styles.body}>
-    {children}
-  </div>
-);
-
-MediaBody.propTypes = {
-  /**
-   * Content of the media layout.
-   */
-  children: PropTypes.node.isRequired,
-};
-
-export const MediaBodyWithContext = withProviderContext(MediaBody, 'MediaBody');
-
-export default MediaBodyWithContext;

package/src/lib/components/Media/MediaObject.jsx

@@ -1,21 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import { withProviderContext } from '../../provider';
-import styles from './Media.scss';
-
-export const MediaObject = ({ children }) => (
-  <div className={styles.object}>
-    {children}
-  </div>
-);
-
-MediaObject.propTypes = {
-  /**
-   * Accompanying media object for the Media layout, eg. an image.
-   */
-  children: PropTypes.node.isRequired,
-};
-
-export const MediaObjectWithContext = withProviderContext(MediaObject, 'MediaObject');
-
-export default MediaObjectWithContext;

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

@@ -1,63 +0,0 @@
----
-name: Media
-menu: 'Layouts'
-route: /components/media
----
-
-# Media
-
-import {
-  Playground,
-  Props,
-} from 'docz'
-import { Placeholder } from '../../../docs/_components/Placeholder/Placeholder'
-import { Media } from './Media'
-import { MediaBody } from './MediaBody'
-import { MediaObject } from './MediaObject'
-
-The Media layout nicely aligns text content next to an object.
-
-## Basic Usage
-
-To implement the Media component, you need to import it first:
-
-```js
-import { Media, MediaBody, MediaObject } from '@react-ui-org/react-ui';
-```
-
-And use it:
-
-<Playground>
-  <Media>
-    <MediaObject>
-      <Placeholder bordered>Media object</Placeholder>
-    </MediaObject>
-    <MediaBody>
-      <Placeholder bordered>Media body</Placeholder>
-    </MediaBody>
-  </Media>
-</Playground>
-
-See [API](#api) for all available options.
-
-## General Guidelines
-
-Use the Media layout for **highly repetitive layouts** like comments, article
-teasers, etc., ie. when you need a **fixed-sized object** (e.g. an image) and an
-**area that expands** over the remaining horizontal space (e.g. a paragraph).
-
-## API
-
-<Props table of={Media} />
-
-### MediaBody
-
-A place for the text content.
-
-<Props table of={MediaBody} />
-
-### MediaObject
-
-A place for the media object.
-
-<Props table of={MediaObject} />

package/src/lib/components/Media/index.js

@@ -1,3 +0,0 @@
-export { default as Media } from './Media';
-export { default as MediaObject } from './MediaObject';
-export { default as MediaBody } from './MediaBody';

package/src/lib/provider/withProviderContext.jsx

@@ -1,32 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import RUIContext from './RUIContext';
-
-export default (Component, componentName) => {
-  const WithProviderContextComponent = (props) => (
-    <RUIContext.Consumer>
-      {(context) => {
-        const contextGlobalProps = context?.globalProps ? context.globalProps[componentName] : null;
-        const contextTranslations = context?.translations ? context.translations[componentName] : null;
-
-        return (
-          <Component
-            {...contextGlobalProps}
-            {...props}
-            translations={props.translations || contextTranslations}
-          />
-        );
-      }}
-    </RUIContext.Consumer>
-  );
-
-  WithProviderContextComponent.defaultProps = {
-    translations: undefined,
-  };
-
-  WithProviderContextComponent.propTypes = {
-    translations: PropTypes.shape({}),
-  };
-
-  return WithProviderContextComponent;
-};