feat(design): introduce some usefull components (#20)

* feat(design): introduce some usefull components * build: remove useless dep * fix: code format * fix * fix code format
ether · Feb 26, 2024 · e767e4f · e767e4f
1 parent e2a493d
commit e767e4f
Show file tree

Hide file tree

Showing 32 changed files with 1,717 additions and 35 deletions.
diff --git a/.storybook/main.ts b/.storybook/main.ts
@@ -10,18 +10,21 @@ export default {
     '@storybook/addon-interactions',
   ],
   logLevel: 'error',
-  // enable when you have a public folder with assets
-  //staticDirs: ['../public'],
+  staticDirs: ['../public'],
   typescript: { reactDocgen: false, check: false },
   core: { disableTelemetry: true, disableWhatsNewNotifications: true },
   framework: {
     name: '@storybook/nextjs',
     options: { builder: { useSWC: true } },
   },
   previewBody:
-    '<style>:root { color-scheme: light; } html[data-theme="dark"] { color-scheme: dark; }</style>' +
     // Warning: this should be same as the one in `src/styles/globals.css`
-    '<body class="bg-gray-50 text-gray-950 dark:bg-gray-900 transition-colors dark:text-gray-50"></body>',
+    `<style>
+      :root { color-scheme: light; }
+      html[data-theme="dark"] { color-scheme: dark; }
+    </style>
+    <body></body>`,
+
   webpack: async config => ({
     ...config,
     // Performance Hints do not make sense on Storybook as it is bloated by design

diff --git a/.storybook/preview.ts → .storybook/preview.tsx b/.storybook/preview.ts → .storybook/preview.tsx
@@ -1,4 +1,6 @@
+import React from 'react';
 import { withThemeByDataAttribute } from '@storybook/addon-themes';
+import { ToastProvider } from '../providers/toast';
 import type { Preview, ReactRenderer } from '@storybook/react';
 import '../styles/globals.css';
 
@@ -19,6 +21,11 @@ const preview: Preview = {
       defaultTheme: 'light',
       attributeName: 'data-theme',
     }),
+    Story => (
+      <ToastProvider viewportClassName="absolute top-0 left-0 list-none">
+        <Story />
+      </ToastProvider>
+    ),
   ],
 };
 

diff --git a/SECURITY.md b/SECURITY.md
@@ -9,4 +9,4 @@ The project is currently under development, so we only support this version(s) o
 | 0.1.X   | :white_check_mark: |
 
 > \[!NOTE]\
->There is no compatibility yet with etherpad-lite
+> There is no compatibility yet with etherpad-lite
diff --git a/app/client/page.tsx b/app/client/page.tsx
@@ -2,7 +2,9 @@
 
 import { useEffect } from 'react';
 import io from 'socket.io-client';
-const Page = () => {
+import type { FC } from 'react';
+
+const Page: FC = () => {
   useEffect(() => {
     const socket = io();
     socket.on('connect', () => {

diff --git a/app/page.tsx b/app/page.tsx
@@ -0,0 +1,6 @@
+import Landing from '@/components/Sections/Landing';
+import type { FC } from 'react';
+
+const Page: FC = () => <Landing />;
+
+export default Page;
diff --git a/components/Common/Background/index.module.css b/components/Common/Background/index.module.css
@@ -0,0 +1,23 @@
+.background {
+  @apply absolute
+  left-0
+  top-0
+  -z-10
+  size-full
+  bg-[url('/static/background.svg')]
+  bg-center
+  bg-no-repeat;
+
+  &::after {
+    @apply absolute
+      inset-0
+      m-auto
+      aspect-square
+      w-[300px]
+      rounded-full
+      bg-ether-400
+      blur-[120px]
+      content-['']
+      dark:bg-ether-700;
+  }
+}
diff --git a/components/Common/Background/index.stories.tsx b/components/Common/Background/index.stories.tsx
@@ -0,0 +1,9 @@
+import BluredBackground from './';
+import type { Meta as MetaObj, StoryObj } from '@storybook/react';
+
+type Story = StoryObj<typeof BluredBackground>;
+type Meta = MetaObj<typeof BluredBackground>;
+
+export const Default: Story = {};
+
+export default { component: BluredBackground } as Meta;
diff --git a/components/Common/Background/index.tsx b/components/Common/Background/index.tsx
@@ -0,0 +1,6 @@
+import styles from './index.module.css';
+import type { FC } from 'react';
+
+const BluredBackground: FC = () => <div className={styles.background} />;
+
+export default BluredBackground;
diff --git a/components/Common/Button/index.stories.tsx b/components/Common/Button/index.stories.tsx
@@ -1,4 +1,4 @@
-import { HeartIcon } from '@heroicons/react/20/solid';
+import { Heart } from 'lucide-react';
 import Button from './';
 import type { Meta as MetaObj, StoryObj } from '@storybook/react';
 
@@ -9,7 +9,7 @@ const defaultStory: Story = {
   args: {
     children: (
       <>
-        <HeartIcon className="size-6" /> We love Etherpad
+        <Heart className="size-6" /> We love Etherpad
       </>
     ),
     // it's allow to have button on the storybook layout to toggle the disabled state

diff --git a/components/Common/Input/index.module.css b/components/Common/Input/index.module.css
@@ -1,5 +1,6 @@
 .inputWrapper {
   @apply flex
+    w-full
     flex-col
     gap-1.5;
 

diff --git a/components/Common/Select/index.tsx b/components/Common/Select/index.tsx
@@ -1,6 +1,6 @@
 'use client';
 import * as Primitive from '@radix-ui/react-select';
-import { ChevronDownIcon } from '@heroicons/react/24/outline';
+import { ChevronDown } from 'lucide-react';
 import { useId, useMemo } from 'react';
 import classNames from 'classnames';
 import styles from './index.module.css';
@@ -70,7 +70,7 @@ const Select: FC<SelectProps> = ({
           id={id}
         >
           <Primitive.Value placeholder={placeholder} />
-          <ChevronDownIcon className={styles.icon} />
+          <ChevronDown className={styles.icon} />
         </Primitive.Trigger>
         <Primitive.Portal>
           <Primitive.Content

diff --git a/components/Common/Toast/index.module.css b/components/Common/Toast/index.module.css
@@ -0,0 +1,60 @@
+.root {
+  @apply m-6
+  w-fit
+  max-w-80
+  rounded
+  border
+  border-gray-200
+  px-4
+  py-3
+  shadow-lg
+  dark:border-gray-800;
+
+  .message {
+    @apply inline-flex
+        items-center
+        justify-center
+        gap-2
+        font-medium;
+
+    svg {
+      @apply size-5;
+    }
+  }
+}
+
+.success {
+  @apply border-green-200
+    bg-green-100
+    text-green-800
+    dark:border-green-600
+    dark:bg-green-800
+    dark:text-white;
+}
+
+.error {
+  @apply border-red-200
+    bg-red-100
+    text-red-800
+    dark:border-red-600
+    dark:bg-red-800
+    dark:text-white;
+}
+
+.warning {
+  @apply border-yellow-200
+    bg-yellow-100
+    text-yellow-800
+    dark:border-yellow-600
+    dark:bg-yellow-800
+    dark:text-white;
+}
+
+.info {
+  @apply border-ether-200
+    bg-ether-100
+    text-ether-800
+    dark:border-ether-600
+    dark:bg-ether-800
+    dark:text-white;
+}
diff --git a/components/Common/Toast/index.stories.tsx b/components/Common/Toast/index.stories.tsx
@@ -0,0 +1,59 @@
+import { BellDotIcon } from 'lucide-react';
+import Notification from '.';
+import type { Meta as MetaObj, StoryObj } from '@storybook/react';
+
+type Story = StoryObj<typeof Notification>;
+type Meta = MetaObj<typeof Notification>;
+
+export const Default: Story = {
+  args: {
+    open: true,
+    duration: 5000,
+    children: 'OK, everything is fine!',
+  },
+};
+
+export const TimedNotification: Story = {
+  args: {
+    duration: 5000,
+    children: 'OK, everything is fine!',
+  },
+};
+
+export const WithJSX: Story = {
+  args: {
+    open: true,
+    children: (
+      <>
+        <BellDotIcon />
+        OK, everything is fine!
+      </>
+    ),
+  },
+};
+
+export const Success: Story = {
+  args: {
+    open: true,
+    variant: 'success',
+    children: 'OK, everything is fine!',
+  },
+};
+
+export const Error: Story = {
+  args: {
+    open: true,
+    variant: 'error',
+    children: 'Something went wrong!',
+  },
+};
+
+export const Warning: Story = {
+  args: {
+    open: true,
+    variant: 'warning',
+    children: 'Be careful!',
+  },
+};
+
+export default { component: Notification } as Meta;
diff --git a/components/Common/Toast/index.tsx b/components/Common/Toast/index.tsx
@@ -0,0 +1,35 @@
+import * as ToastPrimitive from '@radix-ui/react-toast';
+import classNames from 'classnames';
+import styles from './index.module.css';
+import type { FC, PropsWithChildren } from 'react';
+
+type ToastProps = PropsWithChildren<{
+  variant?: 'success' | 'error' | 'warning' | 'info';
+  open?: boolean;
+  duration?: number;
+  onChange?: (value: boolean) => void;
+  className?: string;
+}>;
+
+const Toast: FC<ToastProps> = ({
+  variant = 'info',
+  open,
+  // 2s duration
+  duration = 2000,
+  onChange,
+  children,
+  className,
+}) => (
+  <ToastPrimitive.Root
+    open={open}
+    duration={duration}
+    onOpenChange={onChange}
+    className={classNames(styles.root, styles[variant], className)}
+  >
+    <ToastPrimitive.Title className={styles.message}>
+      {children}
+    </ToastPrimitive.Title>
+  </ToastPrimitive.Root>
+);
+
+export default Toast;
diff --git a/components/Logo/Platform/Apple.tsx b/components/Logo/Platform/Apple.tsx
@@ -0,0 +1,23 @@
+import type { FC, SVGProps } from 'react';
+
+const Apple: FC<SVGProps<SVGSVGElement>> = props => (
+  <svg
+    width="32"
+    height="32"
+    viewBox="0 0 32 32"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M30 16c0 7.728-6.265 14-14 14S2 23.728 2 16C2 8.265 8.265 2 16 2s14 6.265 14 14Z"
+      fill="#283544"
+    />
+    <path
+      d="M22.562 12.457c-.076.045-1.895.986-1.895 3.07.086 2.38 2.295 3.213 2.333 3.213-.038.045-.334 1.136-1.21 2.28-.694.986-1.466 1.98-2.637 1.98-1.114 0-1.514-.657-2.8-.657-1.381 0-1.772.657-2.829.657-1.171 0-2-1.047-2.733-2.023-.952-1.278-1.761-3.284-1.79-5.21-.02-1.02.19-2.023.724-2.875.752-1.19 2.095-1.997 3.561-2.023 1.124-.036 2.124.719 2.81.719.657 0 1.885-.72 3.275-.72.6.001 2.2.17 3.191 1.59Zm-6.561-1.792c-.2-.932.352-1.864.866-2.458.657-.72 1.695-1.207 2.59-1.207a3.334 3.334 0 0 1-.952 2.511c-.58.72-1.58 1.26-2.504 1.154Z"
+      fill="#fff"
+    />
+  </svg>
+);
+
+export default Apple;
diff --git a/components/Logo/Platform/Generic.tsx b/components/Logo/Platform/Generic.tsx
@@ -0,0 +1,22 @@
+import type { FC, SVGProps } from 'react';
+
+const Generic: FC<SVGProps<SVGSVGElement>> = props => (
+  <svg
+    width="32"
+    height="32"
+    viewBox="0 0 32 32"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M16 29.333c7.364 0 13.333-5.97 13.333-13.333 0-7.364-5.97-13.334-13.333-13.334C8.636 2.666 2.667 8.636 2.667 16S8.637 29.333 16 29.333Z"
+      stroke="#000"
+      strokeWidth="2.667"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+export default Generic;