feat: plop configured, new structure on its way

.gitignore

@@ -19,6 +19,7 @@ types
 # production
 /build
 dist/
+storybook-static
 
 # misc
 .DS_Store
@@ -33,7 +34,8 @@ dist/
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
-
+.yarn-integrity
+.idea
 .now
 dist
 esm

.storybook/main.js

@@ -0,0 +1,39 @@
+const path = require("path");
+const fs = require("fs");
+
+// [Workaround] This logic means `"../packages/components/*/stories/*.stories.tsx"` but it's much faster.
+function getStories(pkg) {
+  const scope = pkg ? [pkg] : fs.readdirSync("packages/components");
+  return scope
+    .map((package) => `packages/components/${package}/stories`)
+    .filter((storyDir) => fs.existsSync(storyDir))
+    .map((storyDir) => `../${storyDir}/*.stories.tsx`);
+}
+
+module.exports = {
+  core: {
+    builder: "webpack5",
+    disableTelemetry: true,
+  },
+  addons: [
+    "storybook-dark-mode",
+    "@storybook/addon-a11y",
+    "@storybook/addon-essentials",
+    "@storybook/addon-storysource",
+  ],
+  stories: getStories(),
+  webpackFinal: async (config) => {
+    config.resolve.alias = {
+      ...config.resolve.alias,
+      "@nextui-org/react": path.resolve(
+        __dirname,
+        "../packages/components/react/src",
+      ),
+    }
+    config.resolve.extensions.push(".ts", ".tsx")
+    return config
+  },
+  typescript: {
+    reactDocgen: false,
+  },
+};

CONTRIBUTING.MD

@@ -11,6 +11,48 @@ Hello!, I am very excited that you are interested in contributing with Next UI.
 - [Breaking Changes](#breaking-changes)
 - [Becoming a maintainer](#becoming-a-maintainer)
 
+### Tooling
+
+- [Yarn](https://yarnpkg.com/) to manage packages and dependecnies
+- [Tsup](https://tsup.egoist.sh/) to bundle packages
+- [Storybook](https://storybook.js.org/) for rapid UI component development and
+  testing
+- [Testing Library](https://testing-library.com/) for testing components and
+  hooks
+- [Changeset](https://github.com/atlassian/changesets) for changes
+  documentation, changelog generation, and release management.
+
+
+### Commit Convention
+
+Before you create a Pull Request, please check whether your commits comply with
+the commit conventions used in this repository.
+
+When you create a commit we kindly ask you to follow the convention
+`category(scope or module): message` in your commit message while using one of
+the following categories:
+
+- `feat / feature`: all changes that introduce completely new code or new
+  features
+- `fix`: changes that fix a bug (ideally you will additionally reference an
+  issue if present)
+- `refactor`: any code related change that is not a fix nor a feature
+- `docs`: changing existing or creating new documentation (i.e. README, docs for
+  usage of a lib or cli usage)
+- `build`: all changes regarding the build of the software, changes to
+  dependencies or the addition of new dependencies
+- `test`: all changes regarding tests (adding new tests or changing existing
+  ones)
+- `ci`: all changes regarding the configuration of continuous integration (i.e.
+  github actions, ci system)
+- `chore`: all changes to the repository that do not fit into any of the above
+  categories
+
+
+If you are interested in the detailed specification you can visit
+https://www.conventionalcommits.org/ or check out the
+[Angular Commit Message Guidelines](https://github.com/angular/angular/blob/22b96b9/CONTRIBUTING.md#-commit-message-guidelines).
+
 ## Pull Request Guidelines
 
 - The `main` branch is basically a snapshot of the latest stable version. All development must be done in dedicated branches.
@@ -24,6 +66,34 @@ Hello!, I am very excited that you are interested in contributing with Next UI.
   - Provide a detailed description of the error in the PR. Favorite live demo.
   - Add the appropriate test coverage, if applicable.
 
+
+### Steps to PR
+
+1. Fork of the nextui repository and clone your fork
+
+2. Create a new branch out of the `main` branch. We follow the convention
+   `[type/scope]`. For example `fix/dropdown-hook` or `docs/menu-typo`. `type`
+   can be either `docs`, `fix`, `feat`, `build`, or any other conventional
+   commit type. `scope` is just a short id that describes the scope of work.
+
+3. Make and commit your changes following the
+   [commit convention](https://github.com/nextui-org/nextui/blob/main/CONTRIBUTING.md#commit-convention).
+   As you develop, you can run `yarn pkg <module> build` and
+   `yarn test packages/<module>/<component>` to make sure everything works as expected.
+
+4. Run `yarn changeset` to create a detailed description of your changes. This
+   will be used to generate a changelog when we publish an update.
+   [Learn more about Changeset](https://github.com/atlassian/changesets/tree/master/packages/cli).
+   Please note that you might have to run `git fetch origin main:master` (where
+   origin will be your fork on GitHub) before `yarn changeset` works.
+5. Also, if you provide `jsx` snippets to the changeset, please turn off the
+   live preview by doing the following at the beginning of the snippet:
+   ` ```jsx live=false`
+
+> If you made minor changes like CI config, prettier, etc, you can run
+> `yarn changeset add --empty` to generate an empty changeset file to document
+> your changes.
+
 ## Development Setup
 
 After cloning the repository, execute the following commands in the root folder:

README.md

@@ -1 +0,0 @@
-packages/react/README.md

README.md

@@ -0,0 +1,100 @@
+<p align="center">
+  <a href="https://nextui.org">
+      <img width="20%" src="https://raw.githubusercontent.com/nextui-org/nextui/main/apps/docs/public/isotipo.png" alt="nextui" />
+      <h1 align="center">NextUI</h1>
+  </a>
+</p>
+</br>
+<p align="center">
+  <a href="https://github.com/jrgarciadev/nextui/blob/main/LICENSE">
+    <img src="https://img.shields.io/apm/l/atomic-design-ui.svg?style=flat" alt="License">
+  </a>
+  <a href="https://codecov.io/gh/jrgarciadev/nextui">
+    <img src="https://codecov.io/gh/jrgarciadev/nextui/branch/main/graph/badge.svg?token=QJF2QKR5N4" alt="codecov badge">
+  </a>
+  <a href="https://github.com/nextui-org/nextui/actions/workflows/main.yaml">
+    <img src="https://github.com/nextui-org/nextui/actions/workflows/main.yaml/badge.svg" alt="CI/CD nextui">
+  </a>
+  <a href="https://www.npmjs.com/package/@nextui-org/react">
+    <img src="https://img.shields.io/npm/dm/@nextui-org/react.svg?style=flat-round" alt="npm downloads">
+  </a>
+</p>
+
+<p align="center">
+  <a rel="noopener noreferrer" target="_blank" href="https://www.vercel.com?utm_source=nextui&utm_marketing=oss">
+    <img height="34px" src="https://raw.githubusercontent.com/nextui-org/nextui/main/apps/docs/public/deployed-on-vercel.svg" alt="Deployed on vercel">
+  </a>
+</p>
+
+> **NOTE:** This is a community project, not associated with [Vercel](https://vercel.com), but does get some inspiration from there.
+
+## Getting Started
+
+Visit <a aria-label="nextui learn" href="https://nextui.org/learn">https://nextui.org/guide</a> to get started with NextUI.
+
+## Documentation
+
+Visit [https://nextui.org/docs](https://nextui.org/docs) to view the full documentation.
+
+## Quick Start
+
+1. Installation: Inside your React project directory, install NextUI by running either of the following:
+
+```bash
+yarn add @nextui-org/react
+# or
+npm i @nextui-org/react
+```
+
+2. Setup: For NextUI to work correctly, you need to set up the `NextUIProvider` at the root of your application.
+
+Go to the root of your application and do this:
+
+```jsx
+import {NextUIProvider} from '@nextui-org/react';
+
+const Application = () => (
+  <NextUIProvider>
+    <AppComponent /> // ---> Your App Component
+  </NextUIProvider>
+);
+```
+
+3. Using NextUI components: Once NextUI is installed you can use any of the components as follows.
+   NextUI uses tree-shaking so the unused modules will not be included in the bundle during the build process and
+   each component is exported separately.
+
+```jsx
+import {Button} from '@nextui-org/react';
+
+const Component = () => <Button>Click me</Button>;
+```
+
+4. NextUI allows to manually import components if you need. E.g.
+
+```jsx
+import Button from '@nextui-org/react/button';
+
+const Component = () => <Button>Click me</Button>;
+```
+
+### Community
+
+We're excited to see the community adopt NextUI, raise issues, and provide feedback.
+Whether it's a feature request, bug report, or a project to showcase, please get involved!
+
+- [Discord](https://discord.gg/9b6yyZKmH4)
+- [Twitter](https://twitter.com/getnextui)
+- [GitHub Discussions](https://github.com/nextui-org/nextui/discussions)
+
+## Contributing
+
+Contributions are always welcome!
+
+See [CONTRIBUTING.md](https://github.com/nextui-org/nextui/blob/main/CONTRIBUTING.MD) for ways to get started.
+
+Please adhere to this project's [CODE_OF_CONDUCT](https://github.com/nextui-org/nextui/blob/main/CODE_OF_CONDUCT.md).
+
+## License
+
+[MIT](https://choosealicense.com/licenses/mit/)

package.json

@@ -1,10 +1,18 @@
 {
-  "name": "root",
+  "name": "nextui",
   "private": true,
   "workspaces": [
     "apps/*",
     "packages/*"
   ],
+  "author": {
+    "name": "Junior Garcia",
+    "email": "jrgarciadev@gmail.com"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/nextui-org/nextui"
+  },
   "engines": {
     "node": ">=12.13.0 <18.0.0",
     "npm": ">=7.9.0",
@@ -13,13 +21,14 @@
   "scripts": {
     "dev:docs": "turbo run dev --scope=@nextui-org/docs --no-deps",
     "dev:nextui": "turbo run dev --scope=@nextui-org/react --no-deps",
-    "sb": "turbo run sb --scope=@nextui-org/react-storybook --no-deps",
     "start:docs": "turbo run start --scope=@nextui-org/docs --no-deps",
-    "start:sb": "turbo run start --scope=@nextui-org/react-storybook --no-deps",
     "build:docs": "turbo run build --scope=@nextui-org/docs",
     "build": "turbo run build",
     "build:nextui": "turbo run build --scope=@nextui-org/react --no-deps",
-    "build:sb": "turbo run build --scope=@nextui-org/react-storybook --no-deps",
+    "sb": "yarn storybook",
+    "storybook": "start-storybook -p 6006 --no-manager-cache",
+    "build:sb": "tyarn build-storybook",
+    "start:sb": "yarn build-storybook && http-server ./storybook-static",
     "turbo:graph": "yarn build --graph=dependency-graph.png",
     "turbo:clean": "rm -rf ./node_modules/.cache/turbo",
     "deploy:docs": "yarn workspace @nextui-org/docs deploy",
@@ -42,13 +51,31 @@
     "cov:co": "yarn coverage:codecov",
     "cov:up": "yarn workspace @nextui-org/react coverage-update",
     "build:docs-meta": "node scripts/update-index-docs.js",
-    "clean": "yarn turbo:clean"
+    "clean": "yarn turbo:clean",
+    "create:pkg": "plop component",
+    "version": "changeset version",
+    "release": "changeset publish",
+    "version:dev": "changeset version --snapshot dev",
+    "release:dev": "changeset publish --tag dev"
   },
-  "devDependencies": {
+  "dependencies": {
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
+    "@types/react": "17.0.33",
+    "@types/react-dom": "17.0.9",
     "@docusaurus/utils": "2.0.0-beta.3",
+    "@babel/core": "^7.16.7",
+    "@storybook/addon-a11y": "^6.5.3",
+    "@storybook/addon-actions": "^6.5.3",
+    "@storybook/addon-essentials": "^6.5.3",
+    "@storybook/addon-links": "^6.5.3",
+    "@storybook/addon-storysource": "^6.5.3",
+    "@storybook/builder-webpack5": "^6.5.3",
+    "@storybook/manager-webpack5": "^6.5.3",
+    "@storybook/react": "^6.5.3",
+    "babel-loader": "^8.2.3",
+    "storybook-dark-mode": "^1.1.0",
     "@types/node": "^14.14.41",
-    "@types/react": "^17.0.2",
-    "@types/react-dom": "^17.0.2",
     "@types/shelljs": "^0.8.9",
     "@types/styled-jsx": "^2.2.8",
     "@types/uuid": "^8.3.1",
@@ -83,15 +110,21 @@
     "prettier-eslint-cli": "^5.0.1",
     "shelljs": "^0.8.4",
     "ts-node": "^10.1.0",
-    "turbo": "^1.0.24",
-    "typescript": "4.6.2",
-    "uuid": "^8.3.2"
+    "tsup": "6.1.3",
+    "plop": "3.1.1",
+    "turbo": "1.3.4",
+    "typescript": "^4.7.4",
+    "find-up": "^6.3.0",
+    "uuid": "^8.3.2",
+    "rimraf": "^3.0.2",
+    "@changesets/changelog-github": "0.4.6",
+    "@changesets/cli": "2.24.1",
+    "@changesets/get-release-plan": "3.0.12",
+    "@changesets/types": "5.1.0",
+    "gray-matter": "^4.0.3"
   },
   "resolutions": {
     "@types/react": "17.0.33"
   },
-  "dependencies": {
-    "gray-matter": "^4.0.3"
-  },
   "packageManager": "yarn@1.22.17"
 }

packages/components/autocomplete/README.md

@@ -0,0 +1,24 @@
+# @nextui-org/autocomplete
+
+A Quick description of the component
+
+> This is an internal utility, not intended for public usage.
+
+## Installation
+
+```sh
+yarn add @nextui-org/autocomplete
+# or
+npm i @nextui-org/autocomplete
+```
+
+## Contribution
+
+Yes please! See the
+[contributing guidelines](https://github.com/nextui-org/nextui/blob/master/CONTRIBUTING.md)
+for details.
+
+## Licence
+
+This project is licensed under the terms of the
+[MIT license](https://github.com/nextui-org/nextui/blob/master/LICENSE).

packages/components/autocomplete/__tests__/autocomplete.test.tsx

@@ -0,0 +1,12 @@
+import * as React from "react";
+import {render} from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import Autocomplete from "../src";
+
+describe("Autocomplete", () => {
+  test("should render correctly", () => {
+   const wrapper = render(<Autocomplete />);
+
+    expect(() => wrapper.unmount()).not.toThrow();
+  });
+});

packages/components/autocomplete/clean-package.config.json

@@ -0,0 +1,3 @@
+{ "replace": { "main": "dist/index.cjs.js", "module": "dist/index.esm.js",
+"types": "dist/index.d.ts", "exports": { ".": { "import": "./dist/index.esm.js",
+"require": "./dist/index.cjs.js" }, "./package.json": "./package.json" } } }

packages/components/autocomplete/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@nextui-org/autocomplete",
+  "version": "1.0.0-beta.11",
+  "description": "autocomplete",
+  "keywords": [
+    "autocomplete"
+  ],
+  "author": "Junior Garcia <jrgarciadev@gmail.com>",
+  "homepage": "https://nextui.org",
+  "license": "MIT",
+  "main": "src/index.ts",
+  "sideEffects": false,
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/nextui-org/nextui.git",
+    "directory": "components/autocomplete"
+  },
+  "bugs": {
+    "url": "https://github.com/nextui-org/nextui/issues"
+  },
+  "scripts": {
+    "build": "tsup src/index.ts --format=esm,cjs --dts",
+    "dev": "yarn build:fast -- --watch",
+    "clean": "rimraf dist .turbo",
+    "typecheck": "tsc --noEmit",
+    "build:fast": "tsup src/index.ts --format=esm,cjs",
+    "prepack": "clean-package",
+    "postpack": "clean-package restore"
+  },
+  "peerDependencies": {
+    "react": ">=16.8.0"
+  },
+  "devDependencies": {
+    "@nextui-org/system": "workspace:*",
+    "@nextui-org/shared-utils": "workspace:*",
+    "@nextui-org/shared-css-utils": "workspace:*",
+    "@nextui-org/dom-utils": "workspace:*",
+    "clean-package": "2.1.1",
+    "react": "^17.0.2"
+  }
+}

packages/components/autocomplete/src/autocomplete.styles.ts

@@ -0,0 +1,6 @@
+import {styled, VariantProps} from "@nextui-org/system";
+import {cssFocusVisible, cssHideShowIn} from "@nextui-org/shared-css-utils";
+
+export const StyledAutocomplete = styled("div", {});
+
+export type AutocompleteVariantsProps = VariantProps<typeof StyledAutocomplete>;

packages/components/autocomplete/src/autocomplete.tsx

@@ -0,0 +1,22 @@
+import * as React from "react";
+import {HTMLNextUIProps, forwardRef} from "@nextui-org/system";
+import {useDOMRef} from "@nextui-org/dom-utils";
+import {__DEV__} from "@nextui-org/shared-utils";
+
+import { StyledAutocomplete } from "./autocomplete.styles";
+
+export interface AutocompleteProps extends HTMLNextUIProps<"div"> {}
+
+const Autocomplete = forwardRef<AutocompleteProps, "div">((props, ref) => {
+  const domRef = useDOMRef(ref);
+
+  return <StyledAutocomplete ref={domRef} />;
+});
+
+if (__DEV__) {
+  Autocomplete.displayName = "NextUI.Autocomplete";
+}
+
+Autocomplete.toString = () => ".nextui-autocomplete";
+
+export default Autocomplete;

packages/components/autocomplete/src/index.ts

@@ -0,0 +1,11 @@
+import Autocomplete from "./autocomplete";
+export * from "./use-autocomplete";
+
+// export styled components
+export { StyledAutocomplete } from "./autocomplete.styles";
+
+// export types
+export type { AutocompleteProps } from "./autocomplete";
+
+// export component
+export { default as Autocomplete } from './autocomplete';

packages/components/autocomplete/src/use-autocomplete.ts

@@ -0,0 +1,10 @@
+import * as React from "react";
+
+export interface UseAutocompleteProps {}
+
+export function useAutocomplete(props: UseAutocompleteProps) {
+  return {};
+}
+
+export type UseAutocompleteReturn = ReturnType<typeof useAutocomplete>;
+    

packages/legacy/react/package.json

@@ -35,10 +35,12 @@
   "types": "lib/types/index.d.ts",
   "sideEffects": false,
   "scripts": {
-    "clear": "rimraf ./lib ./dist ./esm",
+    "clear": "rimraf ./lib ./dist ./esm ./turbo /.coverage",
     "clear-types": "rimraf ./lib/types",
     "pre-publish": "node ./scripts/pre-publish.js",
     "publish:dry-run": "npm publish ./lib --dry-run",
+    "build_new": "JSX=1 tsup src/index.ts --dts",
+    "build_new:fast": "JSX=1 tsup src/index.ts",
     "build": "node ./scripts/build.js",
     "build:minify": "node ./scripts/minify.js",
     "build:types": "yarn tsc -p ./buildconfig -d --emitDeclarationOnly --outDir types",
@@ -46,6 +48,7 @@
     "build:webpack": "webpack --config ./buildconfig/webpack.common.js",
     "build:watch": "node ./scripts/build-watch.js",
     "dev": "yarn clear && yarn build:dev-types && yarn build:watch",
+    "typecheck": "tsc --noEmit",
     "lint": "eslint \"src/**/*.{js,ts,tsx}\"",
     "test": "jest --config jest.config.js --no-cache",
     "test-update": "jest --config jest.config.js --no-cache --update-snapshot",
@@ -54,46 +57,23 @@
     "coverage:codecov": "yarn test --coverage && codecov"
   },
   "dependencies": {
-    "@babel/runtime": "^7.6.2",
-    "@react-aria/button": "3.6.0",
-    "@react-aria/checkbox": "3.5.0",
-    "@react-aria/dialog": "3.3.0",
-    "@react-aria/focus": "3.7.0",
-    "@react-aria/i18n": "3.5.1",
-    "@react-aria/interactions": "3.10.0",
-    "@react-aria/label": "3.4.0",
-    "@react-aria/link": "3.3.1",
-    "@react-aria/menu": "3.6.0",
-    "@react-aria/overlays": "3.10.0",
-    "@react-aria/radio": "3.3.0",
-    "@react-aria/ssr": "3.3.0",
-    "@react-aria/table": "3.4.0",
-    "@react-aria/utils": "3.13.2",
-    "@react-aria/visually-hidden": "3.4.0",
-    "@react-stately/checkbox": "3.2.0",
-    "@react-stately/data": "3.6.0",
-    "@react-stately/overlays": "3.4.0",
-    "@react-stately/radio": "3.5.0",
-    "@react-stately/table": "3.3.0",
-    "@react-stately/toggle": "3.4.0",
-    "@react-stately/tree": "3.3.2",
-    "@react-types/button": "^3.6.0",
-    "@react-types/checkbox": "3.3.2",
-    "@react-types/grid": "3.1.2",
-    "@react-types/menu": "3.7.0",
-    "@react-types/overlays": "3.6.2",
-    "@react-types/shared": "3.14.0",
-    "@stitches/react": "1.2.8"
+    "@babel/runtime": "^7.6.2"
   },
   "peerDependencies": {
     "react": ">=16.8.0",
-    "react-dom": ">=16.8.0"
+    "react-dom": ">=16.8.0",
+    "react-aria": ">=3.18.0",
+    "react-stately": ">=3.16.0",
+    "@stitches/react": ">=1.2.8"
   },
   "publishConfig": {
     "directory": "lib"
   },
   "devDependencies": {
     "react": "17.0.2",
+    "react-aria": "3.18.0",
+    "react-stately": "3.16.0",
+    "@stitches/react": "1.2.8",
     "@babel/cli": "^7.14.5",
     "@babel/plugin-proposal-object-rest-spread": "^7.15.6",
     "@babel/plugin-transform-runtime": "^7.14.5",
@@ -134,7 +114,7 @@
     "rimraf": "^3.0.2",
     "terser": "5.10.0",
     "ts-jest": "^26.5.5",
-    "typescript": "4.6.2",
+    "typescript": "^4.7.4",
     "webpack": "^5.53.0",
     "webpack-bundle-analyzer": "^4.4.2",
     "webpack-cli": "^3.3.11",

packages/legacy/react/react-shim.js

@@ -0,0 +1,2 @@
+import React from "react";
+export {React};