profile
viewpoint
Anurag Hazra anuraghazra timelessco India http://anuraghazra.github.io Javascript Lover | Canvas, Web Interactivity, Web Physics Simulations, all kind of fun stuff. #CreativeCoder

anuraghazra/anuraghazra.github.io 135

My Portfolio Site | Made With @Gatsbyjs

anuraghazra/BugVilla 106

Track, Manage & Kill Bugs Effectively :knife: :beetle:

anuraghazra/CanvasFun 47

:heart: Creative Coding Projects

anuraghazra/Atomic.js 13

:collision: Atomic.js | Greatly Simple Physics Engine For Javascript

anuraghazra/Candy.js 6

:candy: Canvas Rendering Engine inspired by p5js :lollipop:

Aju100/2k76 3

2k76 CS community

anuraghazra/awesome-github-profile-readme 3

A curated list of awesome Github Profile READMEs

anuraghazra/AnuReact 2

Just a minimal react clone

anuraghazra/build-your-own-x 2

🤓 Build your own (insert technology here)

startedanime-dl/anime-downloader

started time in 14 hours

pull request commentanuraghazra/github-readme-stats

Adding fadedrose theme

Theme preview (bot)

title-color: <code>#a15773</code>

icon-color: <code>#ccb4cb</code>

text-color: <code>#bc8a9d</code>

bg-color: <code>#ebeaf5</code>

olivia1117

comment created time in 14 hours

pull request commentanuraghazra/github-readme-stats

Adding fadedrose theme

Theme preview (bot)

title-color: <code>##a15773</code>

icon-color: <code>##ccb4cb</code>

text-color: <code>##bc8a9d</code>

bg-color: <code>##ebeaf5</code>

olivia1117

comment created time in 14 hours

push eventanuraghazra/github-readme-stats

Vinicius Lago Gehrke

commit sha a15fe13ad6eff8f0f2562da563fde3f16e18a1aa

chore(docs): corrected a basic typo (#586)

view details

push time in 15 hours

pull request commentanuraghazra/github-readme-stats

corrected a basic typo

Thanks @ViniciusLagoGehrke

ViniciusLagoGehrke

comment created time in 15 hours

push eventanuraghazra/github-readme-stats

Panagiotis

commit sha 57e9d5f6e007adc29ec0566ea6710be5550a5b83

feat(translation): added Greek card translation (#584)

view details

push time in 15 hours

PR merged anuraghazra/github-readme-stats

Greek translation

Added a Greek translation for widgets (locale: el)

+11 -0

2 comments

1 changed file

panosru

pr closed time in 15 hours

pull request commentanuraghazra/github-readme-stats

Greek translation

hey @panosru thanks for the PR!

panosru

comment created time in 15 hours

push eventanuraghazra/github-readme-stats

José Borges

commit sha 805f1c4baced24b6aaf1ae7211420f7082a1e9d7

feat: added include Portuguese (Portugal) translations to cards (#570) Updated translations.js to include Portuguese (Portugal) translations.

view details

push time in 21 hours

PR merged anuraghazra/github-readme-stats

Updated translations.js to include Portuguese (Portugal) translations. hacktoberfest-accepted

Updated translations.js to include Portuguese (Portugal) translations.

+11 -0

5 comments

1 changed file

joseborges

pr closed time in 21 hours

pull request commentanuraghazra/github-readme-stats

Updated translations.js to include Portuguese (Portugal) translations.

@joseborges ahh I see.

Yup got it. Yeah in our native language we also have different version of same language.

I'll accept the PR then. Thanks!

joseborges

comment created time in a day

pull request commentanuraghazra/github-readme-stats

Added new theme "kacho-ga"

Theme preview (bot)

title-color: <code>#bf4a3f</code>

icon-color: <code>#a64833</code>

text-color: <code>#d9c8a9</code>

bg-color: <code>#402b23</code>

JoelZimmerman

comment created time in 2 days

pull request commentanuraghazra/github-readme-stats

Added new theme "kacho-ga"

Theme preview (bot)

title-color: <code>#bf4a3f</code>

icon-color: <code>#a64833</code>

text-color: <code>#d9c8a9</code>

bg-color: <code>#402b23</code>

JoelZimmerman

comment created time in 2 days

pull request commentanuraghazra/github-readme-stats

Added new theme "kacho-ga"

Theme preview (bot)

title-color: <code>#bf4a3f</code>

icon-color: <code>#a64833</code>

text-color: <code>#d9c8a9</code>

bg-color: <code>#402b23</code>

JoelZimmerman

comment created time in 2 days

pull request commentanuraghazra/github-readme-stats

Added slateorange theme

Theme preview (bot)

title-color: <code>#faa627</code>

icon-color: <code>#faa627</code>

text-color: <code>#ffffff</code>

bg-color: <code>#36393f</code>

Sardonyx78

comment created time in 2 days

pull request commentanuraghazra/github-readme-stats

feat(themes): added flate

Theme preview (bot)

title-color: <code>#23d18c</code>

icon-color: <code>#ffe066</code>

text-color: <code>#ffffff</code>

bg-color: <code>#1c1d27</code>

hiukky

comment created time in 2 days

pull request commentanuraghazra/github-readme-stats

feat(themes): added flate

Theme preview (bot)

title-color: <code>#23d18c</code>

icon-color: <code>#ffe066</code>

text-color: <code>#ffffff</code>

bg-color: <code>#1c1d27</code>

hiukky

comment created time in 2 days

pull request commentanuraghazra/github-readme-stats

feat(themes): added flate

Theme preview (bot)

title-color: <code>#23d18c</code>

icon-color: <code>#ffe066</code>

text-color: <code>#ffffff</code>

bg-color: <code>#1c1d27</code>

hiukky

comment created time in 2 days

pull request commentanuraghazra/github-readme-stats

feat(themes): added flate

Theme preview (bot)

title-color: <code>#23d18c</code>

icon-color: <code>#ffe066</code>

text-color: <code>#ffffff</code>

bg-color: <code>#1c1d27</code>

hiukky

comment created time in 2 days

push eventtimelessco/renderless-components

Navin Moorthy

commit sha f67c05e2ebcf61dd4bbb7eda3338ade2c743f51e

Progress & Meter State changes (#107) * refactor(aria): ♿️ improve progress & meter accessibility logic with slider * chore(slider): ✨ working single slider * fix(slider): ✨ fix slider track bugs with effect reff * feat(slider): ✨ add range slider * feat(slider): ✨ adds multi slider support story * refactor(slider): ♻️ adds label for each thumb input * chore(slider): 👌 remove slider into a separate folder * refactor(slider): ♻️ restore old slider to fix tests * refactor(imports): ♻️ organise imports * test(meter): ✅ update test for removed imports from meter helpers to utils

view details

Anurag

commit sha 293cf54aeba2b71912f58a81af5f4abe27698a61

Merge branch 'master' into context-tests

view details

push time in 3 days

push eventtimelessco/renderless-components

Anurag

commit sha 5ae19901a59135239ccf62bec31e5b9dc6e12bdf

chore: import valueToPercent

view details

push time in 3 days

Pull request review commenttimelessco/renderless-components

test: added tests for createContext

+import React from "react";+import MockDate from "mockdate";+import { render } from "reakit-test-utils";+import { valueToPercent } from "@chakra-ui/utils";

VSCode auto imported

anuraghazra

comment created time in 3 days

PullRequestReviewEvent

Pull request review commenttimelessco/renderless-components

test: added tests for createContext

+import React from "react";+import MockDate from "mockdate";+import { render } from "reakit-test-utils";+import { valueToPercent } from "@chakra-ui/utils";

Opps.

anuraghazra

comment created time in 3 days

PullRequestReviewEvent

push eventtimelessco/renderless-components

Anurag

commit sha 11bac2ca24a1836e9ec0afd87f498bebcb2fbaf0

chore: import reorder

view details

push time in 3 days

Pull request review commenttimelessco/renderless-components

Multi Slider

+/* eslint-disable react-hooks/rules-of-hooks */+import * as React from "react";++import { Item } from "./types";+import { sortBasedOnDOMPosition } from "./sortBasedOnDOMPosition";++type SetItems = (items: Item[]) => void;++function setItemsBasedOnDOMPosition(items: Item[], setItems: SetItems) {+  const sortedItems = sortBasedOnDOMPosition(items);+  if (items !== sortedItems) {+    setItems(sortedItems);+  }+}++// istanbul ignore next: JSDOM doesn't support IntersectionObverser+// See https://github.com/jsdom/jsdom/issues/2032

Note to me when testing this component

navin-moorthy

comment created time in 3 days

PullRequestReviewEvent

create barnchtimelessco/renderless-components

branch : context-tests

created branch time in 3 days

PullRequestReviewEvent

delete branch timelessco/renderless-components

delete branch : util-tests

delete time in 3 days

push eventtimelessco/renderless-components

Anurag Hazra

commit sha d8dc0f8c55e71976635b8ba504e9c80755193dfa

test: added more tests for utils (#114) * test: added more tests for utils * test: fixed useSpinner test & added clamp test * chore: tsignore

view details

push time in 3 days

push eventtimelessco/renderless-components

Anurag

commit sha d3df1309d8e4f4ffce960dc5e8fa3b0ac3977484

chore: tsignore

view details

push time in 3 days

push eventtimelessco/renderless-components

Anurag Hazra

commit sha cf5299177737abf3abd1fd748ac665022b8885e1

chore: revert meter clamp function (#113)

view details

Anurag

commit sha e685c9c9bd28135498c918c04a263f3e2d913546

Merge branch 'master' into util-tests

view details

Anurag

commit sha 2206ef00645c551115d6915222d714e9cbb0b033

test: fixed useSpinner test & added clamp test

view details

push time in 3 days

delete branch timelessco/renderless-components

delete branch : meter-clamp-revert

delete time in 3 days

push eventtimelessco/renderless-components

Anurag Hazra

commit sha cf5299177737abf3abd1fd748ac665022b8885e1

chore: revert meter clamp function (#113)

view details

push time in 3 days

create barnchtimelessco/renderless-components

branch : util-tests

created branch time in 3 days

PR opened chakra-ui/chakra-ui

test(number-input): added more test cases for number-input

<!-- Please refer to our contributing documentation for any questions on submitting a pull request, or let us know here if you need any help: https://github.com/chakra-ui/chakra-ui/blob/develop/CONTRIBUTING.md -->

Pull request checklist

Please check if your PR fulfills the following requirements:

  • [ ] Tests for the changes have been added (for bug fixes / features)
  • [ ] Docs have been reviewed and added / updated if needed (for bug fixes /start features)

Pull request type

<!-- Please do not submit updates to dependencies unless it fixes an issue. -->

<!-- Please try to limit your pull request to one type, submit multiple pull requests if needed. -->

Please check the type of change your PR introduces:

  • [ ] Bugfix
  • [ ] Feature
  • [ ] Code style update (formatting, renaming)
  • [ ] Refactoring (no functional changes, no api changes)
  • [ ] Build related changes
  • [ ] Documentation content changes
  • [x] Other (please describe): Tests

What is the current behavior?

<!-- Please describe the current behavior that you are modifying, or link to a relevant issue. -->

Fixes: [ISSUE NUMBER]

What is the new behavior?

<!-- Please describe the behavior or changes that are being added by this PR. -->

Does this introduce a breaking change?

  • [ ] Yes
  • [x] No

<!-- If this introduces a breaking change, please describe the impact and migration path for existing applications below. -->

Other information

+86 -0

0 comment

1 changed file

pr created time in 3 days

create barnchanuraghazra/chakra-ui

branch : numberinput-tests

created branch time in 3 days

fork anuraghazra/chakra-ui

⚡️ Simple, Modular & Accessible UI Components for your React Applications

https://chakra-ui.com

fork in 3 days

create barnchtimelessco/renderless-components

branch : meter-clamp-revert

created branch time in 3 days

delete branch timelessco/renderless-components

delete branch : numberinput-storybook

delete time in 4 days

push eventtimelessco/renderless-components

Anurag Hazra

commit sha 3e152461da40e7ac4a33ad0a2d3c1009d0bbee25

chore: added number input storybook controls (#108) * chore: added numberinput storybook controls * chore: added two way binding in args * chore: added two way binding in calendar * chore: added two way binding in datepickers * chore: remove unused dep * chore: removed decleration

view details

push time in 4 days

PR merged timelessco/renderless-components

chore: added number input storybook controls

I'll do some experiment with storybook state tomorrow to see if we can improve the control behaviours

https://github.com/Sambego/storybook-state

+183 -109

1 comment

5 changed files

anuraghazra

pr closed time in 4 days

push eventtimelessco/renderless-components

Anurag Hazra

commit sha 2ab8185f172e3d066b05d53fe53a61edd6ab9127

test: improve meter and range calendar tests (#111) * test: improved meter test coverage & removed redundant code * test: assert live announcer tests in range calendar

view details

push time in 4 days

push eventtimelessco/renderless-components

Anurag Hazra

commit sha 90caad1129021d43f46144ca8454fc9d5ee6e865

test: added tests for useSpinButton (#110)

view details

push time in 4 days

PR merged timelessco/renderless-components

test: added tests for useSpinButton test 🧪

Reused the tests from react spectrum since they already have them https://github.com/adobe/react-spectrum/blob/f6c0660524/packages/%40react-aria/spinbutton/test/useSpinButton.test.js

+157 -6

1 comment

2 changed files

anuraghazra

pr closed time in 4 days

push eventtimelessco/renderless-components

Anurag Hazra

commit sha 97f10e77bff33f47ebd6f162fd04c17e0593495f

test: added tests for live announcer (#109)

view details

push time in 4 days

PR merged timelessco/renderless-components

test: added tests for live announcer test 🧪

Never got an use case to understand and see how useImperativeHandle works, but today I learned about it! 😄

+117 -2

1 comment

2 changed files

anuraghazra

pr closed time in 4 days

push eventtimelessco/renderless-components

Anurag

commit sha ee0e9460a28d646f73f87a23e29701f406b0245b

chore: removed decleration

view details

push time in 4 days

push eventtimelessco/renderless-components

Anurag

commit sha e66892e497cc482ae45ba5143c5bb385e65e86ef

chore: remove unused dep

view details

push time in 4 days

Pull request review commenttimelessco/renderless-components

chore: added number input storybook controls

     "@babel/preset-typescript": "7.12.1",     "@commitlint/cli": "11.0.0",     "@commitlint/config-conventional": "11.0.0",+    "@sambego/storybook-state": "^2.0.1",

OOPs

anuraghazra

comment created time in 4 days

PullRequestReviewEvent

create barnchtimelessco/renderless-components

branch : improve-tests

created branch time in 4 days

PR opened timelessco/renderless-components

test: added tests for useSpinButton

Reused the tests from react spectrum since they already have them https://github.com/adobe/react-spectrum/blob/f6c0660524/packages/%40react-aria/spinbutton/test/useSpinButton.test.js

+157 -6

0 comment

2 changed files

pr created time in 4 days

create barnchtimelessco/renderless-components

branch : usespinbutton-tests

created branch time in 4 days

PR opened timelessco/renderless-components

test: added tests for live announcer

Never got an use case to understand and see how useImperativeHandle works, but today I learned about it! 😄

+117 -2

0 comment

2 changed files

pr created time in 4 days

create barnchtimelessco/renderless-components

branch : liveannouncer-tests

created branch time in 4 days

issue commentanuraghazra/convoychat

are you planning to light theme for this

@Adityapanther no i 'm not planning for light theme although it would not be very hard to change the theme.

Adityapanther

comment created time in 4 days

push eventtimelessco/renderless-components

Anurag

commit sha 6a7fb95664b188e3375ff2d4550bad4beb25c6b4

chore: added two way binding in datepickers

view details

push time in 4 days

push eventtimelessco/renderless-components

Anurag

commit sha 66eada690d921af5281c60e4b75de9c2f21cd1e3

chore: added two way binding in args

view details

Anurag

commit sha 3d68c39e021f0318f5c0bd683b96b9345d955d10

chore: added two way binding in calendar

view details

push time in 4 days

startedalex996/graphql-chat

started time in 4 days

create barnchtimelessco/renderless-components

branch : numberinput-storybook

created branch time in 5 days

delete branch timelessco/renderless-components

delete branch : datepicker-storybook

delete time in 5 days

push eventtimelessco/renderless-components

Anurag Hazra

commit sha 6579b8f4d4079244af7abd90353403e6b6106970

chore: datepicker & calendar storybook controls (#106) * chore: datepicker storybook controls * chore: added date range picker controls * chore: added range calendar & calendar controls * chore: added default value in date ranges * chore: removed console log

view details

push time in 5 days

push eventtimelessco/renderless-components

Anurag

commit sha e6aa70d3a09af90b1b80fe1b88c693a90d7aff26

chore: removed console log

view details

push time in 5 days

Pull request review commenttimelessco/renderless-components

chore: datepicker & calendar storybook controls

+import "./index.css"; import * as React from "react";-import { Meta } from "@storybook/react";+import { Meta, Story } from "@storybook/react"; import { addWeeks, subWeeks, format } from "date-fns"; -import "./index.css";-import {-  DatePicker,-  DatePickerSegment,-  DatePickerSegmentField,-  DatePickerContent,-  DatePickerTrigger,-  useDatePickerState,-  DatePickerInitialState,-} from "../index";-import { CalendarComp } from "../../calendar/stories/CalendarComponent";+import DatePickerComponent from "./DatePickerComponent";  export default {+  component: DatePickerComponent,   title: "DatePicker",+  argTypes: {+    value: { control: "date" },+    minValue: { control: "date" },+    maxValue: { control: "date" },+    defaultValue: { control: "date" },+  }, } as Meta; -const DatePickerComp: React.FC<DatePickerInitialState> = props => {-  const state = useDatePickerState({-    formatOptions: { month: "2-digit", day: "2-digit", year: "numeric" },-    ...props,-  });--  return (-    <>-      <DatePicker className="datepicker" {...state}>-        <div className="datepicker__header">-          <DatePickerSegmentField {...state} className="datepicker__field">-            {state.segments.map((segment, i) => (-              <DatePickerSegment-                key={i}-                segment={segment}-                className="datepicker__field--item"-                {...state}-              />-            ))}-          </DatePickerSegmentField>+const Base: Story = args => {+  console.log(args);

removing.

anuraghazra

comment created time in 5 days

PullRequestReviewEvent

push eventtimelessco/renderless-components

Anurag

commit sha a09d54d17ed4ecd2176c60e23d1e61108f0c9a77

chore: added default value in date ranges

view details

push time in 5 days

pull request commentchakra-ui/chakra-ui

refactor: improved alert statuses union types & fixed storybook examples

Okay no issues! :)

anuraghazra

comment created time in 5 days

delete branch anuraghazra/chakra-ui

delete branch : improve-alert-types

delete time in 5 days

push eventtimelessco/renderless-components

Anurag

commit sha b94e3ce5e2a26e97202e9ab8dffb7410072d8ae6

chore: added range calendar & calendar controls

view details

push time in 5 days

push eventtimelessco/renderless-components

Anurag

commit sha 5c585cf41ce756b2192162545f00ee6793070e88

chore: added date range picker controls

view details

push time in 5 days

create barnchtimelessco/renderless-components

branch : datepicker-storybook

created branch time in 5 days

delete branch timelessco/renderless-components

delete branch : toast-jsdoc

delete time in 5 days

push eventtimelessco/renderless-components

Anurag Hazra

commit sha 7ed738e3d9f121c4ca06dc2fe5dd03bfc61024ca

chore(jsdoc): toast jsdoc and improvements (#104) * chore(jsdoc): added toast jsdocs * chore: jsdoc updates * chore: toast jsdoc and improvements * chore: use strict parameters * chore: extract createContext

view details

push time in 5 days

push eventtimelessco/renderless-components

Navin

commit sha 56d0cb3358f71254a30f52f49710e1366db16ca6

refactor(progress): ♻️ refactor state & stories

view details

Navin

commit sha 5bd038f2cc051228a9c9e3a612b129b739c971ac

refactor(progress): ♻️ update stories & component

view details

Navin

commit sha 13d989c087cba858c5807135bad1307dd7e4156e

Merge branch 'master' into progress-imp

view details

Navin

commit sha b3300ad2bb33ceda3b882cb7d81bb7d44c86a8d9

feat(progress): ✨ improve progress state

view details

Navin

commit sha 5320ce12d948f4eba75562bd628e4c4defce81d2

refactor(progress): ♻️ progress stories & state done

view details

Navin

commit sha e199382c6bb8776f95569d059439c1270f7114a3

refactor(meter): ♻️ meter state done

view details

Navin

commit sha 6ebb5c8ab263eaababf9d649a30f271f5c4dc58c

refactor(tests): ✅ updated tests for meter & progress

view details

Navin

commit sha e91a07fe975eadce1540a61991bbade66eb92128

chore(progress): ♿️ improve VO of progress

view details

Anurag Hazra

commit sha 9993df4e7530d8ad45ad8c7cbb7aef5293070075

fix(a11y): date range picker voiceover fix (#105) * fix(a11y): date range picker voiceover fix * chore: fix normal datepicker wrong selected date announce & improved range calendar announcer * fix(a11y): fixed datepicker segment voiceover * chore: improve types of date segment * chore: added workflow check types * fix(calendar): calendar state isRangeCalendar & fixed tests Since we removed anchorDate checking in the calendar state, the normal calendar was behaving like range calendar so added isRangeCalendar flag to differentiate between them & fixed all the tests

view details

Navin

commit sha 3d6a77f949685a76f784090ce18eef4d2c4d15b0

chore(aria): ♿️ improve progress, meter & accordion accessibility

view details

Navin

commit sha ffed5ff08732abbd46b271288eec398661f0c7ed

Merge branch 'master' into progress-imp

view details

Navin Moorthy

commit sha fb0a82bbf6fe6c0d3cbce7d4172355d5f8d43157

Merge pull request #103 from timelessco/progress-imp Progress improvement

view details

Anurag

commit sha c5d453be381c4e21b6a4238847f0475818efb22c

Merge branch 'master' into toast-jsdoc

view details

push time in 5 days

PullRequestReviewEvent

Pull request review commenttimelessco/renderless-components

Progress improvement

  * We improved the Progress Component [Progress](https://github.com/chakra-ui/chakra-ui/tree/develop/packages/progress)  * to work with Reakit System  */-import { isUndefined, valueToPercent } from "@chakra-ui/utils";+import * as React from "react";+import { SealedInitialState, useSealedState } from "reakit-utils"; -export interface UseProgressProps {+import { valueToPercent, isFunction } from "../utils";++type AriaValueText = string | ((value: number, percent: number) => string);++export interface ProgressState {   /**    * The `value` of the progress indicator.    * If `undefined` the progress bar will be in `indeterminate` state+   * @default 0    */-  value?: number;+  value: number;   /**    * The minimum value of the progress+   * @default 0+   */+  min: number;+  /**+   * The maximum value of the+   * @default 100    */-  min?: number;+  max: number;   /**-   * The maximum value of the progress+   * Set isInterminate state+   * @default false    */-  max?: number;+  isIndeterminate?: boolean;+  /**+   * Defines the human readable text alternative of aria-valuenow for a range widget.+   */+  ariaValueText: AriaValueText;+  /**+   * Percentage of the value progressed with respect to min & max+   */+  percent: number;+}++export interface ProgressAction {+  /**+   * Update the value of the progress indicator+   */+  setValue?: React.Dispatch<React.SetStateAction<number>>; } -export const useProgressState = (props: UseProgressProps = {}) => {-  const { value, min = 0, max = 100 } = props;+export type ProgressInitialState = Partial<+  Pick<+    ProgressState,+    "value" | "min" | "max" | "isIndeterminate" | "ariaValueText"+  >+>; -  const percent = value != null ? valueToPercent(value, min, max) : undefined;-  const isIndeterminate = isUndefined(value);+export type ProgressStateReturn = ProgressState & ProgressAction;

Ok we can keep it no change required

navin-moorthy

comment created time in 5 days

PullRequestReviewEvent

startedtype-challenges/type-challenges

started time in 5 days

Pull request review commenttimelessco/renderless-components

Progress improvement

  * We improved the Progress Component [Progress](https://github.com/chakra-ui/chakra-ui/tree/develop/packages/progress)  * to work with Reakit System  */-import { isUndefined, valueToPercent } from "@chakra-ui/utils";+import * as React from "react";+import { SealedInitialState, useSealedState } from "reakit-utils"; -export interface UseProgressProps {+import { valueToPercent, isFunction } from "../utils";++type AriaValueText = string | ((value: number, percent: number) => string);++export interface ProgressState {   /**    * The `value` of the progress indicator.    * If `undefined` the progress bar will be in `indeterminate` state+   * @default 0    */-  value?: number;+  value: number;   /**    * The minimum value of the progress+   * @default 0+   */+  min: number;+  /**+   * The maximum value of the+   * @default 100    */-  min?: number;+  max: number;   /**-   * The maximum value of the progress+   * Set isInterminate state+   * @default false    */-  max?: number;+  isIndeterminate?: boolean;+  /**+   * Defines the human readable text alternative of aria-valuenow for a range widget.+   */+  ariaValueText: AriaValueText;+  /**+   * Percentage of the value progressed with respect to min & max+   */+  percent: number;+}++export interface ProgressAction {+  /**+   * Update the value of the progress indicator+   */+  setValue?: React.Dispatch<React.SetStateAction<number>>; } -export const useProgressState = (props: UseProgressProps = {}) => {-  const { value, min = 0, max = 100 } = props;+export type ProgressInitialState = Partial<+  Pick<+    ProgressState,+    "value" | "min" | "max" | "isIndeterminate" | "ariaValueText"+  >+>; -  const percent = value != null ? valueToPercent(value, min, max) : undefined;-  const isIndeterminate = isUndefined(value);+export type ProgressStateReturn = ProgressState & ProgressAction;

Okay agreed we can keep it. Just that did not liked the idea of deriving both the initial props and return state from the same types, for this small example with progress it is fine, but it would be a little bit messy if we wanted to change/rename return values suppose we want to change the "setValue" to "setProgressValue" then we have to overwrite the Return types anyways.

It is fine for this progress component but not very effective for other components like Segment, or Calendar. where props and state are very different.

navin-moorthy

comment created time in 5 days

PullRequestReviewEvent

Pull request review commenttimelessco/renderless-components

Progress improvement

 import React from "react";-import { Meta } from "@storybook/react";-import { css, keyframes } from "emotion";+import { Meta, Story } from "@storybook/react"; -import { Progress } from "../Progress";-import { useProgressState } from "../ProgressState"; import {-  progressStyle,-  generateStripe,-  progressBarStyle,-  createLinearExamples,-} from "./storybook-progress-utils";+  LinearProgress as Progress,+  LinearProgressInitialState,+} from "./LinearProgress";  export default {+  component: Progress,   title: "Progress/Linear", } as Meta; -const examples = createLinearExamples({-  stateHook: useProgressState,-  component: Progress,-})();--export const Default = examples.Default;-export const WithLabel = examples.WithLabel;-export const WithStripe = examples.WithStripe;-export const WithAnimatedStripe = examples.WithAnimatedStripe;+const Base: Story<LinearProgressInitialState> = args => <Progress {...args} />; -export const WhenIsIndeterminate = () => {-  const progress = useProgressState({ value: undefined });+export const Default = Base.bind({}); -  const progressAnim = keyframes({-    "0%": { left: "-40%" },-    "100%": { left: "100%" },-  });+export const WithLabel = Base.bind({});+WithLabel.args = { withLabel: true }; -  const indeterminateStyles = css({-    ...(progress.isIndeterminate && {-      position: "absolute",-      willChange: "left",-      minWidth: "50%",-      width: "100%",-      height: "100%",-      backgroundImage:-        "linear-gradient( to right, transparent 0%, #D53F8C 50%, transparent 100% )",-      animation: `${progressAnim} 1s ease infinite normal none running`,-    }),-  });+export const WithStripe = Base.bind({});+WithStripe.args = { withStripe: true }; -  return (-    <div style={progressStyle}>-      <Progress-        {...progress}-        style={{ ...progressBarStyle, backgroundColor: "none" }}-        className={indeterminateStyles}-      />-    </div>-  );+export const WithStripeAnimation = Base.bind({});+WithStripeAnimation.args = {+  withStripe: true,+  withStripeAnimation: true,

Oh ok okay, then no changes needed

navin-moorthy

comment created time in 5 days

PullRequestReviewEvent

Pull request review commenttimelessco/renderless-components

Progress improvement

 import React from "react";-import { Meta } from "@storybook/react";-import { css, keyframes } from "emotion";+import { Meta, Story } from "@storybook/react"; -import { Progress } from "../Progress";-import { useProgressState } from "../ProgressState"; import {-  progressStyle,-  generateStripe,-  progressBarStyle,-  createLinearExamples,-} from "./storybook-progress-utils";+  LinearProgress as Progress,+  LinearProgressInitialState,+} from "./LinearProgress";  export default {+  component: Progress,   title: "Progress/Linear", } as Meta; -const examples = createLinearExamples({-  stateHook: useProgressState,-  component: Progress,-})();--export const Default = examples.Default;-export const WithLabel = examples.WithLabel;-export const WithStripe = examples.WithStripe;-export const WithAnimatedStripe = examples.WithAnimatedStripe;+const Base: Story<LinearProgressInitialState> = args => <Progress {...args} />; -export const WhenIsIndeterminate = () => {-  const progress = useProgressState({ value: undefined });+export const Default = Base.bind({}); -  const progressAnim = keyframes({-    "0%": { left: "-40%" },-    "100%": { left: "100%" },-  });+export const WithLabel = Base.bind({});+WithLabel.args = { withLabel: true }; -  const indeterminateStyles = css({-    ...(progress.isIndeterminate && {-      position: "absolute",-      willChange: "left",-      minWidth: "50%",-      width: "100%",-      height: "100%",-      backgroundImage:-        "linear-gradient( to right, transparent 0%, #D53F8C 50%, transparent 100% )",-      animation: `${progressAnim} 1s ease infinite normal none running`,-    }),-  });+export const WithStripe = Base.bind({});+WithStripe.args = { withStripe: true }; -  return (-    <div style={progressStyle}>-      <Progress-        {...progress}-        style={{ ...progressBarStyle, backgroundColor: "none" }}-        className={indeterminateStyles}-      />-    </div>-  );+export const WithStripeAnimation = Base.bind({});+WithStripeAnimation.args = {+  withStripe: true,+  withStripeAnimation: true,

we can inline it 🤔


export const Default = Base.bind({});

export const WithLabel = Base.bind({}, { withLabel: true });

export const WithStripe = Base.bind({}, { withStripe: true });

export const WithStripeAnimation = Base.bind(
  {},
  {
    withStripe: true,
    withStripeAnimation: true,
  },
);

export const IsIndeterminate = Base.bind({}, { isIndeterminate: true });
navin-moorthy

comment created time in 5 days

PullRequestReviewEvent
PullRequestReviewEvent
more