feat(@clayui/core): Add Provider component and the new @clayui/core package

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')) {

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,43 @@
+{
+	"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.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/button": "^3.6.0",
+		"@clayui/drop-down": "^3.30.0",
+		"@clayui/icon": "^3.1.0",
+		"@clayui/modal": "^3.29.0",
+		"@clayui/provider": "^3.0.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,21 @@
+/**
+ * SPDX-FileCopyrightText: © 2021 Liferay, Inc. <https://liferay.com>
+ * 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,
+	Context as ModalContext,
+	useModal,
+} from '@clayui/modal';
+export {Provider, useProvider} from '@clayui/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"]
+}

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"

packages/clay-provider/CHANGELOG.md

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

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)

packages/clay-provider/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-provider/src/Provider.tsx"]</div>

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

packages/clay-provider/src/Provider.tsx

@@ -0,0 +1,47 @@
+/**
+ * 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 {
+	/**
+	 * The content of the Provider.
+	 */
+	children: React.ReactNode;
+
+	/**
+	 * Path to the location of the spritemap resource.
+	 */
+	spritemap: string;
+}
+
+interface IProviderContext {
+	/**
+	 * The theme corresponds to a CSS class to scope the application.
+	 */
+	theme?: string;
+}
+
+const Context = React.createContext<IProviderContext>({});
+
+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-provider/src/index.ts

@@ -0,0 +1,6 @@
+/**
+ * SPDX-FileCopyrightText: © 2021 Liferay, Inc. <https://liferay.com>
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+
+export * from './Provider';

packages/clay-provider/stories/Provider.stories.tsx

@@ -0,0 +1,49 @@
+/**
+ * SPDX-FileCopyrightText: © 2021 Liferay, Inc. <https://liferay.com>
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+
+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 {Provider} from '../src';
+
+storiesOf('Components|ClayProvider', 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>
+		);
+	});

packages/clay-provider/tsconfig.declarations.json

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