@soul-refiner/design-system 0.1.0 → 0.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@soul-refiner/design-system",
-  "version": "0.1.0",
+  "version": "0.1.3",
   "main": "src/index.ts",
   "license": "MIT",
   "publishConfig": {
@@ -59,7 +59,7 @@
     "slate-history": "^0.93.0",
     "slate-hyperscript": "^0.77.0",
     "slate-react": "^0.94.0",
-    "styled-components": "^6.0.0-rc.1"
+    "styled-components": "^6.0.0-rc.3"
   },
   "peerDependencies": {
     "@emoji-mart/react": "^1.1.1",

package/src/common/colors.ts

@@ -1,4 +1,5 @@
 export const COLORS = [
+  'inherit',
   'page-bg',
   'white',
   'primary-blue-0',

package/src/common/styles.ts

@@ -62,6 +62,8 @@ export namespace Styles {
     padding: ${({ $padding }) =>
       $padding && typeof $padding === 'number'
         ? `${$padding}px`
+        : $padding && typeof $padding === 'string' && $padding.includes('px')
+        ? $padding
         : $padding && typeof $padding === 'string'
         ? `var(--${$padding})`
         : '0px'};

package/src/components/actions/button/button.tsx

@@ -0,0 +1,307 @@
+import React from 'react';
+import styled, { css } from 'styled-components';
+import { Styles } from 'common';
+import { Box, P } from 'components';
+import { ChevronDown, ChevronUp } from 'icons';
+
+const LG_ICON_SIZE = 20;
+const LG_ICON_SIZE_WO_CHILDREN = 24;
+const LG_FONT_SIZE = 16;
+const LG_PADDING = '11px 19px';
+const LG_PADDING_WO_CHILDREN = '11px';
+
+const SM_ICON_SIZE = 16;
+const SM_FONT_SIZE = 14;
+const SM_PADDING = '5px 15px';
+const SM_PADDING_WO_CHILDREN = '7px';
+
+type ButtonTypes =
+  | 'primary'
+  | 'secondary'
+  | 'outlined'
+  | 'danger'
+  | 'text'
+  | 'raised'
+  | 'special';
+type ButtonSize = 'small' | 'large';
+type ButtonShape = 'none' | 'small' | 'medium-small' | 'large';
+
+export interface ButtonProps extends React.PropsWithChildren {
+  as?: React.ElementType;
+  disabled?: boolean;
+  icon?: React.ReactElement | undefined;
+  isDropdownOpen?: boolean;
+  roundness?: ButtonShape;
+  size?: ButtonSize;
+  type?: ButtonTypes;
+}
+
+export const Button = ({
+  as = 'button',
+  children,
+  disabled,
+  icon,
+  isDropdownOpen,
+  size = 'large',
+  roundness = 'large',
+  type = 'primary',
+  ...props
+}: ButtonProps) => {
+  const Component = Components()[type];
+
+  const buttonIcon = React.Children.map(icon, (item) => {
+    if (React.isValidElement(item))
+      return {
+        ...item,
+        props: {
+          size:
+            size === 'large' && !children
+              ? LG_ICON_SIZE_WO_CHILDREN
+              : size === 'large'
+              ? LG_ICON_SIZE
+              : SM_ICON_SIZE,
+        },
+      };
+  })?.[0];
+
+  const dropdownIcon =
+    isDropdownOpen === true ? (
+      <ChevronUp size={size === 'large' ? LG_ICON_SIZE : SM_ICON_SIZE} />
+    ) : isDropdownOpen === false ? (
+      <ChevronDown size={size === 'large' ? LG_ICON_SIZE : SM_ICON_SIZE} />
+    ) : undefined;
+
+  const padding = !!children
+    ? size === 'large'
+      ? LG_PADDING
+      : SM_PADDING
+    : size === 'large'
+    ? LG_PADDING_WO_CHILDREN
+    : SM_PADDING_WO_CHILDREN;
+
+  return (
+    <Component
+      as={as}
+      disabled={disabled}
+      $align="center"
+      $display="flex"
+      $gap={size === 'large' ? 12 : 8}
+      $hasChildren={!!children}
+      $justify="center"
+      $padding={padding}
+      $roundness={roundness}
+      $size={size}
+      {...props}
+    >
+      {buttonIcon}
+      {children && (
+        <P
+          as="span"
+          $mediumBold
+          $fontSize={size === 'large' ? LG_FONT_SIZE : SM_FONT_SIZE}
+          $color="inherit"
+        >
+          {children}
+        </P>
+      )}
+      {!!children && dropdownIcon}
+    </Component>
+  );
+};
+
+const Components = (): Record<ButtonTypes, any> => ({
+  primary: Primary,
+  secondary: Secondary,
+  outlined: Outlined,
+  danger: Danger,
+  raised: Raised,
+  special: Special,
+  text: Text,
+});
+
+const base = css<{
+  $roundness: ButtonShape;
+}>`
+  display: flex;
+  border-radius: ${({ $roundness }) =>
+    $roundness === 'large'
+      ? '32px'
+      : $roundness === 'medium-small'
+      ? '8px'
+      : $roundness === 'small'
+      ? '4px'
+      : '0px'};
+  cursor: pointer;
+  user-select: none;
+  box-sizing: border-box;
+  outline: none;
+
+  svg {
+    fill: currentColor;
+  }
+
+  &:disabled {
+    background-color: var(--color-grey-9) !important;
+    border: 1px solid var(--color-grey-8) !important;
+    color: var(--color-grey-7) !important;
+    cursor: unset !important;
+  }
+`;
+
+const Primary = styled(Box)<{
+  $roundness: ButtonShape;
+}>`
+  background-color: var(--color-primary-blue-2);
+  color: var(--color-white);
+  border: 1px solid var(--color-primary-blue-2);
+
+  &:hover {
+    border: 1px solid var(--color-primary-blue-1);
+    background-color: var(--color-primary-blue-1);
+  }
+
+  &:active {
+    border: 1px solid var(--color-primary-blue-0);
+    background-color: var(--color-primary-blue-0);
+  }
+
+  ${base}
+  ${Styles.flex}
+  ${Styles.padding}
+`;
+
+const Secondary = styled(Box)<{
+  $roundness: ButtonShape;
+}>`
+  background-color: var(--color-primary-blue-4);
+  color: var(--color-primary-blue-2);
+  border: 1px solid var(--color-primary-blue-4);
+
+  &:hover {
+    border: 1px solid var(--color-primary-blue-2);
+    color: var(--color-primary-blue-1);
+  }
+
+  &:active {
+    color: var(--color-primary-blue-0);
+  }
+
+  ${base}
+  ${Styles.flex}
+  ${Styles.padding}
+`;
+
+const Outlined = styled(Box)<{
+  $roundness: ButtonShape;
+}>`
+  background-color: var(--color-white);
+  color: var(--color-grey-3);
+  border: 1px solid var(--color-grey-8);
+
+  &:active {
+    background-color: var(--color-grey-8);
+  }
+
+  ${base}
+  ${Styles.flex}
+  ${Styles.padding}
+`;
+
+const Danger = styled(Box)<{
+  $roundness: ButtonShape;
+}>`
+  background-color: var(--color-red-4);
+  color: var(--color-white);
+  border: 1px solid var(--color-red-4);
+
+  &:hover {
+    border: 1px solid var(--color-red-3);
+    background-color: var(--color-red-3);
+  }
+
+  &:active {
+    border: 1px solid var(--color-red-2);
+    background-color: var(--color-red-2);
+  }
+
+  ${base}
+  ${Styles.flex}
+  ${Styles.padding}
+`;
+
+const Text = styled(Box)<{
+  $roundness: ButtonShape;
+}>`
+  background-color: transparent;
+  border: 1px solid transparent;
+  color: var(--color-primary-blue-2);
+
+  &:hover {
+    color: var(--color-primary-blue-1);
+  }
+
+  &:active {
+    color: var(--color-primary-blue-0);
+  }
+
+  &:disabled {
+    background-color: transparent !important;
+    border: 1px solid transparent !important;
+  }
+
+  ${base}
+  ${Styles.flex}
+  ${Styles.padding}
+`;
+
+const Raised = styled(Box)<{
+  $roundness: ButtonShape;
+}>`
+  background-color: var(--color-white);
+  color: var(--color-grey-3);
+  border: 1px solid var(--color-white);
+  box-shadow: var(--elevation-1);
+
+  &:hover {
+    background-color: var(--color-grey-9);
+    border: 1px solid var(--color-grey-9);
+  }
+
+  &:active {
+    background-color: var(--color-grey-8);
+    border: 1px solid var(--color-grey-8);
+  }
+
+  &:disabled {
+    border: 1px solid var(--color-grey-9) !important;
+  }
+
+  ${base}
+  ${Styles.flex}
+  ${Styles.padding}
+`;
+
+const Special = styled(Box)<{
+  $roundness: ButtonShape;
+}>`
+  background-color: transparent;
+  border: 1px solid transparent;
+  color: var(--color-primary-grey-3);
+
+  &:hover {
+    color: var(--color-grey-3);
+  }
+
+  &:active {
+    background-color: var(--color-grey-9);
+  }
+
+  &:disabled {
+    background-color: transparent !important;
+    border: 1px solid transparent !important;
+  }
+
+  ${base}
+  ${Styles.flex}
+  ${Styles.padding}
+`;

package/src/components/actions/button/index.ts

@@ -0,0 +1,2 @@
+export { Button } from './button';
+export type { ButtonProps } from './button';

package/src/components/actions/index.ts

@@ -0,0 +1,2 @@
+export { Button } from './button';
+export type { ButtonProps } from './button';

package/src/components/index.ts

@@ -1,3 +1,5 @@
+export { Button } from './actions';
+export type { ButtonProps } from './actions';
 export { Box, Display, H, P, Typography } from './atoms';
 export type {
   BoxProps,
@@ -8,3 +10,5 @@ export type {
 } from './atoms';
 export { Avatar, Icon } from './iconography';
 export type { AvatarGroupProps, AvatarProps, IconProps } from './iconography';
+export { Modal } from './surfaces';
+export type { ModalContentProps, ModalProps } from './surfaces';

package/src/components/surfaces/index.ts

@@ -0,0 +1,2 @@
+export { Modal } from './modal';
+export type { ModalContentProps, ModalProps } from './modal';

package/src/components/surfaces/modal/index.ts

@@ -0,0 +1,2 @@
+export { Modal } from './modal';
+export type { ModalProps, ModalContentProps } from './modal';

package/src/components/surfaces/modal/modal.tsx

@@ -0,0 +1,179 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Button } from 'components';
+import { Close } from 'icons';
+
+const callAll =
+  (...fns: ((...args: unknown[]) => unknown)[]) =>
+  (...args: any) =>
+    fns.forEach((fn) => fn && fn(...args));
+
+const ModalContext = React.createContext<
+  [boolean, React.Dispatch<React.SetStateAction<boolean>>]
+>([false, (() => undefined) as React.Dispatch<React.SetStateAction<boolean>>]);
+
+export interface ModalProps extends React.PropsWithChildren {
+  /**
+   * This is to make the Modal a controlled component,
+   * instead of it managing its own state
+   */
+  controlledOpen?: boolean;
+}
+
+const Modal = ({ controlledOpen, ...props }: ModalProps) => {
+  const [open, setOpen] = React.useState(controlledOpen || false);
+
+  React.useEffect(() => {
+    if (controlledOpen !== undefined) {
+      setOpen(controlledOpen);
+    }
+  }, [controlledOpen]);
+
+  return <ModalContext.Provider value={[open, setOpen]} {...props} />;
+};
+
+const ModalTrigger = ({
+  children: child,
+}: {
+  children: React.ReactElement;
+}) => {
+  const [, setOpen] = React.useContext(ModalContext);
+  return (
+    child &&
+    React.cloneElement(child, {
+      onClick: callAll(() => setOpen(true), child.props.onClick),
+    })
+  );
+};
+
+ModalTrigger.displayName = 'Modal.Trigger';
+Modal.Trigger = ModalTrigger;
+
+const ModalDismiss = ({
+  children: child,
+  setClosed,
+}: {
+  children: React.ReactElement;
+  setClosed?: () => void;
+}) => {
+  const [, setOpen] = React.useContext(ModalContext);
+  return (
+    child &&
+    React.cloneElement(child, {
+      onClick: callAll(
+        () => setOpen(false),
+        child.props.onClick,
+        () => setClosed && setClosed()
+      ),
+    })
+  );
+};
+
+ModalDismiss.displayName = 'Modal.Dismiss';
+Modal.Dismiss = ModalDismiss;
+
+export interface ModalContentProps extends React.PropsWithChildren {
+  backgroundDark?: boolean;
+  footer?: React.ReactElement;
+  header?: React.ReactElement;
+  setClosed?: () => void;
+}
+
+const ModalContent = ({
+  backgroundDark = true,
+  children,
+  footer,
+  header,
+  setClosed,
+  ...props
+}: ModalContentProps) => {
+  const [open, setOpen] = React.useContext(ModalContext);
+
+  const handleOutsideClick = (event: React.MouseEvent) => {
+    if (event.currentTarget != event.target) return;
+    setClosed ? setClosed() : setOpen(false);
+  };
+
+  return (
+    <Wrapper
+      $backgroundDark={backgroundDark}
+      $open={open}
+      onClick={handleOutsideClick}
+    >
+      <Content {...props}>
+        {header && (
+          <div className="header">
+            <div>{header}</div>
+            <Modal.Dismiss setClosed={setClosed}>
+              <Button icon={<Close />} type="special" />
+            </Modal.Dismiss>
+          </div>
+        )}
+        {children}
+        {footer && <div className="footer">{footer}</div>}
+      </Content>
+    </Wrapper>
+  );
+};
+
+ModalContent.displayName = 'Modal.Content';
+Modal.Content = ModalContent;
+
+export { Modal };
+
+const Wrapper = styled.div<{
+  $open: boolean;
+  $backgroundDark: boolean;
+}>`
+  ${({ $open }) =>
+    $open
+      ? `display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;`
+      : 'display: none;'}
+  ${({ $backgroundDark }) =>
+    $backgroundDark
+      ? `background: radial-gradient(
+      79.02% 79.02% at 50% 0%,
+      rgba(0, 27, 58, 0.8) 0%,
+      rgba(0, 0, 0, 0.8) 100%
+    );
+    backdrop-filter: blur(5px);
+    cursor: pointer;`
+      : ''}
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 100;
+  width: 100vw;
+  height: 100vh;
+  padding: 0px;
+  margin: 0px;
+  overflow: hidden;
+`;
+
+const Content = styled.div`
+  position: absolute;
+  z-index: 101;
+  background-color: var(--color-white);
+  box-shadow: var(--elevation-2);
+  border-radius: var(--small);
+  cursor: initial;
+
+  [class~='header'] {
+    display: flex;
+    align-items: center;
+    padding: 16px;
+    border-bottom: 1px solid var(--color-grey-8);
+    > *:first-child {
+      flex: 1;
+      display: block;
+    }
+  }
+
+  [class~='footer'] {
+    padding: 16px;
+    border-top: 1px solid var(--color-grey-8);
+  }
+`;

package/src/icons/basic/index.ts

@@ -67,13 +67,12 @@ export { Menu } from './menu';
 export { MenuCircle } from './menu_circle';
 export { MenuDots } from './menu_dots';
 export { Minimize } from './minimize';
-export { Microphone } from './microphone';
 export { MicrophoneSlash } from './microphone_slash';
 export { Minus } from './minus';
 export { MinusCircle } from './minus_circle';
 export { New } from './new';
 export { Newspaper } from './newspaper';
-export { Note } from './note';
+export { NotePad } from './note_pad';
 export { Options } from './options';
 export { PaintBrush } from './paint_brush';
 export { Paperclip } from './paperclip';

package/src/icons/basic/{note.tsx → note_pad.tsx}

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Icon, IconProps } from 'components';
 
-export const Note = (props: IconProps) => {
+export const NotePad = (props: IconProps) => {
   return (
     <Icon {...props}>
       <path

package/src/icons/index.ts

@@ -1,13 +1,20 @@
+export * from './arrow';
+export * from './audio_video';
 export * from './basic';
 export * from './data';
 export * from './email';
-export * from './finance';
 export * from './file';
+export * from './finance';
 export * from './layout';
 export * from './maps';
 export * from './message';
+export * from './misc';
 export * from './notifications';
 export * from './people';
+export * from './phone';
 export * from './security';
+export * from './shopping';
 export * from './symbols';
+export * from './technology';
+export * from './text';
 export * from './time';

package/src/icons/misc/index.ts

@@ -15,7 +15,7 @@ export { Lightbulb } from './light_bulb';
 export { Moon } from './moon';
 export { Nut } from './nut';
 export { Planet } from './planet';
-export { Plus } from './plus';
+export { PlusThick } from './plus_thick';
 export { Pocket } from './pocket';
 export { Rocket } from './rocket';
 export { Soup } from './soup';

package/src/icons/misc/{plus.tsx → plus_thick.tsx}

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Icon, IconProps } from 'components';
 
-export const Plus = (props: IconProps) => {
+export const PlusThick = (props: IconProps) => {
   return (
     <Icon {...props}>
       <path

package/src/index.ts

@@ -1 +1,2 @@
-export { Avatar, Box, Icon, Display, H, P } from './components';
+export * from './components';
+export * as Icons from './icons';

package/src/icons/basic/microphone.tsx

@@ -1,14 +0,0 @@
-import React from 'react';
-import { Icon, IconProps } from 'components';
-
-export const Microphone = (props: IconProps) => {
-  return (
-    <Icon {...props}>
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M7.99935 0.666687C9.47211 0.666687 10.666 1.86059 10.666 3.33335V8.00002C10.666 9.47278 9.47211 10.6667 7.99935 10.6667C6.52659 10.6667 5.33268 9.47278 5.33268 8.00002V3.33335C5.33268 1.86059 6.52659 0.666687 7.99935 0.666687ZM8.66602 13.2921V14H10.666V15.3334H5.33268V14H7.33268V13.2921C4.70181 12.964 2.66602 10.7198 2.66602 8.00002V6.66669H3.99935V8.00002C3.99935 10.2092 5.79021 12 7.99935 12C10.2085 12 11.9993 10.2092 11.9993 8.00002V6.66669H13.3327V8.00002C13.3327 10.7198 11.2969 12.964 8.66602 13.2921ZM6.66602 3.33335C6.66602 2.59697 7.26297 2.00002 7.99935 2.00002C8.73573 2.00002 9.33268 2.59697 9.33268 3.33335V8.00002C9.33268 8.7364 8.73573 9.33335 7.99935 9.33335C7.26297 9.33335 6.66602 8.7364 6.66602 8.00002V3.33335Z"
-      />
-    </Icon>
-  );
-};