chore(web): replace default exports with named exports

apps/web/__tests__/ui/newsletter.test.tsx

@@ -1,11 +1,11 @@
 import { MockedProvider } from '@apollo/client/testing';
-import { subscribeNewsletterMutation } from '@sharingan/front';
+import { subscribeNewsletterMutation } from '@sharingan/front/graphql';
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import React from 'react';
 import { act } from 'react-dom/test-utils';
 
-import NewsletterForm from '@/components/home/newsletter/newsletter-form';
+import { NewsletterForm } from '@/components/home/newsletter/newsletter-form';
 
 describe('Newsletter Form', () => {
  beforeEach(() => {
@@ -38,7 +38,7 @@ describe('Newsletter Form', () => {
  ];
 
  render(
- <MockedProvider mocks={mocks} addTypename={false}>
+ <MockedProvider addTypename={false} mocks={mocks}>
  <NewsletterForm />
  </MockedProvider>,
  );
@@ -81,7 +81,7 @@ describe('Newsletter Form', () => {
  ];
 
  render(
- <MockedProvider mocks={mocks} addTypename={false}>
+ <MockedProvider addTypename={false} mocks={mocks}>
  <NewsletterForm />
  </MockedProvider>,
  );

apps/web/src/components/auth/auth-alert.tsx

@@ -32,4 +32,4 @@ const AuthAlert = ({ ctaLabel, descriptionElement, redirectLink, title }: Props)
  );
 };
 
-export default AuthAlert;
+export { AuthAlert };

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

@@ -1,39 +1,46 @@
-import { Icon } from '@sharingan/front';
+import {
+ CollectionIcon,
+ DocumentSearchIcon,
+ EmbedIcon,
+ ExtensionIcon,
+ ImportIcon,
+ ShareIcon,
+} from '@sharingan/front/icons';
 
 const features = [
  {
  description: 'Organize related code snippets into folders the same way you manage your file on the computer.',
- icon: <Icon.Collection />,
+ icon: <CollectionIcon />,
  id: 'organize-snippets',
  title: 'Organize your snippets',
  },
  {
  description: 'Quickly find a code snippet in your whole directory and access it.',
- icon: <Icon.DocumentSearch />,
+ icon: <DocumentSearchIcon />,
  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: <Icon.Import />,
+ icon: <ImportIcon />,
  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: <Icon.Share />,
+ icon: <ShareIcon />,
  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: <Icon.Embed />,
+ icon: <EmbedIcon />,
  id: 'embed-snippets',
  title: 'Embed your snippets',
  },
  {
  description: 'Easily capture and save code snippets while you are browsing on the web.',
- icon: <Icon.Extension />,
+ icon: <ExtensionIcon />,
  id: 'browser-extensions',
  title: 'Browser extensions',
  },
@@ -66,4 +73,4 @@ const FeatureSection = () => {
  );
 };
 
-export default FeatureSection;
+export { FeatureSection };

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

@@ -59,4 +59,4 @@ const HeroSection = () => {
  );
 };
 
-export default HeroSection;
+export { HeroSection };

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

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

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

@@ -1,8 +1,9 @@
-import { Icon, useSubscribeToNewsletter } from '@sharingan/front';
+import { SpinnerIcon } from '@sharingan/front/icons';
+import { useSubscribeToNewsletter } from '@sharingan/front/services';
 import { useState } from 'react';
 
-import NewsletterAlert from '@/components/home/newsletter/newsletter-alert';
-import useBooleanState from '@/hooks/use-boolean-state';
+import { NewsletterAlert } from '@/components/home/newsletter/newsletter-alert';
+import { useBooleanState } from '@/hooks/use-boolean-state';
 import { REGEX_EMAIL } from '@/utils/constants';
 
 const isEmailValid = (email: string) => REGEX_EMAIL.test(email);
@@ -54,12 +55,12 @@ const NewsletterForm = () => {
  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"
  onClick={handleSubscribe}
  >
- {isLoading && <Icon.Spinner />}
+ {isLoading && <SpinnerIcon />}
  Get updates
  </button>
  </div>
  </div>
  );
 };
 
-export default NewsletterForm;
+export { NewsletterForm };

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

@@ -1,4 +1,4 @@
-import NewsletterForm from '@/components/home/newsletter/newsletter-form';
+import { NewsletterForm } from '@/components/home/newsletter/newsletter-form';
 
 const NewsletterSection = () => {
  return (
@@ -32,4 +32,4 @@ const NewsletterSection = () => {
  );
 };
 
-export default NewsletterSection;
+export { NewsletterSection };

apps/web/src/components/layout/main.tsx

@@ -19,4 +19,4 @@ const MainLayout = ({ children }: Props) => {
  );
 };
 
-export default MainLayout;
+export { MainLayout };

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

@@ -1,4 +1,9 @@
-import { Disclosure, Icon, Link, Menu, Transition, UserAvatar, classNames, useLogoutUser } from '@sharingan/front';
+import { Disclosure, Menu, Transition } from '@sharingan/front';
+import { Link } from '@sharingan/front/components/link';
+import { UserAvatar } from '@sharingan/front/components/user-avatar';
+import { LogoIcon, LogoLightIcon, MenuIcon, XIcon } from '@sharingan/front/icons';
+import { useLogoutUser } from '@sharingan/front/services';
+import { classNames } from '@sharingan/front/utils/classnames';
 import { useRouter } from 'next/router';
 import { Fragment } from 'react';
 
@@ -37,8 +42,8 @@ const Header = () => {
  <div className="flex justify-between h-16">
  <div className="flex">
  <div className="flex-shrink-0 flex items-center">
- <Icon.LogoLight className="block lg:hidden h-8 w-auto" />
- <Icon.Logo className="hidden lg:block h-8 w-auto" />
+ <LogoLightIcon className="block lg:hidden h-8 w-auto" />
+ <LogoIcon className="hidden lg:block h-8 w-auto" />
  </div>
  <div className="hidden sm:-my-px sm:ml-6 sm:flex sm:space-x-8">
  {navigation.map((item) => (
@@ -98,9 +103,9 @@ const Header = () => {
  <Disclosure.Button className="bg-white inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
  <span className="sr-only">Open main menu</span>
  {open ? (
- <Icon.X aria-hidden="true" className="block h-6 w-6" />
+ <XIcon aria-hidden="true" className="block h-6 w-6" />
  ) : (
- <Icon.Menu aria-hidden="true" className="block h-6 w-6" />
+ <MenuIcon aria-hidden="true" className="block h-6 w-6" />
  )}
  </Disclosure.Button>
  </div>
@@ -157,4 +162,4 @@ const Header = () => {
  );
 };
 
-export default Header;
+export { Header };

apps/web/src/components/layout/private/layout.tsx

@@ -1,10 +1,10 @@
-import { useAuthenticatedUser } from '@sharingan/front';
-import { ToastProvider } from '@sharingan/front';
+import { ToastProvider } from '@sharingan/front/components/toast/provider';
+import { useAuthenticatedUser } from '@sharingan/front/services';
 import { ReactNode } from 'react';
 
 import { Loader } from '@/components/common/loader';
 import { Redirect } from '@/components/common/redirect';
-import Header from '@/components/layout/private/header';
+import { Header } from '@/components/layout/private/header';
 
 type Props = {
  children?: ReactNode;
@@ -35,4 +35,4 @@ const Layout = ({ children }: Props) => {
  );
 };
 
-export default Layout;
+export { Layout };

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

@@ -1,20 +1,20 @@
-import { Icon } from '@sharingan/front';
+import { GithubIcon, LogoIcon, ProductHuntIcon, TwitterIcon } from '@sharingan/front/icons';
 
 const socialIcons = [
  {
- icon: <Icon.Github />,
+ icon: <GithubIcon />,
  link: 'https://github.com/tericcabrel/sharingan',
  name: 'GitHub',
  target: '_blank',
  },
  {
- icon: <Icon.Twitter />,
+ icon: <TwitterIcon />,
  link: 'https://twitter.com/sharingan_dev',
  name: 'Twitter',
  target: '_blank',
  },
  {
- icon: <Icon.ProductHunt />,
+ icon: <ProductHuntIcon />,
  link: '#',
  name: 'Product Hunt',
  target: '_self',
@@ -42,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">
- <Icon.Logo />
+ <LogoIcon />
  </div>
 
  <ul className="flex items-center justify-center mt-8 space-x-5 sm:mt-12 lg:justify-end lg:mt-0">
@@ -87,4 +87,4 @@ const PublicFooter = () => {
  );
 };
 
-export default PublicFooter;
+export { PublicFooter };

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

@@ -1,4 +1,4 @@
-import { Icon } from '@sharingan/front';
+import { LogoIcon } from '@sharingan/front/icons';
 import Link from 'next/link';
 import { MouseEvent, useState } from 'react';
 
@@ -38,7 +38,7 @@ const PublicHeader = () => {
  <div className="flex items-center justify-between">
  <div className="flex-shrink-0">
  <a className="flex rounded outline-none focus:ring-1 focus:ring-gray-900 focus:ring-offset-2" href="/">
- <Icon.Logo />
+ <LogoIcon />
  </a>
  </div>
 
@@ -186,4 +186,4 @@ const PublicHeader = () => {
  );
 };
 
-export default PublicHeader;
+export { PublicHeader };

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

@@ -1,7 +1,7 @@
 import { ReactNode } from 'react';
 
-import PublicFooter from '@/components/layout/public/footer';
-import PublicHeader from '@/components/layout/public/header';
+import { PublicFooter } from '@/components/layout/public/footer';
+import { PublicHeader } from '@/components/layout/public/header';
 
 type Props = {
  children: ReactNode;
@@ -17,4 +17,4 @@ const PublicLayout = ({ children }: Props) => {
  );
 };
 
-export default PublicLayout;
+export { PublicLayout };

apps/web/src/components/seo/seo.tsx

@@ -45,4 +45,4 @@ const GlobalSeo = () => {
  );
 };
 
-export default GlobalSeo;
+export { GlobalSeo };

apps/web/src/components/snippets/public-snippet.tsx

@@ -1,10 +1,12 @@
-import { Link, PublicSnippetResult, UserAvatar } from '@sharingan/front';
+import { Link } from '@sharingan/front/components/link';
+import { UserAvatar } from '@sharingan/front/components/user-avatar';
+import { PublicSnippetResult } from '@sharingan/front/typings/queries';
 
 type Props = {
  snippet: PublicSnippetResult['items'][number];
 };
 
-export const PublicSnippet = ({ snippet }: Props) => {
+const PublicSnippet = ({ snippet }: Props) => {
  const { user } = snippet;
 
  const htmlCode = snippet.content;
@@ -44,3 +46,5 @@ export const PublicSnippet = ({ snippet }: Props) => {
  </div>
  );
 };
+
+export { PublicSnippet };