v0.2.2

fixed console errors added thead and tbody tags to fix DOM node parity error added Text component to layout context added SEO updated readme added description frontmatter to MDX source files, closes #2 fixed console errors added thead and tbody tags to fix DOM node parity error added Text component to layout context added shadow props added box and text shadow props updated margins on nav menu updated documentation with shadow props added textStart and textEnd props added Card component and prefab documentation page (#15) changed import order updated getting started page and nav menu ordering, fixed incorrect DocLink updated layout formatting updated card styles updated README updated features list for parity with README v0.2.2
coopbri · Nov 11, 2020 · 2f94041 · 2f94041
1 parent f86fd2b
commit 2f94041
Show file tree

Hide file tree

Showing 26 changed files with 195 additions and 77 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,8 @@
+## 0.2.2 (11 November 2020)
+- Added `textStart` and `textEnd` props
+- Added shadow props (`boxShadow` and `textShadow`)
+- Added `Card` prefab
+
 ## 0.2.1 (2 November 2020)
 - Added declarative props for margin and padding
 - Fixed typo in padding prop CSS

diff --git a/README.md b/README.md
@@ -6,22 +6,32 @@
 
 <hr>
 
+<div align="center">
+
+[![license](https://img.shields.io/npm/l/shakti-lib?color=%2399ffff)](https://github.com/coopbri/shakti/blob/master/LICENSE.md) [![npm](https://img.shields.io/npm/v/shakti-lib?color=ccffcc)](https://www.npmjs.com/package/shakti-lib)
+
+</div>
+
 ### Features
-- Written in TypeScript
-- Tree-shaking support
-- Intuitive grid system based on flexbox
-- Declarative props for HTML and CSS functionality
-- Media utilities to help with responsive layout creation
-- Built on <a href="https://styled-components.com/">styled components</a>, encouraging DRY object composition
+- <b>Strongly-typed:</b> Written in TypeScript
+- <b>Tree-shaking:</b> Modular, lean build supporting dead code elimination
+- <b>Modular:</b> Easily customize HTML and CSS functionality with foundational base components and props
+- <b>Declarative:</b> Clear naming of units based on underlying HTML and CSS functionality
+- <b>Grid:</b> Intuitive grid system based on flexbox
+- <b>Prefabs:</b> Prefabricated, cohesive UI components ready to drop into an application
+- <b>Utilities:</b> Hooks and other utilities to help with responsive layout creation and other UI-driven tasks
+- <b>Thin abstraction:</b> Built on <a href="https://styled-components.com/">styled components</a>, encouraging DRY object composition
 
 ### Installation
 `yarn add shakti-lib` or `npm i shakti-lib`
 
 ### Usage
-See https://shaktilib.com/getting-started
+See https://shaktilib.com/getting-started to get started.
+
+To try Shakti in a live sandbox environment without installing it in a project, see https://shaktilib.com/sandbox.
 
 ### Documentation
-https://shaktilib.com/
+The complete documentation can be seen at https://shaktilib.com.
 
 ### License
 Shakti is licensed under MIT, &copy; Brian Cooper. See <a href="LICENSE.md">LICENSE.md</a> for more information.
diff --git a/docs/src/components/Alert/Alert.tsx b/docs/src/components/Alert/Alert.tsx
@@ -1,13 +1,14 @@
 import React from "react";
-import { Text } from "shakti-lib";
+import { Text, Card } from "shakti-lib";
 
-import { Card } from "../";
 import { theme } from "../../constants";
 
 const Alert = ({ children }) => {
   return (
-    <Card color={theme.colors.red}>
-      <Text color="white">{children}</Text>
+    <Card bgColor={theme.colors.red}>
+      <Text color="white" m={0}>
+        {children}
+      </Text>
     </Card>
   );
 };

diff --git a/docs/src/components/Card/Card.tsx b/docs/src/components/Card/Card.tsx
diff --git a/docs/src/components/CodeBlock/CodeBlock.tsx b/docs/src/components/CodeBlock/CodeBlock.tsx
@@ -11,6 +11,7 @@ import {
   Flex,
   Text,
   Button,
+  Card,
   breakpoints,
   useWindowQuery,
 } from "shakti-lib";
@@ -30,6 +31,7 @@ const scope = {
   Flex,
   Text,
   Button,
+  Card,
   breakpoints,
   useWindowQuery,
 };

diff --git a/docs/src/components/GlobalStyle/GlobalStyle.tsx b/docs/src/components/GlobalStyle/GlobalStyle.tsx
@@ -16,11 +16,6 @@ const cssReset = css`
   a {
     text-decoration: none;
   }
-
-  ul,
-  ol {
-    margin-top: 0;
-  }
 `;
 
 /**
@@ -51,6 +46,10 @@ const GlobalStyle = createGlobalStyle`
     position: unset !important;
   }
 
+  p {
+    margin: 8px 0;
+  }
+
   a {
     color: ${({ theme }) => theme.colors.red};
     font-weight: bold;

diff --git a/docs/src/components/NavMenu/NavMenu.tsx b/docs/src/components/NavMenu/NavMenu.tsx
@@ -20,7 +20,7 @@ const NavMenu = ({ location }) => {
         </NavLink>
       </NavEntry>
 
-      <Divider my={16} />
+      <Divider my={8} />
 
       <NavEntry>
         <NavLink to="/base" location={location}>
@@ -42,16 +42,21 @@ const NavMenu = ({ location }) => {
           Button
         </NavLink>
       </NavEntry>
+      <NavEntry>
+        <NavLink to="/prefabs" location={location}>
+          Prefabs
+        </NavLink>
+      </NavEntry>
 
-      <Divider my={16} />
+      <Divider my={8} />
 
       <NavEntry>
         <NavLink to="/media" location={location}>
           Media
         </NavLink>
       </NavEntry>
 
-      <Divider my={16} />
+      <Divider my={8} />
 
       <NavEntry>
         <NavLink to="/recipes" location={location}>
@@ -64,7 +69,7 @@ const NavMenu = ({ location }) => {
         </NavLink>
       </NavEntry>
 
-      <Divider my={16} />
+      <Divider my={8} />
 
       <NavEntry>
         <ExternalLink

diff --git a/docs/src/components/Remark/Remark.tsx b/docs/src/components/Remark/Remark.tsx
@@ -1,13 +1,12 @@
 import React from "react";
-import { Text } from "shakti-lib";
+import { Text, Card } from "shakti-lib";
 
-import { Card } from "../";
 import { theme } from "../../constants";
 
 const Remark = ({ children }) => {
   return (
-    <Card mb={15} color={theme.colors.purple}>
-      <Text color="white">
+    <Card mb={15} bgColor={theme.colors.purple}>
+      <Text color="white" m={0}>
         📌 <b>Note:</b> {children}
       </Text>
     </Card>

diff --git a/docs/src/components/index.ts b/docs/src/components/index.ts
@@ -1,5 +1,4 @@
 export { Alert } from "./Alert";
-export { Card } from "./Card";
 export { CodeBlock } from "./CodeBlock";
 export { CodeFragment } from "./CodeFragment";
 export { Divider } from "./Divider";

diff --git a/docs/src/constants/shaktiProps.json b/docs/src/constants/shaktiProps.json
@@ -159,6 +159,10 @@
     },
     { "name": "borderLeft", "type": "number or string", "notes": "left border" }
   ],
+  "shadow": [
+    { "name": "boxShadow", "type": "string", "notes": "box shadow" },
+    { "name": "textShadow", "type": "string", "notes": "text shadow" }
+  ],
   "column": [
     {
       "name": "size",
@@ -273,6 +277,8 @@
     { "name": "italic", "type": "boolean", "notes": "italic text" }
   ],
   "textAlign": [
+    { "name": "textStart", "type": "boolean", "notes": "align text to start" },
+    { "name": "textEnd", "type": "boolean", "notes": "align text to end" },
     { "name": "textLeft", "type": "boolean", "notes": "align text to left" },
     {
       "name": "textCenter",

diff --git a/docs/src/content/1-introduction.mdx b/docs/src/content/1-introduction.mdx
@@ -12,9 +12,11 @@ Shakti is a universal component toolkit for React.
 </Alert>
 
 ## Features
-- Written in TypeScript
-- Tree-shaking support
-- Intuitive grid system based on flexbox
-- Declarative props for HTML and CSS functionality
-- Media utilities to help with responsive layout creation
-- Built on <ExternalLink href="https://styled-components.com/" target="_blank" rel="noopener noreferrer">styled components</ExternalLink>, encouraging DRY object composition
+- <b>Strongly-typed:</b> Written in TypeScript
+- <b>Tree-shaking:</b> Modular, lean build supporting dead code elimination
+- <b>Modular:</b> Easily customize HTML and CSS functionality with foundational base components and props
+- <b>Declarative:</b> Clear naming of units based on underlying HTML and CSS functionality
+- <b>Grid:</b> Intuitive grid system based on flexbox
+- <b>Prefabs:</b> Prefabricated, cohesive UI components ready to drop into an application
+- <b>Utilities:</b> Hooks and other utilities to help with responsive layout creation and other UI-driven tasks
+- <b>Thin abstraction:</b> Built on <a href="https://styled-components.com/">styled components</a>, encouraging DRY object composition
diff --git a/docs/src/content/10-sandbox.mdx b/docs/src/content/10-sandbox.mdx
@@ -0,0 +1,28 @@
+---
+index: 10
+title: Sandbox
+description: Sandbox/playground for working with and testing the Shakti library.
+path: /sandbox
+---
+
+The below code editor is live, with full access to Shakti components and props. Give it a try!
+
+```tsx live=true
+<>
+  <Grid alignCenter textCenter>
+      <Row flexCol>
+          <Col px={14} color="green" bgColor="lavender">green 🌲</Col>
+          <Col
+            bgColor="mistyrose"
+            border="5px solid burlywood"
+            borderStyle="dashed"
+            textShadow="2px 2px"
+          >
+            🍄
+          </Col>
+      </Row>
+  </Grid>
+
+  <Card/>
+</>
+```
diff --git a/docs/src/content/2-getting-started.mdx b/docs/src/content/2-getting-started.mdx
@@ -12,11 +12,11 @@ This documentation is broken up into logical parts, and is designed to be access
 - <DocLink to="/base">Base</DocLink> contains an outline of the base props that are accessible in all Shakti components.
 - <DocLink to="/layout">Layout</DocLink> contains details about the various layout components, including the built-in grid system.
 - <DocLink to="/text">Text</DocLink> contains information about the <code>Text</code> component, which allows you to mix the aforementioned base props as well as some text-specific props into your text compositions.
-- <DocLink to="/text">Button</DocLink> contains information about the <code>Button</code> component, which allows you to mix both base props and text props.
-
+- <DocLink to="/button">Button</DocLink> contains information about the <code>Button</code> component, which allows you to mix both base props and text props.
+- <DocLink to="/prefabs">Prefabs</DocLink> contains information about complete, prefabricated components that can be dropped into your application.
 
 Beyond components and props, Shakti also offers utility methods and hooks which remove the need to write raw media queries, among other benefits.
 
 - <DocLink to="/media">Media</DocLink> contains tools for working with various media sizes and responsive design.
 
-For comprehensive example usage of library features, take a look at the <DocLink to="/recipes">Recipes</DocLink> section.
+For comprehensive example usage of library features, take a look at the <DocLink to="/recipes">Recipes</DocLink> section. To experiment with Shakti without setting it up in a project, check out the <DocLink to="/sandbox">Sandbox</DocLink>.
diff --git a/docs/src/content/3-base.mdx b/docs/src/content/3-base.mdx
@@ -46,4 +46,9 @@ Modify the base colors of an element.
 ### Border
 Add and customize a border for an element. If a number is passed into a prop that accepts a number, pixels are used as the unit.
 
-<PropTable propList={shaktiProps.border} />
+<PropTable propList={shaktiProps.border} />
+
+### Shadow
+Add a shadow to an element.
+
+<PropTable propList={shaktiProps.shadow} />
diff --git a/docs/src/content/8-prefabs.mdx b/docs/src/content/8-prefabs.mdx
@@ -0,0 +1,31 @@
+---
+index: 8
+title: Prefabs
+description: Prefabricated components in the Shakti library.
+path: /prefabs
+---
+
+Although Shakti allows you to easily build your own component library from its primitives, there are also some prefabricated ("prefab") components you can drop into your application. They are more integrated and thorough than the primitive components, but still allow the flexibility of composition. All Shakti prefabs allow <code>Base</code> props to be mixed in, as well as props from components they are composed upon (i.e. if a prefab is built on <code>Flex</code>, it can, of course, accept <code>Flex</code> props).
+
+<Alert>
+    It is recommended to avoid using prefabs in favor of building your own custom UI components, but they can be used if you want quick prototypes or want to have a more comprehensive base for creating UI compositions.
+</Alert>
+
+## Card
+A card is a <code>Flex</code> component augmented with custom styles to make it look "card-like".
+
+```tsx
+<Card bgColor="#af33ff" alignCenter justifySpaceAround>
+    <Text color="white" my={18}>Not quite a credit card</Text>
+    <Text>💳</Text>
+</Card>
+```
+
+```tsx render=true
+render(() => (
+    <Card bgColor="#af33ff" alignCenter justifySpaceAround>
+        <Text color="white" my={18}>Not quite a credit card</Text>
+        <Text>💳</Text>
+    </Card>
+))
+```
diff --git a/docs/src/content/8-recipes.mdx → docs/src/content/9-recipes.mdx b/docs/src/content/8-recipes.mdx → docs/src/content/9-recipes.mdx
@@ -1,5 +1,5 @@
 ---
-index: 8
+index: 9
 title: Recipes
 description: Recipes for useful tasks, accomplished with the Shakti library.
 path: /recipes

diff --git a/docs/src/content/9-sandbox.mdx b/docs/src/content/9-sandbox.mdx
diff --git a/docs/src/pages/Layout.tsx b/docs/src/pages/Layout.tsx
@@ -6,11 +6,11 @@ import {
   Grid,
   Row,
   Col,
+  Flex,
   View,
   Text,
   useWindowQuery,
   breakpoints,
-  Flex,
 } from "shakti-lib";
 import styled, { ThemeProvider } from "styled-components";
 import { HiOutlineMenu } from "react-icons/hi";
@@ -176,6 +176,7 @@ const Layout = ({ location, data: { mdx }, pageContext }) => {
             >
               <LogoContainer
                 pb={20}
+                mb={8}
                 onClick={() => {
                   navigate("/");
                 }}

diff --git a/package.json b/package.json
@@ -3,7 +3,7 @@
   "author": "Brian Cooper <brian@brian-cooper.com> (https://brian-cooper.com)",
   "description": "A universal React component toolkit.",
   "homepage": "https://shaktilib.com/",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "license": "MIT",
   "main": "build/index.js",
   "module": "build/index.es.js",

diff --git a/src/components/Card/Card.tsx b/src/components/Card/Card.tsx
@@ -0,0 +1,14 @@
+// Card prefab component (exported to public API).
+
+import styled from "styled-components";
+
+import { Flex } from "../Layout/Layout";
+import theme from "../../constants/theme";
+
+const Card = styled(Flex)`
+  box-shadow: ${theme.shadows.main};
+  border-radius: 8px;
+  padding: 10px;
+`;
+
+export default Card;
diff --git a/docs/src/components/Card/index.ts → src/components/Card/index.ts b/docs/src/components/Card/index.ts → src/components/Card/index.ts