sccoreui 0.0.1 → 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Igor Gaponov (gapon2401)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,60 @@
+# my-react-typescript-package
+
+[![NPM version][npm-image]][npm-url]
+[![Build][github-build]][github-build-url]
+![npm-typescript]
+[![License][github-license]][github-license-url]
+
+This repo is the example of the article ["How to create and publish React Typescript npm package with demo and automated build"](https://medium.com/@igaponov/how-to-create-and-publish-react-typescript-npm-package-with-demo-and-automated-build-80c40ec28aca).
+
+You can clone it and step by step create your own NPM package and publish it.
+
+It is simple React counter.
+
+[**Live Demo**](https://gapon2401.github.io/my-react-typescript-package/)
+
+## Installation:
+
+```bash
+npm install my-react-typescript-package --save-dev
+```
+
+or
+
+```bash
+yarn add -D my-react-typescript-package
+```
+
+## Usage :
+
+Add `MyCounter` to your component:
+
+```js
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import { MyCounter } from 'my-react-typescript-package'
+
+const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement)
+root.render(
+    <React.StrictMode>
+        <div>
+            <h2>Default counter</h2>
+            <MyCounter />
+        </div>
+        <hr />
+        <div>
+            <h2>Counter with predefined value</h2>
+            <MyCounter value={5} />
+        </div>
+    </React.StrictMode>,
+)
+
+```
+
+[npm-url]: https://www.npmjs.com/package/my-react-typescript-package
+[npm-image]: https://img.shields.io/npm/v/my-react-typescript-package
+[github-license]: https://img.shields.io/github/license/gapon2401/my-react-typescript-package
+[github-license-url]: https://github.com/gapon2401/my-react-typescript-package/blob/master/LICENSE
+[github-build]: https://github.com/gapon2401/my-react-typescript-package/actions/workflows/publish.yml/badge.svg
+[github-build-url]: https://github.com/gapon2401/my-react-typescript-package/actions/workflows/publish.yml
+[npm-typescript]: https://img.shields.io/npm/types/my-react-typescript-package

package/dist/App.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+require("./App.scss");
+// import Home from '../pages/home';
+const App = () => {
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement("div", null)));
+};
+exports.default = App;

package/dist/App.scss

@@ -0,0 +1,61 @@
+@import url('./assets/theme.css');
+@import url('./assets/sccoreui.css');
+@import url('./assets/sccoreicons.css');
+@import url('./assets/flex.css');
+
+:root {
+  --fw-600: 600;
+  --fw-400: 400;
+  --fs-24: 24px;
+  --fs-18: 18px;
+  --fs-16: 16px;
+  --lh:24px;
+  --fs-14:14px;
+  --grey-bg:#101828;
+  --border-none: border-none;
+}
+
+@font-face {
+  font-family: 'Lato-400';
+  font-weight: 400;
+  src: url('./assets/fonts/Lato-Regular.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'Lato-600';
+  font-weight: 600;
+  src: url('./assets/fonts/Lato-Regular.ttf') format('truetype');
+}
+
+
+body {
+  margin: 0;
+  font-family: 'Lato-400', sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  line-height: var(--lh);
+}
+
+code {
+  font-family: 'Lato-400', monospace;
+}
+
+h1 {
+  font-size: var(--fs-24);
+  font-weight: var(--fw-600);
+}
+
+h2 {
+  font-size: var(--fs-18);
+  font-weight: var(--fw-600);
+}
+
+h3 {
+  font-size: var(--fs-16);
+  font-weight: var(--fw-400);
+}
+
+// p {
+//   font-size: var(--fs-16);
+//   font-weight: var(--fw-400);
+// }