From 2f940417ed519afb777a6a4fd5d1e28f6119aa7a Mon Sep 17 00:00:00 2001 From: brian Date: Thu, 5 Nov 2020 19:27:09 -0600 Subject: [PATCH] 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 --- CHANGELOG.md | 5 +++ README.md | 26 +++++++++++----- docs/src/components/Alert/Alert.tsx | 9 +++--- docs/src/components/Card/Card.tsx | 13 -------- docs/src/components/CodeBlock/CodeBlock.tsx | 2 ++ .../components/GlobalStyle/GlobalStyle.tsx | 9 +++--- docs/src/components/NavMenu/NavMenu.tsx | 13 +++++--- docs/src/components/Remark/Remark.tsx | 7 ++--- docs/src/components/index.ts | 1 - docs/src/constants/shaktiProps.json | 6 ++++ docs/src/content/1-introduction.mdx | 14 +++++---- docs/src/content/10-sandbox.mdx | 28 +++++++++++++++++ docs/src/content/2-getting-started.mdx | 6 ++-- docs/src/content/3-base.mdx | 7 ++++- docs/src/content/8-prefabs.mdx | 31 +++++++++++++++++++ .../content/{8-recipes.mdx => 9-recipes.mdx} | 2 +- docs/src/content/9-sandbox.mdx | 23 -------------- docs/src/pages/Layout.tsx | 3 +- package.json | 2 +- src/components/Card/Card.tsx | 14 +++++++++ {docs/src => src}/components/Card/index.ts | 0 src/components/index.ts | 3 +- src/constants/mixins.ts | 12 +++++++ src/constants/theme.ts | 19 ++++++++++++ src/index.ts | 3 +- src/lib/types.ts | 14 +++++++++ 26 files changed, 195 insertions(+), 77 deletions(-) delete mode 100644 docs/src/components/Card/Card.tsx create mode 100644 docs/src/content/10-sandbox.mdx create mode 100644 docs/src/content/8-prefabs.mdx rename docs/src/content/{8-recipes.mdx => 9-recipes.mdx} (99%) delete mode 100644 docs/src/content/9-sandbox.mdx create mode 100644 src/components/Card/Card.tsx rename {docs/src => src}/components/Card/index.ts (100%) create mode 100644 src/constants/theme.ts diff --git a/CHANGELOG.md b/CHANGELOG.md index ff247b9..c483775 100644 --- 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 index 1db54fa..eee3aaa 100644 --- a/README.md +++ b/README.md @@ -6,22 +6,32 @@
+
+ +[![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) + +
+ ### 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 styled components, encouraging DRY object composition +- Strongly-typed: Written in TypeScript +- Tree-shaking: Modular, lean build supporting dead code elimination +- Modular: Easily customize HTML and CSS functionality with foundational base components and props +- Declarative: Clear naming of units based on underlying HTML and CSS functionality +- Grid: Intuitive grid system based on flexbox +- Prefabs: Prefabricated, cohesive UI components ready to drop into an application +- Utilities: Hooks and other utilities to help with responsive layout creation and other UI-driven tasks +- Thin abstraction: Built on styled components, 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, © Brian Cooper. See LICENSE.md for more information. diff --git a/docs/src/components/Alert/Alert.tsx b/docs/src/components/Alert/Alert.tsx index 624814e..362c1e6 100644 --- 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 ( - - {children} + + + {children} + ); }; diff --git a/docs/src/components/Card/Card.tsx b/docs/src/components/Card/Card.tsx deleted file mode 100644 index bcac150..0000000 --- a/docs/src/components/Card/Card.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import styled from "styled-components"; -import { Flex } from "shakti-lib"; - -const Card = styled(Flex)<{ color: string }>` - box-shadow: ${({ theme }) => theme.shadows.main}; - background-color: ${({ color }) => color}; - border-radius: 8px; - text-align: ${({ alignEnd }) => alignEnd && "end"}; - padding: 0 10px; - color: ${({ theme }) => theme.colors.background}; -`; - -export default Card; diff --git a/docs/src/components/CodeBlock/CodeBlock.tsx b/docs/src/components/CodeBlock/CodeBlock.tsx index 089dd01..de5e385 100644 --- 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 index 65d7713..557da07 100644 --- 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 index e7b820b..ac0d20f 100644 --- a/docs/src/components/NavMenu/NavMenu.tsx +++ b/docs/src/components/NavMenu/NavMenu.tsx @@ -20,7 +20,7 @@ const NavMenu = ({ location }) => { - + @@ -42,8 +42,13 @@ const NavMenu = ({ location }) => { Button + + + Prefabs + + - + @@ -51,7 +56,7 @@ const NavMenu = ({ location }) => { - + @@ -64,7 +69,7 @@ const NavMenu = ({ location }) => { - + { return ( - - + + 📌 Note: {children} diff --git a/docs/src/components/index.ts b/docs/src/components/index.ts index 8c16b53..9753ca6 100644 --- 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 index 3ac8a80..4bda3fc 100644 --- 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 index e05b659..b2a0b75 100644 --- 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. ## 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 styled components, encouraging DRY object composition \ No newline at end of file +- Strongly-typed: Written in TypeScript +- Tree-shaking: Modular, lean build supporting dead code elimination +- Modular: Easily customize HTML and CSS functionality with foundational base components and props +- Declarative: Clear naming of units based on underlying HTML and CSS functionality +- Grid: Intuitive grid system based on flexbox +- Prefabs: Prefabricated, cohesive UI components ready to drop into an application +- Utilities: Hooks and other utilities to help with responsive layout creation and other UI-driven tasks +- Thin abstraction: Built on styled components, encouraging DRY object composition \ No newline at end of file diff --git a/docs/src/content/10-sandbox.mdx b/docs/src/content/10-sandbox.mdx new file mode 100644 index 0000000..e566340 --- /dev/null +++ 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 +<> + + + green 🌲 + + 🍄 + + + + + + +``` \ No newline at end of file diff --git a/docs/src/content/2-getting-started.mdx b/docs/src/content/2-getting-started.mdx index c055ab8..df98523 100644 --- 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 - Base contains an outline of the base props that are accessible in all Shakti components. - Layout contains details about the various layout components, including the built-in grid system. - Text contains information about the Text component, which allows you to mix the aforementioned base props as well as some text-specific props into your text compositions. -- Button contains information about the Button component, which allows you to mix both base props and text props. - +- Button contains information about the Button component, which allows you to mix both base props and text props. +- Prefabs 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. - Media contains tools for working with various media sizes and responsive design. -For comprehensive example usage of library features, take a look at the Recipes section. \ No newline at end of file +For comprehensive example usage of library features, take a look at the Recipes section. To experiment with Shakti without setting it up in a project, check out the Sandbox. \ No newline at end of file diff --git a/docs/src/content/3-base.mdx b/docs/src/content/3-base.mdx index 570d7fd..5b9adff 100644 --- 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. - \ No newline at end of file + + +### Shadow +Add a shadow to an element. + + \ No newline at end of file diff --git a/docs/src/content/8-prefabs.mdx b/docs/src/content/8-prefabs.mdx new file mode 100644 index 0000000..6f9ccc0 --- /dev/null +++ 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 Base props to be mixed in, as well as props from components they are composed upon (i.e. if a prefab is built on Flex, it can, of course, accept Flex props). + + + 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. + + +## Card +A card is a Flex component augmented with custom styles to make it look "card-like". + +```tsx + + Not quite a credit card + 💳 + +``` + +```tsx render=true +render(() => ( + + Not quite a credit card + 💳 + +)) +``` \ No newline at end of file diff --git a/docs/src/content/8-recipes.mdx b/docs/src/content/9-recipes.mdx similarity index 99% rename from docs/src/content/8-recipes.mdx rename to docs/src/content/9-recipes.mdx index 969bcfd..6703a41 100644 --- a/docs/src/content/8-recipes.mdx +++ b/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 deleted file mode 100644 index 7ad80aa..0000000 --- a/docs/src/content/9-sandbox.mdx +++ /dev/null @@ -1,23 +0,0 @@ ---- -index: 9 -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 - - - green 🌲 - - 🍄 - - - -``` \ No newline at end of file diff --git a/docs/src/pages/Layout.tsx b/docs/src/pages/Layout.tsx index 88d714d..cb2eccf 100644 --- 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 }) => { > { navigate("/"); }} diff --git a/package.json b/package.json index 344abaa..b303dcb 100644 --- a/package.json +++ b/package.json @@ -3,7 +3,7 @@ "author": "Brian Cooper (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 new file mode 100644 index 0000000..62e38a4 --- /dev/null +++ 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 b/src/components/Card/index.ts similarity index 100% rename from docs/src/components/Card/index.ts rename to src/components/Card/index.ts diff --git a/src/components/index.ts b/src/components/index.ts index 23b580c..e930132 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -2,5 +2,6 @@ import { BaseDiv, BaseP } from "./Base"; import { Grid, Row, Col, View, Flex } from "./Layout"; import { Text } from "./Text"; import { Button } from "./Button"; +import { Card } from "./Card"; -export { BaseDiv, BaseP, Grid, Row, Col, View, Flex, Text, Button }; +export { BaseDiv, BaseP, Grid, Row, Col, View, Flex, Text, Button, Card }; diff --git a/src/constants/mixins.ts b/src/constants/mixins.ts index dc8c897..f2b5a19 100644 --- a/src/constants/mixins.ts +++ b/src/constants/mixins.ts @@ -10,6 +10,7 @@ import { DisplayProps, MarginProps, PaddingProps, + ShadowProps, TextAlignProps, TextProps, } from "../lib/types"; @@ -39,6 +40,8 @@ const dimension = css` * Text alignment */ const textAlign = css` + text-align: ${({ textStart }) => textStart && "start"}; + text-align: ${({ textEnd }) => textEnd && "end"}; text-align: ${({ textLeft }) => textLeft && "left"}; text-align: ${({ textCenter }) => textCenter && "center"}; text-align: ${({ textRight }) => textRight && "right"}; @@ -119,6 +122,14 @@ const border = css` border-left: ${({ borderLeft }) => checkType(borderLeft)}; `; +/** + * Shadow + */ +const shadow = css` + box-shadow: ${({ boxShadow }) => boxShadow}; + text-shadow: ${({ textShadow }) => textShadow}; +`; + /** * Base CSS styles */ @@ -129,6 +140,7 @@ export const baseStyles = css` ${elementPadding} ${color} ${border} + ${shadow} ${textAlign} `; diff --git a/src/constants/theme.ts b/src/constants/theme.ts new file mode 100644 index 0000000..baf8807 --- /dev/null +++ b/src/constants/theme.ts @@ -0,0 +1,19 @@ +// Global component theme for prefabs. + +/** + * Theme interface + */ +export interface Theme { + shadows: { [key: string]: string }; +} + +/** + * Global theme object (interface is colocated) + */ +const theme: Theme = { + shadows: { + main: "0 2px 6px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.1);", + }, +}; + +export default theme; diff --git a/src/index.ts b/src/index.ts index 753d225..fbff614 100644 --- a/src/index.ts +++ b/src/index.ts @@ -7,7 +7,7 @@ import breakpoints from "./constants/breakpoints"; import useWindowQuery from "./lib/hooks/useWindowQuery"; // components -import { View, Flex, Grid, Row, Col, Text, Button } from "./components"; +import { View, Flex, Grid, Row, Col, Text, Button, Card } from "./components"; export { breakpoints, @@ -19,4 +19,5 @@ export { Col, Text, Button, + Card, }; diff --git a/src/lib/types.ts b/src/lib/types.ts index 49af838..90be187 100644 --- a/src/lib/types.ts +++ b/src/lib/types.ts @@ -98,12 +98,16 @@ export interface PaddingProps { /** * Interface for text alignment. + * @param textStart {boolean} align text to start + * @param textEnd {boolean} align text to end * @param textLeft {boolean} align text to left * @param textCenter {boolean} align text to center * @param textRight {boolean} align text to right * @param textJustify {boolean} justify text */ export interface TextAlignProps { + textStart?: boolean; + textEnd?: boolean; textLeft?: boolean; textCenter?: boolean; textRight?: boolean; @@ -194,6 +198,16 @@ export interface BorderProps { borderLeft?: number | string; } +/** + * Interface for shadow props. + * @param boxShadow {string} box shadow + * @param textShadow {string} text shadow + */ +export interface ShadowProps { + boxShadow?: string; + textShadow?: string; +} + /** * Interface for core text props. * @param size {number|string} font size