anuraghazra/anuraghazra.github.io 135
My Portfolio Site | Made With @Gatsbyjs
Track, Manage & Kill Bugs Effectively :knife: :beetle:
:heart: Creative Coding Projects
:collision: Atomic.js | Greatly Simple Physics Engine For Javascript
:candy: Canvas Rendering Engine inspired by p5js :lollipop:
2k76 CS community
anuraghazra/awesome-github-profile-readme 3
A curated list of awesome Github Profile READMEs
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
Theme preview (bot)
title-color: <code>#a15773</code>
icon-color: <code>#ccb4cb</code>
text-color: <code>#bc8a9d</code>
bg-color: <code>#ebeaf5</code>
comment created time in 14 hours
pull request commentanuraghazra/github-readme-stats
Theme preview (bot)
title-color: <code>##a15773</code>
icon-color: <code>##ccb4cb</code>
text-color: <code>##bc8a9d</code>
bg-color: <code>##ebeaf5</code>
comment created time in 14 hours
push eventanuraghazra/github-readme-stats
commit sha a15fe13ad6eff8f0f2562da563fde3f16e18a1aa
chore(docs): corrected a basic typo (#586)
push time in 15 hours
PR merged anuraghazra/github-readme-stats
pr closed time in 15 hours
pull request commentanuraghazra/github-readme-stats
Thanks @ViniciusLagoGehrke
comment created time in 15 hours
push eventanuraghazra/github-readme-stats
commit sha 57e9d5f6e007adc29ec0566ea6710be5550a5b83
feat(translation): added Greek card translation (#584)
push time in 15 hours
PR merged anuraghazra/github-readme-stats
Added a Greek translation for widgets (locale: el)
pr closed time in 15 hours
pull request commentanuraghazra/github-readme-stats
hey @panosru thanks for the PR!
comment created time in 15 hours
push eventanuraghazra/github-readme-stats
commit sha 805f1c4baced24b6aaf1ae7211420f7082a1e9d7
feat: added include Portuguese (Portugal) translations to cards (#570) Updated translations.js to include Portuguese (Portugal) translations.
push time in 21 hours
PR merged anuraghazra/github-readme-stats
Updated translations.js to include Portuguese (Portugal) translations.
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!
comment created time in a day
pull request commentanuraghazra/github-readme-stats
Theme preview (bot)
title-color: <code>#bf4a3f</code>
icon-color: <code>#a64833</code>
text-color: <code>#d9c8a9</code>
bg-color: <code>#402b23</code>
comment created time in 2 days
pull request commentanuraghazra/github-readme-stats
Theme preview (bot)
title-color: <code>#bf4a3f</code>
icon-color: <code>#a64833</code>
text-color: <code>#d9c8a9</code>
bg-color: <code>#402b23</code>
comment created time in 2 days
pull request commentanuraghazra/github-readme-stats
Theme preview (bot)
title-color: <code>#bf4a3f</code>
icon-color: <code>#a64833</code>
text-color: <code>#d9c8a9</code>
bg-color: <code>#402b23</code>
comment created time in 2 days
pull request commentanuraghazra/github-readme-stats
Theme preview (bot)
title-color: <code>#faa627</code>
icon-color: <code>#faa627</code>
text-color: <code>#ffffff</code>
bg-color: <code>#36393f</code>
comment created time in 2 days
pull request commentanuraghazra/github-readme-stats
Theme preview (bot)
title-color: <code>#23d18c</code>
icon-color: <code>#ffe066</code>
text-color: <code>#ffffff</code>
bg-color: <code>#1c1d27</code>
comment created time in 2 days
pull request commentanuraghazra/github-readme-stats
Theme preview (bot)
title-color: <code>#23d18c</code>
icon-color: <code>#ffe066</code>
text-color: <code>#ffffff</code>
bg-color: <code>#1c1d27</code>
comment created time in 2 days
pull request commentanuraghazra/github-readme-stats
Theme preview (bot)
title-color: <code>#23d18c</code>
icon-color: <code>#ffe066</code>
text-color: <code>#ffffff</code>
bg-color: <code>#1c1d27</code>
comment created time in 2 days
pull request commentanuraghazra/github-readme-stats
Theme preview (bot)
title-color: <code>#23d18c</code>
icon-color: <code>#ffe066</code>
text-color: <code>#ffffff</code>
bg-color: <code>#1c1d27</code>
comment created time in 2 days
push eventtimelessco/renderless-components
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
commit sha 293cf54aeba2b71912f58a81af5f4abe27698a61
Merge branch 'master' into context-tests
push time in 3 days
push eventtimelessco/renderless-components
commit sha 5ae19901a59135239ccf62bec31e5b9dc6e12bdf
chore: import valueToPercent
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
comment created 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";
Opps.
comment created time in 3 days
push eventtimelessco/renderless-components
commit sha 11bac2ca24a1836e9ec0afd87f498bebcb2fbaf0
chore: import reorder
push time in 3 days
Pull request review commenttimelessco/renderless-components
+/* 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
comment created time in 3 days
PR opened timelessco/renderless-components
pr created time in 3 days
push eventtimelessco/renderless-components
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
push time in 3 days
PR merged timelessco/renderless-components
pr closed time in 3 days
push eventtimelessco/renderless-components
commit sha d3df1309d8e4f4ffce960dc5e8fa3b0ac3977484
chore: tsignore
push time in 3 days
push eventtimelessco/renderless-components
commit sha cf5299177737abf3abd1fd748ac665022b8885e1
chore: revert meter clamp function (#113)
commit sha e685c9c9bd28135498c918c04a263f3e2d913546
Merge branch 'master' into util-tests
commit sha 2206ef00645c551115d6915222d714e9cbb0b033
test: fixed useSpinner test & added clamp test
push time in 3 days
delete branch timelessco/renderless-components
delete branch : meter-clamp-revert
delete time in 3 days
push eventtimelessco/renderless-components
commit sha cf5299177737abf3abd1fd748ac665022b8885e1
chore: revert meter clamp function (#113)
push time in 3 days
PR merged timelessco/renderless-components
pr closed time in 3 days
PR opened timelessco/renderless-components
pr created time in 3 days
PR opened chakra-ui/chakra-ui
<!-- 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
pr created time in 3 days
⚡️ Simple, Modular & Accessible UI Components for your React Applications
fork in 3 days
PR opened timelessco/renderless-components
pr created time in 3 days
create barnchtimelessco/renderless-components
created branch time in 3 days
delete branch timelessco/renderless-components
delete branch : numberinput-storybook
delete time in 4 days
push eventtimelessco/renderless-components
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
push time in 4 days
PR merged timelessco/renderless-components
I'll do some experiment with storybook state tomorrow to see if we can improve the control behaviours
https://github.com/Sambego/storybook-state
pr closed time in 4 days
push eventtimelessco/renderless-components
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
push time in 4 days
PR merged timelessco/renderless-components
pr closed time in 4 days
push eventtimelessco/renderless-components
commit sha 90caad1129021d43f46144ca8454fc9d5ee6e865
test: added tests for useSpinButton (#110)
push time in 4 days
PR merged timelessco/renderless-components
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
pr closed time in 4 days
push eventtimelessco/renderless-components
commit sha 97f10e77bff33f47ebd6f162fd04c17e0593495f
test: added tests for live announcer (#109)
push time in 4 days
PR merged timelessco/renderless-components
Never got an use case to understand and see how useImperativeHandle works, but today I learned about it! 😄
pr closed time in 4 days
push eventtimelessco/renderless-components
commit sha ee0e9460a28d646f73f87a23e29701f406b0245b
chore: removed decleration
push time in 4 days
push eventtimelessco/renderless-components
commit sha e66892e497cc482ae45ba5143c5bb385e65e86ef
chore: remove unused dep
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
comment created time in 4 days
PR opened timelessco/renderless-components
pr created time in 4 days
PR opened timelessco/renderless-components
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
pr created time in 4 days
create barnchtimelessco/renderless-components
created branch time in 4 days
PR opened timelessco/renderless-components
Never got an use case to understand and see how useImperativeHandle works, but today I learned about it! 😄
pr created time in 4 days
create barnchtimelessco/renderless-components
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.
comment created time in 4 days
push eventtimelessco/renderless-components
commit sha 6a7fb95664b188e3375ff2d4550bad4beb25c6b4
chore: added two way binding in datepickers
push time in 4 days
push eventtimelessco/renderless-components
commit sha 66eada690d921af5281c60e4b75de9c2f21cd1e3
chore: added two way binding in args
commit sha 3d68c39e021f0318f5c0bd683b96b9345d955d10
chore: added two way binding in calendar
push time in 4 days
startedalex996/graphql-chat
started time in 4 days
PR opened timelessco/renderless-components
pr created time in 5 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
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
push time in 5 days
PR merged timelessco/renderless-components
pr closed time in 5 days
push eventtimelessco/renderless-components
commit sha e6aa70d3a09af90b1b80fe1b88c693a90d7aff26
chore: removed console log
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.
comment created time in 5 days
push eventtimelessco/renderless-components
commit sha a09d54d17ed4ecd2176c60e23d1e61108f0c9a77
chore: added default value in date ranges
push time in 5 days
pull request commentchakra-ui/chakra-ui
refactor: improved alert statuses union types & fixed storybook examples
Okay no issues! :)
comment created time in 5 days
push eventtimelessco/renderless-components
commit sha b94e3ce5e2a26e97202e9ab8dffb7410072d8ae6
chore: added range calendar & calendar controls
push time in 5 days
push eventtimelessco/renderless-components
commit sha 5c585cf41ce756b2192162545f00ee6793070e88
chore: added date range picker controls
push time in 5 days
PR opened timelessco/renderless-components
pr created time in 5 days
create barnchtimelessco/renderless-components
created branch time in 5 days
push eventtimelessco/renderless-components
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
push time in 5 days
PR merged timelessco/renderless-components
pr closed time in 5 days
push eventtimelessco/renderless-components
commit sha 56d0cb3358f71254a30f52f49710e1366db16ca6
refactor(progress): ♻️ refactor state & stories
commit sha 5bd038f2cc051228a9c9e3a612b129b739c971ac
refactor(progress): ♻️ update stories & component
commit sha 13d989c087cba858c5807135bad1307dd7e4156e
Merge branch 'master' into progress-imp
commit sha b3300ad2bb33ceda3b882cb7d81bb7d44c86a8d9
feat(progress): ✨ improve progress state
commit sha 5320ce12d948f4eba75562bd628e4c4defce81d2
refactor(progress): ♻️ progress stories & state done
commit sha e199382c6bb8776f95569d059439c1270f7114a3
refactor(meter): ♻️ meter state done
commit sha 6ebb5c8ab263eaababf9d649a30f271f5c4dc58c
refactor(tests): ✅ updated tests for meter & progress
commit sha e91a07fe975eadce1540a61991bbade66eb92128
chore(progress): ♿️ improve VO of progress
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
commit sha 3d6a77f949685a76f784090ce18eef4d2c4d15b0
chore(aria): ♿️ improve progress, meter & accordion accessibility
commit sha ffed5ff08732abbd46b271288eec398661f0c7ed
Merge branch 'master' into progress-imp
commit sha fb0a82bbf6fe6c0d3cbce7d4172355d5f8d43157
Merge pull request #103 from timelessco/progress-imp Progress improvement
commit sha c5d453be381c4e21b6a4238847f0475818efb22c
Merge branch 'master' into toast-jsdoc
push time in 5 days
Pull request review commenttimelessco/renderless-components
* 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
comment created time in 5 days
startedtype-challenges/type-challenges
started time in 5 days
Pull request review commenttimelessco/renderless-components
* 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.
comment created time in 5 days
Pull request review commenttimelessco/renderless-components
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
comment created time in 5 days
Pull request review commenttimelessco/renderless-components
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 });
comment created time in 5 days