geist-org / geist-ui Goto Github PK
View Code? Open in Web Editor NEWA design system for building modern websites and applications.
Home Page: https://geist-ui.dev
License: MIT License
A design system for building modern websites and applications.
Home Page: https://geist-ui.dev
License: MIT License
I used next/link
to wrap UI button and get forwardRef
error:
<NextLink href='/write'>
<Button ghost auto>
<Add /> Write a story
</Button>
</NextLink>
Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?
We've exposed some functions and hooks, now we can use them like this:
import { Utils } from '@zeit-ui/react'
const {
withDefaults,
useBodyScroll,
useClickAnywhere,
useClickAway,
useClipboard,
useCurrentState,
useRealShape,
useResize,
useSSR,
} = Utils
Now we need to supplement the docs for these utility functions.
About issue: #65
examples
.className
.inline-style
.We simulated the option
element in @zeit-ui/react
, because the browser's option
is the system interface called, and the style can't be modified. But simulation elements don't wokr best on mobile devices:
@zeit-ui/react
in browser:Better user experience with native option
on mobile devices.
option
in browser, and use native option
on mobile devices.Cannot render if the Option
contains components:
<Select.Option value="1"><Code>TypeScript</Code></Select.Option>
A hooks
for query media information, it's not the most common solution, but it's practical.
() => {
const { isMobile, isDesktop } = useResponsive()
const { xs, sm, md, lg, xl } = useResponsive()
return <div>{isMobile && <span>mobile</span>}</div>
}
// utils.jsx
const useResponsive = makeResponsiveHook({
xs: {min: 0, max: 600},
sm: {min: 601, max: 959},
md: {min: 960, max: 1279},
lg: {min: 1280, max: 1919},
xl: {min: 1920, max: Number.MAX_SAFE_INTEGER},
mobile: {min: 0, max: 700},
defaultWidth: 1920, // <---- we need to specify the width for server side render
})
export default useResponsive
// app.jsx
import useResponsive from './utils.jsx'
() => {
const { xs, isMobile } = useResponsive()
}
() => {
const { lg } = useResponsive()
return <span className={`${lg ? 'lg' : ''}`} />
}
resize
event, trigger hander after hit condition.matchMedia
api.refer to design
I want everyone to see the contributors to the document site, it also enables more people to participate in document optimization.
space
/ alignment
CSS
<Grid.Container spacing={5}>
<Grid size={5}>text</Grid>
<Grid xs={2}>text</Grid>
<Grid lg={10}>text</Grid>
<Grid mobile={2}>text</Grid>
</Grid.Container>
const breakPoints = {
xs: {max: 600},
sm: {min: 601, max: 959},
md: {min: 960, max: 1279},
lg: {min: 1280, max: 1919},
xl: {min: 1920},
mobile: {max: 700},
}
const app = () => (
<ZEITUIProvider breakPoints={breakPoints}>
<App />
</ZEITUIProvider>
)
Fortunately, using JSS
to implement custom breaking points is very simple. ๐
We need to optimize the style of password input, or provide a component.
This maybe helpful for some users, and additional documents need to be added.
import { useClipboard } from '@zeit-ui'
const { copy } = useClipboard()
If you added it as a peerDependency, and then told Rollup to mark it as external (and thus not need to bundle it), you'd decrease your bundle size quite a lot.
styles
๐ ๏ธI noticed that few users use icon style of Link
, should we hide icon by default?
// current:
<Link></Link>
// after:
<Link icon></Link>
// current:
<Link pure></Link>
// after:
<Link></Link>
How can we use Link components as a React-Router Link or NextJS Link
styles
๐ ๏ธHi, first of all thanks for all the work done will keep in mind this for future projects =)
Just wanted to share that on Firefox 72 in Ubuntu the vertical alignment in the main item of the dropdown doesn't work as expected the text is align too close to the top.
A change that may fix this is adding in components/button-dropdown/item.tsx on the style jsx of the button.
align-items: center;
I have only tested it on Firefox/Chrome if the change is made please confirm with other browsers.
create-react-app
examples
.TypeScript
I'll rewrite the layout
component everytime I create a project (especially in the next.js
project),
can we provider Page
component to improve the experience?
The component Page
has some useful parameters to reduce repetitive code:
<Page size="large">{content}</Page> // width: 1000pt
<Page size="small">{content}</Page> // width: 700pt
<Page meta={meta}>{content}</Page>
<Page footer={Footer}>{content}</Page>
...others
width
/ height
/ other stylesThis component doesn't seem to be universal, but I really want use it ๐. maybe we need to create
a new repo to manage these components? (Page
/ Sidebar
/ Sharer
...)
I'd like to hear from your views ๐
docs
The document states that the input component has type attributes, but there are errors in using type props when coding.
@zeit-ui/react version 0.0.1-beta.8
<Input
placeholder={"password"}
value={password}
onChange={(ev: any) => setPassword(ev.target.value)}
type={"password"} // have error in there
clearable
/>
Use these components with an error message:
const App = () => {
return (
<>
<Button>My Button</Button>
<Link>My Link</Link>
</>
);
};
This JSX tag's 'children' prop expects type 'never' which requires multiple children, but only a single child was provided.ts(2745)
Tabs
component<Tabs>
<Tabs.Item label="tab1">content 1</Tabs.Item>
<Tabs.Item label="tab2">content 2</Tabs.Item>
</Tabs>
Now that we have a standard icon library, it's time to solve this problem.
size
of the icon inside the Button
is automatically setButton
Button
in auto
mode needs to be filled with width
When I try and embed a component in the content
attribute, like this:
<Description title={field[0]} content={<Text p>{field[1]}</Text>} />
It gives me this error:
Type 'Element' is not assignable to type 'string'.
"@zeit-ui/react": "^0.0.1-beta.22",
...
"react": "^16.13.1",
"react-dom": "^16.13.1",
x
or x
props to add spacersSince ZEIT recently changed their name to Vercel (https://vercel.com/blog/zeit-is-now-vercel) would it maybe make some sense to change things around here (not only react, but vue and others as well)?
Or just not worth it and you'll keep everything the same? Just wanna be sure since you could change the package name as well (probably wouldn't happen) but yeah...
secret
is used in the deployment of NowNow we can use the Link
component from next.js
like this:
import NextLink from 'next/link'
import { Link, Button } from '@zeit-ui/react'
() => (
<>
<NextLink href="..." as="..."><Link>text</Link></NextLink>
<NextLink href="..." as="..."><Link><Button>text</Button></Link></NextLink>
</>
)
As seen above, for forward ref
and add styles, we have to add a extra Link
when using next/link
. If we provider a HOC component, the code will be much simpler:
import { Link, NextLink } from '@zeit-ui/react'
() => (
<>
<NextLink // <--- use in the nextjs project
href="..." as="..." // <--- next/link props
block // <--- zeit-ui/react props
>text</NextLink>
<Link href="...">text</Link> // <--- use in the normal project
</>
)
NextLink
component, no breaking changesnext/link
and @zeit-ui/react/link
next.js
, the package size doesn't changeIf you like this change, please leave an emoji of +1
. (any point of view, please feel free to leave a message.)
docs
The example code at the first section (Switch themes) at https://react.zeit-ui.co/docs/customization/themes does not work properly, at least on Next.js 9.2.2, since:
useTheme()
doesn't seem to be very needed, since the current theme type will be stored on the type
state variable?const switchThemes = () => () =>
the extra set of => ()
isn't needed;<ZEITUIProvider theme={{ type }}>
the theme attribute actually takes in a value of type ThemeParam, which is an array of objects, where there is a "type" property. Therefore I replaced the above for <ZEITUIProvider theme={{ type: typevariable }}>
;As an example, this is my code currently (which works):
const App = () => {
const [themeType, setThemeType] = useState('dark')
const switchThemes = () => {
let nextTheme = themeType === 'dark' ? 'light' : 'dark'
setThemeType(nextTheme)
}
return (
<ZEITUIProvider theme={{ type: themeType }}>
<CSSBaseline />
<MyApp pressAction={switchThemes} />
</ZEITUIProvider>
)
}
I can make a commit with the updated code for the docs in case this is confirmed, or maybe you'll want to change some things on the code
styles
๐ ๏ธI have a problem setting this property to false, because the effect doesn't change.
If i'm not wrong, that property should change the effect on hover on the button component, and it will have no effect by setting to false.
<Button size="small" type="success" ghost effect={false}>
MyButton
</Button>
This is available in ant design Paragraph component under Typography.
https://ant.design/components/typography/#components-typography-demo-ellipsis
P.S. Absolutely loved the simplicity of the components and their designs.
(this is not a real feature request, so I deleted the template)
This is a gorgeous UI Kit and I had used it in our project. So is there any way to be a project sponsor?
Taking my meager power to make the project more briskly.
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.