From 18774b42e3c8e1e899978fe9f16a4d123adee803 Mon Sep 17 00:00:00 2001 From: Geireann Lindfield Roberts Date: Wed, 1 Jan 2025 22:32:19 -0800 Subject: monorepo setup --- README.md | 32 ++++++++++++++++++++++++++------ 1 file changed, 26 insertions(+), 6 deletions(-) (limited to 'README.md') diff --git a/README.md b/README.md index 0be27db8c..e5a80933d 100644 --- a/README.md +++ b/README.md @@ -1,8 +1,28 @@ -# Starter Project -Install Node.js, then, from the project directory, run +# Dash Monorepo -* `npm install` -* `npm start` -* goto `http://localhost:1050` +This monorepo contains: -Note: `npm start` compiles and runs the application in debug mode, meaning that when you edit and save the source files, it will re-compile and reload the browser window automatically. +- Dash web application (root directory) +- Dash Component library (`packages/components`) + +## Getting Started + +1. Install dependencies: `npm install` +2. Start local development: `npm start` and go to `http://localhost:1050` +3. Open Storybook: `npm run storybook` + +## Local Development Setup + +1. Download **`nvm`** or directly install **`node`** and **`npm`** +2. Download `node` and `npm` +3. Download `mongoDB` [Mac](https://fastdl.mongodb.org/osx/mongodb-macos-x86_64-4.2.3.tgz), [Windows x64](https://fastdl.mongodb.org/win32/mongodb-win32-x86_64-2012plus-4.2.3-signed.msi). Look [here](https://www.mongodb.com/download-center/community) for Linux and other installations. To "install" this, it's platform dependent: + + - For MacOS, run `*sudo cp path/to/unzipped/binaries/bin/* /usr/local/bin/*` + - so probably `/Users//Downloads/mongodb-macos-x86_64-4.2.3/bin`. `cp` is just the command line version of copy, so you're copying the binaries that you downloaded from the internet into a folder the terminal knows about so that you can invoke them just by their name, without their path. `*sudo*` is short for *super user do* and is only a Mac thing, so you'll have to enter the password you'd use to unlock your machine, and then you'll be able to carry out the privileged copy. + - For MacOS you will also need to create a folder inside your home directory (`/Users/`) called `data` and inside of that create another empty folder called `db` + - For Windows, you should be good to go by running the installer. Just be sure that if you ever see an `*Add to Path*` checkbox in the installer, check it. + +4. Create an empty folder in `src/server` called `public` and then create another empty folder within it called `files` +5. Install all of the packages into `node_modules` using `npm install` +6. Run `Dash-Web` locally by running `npm start` which should open it at `localhost:1050` + 1. Note that you need to run mongo first! This can be done by opening a separate terminal window and entering `mongod`. If this does not work you may need to try running `mongod --dbpath=`. If it runs successfully, you should see a bunch of stuff print out ending in a line that says `SHARDING` -- cgit v1.2.3-70-g09d2 From 119b22ba59e886c2d59bc7ed5fa2551edf922df8 Mon Sep 17 00:00:00 2001 From: Geireann Lindfield Roberts Date: Wed, 1 Jan 2025 22:55:24 -0800 Subject: update READMEs --- README.md | 74 ++++++++++++++++++++++++++++++++-------- packages/components/README.md | 79 +++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 138 insertions(+), 15 deletions(-) create mode 100644 packages/components/README.md (limited to 'README.md') diff --git a/README.md b/README.md index e5a80933d..a603706bf 100644 --- a/README.md +++ b/README.md @@ -1,28 +1,72 @@ # Dash Monorepo +## Project Structure + This monorepo contains: - Dash web application (root directory) - Dash Component library (`packages/components`) -## Getting Started +## Quick Start 1. Install dependencies: `npm install` -2. Start local development: `npm start` and go to `http://localhost:1050` -3. Open Storybook: `npm run storybook` +2. Start local development server: `npm start` + - Visit `http://localhost:1050/home` +3. Start Storybook: `npm run storybook` + - Visit `http://localhost:6006/` + +## Development Setup Requirements + +### 1. Node.js Environment + +- Install **`nvm`** (recommended) or install **`node`** and **`npm`** directly + +### 2. MongoDB Setup + +Download MongoDB: + +- [Mac](https://fastdl.mongodb.org/osx/mongodb-macos-x86_64-4.2.3.tgz) +- [Windows x64](https://fastdl.mongodb.org/win32/mongodb-win32-x86_64-2012plus-4.2.3-signed.msi) +- [Other platforms](https://www.mongodb.com/download-center/community) + +#### MacOS Installation + +1. Copy MongoDB binaries: + ```bash + sudo cp /path/to/mongodb/bin/* /usr/local/bin/ + ``` +2. Create required directories: + ```bash + mkdir -p ~/data/db + ``` + +#### Windows Installation + +- Run the installer +- Ensure "Add to Path" is selected during installation -## Local Development Setup +### 3. Project Setup -1. Download **`nvm`** or directly install **`node`** and **`npm`** -2. Download `node` and `npm` -3. Download `mongoDB` [Mac](https://fastdl.mongodb.org/osx/mongodb-macos-x86_64-4.2.3.tgz), [Windows x64](https://fastdl.mongodb.org/win32/mongodb-win32-x86_64-2012plus-4.2.3-signed.msi). Look [here](https://www.mongodb.com/download-center/community) for Linux and other installations. To "install" this, it's platform dependent: +1. Create required directories: + ```bash + mkdir -p src/server/public/files + ``` +2. Install dependencies: + ```bash + npm install + ``` - - For MacOS, run `*sudo cp path/to/unzipped/binaries/bin/* /usr/local/bin/*` - - so probably `/Users//Downloads/mongodb-macos-x86_64-4.2.3/bin`. `cp` is just the command line version of copy, so you're copying the binaries that you downloaded from the internet into a folder the terminal knows about so that you can invoke them just by their name, without their path. `*sudo*` is short for *super user do* and is only a Mac thing, so you'll have to enter the password you'd use to unlock your machine, and then you'll be able to carry out the privileged copy. - - For MacOS you will also need to create a folder inside your home directory (`/Users/`) called `data` and inside of that create another empty folder called `db` - - For Windows, you should be good to go by running the installer. Just be sure that if you ever see an `*Add to Path*` checkbox in the installer, check it. +### 4. Running the Application -4. Create an empty folder in `src/server` called `public` and then create another empty folder within it called `files` -5. Install all of the packages into `node_modules` using `npm install` -6. Run `Dash-Web` locally by running `npm start` which should open it at `localhost:1050` - 1. Note that you need to run mongo first! This can be done by opening a separate terminal window and entering `mongod`. If this does not work you may need to try running `mongod --dbpath=`. If it runs successfully, you should see a bunch of stuff print out ending in a line that says `SHARDING` +1. Start MongoDB in a separate terminal: + ```bash + mongod + ``` + If that fails, try: + ```bash + mongod --dbpath=/path/to/data/db + ``` +2. Start the application: + ```bash + npm start + ``` diff --git a/packages/components/README.md b/packages/components/README.md new file mode 100644 index 000000000..9721cffa6 --- /dev/null +++ b/packages/components/README.md @@ -0,0 +1,79 @@ +# Dash Component Library + +A shared component library for the Dash web application. + +## Quick Start + +1. Install dependencies: + + ```bash + npm install + ``` + +2. Run Storybook to view components: + ```bash + npm run storybook + ``` + Visit `http://localhost:6006` + +## Development + +### Available Scripts + +- `npm run storybook` - Start Storybook development server +- `npm run build-storybook` - Build Storybook for production + +### Creating New Components + +1. Create a new component directory in `src/components` +2. Include: + - Component file (`.tsx`) + - Stories file (`.stories.tsx`) + - Styles file (`.scss`) + +### Using SCSS + +- Component styles should be placed in `.scss` files +- Use CSS Modules to avoid style conflicts +- Import styles in your component: + ```typescript + import styles from './YourComponent.scss'; + ``` + +## Usage in Main Dash Application + +### Importing Components + +```typescript +// Import specific components +import { Button } from '@dash/components'; + +// Usage +function MyComponent() { + return ( + + ); +} +``` + +## Component Guidelines + +- Each component should be fully typed with TypeScript +- Include PropTypes and default props +- Write stories for all component variants +- Include unit tests for component logic +- Follow the established design system +- Document props and usage in stories + +## Project Structure + +``` +packages/components/ +├── .storybook/ # Storybook configuration +├── src/ +│ ├── components/ # React components +│ ├── styles/ # Shared styles +│ └── utils/ # Utility functions +├── package.json +└── tsconfig.json +``` -- cgit v1.2.3-70-g09d2