@memori.ai/memori-react 1.0.0-alpha.1

package/src/components/ui/Button.tsx

@@ -0,0 +1,78 @@
+import React, { FC } from 'react';
+import cx from 'classnames';
+import Loading from '../icons/Loading';
+import './Button.css';
+
+export interface Props {
+  children?:
+    | React.ReactChild
+    | React.ReactChild[]
+    | React.ReactNode
+    | JSX.Element;
+  primary?: boolean;
+  outlined?: boolean;
+  ghost?: boolean;
+  padded?: boolean;
+  block?: boolean;
+  icon?: React.ReactNode;
+  shape?: 'square' | 'rounded' | 'circle';
+  danger?: boolean;
+  loading?: boolean;
+  disabled?: boolean;
+  className?: string;
+  title?: string;
+  htmlType?: 'button' | 'submit' | 'reset';
+  onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+  onTouchEnd?: (event: React.TouchEvent<HTMLButtonElement>) => void;
+}
+
+const Button: FC<Props> = ({
+  primary = false,
+  outlined = false,
+  ghost = false,
+  padded = true,
+  shape = 'rounded',
+  danger = false,
+  loading = false,
+  disabled = false,
+  block = false,
+  icon,
+  className,
+  title,
+  htmlType,
+  onClick,
+  onTouchEnd,
+  children,
+}) => (
+  <button
+    type={htmlType}
+    onClick={onClick}
+    onTouchEnd={onTouchEnd}
+    title={title}
+    disabled={loading || disabled}
+    className={cx(className, 'memori-button', {
+      'memori-button--primary': primary,
+      'memori-button--outlined': outlined,
+      'memori-button--ghost': ghost,
+      'memori-button--square': shape === 'square',
+      'memori-button--rounded': shape === 'rounded',
+      'memori-button--circle': shape === 'circle',
+      'memori-button--padded': padded,
+      'memori-button--block': block,
+      'memori-button--with-icon': (icon || loading) && children,
+      'memori-button--icon-only': (icon || loading) && !children,
+      'memori-button--danger': danger,
+      'memori-button--loading': loading,
+    })}
+  >
+    {icon && !loading && <span className="memori-button--icon">{icon}</span>}
+    {loading && (
+      <span className="memori-button--icon loading-icon">
+        <Loading loading />
+      </span>
+    )}
+    {children}
+  </button>
+);
+
+export default Button;

package/src/components/ui/Card.css

@@ -0,0 +1,60 @@
+.memori-card {
+    display: flex;
+    overflow: hidden;
+    flex-direction: column;
+    border-radius: 10px;
+    margin: 0 0 1rem;
+    background-color: #fff;
+    box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.1);
+}
+
+.memori-card--hoverable {
+    transition: box-shadow 0.3s;
+}
+
+.memori-card--hoverable:hover {
+    box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1), 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.2);
+}
+
+.memori-card--hoverable:focus,
+.memori-card--hoverable:focus-within {
+    outline-color: var(--memori-primary);
+}
+
+.memori-card--cover {
+    display: flex;
+    overflow: hidden;
+    height: 200px;
+    align-items: center;
+    justify-content: center;
+    border-radius: 10px 10px 0 0;
+    background-color: #eee;
+}
+
+.memori-card--cover img {
+    min-width: 100%;
+    min-height: 100%;
+    object-fit: cover;
+    object-position: center;
+}
+
+.memori-card--content {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    justify-content: space-between;
+    padding: 1.5rem 1rem;
+}
+
+.memori-card--title {
+    margin: 0 0 0.5rem;
+    font-size: 1.25rem;
+    font-weight: 600;
+}
+
+.memori-card--description {
+    margin: 0;
+    color: #999;
+    font-size: 0.875rem;
+    font-weight: 400;
+}

package/src/components/ui/Card.stories.tsx

@@ -0,0 +1,94 @@
+import React from 'react';
+import { Meta, Story } from '@storybook/react';
+import Card, { Props } from './Card';
+import Button from './Button';
+
+const meta: Meta = {
+  title: 'UI/Card',
+  component: Card,
+  argTypes: {
+    title: {
+      control: {
+        type: 'text',
+      },
+    },
+    description: {
+      control: {
+        type: 'text',
+      },
+    },
+    children: {
+      control: {
+        type: 'text',
+      },
+    },
+    className: {
+      control: {
+        type: 'text',
+      },
+    },
+    loading: {
+      control: {
+        type: 'boolean',
+      },
+    },
+  },
+  parameters: {
+    controls: { expanded: true },
+  },
+};
+
+export default meta;
+
+const Template: Story<Props> = args => <Card {...args} />;
+
+// By passing using the Args format for exported stories, you can control the props for a component for reuse in a test
+// https://storybook.js.org/docs/react/workflows/unit-testing
+export const Default = Template.bind({});
+Default.args = {
+  title: 'Card title',
+  loading: false,
+};
+
+export const WithTitleAndDescription = Template.bind({});
+WithTitleAndDescription.args = {
+  title: 'Card title',
+  description: 'Card description',
+  loading: false,
+};
+
+export const Loading = Template.bind({});
+Loading.args = {
+  title: 'Card title',
+  description: 'Card description',
+  loading: true,
+};
+
+export const WithCover = Template.bind({});
+WithCover.args = {
+  title: 'Card title',
+  description: 'Card description',
+  cover: <img src="https://picsum.photos/200/300" alt="cover" />,
+  loading: false,
+};
+
+export const WithChildren = Template.bind({});
+WithChildren.args = {
+  title: 'Card title',
+  description: 'Card description',
+  children: (
+    <div>
+      <p>Some text</p>
+      <Button primary>Show more</Button>
+    </div>
+  ),
+  loading: false,
+};
+
+export const Hoverable = Template.bind({});
+Hoverable.args = {
+  title: 'Card title',
+  description: 'Card description',
+  loading: false,
+  hoverable: true,
+};

package/src/components/ui/Card.test.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import Card from './Card';
+
+it('renders Card unchanged', () => {
+  const { container } = render(<Card />);
+  expect(container).toMatchSnapshot();
+});
+
+it('renders Card with title unchanged', () => {
+  const { container } = render(<Card title="Card title" />);
+  expect(container).toMatchSnapshot();
+});
+
+it('renders Card with description unchanged', () => {
+  const { container } = render(<Card description="Card description" />);
+  expect(container).toMatchSnapshot();
+});
+
+it('renders Card with cover unchanged', () => {
+  const { container } = render(<Card cover={<img src="#" alt="" />} />);
+  expect(container).toMatchSnapshot();
+});
+
+it('renders Card with children unchanged', () => {
+  const { container } = render(
+    <Card>
+      <p>Ciao</p>
+    </Card>
+  );
+  expect(container).toMatchSnapshot();
+});
+
+it('renders Card loading unchanged', () => {
+  const { container } = render(<Card title="Card title" loading />);
+  expect(container).toMatchSnapshot();
+});
+
+it('renders Card with custom CSS class unchanged', () => {
+  const { container } = render(<Card className="lorem-ipsum" />);
+  expect(container).toMatchSnapshot();
+});
+
+it('renders Card hoverable unchanged', () => {
+  const { container } = render(<Card title="lorem-ipsum" hoverable />);
+  expect(container).toMatchSnapshot();
+});

package/src/components/ui/Card.tsx

@@ -0,0 +1,45 @@
+import React, { FC } from 'react';
+import cx from 'classnames';
+import Spin from './Spin';
+import './Card.css';
+
+export interface Props {
+  children?: React.ReactChild;
+  loading?: boolean;
+  className?: string;
+  title?: string;
+  description?: string;
+  cover?: JSX.Element | React.ReactNode | string;
+  hoverable?: boolean;
+}
+
+const Card: FC<Props> = ({
+  loading = false,
+  className,
+  title,
+  description,
+  cover,
+  hoverable = false,
+  children,
+}) => (
+  <div
+    className={cx('memori-card', className, {
+      'memori-card--loading': loading,
+      'memori-card--with-cover': cover,
+      'memori-card--hoverable': hoverable,
+    })}
+  >
+    <Spin spinning={loading}>
+      {cover && <div className="memori-card--cover">{cover}</div>}
+      <div className="memori-card--content">
+        {title && <h3 className="memori-card--title">{title}</h3>}
+        {description && (
+          <p className="memori-card--description">{description}</p>
+        )}
+        <div className="memori-card--children">{children}</div>
+      </div>
+    </Spin>
+  </div>
+);
+
+export default Card;

package/src/components/ui/Checkbox.css

@@ -0,0 +1,111 @@
+:root,
+#root {
+    --memori-primary: rgb(102, 103, 171);
+    --memori-primary-text: #fff;
+}
+
+.memori-checkbox {
+    display: inline-flex;
+    box-sizing: border-box;
+    align-items: baseline;
+    padding: 0;
+    margin: 0;
+    color: rgba(0, 0, 0, 0.88);
+    cursor: pointer;
+    font-family: 'Exo 2', sans-serif;
+    font-size: 14px;
+    line-height: unset;
+    list-style: none;
+}
+
+.memori-checkbox--input-wrapper {
+    position: relative;
+    top: 0.2em;
+    cursor: pointer;
+    white-space: nowrap;
+}
+
+.memori-checkbox--inner {
+    position: relative;
+    top: 0;
+    display: block;
+    width: 16px;
+    height: 16px;
+    box-sizing: border-box;
+    border: 1px solid #d9d9d9;
+    border-radius: 4px;
+    border-top-color: rgb(217, 217, 217);
+    border-right-color: rgb(217, 217, 217);
+    border-bottom-color: rgb(217, 217, 217);
+    border-left-color: rgb(217, 217, 217);
+    background-color: #fff;
+    border-collapse: separate;
+    direction: ltr;
+    inset-inline-start: 0;
+    transition: all 0.3s;
+}
+
+.memori-checkbox--inner::after {
+    position: absolute;
+    top: 50%;
+    display: table;
+    width: 5.7142857142857135px;
+    height: 9.142857142857142px;
+    box-sizing: border-box;
+    border: 2px solid #fff;
+    border-top: 0;
+    border-inline-start: 0;
+    content: '';
+    inset-inline-start: 21.5%;
+    opacity: 0;
+    transform: rotate(45deg) scale(0) translate(-50%, -50%);
+    transition: all 0.1s cubic-bezier(0.71, -0.46, 0.88, 0.6), opacity 0.1s;
+}
+
+.memori-checkbox--input {
+    position: absolute;
+    z-index: 1;
+    width: 100%;
+    height: 100%;
+    cursor: pointer;
+    inset: 0;
+    opacity: 0;
+}
+
+.memori-checkbox--text {
+    padding-inline-end: 8px;
+    padding-inline-start: 8px;
+}
+
+.memori-checkbox--disabled {
+    cursor: not-allowed;
+}
+
+.memori-checkbox--disabled .memori-checkbox--input {
+    cursor: not-allowed;
+}
+
+.memori-checkbox--disabled .memori-checkbox--inner {
+    border-color: #d9d9d9;
+    background: rgba(0, 0, 0, 0.04);
+}
+
+.memori-checkbox--disabled .memori-checkbox--inner::after {
+    border-color: rgba(0, 0, 0, 0.25);
+}
+
+.memori-checkbox--disabled .memori-checkbox--text {
+    color: rgba(0, 0, 0, 0.25);
+}
+
+.memori-checkbox--input:checked:not(:disabled) + .memori-checkbox--inner {
+    z-index: 2;
+    border-color: var(--memori-primary);
+    background-color: var(--memori-primary);
+}
+
+.memori-checkbox--input:checked + .memori-checkbox--inner::after {
+    opacity: 1;
+    transform: rotate(45deg) scale(1) translate(-50%, -50%);
+    transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s;
+}

package/src/components/ui/Checkbox.stories.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import { Meta, Story } from '@storybook/react';
+import Checkbox, { Props } from './Checkbox';
+
+const meta: Meta = {
+  title: 'UI/Checkbox',
+  component: Checkbox,
+  argTypes: {
+    label: {
+      control: {
+        type: 'text',
+      },
+    },
+    className: {
+      control: {
+        type: 'text',
+      },
+    },
+    disabled: {
+      control: {
+        type: 'boolean',
+      },
+    },
+  },
+  parameters: {
+    controls: { expanded: true },
+  },
+};
+
+export default meta;
+
+const Template: Story<Props> = args => <Checkbox {...args} />;
+
+// By passing using the Args format for exported stories, you can control the props for a component for reuse in a test
+// https://storybook.js.org/docs/react/workflows/unit-testing
+export const Default = Template.bind({});
+Default.args = {
+  label: 'Check me',
+};
+
+export const Checked = Template.bind({});
+Checked.args = {
+  label: 'Uncheck me',
+  checked: true,
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  label: 'Do not check me',
+  disabled: true,
+};
+
+export const DisabledChecked = Template.bind({});
+DisabledChecked.args = {
+  label: 'Do not uncheck me',
+  checked: true,
+  disabled: true,
+};

package/src/components/ui/Checkbox.test.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import Checkbox from './Checkbox';
+
+it('renders Checkbox unchanged', () => {
+  const { container } = render(<Checkbox label="Check me" />);
+  expect(container).toMatchSnapshot();
+});
+
+it('renders Checkbox checked unchanged', () => {
+  const { container } = render(<Checkbox label="Check me" checked />);
+  expect(container).toMatchSnapshot();
+});
+
+it('renders Checkbox disabled unchanged', () => {
+  const { container } = render(<Checkbox label="Check me" disabled />);
+  expect(container).toMatchSnapshot();
+});
+
+it('renders Checkbox checked and disabled unchanged', () => {
+  const { container } = render(<Checkbox label="Check me" checked disabled />);
+  expect(container).toMatchSnapshot();
+});

package/src/components/ui/Checkbox.tsx

@@ -0,0 +1,38 @@
+import React, { FC } from 'react';
+import cx from 'classnames';
+import './Checkbox.css';
+
+export interface Props extends React.HTMLAttributes<HTMLInputElement> {
+  label: string;
+  checked?: boolean;
+  disabled?: boolean;
+}
+
+const Checkbox: FC<Props> = ({
+  label,
+  className,
+  disabled = false,
+  checked,
+  children,
+  ...props
+}) => (
+  <label
+    className={cx('memori-checkbox', className, {
+      'memori-checkbox--disabled': disabled,
+    })}
+  >
+    <span className="memori-checkbox--input-wrapper">
+      <input
+        type="checkbox"
+        {...props}
+        disabled={disabled}
+        defaultChecked={checked}
+        className="memori-checkbox--input"
+      />
+      <span className="memori-checkbox--inner" />
+    </span>
+    <span className="memori-checkbox--text">{label}</span>
+  </label>
+);
+
+export default Checkbox;

package/src/components/ui/Drawer.css

@@ -0,0 +1,138 @@
+.memori-drawer {
+    position: relative;
+    z-index: 60;
+}
+
+.memori-drawer--backdrop {
+    position: fixed;
+    z-index: 40;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.3);
+}
+
+.memori-drawer--container {
+    position: fixed;
+    z-index: 50;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    overflow-y: auto;
+}
+
+.memori-drawer--container-scrollable {
+    display: flex;
+    min-height: 100%;
+    align-items: center;
+    justify-content: center;
+}
+
+.memori-drawer--panel {
+    position: relative;
+    width: var(--memori-drawer--width, 100%);
+    height: 100%;
+    padding: 1.5rem 2rem;
+    margin-right: 0;
+    margin-left: auto;
+    background-color: #fff;
+    font-family: 'Exo 2', sans-serif;
+}
+
+@media (min-width: 768px) {
+    .memori-drawer--panel {
+        width: var(--memori-drawer--width--md, 80%);
+    }
+}
+
+@media (min-width: 1024px) {
+    .memori-drawer--panel {
+        width: var(--memori-drawer--width--lg, 60%);
+    }
+}
+
+.memori-drawer--panel.memori-drawer--with-footer {
+    padding-bottom: 0;
+}
+
+.memori-drawer--panel .memori-spin {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    flex-direction: column;
+}
+
+.memori-drawer--panel-left {
+    margin-right: auto;
+    margin-left: 0;
+}
+
+.memori-drawer--close {
+    position: absolute;
+    z-index: 70;
+    top: 0;
+    left: -3.5rem;
+    padding: 0.5rem;
+}
+
+.memori-drawer--close button {
+    border-color: #fff;
+    color: #fff;
+}
+
+.memori-drawer--panel-left .memori-drawer--close {
+    right: -3.5rem;
+    left: auto;
+}
+
+.memori-drawer--footer {
+    position: sticky;
+    bottom: 0;
+    left: 0;
+    display: flex;
+    width: 100%;
+    justify-content: flex-end;
+    padding-top: 1rem;
+    padding-bottom: 1rem;
+    border-top: 1px solid rgba(0, 0, 0, 0.25);
+    margin-top: auto;
+    background-color: #fff;
+}
+
+.memori-drawer--footer button+button {
+    margin-left: 0.5em;
+}
+
+.ease-out {
+    transition-timing-function: ease-out;
+}
+
+.ease-in {
+    transition-timing-function: ease-in;
+}
+
+.duration-300 {
+    transition-duration: 300ms;
+}
+
+.duration-200 {
+    transition-duration: 200ms;
+}
+
+.opacity-0 {
+    opacity: 0;
+}
+
+.opacity-100 {
+    opacity: 1;
+}
+
+.max-w-0 {
+    max-width: 0;
+}
+
+.max-w-100 {
+    max-width: 100%;
+}