Fixes liferay#1829 - Set up structure of component

diegonvs · May 27, 2019 · 9d63426 · 9d63426
1 parent f94924d
commit 9d63426
Show file tree

Hide file tree

Showing 10 changed files with 162 additions and 0 deletions.
diff --git a/packages/clay-modal/README.md b/packages/clay-modal/README.md
@@ -0,0 +1,25 @@
+# clay-modal
+
+ClayModal component
+
+## Setup
+
+1. Install `yarn`
+
+2. Install local dependencies:
+
+```
+yarn
+```
+
+3. Build the code:
+
+```
+yarn start
+```
+
+4. Open the demo at `localhost:8080` on your browser.
+
+## Contribute
+
+We'd love to get contributions from you! Please, check our [Contributing Guidelines](https://github.com/liferay/clay/blob/master/CONTRIBUTING.md) to see how you can help us improve.
diff --git a/packages/clay-modal/demo/App.tsx b/packages/clay-modal/demo/App.tsx
@@ -0,0 +1,21 @@
+/**
+ * © 2019 Liferay, Inc. <https://liferay.com>
+ *
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import ClayModal from '../src/ClayModal';
+
+import 'clay-css/lib/css/atlas.css';
+
+const App: React.FunctionComponent = () => {
+	return (
+		<div>
+			<ClayModal />
+		</div>
+	);
+};
+
+ReactDOM.render(<App />, document.getElementById('root'));
diff --git a/packages/clay-modal/demo/index.html b/packages/clay-modal/demo/index.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html lang="en">
+	<body style="margin: 48px;">
+		<div id="root"></div>
+	</body>
+</html>
diff --git a/packages/clay-modal/package.json b/packages/clay-modal/package.json
@@ -0,0 +1,31 @@
+{
+	"name": "@clayui/modal",
+	"version": "3.0.0",
+	"description": "ClayModal component",
+	"license": "BSD-3-Clause",
+	"repository": "https://github.com/liferay/clay/tree/master/packages/clay-modal",
+	"engines": {
+		"node": ">=0.12.0",
+		"npm": ">=3.0.0"
+	},
+	"main": "lib/ClayModal.js",
+	"esnext:main": "src/ClayModal.js",
+	"jsnext:main": "src/ClayModal.js",
+	"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": "npm run build && npm run build:types",
+		"start": "webpack-dev-server --mode development",
+		"test": "jest --config ../../jest.config.js"
+	},
+	"keywords": ["clay", "react"],
+	"dependencies": {
+		"classnames": "^2.2.6"
+	},
+	"peerDependencies": {
+		"react": "^16.8.1",
+		"react-dom": "^16.8.1"
+	},
+	"browserslist": ["extends browserslist-config-clay"]
+}
diff --git a/packages/clay-modal/src/ClayModal.tsx b/packages/clay-modal/src/ClayModal.tsx
@@ -0,0 +1,21 @@
+/**
+ * © 2019 Liferay, Inc. <https://liferay.com>
+ *
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+
+import * as React from 'react';
+import classNames from 'classnames';
+
+interface Props extends React.HTMLAttributes<HTMLDivElement> {}
+
+const ClayModal: React.FunctionComponent<Props> = ({
+	className,
+	...otherProps
+}) => {
+	return (
+		<div {...otherProps} className={classNames(className)}>{'ClayModal'}</div>
+	);
+};
+
+export default ClayModal;
diff --git a/packages/clay-modal/src/__tests__/ClayModal.tsx b/packages/clay-modal/src/__tests__/ClayModal.tsx
@@ -0,0 +1,19 @@
+/**
+ * © 2019 Liferay, Inc. <https://liferay.com>
+ *
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+
+import * as React from 'react';
+import * as TestRenderer from 'react-test-renderer';
+import ClayModal from '../ClayModal';
+
+describe('ClayModal', () => {
+	it('renders', () => {
+		const testRenderer = TestRenderer.create(
+			<ClayModal />
+		);
+
+		expect(testRenderer.toJSON()).toMatchSnapshot();
+	});
+});
diff --git a/packages/clay-modal/src/__tests__/__snapshots__/ClayModal.tsx.snap b/packages/clay-modal/src/__tests__/__snapshots__/ClayModal.tsx.snap
@@ -0,0 +1 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
diff --git a/packages/clay-modal/tsconfig.declarations.json b/packages/clay-modal/tsconfig.declarations.json
@@ -0,0 +1,8 @@
+{
+	"compilerOptions": {
+		"declarationDir": "./lib"
+	},
+	"extends": "../../tsconfig.declarations.json",
+	"include": ["src"],
+	"exclude": ["**/__tests__/**"]
+}
diff --git a/packages/clay-modal/tsconfig.json b/packages/clay-modal/tsconfig.json
@@ -0,0 +1,4 @@
+{
+	"extends": "../../tsconfig.json",
+	"include": ["src"]
+}
diff --git a/packages/clay-modal/webpack.config.js b/packages/clay-modal/webpack.config.js
@@ -0,0 +1,26 @@
+/**
+ * © 2019 Liferay, Inc. <https://liferay.com>
+ *
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+
+const path = require('path');
+const HWP = require('html-webpack-plugin');
+
+module.exports = {
+	entry: path.join(__dirname, 'demo/App.tsx'),
+	module: {
+		rules: [
+			{loader: 'awesome-typescript-loader', test: /\.tsx?$/},
+			{enforce: 'pre', loader: 'source-map-loader', test: /\.js$/},
+			{
+				test: /\.css$/,
+				use: ['style-loader', 'css-loader'],
+			},
+		],
+	},
+	plugins: [new HWP({template: path.join(__dirname, './demo/index.html')})],
+	resolve: {
+		extensions: ['.ts', '.tsx', '.js', '.json'],
+	},
+};