Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Proposal] yarn to npm #4904

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 14 additions & 16 deletions .github/workflows/build-docs-site.yml
Original file line number Diff line number Diff line change
Expand Up @@ -13,31 +13,29 @@ jobs:
steps:
- uses: actions/checkout@v4

- name: Get yarn cache directory path
id: yarn-cache-dir-path
run: echo "::set-output name=dir::$(yarn cache dir)"

- uses: actions/cache@v4
id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`)
with:
path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
restore-keys: |
${{ runner.os }}-yarn-

- name: Set Node.js
uses: actions/setup-node@v4
with:
node-version: 20.x
cache: npm

- name: Cache Dependency
uses: actions/cache@v4
id: npm-cache
with:
path: "**/node_modules"
key: ${{ runner.os }}-node-${{ matrix.node-version }}-${{ hashFiles('**/package-lock.json') }}

- name: Install dependencies
run: yarn install
if: ${{ steps.cache_dependency.outputs.cache-hit != 'true' }}
run: npm ci

- name: Install docs dependencies
run: yarn --cwd docs-site install
if: ${{ steps.cache_dependency.outputs.cache-hit != 'true' }}
run: npm ci --prefix docs-site

- name: Build datepicker
run: yarn build
run: npm run build

- name: Build docs
run: yarn --cwd docs-site build
run: npm run build --prefix docs-site
30 changes: 14 additions & 16 deletions .github/workflows/deploy.yml
Original file line number Diff line number Diff line change
Expand Up @@ -10,34 +10,32 @@ jobs:
steps:
- uses: actions/checkout@v4

- name: Get yarn cache directory path
id: yarn-cache-dir-path
run: echo "::set-output name=dir::$(yarn cache dir)"

- uses: actions/cache@v4
id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`)
with:
path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
restore-keys: |
${{ runner.os }}-yarn-

- name: Set Node.js
uses: actions/setup-node@v4
with:
node-version: 20.x
cache: npm

- name: Cache Dependency
uses: actions/cache@v4
id: npm-cache
with:
path: "**/node_modules"
key: ${{ runner.os }}-node-${{ matrix.node-version }}-${{ hashFiles('**/package-lock.json') }}

- name: Install dependencies
run: yarn install
if: ${{ steps.cache_dependency.outputs.cache-hit != 'true' }}
run: npm ci --no-audit --progress=false --silent

- name: Install docs dependencies
run: yarn --cwd docs-site install
if: ${{ steps.cache_dependency.outputs.cache-hit != 'true' }}
run: npm ci --no-audit --progress=false --silent --prefix docs-site

- name: Build datepicker
run: yarn build
run: npm run build

- name: Build docs
run: yarn --cwd docs-site build
run: npm run build --prefix docs-site

- name: Deploy 🚀
uses: JamesIves/github-pages-deploy-action@v4
Expand Down
35 changes: 14 additions & 21 deletions .github/workflows/test.yml
Original file line number Diff line number Diff line change
Expand Up @@ -18,38 +18,31 @@ jobs:
steps:
- uses: actions/checkout@v4

- name: Setup kernel for react, increase watchers
run: echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p

- name: Get yarn cache directory path
id: yarn-cache-dir-path
run: echo "::set-output name=dir::$(yarn cache dir)"

- uses: actions/cache@v4
id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`)
with:
path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}

- name: Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v4
with:
node-version: ${{ matrix.node-version }}
cache: npm

- name: Cache Dependency
uses: actions/cache@v4
id: npm-cache
with:
path: "**/node_modules"
key: ${{ runner.os }}-node-${{ matrix.node-version }}-${{ hashFiles('**/package-lock.json') }}

- name: Install dependencies
run: yarn install
if: ${{ steps.cache_dependency.outputs.cache-hit != 'true' }}
run: npm ci --no-audit --progress=false --silent

- name: Check Code Formatter
run: yarn prettier:check

- name: Type Check
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Since type check by tsc is already performed at the time of rollup build and at the time of ts-jest execution, it is not necessary to perform it again here.

run: yarn type-check
run: npm run format

- name: Lint
run: yarn lint
run: npm run lint

- name: Test
run: yarn test:ci
run: npm run test:ci

- uses: codecov/codecov-action@v4
env:
Expand All @@ -59,4 +52,4 @@ jobs:
verbose: true # optional (default = false)

- name: Build
run: yarn build
run: npm run build
5 changes: 3 additions & 2 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -109,7 +109,8 @@ docs/week.md
docs/year_dropdown_options.md
docs/year_dropdown.md

# We are using Yarn
package-lock.json
# We are using npm
yarn.lock

scripts/.DS_Store
.DS_Store
2 changes: 1 addition & 1 deletion .husky/pre-commit
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

yarn precommit
npm run precommit
19 changes: 9 additions & 10 deletions CONTRIBUTING.md
Original file line number Diff line number Diff line change
Expand Up @@ -28,16 +28,15 @@ Start reading our code, and you'll get the hang of it. We optimize for readabili
Local development configuration is pretty snappy. Here's how to get set up:

1. Install/use node >=16.0.0
1. Install/use yarn <=1.x.x
1. Run `yarn link` from project root
1. Run `cd docs-site && yarn link react-datepicker`
1. Run `yarn install` from project root
1. Run `yarn build` from project root (at least the first time, this will get you the `dist` directory that holds the code that will be linked to)
1. Run `yarn start` from project root. (This command launches a documentation app and runs it as a simple webserver at http://localhost:3000.)
1. Run `npm link` from project root
1. Run `cd docs-site && npm link react-datepicker`
1. Run `npm ci` from project root
1. Run `npm run build` from project root (at least the first time, this will get you the `dist` directory that holds the code that will be linked to)
1. Run `npm run start` from project root. (This command launches a documentation app and runs it as a simple webserver at http://localhost:3000.)
1. Open new terminal window
1. Run `yarn build-dev` from project root. (This command sets up a development environment that keeps an eye on any file changes. When a file is updated, it auto-builds using the latest code.)
1. Run `npm run dev` from project root. (This command sets up a development environment that keeps an eye on any file changes. When a file is updated, it auto-builds using the latest code.)

You can run `yarn test` to execute the test suite and linters. To help you develop the component we’ve set up some tests that cover the basic functionality (can be found in `/tests`). Even though we’re big fans of testing, this only covers a small piece of the component. We highly recommend you add tests when you’re adding new functionality.
You can run `npm run test` to execute the test suite and linters. To help you develop the component we’ve set up some tests that cover the basic functionality (can be found in `/src/tests`). Even though we’re big fans of testing, this only covers a small piece of the component. We highly recommend you add tests when you’re adding new functionality.

1. After each JS change run `yarn build:js` in project root
1. After each SCSS change run `yarn run css:dev && yarn run css:modules:dev` in project root
1. After each JS change run `npm run build:js` in project root
1. After each SCSS change run `npm run dev:css && npm run dev:css:modules` in project root
23 changes: 8 additions & 15 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -36,9 +36,7 @@ import "react-datepicker/dist/react-datepicker.css";

const Example = () => {
const [startDate, setStartDate] = useState(new Date());
return (
<DatePicker selected={startDate} onChange={(date) => setStartDate(date)} />
);
return <DatePicker selected={startDate} onChange={(date) => setStartDate(date)} />;
};
```

Expand Down Expand Up @@ -69,12 +67,7 @@ See [here](https://github.com/Hacker0x01/react-datepicker/blob/main/docs/datepic
You can also include a time picker by adding the showTimeSelect prop

```js
<DatePicker
selected={date}
onChange={handleDateChange}
showTimeSelect
dateFormat="Pp"
/>
<DatePicker selected={date} onChange={handleDateChange} showTimeSelect dateFormat="Pp" />
yuki0410-dev marked this conversation as resolved.
Show resolved Hide resolved
```

Times will be displayed at 30-minute intervals by default (default configurable via timeIntervals prop)
Expand Down Expand Up @@ -134,15 +127,15 @@ The `main` branch contains the latest version of the Datepicker component.

To begin local development:

1. Run `yarn link` from project root
2. Run `cd docs-site && yarn link react-datepicker`
3. Run `yarn install` from project root
4. Run `yarn build` from project root
5. Run `yarn start` from project root
1. Run `npm link` from project root
2. Run `cd docs-site && npm link react-datepicker`
3. Run `npm ci` from project root
4. Run `npm run build` from project root
5. Run `npm run start` from project root

The last step starts documentation app as a simple webserver on http://localhost:3000.

You can run `yarn test` to execute the test suite and linters. To help you develop the component we’ve set up some tests that cover the basic functionality (can be found in `/tests`). Even though we’re big fans of testing, this only covers a small piece of the component. We highly recommend you add tests when you’re adding new functionality.
You can run `npm run test` to execute the test suite and linters. To help you develop the component we’ve set up some tests that cover the basic functionality (can be found in `/src/tests`). Even though we’re big fans of testing, this only covers a small piece of the component. We highly recommend you add tests when you’re adding new functionality.

Please refer to `CONTRIBUTING.md` file for more details about getting set up.

Expand Down
Loading
Loading