chore: change import alias (#391)

* chore: change import alias

* style: fix linting issues

* chore: apply prettier

* style: kebabe case file convention

* chore: mify case ignorance

* chore: fix import

.eslintrc.yml

@@ -19,14 +19,21 @@ parserOptions:
 plugins:
   - '@typescript-eslint'
   - react
+  - unicorn
 rules:
   import/prefer-default-export: 'off'
   react/jsx-filename-extension: [2, { 'extensions': ['.jsx', '.tsx'] }]
   react/require-default-props: 'off'
   '@typescript-eslint/explicit-function-return-type': 'off'
   '@typescript-eslint/no-floating-promises': 'off'
+  unicorn/filename-case: ['error', { 'case': 'kebabCase' }]
 settings:
   'import/resolver':
     alias:
-      map: [['@components', './src/components']]
+      map:
+        [
+          ['~/components', './src/components'],
+          ['~/pages', './src/pages'],
+          ['~/services', './src/services'],
+        ]
       extensions: ['.ts', '.js', '.jsx', '.ts', '.tsx', '.json']

README.md

@@ -7,7 +7,7 @@ CRUD implemenation with React;
 
 - React
 - TypeScript
-- TailwindCSS
+- daisyUI & TailwindCSS
 - Storybook
 
 ## Contribution

package.json

@@ -51,7 +51,7 @@
     "browserslist": "~4.22.1",
     "chromatic": "~9.0.0",
     "cssnano": "^6.0.1",
-    "eslint": "^8.56.0",
+    "eslint": "^8.57.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-airbnb-typescript": "^17.1.0",
     "eslint-config-love": "~43.1.0",
@@ -62,6 +62,7 @@
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-storybook": "^0.6.15",
+    "eslint-plugin-unicorn": "^55.0.0",
     "lightningcss": "^1.22.0",
     "msw": "^1.3.3",
     "postcss": "^8.4.31",
@@ -78,7 +79,7 @@
   },
   "dependencies": {
     "@growthbook/growthbook-react": "^0.20.0",
-    "daisyui": "^2.50.0",
+    "daisyui": "^3.9.4",
     "dexie": "^3.2.4",
     "dexie-react-hooks": "^1.1.6",
     "react": "^18.2.0",

src/components/App.tsx

@@ -2,9 +2,9 @@ import { useEffect } from 'react';
 import { Outlet, useLocation } from 'react-router-dom';
 import { GrowthBook, GrowthBookProvider } from '@growthbook/growthbook-react';
 
-import Header from '@components/Header';
-import Alert from '@components/Alert';
-import Breadcrumbs from '@components/Breadcrumbs';
+import Header from '~/components/header';
+import Alert from '~/components/alert';
+import Breadcrumbs from '~/components/breadcrumbs';
 
 // Create a GrowthBook instance
 const growthbook = new GrowthBook({

src/components/Input.stories.ts

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 
-import { Input } from './Input';
+import { Input } from './input';
 
 // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
 const meta = {

src/components/alert.tsx

@@ -0,0 +1,10 @@
+interface IAlertProps {
+  message: string;
+  // type: string;
+}
+
+function Alert({ message }: IAlertProps) {
+  return <section className="bg-green-200">{message}</section>;
+}
+
+export default Alert;

src/components/app.tsx

@@ -0,0 +1,61 @@
+import { useEffect } from 'react';
+import { Outlet, useLocation } from 'react-router-dom';
+import { GrowthBook, GrowthBookProvider } from '@growthbook/growthbook-react';
+
+import Header from '~/components/header';
+import Alert from '~/components/alert';
+import Breadcrumbs from '~/components/breadcrumbs';
+
+// Create a GrowthBook instance
+const growthbook = new GrowthBook({
+  trackingCallback: (experiment, result) => {
+    // eslint-disable-next-line no-console
+    console.log({
+      experimentId: experiment.key,
+      variationId: result.variationId,
+    });
+  },
+});
+
+function App() {
+  const location = useLocation();
+
+  useEffect(() => {
+    // eslint-disable-next-line no-console
+    console.log(`App version: ${APP_VERSION}`);
+
+    // Load feature definitions from API
+    fetch(
+      `https://cdn.growthbook.io/api/features/${
+        import.meta.env.VITE_GROWTH_BOOK_KEY
+      }`,
+    )
+      .then(async (res) => res.json())
+      .then((json) => {
+        growthbook.setFeatures(json.features);
+      });
+
+    // TODO: replace with real targeting attributes
+    growthbook.setAttributes({
+      id: 'foo',
+      deviceId: 'foo',
+      company: 'foo',
+      loggedIn: true,
+      employee: true,
+      country: 'foo',
+      browser: 'foo',
+      url: 'foo',
+    });
+  }, [location]);
+
+  return (
+    <GrowthBookProvider growthbook={growthbook}>
+      <Header />
+      {location.pathname !== '/' && <Breadcrumbs />}
+      <Alert message="" />
+      <Outlet />
+    </GrowthBookProvider>
+  );
+}
+
+export default App;

src/components/breadcrumbs.tsx

@@ -0,0 +1,28 @@
+import { useMatches } from 'react-router-dom';
+
+import classes from './breadcrumbs.module.css';
+
+function Breadcrumbs() {
+  const matches = useMatches();
+  const crumbs = matches
+    // first get rid of any matches that don't have handle and crumb
+    .filter((match) => Boolean(match.handle?.crumb))
+    // now map them into an array of elements, passing the loader
+    // data to each one
+    .map((match) => match.handle.crumb(match.data));
+
+  return (
+    <div className="container mx-auto px-4">
+      <ol className={classes.breadcrumbs}>
+        {crumbs.map((crumb, index) => (
+          // eslint-disable-next-line react/no-array-index-key
+          <li className={classes.crumb} key={index}>
+            {crumb}
+          </li>
+        ))}
+      </ol>
+    </div>
+  );
+}
+
+export default Breadcrumbs;

src/components/header.tsx

@@ -0,0 +1,51 @@
+import { useEffect } from 'react';
+import { Link } from 'react-router-dom';
+import { themeChange } from 'theme-change';
+
+function Header() {
+  useEffect(() => {
+    themeChange(false);
+    // 👆 false parameter is required for react project
+  }, []);
+
+  return (
+    <nav className="navbar bg-neutral text-neutral-content mb-3">
+      <div className="flex-1">
+        <Link to="/" className="btn btn-ghost normal-case text-xl">
+          Microblogging
+        </Link>
+      </div>
+      <div className="flex-none justify-between">
+        <button
+          type="button"
+          className="btn btn-circle mr-6"
+          data-toggle-theme="forest,winter"
+          data-act-class="ACTIVECLASS"
+          aria-label="Dark Theme"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+            strokeWidth={1.5}
+            stroke="currentColor"
+            className="w-6 h-6"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              d="M21.752 15.002A9.718 9.718 0 0118 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 003 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 009.002-5.998z"
+            />
+          </svg>
+        </button>
+        <form className="form-inline navbar-end">
+          <Link to="/posts/new" className="btn btn-outline btn-primary">
+            New Post
+          </Link>
+        </form>
+      </div>
+    </nav>
+  );
+}
+
+export default Header;

src/components/input.stories.ts

@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Input } from './input';
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
+const meta = {
+  title: 'Components/Input',
+  component: Input,
+  tags: ['autodocs'],
+  argTypes: {},
+} satisfies Meta<typeof Input>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
+export const Default: Story = {
+  args: {
+    size: 'large',
+  },
+};
+
+export const Medium: Story = {
+  args: {
+    size: 'medium',
+  },
+};

src/components/input.tsx

@@ -0,0 +1,47 @@
+interface InputProps {
+  /**
+   * How large should the button be?
+   */
+  size?: 'medium' | 'large';
+  /**
+   * What placeholder color to use
+   */
+  placeholder?: string;
+  /**
+   * Button contents
+   */
+  label?: string;
+  /**
+   * Input value
+   */
+  value?: string;
+  /**
+   * Optional change handler
+   */
+  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+}
+
+/**
+ * Primary UI component for user interaction
+ */
+export function Input({
+  size = 'large',
+  placeholder,
+  value,
+  onChange,
+  label,
+  ...props
+}: InputProps) {
+  const sizeAdjusted = size === 'large' ? '3xl' : 'xl';
+  return (
+    <input
+      type="text"
+      placeholder={placeholder}
+      value={value}
+      onChange={onChange}
+      className={['input', 'w-full', `text-${sizeAdjusted}`].join(' ')}
+      // eslint-disable-next-line react/jsx-props-no-spreading
+      {...props}
+    />
+  );
+}

src/components/PostForm.stories.ts → src/components/post-form.stories.ts

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { PostForm } from './PostForm';
+import { PostForm } from './post-form';
 
 const meta = {
   title: 'Components/PostForm',

src/components/PostPreview.stories.ts → src/components/post-preview.stories.ts

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import PostPreview from './PostPreview';
+import PostPreview from './post-preview';
 
 const meta = {
   title: 'Components/PostPreview',

src/components/PostPreview.tsx → src/components/post-preview.tsx

@@ -2,7 +2,7 @@
 import { useState, useEffect } from 'react';
 import { Link } from 'react-router-dom';
 
-import { db } from '@services/db';
+import { db } from '~/services/db';
 
 interface IAuthor {
   userId: string;

src/components/search.tsx

@@ -0,0 +1,20 @@
+function Search() {
+  return (
+    <div className="col-span-12 w-full pb-6">
+      <input
+        disabled
+        type="search"
+        className="disabled:bg-gray-100 rounded-l border border-blue-700 py-1 px-5"
+      />
+      <button
+        disabled
+        type="button"
+        className=" text-white fill rounded-r border bg-blue-700 border-blue-700 px-5 py-1"
+      >
+        Search
+      </button>
+    </div>
+  );
+}
+
+export default Search;

src/index.tsx

@@ -4,16 +4,16 @@ import { createBrowserRouter, RouterProvider, Link } from 'react-router-dom';
 
 import './index.css';
 
-const App = lazy(async () => import('@components/App'));
-const Home = lazy(async () => import('@pages/index'));
-const NoMatch = lazy(async () => import('@pages/[all]'));
+const App = lazy(async () => import('~/components/app'));
+const Home = lazy(async () => import('~/pages/index'));
+const NoMatch = lazy(async () => import('~/pages/[all]'));
 
-const NewPost = lazy(async () => import('@pages/posts/new'));
-const BlogPost = lazy(async () => import('@pages/posts/[postId]'));
-const EditPost = lazy(async () => import('@pages/posts/[postId]/edit'));
-const UserInfo = lazy(async () => import('@pages/users/[userName]'));
+const NewPost = lazy(async () => import('~/pages/posts/new'));
+const BlogPost = lazy(async () => import('~/pages/posts/[postId]'));
+const EditPost = lazy(async () => import('~/pages/posts/[postId]/edit'));
+const UserInfo = lazy(async () => import('~/pages/users/[user-name]'));
 
-const root = createRoot(document.getElementById('app'));
+const root = createRoot(document.getElementById('app')!);
 
 const router = createBrowserRouter(
   [

src/pages/index.tsx

@@ -2,12 +2,12 @@ import { Fragment } from 'react';
 import { useLiveQuery } from 'dexie-react-hooks';
 import { useFeature } from '@growthbook/growthbook-react';
 
-import { db } from '@services/db';
-import PostPreview from '@components/PostPreview';
-import Search from '@components/Search';
+import Search from '~/components/search';
 
-import type { IBlogPost } from '@components/PostPreview';
-import { timestampToLocaleString } from '@services/timestampToLocaleString';
+import { db } from '~/services/db';
+import { timestampToLocaleString } from '~/services/timestamp-to-locale-string';
+import type { IBlogPost } from '~/components/post-preview';
+import PostPreview from '~/components/post-preview';
 
 function handleDeleteStory(id: string) {
   db.posts.delete(id);