Skip to content

Commit 4974b7b

Browse files
akula-koteswaruduKoteswarudu Akularsbh
authored and
ravisuhag
committed
feat: use radix for core ui components (#37)
* updated antd select to radix select * changed switch from antd to radix * changed switch in formBuilder * added story for switch and fixed props for select in FormBuilder * feat: update antd select to radix select (#28) * updated antd select to radix select * changed switch from antd to radix * changed switch in formBuilder * added story for switch and fixed props for select in FormBuilder Co-authored-by: Koteswarudu Akula <koteswaruduakula@koteswarudu-a.optilink> * Changed antd radio to radix * chore: changed storybook for Radio * fix: updated yarn lock to fix rollup plugin version issue * feat: replaced antd slider with radix slider * feat: removed antd from image * feat: removed antd tag and created a new tag component * feat: added a simple preview option to Image * feat: updated antd radio to radix (#30) * updated antd select to radix select * changed switch from antd to radix * changed switch in formBuilder * added story for switch and fixed props for select in FormBuilder * Changed antd radio to radix * chore: changed storybook for Radio * fix: updated yarn lock to fix rollup plugin version issue * feat: replaced antd slider with radix slider * feat: removed antd from image * feat: removed antd tag and created a new tag component * feat: added a simple preview option to Image Co-authored-by: Koteswarudu Akula <koteswaruduakula@koteswarudu-a.optilink> * feat: created a new component combobox combobox provides multi select and search features BREAKING CHANGE: select doesn't provide multi select or search feature. if we need them, we need to use combobox. combobox for multiselect and search feature #31 * style: minor styling changes * feat : combobox for multiselect and search features (#32) * updated antd select to radix select * changed switch from antd to radix * changed switch in formBuilder * added story for switch and fixed props for select in FormBuilder * Changed antd radio to radix * chore: changed storybook for Radio * fix: updated yarn lock to fix rollup plugin version issue * feat: replaced antd slider with radix slider * feat: removed antd from image * feat: removed antd tag and created a new tag component * feat: added a simple preview option to Image * feat: created a new component combobox combobox provides multi select and search features BREAKING CHANGE: select doesn't provide multi select or search feature. if we need them, we need to use combobox. combobox for multiselect and search feature #31 * style: minor styling changes Co-authored-by: Koteswarudu Akula <koteswaruduakula@koteswarudu-a.optilink> * fix: lint issues * chore(release): publish v0.7.1-alpha.0 * ci: add npm whoami to debug * chore(release): publish v0.7.1-alpha.1 * ci: fix lerna publish * chore(release): publish v0.7.1-alpha.2 * ci: update npm registry * chore(release): publish v0.7.1-alpha.3 * feat: added radio button feature to radio and changed combobox to hide content properly radio button feature supports to insert custom components into radio group and combobox will now hides the content using ellipsis when the screen is minimized. * feat: added tooltip for slider and changed tag to hide the content using ellipsis when required * fix: fixed select so that it will be rendered correctly even if no initial value is given * chore: added styles to radio and switch * feat: added enable tag feature for combobox in form and fixed placeholder content hiding * feat : added features to combobox , select , radio, tag , switch and slider (#33) * updated antd select to radix select * changed switch from antd to radix * changed switch in formBuilder * added story for switch and fixed props for select in FormBuilder * Changed antd radio to radix * chore: changed storybook for Radio * fix: updated yarn lock to fix rollup plugin version issue * feat: replaced antd slider with radix slider * feat: removed antd from image * feat: removed antd tag and created a new tag component * feat: added a simple preview option to Image * feat: created a new component combobox combobox provides multi select and search features BREAKING CHANGE: select doesn't provide multi select or search feature. if we need them, we need to use combobox. combobox for multiselect and search feature #31 * style: minor styling changes * feat: added radio button feature to radio and changed combobox to hide content properly radio button feature supports to insert custom components into radio group and combobox will now hides the content using ellipsis when the screen is minimized. * feat: added tooltip for slider and changed tag to hide the content using ellipsis when required * fix: fixed select so that it will be rendered correctly even if no initial value is given * chore: added styles to radio and switch * feat: added enable tag feature for combobox in form and fixed placeholder content hiding Co-authored-by: Koteswarudu Akula <koteswaruduakula@koteswarudu-a.optilink> * chore(release): publish v0.7.1-alpha.4 * feat: removed antd input and created a new input component from scratch * feat: created a new checkbox component using radix and updated it in filters * feat: created a new text component from scratch which provides different text styles * feat: created a new tooltip component which supports 12 placement positions * feat: replaced radix icon with a new component built from scratch * feat: replaced antd button component with a new component buitl from scratch * feat: updated confirm modal styles * feat: replaced antd popover with radix popover component * feat: replaced antd notification component with radix toast * feat: replaced antd tabs component with radix tabs * feat: replaced antd sidebar with a new sidebar component * chore: updated theme styles Co-authored-by: Koteswarudu Akula <koteswaruduakula@koteswarudu-a.optilink> Co-authored-by: akula-koteswarudu <60617676+akula-koteswarudu@users.noreply.github.com> Co-authored-by: akula-koteswarudu <koteswaruduakula@gmail.com> Co-authored-by: Rishabh Mishra <me@rsbh.dev>
1 parent e4b1227 commit 4974b7b

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

43 files changed

+2042
-698
lines changed

‎packages/apsara-ui/package.json

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,11 +38,15 @@
3838
"@ant-design/icons": "^4.2.2",
3939
"@odpf/icons": "^0.7.1-alpha.3",
4040
"@radix-ui/colors": "^0.1.8",
41+
"@radix-ui/react-checkbox": "^1.0.0",
4142
"@radix-ui/react-icons": "^1.1.1",
43+
"@radix-ui/react-popover": "^1.0.0",
4244
"@radix-ui/react-radio-group": "^1.0.0",
4345
"@radix-ui/react-select": "^0.1.1",
4446
"@radix-ui/react-slider": "^1.0.0",
4547
"@radix-ui/react-switch": "^0.1.5",
48+
"@radix-ui/react-tabs": "^1.0.0",
49+
"@radix-ui/react-toast": "^1.0.0",
4650
"antd": "^4.16.13",
4751
"clsx": "^1.1.1",
4852
"moment": "^2.29.1",

‎packages/apsara-ui/src/Button/Button.stories.mdx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -109,6 +109,7 @@ export const Button = (args) => <ButtonTemplate {...args} />;
109109
loading: true,
110110
type: "primary",
111111
disabled: false,
112+
block: false,
112113
}}
113114
>
114115
{(args) => <Button {...args}>loading</Button>}

‎packages/apsara-ui/src/Button/Button.styles.tsx

Lines changed: 111 additions & 88 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
1-
import Button from "antd/lib/button";
21
import styled, { css } from "styled-components";
32

4-
const defaultSize = "default";
3+
const defaultSize = "middle";
54
const styleMap = {
65
small: {
76
padding: "0px 7px",
@@ -10,7 +9,7 @@ const styleMap = {
109
lineHeight: "13px",
1110
letterSpacing: "0.11px",
1211
},
13-
default: {
12+
middle: {
1413
padding: "4px 12px",
1514
height: "32px",
1615
fontSize: "14px",
@@ -32,120 +31,144 @@ const colorStyles = (color: string, background: string, border: string) => css`
3231
background: ${background};
3332
`;
3433

35-
export const AntdButton: any = styled(Button).attrs((props: any) => ({
36-
size: props.size || defaultSize,
37-
}))`
38-
&& {
34+
export const StyledButton = styled("span")<{
35+
type: "primary" | "ghost" | "dashed" | "link" | "text" | "default" | "barebone";
36+
size: string | "small" | "middle" | "large";
37+
block: boolean;
38+
shape: "circle" | "round";
39+
}>`
40+
.apsara-btn {
3941
display: inline-flex;
4042
align-items: center;
4143
justify-content: center;
44+
gap: 8px;
4245
text-shadow: none;
43-
box-shadow: none;
46+
border-radius: ${({ shape }) => (shape === "circle" ? "50%" : "2px")};
47+
cursor: pointer;
48+
outline: none;
49+
border: 1px solid #fff;
50+
transition: 0.3s;
51+
${({ block }) => block && "width: 100%"};
52+
4453
padding: ${({ size }) => styleMap[size]?.padding || styleMap[defaultSize].padding};
4554
height: ${({ size }) => styleMap[size]?.height || styleMap[defaultSize].height};
4655
font-size: ${({ size }) => styleMap[size]?.fontSize || styleMap[defaultSize].fontSize};
4756
line-height: ${({ size }) => styleMap[size]?.lineHeight || styleMap[defaultSize].lineHeight};
4857
letter-spacing: ${({ size }) => styleMap[size]?.letterSpacing || styleMap[defaultSize].letterSpacing};
4958
50-
${({ theme }) => colorStyles(theme?.colors?.black[9], "transparent", theme?.colors?.black[4])}
51-
&:hover,
5259
&:focus {
53-
${({ theme }) => colorStyles(theme?.colors?.primary[5], "transparent", theme?.colors?.primary[5])}
54-
}
55-
&:active {
56-
${({ theme }) => colorStyles(theme?.colors?.primary[6], "transparent", theme?.colors?.primary[6])}
57-
}
58-
59-
&[disabled] {
60-
&,
61-
&:hover,
62-
&:focus,
63-
&:active {
64-
${({ theme }) => colorStyles(theme?.colors?.black[6], "transparent", theme?.colors?.black[4])}
65-
}
66-
}
67-
}
68-
69-
&&.ant-btn-primary {
70-
${({ theme }) => colorStyles(theme?.colors?.black[0], theme?.colors?.primary[4], theme?.colors?.primary[4])}
71-
&:hover,
72-
&:focus {
73-
${({ theme }) => colorStyles(theme?.colors?.black[0], theme?.colors?.primary[5], theme?.colors?.primary[5])}
74-
}
75-
&:active {
76-
${({ theme }) => colorStyles(theme?.colors?.black[0], theme?.colors?.primary[6], theme?.colors?.primary[6])}
60+
box-shadow: 0px 0px 0px 1px rgb(166, 200, 242);
61+
animation: anim-shadow 0.5s forwards;
7762
}
7863
79-
&[disabled] {
80-
&,
81-
&:hover,
82-
&:focus,
83-
&:active {
84-
${({ theme }) => colorStyles(theme?.colors?.black[0], theme?.colors?.black[6], theme?.colors?.black[6])}
64+
@keyframes anim-shadow {
65+
100% {
66+
box-shadow: 0px 0px 5px 5px rgba(168, 208, 250, 0);
8567
}
8668
}
87-
}
8869
89-
&&.ant-btn-text {
90-
${({ theme }) => colorStyles(theme?.colors?.primary[4], "transparent", "transparent")}
70+
${({ theme }) => colorStyles(theme?.colors?.black[9], "transparent", theme?.colors?.black[4])}
9171
&:hover,
9272
&:focus {
93-
${({ theme }) => colorStyles(theme?.colors?.primary[5], "transparent", "transparent")}
73+
${({ theme }) => colorStyles(theme?.colors?.primary[5], "transparent", theme?.colors?.primary[5])}
9474
}
9575
&:active {
96-
${({ theme }) => colorStyles(theme?.colors?.primary[6], "transparent", "transparent")}
76+
${({ theme }) => colorStyles(theme?.colors?.primary[6], "transparent", theme?.colors?.primary[6])}
9777
}
9878
9979
&[disabled] {
80+
cursor: not-allowed;
10081
&,
10182
&:hover,
10283
&:focus,
10384
&:active {
104-
${({ theme }) => colorStyles(theme?.colors?.black[6], "transparent", "transparent")}
105-
}
106-
}
107-
}
108-
109-
&&.barebone {
110-
padding: 0px;
111-
background: transparent;
112-
border: 0;
113-
box-shadow: none;
114-
color: ${({ theme }) => theme?.colors?.primary[5]};
115-
font-weight: bold;
116-
117-
&.ant-btn[disabled],
118-
> .ant-btn[disabled] {
119-
display: flex;
120-
align-self: center;
121-
align-items: center;
122-
font-weight: bold;
123-
border: none !important;
124-
background: transparent !important;
125-
color: ${({ theme }) => theme?.colors?.black[6]};
126-
127-
> .anticon {
128-
vertical-align: text-bottom;
85+
${({ theme }) => colorStyles(theme?.colors?.black[6], "transparent", theme?.colors?.black[4])}
12986
}
13087
}
13188
132-
&.btn-error,
133-
&.btn-error > .anticon {
134-
color: ${({ theme }) => theme?.colors?.error[4]} !important;
135-
}
136-
137-
&.btn-success {
138-
color: ${({ theme }) => theme?.colors?.success[4]};
139-
}
140-
141-
span.anticon {
142-
margin: 0;
143-
}
144-
}
145-
146-
&&.ant-btn > .anticon + span,
147-
.ant-btn > .anticon + span,
148-
span {
149-
display: flex;
89+
${({ type, theme }) =>
90+
type === "primary"
91+
? css`
92+
${colorStyles(theme?.colors?.black[0], theme?.colors?.primary[4], theme?.colors?.primary[4])}
93+
&:hover,
94+
&:focus {
95+
${colorStyles(theme?.colors?.black[0], theme?.colors?.primary[5], theme?.colors?.primary[5])}
96+
}
97+
98+
&:active {
99+
${colorStyles(theme?.colors?.black[0], theme?.colors?.primary[6], theme?.colors?.primary[6])}
100+
}
101+
102+
&[disabled] {
103+
&,
104+
&:hover,
105+
&:focus,
106+
&:active {
107+
${colorStyles(theme?.colors?.black[0], theme?.colors?.black[6], theme?.colors?.black[6])}
108+
}
109+
}
110+
`
111+
: type === "text"
112+
? css`
113+
${colorStyles(theme?.colors?.primary[4], "transparent", "transparent")}
114+
&:hover,
115+
&:focus {
116+
${colorStyles(theme?.colors?.primary[5], "transparent", "transparent")}
117+
animation: none;
118+
box-shadow: none;
119+
}
120+
&:active {
121+
${colorStyles(theme?.colors?.primary[6], "transparent", "transparent")}
122+
}
123+
124+
&[disabled] {
125+
&,
126+
&:hover,
127+
&:focus,
128+
&:active {
129+
${colorStyles(theme?.colors?.black[6], "transparent", "transparent")}
130+
}
131+
}
132+
`
133+
: type === "barebone"
134+
? css`
135+
padding: 0px;
136+
background: transparent;
137+
border: 0;
138+
box-shadow: none;
139+
color: ${({ theme }) => theme?.colors?.primary[5]};
140+
font-weight: bold;
141+
142+
&.apsara-btn[disabled],
143+
> .apsara-btn[disabled] {
144+
display: flex;
145+
align-self: center;
146+
align-items: center;
147+
font-weight: bold;
148+
border: none !important;
149+
background: transparent !important;
150+
color: ${({ theme }) => theme?.colors?.black[6]};
151+
152+
> .apsara_icon {
153+
vertical-align: text-bottom;
154+
}
155+
}
156+
157+
span.apsara_icon {
158+
margin: 0;
159+
}
160+
`
161+
: type === "link"
162+
? css`
163+
&:focus {
164+
animation: none;
165+
box-shadow: none;
166+
}
167+
`
168+
: type === "dashed"
169+
? css`
170+
border-style: dashed;
171+
`
172+
: null}
150173
}
151174
`;

‎packages/apsara-ui/src/Button/Button.tsx

Lines changed: 21 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,15 @@ import { LoadingOutlined } from "@ant-design/icons";
33
import clsx from "clsx";
44
import Tooltip from "../Tooltip";
55
import Icon from "../Icon";
6-
import * as AC from "./Button.styles";
6+
// import * as AC from "./Button.styles";
77
import { CustomButtonProps } from "./Button.types";
8+
import { StyledButton } from "./Button.styles";
89

910
const defaultIconSize = 24;
1011
const Button = ({
1112
type = "default",
1213
className,
13-
disabled,
14+
disabled = false,
1415
loading = false,
1516
tooltipProps = {
1617
message: "",
@@ -22,6 +23,9 @@ const Button = ({
2223
iconSize = defaultIconSize,
2324
children,
2425
size = "middle",
26+
block = false,
27+
shape = "round",
28+
onClick = () => null,
2529
...props
2630
}: CustomButtonProps) => {
2731
const IconComponent = () => {
@@ -38,13 +42,24 @@ const Button = ({
3842
};
3943

4044
const button = (
41-
<AC.AntdButton disabled={disabled} className={clsx(className, type)} type={type} size={size} {...props}>
42-
<IconComponent />
43-
{children}
44-
</AC.AntdButton>
45+
<StyledButton role="button" type={type} size={size} block={block} shape={shape}>
46+
<button
47+
disabled={disabled}
48+
onClick={(e) => {
49+
onClick(e);
50+
}}
51+
className={`apsara-btn ${clsx(className, type)}`}
52+
{...props}
53+
>
54+
<IconComponent />
55+
{children}
56+
</button>
57+
</StyledButton>
4558
);
4659

4760
return tooltipProps?.message ? (
61+
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
62+
//@ts-ignore:next-line
4863
<Tooltip placement={tooltipProps?.placement} title={tooltipProps?.message}>
4964
<span>{button}</span>
5065
</Tooltip>

‎packages/apsara-ui/src/Checkbox/Checkbox.stories.mdx

Lines changed: 6 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,9 @@
11
import { Meta, Preview, Canvas, Story, ArgsTable, IconGallery, IconItem } from "@storybook/addon-docs/blocks";
22
import Checkbox from "./Checkbox";
33

4-
export const options = [
5-
{ label: "Apple", value: "Apple" },
6-
{ label: "Pear", value: "Pear" },
7-
{ label: "Orange", value: "Orange", disabled: true },
8-
];
9-
104
<Meta
115
title="General/Checkbox"
126
argTypes={{
13-
options: {
14-
control: { type: "object" },
15-
description: "Set children optional",
16-
table: {
17-
type: { summary: "string[] | Array<{ label: string value: string disabled?: boolean }>" },
18-
},
19-
},
207
value: {
218
control: { type: "text" },
229
description: "Used for setting the currently selected value",
@@ -32,8 +19,12 @@ export const options = [
3219
<Story
3320
name="Playground"
3421
args={{
35-
options: options,
36-
value: "Apple",
22+
defaultValue: "apple",
23+
options: [
24+
{ value: "apple", label: "Apple" },
25+
{ value: "mango", label: "Mango" },
26+
{ value: "guava", label: "Gauva" },
27+
],
3728
}}
3829
>
3930
{(args) => <Checkbox.Group {...args} />}

0 commit comments

Comments
 (0)