Cine-UI is a UI component library which has a set of basic ready-made UI components such as button,radio button,input fields,etc.They serve as building blocks for layouts.Later point, we are planning to use these ready-made components in order to implement tradedesk UI and further more in future.
Docs (storybook) here.
Headless UI, React, Tailwind CSS, Storybook
It is always recommended to test the package locally before publishing to the npm registry.
npm run build && npm pack
npm install path/to/cine-ui/cine-ui-version.tgz
where cine-ui-version.tgz could e.g. be cine-ui-0.1.0.tgznpm install path/to/cine-ui/cine-ui-version.tgz
).preflight
to false in
the corePlugins
section of tailwind.config.js file.module.exports = {
corePlugins: {
preflight: false,
},
};
# Sample code
import React, { useState } from 'react';
import { useForm } from 'react-hook-form';
import Input from './Input.component';
const Template = () => {
const [text, setText] = useState('');
const { register, handleSubmit } = useForm();
const onSubmit = (data) => {
console.log(data);
};
const onChangeHandle = (e) => {
const { value } = e.target;
setText(value);
};
return (
<form onSubmit={handleSubmit(onSubmit)}>
<Input
type={type}
name="Name"
{...register('Name')}
placeholder={placeholder}
id={'1'}
value={text}
onChange={onChangeHandle}
disabled={disabled}
/>
<input type="submit" />
</form>
);
};
export const Base = Template.bind({});
# Sample code
import React, { useState } from 'react';
import { useForm, Controller } from 'react-hook-form';
import ListboxComponent from './Listbox.component';
const Template = () => {
const [value, setValue] = useState();
const { control, handleSubmit } = useForm({
defaultValues: {
selectedValue: '',
},
});
const onSubmit = (data) => {
console.log(JSON.stringify(data));
};
return (
<form onSubmit={handleSubmit(onSubmit)}>
<Controller
name="selectedValue"
control={control}
render={({ field: { onChange } }) => (
<ListboxComponent
options={[
{ value: '1', label: 'Option 1' },
{ value: '2', label: 'Option 2' },
{ value: '3', label: 'Option 3' },
{ value: '4', label: 'Option 4' },
{ value: '5', label: 'Option 5' },
]}
value={value}
onChange={(e) => {
onChange(e);
setValue(e);
}}
placeholder="Select option"
/>
)}
/>
<input type="submit" />
</form>
);
};
export const Listbox = Template.bind({});
This component already has an internal ref to track the range value. So, when we pass ref from the external component, it is not returning the current value of the slider range. Due to that reason, when we integrate react-hook-form with this component ,one have to implement using Controller method.
CineUI is styled using TailwindCSS. This means that the component library can easily be styled to other color themes by overriding the tailwind theme variables in the consumer project. The easiest way to achieve this is to use TailwindCSS in the consumer project too and add the relevant variables to the tailwind.config.js file. Available customization variables can be found here.
git pull origin master/main
in the terminal.git branch release/vX.X.X && git checkout release/vX.X.X
.npm version <update_type>
git tag
.git push origin release/vX.X.X --tags
.Releases
in this repo.Choose a tag
button and find the tag you created earlier (vX.X.X
e.g. v0.1.0
).Generate release notes
. It’ll automatically generate notes with references to all pull requests between the current tag and latest release.Create a discussion for this release
box (recommended).Publish release
to publish the release of the new version.