Merge pull request #38 from heyjul3s/docs/readme-updates

Docs/readme updates

README.md

@@ -23,7 +23,6 @@ npm install artifak
 
 Packages can also be installed independently. Simply do `yarn add <package name>` or `npm install <package name>` to add them to your list of dependencies. Below is a list of available packages.
 
-- @artifak/**block**
 - @artifak/**grid**
 - @artifak/**typography**
 - @artifak/**flex**

packages/block/README.md

@@ -1,4 +1,4 @@
-# `@artifak/block`
+# `@artifak/block` (Deprecated from v2.0.0)
 
 Block is a basic block component that acts as a base to your UI components. You can also view the docs
 at [Artifak Block](https://www.artifak.dev/?content=Block).

packages/fluidsizing/README.md

@@ -1,3 +1,39 @@
 # `@artifak/fluidsizing`
 
-A utility function that computes a fluid sizing value based on the min and max values provided. Refer to the **Artifak Fluid Sizing[Artifak](https://artifak.dev/docs?content=fluidsizing)** for more information.
+A utility function that computes a fluid sizing value based on the min and max values provided.
+
+## Installation
+
+### Yarn
+
+```sh
+yarn add @artifak/fluidsizing
+```
+
+### NPM
+
+```sh
+npm install @artifak/fluidsizing
+```
+
+## Usage
+
+Below are the parameters and the following an example of usage.
+
+| Arguments        | Type   |
+| ---------------- | ------ |
+| minElementSize   | number |
+| maxElementSize   | number |
+| minViewportWidth | number |
+| maxViewportWidth | number |
+
+```ts
+import { fluidSizing } from '@artifak/fluidsizing';
+import styled from 'styled-components';
+
+const Paragraph = styled.p`
+  font-size: ${fluidSizing(16, 96, 300, 1200)};
+  line-height: ${fluidSizing(1.4, 1.6, 300, 1200)};
+  padding-bottom: ${fluidSizing(10, 15, 300, 1200)};
+`;
+```

packages/typography/README.md

@@ -19,7 +19,7 @@ npm install @artifak/typography
 
 ## Usage
 
-### createTypographyComponents
+### createTypography
 
 To generate your typography components, simply define a styles object with the key as your component name. Note that you **must** define the `as` property in order to have it render as the HTML tag that you desire. In the example below, we've defined a component called `H1` to render as an `h1` HTML tag. We've also defined the fontSize in an array that matches the media query widths.
 
@@ -28,37 +28,31 @@ To generate your typography components, simply define a styles object with the k
 | styles    | object |
 
 ```ts
-import { createTypographyComponents } from '@artifak/typography';
+import { createTypography } from '@artifak/typography';
 
 const typeStyles = {
   H1: {
     fontSize: [16, 36, 96],
     margin: 0,
-    as: 'h1',
-  },
+    as: 'h1'
+  }
 };
 
-const { H1 } = createTypographyComponents<typeof typeStyles>(typeStyles);
+const { H1 } = createTypography<typeof typeStyles>(typeStyles);
 ```
 
 Other than helping you generate new typography components, it also contains other utility functions as well to help you in styling.
 
-### fluidSizing
+### fontWeight
 
-This utility function calculates the sizing value dynamically within the passed in min/max constraints without need for media queries.
-
-| Arguments        | Type   |
-| ---------------- | ------ |
-| minElementSize   | number |
-| maxElementSize   | number |
-| minViewportWidth | number |
-| maxViewportWidth | number |
+A constant of font weights for use. An example usage is as per below:
 
 ```ts
+import { fontWeight } from 'artifak';
 import styled from 'styled-components';
 
-const Paragraph = styled.p`
-  font-size: ${fluidSizing(16, 96, 300, 1200)};
-  line-height: ${fluidSizing(1.4, 1.6, 300, 1200)};
+export const theme = styled.p`
+  font-size: 16px;
+  font-weight: ${fontWeight.BOLD};
 `;
 ```

packages/usematchmedia/README.md

@@ -1,3 +1,36 @@
 # `@artifak/usematchmedia`
 
-A React hook that allows you to perform media queries within your React component. Refer to the **Artifak Fluid Sizing[Artifak](https://artifak.dev/docs?content=usematchmedia)** for more information.
+A React hook that allows you to perform media queries within your React component.
+
+## Installation
+
+### Yarn
+
+```sh
+yarn add @artifak/usematchmedia
+```
+
+### NPM
+
+```sh
+npm install @artifak/usematchmedia
+```
+
+## Usage
+
+```ts
+import { useMatchMedia } from 'artifak';
+import { ExampleMobile } from './ExampleMobile';
+import { ExampleDesktop } from './ExampleDesktop';
+
+export function Nav() {
+  const matchedMobile = useMatchMedia('(hover: none)');
+
+  return (
+    <>
+      {matchedMobile && <ExampleMobile />}
+      {!matchedMobile && <ExampleDesktop />}
+    </>
+  );
+}
+```

packages/usewindowsize/README.md

@@ -1,3 +1,36 @@
 # `@artifak/usewindowsize`
 
-A React hook that allows you to get the window dimensions within your React component. Refer to the **Artifak Fluid Sizing[Artifak](https://artifak.dev/docs?content=usewindowsize)** for more information.
+A React hook that allows you to get the window dimensions within your React component. Returns an object consisting of properties: innerWidth, innerHeight, outerWidth and outerHeight.
+
+## Installation
+
+### Yarn
+
+```sh
+yarn add @artifak/usewindowsize
+```
+
+### NPM
+
+```sh
+npm install @artifak/usewindowsize
+```
+
+## Usage
+
+```ts
+import { useWindowSize } from 'artifak';
+import { ExampleMobile } from './ExampleMobile';
+import { ExampleDesktop } from './ExampleDesktop';
+
+export function Nav() {
+  const windowSize = useWindowSize();
+
+  return (
+    <>
+      {windowSize.innerWidth < 1000 && <ExampleMobile />}
+      <ExampleDesktop />
+    </>
+  );
+}
+```