feat: APP-2893 - Update library structure to support module components (

#111)

.storybook/main.ts

@@ -13,7 +13,6 @@ const config: StorybookConfig = {
         name: '@storybook/react-webpack5',
         options: {},
     },
-    staticDirs: ['../src/assets'],
     webpackFinal: (webpackConfig) => {
         // Remove any svg loader already set and use @svgr/webpack to load svgs on Storybook
         const svgWebpackRule = webpackConfig.module?.rules?.find((rule) => {

.storybook/preview.tsx

@@ -14,7 +14,16 @@ const preview: Preview = {
         options: {
             storySort: {
                 method: 'alphabetical',
-                order: ['Docs', ['Documentation', 'Installation', 'Changelog'], 'Design Tokens', 'Components'],
+                order: [
+                    'Docs',
+                    ['Documentation', 'Installation', 'Changelog'],
+                    'Theme',
+                    ['Documentation'],
+                    'Core',
+                    ['Documentation'],
+                    'Modules',
+                    ['Documentation'],
+                ],
             },
         },
         backgrounds: {

CHANGELOG.md

@@ -7,6 +7,11 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Changed
+
+-   Update library structure to support module components
+-   Update documentation about how to install the library
+
 ## [1.0.18] - 2024-02-29
 
 ### Fixed

docs/installation.mdx

@@ -29,8 +29,20 @@ library:
 
 ## Setup with Tailwind CSS
 
--   (Optional) Setup `Tailwind CSS` for your project by following their
-    [installation guide](https://tailwindcss.com/docs/installation).
+-   Setup `Tailwind CSS` for your project by following their
+    [installation guide](https://tailwindcss.com/docs/installation)
+
+-   Install the required `TaildindCSS` plugins:
+
+    ```shell
+    yarn add @tailwindcss/typography
+    ```
+
+    or
+
+    ```shell
+    npm install @tailwindcss/typography
+    ```
 
 -   Update the `tailwind.config.js` configuration file as follows:
 

index.css

@@ -1,4 +1,4 @@
-@import "./src/styles/index.css";
+@import "./src/theme/index.css";
 
 @tailwind base;
 @tailwind components;

jest.config.js

@@ -4,10 +4,10 @@
 const config = {
     testEnvironment: 'jsdom',
     collectCoverageFrom: ['./src/**/*.{ts,tsx}'],
-    coveragePathIgnorePatterns: ['.d.ts', '.api.ts', 'index.ts', '.stories.tsx', './src/test/*'],
-    setupFilesAfterEnv: ['<rootDir>/src/test/setup.ts'],
+    coveragePathIgnorePatterns: ['.d.ts', '.api.ts', 'index.ts', '.stories.tsx', './src/core/test/*'],
+    setupFilesAfterEnv: ['<rootDir>/src/core/test/setup.ts'],
     transform: {
-        '^.+\\.svg$': '<rootDir>/src/test/svgTransform.js',
+        '^.+\\.svg$': '<rootDir>/src/core/test/svgTransform.js',
         '^.+\\.m?[tj]sx?$': 'ts-jest',
     },
     transformIgnorePatterns: ['node_modules/(?!(.*\\.mjs$|react-merge-refs))'],

package.json

@@ -10,7 +10,7 @@
     "index.css",
     "build.css",
     "src/**/*.css",
-    "src/assets/fonts/*",
+    "src/theme/fonts/*",
     "tailwind.config.js"
   ],
   "scripts": {

src/components/alerts/alertCard/alertCard.stories.tsx → src/core/components/alerts/alertCard/alertCard.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { AlertCard } from './alertCard';
 
 const meta: Meta<typeof AlertCard> = {
-    title: 'components/Alerts/AlertCard',
+    title: 'Core/Components/Alerts/AlertCard',
     component: AlertCard,
     tags: ['autodocs'],
     parameters: {

src/components/alerts/alertInline/alertInline.stories.tsx → src/core/components/alerts/alertInline/alertInline.stories.tsx

@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { AlertInline } from './alertInline';
 
 const meta: Meta<typeof AlertInline> = {
-    title: 'components/Alerts/AlertInline',
+    title: 'Core/Components/Alerts/AlertInline',
     component: AlertInline,
     tags: ['autodocs'],
     parameters: {

src/components/avatars/avatar/avatar.stories.tsx → src/core/components/avatars/avatar/avatar.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { Avatar } from './avatar';
 
 const meta: Meta<typeof Avatar> = {
-    title: 'components/Avatars/Avatar',
+    title: 'Core/Components/Avatars/Avatar',
     component: Avatar,
     tags: ['autodocs'],
     parameters: {

src/components/avatars/avatarIcon/avatarIcon.stories.tsx → src/core/components/avatars/avatarIcon/avatarIcon.stories.tsx

@@ -4,7 +4,7 @@ import { IconType } from '../../icon';
 import { AvatarIcon } from './avatarIcon';
 
 const meta: Meta<typeof AvatarIcon> = {
-    title: 'components/Avatars/AvatarIcon',
+    title: 'Core/Components/Avatars/AvatarIcon',
     component: AvatarIcon,
     tags: ['autodocs'],
     parameters: {

src/components/button/button.stories.tsx → src/core/components/button/button.stories.tsx

@@ -3,7 +3,7 @@ import { IconType } from '../icon';
 import { Button } from './button';
 
 const meta: Meta<typeof Button> = {
-    title: 'components/Button',
+    title: 'Core/Components/Button',
     component: Button,
     tags: ['autodocs'],
     argTypes: {

src/components/cards/card/card.stories.tsx → src/core/components/cards/card/card.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { Card } from './card';
 
 const meta: Meta<typeof Card> = {
-    title: 'components/Cards/Card',
+    title: 'Core/Components/Cards/Card',
     component: Card,
     tags: ['autodocs'],
     parameters: {

src/components/cards/cardEmptyState/cardEmptyState.stories.tsx → src/core/components/cards/cardEmptyState/cardEmptyState.stories.tsx

@@ -3,7 +3,7 @@ import { type Meta, type StoryObj } from '@storybook/react';
 import { CardEmptyState } from '.';
 
 const meta: Meta<typeof CardEmptyState> = {
-    title: 'components/Cards/CardEmptyState',
+    title: 'Core/Components/Cards/CardEmptyState',
     component: CardEmptyState,
     tags: ['autodocs'],
     parameters: {

src/components/cards/cardSummary/cardSummary.stories.tsx → src/core/components/cards/cardSummary/cardSummary.stories.tsx

@@ -3,7 +3,7 @@ import { IconType } from '../../icon';
 import { CardSummary } from './cardSummary';
 
 const meta: Meta<typeof CardSummary> = {
-    title: 'components/Cards/CardSummary',
+    title: 'Core/Components/Cards/CardSummary',
     component: CardSummary,
     tags: ['autodocs'],
     parameters: {

src/components/checkbox/checkbox/checkbox.stories.tsx → src/core/components/checkbox/checkbox/checkbox.stories.tsx

@@ -3,7 +3,7 @@ import { useEffect, useState } from 'react';
 import { Checkbox, type CheckboxState, type ICheckboxProps } from './checkbox';
 
 const meta: Meta<typeof Checkbox> = {
-    title: 'components/Checkbox/Checkbox',
+    title: 'Core/Components/Checkbox/Checkbox',
     component: Checkbox,
     tags: ['autodocs'],
     argTypes: {

src/components/checkbox/checkboxCard/checkboxCard.stories.tsx → src/core/components/checkbox/checkboxCard/checkboxCard.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { CheckboxCard } from './checkboxCard';
 
 const meta: Meta<typeof CheckboxCard> = {
-    title: 'components/Checkbox/CheckboxCard',
+    title: 'Core/Components/Checkbox/CheckboxCard',
     component: CheckboxCard,
     tags: ['autodocs'],
     argTypes: {

src/components/checkbox/checkboxGroup/checkboxGroup.stories.tsx → src/core/components/checkbox/checkboxGroup/checkboxGroup.stories.tsx

@@ -4,7 +4,7 @@ import { CheckboxCard } from '../checkboxCard';
 import { CheckboxGroup } from './checkboxGroup';
 
 const meta: Meta<typeof CheckboxGroup> = {
-    title: 'components/Checkbox/CheckboxGroup',
+    title: 'Core/Components/Checkbox/CheckboxGroup',
     component: CheckboxGroup,
     tags: ['autodocs'],
     parameters: {

src/components/dataList/dataListContainer/dataListContainer.stories.tsx → src/core/components/dataList/dataListContainer/dataListContainer.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { DataList } from '..';
 
 const meta: Meta<typeof DataList.Container> = {
-    title: 'components/DataList/DataList.Container',
+    title: 'Core/Components/DataList/DataList.Container',
     component: DataList.Container,
     tags: ['autodocs'],
     parameters: {

src/components/dataList/dataListFilter/dataListFilter.stories.tsx → src/core/components/dataList/dataListFilter/dataListFilter.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { DataList } from '../index';
 
 const meta: Meta<typeof DataList.Filter> = {
-    title: 'components/DataList/DataList.Filter',
+    title: 'Core/Components/DataList/DataList.Filter',
     component: DataList.Filter,
     tags: ['autodocs'],
     parameters: {

src/components/dataList/dataListItem/dataListItem.stories.tsx → src/core/components/dataList/dataListItem/dataListItem.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { DataList } from '../index';
 
 const meta: Meta<typeof DataList.Item> = {
-    title: 'components/DataList/DataList.Item',
+    title: 'Core/Components/DataList/DataList.Item',
     component: DataList.Item,
     tags: ['autodocs'],
     parameters: {

src/components/dataList/dataListPagination/dataListPagination.stories.tsx → src/core/components/dataList/dataListPagination/dataListPagination.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { DataList } from '../index';
 
 const meta: Meta<typeof DataList.Pagination> = {
-    title: 'components/DataList/DataList.Pagination',
+    title: 'Core/Components/DataList/DataList.Pagination',
     component: DataList.Pagination,
     tags: ['autodocs'],
     parameters: {

src/components/dataList/dataListRoot/dataListRoot.stories.tsx → src/core/components/dataList/dataListRoot/dataListRoot.stories.tsx

@@ -7,7 +7,7 @@ import { DataList, type IDataListRootProps } from '../index';
 import type { DataListState } from './dataListRoot';
 
 const meta: Meta<typeof DataList.Root> = {
-    title: 'components/DataList/DataList.Root',
+    title: 'Core/Components/DataList/DataList.Root',
     component: DataList.Root,
     tags: ['autodocs'],
     parameters: {

src/components/dialogs/dialog/dialogContent/dialogContent.stories.tsx → src/core/components/dialogs/dialog/dialogContent/dialogContent.stories.tsx

@@ -5,7 +5,7 @@ import { Button } from '../../../button';
 import { type IDialogContentProps } from './dialogContent';
 
 const meta: Meta<typeof Dialog.Content> = {
-    title: 'components/Dialogs/Dialog/Dialog.Content',
+    title: 'Core/Components/Dialogs/Dialog/Dialog.Content',
     component: Dialog.Content,
     tags: ['autodocs'],
     parameters: {

src/components/dialogs/dialog/dialogFooter/dialogFooter.stories.tsx → src/core/components/dialogs/dialog/dialogFooter/dialogFooter.stories.tsx

@@ -5,7 +5,7 @@ import { Button } from '../../../button';
 import { IconType } from '../../../icon';
 
 const meta: Meta<typeof Dialog.Footer> = {
-    title: 'components/Dialogs/Dialog/Dialog.Footer',
+    title: 'Core/Components/Dialogs/Dialog/Dialog.Footer',
     component: Dialog.Footer,
     tags: ['autodocs'],
     parameters: {

src/components/dialogs/dialog/dialogHeader/dialogHeader.stories.tsx → src/core/components/dialogs/dialog/dialogHeader/dialogHeader.stories.tsx

@@ -5,7 +5,7 @@ import { Button } from '../../../button';
 import { type IDialogHeaderProps } from './dialogHeader';
 
 const meta: Meta<typeof Dialog.Header> = {
-    title: 'components/Dialogs/Dialog/Dialog.Header',
+    title: 'Core/Components/Dialogs/Dialog/Dialog.Header',
     component: Dialog.Header,
     tags: ['autodocs'],
     parameters: {

src/components/dialogs/dialog/dialogRoot/dialogRoot.stories.tsx → src/core/components/dialogs/dialog/dialogRoot/dialogRoot.stories.tsx

@@ -4,7 +4,7 @@ import { Dialog, type IDialogRootProps } from '..';
 import { Button } from '../../../button';
 
 const meta: Meta<typeof Dialog.Root> = {
-    title: 'components/Dialogs/Dialog/Dialog.Root',
+    title: 'Core/Components/Dialogs/Dialog/Dialog.Root',
     component: Dialog.Root,
     tags: ['autodocs'],
     parameters: {

src/components/dialogs/dialogAlert/dialogAlertContent/dialogAlertContent.stories.tsx → src/core/components/dialogs/dialogAlert/dialogAlertContent/dialogAlertContent.stories.tsx

@@ -4,7 +4,7 @@ import { DialogAlert, type IDialogAlertContentProps } from '..';
 import { Button } from '../../../button';
 
 const meta: Meta<typeof DialogAlert.Content> = {
-    title: 'components/Dialogs/DialogAlert/DialogAlert.Content',
+    title: 'Core/Components/Dialogs/DialogAlert/DialogAlert.Content',
     component: DialogAlert.Content,
     tags: ['autodocs'],
     parameters: {

src/components/dialogs/dialogAlert/dialogAlertFooter/dialogAlertFooter.stories.tsx → src/core/components/dialogs/dialogAlert/dialogAlertFooter/dialogAlertFooter.stories.tsx

@@ -5,7 +5,7 @@ import { Button } from '../../../button';
 import { IconType } from '../../../icon';
 
 const meta: Meta<typeof DialogAlert.Footer> = {
-    title: 'components/Dialogs/DialogAlert/DialogAlert.Footer',
+    title: 'Core/Components/Dialogs/DialogAlert/DialogAlert.Footer',
     component: DialogAlert.Footer,
     tags: ['autodocs'],
     parameters: {

src/components/dialogs/dialogAlert/dialogAlertHeader/dialogAlertHeader.stories.tsx → src/core/components/dialogs/dialogAlert/dialogAlertHeader/dialogAlertHeader.stories.tsx

@@ -4,7 +4,7 @@ import { DialogAlert, type IDialogAlertHeaderProps } from '..';
 import { Button } from '../../../button';
 
 const meta: Meta<typeof DialogAlert.Header> = {
-    title: 'components/Dialogs/DialogAlert/DialogAlert.Header',
+    title: 'Core/Components/Dialogs/DialogAlert/DialogAlert.Header',
     component: DialogAlert.Header,
     tags: ['autodocs'],
     parameters: {

src/components/dialogs/dialogAlert/dialogAlertRoot/dialogAlertRoot.stories.tsx → src/core/components/dialogs/dialogAlert/dialogAlertRoot/dialogAlertRoot.stories.tsx

@@ -4,7 +4,7 @@ import { DialogAlert, type IDialogAlertRootProps } from '..';
 import { Button } from '../../../button';
 
 const meta: Meta<typeof DialogAlert.Root> = {
-    title: 'components/Dialogs/DialogAlert/DialogAlert.Root',
+    title: 'Core/Components/Dialogs/DialogAlert/DialogAlert.Root',
     component: DialogAlert.Root,
     tags: ['autodocs'],
     parameters: {

src/components/dropdown/dropdownContainer.stories.tsx → src/core/components/dropdown/dropdownContainer.stories.tsx

@@ -3,7 +3,7 @@ import { useState } from 'react';
 import { Dropdown, type IDropdownContainerProps } from './index';
 
 const meta: Meta<typeof Dropdown.Container> = {
-    title: 'components/Dropdown/Dropdown.Container',
+    title: 'Core/Components/Dropdown/Dropdown.Container',
     component: Dropdown.Container,
     tags: ['autodocs'],
     parameters: {

src/components/dropdown/dropdownItem.stories.tsx → src/core/components/dropdown/dropdownItem.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { Dropdown, type IDropdownItemProps } from './index';
 
 const meta: Meta<typeof Dropdown.Item> = {
-    title: 'components/Dropdown/Dropdown.Item',
+    title: 'Core/Components/Dropdown/Dropdown.Item',
     component: Dropdown.Item,
     tags: ['autodocs'],
     argTypes: {

src/components/heading/heading.stories.tsx → src/core/components/heading/heading.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { Heading } from './heading';
 
 const meta: Meta<typeof Heading> = {
-    title: 'components/Heading',
+    title: 'Core/Components/Heading',
     component: Heading,
 
     tags: ['autodocs'],

src/components/icon/icon.stories.tsx → src/core/components/icon/icon.stories.tsx

@@ -3,7 +3,7 @@ import { Icon } from './icon';
 import { IconType } from './iconType';
 
 const meta: Meta<typeof Icon> = {
-    title: 'components/Icon',
+    title: 'Core/Components/Icon',
     component: Icon,
     tags: ['autodocs'],
     parameters: {

src/components/illustrations/illustrationHuman/illustrationHuman.stories.tsx → src/core/components/illustrations/illustrationHuman/illustrationHuman.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { IllustrationHuman } from './illustrationHuman';
 
 const meta: Meta<typeof IllustrationHuman> = {
-    title: 'components/Illustrations/IllustrationHuman',
+    title: 'Core/Components/Illustrations/IllustrationHuman',
     component: IllustrationHuman,
     tags: ['autodocs'],
     parameters: {

src/components/illustrations/illustrationObject/illustrationObject.stories.tsx → src/core/components/illustrations/illustrationObject/illustrationObject.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { IllustrationObject } from './illustrationObject';
 
 const meta: Meta<typeof IllustrationObject> = {
-    title: 'components/Illustrations/IllustrationObject',
+    title: 'Core/Components/Illustrations/IllustrationObject',
     component: IllustrationObject,
     tags: ['autodocs'],
     parameters: {