feat: add Button component and styles

package.json

@@ -234,7 +234,7 @@
     "prettier": "prettier '**/*.{js,mjs,ts,mts,jsx,tsx,md,json,yml}'",
     "prettier-fix": "yarn prettier --write",
     "fix-staged": "lint-staged --config .lintstagedrc.fix.json --concurrent 1",
-    "start": "tsc --watch --sourceMap --declarationMap",
+    "start": "tsc --watch --sourceMap",
     "start:css": "sass --watch src/styling/index.scss dist/css/index.css",
     "prepare": "husky install",
     "preversion": "yarn install",

src/components/Button/Button.tsx

@@ -0,0 +1,6 @@
+import type { ComponentProps } from 'react';
+import clsx from 'clsx';
+
+export const Button = ({ className, ...props }: ComponentProps<'button'>) => (
+  <button type='button' {...props} className={clsx('str-chat__button', className)} />
+);

src/components/Button/index.ts

@@ -0,0 +1 @@
+export * from './Button';

src/components/Button/styling/Button.scss

@@ -0,0 +1,132 @@
+@use '../../../styling/utils';
+
+.str-chat {
+  .str-chat__button {
+    @include utils.button-reset;
+    position: relative;     /* creates positioning context for pseudo ::after overlay */
+    overflow: hidden;
+
+    cursor: pointer;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--spacing-xs);
+    //padding-inline: var(--spacing-md);
+    //padding-block: var(--spacing-sm);
+    /*
+    min-width / min-height on buttons:
+      - enforce a minimum tappable area
+      - follow accessibility & platform guidelines
+      - don’t affect layout unless the button would be too small
+      - are about usability, not design polish
+     */
+    min-height: var(--button-visual-height-lg);
+    max-height: var(--button-visual-height-lg);
+
+    line-height: var(--typography-line-height-normal);
+    border-radius: var(--button-radius-lg);
+
+    font-weight: var(--font-weight-w600);
+
+    &.str-chat__button--solid {
+      &.str-chat__button--primary {
+        background-color: var(--button-type-primary-bg);
+        color: var(--button-type-primary-text);
+        border-color: var(--button-type-primary-border);
+      }
+
+      &.str-chat__button--secondary {
+        background-color: var(--button-type-secondary-bg);
+        color: var(--button-type-secondary-text);
+        border-color: var(--button-type-secondary-border);
+      }
+
+      &.str-chat__button--destructive {
+        background-color: var(--button-type-destructive-bg);
+        color: var(--button-type-destructive-text);
+        border-color: var(--button-type-destructive-border);
+      }
+
+      &:disabled {
+        background-color: var(--state-bg-disabled);
+      }
+    }
+
+    &.str-chat__button--ghost {
+      border-color: var(--button-style-ghost-border);
+      background-color: var(--button-style-ghost-bg);
+
+      &.str-chat__button--primary {
+        color: var(--button-style-ghost-text-primary);
+      }
+
+      &.str-chat__button--secondary {
+        color: var(--button-style-ghost-text-secondary);
+      }
+
+      &.str-chat__button--destructive {
+        color: var(--button-type-destructive-text-inverse);
+      }
+    }
+
+    &.str-chat__button--outline {
+      // todo: designs not available
+      //&.str-chat__button--primary {
+      //  background-color: var(--button-type-primary-bg);
+      //  color: var(--button-type-primary-text);
+      //  border-color: var(--button-type-primary-border);
+      //}
+
+      &.str-chat__button--secondary {
+        background-color: var(--button-style-outline-bg);
+        color: var(--button-style-outline-text);
+        border-color: var(--button-style-outline-border);
+      }
+
+      // todo: designs not available
+      &.str-chat__button--destructive {
+        //background-color: var(--button-type-destructive-bg);
+        color: var(--button-type-destructive-text-inverse);
+        //border-color: var(--button-type-destructive-border);
+      }
+    }
+
+    &.str-chat__button--solid,
+    &.str-chat__button--ghost {
+      &:disabled {
+        border: none;
+      }
+    }
+
+    &.str-chat__button--solid,
+    &.str-chat__button--outline,
+    &.str-chat__button--ghost {
+      border-width: 1px;
+      border-style: solid;
+
+
+      &:not(:disabled):hover {
+        @include utils.overlay-after(0.05);
+      }
+
+      &:not(:disabled):active { // pressed
+        @include utils.overlay-after(0.10);
+      }
+
+      &:not(:disabled):focus-visible { // focused
+        outline: 2px solid  var(--border-utility-focus);
+      }
+
+      &:disabled {
+        color: var(--state-text-disabled);
+        cursor: default;
+      }
+    }
+
+    &.str-chat__button--floating {
+      box-shadow: var(--light-elevation-3);
+    }
+  }
+}
+

src/components/Icons/IconMicrophone.tsx

@@ -0,0 +1,17 @@
+import type { ComponentProps } from 'react';
+import clsx from 'clsx';
+
+export const IconMicrophone = ({ className, ...props }: ComponentProps<'svg'>) => (
+  <svg
+    stroke='currentColor'
+    viewBox='0 0 20 20'
+    {...props}
+    className={clsx('str-chat__icon--microphone', className)}
+    xmlns='http://www.w3.org/2000/svg'
+  >
+    <path
+      d='M10.0007 15.8332C12.5637 15.8332 14.7662 14.2906 15.7307 12.0832M10.0007 15.8332C7.43788 15.8332 5.23527 14.2906 4.27083 12.0832M10.0007 15.8332V17.7082M10.0007 13.1248C8.04476 13.1248 6.4591 11.5392 6.4591 9.58317V5.83317C6.4591 3.87716 8.04476 2.2915 10.0007 2.2915C11.9567 2.2915 13.5424 3.87716 13.5424 5.83317V9.58317C13.5424 11.5392 11.9567 13.1248 10.0007 13.1248Z'
+      stroke='#384047'
+    />
+  </svg>
+);

src/components/Icons/IconPaperPlane.tsx

@@ -0,0 +1,17 @@
+import type { ComponentProps } from 'react';
+import clsx from 'clsx';
+
+export const IconPaperPlane = ({ className, ...props }: ComponentProps<'svg'>) => (
+  <svg
+    stroke='currentColor'
+    viewBox='0 0 20 20'
+    {...props}
+    className={clsx('str-chat__icon--paper-plane', className)}
+    xmlns='http://www.w3.org/2000/svg'
+  >
+    <path
+      d='M5.00006 9.99996H7.70839M5.00006 9.99996L2.81084 4.05778C2.54981 3.34929 3.29014 2.68668 3.96546 3.02433L16.426 9.25463C17.0402 9.56171 17.0402 10.4382 16.426 10.7453L3.96546 16.9756C3.29014 17.3133 2.54981 16.6506 2.81084 15.9421L5.00006 9.99996Z'
+      stroke='white'
+    />
+  </svg>
+);

src/components/Icons/IconPlus.tsx

@@ -0,0 +1,14 @@
+import type { ComponentProps } from 'react';
+import clsx from 'clsx';
+
+export const IconPlus = ({ className, ...props }: ComponentProps<'svg'>) => (
+  <svg
+    stroke='currentColor'
+    viewBox='0 0 16 16'
+    {...props}
+    className={clsx('str-chat__icon--plus', className)}
+    xmlns='http://www.w3.org/2000/svg'
+  >
+    <path d='M7.625 0.75V7.625M7.625 7.625V14.5M7.625 7.625H0.75M7.625 7.625H14.5' />
+  </svg>
+);

src/components/Icons/index.ts

@@ -0,0 +1,2 @@
+export * from './IconMicrophone';
+export * from './IconPlus';

src/components/Icons/styling/IconMicrophone.scss

@@ -0,0 +1,7 @@
+.str-chat {
+  .str-chat__icon--microphone {
+    stroke-width: 1.5;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+  }
+}

src/components/Icons/styling/IconPaperPlane.scss

@@ -0,0 +1,7 @@
+.str-chat {
+  .str-chat__icon--paper-plane {
+    stroke-width: 1.5;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+  }
+}

src/components/Icons/styling/IconPlus.scss

@@ -0,0 +1,7 @@
+.str-chat {
+  .str-chat__icon--plus {
+    stroke-width: 1.5;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+  }
+}

src/components/Icons/styling/index.scss

@@ -0,0 +1 @@
+@use 'IconPlus';

src/components/index.ts

@@ -2,6 +2,7 @@ export * from './AIStateIndicator';
 export * from './Attachment';
 export * from './AudioPlayback';
 export * from './Avatar';
+export * from './Button';
 export * from './Channel';
 export * from './ChannelHeader';
 export * from './ChannelList';
@@ -13,6 +14,7 @@ export * from './Dialog';
 export * from './EmptyStateIndicator';
 export * from './EventComponent';
 export * from './Gallery';
+export * from './Icons';
 export * from './InfiniteScrollPaginator';
 export * from './Loading';
 export * from './LoadMore';

src/styling/base.scss

@@ -0,0 +1,4 @@
+.str-chat {
+  font-family: var(--typography-font-family-sans), system-ui, -apple-system, BlinkMacSystemFont, “Segoe UI”, Roboto, sans-serif;
+  font-size: var(--typography-font-size-md);
+}

src/styling/index.scss

@@ -1,2 +1,10 @@
+// Base styles
+@use "./base";
 @use "./variables.css";
+@use "../components/Icons/styling";
+
+// Base components with base styles
+@use "../components/Button/styling/Button";
+
+// Layers have to be kept the last
 @import 'modern-normalize' layer(css-reset);

src/styling/utils.scss

@@ -0,0 +1,14 @@
+@mixin button-reset {
+  background: none;
+  border: none;
+}
+
+@mixin overlay-after($opacity, $color: black) {
+  &::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background: rgba($color, $opacity);
+    pointer-events: none;
+  }
+}