feat: support typescript

.github/workflows/main.yml

@@ -0,0 +1,32 @@
+name: CI
+on: [push]
+jobs:
+  build:
+    name: Build, lint, and test on Node ${{ matrix.node }} and ${{ matrix.os }}
+
+    runs-on: ${{ matrix.os }}
+    strategy:
+      matrix:
+        node: ['10.x', '12.x', '14.x']
+        os: [ubuntu-latest, windows-latest, macOS-latest]
+
+    steps:
+      - name: Checkout repo
+        uses: actions/checkout@v2
+
+      - name: Use Node ${{ matrix.node }}
+        uses: actions/setup-node@v1
+        with:
+          node-version: ${{ matrix.node }}
+
+      - name: Install deps and build (with cache)
+        uses: bahmutov/npm-install@v1
+
+      - name: Lint
+        run: yarn lint
+
+      - name: Test
+        run: yarn test --ci --coverage --maxWorkers=2
+
+      - name: Build
+        run: yarn build

.github/workflows/size.yml

@@ -0,0 +1,12 @@
+name: size
+on: [pull_request]
+jobs:
+  size:
+    runs-on: ubuntu-latest
+    env:
+      CI_JOB_NUMBER: 1
+    steps:
+      - uses: actions/checkout@v1
+      - uses: andresz1/size-limit-action@v1
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}

.gitignore

@@ -1,7 +1,6 @@
-/coverage
-/demo/dist
-/es
-/lib
-/node_modules
-/umd
-npm-debug.log*
+*.log
+.DS_Store
+node_modules
+.cache
+dist
+.vscode

LICENSE.md → LICENSE

@@ -1,6 +1,6 @@
-The MIT License (MIT)
+MIT License
 
-Copyright (c) 2019 Smakosh
+Copyright (c) 2020 smakosh
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
@@ -18,4 +18,4 @@ 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.
+SOFTWARE.

README.md

@@ -32,10 +32,14 @@ These docs are inspired by reactjs-popup docs
 | Option               | Default           | Type           | Description                                                                                                                                                                                                                                                           |
 | -------------------- | ----------------- | -------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | align              | center                  | {string}    | The way you want to align your items (`align-items`)
+| justifyContent              | space-between                  | {string}    |
 | col                 |                  | {number}         | depends if you have like 5 elements and each one takes 4 out of 12 of space, will explain this more on a blog post
 | colTablet                 |                  | {number}         | Same as col but on Tablet
 | colMobile                 |                  | {number}         | Same as col but on Mobile
-| as                 | div                  | {string, Component}         | https://www.styled-components.com/docs/api#as-polymorphic-prop
+| gap                 | 1             | {number}            | Gap applies between elements, use it only when you have like 5 elements and each one takes 4 out of 12 of space, to be documented better.
+| gabTablet                 | 1             | {number}            | Same as `gap` but for tablet
+| gapMobile                 | 1             | {number}            | Same as `gap` but for mobile
+| as                 | div                  | {string, Component}         | <https://www.styled-components.com/docs/api#as-polymorphic-prop>
 | className                 |                   | {string}         | you can add a className and style the component the way you wish
 | style                 |                   | {object}         | you can pass in CSS in JS directly
 
@@ -44,12 +48,14 @@ These docs are inspired by reactjs-popup docs
 | Option               | Default           | Type           | Description                                                                                                                                                                                                                                                           |
 | -------------------- | ----------------- | -------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | gap              | 1                  | {number}    | The gap value between your elements, 1 is highly recommended (it's not valid when your element takes 12 out of 12 of space)
+| gabTablet                 | 1             | {number}            | Same as `gap` but for tablet
+| gapMobile                 | 1             | {number}            | Same as `gap` but for mobile
 | col              | 1                  | {number}    | How many columns out of 12 your item will take on desktop
 | colTablet              | 1                  | {number}    | How many columns out of 12 your item will take on tablet
 | colMobile                 | 1                  | {number}         | How many columns out of 12 your item will take on mobile
 | marginBottom              | `10px` on mobile                  | {number}    | Margin bottom of your item, last item always has 0 on mobile
 | stretch                 | false                  | {bool}         | Whether you want the items to have the same height or not
-| as                 | div                  | {string, Component}         | https://www.styled-components.com/docs/api#as-polymorphic-prop
+| as                 | div                  | {string, Component}         | <https://www.styled-components.com/docs/api#as-polymorphic-prop>
 | className                 |                   | {string}         | you can add a className and style the component the way you wish
 | style                 |                   | {object}         | you can pass in CSS in JS directly
 
@@ -68,11 +74,14 @@ This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md
 
 ## Todo
 
-- [ ] convert CSS in JS to vanilla CSS and remove styled-components
-- [ ] Migrate to TypeScript
+- [x] convert CSS in JS to vanilla CSS and remove styled-components
+
+> CSS only alternative: <https://codepen.io/Smakosh/pen/JjXpamp>
+
+- [x] Migrate to TypeScript
 
 ## Support
 
-If you love this React component and want to support me, you can do so through my Patreon
+If you love this React component and want to support me, you can do so through my Patreon or GitHub sponsors.
 
 [![Support me on Patreon](https://c5.patreon.com/external/logo/become_a_patron_button.png)](https://www.patreon.com/smakosh)

example/.npmignore

@@ -0,0 +1,3 @@
+node_modules
+.cache
+dist

demo/src/example.json → example/example.ts

@@ -1,4 +1,4 @@
-[
+export default [
   {
     "columns": 1
   },

example/index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <title>Playground</title>
+  </head>
+
+  <body>
+    <div id="root"></div>
+    <script src="./index.tsx"></script>
+  </body>
+</html>

example/index.tsx

@@ -0,0 +1,42 @@
+import 'react-app-polyfill/ie11';
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import { Flex, Item } from '../.'
+import myList from './example'
+
+const App = () => (
+  <div
+  style={{
+    maxWidth: 960,
+    margin: "0 auto"
+  }}
+>
+  <h1>Example</h1>
+  <Flex col={4}>
+    {myList.map(({ columns }, i: number) => (
+      <Item
+        key={i}
+        col={columns}
+        colTablet={6}
+        colMobile={12}
+        gap={1}
+        marginBottom={30}
+        stretch
+      >
+        <div
+          style={{
+            textAlign: "center",
+            width: "100%",
+            border: "1px solid #eee",
+            background: "#eee"
+          }}
+        >
+          <h1>{columns}</h1>
+        </div>
+      </Item>
+    ))}
+  </Flex>
+</div>
+)
+
+ReactDOM.render(<App />, document.getElementById('root'));

example/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "example",
+  "version": "1.0.0",
+  "main": "index.js",
+  "license": "MIT",
+  "scripts": {
+    "start": "parcel index.html",
+    "build": "parcel build index.html"
+  },
+  "dependencies": {
+    "react-app-polyfill": "^1.0.0"
+  },
+  "alias": {
+    "react": "../node_modules/react",
+    "react-dom": "../node_modules/react-dom/profiling",
+    "scheduler/tracing": "../node_modules/scheduler/tracing-profiling"
+  },
+  "devDependencies": {
+    "@types/react": "^16.9.11",
+    "@types/react-dom": "^16.8.4",
+    "parcel": "^1.12.3",
+    "typescript": "^3.4.5"
+  }
+}

example/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "allowSyntheticDefaultImports": false,
+    "target": "es5",
+    "module": "commonjs",
+    "jsx": "react",
+    "moduleResolution": "node",
+    "noImplicitAny": false,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "removeComments": true,
+    "strictNullChecks": true,
+    "preserveConstEnums": true,
+    "sourceMap": true,
+    "lib": ["es2015", "es2016", "dom"],
+    "types": ["node"],
+    "resolveJsonModule": true,
+    "esModuleInterop": true
+  }
+}