From fe6113c673bd8d5779f80ee562908a0905a7cb19 Mon Sep 17 00:00:00 2001 From: Pruthvi Shetty Date: Mon, 18 Jul 2022 14:56:40 +0530 Subject: [PATCH 1/3] Create modal.mdx --- docs/docs/components/modal.mdx | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) create mode 100644 docs/docs/components/modal.mdx diff --git a/docs/docs/components/modal.mdx b/docs/docs/components/modal.mdx new file mode 100644 index 0000000..39b1070 --- /dev/null +++ b/docs/docs/components/modal.mdx @@ -0,0 +1,19 @@ +# Modal (Spec) + +## Notes + +- use Create Portal for Markup +- Proper settings to control the trigger +- Proper way to adjust size, position, etc. +- Overlay Customization and option to not show it +- Lock scroll when modal is visible +- Close on ClickOutside +- Close on EscapeKey + +| Attributes | Values | Optional ? | +| :------------ | :------------------: | ---------: | +| `isOpen` | boolean (true/false) | No | +| `onClose` | function | Yes | +| `onOpen` | function | Yes | +| `size` | string | Yes | +| `showOverlay` | boolean | No | From 5d46ac296dce1429ad9de478871a8672192d8245 Mon Sep 17 00:00:00 2001 From: Pruthvi Shetty Date: Sun, 14 Aug 2022 00:12:19 +0530 Subject: [PATCH 2/3] Squashed commit of the following: commit fb57a63f4b52912738cf8dcb39adbffad6802419 Author: Saurabh Sutar <81956858+saurabhsutar192@users.noreply.github.com> Date: Fri Aug 12 14:13:36 2022 +0530 HOV-16 | Divider component (#53) * divider component v1 created * typos fixed * mdx changes * divider default color changed * mdx changes * comments resolved commit 2f5f8428b278e98ef5409a71aae56580cd3a715f Author: Pruthvi Shetty Date: Fri Aug 12 14:10:43 2022 +0530 Adds git playbook + adds steps for forking in contribution (#57) commit fcc1d6aa39ab2b8e851a70f0e3ce091c24c1c695 Author: Pruthvi Shetty Date: Fri Aug 12 14:09:52 2022 +0530 move react to peerDep (#55) --- docs/docs/components/divider.mdx | 152 +++++++++++++++++++ docs/docs/contribution.md | 6 +- docs/docs/wiki/playbooks/_category_.json | 8 + docs/docs/wiki/playbooks/git_playbook.md | 80 ++++++++++ lib/package.json | 9 +- lib/src/components/Divider/Divider.tsx | 77 ++++++++++ lib/src/components/Divider/divider.css.ts | 156 ++++++++++++++++++++ lib/src/components/Divider/divider.types.ts | 20 +++ lib/src/components/Divider/index.ts | 2 + lib/src/index.ts | 1 + pnpm-lock.yaml | 20 ++- 11 files changed, 518 insertions(+), 13 deletions(-) create mode 100644 docs/docs/components/divider.mdx create mode 100644 docs/docs/wiki/playbooks/_category_.json create mode 100644 docs/docs/wiki/playbooks/git_playbook.md create mode 100644 lib/src/components/Divider/Divider.tsx create mode 100644 lib/src/components/Divider/divider.css.ts create mode 100644 lib/src/components/Divider/divider.types.ts create mode 100644 lib/src/components/Divider/index.ts diff --git a/docs/docs/components/divider.mdx b/docs/docs/components/divider.mdx new file mode 100644 index 0000000..686961e --- /dev/null +++ b/docs/docs/components/divider.mdx @@ -0,0 +1,152 @@ +# Divider + +### Quick start + +Here's a quick start guide to get started with the divider component + +### Importing Component + +```jsx +import { Divider } from "@hover-design/react"; +``` + +### Code Snippets and Examples + +##### Divider Default + +import "@hover-design/react/dist/style.css"; +import { Divider } from "@hover-design/react"; + +```jsx +
+ +
+``` + +> **Note:** Horizontal Divider's width will depend on container's width + + + +##### Divider Dashed + +```jsx +
+ +
+``` + + + +##### Divider Dotted + +```jsx +
+ +
+``` + + + +##### Divider with Label + +```jsx +
+ +
+``` + +
+ +
+ +##### Vertical Divider + +```jsx +
+
Label 1
+ +
Label 2
+ +
Label 3
+
+``` + +> **Note:** Vertical Divider's height will depend on container's height + +
+
Label 1
+ +
Label 2
+ +
Label 3
+
+ +##### Vertical Divider with Label + +```jsx +
+ +
+``` + +
+ +
+ +##### Vertical Divider with Custom Label + +```jsx +
+ + label +
+ } + /> + +``` + +
+ + label +
+ } + /> + + +### Props Reference + +| Attributes | Values | Default Value | Optional ? | +| :-------------- | :-------------------------------------: | :-----------: | ---------: | +| orientation | ` vertical` | `horizontal ` | `horizontal` | Yes | +| type | `solid` | `dashed` | `dotted` | `solid` | Yes | +| size | `string` | `1px` | Yes | +| label | `String` | `JSX Element` | | Yes | +| color | `string` | `grey` | Yes | +| labelColor | `string` | `black` | Yes | +| labelBackground | `string` | `white` | Yes | +| labelPosition | `start` | `center` | `end` | `center` | Yes | diff --git a/docs/docs/contribution.md b/docs/docs/contribution.md index 79dd2f7..a9fad25 100644 --- a/docs/docs/contribution.md +++ b/docs/docs/contribution.md @@ -6,7 +6,9 @@ In this guide you will get an overview of the contribution workflow from cloning ## 1. Cloning the repository -First step is to clone the hover project from [Github](https://github.com/antstackio/hover-design) +First step is to fork the hover project from [Github](https://github.com/antstackio/hover-design) + + Note: We have a Playbook for the best practices read more [here](/docs/wiki/playbooks/git_playbook) ## 2. Understanding the Project @@ -57,6 +59,8 @@ Raise a PR after contributing the code and replacing spec with actual documentat For our Ideas, methodology and reasonings refer to our [Wiki](/docs/wiki/home) +We also have a [Playbook](/docs/wiki/playbooks/git_playbook) where we document our best practices and 'what to dos' + refer [Prerequisites](/docs/wiki/getting_started) to look at what approach to follow. Thank you for taking the time to read this doc. to suggest anything do not be afraid to [create an issue](https://github.com/antstackio/hover-design/issues/new) at the hover repo diff --git a/docs/docs/wiki/playbooks/_category_.json b/docs/docs/wiki/playbooks/_category_.json new file mode 100644 index 0000000..f6d9d0b --- /dev/null +++ b/docs/docs/wiki/playbooks/_category_.json @@ -0,0 +1,8 @@ +{ + "label": "Playbooks", + "position": 5, + "link": { + "type": "generated-index", + "description": "Hover Playbooks" + } +} diff --git a/docs/docs/wiki/playbooks/git_playbook.md b/docs/docs/wiki/playbooks/git_playbook.md new file mode 100644 index 0000000..fa9ba5b --- /dev/null +++ b/docs/docs/wiki/playbooks/git_playbook.md @@ -0,0 +1,80 @@ +--- +description: Hover Design - Git Playbook +--- + +# Git Playbook + +[Fork](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/working-with-forks/about-forks) the repository. This creates a copy of Hover Design’s codebase into your own profile and allows you to freely work on the codebase. + +## Branch Naming Convention + +Use the naming convention for simple identification of purpose + +```jsx +components / list / tests; +``` + +The basic structure goes as + +```jsx +{type of feature}/{specific component name}/{additional details} +``` + +Overall Only {type of feature} is strict it can be + +| components | Branches relating to components and adding to the main library. Can be tests,code,docs or as it is if its everything. Eg: components/button/docs adds docs for the button component | +| ---------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| tooling | Branches that add dev tooling. Eg: tooling/ci-cd/husky adds husky hooks for easing CI | +| example | Adds example code Eg: example/usage-with-next has example of using hover with nextjs | +| bugfix | These branches focus on bugfixing and take top priority when reviewing PRs | + +## Commiting code + +Have a initial check of the code you are commiting, make sure you branch is upto date with the latest main branch. Add crisp, concise messages. No `first commit` type of commits. Keep Commits small and readable as someone has to review your PR anything more than 180 lines of code is a big commit. A good commit message is: `adds hollow and primary variants of button` + +Always commit and push code with a WIP in the description if changes are not yet final but keep an habit of committing code at EOD. + +When pair programming add a co-author, to add a co-author write your message like this + +```jsx +git commit -m "c**ommit title + +Commit body + +Co-authored-by: name +Co-authored-by: name "** +``` + +Helps to know the people who have contributed to a specific piece of code and can help with context switch and KT + +Do not commit editor specific files and always make sure your Linter and Formatter isn’t overriding the project’s linter. + +## Reviews take top priority + +When a PR is up for review it will will reviewed so that no one is blocked on review. also at a time one developer should work on 1 issue unless it’s blocked. + +## Use squash and merge for PR’s to main + +Helps keep a clean commit history for main + +## Delete Branches after merge + +You can deal with your own forks post merge. + +## Keep PR Body detailed + +A blank description PR is bad, add images, what has been introduced, any communication to the reviewer or any deployment link should be there. + +Reviews should be clear too, raising nitpicks and possible questions that you may have as a reviewer should be put up, questions you have looking at someone’s code can come from others too. + +## Never mix tasks in one PR + +Its always better to raise 2 different PRs if you think that you are covering more than one concise feature. Eg: you modify the way padding is applied throughout the app while making a navbar, seperate the padding calculation into a different PR so that its clear. + +## Always link the proper milestone and project + +Always link your PR and also use [keywords](https://docs.github.com/en/issues/tracking-your-work-with-issues/linking-a-pull-request-to-an-issue) to link the issue with which its associated + +## There should be no PR without a linked issue + +even if the task is ad-hoc, create a issue first diff --git a/lib/package.json b/lib/package.json index 9cae479..b1bd2b5 100644 --- a/lib/package.json +++ b/lib/package.json @@ -18,14 +18,13 @@ }, "dependencies": { "@vanilla-extract/css": "^1.6.8", + "@vanilla-extract/css-utils": "^0.1.2", "@vanilla-extract/dynamic": "^2.0.2", "@vanilla-extract/recipes": "^0.2.3", "@vanilla-extract/sprinkles": "^1.3.3", "@vanilla-extract/vite-plugin": "^3.1.0", "deepmerge": "^4.2.2", - "polished": "^4.1.3", - "react": "^17.0.0", - "react-dom": "^17.0.0" + "polished": "^4.1.3" }, "devDependencies": { "@types/node": "^17.0.21", @@ -39,8 +38,8 @@ "vite-tsconfig-paths": "^3.4.0" }, "peerDependencies": { - "react": "^17", - "react-dom": "^17" + "react": "^17.0.0 || ^18.0.0", + "react-dom": "^17.0.0 || ^18.0.0" }, "repository": { "type": "git", diff --git a/lib/src/components/Divider/Divider.tsx b/lib/src/components/Divider/Divider.tsx new file mode 100644 index 0000000..057f486 --- /dev/null +++ b/lib/src/components/Divider/Divider.tsx @@ -0,0 +1,77 @@ +import { assignInlineVars } from "@vanilla-extract/dynamic"; +import { + dividerContainerHorizontal, + dividerContainerVertical, + dividerHorizontal, + dividerThemeVar, + dividerVertical, + labelHorizontal, + labelVertical, +} from "./divider.css"; +import { DividerProps } from "./divider.types"; + +export const Divider = ({ + type = "solid", + label, + labelPosition = "center", + color = "grey", + labelColor = "#000", + labelBackground = "#fff", + orientation = "horizontal", + className, + style, + size = "1px", + ...nativeProps +}: DividerProps) => { + const dividerClass = + orientation === "horizontal" + ? dividerHorizontal({ + type, + }) + : dividerVertical({ + type, + }); + const labelClass = + orientation === "horizontal" + ? labelHorizontal({ + labelPosition, + }) + : labelVertical({ + labelPosition, + }); + const dividerStyles = assignInlineVars({ + [dividerThemeVar.dividerColor]: color, + [dividerThemeVar.dividerSize]: size, + }); + + Object.assign(dividerStyles, style); + + return ( +
+
+ {label && ( + + {label} + + )} +
+ ); +}; diff --git a/lib/src/components/Divider/divider.css.ts b/lib/src/components/Divider/divider.css.ts new file mode 100644 index 0000000..9179148 --- /dev/null +++ b/lib/src/components/Divider/divider.css.ts @@ -0,0 +1,156 @@ +import { createTheme, style } from "@vanilla-extract/css"; +import { recipe } from "@vanilla-extract/recipes"; +import { DividerTheme } from "./divider.types"; +import { calc } from "@vanilla-extract/css-utils"; + +export const [dividerThemeClass, dividerThemeVar]: DividerTheme = createTheme({ + dividerColor: "#000", + labelColor: "#000", + labelBackground: "#fff", + dividerSize: "1px", +}); + +export const dividerContainerHorizontal = style({ + position: "relative", + width: "100%", + height: "fit-content", +}); + +export const dividerContainerVertical = style({ + position: "relative", + height: "100%", + width: "fit-content", +}); + +const dividerBaseStyles = style({ + position: "relative", + background: "none", + backgroundPosition: "center", +}); + +export const dividerHorizontal = recipe({ + base: [ + dividerBaseStyles, + { + backgroundRepeat: "repeat-x", + height: `${dividerThemeVar.dividerSize}`, + width: "100%", + }, + ], + + variants: { + type: { + dashed: { + backgroundImage: `linear-gradient( + to right, + ${dividerThemeVar.dividerColor} 60%, + rgba(255, 255, 255, 0) 0% + )`, + backgroundSize: `${calc.multiply(dividerThemeVar.dividerSize, 5)} ${ + dividerThemeVar.dividerSize + }`, + }, + dotted: { + backgroundImage: `linear-gradient( + to right, + ${dividerThemeVar.dividerColor} 40%, + rgba(255, 255, 255, 0) 0% + )`, + backgroundSize: `${calc.multiply(dividerThemeVar.dividerSize, 3)} ${ + dividerThemeVar.dividerSize + }`, + }, + solid: { + background: dividerThemeVar.dividerColor, + }, + }, + }, +}); + +export const dividerVertical = recipe({ + base: [ + dividerBaseStyles, + { + backgroundRepeat: "repeat-y", + height: "100%", + width: `${dividerThemeVar.dividerSize}`, + }, + ], + + variants: { + type: { + dashed: { + backgroundImage: `linear-gradient( + to bottom, + ${dividerThemeVar.dividerColor} 60%, + rgba(255, 255, 255, 0) 0% + )`, + backgroundSize: `${dividerThemeVar.dividerSize} ${calc.multiply( + dividerThemeVar.dividerSize, + 5 + )}`, + }, + dotted: { + backgroundImage: `linear-gradient( + to bottom, + ${dividerThemeVar.dividerColor} 40%, + rgba(255, 255, 255, 0) 0% + )`, + backgroundSize: `${dividerThemeVar.dividerSize} ${calc.multiply( + dividerThemeVar.dividerSize, + 3 + )}`, + }, + solid: { + background: dividerThemeVar.dividerColor, + }, + }, + }, +}); + +const labelBaseStyles = style({ + background: dividerThemeVar.labelBackground, + color: dividerThemeVar.labelColor, + padding: "4px 8px", + position: "absolute", +}); + +export const labelHorizontal = recipe({ + base: [labelBaseStyles, { top: "50%", transform: "translateY(-50%)" }], + variants: { + labelPosition: { + start: { + left: 0, + right: "auto", + }, + center: { + left: "50%", + transform: "translate(-50%,-50%)", + }, + end: { + left: "auto", + right: 0, + }, + }, + }, +}); + +export const labelVertical = recipe({ + base: [labelBaseStyles, { left: "50%", transform: "translateX(-50%)" }], + variants: { + labelPosition: { + start: { + top: 0, + bottom: "auto", + }, + center: { + top: "50%", + transform: "translate(-50%,-50%)", + }, + end: { + top: "auto", + bottom: 0, + }, + }, + }, +}); diff --git a/lib/src/components/Divider/divider.types.ts b/lib/src/components/Divider/divider.types.ts new file mode 100644 index 0000000..d39d710 --- /dev/null +++ b/lib/src/components/Divider/divider.types.ts @@ -0,0 +1,20 @@ +export type DividerProps = JSX.IntrinsicElements["div"] & { + orientation?: "vertical" | "horizontal"; + type?: "dashed" | "dotted" | "solid"; + size?: string; + label?: string | JSX.Element; + color?: string; + labelColor?: string; + labelBackground?: string; + labelPosition?: "start" | "end" | "center"; +}; + +export type DividerTheme = [ + string, + { + dividerColor: string; + labelColor: string; + labelBackground: string; + dividerSize: string; + } +]; diff --git a/lib/src/components/Divider/index.ts b/lib/src/components/Divider/index.ts new file mode 100644 index 0000000..90533a3 --- /dev/null +++ b/lib/src/components/Divider/index.ts @@ -0,0 +1,2 @@ +export * from "./Divider" +export * from "./divider.css" \ No newline at end of file diff --git a/lib/src/index.ts b/lib/src/index.ts index 02889ef..5745027 100644 --- a/lib/src/index.ts +++ b/lib/src/index.ts @@ -6,3 +6,4 @@ export * from "./components/List"; export * from "./components/ListItem"; export * from "./components/reset"; export * from "./components/Switch"; +export * from "./components/Divider" diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index d9d51b6..77b45fd 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -17,15 +17,15 @@ importers: '@docusaurus/preset-classic': 2.0.0-beta.20 '@hover-design/react': '*' '@mdx-js/react': ^1.6.22 - '@tsconfig/docusaurus': ^1.0.6 - '@vanilla-extract/css': ^1.7.2 - '@vanilla-extract/webpack-plugin': ^2.1.11 - clsx: ^1.2.1 - docusaurus-plugin-vanilla-extract: ^1.0.2 - prism-react-renderer: ^1.3.5 + '@tsconfig/docusaurus': ^1.0.5 + '@vanilla-extract/css': ^1.6.8 + '@vanilla-extract/webpack-plugin': ^2.1.10 + clsx: ^1.1.1 + docusaurus-plugin-vanilla-extract: ^1.0.1 + prism-react-renderer: ^1.3.1 react: ^17.0.2 react-dom: ^17.0.2 - typescript: ^4.7.4 + typescript: ^4.6.4 dependencies: '@docusaurus/core': 2.0.0-beta.20_3tgeifm2vmwrlpqlopppsnjtcu '@docusaurus/preset-classic': 2.0.0-beta.20_3tgeifm2vmwrlpqlopppsnjtcu @@ -78,6 +78,7 @@ importers: '@types/react': ^17.0.0 '@types/react-dom': ^17.0.0 '@vanilla-extract/css': ^1.6.8 + '@vanilla-extract/css-utils': ^0.1.2 '@vanilla-extract/dynamic': ^2.0.2 '@vanilla-extract/recipes': ^0.2.3 '@vanilla-extract/sprinkles': ^1.3.3 @@ -94,6 +95,7 @@ importers: vite-tsconfig-paths: ^3.4.0 dependencies: '@vanilla-extract/css': 1.6.8 + '@vanilla-extract/css-utils': 0.1.2 '@vanilla-extract/dynamic': 2.0.2 '@vanilla-extract/recipes': 0.2.3_@vanilla-extract+css@1.6.8 '@vanilla-extract/sprinkles': 1.4.0_@vanilla-extract+css@1.6.8 @@ -3105,6 +3107,10 @@ packages: '@types/node': 18.6.3 dev: false + /@vanilla-extract/css-utils/0.1.2: + resolution: {integrity: sha512-qoxIu5E/UhJtoKsPL1JaU9nhTN0Xl5zYV0pScOgsvc3JN46TvTTt0L3GV8x3PQpZP7x3elw8BsC9czYbhJy9Gg==} + dev: false + /@vanilla-extract/css/1.6.8: resolution: {integrity: sha512-wkZay2jWe9a3Dt30j+WTJicK4+YV7i65lr+QnpkigVY9uU2KPzaiASEyUV8AouT2cZm7AOhteBBVKI8cYeWnVQ==} dependencies: From 266c0d8e31d004af0b0556a7b6cbe02a68367da3 Mon Sep 17 00:00:00 2001 From: Pruthvi Shetty Date: Tue, 23 Aug 2022 12:09:38 +0530 Subject: [PATCH 3/3] Update modal.mdx --- docs/docs/components/modal.mdx | 17 ++++++++++------- 1 file changed, 10 insertions(+), 7 deletions(-) diff --git a/docs/docs/components/modal.mdx b/docs/docs/components/modal.mdx index 39b1070..1795364 100644 --- a/docs/docs/components/modal.mdx +++ b/docs/docs/components/modal.mdx @@ -9,11 +9,14 @@ - Lock scroll when modal is visible - Close on ClickOutside - Close on EscapeKey +- use `` element instead of `
` -| Attributes | Values | Optional ? | -| :------------ | :------------------: | ---------: | -| `isOpen` | boolean (true/false) | No | -| `onClose` | function | Yes | -| `onOpen` | function | Yes | -| `size` | string | Yes | -| `showOverlay` | boolean | No | +| Attributes | Values | Optional ? | +| :-------------------- | :------------------: | ---------: | +| `isOpen` | boolean (true/false) | No | +| `onClose` | function | Yes | +| `onOpen` | function | Yes | +| `size` | string | Yes | +| `showOverlay` | boolean | Yes | +| `closeOnOutsideClick` | boolean | Yes | +| `overlayStyles` | Style Object | Yes |