Typescript + Docusaurus (#181)

* chore: configure typescript and docusaurus

* chore: bump package version

* chore: change travis node version and remove old workflow

* feat: add reasons and some adjustments

* feat: add a try demo button

* chore: create npm publish workflow

* fix: try a demo button spacing

* fix: try a demo button spacing again

* chore: remove useless dependencies

* fix: styles

* fix: home styles

* chore: update github workflow

* chore: fix workflow

* chore: remove types folder

* chore: add types on gitignore

* chore: some adjustments with types and paths

* docs: update demo

* fix: livecode blocks

.editorconfig

@@ -0,0 +1,16 @@
+# EditorConfig helps developers define and maintain
+# consistent coding styles between different editors and IDEs.
+
+root = true
+
+[*]
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+indent_style = space
+indent_size = 2
+quote_type = single
+
+[*.md]
+trim_trailing_whitespace = false

.eslintrc

@@ -0,0 +1,30 @@
+{
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaVersion": 12,
+    "sourceType": "module"
+  },
+  "plugins": ["@typescript-eslint"],
+  // HERE
+  "extends": [
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:react/jsx-runtime",
+    "prettier"
+  ],
+
+  "rules": {
+    "@typescript-eslint/no-unused-vars": "error",
+    "@typescript-eslint/consistent-type-definitions": ["error", "type"]
+  },
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  },
+  "env": {
+    "browser": true,
+    "jest": true
+  }
+}

.github/workflows/publish.yml

@@ -0,0 +1,22 @@
+name: Publish to NPM
+on:
+  release:
+    types: [created]
+
+jobs:
+  publish:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v3
+        with:
+          node-version: "18"
+      - name: Setup and install dependencies
+        run: |
+          npm i -g corepack
+          yarn install
+      - name: Build library 🔧
+        run: yarn build
+      - uses: JS-DevTools/npm-publish@v3
+        with:
+          token: ${{ secrets.NPM_TOKEN }}

.gitignore

@@ -1,6 +1,7 @@
 .docz
-lib
+# lib
 dist
+/types
 .DS_Store
 # Logs
 logs
@@ -63,3 +64,28 @@ typings/
 
 # next.js build output
 .next
+
+# Dependencies
+/node_modules
+
+# Production
+/build
+
+# Generated files
+.docusaurus
+.cache-loader
+
+# Misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+#rollup
+.rollup.cache
+

.prettierrc

@@ -0,0 +1,5 @@
+{
+  "semi": true,
+  "trailingComma": "none",
+  "singleQuote": false
+}

.travis.yml

@@ -1,11 +1,10 @@
-language: 
-  node_js
+language: node_js
 node_js:
-  - "12"
+  - "18"
 install:
   - npm install -g codecov
   - npm install
 script:
   - npm test
 after_success:
-  - codecov
+  - codecov

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "typescript.tsdk": "node_modules/typescript/lib"
+}

README.md

@@ -1,15 +1,15 @@
 [![npm version](https://badge.fury.io/js/react-awesome-styled-grid.svg)](https://www.npmjs.com/package/react-awesome-styled-grid)
 [![All Contributors](https://img.shields.io/badge/all_contributors-6-orange.svg?style=flat-square)](#contributors)
-[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/) 
+[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)
 [![js-standard-style](https://img.shields.io/badge/code%20style-standard-brightgreen.svg)](http://standardjs.com)
 [![codecov](https://codecov.io/gh/santosfrancisco/react-awesome-styled-grid/branch/master/graph/badge.svg)](https://codecov.io/gh/santosfrancisco/react-awesome-styled-grid)
 [![Build Status](https://travis-ci.org/santosfrancisco/react-awesome-styled-grid.svg?branch=master)](https://travis-ci.org/santosfrancisco/react-awesome-styled-grid)
 ![Publish](https://github.com/santosfrancisco/react-awesome-styled-grid/workflows/Publish/badge.svg)
 [![Netlify Status](https://api.netlify.com/api/v1/badges/47a9c7f7-444d-4df9-bc7b-10cb06265ed7/deploy-status)](https://app.netlify.com/sites/awesome-styled-grid/deploys)
 
-| Build History |
-| :--------- |
-| [![Build Status](https://travis-ci.org/santosfrancisco/react-awesome-styled-grid.svg?branch=master)](https://travis-ci.org/santosfrancisco/react-awesome-styled-grid) |
+| Build History                                                                                                                                                                                                          |
+| :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| [![Build Status](https://travis-ci.org/santosfrancisco/react-awesome-styled-grid.svg?branch=master)](https://travis-ci.org/santosfrancisco/react-awesome-styled-grid)                                                  |
 | [![Build history](https://buildstats.info/travisci/chart/santosfrancisco/react-awesome-styled-grid?branch=master&includeBuildsFromPullRequest=false)](https://travis-ci.org/santosfrancisco/react-awesome-styled-grid) |
 
 # React Awesome Styled Grid 😎
@@ -36,36 +36,44 @@ Click [here](https://awesome-styled-grid.netlify.com/) for documentation
 
 ## Basic usage
 
-This grid system is based on [Google Material Design](https://material.io/design/layout/responsive-layout-grid.html). 
+This grid system is based on [Google Material Design](https://material.io/design/layout/responsive-layout-grid.html).
 
 Number of columns: **xs**: 4, **sm**: 8, **md**: 8, **lg**: 12, **xl**: 12
-  
+
 Breakpoints size: **xs**: 1rem, **sm**: 48rem, **md**: 64rem, **lg**: 90rem, **xl**: 120rem
 
 > for a custom configuration, [see this section](https://awesome-styled-grid.netlify.com/custom) of documentation
+
 ```js
-import { Container, Row, Col } from 'react-awesome-styled-grid'
+import { Container, Row, Col } from "react-awesome-styled-grid";
 
 const MyCoolComponent = () => (
   <Container>
     <Row>
-      <Col xs={4} md={2} >Col A</Col>
-      <Col xs={6} md={10}>Col B</Col>
+      <Col xs={4} md={2}>
+        Col A
+      </Col>
+      <Col xs={6} md={10}>
+        Col B
+      </Col>
     </Row>
   </Container>
-)
+);
 ```
 
 ## Development
-run ```yarn install``` or ```npm install``` to install all dependencies
 
-run ```yarn docz dev``` or ```npm run docz:dev``` to run Docz on port 4000
+run `yarn install` or `npm install` to install all dependencies
+
+run `yarn start` or `npm run start` to run Docusaurus on port 3000
+
+Go to [http://localhost:3000/demo](http://localhost:3000/demo) to see live demo and edit [Demo.tsx](src/pages/demo.tsx) file
 
 ## Built With
 
-* [Styled-components](https://github.com/styled-components) - Visual primitives for the component age.
-* [Docz](https:://docz.site) - It's never been easier to document your things
-* [Rollup](https://rollupjs.org/guide/en) - Rollup is a module bundler for JavaScript
+- [Styled-components](https://github.com/styled-components) - Visual primitives for the component age.
+- [Docusaurus](https:://docusaurus.io) - Build optimized websites quickly, focus on your content
+- [Rollup](https://rollupjs.org/guide/en) - Rollup is a module bundler for JavaScript
 
 ## Contributing
 
@@ -87,4 +95,4 @@ Thanks goes to these wonderful people ([emoji key](https://github.com/kentcdodds
 
 <!-- ALL-CONTRIBUTORS-LIST:END -->
 
-This project follows the [all-contributors](https://github.com/kentcdodds/all-contributors) specification. Contributions of any kind welcome!
+This project follows the [all-contributors](https://github.com/kentcdodds/all-contributors) specification. Contributions of any kind welcome!

babel.config.cjs

@@ -0,0 +1,13 @@
+module.exports = {
+  presets: [
+    ["@babel/preset-env", { targets: { node: "current" } }],
+    ["@babel/preset-react"],
+    "@babel/preset-typescript",
+    "@docusaurus/core/lib/babel/preset"
+  ],
+  plugins: [
+    "@babel/plugin-proposal-object-rest-spread",
+    "transform-class-properties",
+    "babel-plugin-styled-components"
+  ]
+};

blog/2021-08-26-welcome/index.md

@@ -0,0 +1,25 @@
+---
+slug: welcome
+title: Welcome
+authors: [santosfrancisco]
+tags: [react, styled-components]
+---
+
+[Docusaurus blogging features](https://docusaurus.io/docs/blog) are powered by the [blog plugin](https://docusaurus.io/docs/api/plugins/@docusaurus/plugin-content-blog).
+
+Simply add Markdown files (or folders) to the `blog` directory.
+
+Regular blog authors can be added to `authors.yml`.
+
+The blog post date can be extracted from filenames, such as:
+
+- `2019-05-30-welcome.md`
+- `2019-05-30-welcome/index.md`
+
+A blog post folder can be convenient to co-locate blog post images:
+
+![Docusaurus Plushie](./docusaurus-plushie-banner.jpeg)
+
+The blog supports tags as well!
+
+**And if you don't want a blog**: just delete this directory, and use `blog: false` in your Docusaurus config.

blog/authors.yml

@@ -0,0 +1,5 @@
+santosfrancisco:
+  name: Francisco Santos
+  title: Maintainer of RASG
+  url: https://github.com/santosfrancisco
+  image_url: https://github.com/santosfrancisco.png