chore(ui): create the package for the ui

apps/web/next.config.js

@@ -1,9 +1,10 @@
 const { withSentryConfig } = require('@sentry/nextjs');
+const withTM = require('next-transpile-modules')(['@sharingan/ui'])
 
 /** @type {import('next').NextConfig} */
-const nextConfigOptions = {
+const nextConfigOptions = withTM({
  reactStrictMode: true
-}
+});
 
 const sentryWebpackPluginOptions = {
  dryRun: true,

apps/web/package.json

@@ -17,6 +17,7 @@
  "@headlessui/react": "^1.6.4",
  "@hookform/resolvers": "^2.9.3",
  "@sentry/nextjs": "^7.1.1",
+ "@sharingan/ui": "*",
  "classnames": "^2.3.1",
  "graphql": "^16.3.0",
  "next": "12.1.6",
@@ -51,6 +52,7 @@
  "eslint-plugin-testing-library": "5.1.0",
  "jest": "^27.5.1",
  "next-sitemap": "^3.0.5",
+ "next-transpile-modules": "^9.0.0",
  "postcss": "^8.4.12",
  "tailwindcss": "^3.0.24",
  "typescript": "4.6.2"

apps/web/src/components/home/feature-section.tsx

@@ -1,44 +1,39 @@
-import CollectionIcon from '@/components/icons/collection';
-import DocumentSearchIcon from '@/components/icons/document-search';
-import EmbedIcon from '@/components/icons/embed';
-import ExtensionIcon from '@/components/icons/extension';
-import ImportIcon from '@/components/icons/import';
-import ShareIcon from '@/components/icons/share';
+import { Icon } from '@sharingan/ui';
 
 const features = [
  {
  description: 'Organize related code snippets into folders the same way you manage your file on the computer.',
- icon: <CollectionIcon />,
+ icon: <Icon.Collection />,
  id: 'organize-snippets',
  title: 'Organize your snippets',
  },
  {
  description: 'Quickly find a code snippet in your whole directory and access it.',
- icon: <DocumentSearchIcon />,
+ icon: <Icon.DocumentSearch />,
  id: 'find-snippets',
  title: 'Find your snippets',
  },
  {
  description: 'You can easily import all your code snippets from GitHub Gist to keep them all in one place.',
- icon: <ImportIcon />,
+ icon: <Icon.Import />,
  id: 'import-snippets',
  title: 'Import from GitHub Gist',
  },
  {
  description: 'Share your code snippets with other developers. Give them the ability to interact and improve.',
- icon: <ShareIcon />,
+ icon: <Icon.Share />,
  id: 'share-snippets',
  title: 'Share your snippets',
  },
  {
  description: 'For content creators, you can embed your snippet on a blog post or a post on social networks.',
- icon: <EmbedIcon />,
+ icon: <Icon.Embed />,
  id: 'embed-snippets',
  title: 'Embed your snippets',
  },
  {
  description: 'Easily capture and save code snippets while you are browsing on the web.',
- icon: <ExtensionIcon />,
+ icon: <Icon.Extension />,
  id: 'browser-extensions',
  title: 'Browser extensions',
  },

apps/web/src/components/home/newsletter/newsletter-alert.tsx

@@ -1,10 +1,8 @@
 import { Dialog, Transition } from '@headlessui/react';
+import { Icon } from '@sharingan/ui';
 import classNames from 'classnames';
 import React, { Fragment, useState } from 'react';
 
-import CheckIcon from '@/components/icons/check';
-import CrossIcon from '@/components/icons/cross';
-
 type Props = {
  handleClose: () => void;
  state: 'success' | 'failure';
@@ -19,7 +17,7 @@ type Content = {
 const alertContentMap: Record<Props['state'], Content> = {
  failure: {
  description: <span>An error occurred while performing the subscription</span>,
- icon: <CrossIcon />,
+ icon: <Icon.Cross />,
  title: 'Subscription failure',
  },
  success: {
@@ -30,7 +28,7 @@ const alertContentMap: Record<Props['state'], Content> = {
  You will receive updates on the application progress.
  </span>
  ),
- icon: <CheckIcon />,
+ icon: <Icon.Check />,
  title: 'Subscription successful',
  },
 };

apps/web/src/components/home/newsletter/newsletter-form.tsx

@@ -1,7 +1,7 @@
+import { Icon } from '@sharingan/ui';
 import { useState } from 'react';
 
 import NewsletterAlert from '@/components/home/newsletter/newsletter-alert';
-import SpinnerIcon from '@/components/icons/spinner';
 import useSubscribeToNewsletter from '@/graphql/newsletters/mutations/subscribe-newsletter';
 import useBooleanState from '@/hooks/use-boolean-state';
 import { REGEX_EMAIL } from '@/utils/constants';
@@ -55,7 +55,7 @@ const NewsletterForm = () => {
  onClick={handleSubscribe}
  className="inline-flex items-center justify-center w-full px-8 py-4 text-base font-bold text-white transition-all duration-200 bg-gray-900 border border-transparent sm:w-auto sm:py-3 hover:bg-opacity-90 rounded-xl"
  >
- {loading && <SpinnerIcon />}
+ {loading && <Icon.Spinner />}
  Get updates
  </button>
  </div>

apps/web/src/components/layout/public/footer.tsx

@@ -1,23 +1,20 @@
-import GithubIcon from '@/components/icons/github';
-import LogoIcon from '@/components/icons/logo';
-import ProductHuntIcon from '@/components/icons/product-hunt';
-import TwitterIcon from '@/components/icons/twitter';
+import { Icon } from '@sharingan/ui';
 
 const socialIcons = [
  {
- icon: <GithubIcon />,
+ icon: <Icon.Github />,
  link: 'https://github.com/tericcabrel/sharingan',
  name: 'GitHub',
  target: '_blank',
  },
  {
- icon: <TwitterIcon />,
+ icon: <Icon.Twitter />,
  link: 'https://twitter.com/sharinganapp',
  name: 'Twitter',
  target: '_blank',
  },
  {
- icon: <ProductHuntIcon />,
+ icon: <Icon.ProductHunt />,
  link: '#',
  name: 'Product Hunt',
  target: '_self',
@@ -45,7 +42,7 @@ const PublicFooter = () => {
  <div className="px-4 mx-auto max-w-7xl sm:px-6 lg:px-8">
  <div className="lg:flex lg:items-center lg:justify-between mt-14 lg:mt-24">
  <div className="xs:flex xs:justify-center">
- <LogoIcon />
+ <Icon.Logo />
  </div>
 
  <ul className="flex items-center justify-center mt-8 space-x-3 sm:mt-12 lg:justify-end lg:mt-0">
@@ -55,7 +52,7 @@ const PublicFooter = () => {
  href={socialIcon.link}
  target={socialIcon.target}
  title={socialIcon.name}
- className="inline-flex items-center justify-center w-10 h-10 text-gray-900 transition-all duration-200 rounded-full hover:bg-gray-100 focus:outline-none focus:bg-gray-200 focus:ring-2 focus:ring-offset-2 focus:ring-gray-200"
+ className="inline-flex items-center justify-center w-6 h-6 text-gray-900 transition-all duration-200 rounded-full hover:bg-gray-100 focus:outline-none focus:bg-gray-200 focus:ring-2 focus:ring-offset-2 focus:ring-gray-200"
  rel="noopener noreferrer"
  >
  {socialIcon.icon}

apps/web/src/components/layout/public/header.tsx

@@ -1,8 +1,7 @@
+import { Icon } from '@sharingan/ui';
 import Link from 'next/link';
 import { useState } from 'react';
 
-import LogoIcon from '@/components/icons/logo';
-
 const PublicHeader = () => {
  const [isExpanded, setIsExpanded] = useState(false);
 
@@ -12,7 +11,7 @@ const PublicHeader = () => {
  <div className="flex items-center justify-between">
  <div className="flex-shrink-0">
  <a href="/" className="flex rounded outline-none focus:ring-1 focus:ring-gray-900 focus:ring-offset-2">
- <LogoIcon />
+ <Icon.Logo />
  </a>
  </div>
 

apps/web/src/containers/auth/login.tsx

@@ -1,15 +1,11 @@
 import { yupResolver } from '@hookform/resolvers/yup';
+import { Alert, Button, Icon, TextInput } from '@sharingan/ui';
 import { NextSeo } from 'next-seo';
 import Link from 'next/link';
 import { useState } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
 import * as yup from 'yup';
 
-import Alert from '@/components/common/alert';
-import Button from '@/components/common/form/button';
-import TextInput from '@/components/common/form/text-input';
-import GithubIcon from '@/components/icons/github';
-import GoogleIcon from '@/components/icons/google';
 import PublicLayout from '@/components/layout/public/public-layout';
 import { useAuth } from '@/hooks/authentication/use-auth';
 import useLoginUser from '@/services/users/login-user';
@@ -72,12 +68,12 @@ const Login = () => {
 
  <div className="flex justify-between">
  <Button color="white-gray" className="w-[45%]">
- <GithubIcon />
+ <Icon.Github />
  <span className="ml-4">GitHub</span>
  </Button>
 
  <Button color="white-gray" className="w-[45%]">
- <GoogleIcon />
+ <Icon.Google />
  <span className="ml-4">Google</span>
  </Button>
  </div>

apps/web/src/containers/auth/signup.tsx

@@ -1,16 +1,12 @@
 import { yupResolver } from '@hookform/resolvers/yup';
+import { Alert, Button, Icon, TextInput } from '@sharingan/ui';
 import { NextSeo } from 'next-seo';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
 import { useState } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
 import * as yup from 'yup';
 
-import Alert from '@/components/common/alert';
-import Button from '@/components/common/form/button';
-import TextInput from '@/components/common/form/text-input';
-import GithubIcon from '@/components/icons/github';
-import GoogleIcon from '@/components/icons/google';
 import PublicLayout from '@/components/layout/public/public-layout';
 import useSignupUser from '@/services/users/signup-user';
 import { FORM_ERRORS } from '@/utils/constants';
@@ -85,12 +81,12 @@ const Signup = () => {
 
  <div className="flex justify-between">
  <Button color="white-gray" className="w-[47%]">
- <GithubIcon />
+ <Icon.Github />
  <span className="ml-4">GitHub</span>
  </Button>
 
  <Button color="white-gray" className="w-[47%]">
- <GoogleIcon />
+ <Icon.Google />
  <span className="ml-4">Google</span>
  </Button>
  </div>

apps/web/src/containers/page-not-found.tsx

@@ -1,14 +1,13 @@
+import { Icon } from '@sharingan/ui';
 import Link from 'next/link';
 
-import Logo from '@/components/icons/logo';
-
 const PageNotFound = () => {
  return (
  <div className="h-screen pt-16 pb-12 flex flex-col">
  <main className="flex-grow flex flex-col justify-center max-w-7xl w-full mx-auto px-4 sm:px-6 lg:px-8">
  <div className="flex-shrink-0 flex justify-center">
  <a href="/" className="inline-flex">
- <Logo />
+ <Icon.Logo />
  </a>
  </div>
  <div className="py-16">

conventionalCommit.json

@@ -50,6 +50,7 @@
  "settings": {},
  "snippet": {},
  "turbo": {},
+ "ui": {},
  "utils": {},
  "web": {}
  }

package.json

@@ -19,6 +19,7 @@
  "packages/database",
  "packages/domain",
  "packages/logger",
+ "packages/ui",
  "packages/utils",
  "apps/core",
  "apps/web",
@@ -28,6 +29,10 @@
  "apps/**/*.{ts,tsx}": [
  "prettier --write",
  "eslint --fix --cache --debug"
+ ],
+ "packages/**/*.{ts,tsx}": [
+ "prettier --write",
+ "eslint --fix"
  ]
  },
  "husky": {

packages/ui/.eslintignore

@@ -0,0 +1,2 @@
+postcss.config.js
+tailwind.config.js

packages/ui/.gitignore

@@ -0,0 +1,3 @@
+node_modules
+dist
+build

packages/ui/index.tsx

@@ -0,0 +1,6 @@
+import Alert from './src/common/alert';
+import Button from './src/forms/button';
+import TextInput from './src/forms/text-input';
+import Icon from './src/icons';
+
+export { Alert, Button, Icon, TextInput };

packages/ui/package.json

@@ -0,0 +1,17 @@
+{
+ "name": "@sharingan/ui",
+ "version": "1.0.0",
+ "main": "./index.tsx",
+ "types": "./index.tsx",
+ "license": "MIT",
+ "devDependencies": {
+ "@tailwindcss/forms": "^0.5.2",
+ "@types/react": "18.0.14",
+ "autoprefixer": "^10.4.7",
+ "postcss": "^8.4.14",
+ "tailwindcss": "^3.1.4"
+ },
+ "dependencies": {
+ "classnames": "^2.3.1"
+ }
+}

packages/ui/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+ plugins: {
+ tailwindcss: {},
+ autoprefixer: {},
+ },
+}

apps/web/src/components/common/form/button.tsx → packages/ui/src/forms/button.tsx

@@ -1,8 +1,8 @@
 import classNames from 'classnames';
 import { ButtonHTMLAttributes, DetailedHTMLProps, PropsWithChildren, forwardRef } from 'react';
 
-import SpinnerIcon from '@/components/icons/spinner';
-import { ColorVariants } from '@/typings/common';
+import SpinnerIcon from '../icons/spinner';
+import { ColorVariants } from '../typings/components';
 
 const colors: Record<ColorVariants, string> = {
  primary: 'text-white bg-gray-900 hover:bg-gray-600',

apps/web/src/components/common/form/text-input.tsx → packages/ui/src/forms/text-input.tsx

@@ -2,7 +2,7 @@ import classNames from 'classnames';
 import { DetailedHTMLProps, InputHTMLAttributes } from 'react';
 import { useFormContext } from 'react-hook-form';
 
-import { getInputErrorMessage } from '@/utils/forms';
+import { getInputErrorMessage } from '../utils/forms';
 
 type TextInputProps = {
  isRequired?: boolean;

packages/ui/src/icons/index.tsx

@@ -0,0 +1,31 @@
+import CheckIcon from './check';
+import CollectionIcon from './collection';
+import CrossIcon from './cross';
+import DocumentSearchIcon from './document-search';
+import EmbedIcon from './embed';
+import ExtensionIcon from './extension';
+import GithubIcon from './github';
+import GoogleIcon from './google';
+import ImportIcon from './import';
+import LogoIcon from './logo';
+import ProductHuntIcon from './product-hunt';
+import ShareIcon from './share';
+import SpinnerIcon from './spinner';
+import TwitterIcon from './twitter';
+
+export default {
+ Check: CheckIcon,
+ Collection: CollectionIcon,
+ Cross: CrossIcon,
+ DocumentSearch: DocumentSearchIcon,
+ Embed: EmbedIcon,
+ Extension: ExtensionIcon,
+ Github: GithubIcon,
+ Google: GoogleIcon,
+ Import: ImportIcon,
+ Logo: LogoIcon,
+ ProductHunt: ProductHuntIcon,
+ Share: ShareIcon,
+ Spinner: SpinnerIcon,
+ Twitter: TwitterIcon,
+};