@forbetterorworse/shapes-and-lines - npm Package Compare versions

Comparing version 0.1.1 to 0.2.0

.storybook/preview.ts

 import type { Preview } from '@storybook/react'
 
 const preview: Preview = {
+  tags: ['autodocs'],
   parameters: {
@@ -11,2 +12,7 @@ controls: {
     },
+    options: {
+      storySort: {
+        order: ['Components', 'Internal'],
+      },
+    },
   },
@@ -13,0 +19,0 @@ }

package.json

 {
   "name": "@forbetterorworse/shapes-and-lines",
   "description": "A library that provides shape and line components.",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "license": "MIT",
@@ -6,0 +6,0 @@ "repository": {

README.md

@@ -13,4 +13,6 @@ # shapes-and-lines
 
-## Installation
+## Usage
 
+### Installation
+
 To install the library in your project, run:
@@ -20,11 +22,31 @@
 # npm
-npm i shapes-and-lines
+npm i @forbetterorworse/shapes-and-lines
 
 # yarn
-yarn add shapes-and-lines
+yarn add @forbetterorworse/shapes-and-lines
 
 # pnpm
-pnpm add shapes-and-lines
+pnpm add @forbetterorworse/shapes-and-lines
 ```
 
+### Using the components
+
+```tsx
+import {
+  Shapes,
+  CurvedLines,
+  Polylines,
+} from '@forbetterorworse/shapes-and-lines'
+
+const MyApp = () => {
+  return (
+    <>
+      <Shapes />
+      <CurvedLines />
+      <Polylines />
+    </>
+  )
+}
+```
+
 ## Development
@@ -31,0 +53,0 @@

src/constants.ts

@@ -0,4 +1,5 @@
+export const SHAPE_TYPES = ['circle', 'square', 'triangle'] as const
 export const MAX_MARGIN = 30
 export const COLORS = ['#eb5353', '#efbb00', '#36ae7c', '#187498']
-export const VIEWBOX_SIZE = 200
+export const VIEW_BOX_SIZE = 200
 
@@ -5,0 +6,0 @@ /** A polyline requires at least two points */

src/randomizers.ts

@@ -8,3 +8,3 @@ import sample from 'lodash/sample'
   MIN_POINTS_PER_POLYLINE,
-  VIEWBOX_SIZE,
+  VIEW_BOX_SIZE,
 } from './constants'
@@ -26,4 +26,5 @@
 
-// The divisor is 1 so that the coordinates can spread the entire SVG size
-export const randomCoordinate = (max = VIEWBOX_SIZE) =>
+// The divisor is 1 so that the coordinates can spread the entire SVG size.
+// Adjust the value if the display is not desirable.
+export const randomCoordinate = (max = VIEW_BOX_SIZE) =>
   Math.floor(Math.random() * (max / 1))
@@ -30,0 +31,0 @@

No alert changes

Improved metrics

Total package byte prevSize

26210

increased by4.68%

Lines of code

688

increased by2.38%

Number of lines in readme file

82

increased by36.67%

No dependency changes