adaptui / react-tailwind Goto Github PK
View Code? Open in Web Editor NEWReact UI built with @adaptui/react, ariakit & tailwind
Home Page: https://adaptui-react-tailwind.vercel.app
License: MIT License
React UI built with @adaptui/react, ariakit & tailwind
Home Page: https://adaptui-react-tailwind.vercel.app
License: MIT License
Create an customizable, extendable & easily stylable Alert Component.
The Alert Component will follow WAI-ARIA Alert
Key Resources for the Alert Component,
<Alert status="success">
<AlertIcon />
<AlertTitle>Your browser is outdated!</AlertTitle>
<AlertDescription>Your experience may be degraded.</AlertDescription>
<AlertActionButton>Update</AlertActionButton>
<Button aria-label="close"><ButtonIcon><CloseIcon/></ButtonIcon></Button>
</Alert>
default: "info"
Avatar API RFC
<Avatar src="https://bit.ly/dan-abramov" size="md" name="Dan Abrahmov" />
When the image is loading we will show the placeholder initials
<Avatar><UserIcon/><Avatar/>
If there is an error loading the avatar image, the component falls back to an
alternative in the following order:
fallback
name
prop<Avatar
fallback={<GenericUserIcon />}
src="https://bit.ly/dan-abramov"
size="md"
name="Dan Abrahmov"
/>
Avatar group is a stack or flex container to hold multiple avatars in a group.
<AvatarGroup limit={3}>
<Avatar name="Remy Sharp" src="..." />
<Avatar name="Travis Howard" src="..." />
<Avatar name="Cindy Baker" src="..." />
<Avatar name="Agnes Walker" src="..." />
<Avatar name="Trevor Henderson" src="..." />
</AvatarGroup>
Currently how our theming system works has some downsides to it.
For our theming system we are basically using the tailwind.config.js file to
extend our component
themes.
Now issues with this approach is that we have to include our tailwind.config.js
file in our client bundle (we are adding build step specific configs in clientside), thus increasing the bundle size of the end user.
// Importing tailwind config
import tailwindConfig from "../tailwind.config";
ReactDOM.render(
<React.StrictMode>
<RenderlesskitProvider tailwindConfig={tailwindConfig}>
<App />
</RenderlesskitProvider>
</React.StrictMode>,
document.getElementById("root"),
);
Currently our preset.js file imports
Size analysis:
And remember this can get larger and larger down the dependency list because of dev dependencies getting included in our client bundle.
Screenshots:
A quick fix for this would be to separate our theme from tailwind config. We can
have a separate theme.js file where users can extend the theme which will
eliminate the bundle size issue.
This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.
These updates have all been created already. Click a checkbox below to force a retry/rebase of any.
@babel/cli
, @babel/core
, @babel/plugin-proposal-private-property-in-object
, @babel/preset-env
, @babel/preset-react
, @babel/preset-typescript
, @commitlint/cli
, @commitlint/config-conventional
, @release-it/conventional-changelog
, @storybook/addon-a11y
, @storybook/addon-actions
, @storybook/addon-essentials
, @storybook/builder-webpack5
, @storybook/manager-webpack5
, @storybook/react
, @swc/cli
, @swc/core
, @swc/jest
, @tailwindcss/forms
, @testing-library/dom
, @testing-library/jest-dom
, @testing-library/react
, @testing-library/user-event
, @types/jest
, @types/jest-axe
, @types/node
, @types/react
, @types/react-dom
, @types/testing-library__jest-dom
, all-contributors-cli
, autoprefixer
, axe-core
, concurrently
, eslint
, eslint-config-prettier
, eslint-plugin-storybook
, gacp
, husky
, jest-axe
, lint-staged
, patch-package
, postcss
, postcss-cli
, postcss-selector-parser
, prettier
, prettier-plugin-tailwindcss
, react-icons
, release-it
, storybook-addon-preview
, tailwindcss
, typescript
, webpack
)@react-aria/live-announcer
, ariakit
, ariakit-utils
, tailwind-merge
)@release-it/conventional-changelog
, @storybook/addon-a11y
, @storybook/addon-actions
, @storybook/addon-essentials
, @storybook/builder-webpack5
, @storybook/react
, @testing-library/dom
, @testing-library/jest-dom
, @testing-library/react
, @types/jest
, concurrently
, eslint-config-prettier
, eslint-plugin-prettier
, eslint-plugin-simple-import-sort
, jest
, jest-axe
, jest-environment-jsdom
, lint-staged
, patch-package
, postcss-focus-visible
, prettier
, release-it
, rimraf
, sort-package-json
, typescript
).github/workflows/main.yml
actions/checkout v3
actions/setup-node v3
actions/cache v3
actions/checkout v3
actions/setup-node v3
actions/cache v3
actions/checkout v3
actions/setup-node v3
actions/cache v3
actions/checkout v3
actions/setup-node v3
actions/cache v3
package.json
@adaptui/react 1.0.0-alpha.9
@react-aria/live-announcer 3.1.1
ariakit 2.0.0-next.38
ariakit-utils 0.17.0-next.24
tailwind-merge 1.5.1
@babel/cli 7.18.10
@babel/core 7.18.10
@babel/plugin-proposal-class-properties 7.18.6
@babel/plugin-proposal-private-methods 7.18.6
@babel/plugin-proposal-private-property-in-object 7.18.6
@babel/preset-env 7.18.10
@babel/preset-react 7.18.6
@babel/preset-typescript 7.18.6
@commitlint/cli 17.0.3
@commitlint/config-conventional 17.0.3
@release-it/conventional-changelog 5.0.0
@storybook/addon-a11y 6.5.10
@storybook/addon-actions 6.5.10
@storybook/addon-essentials 6.5.10
@storybook/addon-postcss 2.0.0
@storybook/builder-webpack5 6.5.10
@storybook/manager-webpack5 6.5.10
@storybook/react 6.5.10
@swc/cli 0.1.57
@swc/core 1.2.224
@swc/jest 0.2.22
@tailwindcss/forms 0.5.2
@testing-library/dom 8.16.1
@testing-library/jest-dom 5.16.5
@testing-library/react 13.3.0
@testing-library/react-hooks 8.0.1
@testing-library/user-event 14.4.2
@types/jest 28.1.6
@types/jest-axe 3.5.4
@types/node 18.6.1
@types/react 18.0.17
@types/react-dom 18.0.6
@types/testing-library__jest-dom 5.14.5
all-contributors-cli 6.20.0
autoprefixer 10.4.8
axe-core 4.4.3
babel-plugin-jsx-remove-data-test-id 3.0.0
browserlist 1.0.1
concurrently 7.3.0
cross-env 7.0.3
eslint 8.21.0
eslint-config-prettier 8.5.0
eslint-config-react-app 7.0.1
eslint-plugin-prettier 4.2.1
eslint-plugin-simple-import-sort 7.0.0
eslint-plugin-storybook 0.6.4
focus-visible 5.2.0
gacp 3.0.2
glob-fs 0.1.7
husky 8.0.1
jest 28.1.3
jest-axe 6.0.0
jest-environment-jsdom 28.1.3
lint-staged 13.0.3
outdent 0.8.0
patch-package 6.4.7
pinst 3.0.0
postcss 8.4.16
postcss-cli 10.0.0
postcss-focus-visible 7.1.0
postcss-selector-parser 6.0.10
prettier 2.7.1
prettier-plugin-tailwindcss 0.1.13
react 18.2.0
react-dom 18.2.0
react-icons 4.4.0
release-it 15.2.0
rimraf 3.0.2
sort-package-json 1.57.0
storybook-addon-preview 2.2.0
tailwindcss 3.1.8
typescript 4.7.4
webpack 5.74.0
react 16.x || 17.x || 18.x
react-dom 16.x || 17.x || 18.x
.nvmrc
node 16
RFC finalized - #133
Slider API RFC
Create an accessible, easy to use but still flexible enough slider component.
Following our renderlesskit slider component:
renderlesskit/react slider
All the basic props from :-
useSliderState
defaultValue number | number[]
tooltipContent React.ReactNode | (value: number | number[]) => JSX.Element
Can be used to format tooltip content
tooltipVisible boolean
When tooltipVisible is true, Tooltip will show always, or tooltip will not
show anyway, even if dragging or hovering.
tooltipPlacement
thumbContent React.ReactNode | (value: number | number[]) => JSX.Element
<Slider defaultValue={10} onChane={e => console.log(e)} />
<Slider defaultValue={[10, 20]} />
If defaultValues contains exactly two values we render this :-
<Slider defaultValue={[10, 20, 30, 40]} />
If defaultValues contains more than two values we render this :-
Customization of track can be done via the theme file
To change the styles of the thumb users can use the theme file.
To change the thumb content
<Slider thumbContent={<SomeIcon />} />
Showing values in thumb
<Slider thumbContent={value => <span>{value} %</span>} />
Format tooltip text
const tooltipFormatter = value => `${value}$`;
<Slider tooltipContent={tooltipFormatter} />;
Rendering react elements in tooltipContent
const tooltipFormatter = (value) => <span className="px-2">{value}</span>
<Slider tooltipContent={tooltipFormatter} />
Users can do full customization through renderprops
<Slider>
{state => (
<>
<SliderTrack />
<SliderThumb>
<VisuallyHidden>
<SliderInput />
</VisuallyHidden>
</SliderThumb>
<SliderThumbTooltip>Tooltip content</SliderThumbTooltip>
</>
)}
</Slider>
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.