diff --git a/.browserslistrc b/.browserslistrc new file mode 100644 index 0000000..980cd0a --- /dev/null +++ b/.browserslistrc @@ -0,0 +1,7 @@ +# Browsers we support +Chrome >= 84 +Firefox >= 90 +Edge >= 84 +Safari >= 15 +iOS >= 15 +opera >= 70 diff --git a/.gitattributes b/.gitattributes new file mode 100644 index 0000000..dfe0770 --- /dev/null +++ b/.gitattributes @@ -0,0 +1,2 @@ +# Auto detect text files and perform LF normalization +* text=auto diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml index 508727c..fd99b3b 100644 --- a/.github/FUNDING.yml +++ b/.github/FUNDING.yml @@ -1,2 +1 @@ github: tannerlinsley -custom: https://youtube.com/tannerlinsley diff --git a/.github/ISSUE_TEMPLATE/bug_report.yml b/.github/ISSUE_TEMPLATE/bug_report.yml index bbe8e29..fb17d3c 100644 --- a/.github/ISSUE_TEMPLATE/bug_report.yml +++ b/.github/ISSUE_TEMPLATE/bug_report.yml @@ -1,27 +1,21 @@ name: '🐛 Bug report' -description: Report a reproducible bug or regression +description: Create a report to help us improve body: - type: markdown attributes: value: | Thank you for reporting an issue :pray:. - This issue tracker is for reporting reproducible bugs or regression's found in [tanstack-ranger](https://github.com/tanstack/ranger) - If you have a question about how to achieve or implement something and are struggling, please post a question - inside of tanstack-ranger's [Discussions tab](https://github.com/tanstack/ranger/discussions) instead of filing an issue. + This issue tracker is for reporting bugs found in `react-ranger` (https://github.com/tanstack/ranger). + If you have a question about how to achieve something and are struggling, please post a question + inside of `react-ranger` Discussions tab: https://github.com/tanstack/ranger/discussions Before submitting a new bug/issue, please check the links below to see if there is a solution or question posted there already: - - tanstack-ranger's [Discussions tab](https://github.com/tanstack/ranger/discussions) - - tanstack-ranger's [Open Issues](https://github.com/tanstack/ranger/issues?q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc) - - tanstack-ranger's [Closed Issues](https://github.com/tanstack/ranger/issues?q=is%3Aissue+sort%3Aupdated-desc+is%3Aclosed) + - `react-ranger` Issues tab: https://github.com/tanstack/ranger/issues?q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc + - `react-ranger` closed issues tab: https://github.com/tanstack/ranger/issues?q=is%3Aissue+sort%3Aupdated-desc+is%3Aclosed + - `react-ranger` Discussions tab: https://github.com/tanstack/ranger/discussions The more information you fill in, the better the community can help you. - - > ⚠️⚠️⚠️ TanStack Ranger v3 is on the horizon with beta builds and v2 is entering - > an LTS phase and will only be receiving patch-level fixes. If you are experiencing - > issues in v2 that require minor/feature or major/breaking changes, your issue will - > be redirected to v8 or possibly even closed if the issue has already been fixed in v3. - - type: textarea id: description attributes: @@ -32,28 +26,27 @@ body: - type: input id: link attributes: - label: Your minimal, reproducible example + label: Your Example Website or App description: | - Please add a link to a minimal reproduction. + Which website or app were you using when the bug happened? Note: - - Your bug may get fixed much faster if we can run your code and it doesn't have dependencies other than React. - - To create a shareable code example for web, you can use CodeSandbox (https://codesandbox.io/s/new) or Stackblitz (https://stackblitz.com/). - - Please make sure the example is complete and runnable without prior dependencies and free of unnecessary abstractions - - Feel free to fork any of the official CodeSandbox examples to reproduce your issue: https://github.com/tanstack/ranger/tree/main/examples/ - - For React Native, you can use: https://snack.expo.dev/ - - For TypeScript related issues only, a TypeScript Playground link might be sufficient: https://www.typescriptlang.org/play - - Please read these tips for providing a minimal example: https://stackoverflow.com/help/mcve. - placeholder: | - e.g. Code Sandbox, Stackblitz, Expo Snack or TypeScript playground + - Please provide a link via our pre-configured [Stackblitz project](https://stackblitz.com/github/tanstack/ranger/tree/beta/examples/react/quickstart?file=src%2Fmain.tsx) or a link to a repo that can reproduce the issue. + - Your bug will may get fixed much faster if we can run your code and it doesn't have dependencies other than the `react-ranger` npm package / dependency. + - To create a shareable code example you can use Stackblitz. Please no localhost URLs. + - Please read these tips for providing a minimal example: https://stackoverflow.com/help/mcve. + placeholder: reproduction URL validations: required: true - type: textarea id: steps attributes: - label: Steps to reproduce + label: Steps to Reproduce the Bug or Issue description: Describe the steps we have to take to reproduce the behavior. placeholder: | - 1. Go to '...' 2. Click on '....' 3. Scroll down to '....' 4. See error + 1. Go to '...' + 2. Click on '....' + 3. Scroll down to '....' + 4. See error validations: required: true - type: textarea @@ -62,20 +55,9 @@ body: label: Expected behavior description: Provide a clear and concise description of what you expected to happen. placeholder: | - As a user, I expected **_ behavior but i am seeing _** + As a user, I expected ___ behavior but i am seeing ___ validations: required: true - - type: dropdown - attributes: - options: - - Every time - - Often - - Sometimes - - Only once - label: How often does this bug happen? - description: | - Following the repro steps above, how easily are you able to reproduce this bug? - options: - Every time - Often - Sometimes - Only once - type: textarea id: screenshots_or_videos attributes: @@ -90,42 +72,14 @@ body: id: platform attributes: label: Platform - description: | - Please let us know which Operting System, Browser and Browser version you were using when the issue occurred. - placeholder: | - - OS: [e.g. macOS, Windows, Linux, iOS, Android] - Browser: [e.g. Chrome, Safari, Firefox, React Native] - Version: [e.g. 91.1] - validations: - required: true - - type: input - id: library-version - attributes: - label: tanstack-ranger version - description: | - Please let us know the exact version of tanstack-ranger you were using when the issue occurred. Please don't just put in "latest", as this is subject to change. - placeholder: | - e.g. v3.30.1 + value: | + - OS: [e.g. macOS, Windows, Linux] + - Browser: [e.g. Chrome, Safari, Firefox] + - Version: [e.g. 91.1] validations: required: true - - type: input - id: ts-version - attributes: - label: TypeScript version - description: | - If you are using TypeScript, please let us know the exact version of TypeScript you were using when the issue occurred. - placeholder: | - e.g. v4.5.4 - type: textarea id: additional attributes: label: Additional context description: Add any other context about the problem here. - - type: checkboxes - id: agrees-to-terms - attributes: - label: Terms & Code of Conduct - description: By submitting this issue, you agree to follow our Code of Conduct and can verify that you have followed the requirements outlined above to the best of your ability. - options: - - label: I agree to follow this project's Code of Conduct - required: true - - label: I understand that if my bug cannot be reliable reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed. - required: true diff --git a/.github/ISSUE_TEMPLATE/config.yml b/.github/ISSUE_TEMPLATE/config.yml index b847778..0fba2ad 100644 --- a/.github/ISSUE_TEMPLATE/config.yml +++ b/.github/ISSUE_TEMPLATE/config.yml @@ -1,8 +1,11 @@ blank_issues_enabled: false contact_links: - - name: Feature Requests & Questions - url: https://github.com/tanstack/ranger/discussions + - name: 🤔 Feature Requests & Questions + url: https://github.com/tanstack/router/discussions about: Please ask and answer questions here. - - name: Community Chat + - name: 💬 Community Chat url: https://discord.gg/mQd7egN - about: A dedicated discord server hosted by TanStack + about: A dedicated discord server hosted by Tanner Linsley + - name: 💬 Tanstack Twitter + url: https://twitter.com/tan_stack + about: Stay up to date with new releases of our libraries diff --git a/.npmrc b/.npmrc new file mode 100644 index 0000000..7ec596c --- /dev/null +++ b/.npmrc @@ -0,0 +1 @@ +//registry.npmjs.org/:_authToken=$NPM_TOKEN \ No newline at end of file diff --git a/.nvmrc b/.nvmrc index 28193ca..4ec320b 100644 --- a/.nvmrc +++ b/.nvmrc @@ -1 +1 @@ -v12.13.1 +v14.17.6 diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md new file mode 100644 index 0000000..a33180d --- /dev/null +++ b/CONTRIBUTING.md @@ -0,0 +1,22 @@ +# Contributing + +- Clone the repo + - `gh repo clone TanStack/ranger` +- Ensure `node` is installed + - https://nodejs.org/en/ +- Ensure `pnpm` is installed + - https://pnpm.io/installation + - Why? We use `pnpm` to manage workspace dependencies. It's easily the best monorepo/workspace experience available as of when this was written. +- Install dependencies + - `pnpm install` + - This installs dependencies for all of the packages in the monorepo, even examples! + - Dependencies inside of the packages and examples are automatically linked together as local/dynamic dependencies. +- Run the build or dev watcher + - `pnpm build` or + - `pnpm dev` +- Navigate to an example + - `cd examples/react/basic` +- Run the example + - `pnpm dev` +- Make changes to the code + - If you ran `pnpm dev` the dev watcher will automatically rebuild the code that has changed diff --git a/LICENSE b/LICENSE index 1869e21..77eca38 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ MIT License -Copyright (c) 2021-present Tanner Linsley +Copyright (c) 2021 Tanner Linsley Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/README.md b/README.md index 4f4044f..c6d9a6d 100644 --- a/README.md +++ b/README.md @@ -1,23 +1,23 @@ -![React Ranger Header](https://github.com/tannerlinsley/react-ranger/raw/master/media/header.png) +![React Ranger Header](https://github.com/tannerlinsley/react-ranger/raw/main/media/header.png) - + Hooks for building range and multi-range sliders in React #TanStack - - + + semantic-release - + Join the discussion on Github - - + + @@ -25,7 +25,7 @@ Hooks for building range and multi-range sliders in React Enjoy this library? Try them all! [React Table](https://github.com/tannerlinsley/react-table), [React Query](https://github.com/tannerlinsley/react-query), [React Form](https://github.com/tannerlinsley/react-form), [React Charts](https://github.com/tannerlinsley/react-charts)

- +

## Visit [/docs](https://github.com/tanstack/react-ranger/tree/alpha/docs) for docs, guides, API and more! diff --git a/babel.config.js b/babel.config.js index 45ac68d..579ba2e 100644 --- a/babel.config.js +++ b/babel.config.js @@ -3,24 +3,31 @@ const cjs = NODE_ENV === 'test' || BABEL_ENV === 'commonjs' const loose = true module.exports = { - targets: 'defaults, not ie 11, not ie_mob 11', presets: [ [ - '@babel/preset-env', + '@babel/env', { loose, modules: false, + bugfixes: true, + // useBuiltIns: false, + // exclude: ['@babel/plugin-transform-regenerator'], }, ], + '@babel/react', '@babel/preset-typescript', ], - plugins: [cjs && ['@babel/transform-modules-commonjs', { loose }]].filter( - Boolean, - ), - overrides: [ - { - include: ['./packages/react-ranger/**'], - presets: ['@babel/preset-react'], - }, - ], + plugins: [ + // 'babel-plugin-transform-async-to-promises', + cjs && ['@babel/transform-modules-commonjs', { loose }], + // [ + // '@babel/transform-runtime', + // { + // useESModules: !cjs, + // version: require('./package.json').devDependencies[ + // '@babel/runtime' + // ].replace(/^[^0-9]*/, ''), + // }, + // ], + ].filter(Boolean), } diff --git a/lerna.json b/lerna.json new file mode 100644 index 0000000..427ac24 --- /dev/null +++ b/lerna.json @@ -0,0 +1,6 @@ +{ + "packages": ["packages/*"], + "version": "0.0.0", + "npmClient": "yarn", + "useWorkspaces": true +} diff --git a/package.json b/package.json index dc35c13..24425c9 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "private": true, - "repository": "https://github.com/TanStack/ranger.git", + "repository": "https://github.com/tanstack/ranger.git", "scripts": { "clean-dist": "pnpm -rc --parallel exec 'rm -rf build dist'", "clean-all": "pnpm -rc --parallel exec 'rm -rf build dist node_modules'", diff --git a/packages/ranger/src/index.ts b/packages/ranger/src/index.ts index 8d4ff79..84f4116 100644 --- a/packages/ranger/src/index.ts +++ b/packages/ranger/src/index.ts @@ -1,10 +1,10 @@ import { linearInterpolator, getBoundingClientRect, sortNumList } from './utils' -type RangerChangeEvent = ( +export type RangerChangeEvent = ( instance: Ranger, ) => void -type RangerInterpolator = { +export type RangerInterpolator = { getPercentageForValue: (val: number, min: number, max: number) => number getValueForClientX: ( clientX: number, @@ -14,7 +14,7 @@ type RangerInterpolator = { ) => number } -type RangerClassConfig = { +export type RangerClassConfig = { getRangerElement: () => TTrackElement | null values: ReadonlyArray diff --git a/packages/react-ranger/src/index.tsx b/packages/react-ranger/src/index.tsx index e1cdb28..2f8ec6a 100644 --- a/packages/react-ranger/src/index.tsx +++ b/packages/react-ranger/src/index.tsx @@ -31,5 +31,3 @@ export function useRanger( return instance } - -export type { Ranger } diff --git a/rollup.config.ts b/rollup.config.ts index f6b252e..ec7396f 100644 --- a/rollup.config.ts +++ b/rollup.config.ts @@ -1,6 +1,7 @@ import { RollupOptions } from 'rollup' import babel from '@rollup/plugin-babel' import { terser } from 'rollup-plugin-terser' +// @ts-ignore import size from 'rollup-plugin-size' import visualizer from 'rollup-plugin-visualizer' import replace from '@rollup/plugin-replace' @@ -186,7 +187,7 @@ function umdProd({ sourcemap: true, file: `${packageDir}/build/umd/index.production.js`, name: jsName, - // globals, + globals, banner, }, plugins: [ diff --git a/scripts/config.ts b/scripts/config.ts index b8f895a..ed16df3 100644 --- a/scripts/config.ts +++ b/scripts/config.ts @@ -1,7 +1,7 @@ import path from 'path' import { BranchConfig, Package } from './types' -// TODO: List your npm packages here. The first package will be used as the versioner. +// TODO: List your npm packages here. export const packages: Package[] = [ { name: '@tanstack/ranger', diff --git a/scripts/tsconfig.json b/scripts/tsconfig.json index 922828d..2899ee9 100644 --- a/scripts/tsconfig.json +++ b/scripts/tsconfig.json @@ -7,8 +7,7 @@ "strict": true, "noImplicitAny": true, "skipLibCheck": true, - "checkJs": true, - "strictNullChecks": true + "checkJs": true }, "ts-node": { "transpileOnly": true, diff --git a/scripts/utils.ts b/scripts/utils.ts deleted file mode 100644 index b42cd75..0000000 --- a/scripts/utils.ts +++ /dev/null @@ -1,6 +0,0 @@ -export function getPackageDir(packageName: string) { - return packageName - .split('/') - .filter((d) => !d.startsWith('@')) - .join('/') -} diff --git a/tsconfig.base.json b/tsconfig.base.json index 77acc35..3e407a6 100644 --- a/tsconfig.base.json +++ b/tsconfig.base.json @@ -1,4 +1,3 @@ - { "compilerOptions": { "lib": ["DOM", "DOM.Iterable", "ES2020"], @@ -7,22 +6,20 @@ "moduleResolution": "node", "allowSyntheticDefaultImports": true, "strict": true, - "noImplicitAny": true, - "noImplicitReturns": false, - "noImplicitThis": true, - "noUnusedLocals": true, - "noUnusedParameters": true, "noUncheckedIndexedAccess": true, "strictNullChecks": true, "jsx": "react", "declaration": true, "emitDeclarationOnly": true, + "noImplicitReturns": true, "esModuleInterop": true, "skipLibCheck": true, "baseUrl": ".", "paths": { - "@tanstack/react-ranger": ["packages/react-ranger/src"], - "@tanstack/ranger": ["packages/ranger/src"] + "@tanstack/router": ["packages/router"], + "@tanstack/react-router": ["packages/react-router"], + "@tanstack/react-router-devtools": ["packages/react-router-devtools"], + "@tanstack/router-cli": ["packages/router-cli"] } } }