Merge pull request #123 from deriv-com/shayan/feq-1615/improve-project-folder-structure

chore: revise project folder structure

Author: shayan-deriv

.storybook/main.ts

@@ -2,7 +2,7 @@ import type { StorybookConfig } from "@storybook/react-vite";
 import { withoutVitePlugins } from "@storybook/builder-vite";
 
 const config: StorybookConfig = {
-    stories: ["../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+    stories: ["../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
     addons: [
         "@storybook/addon-links",
         "@storybook/addon-essentials",

lib/components/ActionScreen/ActionScreen.scss src/components/ActionScreen/ActionScreen.scss

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
-import { Button } from '../';
+import { Button } from '..';
 
 describe('Button component', () => {
   it('renders without crashing', () => {

lib/components/ActionScreen/__test__/ActionScreen.spec.tsx src/components/ActionScreen/__test__/ActionScreen.spec.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import { Checkbox } from '../';
+import { Checkbox } from '..';
 import userEvent from '@testing-library/user-event';
 
 describe('Checkbox', () => {

lib/components/ActionScreen/index.tsx src/components/ActionScreen/index.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
-import { ActionScreen } from "../../lib/components/ActionScreen";
-import { Button } from "../../lib/main";
+import { ActionScreen } from "../src/components/ActionScreen";
+import { Button } from "../src/main";
 
 const meta = {
     title: "Components/ActionScreen",

lib/components/Button/Button.scss src/components/Button/Button.scss

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import { Button } from "../../lib/components/Button";
+import { Button } from "../src/components/Button";
 
 const meta = {
     title: "Components/Button",

lib/components/Button/__test__/Button.spec.tsx src/components/Button/__test__/Button.spec.tsx

@@ -1,5 +1,5 @@
 import { StoryObj, Meta } from "@storybook/react";
-import { Checkbox } from "../../lib/main";
+import { Checkbox } from "../src/main";
 import { useEffect, useState } from "react";
 
 const meta = {

lib/components/Button/index.tsx src/components/Button/index.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
 
-import { Divider } from "../../lib/components/Divider";
+import { Divider } from "../src/components/Divider";
 
 const meta: Meta<typeof Divider> = {
     title: "Components/Divider",

lib/components/Checkbox/Checkbox.scss src/components/Checkbox/Checkbox.scss

@@ -1,5 +1,5 @@
 import { Meta, StoryObj } from "@storybook/react";
-import { Dropdown } from "../../lib/components/Dropdown";
+import { Dropdown } from "../src/components/Dropdown";
 
 const meta = {
     title: "Components/Dropdown",

lib/components/Checkbox/__test__/Checkbox.spec.tsx src/components/Checkbox/__test__/Checkbox.spec.tsx

@@ -1,5 +1,5 @@
 import { StoryObj, Meta } from "@storybook/react";
-import { InlineMessage } from "../../lib/main";
+import { InlineMessage } from "../src/main";
 
 const meta = {
     title: "Components/InlineMessage",

lib/components/Checkbox/checkbox-icon.svg src/components/Checkbox/checkbox-icon.svg

@@ -1,5 +1,5 @@
 import { StoryObj, Meta } from "@storybook/react";
-import { Input } from "../../lib/main";
+import { Input } from "../src/main";
 import { useState } from "react";
 
 const meta = {

lib/components/Checkbox/index.tsx src/components/Checkbox/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Meta,StoryObj } from '@storybook/react';
-import { LinearProgressBar } from '../../lib/components/LinearProgressBar';
+import { LinearProgressBar } from '../src/components/LinearProgressBar';
 
 const meta={
     title: 'Components/LinearProgressBar',

lib/components/Divider/__test__/Divider.spec.tsx src/components/Divider/__test__/Divider.spec.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
 
-import { Loader } from "../../lib/components/Loader";
+import { Loader } from "../src/components/Loader";
 
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
 const meta = {

lib/components/Divider/index.tsx src/components/Divider/index.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react";
 
-import { Modal } from "../../lib/main";
-import { Button } from "../../lib/components/Button";
+import { Modal } from "../src/main";
+import { Button } from "../src/components/Button";
 import { useEffect, useState } from "react";
 
 

lib/components/Dropdown/Dropdown.scss src/components/Dropdown/Dropdown.scss

@@ -1,7 +1,7 @@
 import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
 
-import { PageLayout } from "../../lib/components/PageLayout";
+import { PageLayout } from "../src/components/PageLayout";
 
 const Pane: React.FC<React.PropsWithChildren<{ name: string }>> = ({
     children,

lib/components/Dropdown/index.tsx src/components/Dropdown/index.tsx

@@ -1,5 +1,5 @@
 import { StoryObj, Meta } from "@storybook/react";
-import { PasswordInput } from "../../lib/main";
+import { PasswordInput } from "../src/main";
 import { useState } from "react";
 
 const meta = {

lib/components/InlineMessage/InlineMessage.scss src/components/InlineMessage/InlineMessage.scss

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import { SideNote } from "../../lib/main";
+import { SideNote } from "../src/main";
 
 const meta = {
     title: "Components/SideNote",

lib/components/InlineMessage/VariantIcons.tsx src/components/InlineMessage/VariantIcons.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
 
-import { Table } from "../../lib/components/Table";
+import { Table } from "../src/components/Table";
 
 const data = [
     { id: 1, name: "person489", team: "civil engineer", country: "Brazil" },

lib/components/InlineMessage/index.tsx src/components/InlineMessage/index.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
 
-import { Text } from "../../lib/components/Text";
+import { Text } from "../src/components/Text";
 
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
 const meta = {

lib/components/Input/HelperMessage.scss src/components/Input/HelperMessage.scss

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import { TextArea } from "../../lib/main";
+import { TextArea } from "../src/main";
 import { useState } from "react";
 
 const meta = {

lib/components/Input/HelperMessage.tsx src/components/Input/HelperMessage.tsx

@@ -1,6 +1,6 @@
 import { StoryObj, Meta } from "@storybook/react";
 import { action } from "@storybook/addon-actions";
-import { ToggleSwitch } from "../../lib/components/ToggleSwitch";
+import { ToggleSwitch } from "../src/components/ToggleSwitch";
 
 const meta = {
     title: "Components/ToggleSwitch",

lib/components/Input/Input.scss src/components/Input/Input.scss

@@ -1,4 +1,4 @@
 {
     "extends": "./tsconfig.json",
-    "include": ["lib"]
+    "include": ["src"]
 }

lib/components/Input/__test__/HelperMessage.test.tsx src/components/Input/__test__/HelperMessage.test.tsx

@@ -21,6 +21,6 @@
         "noFallthroughCasesInSwitch": true,
         "types": ["@testing-library/jest-dom"]
     },
-    "include": ["src", "lib"],
+    "include": ["src", "stories"],
     "references": [{ "path": "./tsconfig.node.json" }]
 }

lib/components/Input/__test__/Input.test.tsx src/components/Input/__test__/Input.test.tsx

@@ -12,27 +12,27 @@ export default defineConfig({
     plugins: [
         react(),
         libInjectCss(),
-        dts({ include: ["lib"], exclude: ["lib/**/*.spec.tsx"] }),
+        dts({ include: ["src"], exclude: ["src/**/*.spec.tsx"] }),
     ],
     css: {
         preprocessorOptions: {
             scss: {
                 implementation: sass,
-                additionalData: ['@use "./lib/styles/index.scss" as *;'],
+                additionalData: ['@use "./src/styles/index.scss" as *;'],
             },
         },
     },
     build: {
         lib: {
-            entry: resolve(__dirname, "lib/main.ts"),
+            entry: resolve(__dirname, "src/main.ts"),
             formats: ["es"],
         },
         copyPublicDir: false,
         rollupOptions: {
             external: ["react", "react/jsx-runtime", 'react-dom'],
             input: Object.fromEntries(
                 glob
-                    .sync("lib/**/*.{ts,tsx}", {
+                    .sync("src/**/*.{ts,tsx}", {
                         ignore: [
                             "**/*.test.ts",
                             "**/*.test.tsx",
@@ -44,16 +44,16 @@ export default defineConfig({
                     .map((file) => {
                         return [
                             // The name of the entry point
-                            // lib/nested/foo.ts becomes nested/foo
+                            // src/nested/foo.ts becomes nested/foo
                             relative(
-                                "lib",
+                                "src",
                                 file.slice(
                                     0,
                                     file.length - extname(file).length,
                                 ),
                             ),
                             // The absolute path to the entry file
-                            // lib/nested/foo.ts becomes /project/lib/nested/foo.ts
+                            // src/nested/foo.ts becomes /project/src/nested/foo.ts
                             fileURLToPath(new URL(file, import.meta.url)),
                         ];
                     }),