From 1d4e4b3c3a0a4158e76e865043be2c43276061f0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Matuzal=C3=A9m=20Teles?= <matuzalemteles@gmail.com>
Date: Mon, 5 Jul 2021 15:43:43 -0300
Subject: [PATCH 01/10] feat(@clayui/core): Add Provider component and the new
 `@clayui/core` package

This commit adds the initial implementation of the `@clayui/core` package which will aggregate all Clay components during the next releases of v3, and v4 we will be stopping publishing packages separately if the separate packages still have a lot of value, we will discuss further.

When exporting components, we are adopting semantics without adding the Clay prefix to the component names so that the library can be more harmonious within an application and eliminate noise in the JSX markup views.

We are also adding the new `Provider` component which aggregates the main Clay, Icon, and Modal Contexts but we have not added Link and Tooltip contexts because both are commonly used in certain parts of the application structure, the Tooltip is used as a Global component in DXP, so we're discarding here to avoid conflicts.
---
 packages/clay-core/.yarnrc                    |  3 ++
 packages/clay-core/CHANGELOG.md               |  1 +
 packages/clay-core/package.json               | 40 +++++++++++++++++++
 packages/clay-core/src/index.ts               | 13 ++++++
 packages/clay-core/src/provider/index.ts      |  6 +++
 .../clay-core/src/provider/src/Provider.tsx   | 40 +++++++++++++++++++
 .../src/provider/stories/Provider.stories.tsx | 19 +++++++++
 packages/clay-core/tsconfig.declarations.json |  7 ++++
 packages/clay-core/tsconfig.json              |  4 ++
 9 files changed, 133 insertions(+)
 create mode 100644 packages/clay-core/.yarnrc
 create mode 100644 packages/clay-core/CHANGELOG.md
 create mode 100644 packages/clay-core/package.json
 create mode 100644 packages/clay-core/src/index.ts
 create mode 100644 packages/clay-core/src/provider/index.ts
 create mode 100644 packages/clay-core/src/provider/src/Provider.tsx
 create mode 100644 packages/clay-core/src/provider/stories/Provider.stories.tsx
 create mode 100644 packages/clay-core/tsconfig.declarations.json
 create mode 100644 packages/clay-core/tsconfig.json

diff --git a/packages/clay-core/.yarnrc b/packages/clay-core/.yarnrc
new file mode 100644
index 0000000000..8fb1e488e0
--- /dev/null
+++ b/packages/clay-core/.yarnrc
@@ -0,0 +1,3 @@
+# Make `yarn version` produce the right commit message and tag for this package.
+version-tag-prefix "@clayui/core@"
+version-git-message "chore: prepare @clayui/core@%s"
diff --git a/packages/clay-core/CHANGELOG.md b/packages/clay-core/CHANGELOG.md
new file mode 100644
index 0000000000..420e6f23d0
--- /dev/null
+++ b/packages/clay-core/CHANGELOG.md
@@ -0,0 +1 @@
+# Change Log
diff --git a/packages/clay-core/package.json b/packages/clay-core/package.json
new file mode 100644
index 0000000000..fb71f96e4a
--- /dev/null
+++ b/packages/clay-core/package.json
@@ -0,0 +1,40 @@
+{
+	"name": "@clayui/core",
+	"version": "3.0.0",
+	"description": "Clay UI components in React",
+	"license": "BSD-3-Clause",
+	"repository": "https://github.com/liferay/clay",
+	"engines": {
+		"node": ">=0.12.0",
+		"npm": ">=3.0.0"
+	},
+	"main": "lib/index.js",
+	"types": "lib/index.d.ts",
+	"ts:main": "src/index.tsx",
+	"files": [
+		"lib",
+		"src"
+	],
+	"scripts": {
+		"build": "cross-env NODE_ENV=production babel src --root-mode upward --out-dir lib --extensions .ts,.tsx",
+		"build:types": "cross-env NODE_ENV=production tsc --project ./tsconfig.declarations.json",
+		"prepublishOnly": "yarn build && yarn build:types",
+		"test": "jest --config ../../jest.config.js"
+	},
+	"keywords": [
+		"clay",
+		"react"
+	],
+	"dependencies": {
+		"@clayui/icon": "^3.1.0",
+		"@clayui/modal": "^3.29.0"
+	},
+	"peerDependencies": {
+		"@clayui/css": "3.x",
+		"react": "^16.8.1",
+		"react-dom": "^16.8.1"
+	},
+	"browserslist": [
+		"extends browserslist-config-clay"
+	]
+}
diff --git a/packages/clay-core/src/index.ts b/packages/clay-core/src/index.ts
new file mode 100644
index 0000000000..acde6c1db2
--- /dev/null
+++ b/packages/clay-core/src/index.ts
@@ -0,0 +1,13 @@
+/**
+ * SPDX-FileCopyrightText: © 2021 Liferay, Inc. <https://liferay.com>
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+
+export {default as Icon} from '@clayui/icon';
+export {
+	default as Modal,
+	Context as ModalContext,
+	useModal,
+} from '@clayui/modal';
+
+export {Provider, useProvider} from './provider';
diff --git a/packages/clay-core/src/provider/index.ts b/packages/clay-core/src/provider/index.ts
new file mode 100644
index 0000000000..00fbab568a
--- /dev/null
+++ b/packages/clay-core/src/provider/index.ts
@@ -0,0 +1,6 @@
+/**
+ * SPDX-FileCopyrightText: © 2021 Liferay, Inc. <https://liferay.com>
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+
+export * from './src/Provider';
diff --git a/packages/clay-core/src/provider/src/Provider.tsx b/packages/clay-core/src/provider/src/Provider.tsx
new file mode 100644
index 0000000000..bfa675ddca
--- /dev/null
+++ b/packages/clay-core/src/provider/src/Provider.tsx
@@ -0,0 +1,40 @@
+/**
+ * SPDX-FileCopyrightText: © 2021 Liferay, Inc. <https://liferay.com>
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+
+import {ClayIconSpriteContext} from '@clayui/icon';
+import {ClayModalProvider} from '@clayui/modal';
+import React, {useContext} from 'react';
+
+interface IProviderProps extends IProviderContext {
+	children: React.ReactNode;
+
+	/**
+	 * Path to the location of the spritemap resource.
+	 */
+	spritemap: string;
+}
+
+interface IProviderContext {
+}
+
+const Context = React.createContext<IProviderContext | null>(null);
+
+Context.displayName = 'ClayProviderContext';
+
+export const Provider = ({
+	children,
+	spritemap,
+	...otherProps
+}: IProviderProps) => (
+	<Context.Provider value={otherProps}>
+		<ClayIconSpriteContext.Provider value={spritemap}>
+			<ClayModalProvider>{children}</ClayModalProvider>
+		</ClayIconSpriteContext.Provider>
+	</Context.Provider>
+);
+
+export const useProvider = () => {
+	return useContext(Context);
+};
diff --git a/packages/clay-core/src/provider/stories/Provider.stories.tsx b/packages/clay-core/src/provider/stories/Provider.stories.tsx
new file mode 100644
index 0000000000..20948e278c
--- /dev/null
+++ b/packages/clay-core/src/provider/stories/Provider.stories.tsx
@@ -0,0 +1,19 @@
+/**
+ * SPDX-FileCopyrightText: © 2021 Liferay, Inc. <https://liferay.com>
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+
+import '@clayui/css/lib/css/atlas.css';
+const spritemap = require('@clayui/css/lib/images/icons/icons.svg');
+import {storiesOf} from '@storybook/react';
+import React from 'react';
+
+import {Provider} from '../';
+import {Icon} from '../../';
+
+storiesOf('Provider', module).add('spritemap', () => (
+	<Provider spritemap={spritemap}>
+		<Icon symbol="books" />
+		<Icon symbol="times" />
+	</Provider>
+));
diff --git a/packages/clay-core/tsconfig.declarations.json b/packages/clay-core/tsconfig.declarations.json
new file mode 100644
index 0000000000..24ffcb6625
--- /dev/null
+++ b/packages/clay-core/tsconfig.declarations.json
@@ -0,0 +1,7 @@
+{
+	"compilerOptions": {
+		"declarationDir": "./lib"
+	},
+	"extends": "../../tsconfig.declarations.json",
+	"include": ["src"]
+}
diff --git a/packages/clay-core/tsconfig.json b/packages/clay-core/tsconfig.json
new file mode 100644
index 0000000000..0c91d62848
--- /dev/null
+++ b/packages/clay-core/tsconfig.json
@@ -0,0 +1,4 @@
+{
+	"extends": "../../tsconfig.json",
+	"include": ["src"]
+}

From e7bae7d26d8a67ecd1558099798c995654c73e5b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Matuzal=C3=A9m=20Teles?= <matuzalemteles@gmail.com>
Date: Mon, 5 Jul 2021 17:46:13 -0300
Subject: [PATCH 02/10] feat(@clayui/core): adds `theme` API to Provider

---
 packages/clay-core/package.json               |  4 +-
 packages/clay-core/src/index.ts               |  9 ++++
 .../clay-core/src/provider/src/Provider.tsx   |  6 ++-
 .../src/provider/stories/Provider.stories.tsx | 44 +++++++++++++++----
 4 files changed, 53 insertions(+), 10 deletions(-)

diff --git a/packages/clay-core/package.json b/packages/clay-core/package.json
index fb71f96e4a..2950ef8868 100644
--- a/packages/clay-core/package.json
+++ b/packages/clay-core/package.json
@@ -10,7 +10,7 @@
 	},
 	"main": "lib/index.js",
 	"types": "lib/index.d.ts",
-	"ts:main": "src/index.tsx",
+	"ts:main": "src/index.ts",
 	"files": [
 		"lib",
 		"src"
@@ -26,6 +26,8 @@
 		"react"
 	],
 	"dependencies": {
+		"@clayui/button": "^3.6.0",
+		"@clayui/drop-down": "^3.30.0",
 		"@clayui/icon": "^3.1.0",
 		"@clayui/modal": "^3.29.0"
 	},
diff --git a/packages/clay-core/src/index.ts b/packages/clay-core/src/index.ts
index acde6c1db2..b1f152bda3 100644
--- a/packages/clay-core/src/index.ts
+++ b/packages/clay-core/src/index.ts
@@ -3,6 +3,15 @@
  * SPDX-License-Identifier: BSD-3-Clause
  */
 
+export {
+	default as Button,
+	ClayButtonWithIcon as ButtonWithIcon,
+} from '@clayui/button';
+export {
+	default as DropDown,
+	ClayDropDownWithItems as DropDownWithItems,
+	ClayDropDownWithDrilldown as DropDownWithDrilldown,
+} from '@clayui/drop-down';
 export {default as Icon} from '@clayui/icon';
 export {
 	default as Modal,
diff --git a/packages/clay-core/src/provider/src/Provider.tsx b/packages/clay-core/src/provider/src/Provider.tsx
index bfa675ddca..d1da8633d1 100644
--- a/packages/clay-core/src/provider/src/Provider.tsx
+++ b/packages/clay-core/src/provider/src/Provider.tsx
@@ -17,9 +17,13 @@ interface IProviderProps extends IProviderContext {
 }
 
 interface IProviderContext {
+	/**
+	 * The theme corresponds to a CSS class to scope the application.
+	 */
+	theme?: string;
 }
 
-const Context = React.createContext<IProviderContext | null>(null);
+const Context = React.createContext<IProviderContext>({});
 
 Context.displayName = 'ClayProviderContext';
 
diff --git a/packages/clay-core/src/provider/stories/Provider.stories.tsx b/packages/clay-core/src/provider/stories/Provider.stories.tsx
index 20948e278c..8921ad8152 100644
--- a/packages/clay-core/src/provider/stories/Provider.stories.tsx
+++ b/packages/clay-core/src/provider/stories/Provider.stories.tsx
@@ -6,14 +6,42 @@
 import '@clayui/css/lib/css/atlas.css';
 const spritemap = require('@clayui/css/lib/images/icons/icons.svg');
 import {storiesOf} from '@storybook/react';
-import React from 'react';
+import React, {useState} from 'react';
 
 import {Provider} from '../';
-import {Icon} from '../../';
+import {Button, DropDown, Icon} from '../../';
 
-storiesOf('Provider', module).add('spritemap', () => (
-	<Provider spritemap={spritemap}>
-		<Icon symbol="books" />
-		<Icon symbol="times" />
-	</Provider>
-));
+storiesOf('Provider', module)
+	.add('spritemap', () => (
+		<Provider spritemap={spritemap}>
+			<Icon symbol="books" />
+			<Icon symbol="times" />
+		</Provider>
+	))
+	.add('theme', () => {
+		const [active, setActive] = useState(false);
+
+		return (
+			<Provider spritemap={spritemap} theme="cadmin">
+				<DropDown
+					active={active}
+					onActiveChange={setActive}
+					trigger={<Button>{'Click here!'}</Button>}
+				>
+					<DropDown.ItemList>
+						<DropDown.Group header="Group #1">
+							{[
+								{href: '#one', label: 'one'},
+								{href: '#two', label: 'two'},
+								{href: '#three', label: 'three'},
+							].map((item, i) => (
+								<DropDown.Item href={item.href} key={i}>
+									{item.label}
+								</DropDown.Item>
+							))}
+						</DropDown.Group>
+					</DropDown.ItemList>
+				</DropDown>
+			</Provider>
+		);
+	});

From d8427a78252dc5b3e1117e6653904aa2654bb457 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Matuzal=C3=A9m=20Teles?= <matuzalemteles@gmail.com>
Date: Mon, 5 Jul 2021 17:47:27 -0300
Subject: [PATCH 03/10] chore(@clayui/shared): adds the theme class in the
 scope of ClayPortal

---
 packages/clay-shared/package.json   | 4 +++-
 packages/clay-shared/src/Portal.tsx | 8 +++++++-
 packages/clay-shared/src/index.tsx  | 3 ++-
 3 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/packages/clay-shared/package.json b/packages/clay-shared/package.json
index 589e676d6a..2db4c03ca2 100644
--- a/packages/clay-shared/package.json
+++ b/packages/clay-shared/package.json
@@ -27,9 +27,11 @@
 	],
 	"dependencies": {
 		"@clayui/button": "^3.6.0",
-		"@clayui/link": "^3.2.0"
+		"@clayui/link": "^3.2.0",
+		"classnames": "^2.2.6"
 	},
 	"peerDependencies": {
+		"@clayui/core": "^3.0.0",
 		"@clayui/css": "3.x",
 		"react": "^16.8.1",
 		"react-dom": "^16.8.1"
diff --git a/packages/clay-shared/src/Portal.tsx b/packages/clay-shared/src/Portal.tsx
index 728dc66210..5d9a3d5fd3 100644
--- a/packages/clay-shared/src/Portal.tsx
+++ b/packages/clay-shared/src/Portal.tsx
@@ -3,6 +3,8 @@
  * SPDX-License-Identifier: BSD-3-Clause
  */
 
+import {useProvider} from '@clayui/core';
+import classNames from 'classnames';
 import React from 'react';
 import {createPortal} from 'react-dom';
 
@@ -59,10 +61,14 @@ export const ClayPortal: React.FunctionComponent<IProps> = ({
 	id,
 	subPortalRef,
 }) => {
+	const {theme} = useProvider();
+
 	const parentPortalRef = React.useContext(ClayPortalContext);
 
 	const portalRef = React.useRef(
-		typeof document !== 'undefined' ? createDivElement(className, id) : null
+		typeof document !== 'undefined'
+			? createDivElement(classNames(theme, className), id)
+			: null
 	);
 
 	React.useEffect(() => {
diff --git a/packages/clay-shared/src/index.tsx b/packages/clay-shared/src/index.tsx
index 096cff86c9..c7900db3e9 100644
--- a/packages/clay-shared/src/index.tsx
+++ b/packages/clay-shared/src/index.tsx
@@ -4,7 +4,7 @@
  */
 
 export const noop = () => {};
-export {ClayPortal, IBaseProps as IPortalBaseProps} from './Portal';
+export {ClayPortal} from './Portal';
 export {delegate} from './delegate';
 export {FocusScope} from './FocusScope';
 export {getEllipsisItems} from './getEllipsisItems';
@@ -18,4 +18,5 @@ export {setElementFullHeight} from './setElementFullHeight';
 export {useInternalState} from './useInternalState';
 export {useMousePosition} from './useMousePosition';
 export {MouseSafeArea} from './MouseSafeArea';
+export type {IBaseProps as IPortalBaseProps} from './Portal';
 export type {TInternalStateOnChange} from './useInternalState';

From a75dab649a123eec15d1015c8f51ff34589fdc1e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Matuzal=C3=A9m=20Teles?= <matuzalemteles@gmail.com>
Date: Tue, 27 Jul 2021 15:21:28 -0300
Subject: [PATCH 04/10] chore(@clayui/core): add the story in the Components
 scope

---
 packages/clay-core/src/provider/stories/Provider.stories.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/clay-core/src/provider/stories/Provider.stories.tsx b/packages/clay-core/src/provider/stories/Provider.stories.tsx
index 8921ad8152..d734518b3a 100644
--- a/packages/clay-core/src/provider/stories/Provider.stories.tsx
+++ b/packages/clay-core/src/provider/stories/Provider.stories.tsx
@@ -11,7 +11,7 @@ import React, {useState} from 'react';
 import {Provider} from '../';
 import {Button, DropDown, Icon} from '../../';
 
-storiesOf('Provider', module)
+storiesOf('Components|Provider', module)
 	.add('spritemap', () => (
 		<Provider spritemap={spritemap}>
 			<Icon symbol="books" />

From 5e00f5abb9a5230e396ca472c308849f1b2835f6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Matuzal=C3=A9m=20Teles?= <matuzalemteles@gmail.com>
Date: Tue, 27 Jul 2021 18:31:06 -0300
Subject: [PATCH 05/10] fix(clayui.com): fixes error when generating slugs for
 documents inside packages

This allows us to create documents without the README or is at the root of the package, we can move the documents to the docs folder of each package.
---
 clayui.com/gatsby/onCreateNode.js | 18 ++++++++++++++----
 1 file changed, 14 insertions(+), 4 deletions(-)

diff --git a/clayui.com/gatsby/onCreateNode.js b/clayui.com/gatsby/onCreateNode.js
index bdca1e52d0..d7bf0e6f05 100644
--- a/clayui.com/gatsby/onCreateNode.js
+++ b/clayui.com/gatsby/onCreateNode.js
@@ -71,6 +71,8 @@ module.exports = exports.onCreateNode = ({actions, getNode, node}) => {
 		}
 
 		if (!slug) {
+			// Create a slug for files that are in component packages, README
+			// files or files inside the docs folder.
 			if (sourceInstanceName === 'packages' && title) {
 				const fileName = path.basename(relativePath).split('.')[0];
 
@@ -86,16 +88,24 @@ module.exports = exports.onCreateNode = ({actions, getNode, node}) => {
 				}
 			}
 
-			if (relativePath.includes('docs')) {
+			// Create the slug for files are inside the content folder that
+			// belong to clayui.com package.
+			if (
+				sourceInstanceName === 'content' &&
+				relativePath.includes('docs')
+			) {
 				if (relativePath.endsWith('.md')) {
 					slug = relativePath.replace('.md', '.html');
 				} else {
 					slug = relativePath.replace('.mdx', '.html');
 				}
+			}
 
-				if (mainTabURL) {
-					slug = generateTabSlug(slug, mainTabURL);
-				}
+			// Create the slug for any file that contains `docs` as part of
+			// the path, it may be inside the clayui.com package or in the
+			// component packages.
+			if (mainTabURL && relativePath.includes('docs')) {
+				slug = generateTabSlug(relativePath, mainTabURL);
 			}
 
 			if (relativePath.includes('blog')) {

From 72b4f61e8dcde81548f0260aed3d5851447eb5c7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Matuzal=C3=A9m=20Teles?= <matuzalemteles@gmail.com>
Date: Tue, 27 Jul 2021 19:12:00 -0300
Subject: [PATCH 06/10] docs(@clayui/core): add Provider documentation

---
 packages/clay-core/docs/provider.mdx          | 104 ++++++++++++++++++
 .../clay-core/src/provider/src/Provider.tsx   |   3 +
 2 files changed, 107 insertions(+)
 create mode 100644 packages/clay-core/docs/provider.mdx

diff --git a/packages/clay-core/docs/provider.mdx b/packages/clay-core/docs/provider.mdx
new file mode 100644
index 0000000000..c8af32e41d
--- /dev/null
+++ b/packages/clay-core/docs/provider.mdx
@@ -0,0 +1,104 @@
+---
+title: 'Provider'
+description: 'Provider component which aggregates the main Clay, Icon, and Modal.'
+packageNpm: '@clayui/core'
+---
+
+<div class="nav-toc-absolute">
+<div class="nav-toc">
+
+-   [Example](#example)
+-   [Application provider](#application-provider)
+    -   [Theme](#theme)
+    -   [Icon spritemap](#icon-spritemap)
+    -   [Modal](#modal)
+-   [API](#api)
+
+</div>
+</div>
+
+## Example
+
+```js
+import {Provider} from '@clayui/core';
+```
+
+```jsx
+<Provider spritemap={spritemap}>
+	<Icon symbol="books" />
+	<Icon symbol="times" />
+</Provider>
+```
+
+## Application provider
+
+A Provider is a component that be at the root of your application. Provider is used by other Clay components to define `theme` scopes, render icons with `spritemap`, or help handle Modal creation in your application.
+
+### Theme
+
+Themes in Clay is different from patterns that are common in other libraries, Clay's CSS framework is built using Sass and we allow to create themes based on CSS scope, a class is added in Clay components that use `React.Portal` to render elements in the body for example.
+
+```jsx
+<Provider theme="cadmin">Content</Provider>
+```
+
+### Icon spritemap
+
+Icons need the path where to find the icon collection to be rendered. Clay components that use the `Icon` component pass props from `spritemap` to the icon, to avoid passing `spritemap` to all your components at different levels, add the spritemap path in `Provider` to that `Icon` can use and avoid passing the property on all components.
+
+```jsx
+<Provider spritemap={spritemap}>
+	<Icon symbol="books" />
+	<Icon symbol="times" />
+</Provider>
+```
+
+### Modal
+
+By default `Provider` provides the context of [`Modal`](/docs/components/modal.html), manages the state of Modal. Allows you to call a Modal anywhere in your application structure.
+
+```jsx
+import {useContext} from 'react';
+import {Button, ModalContext} from '@clayui/core';
+
+const Back = () => {
+	const [state, dispatch] = useContext(ModalContext);
+
+	return (
+		<Button
+			onClick={() =>
+				dispatch({
+					payload: {
+						body: "Your draft won't be saved.",
+						footer: [
+							,
+							,
+							<Button.Group key={3} spaced>
+								<Button displayType="secondary">Cancel</Button>
+								<Button onClick={state.onClose}>Discard</Button>
+							</Button.Group>,
+						],
+						header: 'Discard draft?',
+						size: 'lg',
+					},
+					type: 1,
+				})
+			}
+		>
+			Back
+		</Button>
+	);
+};
+```
+
+```jsx
+export const App = () => (
+	<Provider>
+		<Back />
+	</Provider>
+);
+```
+
+## API
+
+<div>[APITable "clay-core/src/provider/src/Provider.tsx"]</div>
diff --git a/packages/clay-core/src/provider/src/Provider.tsx b/packages/clay-core/src/provider/src/Provider.tsx
index d1da8633d1..43849f2f77 100644
--- a/packages/clay-core/src/provider/src/Provider.tsx
+++ b/packages/clay-core/src/provider/src/Provider.tsx
@@ -8,6 +8,9 @@ import {ClayModalProvider} from '@clayui/modal';
 import React, {useContext} from 'react';
 
 interface IProviderProps extends IProviderContext {
+	/**
+	 * The content of the Provider.
+	 */
 	children: React.ReactNode;
 
 	/**

From b04421deef6e480001e99e93d7c9b41d289de638 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Matuzal=C3=A9m=20Teles?= <matuzalemteles@gmail.com>
Date: Tue, 27 Jul 2021 19:37:50 -0300
Subject: [PATCH 07/10] chore(@clayui/core): move story file out of source

Stories files were being compiled as part of the build process and we don't want to include them in the build, to avoid this we are moving out of the source and also removing the nested src from the components.
---
 packages/clay-core/docs/provider.mdx                           | 2 +-
 packages/clay-core/src/provider/{src => }/Provider.tsx         | 0
 packages/clay-core/src/provider/index.ts                       | 2 +-
 .../clay-core/{src/provider => }/stories/Provider.stories.tsx  | 3 +--
 4 files changed, 3 insertions(+), 4 deletions(-)
 rename packages/clay-core/src/provider/{src => }/Provider.tsx (100%)
 rename packages/clay-core/{src/provider => }/stories/Provider.stories.tsx (93%)

diff --git a/packages/clay-core/docs/provider.mdx b/packages/clay-core/docs/provider.mdx
index c8af32e41d..913019beaa 100644
--- a/packages/clay-core/docs/provider.mdx
+++ b/packages/clay-core/docs/provider.mdx
@@ -101,4 +101,4 @@ export const App = () => (
 
 ## API
 
-<div>[APITable "clay-core/src/provider/src/Provider.tsx"]</div>
+<div>[APITable "clay-core/src/provider/Provider.tsx"]</div>
diff --git a/packages/clay-core/src/provider/src/Provider.tsx b/packages/clay-core/src/provider/Provider.tsx
similarity index 100%
rename from packages/clay-core/src/provider/src/Provider.tsx
rename to packages/clay-core/src/provider/Provider.tsx
diff --git a/packages/clay-core/src/provider/index.ts b/packages/clay-core/src/provider/index.ts
index 00fbab568a..6e4de7c692 100644
--- a/packages/clay-core/src/provider/index.ts
+++ b/packages/clay-core/src/provider/index.ts
@@ -3,4 +3,4 @@
  * SPDX-License-Identifier: BSD-3-Clause
  */
 
-export * from './src/Provider';
+export * from './Provider';
diff --git a/packages/clay-core/src/provider/stories/Provider.stories.tsx b/packages/clay-core/stories/Provider.stories.tsx
similarity index 93%
rename from packages/clay-core/src/provider/stories/Provider.stories.tsx
rename to packages/clay-core/stories/Provider.stories.tsx
index d734518b3a..0edfdff899 100644
--- a/packages/clay-core/src/provider/stories/Provider.stories.tsx
+++ b/packages/clay-core/stories/Provider.stories.tsx
@@ -8,8 +8,7 @@ const spritemap = require('@clayui/css/lib/images/icons/icons.svg');
 import {storiesOf} from '@storybook/react';
 import React, {useState} from 'react';
 
-import {Provider} from '../';
-import {Button, DropDown, Icon} from '../../';
+import {Button, DropDown, Icon, Provider} from '../src';
 
 storiesOf('Components|Provider', module)
 	.add('spritemap', () => (

From 0c772eb78d75184a73a1174094ece729a18e9972 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Matuzal=C3=A9m=20Teles?= <matuzalemteles@gmail.com>
Date: Wed, 28 Jul 2021 12:25:17 -0300
Subject: [PATCH 08/10] chore(@clayui/provider): add package to Provider

We are adding a new package to Provider to avoid circular dependency and increasing package sizes.

We are not going to encourage the direct use of `@clayui/provider` but rather use the direct `@clayui/core`.
---
 packages/clay-core/package.json               |  3 +-
 packages/clay-core/src/index.ts               |  3 +-
 packages/clay-provider/.yarnrc                |  3 ++
 packages/clay-provider/CHANGELOG.md           |  1 +
 .../docs/provider.mdx                         |  2 +-
 packages/clay-provider/package.json           | 40 +++++++++++++++++++
 .../src}/Provider.tsx                         |  0
 .../provider => clay-provider/src}/index.ts   |  0
 .../stories/Provider.stories.tsx              |  7 +++-
 .../clay-provider/tsconfig.declarations.json  |  7 ++++
 packages/clay-provider/tsconfig.json          |  4 ++
 packages/clay-shared/package.json             |  2 +-
 packages/clay-shared/src/Portal.tsx           |  2 +-
 13 files changed, 66 insertions(+), 8 deletions(-)
 create mode 100644 packages/clay-provider/.yarnrc
 create mode 100644 packages/clay-provider/CHANGELOG.md
 rename packages/{clay-core => clay-provider}/docs/provider.mdx (97%)
 create mode 100644 packages/clay-provider/package.json
 rename packages/{clay-core/src/provider => clay-provider/src}/Provider.tsx (100%)
 rename packages/{clay-core/src/provider => clay-provider/src}/index.ts (100%)
 rename packages/{clay-core => clay-provider}/stories/Provider.stories.tsx (85%)
 create mode 100644 packages/clay-provider/tsconfig.declarations.json
 create mode 100644 packages/clay-provider/tsconfig.json

diff --git a/packages/clay-core/package.json b/packages/clay-core/package.json
index 2950ef8868..6b2e242906 100644
--- a/packages/clay-core/package.json
+++ b/packages/clay-core/package.json
@@ -29,7 +29,8 @@
 		"@clayui/button": "^3.6.0",
 		"@clayui/drop-down": "^3.30.0",
 		"@clayui/icon": "^3.1.0",
-		"@clayui/modal": "^3.29.0"
+		"@clayui/modal": "^3.29.0",
+		"@clayui/provider": "^3.0.0"
 	},
 	"peerDependencies": {
 		"@clayui/css": "3.x",
diff --git a/packages/clay-core/src/index.ts b/packages/clay-core/src/index.ts
index b1f152bda3..ead27c3fdc 100644
--- a/packages/clay-core/src/index.ts
+++ b/packages/clay-core/src/index.ts
@@ -18,5 +18,4 @@ export {
 	Context as ModalContext,
 	useModal,
 } from '@clayui/modal';
-
-export {Provider, useProvider} from './provider';
+export {Provider, useProvider} from '@clayui/provider';
diff --git a/packages/clay-provider/.yarnrc b/packages/clay-provider/.yarnrc
new file mode 100644
index 0000000000..09efd574a7
--- /dev/null
+++ b/packages/clay-provider/.yarnrc
@@ -0,0 +1,3 @@
+# Make `yarn version` produce the right commit message and tag for this package.
+version-tag-prefix "@clayui/provider@"
+version-git-message "chore: prepare @clayui/provider@%s"
diff --git a/packages/clay-provider/CHANGELOG.md b/packages/clay-provider/CHANGELOG.md
new file mode 100644
index 0000000000..420e6f23d0
--- /dev/null
+++ b/packages/clay-provider/CHANGELOG.md
@@ -0,0 +1 @@
+# Change Log
diff --git a/packages/clay-core/docs/provider.mdx b/packages/clay-provider/docs/provider.mdx
similarity index 97%
rename from packages/clay-core/docs/provider.mdx
rename to packages/clay-provider/docs/provider.mdx
index 913019beaa..e64f25c608 100644
--- a/packages/clay-core/docs/provider.mdx
+++ b/packages/clay-provider/docs/provider.mdx
@@ -101,4 +101,4 @@ export const App = () => (
 
 ## API
 
-<div>[APITable "clay-core/src/provider/Provider.tsx"]</div>
+<div>[APITable "clay-provider/src/Provider.tsx"]</div>
diff --git a/packages/clay-provider/package.json b/packages/clay-provider/package.json
new file mode 100644
index 0000000000..707566ac49
--- /dev/null
+++ b/packages/clay-provider/package.json
@@ -0,0 +1,40 @@
+{
+	"name": "@clayui/provider",
+	"version": "3.0.0",
+	"description": "ClayProvider component in React",
+	"license": "BSD-3-Clause",
+	"repository": "https://github.com/liferay/clay",
+	"engines": {
+		"node": ">=0.12.0",
+		"npm": ">=3.0.0"
+	},
+	"main": "lib/index.js",
+	"types": "lib/index.d.ts",
+	"ts:main": "src/index.ts",
+	"files": [
+		"lib",
+		"src"
+	],
+	"scripts": {
+		"build": "cross-env NODE_ENV=production babel src --root-mode upward --out-dir lib --extensions .ts,.tsx",
+		"build:types": "cross-env NODE_ENV=production tsc --project ./tsconfig.declarations.json",
+		"prepublishOnly": "yarn build && yarn build:types",
+		"test": "jest --config ../../jest.config.js"
+	},
+	"keywords": [
+		"clay",
+		"react"
+	],
+	"dependencies": {
+		"@clayui/icon": "^3.1.0",
+		"@clayui/modal": "^3.29.0"
+	},
+	"peerDependencies": {
+		"@clayui/css": "3.x",
+		"react": "^16.8.1",
+		"react-dom": "^16.8.1"
+	},
+	"browserslist": [
+		"extends browserslist-config-clay"
+	]
+}
diff --git a/packages/clay-core/src/provider/Provider.tsx b/packages/clay-provider/src/Provider.tsx
similarity index 100%
rename from packages/clay-core/src/provider/Provider.tsx
rename to packages/clay-provider/src/Provider.tsx
diff --git a/packages/clay-core/src/provider/index.ts b/packages/clay-provider/src/index.ts
similarity index 100%
rename from packages/clay-core/src/provider/index.ts
rename to packages/clay-provider/src/index.ts
diff --git a/packages/clay-core/stories/Provider.stories.tsx b/packages/clay-provider/stories/Provider.stories.tsx
similarity index 85%
rename from packages/clay-core/stories/Provider.stories.tsx
rename to packages/clay-provider/stories/Provider.stories.tsx
index 0edfdff899..95211ce258 100644
--- a/packages/clay-core/stories/Provider.stories.tsx
+++ b/packages/clay-provider/stories/Provider.stories.tsx
@@ -4,13 +4,16 @@
  */
 
 import '@clayui/css/lib/css/atlas.css';
+import Button from '@clayui/button';
 const spritemap = require('@clayui/css/lib/images/icons/icons.svg');
+import DropDown from '@clayui/drop-down';
+import Icon from '@clayui/icon';
 import {storiesOf} from '@storybook/react';
 import React, {useState} from 'react';
 
-import {Button, DropDown, Icon, Provider} from '../src';
+import {Provider} from '../src';
 
-storiesOf('Components|Provider', module)
+storiesOf('Components|ClayProvider', module)
 	.add('spritemap', () => (
 		<Provider spritemap={spritemap}>
 			<Icon symbol="books" />
diff --git a/packages/clay-provider/tsconfig.declarations.json b/packages/clay-provider/tsconfig.declarations.json
new file mode 100644
index 0000000000..24ffcb6625
--- /dev/null
+++ b/packages/clay-provider/tsconfig.declarations.json
@@ -0,0 +1,7 @@
+{
+	"compilerOptions": {
+		"declarationDir": "./lib"
+	},
+	"extends": "../../tsconfig.declarations.json",
+	"include": ["src"]
+}
diff --git a/packages/clay-provider/tsconfig.json b/packages/clay-provider/tsconfig.json
new file mode 100644
index 0000000000..0c91d62848
--- /dev/null
+++ b/packages/clay-provider/tsconfig.json
@@ -0,0 +1,4 @@
+{
+	"extends": "../../tsconfig.json",
+	"include": ["src"]
+}
diff --git a/packages/clay-shared/package.json b/packages/clay-shared/package.json
index 2db4c03ca2..beed13a002 100644
--- a/packages/clay-shared/package.json
+++ b/packages/clay-shared/package.json
@@ -31,7 +31,7 @@
 		"classnames": "^2.2.6"
 	},
 	"peerDependencies": {
-		"@clayui/core": "^3.0.0",
+		"@clayui/provider": "^3.0.0",
 		"@clayui/css": "3.x",
 		"react": "^16.8.1",
 		"react-dom": "^16.8.1"
diff --git a/packages/clay-shared/src/Portal.tsx b/packages/clay-shared/src/Portal.tsx
index 5d9a3d5fd3..b703a98890 100644
--- a/packages/clay-shared/src/Portal.tsx
+++ b/packages/clay-shared/src/Portal.tsx
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: BSD-3-Clause
  */
 
-import {useProvider} from '@clayui/core';
+import {useProvider} from '@clayui/provider';
 import classNames from 'classnames';
 import React from 'react';
 import {createPortal} from 'react-dom';

From cfd5d5f4393da4976948b2fd0aecf20a741cc639 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Matuzal=C3=A9m=20Teles?= <matuzalemteles@gmail.com>
Date: Wed, 28 Jul 2021 12:33:28 -0300
Subject: [PATCH 09/10] chore(@clayui/provider): add README.md

---
 packages/clay-provider/README.md | 9 +++++++++
 1 file changed, 9 insertions(+)
 create mode 100644 packages/clay-provider/README.md

diff --git a/packages/clay-provider/README.md b/packages/clay-provider/README.md
new file mode 100644
index 0000000000..c5b4aa5af1
--- /dev/null
+++ b/packages/clay-provider/README.md
@@ -0,0 +1,9 @@
+# @clayui/provider
+
+This package provides Provider a component that is at the root of your app to set theme, features, Modal... don't use the package directly instead use `@clayui/core`.
+
+```js
+import {Provider, useProvider} from '@clayui/core';
+```
+
+- [Documentation](https://clayui.com/docs/components/provider.html)
\ No newline at end of file

From 8ef767761fcae428c31f111bc567f3f390019a00 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Matuzal=C3=A9m=20Teles?= <matuzalemteles@gmail.com>
Date: Wed, 28 Jul 2021 12:48:52 -0300
Subject: [PATCH 10/10] chore(@clayui/provider): apply format

---
 packages/clay-provider/README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/clay-provider/README.md b/packages/clay-provider/README.md
index c5b4aa5af1..504a37e6e3 100644
--- a/packages/clay-provider/README.md
+++ b/packages/clay-provider/README.md
@@ -6,4 +6,4 @@ This package provides Provider a component that is at the root of your app to se
 import {Provider, useProvider} from '@clayui/core';
 ```
 
-- [Documentation](https://clayui.com/docs/components/provider.html)
\ No newline at end of file
+-   [Documentation](https://clayui.com/docs/components/provider.html)