Merge pull request #63 from wethegit/feature/comp/modal

feature(comp): adds `<Modal>` component

.changeset/beige-penguins-lay.md

@@ -0,0 +1,6 @@
+---
+"@wethegit/components-cli": patch
+"@wethegit/components": patch
+---
+
+Adds `<Modal />` component

.changeset/config.json

@@ -1,6 +1,11 @@
 {
   "$schema": "https://unpkg.com/@changesets/[email protected]/schema.json",
-  "changelog": "@changesets/cli/changelog",
+  "changelog": [
+    "@changesets/changelog-github",
+    {
+      "repo": "wethegit/component-library"
+    }
+  ],
   "commit": false,
   "fixed": [],
   "linked": [],

.github/workflows/lint.yml

@@ -1,10 +1,6 @@
-name: Release
+name: Lint
 
 on:
-  push:
-    branches:
-      - main
-
   pull_request:
     types: [opened, edited, reopened, synchronize]
 

.github/workflows/release.yml

@@ -9,6 +9,10 @@ concurrency: ${{ github.workflow }}-${{ github.ref }}
 
 jobs:
   release:
+    permissions:
+      contents: write # to create release (changesets/action)
+      issues: write # to post issue comments (changesets/action)
+      pull-requests: write # to create pull request (changesets/action)
     name: Release
     runs-on: ubuntu-latest
     steps:
@@ -34,14 +38,11 @@ jobs:
       - name: Lint
         run: yarn lint
 
-      - name: Stylelint
-        run: yarn stylelint
-
       - name: Create Release Pull Request or Publish to npm
         id: changesets
         uses: changesets/action@v1
         with:
-          # This expects you to have a script called release which does a build for your packages and calls changeset publish
+          version: yarn version
           publish: yarn release
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

README.md

@@ -9,7 +9,7 @@ Minally styled, accessible, React component primitives that can be copy and past
 ## Useful Commands
 
 - `yarn build` - Build all packages, including the Storybook site
-- `yarn dev` - Run all packages locally and preview with Storybook
+- `yarn start` - Run all packages locally and preview with Storybook
 - `yarn lint` - Lint all packages
 - `yarn changeset` - Generate a changeset
 - `yarn clean` - Clean up all `node_modules` and `dist` folders (runs each package's clean script)

package.json

@@ -1,19 +1,20 @@
 {
   "private": true,
   "scripts": {
-    "build": "turbo run build",
-    "changeset": "changeset",
     "clean": "turbo run clean && rm -rf .turbo node_modules .turbo-cookie",
-    "dev": "turbo run dev --no-cache --continue",
+    "build": "turbo run build",
+    "start": "turbo run start --no-cache --continue",
     "format": "prettier --write \"**/*.{ts,tsx,md,mdx}\"",
     "lint": "turbo run lint stylelint",
-    "release": "turbo run build && changeset publish",
     "typecheck": "turbo run typecheck",
-    "version-packages": "changeset version",
+    "changeset": "changeset",
+    "release": "turbo run build && changeset publish",
+    "version": "changeset version",
     "prepare": "husky install"
   },
   "devDependencies": {
     "@changesets/cli": "^2.25.2",
+    "@changesets/changelog-github": "^0.5.0",
     "eslint": "^8.48.0",
     "eslint-config-custom": "*",
     "husky": "^8.0.3",
@@ -28,5 +29,6 @@
     "apps/*",
     "packages/*"
   ],
-  "license": "MIT"
+  "license": "MIT",
+  "dependencies": {}
 }

packages/wethegit-components-cli/README.md

@@ -11,7 +11,7 @@ To learn how to contribute, continue reading.
 Make sure you using the required Node version from [nvmrc](./.nvmrc).
 
 1. Run `yarn install` from the **root of the monorepo**, not from this package's directory.
-2. `cd` into this package's directory and run `yarn dev`
+2. `cd` into this package's directory and run `yarn start`
 3. In another terminal run `npm link` from this package's directory. **Note:** it MUST be `npm link` and not `yarn link`
 
 Now that we have a local version of the package available we need a node project to test on. If you have one already, skip to step 3.

packages/wethegit-components-cli/package.json

@@ -14,8 +14,8 @@
   },
   "scripts": {
     "build": "tsup",
-    "clean": "rm -rf node_modules dist",
-    "dev": "tsup --watch",
+    "clean": "rm -rf ./node_modules ./dist ./.turbo",
+    "start": "tsup --watch",
     "lint": "eslint src/",
     "typecheck": "tsc --noEmit"
   },

packages/wethegit-components-cli/src/registry-index.ts

@@ -1,4 +1,4 @@
-export type RegistryCategory = "component" | "utility" | "style" | "type"
+export type RegistryCategory = "component" | "utility" | "style" | "type" | "hook"
 
 export interface Registry {
   /** Should be the same name as the item's directory */
@@ -92,6 +92,19 @@ const NAVIGATION: Registry = {
   localDependencies: [FLEX, CLASSNAMES, VISUALLY_HIDDEN, FIXED_FORWARD_REF],
 }
 
+const ICON: Registry = {
+  name: "icon",
+  category: "component",
+  localDependencies: [CLASSNAMES],
+}
+
+const MODAL: Registry = {
+  name: "modal",
+  category: "component",
+  localDependencies: [CLASSNAMES],
+  dependencies: ["@wethegit/react-modal", "@wethegit/react-hooks"],
+}
+
 /* INDEX */
 export const REGISTRY_INDEX: RegistryIndex = {
   [FLEX.name]: FLEX,
@@ -101,5 +114,7 @@ export const REGISTRY_INDEX: RegistryIndex = {
   [TEXT.name]: TEXT,
   [VISUALLY_HIDDEN.name]: VISUALLY_HIDDEN,
   [NAVIGATION.name]: NAVIGATION,
+  [ICON.name]: ICON,
+  [MODAL.name]: MODAL,
 }
 /* END REGISTRY INDEX */

packages/wethegit-components-cli/src/utils/consts.ts

@@ -9,6 +9,8 @@ export const COMPONENTS_PACKAGE_STYLES_DIR = "src/styles"
 
 export const COMPONENTS_PACKAGE_UTILITIES_DIR = "src/utilities"
 
+export const COMPONENTS_PACKAGE_HOOKS_DIR = "src/hooks"
+
 export const COMPONENTS_PACKAGE_TYPES_DIR = "src/types"
 
 export const DEFAULT_CONFIG_FILE_NAME = "components.config.json"
@@ -18,6 +20,7 @@ export const DEFAULT_CONFIG: Config = {
     component: "src/components",
     style: "src/styles",
     utility: "src/utilities",
+    hook: "src/hooks",
     type: "types",
   },
 }
@@ -26,5 +29,6 @@ export const REGISTRY_TYPE_TO_ROOT_DIR_MAP: Record<RegistryCategory, string> = {
   component: COMPONENTS_PACKAGE_COMPONENTS_DIR,
   utility: COMPONENTS_PACKAGE_UTILITIES_DIR,
   style: COMPONENTS_PACKAGE_STYLES_DIR,
+  hook: COMPONENTS_PACKAGE_HOOKS_DIR,
   type: COMPONENTS_PACKAGE_TYPES_DIR,
 }

packages/wethegit-components-cli/src/utils/prompt-for-config.ts

@@ -52,6 +52,12 @@ export async function promptForConfig(cwd: string, skip: boolean): Promise<Confi
           message: `What is your ${highlight("utilities")} directory?`,
           initial: DEFAULT_CONFIG.directories.utility,
         },
+        {
+          type: "text",
+          name: "hooksRootDir",
+          message: `What is your ${highlight("hooks")} directory?`,
+          initial: DEFAULT_CONFIG.directories.hook,
+        },
       ],
       {
         onCancel: () => {
@@ -60,7 +66,13 @@ export async function promptForConfig(cwd: string, skip: boolean): Promise<Confi
       }
     )
 
-    const { typesRootDir, componentsRootDir, stylesRootDir, utilitiesRootDir } = response
+    const {
+      typesRootDir,
+      componentsRootDir,
+      stylesRootDir,
+      utilitiesRootDir,
+      hooksRootDir,
+    } = response
     const { directories, ...defaultConfig } = DEFAULT_CONFIG
 
     config = {
@@ -70,6 +82,7 @@ export async function promptForConfig(cwd: string, skip: boolean): Promise<Confi
         component: componentsRootDir,
         style: stylesRootDir,
         utility: utilitiesRootDir,
+        hook: hooksRootDir,
         ...(typesRootDir ? { type: typesRootDir } : {}),
       },
     }

packages/wethegit-components/.storybook/preview.ts

@@ -3,6 +3,7 @@ import { withThemeByClassName } from "@storybook/addon-themes"
 
 import { wtcTheme } from "./static/wtc-theme"
 
+import "@wethegit/react-modal/style.css"
 import "./styles/global-story-styles.scss"
 
 const preview: Preview = {

packages/wethegit-components/README.md

@@ -15,8 +15,8 @@ You will develop and test the components with **Storybook**.
 From the **root** of the repository, run:
 
 ```sh
-yarn install
-yarn dev
+yarn
+yarn start
 ```
 
 This will start Storybook and watch for changes in the components' source files.

packages/wethegit-components/package.json

@@ -19,16 +19,18 @@
   },
   "scripts": {
     "build": "storybook build --docs",
-    "clean": "rm -rf .turbo node_modules dist storybook-static",
-    "dev": "storybook dev -p 6006",
+    "clean": "rm -rf ./.turbo ./node_modules ./dist ./storybook-static",
+    "start": "storybook dev -p 6006",
     "lint": "eslint src/",
     "stylelint": "stylelint **/*.{css,scss}",
     "preview-storybook": "serve storybook-static",
     "typecheck": "tsc --noEmit"
   },
   "peerDependencies": {
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "@wethegit/react-hooks": "^2.0.0",
+    "@wethegit/react-modal": "^2.0.0",
+    "react": "17 - 18",
+    "react-dom": "17 - 18",
     "typescript": "5.1.6"
   },
   "devDependencies": {
@@ -45,6 +47,8 @@
     "@types/react": "^17.0.39",
     "@types/react-dom": "^17.0.11",
     "@vitejs/plugin-react": "^1.3.2",
+    "@wethegit/react-hooks": "^2.0.0",
+    "@wethegit/react-modal": "^2.0.0",
     "eslint": "^8.15.0",
     "eslint-config-custom": "*",
     "eslint-plugin-storybook": "^0.6.15",

packages/wethegit-components/src/components/index.tsx

@@ -2,6 +2,7 @@ export * from "./flex"
 export * from "./grid-layout"
 export * from "./icon"
 export * from "./image-group"
+export * from "./modal"
 export * from "./navigation"
 export * from "./tag"
 export * from "./text"

packages/wethegit-components/src/components/modal/index.tsx

@@ -0,0 +1,2 @@
+export { Modal } from "./modal"
+export type { ModalProps } from "./modal"

packages/wethegit-components/src/components/modal/modal.module.scss

@@ -0,0 +1,38 @@
+.modal {
+  opacity: var(--scale, 0);
+  transition: opacity var(--duration) ease-in-out;
+}
+
+.modalOpen {
+  --ease: cubic-bezier(0.77, 0, 0.1, 1.39);
+  --scale: 1;
+}
+
+.modalBackdrop {
+  background-color: rgb(0 0 0 / 70%);
+}
+
+.modalCloseButton {
+  background-color: yellow;
+  border: none;
+  border-radius: 0.25rem;
+  color: black;
+  cursor: pointer;
+  font-size: 1rem;
+  padding: 0.5em 1em;
+  position: absolute;
+  right: 1em;
+  top: -0.5em;
+}
+
+.modalContent {
+  background-color: white;
+  border-radius: 1rem;
+  box-shadow: 0 0 5px 0 rgb(0 0 0 / 20%);
+  font-family: sans-serif;
+  max-width: 70%;
+  -webkit-overflow-scrolling: touch;
+  padding: 2rem;
+  transform: scale(var(--scale, 0));
+  transition: transform var(--duration) var(--ease, cubic-bezier(0.75, -0.46, 0.4, 1));
+}

packages/wethegit-components/src/components/modal/modal.stories.tsx

@@ -0,0 +1,80 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { UserPreferencesProvider } from "@wethegit/react-hooks"
+import { useModal } from "@wethegit/react-modal"
+import { useRef } from "react"
+
+import { Modal } from "./modal"
+
+const meta = {
+  title: "components/modal",
+  component: Modal,
+  args: {
+    isOpen: true,
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ height: 500 }}>
+        <UserPreferencesProvider>
+          <Story />
+        </UserPreferencesProvider>
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof Modal>
+
+export default meta
+
+type Story = StoryObj<typeof Modal>
+
+export const Default: Story = {
+  render: (args) => {
+    return (
+      <Modal {...args} appendToBody={false}>
+        <p style={{ color: "black", margin: 0 }}>
+          <strong>Close</strong> button doesn't work becayse inside the story we use the{" "}
+          <code>isOpen</code> control.
+        </p>
+      </Modal>
+    )
+  },
+}
+
+export const WithButtonTrigger: Story = {
+  render: () => {
+    const triggerRef = useRef<HTMLButtonElement>(null)
+    const { isOpen, toggle } = useModal({
+      triggerRef,
+    })
+
+    return (
+      <div
+        style={{
+          display: "flex",
+          justifyContent: "center",
+          height: "100%",
+          alignItems: "center",
+        }}
+      >
+        <button
+          ref={triggerRef}
+          onClick={toggle}
+          style={{
+            backgroundColor: "cyan",
+            padding: "20px",
+            color: "black",
+            fontFamily: "sans-serif",
+            borderRadius: "5px",
+          }}
+        >
+          {isOpen ? "Close" : "Open"} Modal
+        </button>
+        <Modal isOpen={isOpen} toggle={toggle}>
+          <p style={{ color: "black", margin: 0 }}>
+            <strong>Close</strong> button doesn't work becayse inside the story we use the{" "}
+            <code>isOpen</code> control.
+          </p>
+        </Modal>
+      </div>
+    )
+  },
+}