35 toolbar

app/ui/editor/toolbar/toolbar-root.tsx

@@ -0,0 +1,15 @@
+import { FC } from 'react';
+import { Root, type ToolbarProps } from '@radix-ui/react-toolbar';
+import { clsx } from 'clsx';
+
+export const ToolbarRoot: FC<ToolbarProps> = (props) => {
+  return (
+    <Root
+      className={clsx(
+        'inline-flex flex-row gap-3 p-2 border border-nots-grey-200 dark:border-nots-grey-600 dark:bg-nots-grey-700',
+        props.className
+      )}
+      {...props}
+    />
+  );
+};

app/ui/editor/toolbar/toolbar-separator.tsx

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+import { Separator } from '@radix-ui/react-toolbar';
+
+export const ToolbarSeparator: FC = () => {
+  return (
+    <Separator className="w-[1px] bg-nots-grey-200 dark:bg-nots-grey-600" />
+  );
+};

app/ui/editor/toolbar/toolbar-toggle-group.tsx

@@ -0,0 +1,16 @@
+import { FC } from 'react';
+import {
+  ToggleGroup,
+  type ToolbarToggleGroupMultipleProps,
+  type ToolbarToggleGroupSingleProps,
+} from '@radix-ui/react-toolbar';
+
+export type ToolbarToggleGroupProps = (
+  | ToolbarToggleGroupMultipleProps
+  | ToolbarToggleGroupSingleProps
+) &
+  React.PropsWithChildren;
+
+export const ToolbarToggleGroup: FC<ToolbarToggleGroupProps> = (props) => {
+  return <ToggleGroup className="flex gap-1" {...props} />;
+};

app/ui/editor/toolbar/toolbar-toggle-item.tsx

@@ -0,0 +1,21 @@
+import { FC } from 'react';
+import {
+  ToggleItem,
+  type ToolbarToggleItemProps as RadixToolbarToggleItemProps,
+} from '@radix-ui/react-toolbar';
+import { Button, IconName } from '~/ui';
+
+export type ToolbarToggleItemProps = {
+  icon: IconName;
+} & Omit<RadixToolbarToggleItemProps, 'color'>;
+
+export const ToolbarToggleItem: FC<ToolbarToggleItemProps> = (props) => {
+  return (
+    <Button
+      variant="subtle"
+      as={ToggleItem}
+      className="data-[state=on]:bg-nots-grey-800 data-[state=on]:text-white dark:data-[state=on]:bg-white dark:data-[state=on]:text-nots-grey-800"
+      {...props}
+    />
+  );
+};

app/ui/editor/toolbar/toolbar.stories.tsx

@@ -0,0 +1,34 @@
+import { Meta } from '@storybook/react';
+import { ToolbarRoot } from './toolbar-root';
+import { ToolbarToggleGroup } from './toolbar-toggle-group';
+import { ToolbarToggleItem } from './toolbar-toggle-item';
+import { ToolbarSeparator } from './toolbar-separator';
+
+export default {
+  title: 'Editor/Toolbar',
+  component: ToolbarRoot,
+} as Meta;
+
+const Template = () => (
+  <ToolbarRoot>
+    <ToolbarToggleGroup type="single">
+      <ToolbarToggleItem value="h1" icon="h1" />
+      <ToolbarToggleItem value="h2" icon="h2" />
+      <ToolbarToggleItem value="h3" icon="h3" />
+    </ToolbarToggleGroup>
+    <ToolbarSeparator />
+    <ToolbarToggleGroup type="multiple">
+      <ToolbarToggleItem value="bold" icon="bold" />
+      <ToolbarToggleItem value="italic" icon="italic" />
+      <ToolbarToggleItem value="underline" icon="underline" />
+    </ToolbarToggleGroup>
+    <ToolbarSeparator />
+    <ToolbarToggleGroup type="single">
+      <ToolbarToggleItem value="unordered-list" icon="ul" />
+      <ToolbarToggleItem value="ordered-list" icon="ol" />
+      <ToolbarToggleItem value="check-list" icon="checkList" />
+    </ToolbarToggleGroup>
+  </ToolbarRoot>
+);
+
+export const Default = Template.bind({});

app/ui/editor/toolbar/toolbar.test.tsx

@@ -0,0 +1,33 @@
+import { render } from '@testing-library/react';
+import { ToolbarRoot } from './toolbar-root';
+import { ToolbarSeparator } from './toolbar-separator';
+import { ToolbarToggleGroup } from './toolbar-toggle-group';
+import { ToolbarToggleItem } from './toolbar-toggle-item';
+
+describe('Toolbar', () => {
+  it('should render toolbar', () => {
+    const { container } = render(
+      <ToolbarRoot>
+        <ToolbarToggleGroup type="single">
+          <ToolbarToggleItem value="h1" icon="h1" />
+          <ToolbarToggleItem value="h2" icon="h2" />
+          <ToolbarToggleItem value="h3" icon="h3" />
+        </ToolbarToggleGroup>
+        <ToolbarSeparator />
+        <ToolbarToggleGroup type="multiple">
+          <ToolbarToggleItem value="bold" icon="bold" />
+          <ToolbarToggleItem value="italic" icon="italic" />
+          <ToolbarToggleItem value="underline" icon="underline" />
+        </ToolbarToggleGroup>
+        <ToolbarSeparator />
+        <ToolbarToggleGroup type="single">
+          <ToolbarToggleItem value="unordered-list" icon="ul" />
+          <ToolbarToggleItem value="ordered-list" icon="ol" />
+          <ToolbarToggleItem value="check-list" icon="checkList" />
+        </ToolbarToggleGroup>
+      </ToolbarRoot>
+    );
+
+    expect(container).toMatchSnapshot();
+  });
+});

app/ui/forms/button/__snapshots__/button.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`Button > should render disabled button 1`] = `
 <div>
   <button
-    class="flex items-center justify-center rounded-sm transition-colors duration-200 ease-in-out gap-2 px-3 py-[6px] flex-row text-white dark:text-nots-grey-800 disabled:bg-nots-grey-200 dark:disabled:bg-white dark:disabled:text-nots-grey-200 focus:outline-none bg-nots-grey-800 dark:bg-white hover:bg-nots-grey-600 dark:hover:bg-nots-grey-100 focus:outline-none focus:ring-2 focus:ring-nots-grey-300"
+    class="flex items-center justify-center rounded-sm transition-colors duration-200 ease-in-out gap-2 px-3 py-[6px] flex-row text-white dark:text-nots-grey-800 disabled:bg-nots-grey-200 dark:disabled:bg-white dark:disabled:text-nots-grey-200 focus:outline-none bg-nots-grey-800 dark:bg-white hover:bg-nots-grey-600 dark:hover:bg-nots-grey-100 focus:outline-none focus:ring-2 focus:ring-nots-grey-200"
     disabled=""
   />
 </div>
@@ -12,15 +12,15 @@ exports[`Button > should render disabled button 1`] = `
 exports[`Button > should render grey filled button 1`] = `
 <div>
   <button
-    class="flex items-center justify-center rounded-sm transition-colors duration-200 ease-in-out gap-2 px-3 py-[6px] flex-row text-white dark:text-nots-grey-800 disabled:bg-nots-grey-200 dark:disabled:bg-white dark:disabled:text-nots-grey-200 focus:outline-none bg-nots-grey-800 dark:bg-white hover:bg-nots-grey-600 dark:hover:bg-nots-grey-100 focus:outline-none focus:ring-2 focus:ring-nots-grey-300"
+    class="flex items-center justify-center rounded-sm transition-colors duration-200 ease-in-out gap-2 px-3 py-[6px] flex-row text-white dark:text-nots-grey-800 disabled:bg-nots-grey-200 dark:disabled:bg-white dark:disabled:text-nots-grey-200 focus:outline-none bg-nots-grey-800 dark:bg-white hover:bg-nots-grey-600 dark:hover:bg-nots-grey-100 focus:outline-none focus:ring-2 focus:ring-nots-grey-200"
   />
 </div>
 `;
 
 exports[`Button > should render loading button 1`] = `
 <div>
   <button
-    class="flex items-center justify-center rounded-sm transition-colors duration-200 ease-in-out gap-2 px-3 py-[6px] flex-row pointer-events-none text-white dark:text-nots-grey-800 drop-shadow-none hover:drop-shadow-none pointer-events-none disabled:bg-nots-grey-200 dark:disabled:bg-white dark:disabled:text-nots-grey-200 focus:outline-none bg-nots-grey-800 dark:bg-white hover:bg-nots-grey-600 dark:hover:bg-nots-grey-100 focus:outline-none focus:ring-2 focus:ring-nots-grey-300 hover:bg-ws-primary-500"
+    class="flex items-center justify-center rounded-sm transition-colors duration-200 ease-in-out gap-2 px-3 py-[6px] flex-row pointer-events-none text-white dark:text-nots-grey-800 pointer-events-none disabled:bg-nots-grey-200 dark:disabled:bg-white dark:disabled:text-nots-grey-200 focus:outline-none bg-nots-grey-800 dark:bg-white hover:bg-nots-grey-600 dark:hover:bg-nots-grey-100 focus:outline-none focus:ring-2 focus:ring-nots-grey-200"
   >
     <div
       class="pointer-events-none flex items-center justify-center absolute"

app/ui/forms/button/button.stories.tsx

@@ -39,9 +39,6 @@ export default meta;
 type Story = StoryObj<typeof Button>;
 
 export const GreyFilled: Story = {
-  args: {
-    color: 'grey',
-  },
   render: () => (
     <div className="flex flex-grow-0 flex-wrap gap-4">
       <Button onClick={() => console.log('clicked')}>Primary Button</Button>
@@ -89,3 +86,75 @@ export const GreyFilled: Story = {
     </div>
   ),
 };
+
+export const GreySubtle: Story = {
+  render: () => (
+    <div className="flex flex-grow-0 flex-wrap gap-4">
+      <Button variant="subtle" onClick={() => console.log('clicked')}>
+        Primary Button
+      </Button>
+      <Button
+        variant="subtle"
+        isLoading={true}
+        onClick={() => console.log('clicked')}
+      >
+        Primary Button
+      </Button>
+      <Button
+        variant="subtle"
+        disabled={true}
+        onClick={() => console.log('clicked')}
+      >
+        Primary Button
+      </Button>
+      <Button
+        variant="subtle"
+        onClick={() => console.log('clicked')}
+        icon="caretDown"
+        iconPosition="start"
+      >
+        Primary Button
+      </Button>
+      <Button
+        variant="subtle"
+        onClick={() => console.log('clicked')}
+        icon="caretDown"
+      >
+        Primary Button
+      </Button>
+      <Button
+        variant="subtle"
+        isLoading={true}
+        onClick={() => console.log('clicked')}
+        icon="caretDown"
+      >
+        Primary Button
+      </Button>
+      <Button
+        variant="subtle"
+        disabled={true}
+        onClick={() => console.log('clicked')}
+        icon="paragraph"
+      >
+        Primary Button
+      </Button>
+      <Button
+        variant="subtle"
+        onClick={() => console.log('clicked')}
+        icon="paragraph"
+      />
+      <Button
+        variant="subtle"
+        isLoading={true}
+        onClick={() => console.log('clicked')}
+        icon="paragraph"
+      />
+      <Button
+        variant="subtle"
+        disabled={true}
+        onClick={() => console.log('clicked')}
+        icon="paragraph"
+      />
+    </div>
+  ),
+};

app/ui/forms/button/button.tsx

@@ -5,7 +5,7 @@ import type { IconName } from '~/ui';
 import { LoadingIndicator, Icon } from '~/ui';
 import type { PolymorphicComponentPropWithRef } from '~/ui/utils/polymorphic-types';
 
-type Variant = 'filled';
+type Variant = 'filled' | 'subtle';
 export type ButtonColor = 'grey';
 type Size = 'regular';
 
@@ -50,19 +50,32 @@ export const Button = forwardRef(
      */
     const filledClasses = clsx([
       'text-white dark:text-nots-grey-800',
-      isLoading &&
-        'drop-shadow-none hover:drop-shadow-none pointer-events-none',
+      isLoading && 'pointer-events-none',
     ]);
 
-    const primaryFilledClasses = clsx([
+    const greyFilledClasses = clsx([
       filledClasses,
       'disabled:bg-nots-grey-200 dark:disabled:bg-white dark:disabled:text-nots-grey-200 focus:outline-none',
-      'bg-nots-grey-800 dark:bg-white hover:bg-nots-grey-600 dark:hover:bg-nots-grey-100 focus:outline-none focus:ring-2 focus:ring-nots-grey-300',
-      isLoading && 'hover:bg-ws-primary-500',
+      'bg-nots-grey-800 dark:bg-white hover:bg-nots-grey-600 dark:hover:bg-nots-grey-100 focus:outline-none focus:ring-2 focus:ring-nots-grey-200',
+    ]);
+
+    /*
+     * Subtle Varaiants
+     */
+    const subtleClasses = clsx([
+      'text-nots-grey-800 dark:text-white',
+      isLoading && 'pointer-events-none',
+    ]);
+
+    const greySubtleClasses = clsx([
+      subtleClasses,
+      'disabled:text-nots-grey-200 dark:disabled:text-nots-grey-600  focus:outline-none',
+      ' hover:text-nots-grey-600 dark:hover:text-nots-grey-300 focus:outline-none focus:ring-2 focus:ring-nots-grey-200',
     ]);
 
     const colorClasses = clsx([
-      variant === 'filled' && color === 'grey' && primaryFilledClasses,
+      variant === 'filled' && color === 'grey' && greyFilledClasses,
+      variant === 'subtle' && color === 'grey' && greySubtleClasses,
     ]);
 
     const baseShapeClasses = clsx([size === 'regular' && `px-3 py-[6px]`]);

app/ui/index.ts

@@ -1,5 +1,9 @@
 /** Editor */
-export * from './editor/editor';
+export * from './editor/editor/editor';
+export * from './editor/toolbar/toolbar-root';
+export * from './editor/toolbar/toolbar-toggle-group';
+export * from './editor/toolbar/toolbar-toggle-item';
+export * from './editor/toolbar/toolbar-separator';
 
 /** Forms */
 export * from './forms/button/button';