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

@@ -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"

packages/clay-core/CHANGELOG.md

@@ -0,0 +1 @@
+# Change Log

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"
+	]
+}

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';

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';

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);
+};

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>
+));

packages/clay-core/tsconfig.declarations.json

@@ -0,0 +1,7 @@
+{
+	"compilerOptions": {
+		"declarationDir": "./lib"
+	},
+	"extends": "../../tsconfig.declarations.json",
+	"include": ["src"]
+}

packages/clay-core/tsconfig.json

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