@soul-refiner/design-system 2.14.41 → 2.14.42
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +16 -0
- package/dist/components/custom/courses_selection/courses_selection.js +1 -1
- package/dist/components/input/time/time.js +8 -5
- package/dist/src/components/custom/courses_selection/courses_selection.d.ts +2 -1
- package/dist/src/components/input/time/time.d.ts +5 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -83,6 +83,22 @@ npm install @soul-refiner/design-system
|
|
|
83
83
|
yarn add @soul-refiner/design-system
|
|
84
84
|
```
|
|
85
85
|
|
|
86
|
+
### To test changes in your design system locally in another app(for example: app-front React/nextjs app) before publishing to NPM or pushing to remote registry
|
|
87
|
+
|
|
88
|
+
1. **Link the design system package:**
|
|
89
|
+
|
|
90
|
+
```bash
|
|
91
|
+
cd pkg-design-system
|
|
92
|
+
yarn link
|
|
93
|
+
```
|
|
94
|
+
|
|
95
|
+
2. **Link the design system in your app:**
|
|
96
|
+
|
|
97
|
+
```bash
|
|
98
|
+
cd path/to/your/app
|
|
99
|
+
yarn link @soul-refiner/design-system
|
|
100
|
+
```
|
|
101
|
+
|
|
86
102
|
#### Important to note: Issues with Storybook and Fixes
|
|
87
103
|
|
|
88
104
|
- [Clickup Doc](https://app.clickup.com/24491279/v/dc/qbd8f-2130/qbd8f-8793)
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
"use strict";var React=require("react"),Image=require("next/image"),styled=require("styled-components"),button=require("../../actions/button/button.js"),paragraph=require("../../atoms/typography/paragraph.js"),box=require("../../atoms/box/box.js"),heading=require("../../atoms/typography/heading.js"),graduation_cap=require("../../../icons/basic/graduation_cap.js"),search=require("../../../icons/basic/search.js"),plus=require("../../../icons/basic/plus.js"),close=require("../../../icons/basic/close.js");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultCompat(React),Image__default=_interopDefaultCompat(Image);const CoursesSelection=({closeOnChange:t=!0,closeOnBlur:a=!0,disabled:r=!1,offset:e=[0,0],sx:
|
|
2
|
+
"use strict";var React=require("react"),Image=require("next/image"),styled=require("styled-components"),button=require("../../actions/button/button.js"),paragraph=require("../../atoms/typography/paragraph.js"),box=require("../../atoms/box/box.js"),heading=require("../../atoms/typography/heading.js"),graduation_cap=require("../../../icons/basic/graduation_cap.js"),search=require("../../../icons/basic/search.js"),plus=require("../../../icons/basic/plus.js"),close=require("../../../icons/basic/close.js"),chevron_down=(require("../../iconography/icon/icon.js"),require("../../../icons/arrow/chevron_down.js"));function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}require("../../../icons/basic/subtask.js"),require("../../../common/colors.js");var React__default=_interopDefaultCompat(React),Image__default=_interopDefaultCompat(Image);const CoursesSelection=({closeOnChange:t=!0,closeOnBlur:a=!0,disabled:r=!1,offset:e=[0,0],sx:o,containerSx:l,courses:n,label:c,courseIsSelected:i,setCourseIsSelected:u,subtitle:s,onlyOneCanBeSelected:d=!1,searchable:p=!0,...f})=>{const _=React__default.default.useRef(null),[g,m]=React__default.default.useState(!1);React__default.default.useEffect(()=>{r&&m(!1)},[r]);var x=n.filter(e=>i[e.id]),p=p?search.Search:chevron_down.ChevronDown;return React__default.default.createElement(Wrapper,{$sx:o,tabIndex:0,ref:_,onBlurCapture:e=>{a&&_?.current&&!_?.current?.contains(e.relatedTarget)&&m(!1)},...f},React__default.default.createElement(box.Box,{$gap:16,$align:"center"},React__default.default.createElement(IconWrapper,{$color:"var(--color-hue-purple-2)"},React__default.default.createElement(graduation_cap.GraduationCap,{color:"hue-purple-1",size:24})),React__default.default.createElement(heading.H.Six,{$bold:!0,$color:"hue-purple-1"},"Course")),React__default.default.createElement(paragraph.P,{$color:"grey-4",$fontSize:14,sx:"margin-top: 32px;"},s),React__default.default.createElement(button.Button,{type:"dropdown",isDropdownOpen:g,onClick:()=>{r||m(e=>!e)},customDropdownIcon:p,sx:"margin-top: 32px;"},c),g&&React__default.default.createElement(Container,{$offset:e,$sx:l},n.map(e=>React__default.default.createElement(OptionWrapper,{key:e.id,$disabled:r,onClick:()=>{u(d?{[e.id]:!0}:{...i,[e.id]:!0}),t&&m(!1)}},React__default.default.createElement(box.Box,{$display:"flex",$align:"center"},React__default.default.createElement(paragraph.P,{$color:"grey-4",$fontSize:14,$lineHeight:20,$mediumBold:!0,$textClampLines:1},e.name),React__default.default.createElement(plus.Plus,{sx:"margin-left: auto;"}))))),!!x.length&&React__default.default.createElement("ul",{style:{padding:0}},x.map(e=>React__default.default.createElement("li",{key:e.id,style:{listStyleType:"none",display:"flex",alignItems:"center",marginTop:"16px"}},React__default.default.createElement(Image__default.default,{alt:"",height:64,width:114,src:e.imageSrc,quality:100,style:{borderRadius:"8px",marginRight:"16px"}}),React__default.default.createElement(paragraph.P,{sx:"margin-left: 16px;"},e.name),React__default.default.createElement(close.Close,{sx:"cursor: pointer; margin-left: auto;",onClick:()=>u({...i,[e.id]:!1})})))))},Wrapper=styled.styled.div`
|
|
3
3
|
position: relative;
|
|
4
4
|
display: block;
|
|
5
5
|
outline: none;
|
|
@@ -1,21 +1,23 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
"use strict";var dropdown=require("../../actions/dropdown/dropdown.js"),React=require("react"),styled=require("styled-components"),clock=require("../../../icons/time/clock.js");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultCompat(React);const Time=({selectedTime:
|
|
2
|
+
"use strict";var dropdown=require("../../actions/dropdown/dropdown.js"),React=require("react"),styled=require("styled-components"),clock=require("../../../icons/time/clock.js");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultCompat(React);const Time=({selectedTime:r,setTime:t,selectedPeriod:e,setPeriod:a,minTime:o,minPeriod:l,isEndTime:d=!1,disabled:n=!1})=>{const i=React__default.default.useMemo(()=>{var r=[];for(let e=1;e<=12;e++)r.push(e+":00"),r.push(e+":15"),r.push(e+":30"),r.push(e+":45");return r},[]),u=(e,r)=>{var[e,t]=e.split(":").map(Number);let a=e;return"PM"===r&&12!==e?a+=12:"AM"===r&&12===e&&(a=0),60*a+t},s=r=>{if(!d||!o||!l)return i;const t=u(o,l);return i.filter(e=>{return u(e,r)>t})};c=["AM","PM"];var c=d&&o&&l&&"PM"===l?["PM"]:c;return React__default.default.createElement(dropdown.Dropdown,{options:s(e).map(e=>({value:e,label:e})),containerSx:"height: 440px;",trigger:React__default.default.createElement(InputWrapper,{$disabled:n},React__default.default.createElement(Input,{readOnly:!0,value:r+" "+e,disabled:n}),React__default.default.createElement(clock.Clock,null)),additionalOptions:c.map(e=>({label:e,value:e})),onChange:e=>{n||(e=e.target.getAttribute("data-value")??"",t(e))},additionalOnChange:e=>{n||(a(e),0<(e=s(e)).length&&!e.includes(r)&&t(e[0]))},defaultValue:r,defaultAdditionalValue:e,disabled:n})},InputWrapper=styled.styled.div`
|
|
3
3
|
width: fit-content;
|
|
4
4
|
display: flex;
|
|
5
5
|
gap: 8px;
|
|
6
6
|
align-items: center;
|
|
7
7
|
box-sizing: border-box;
|
|
8
8
|
padding: 12px;
|
|
9
|
-
background-color: var(--color-blue-10);
|
|
9
|
+
background-color: ${({$disabled:e})=>e?"var(--color-grey-9)":"var(--color-blue-10)"};
|
|
10
10
|
border-radius: 8px;
|
|
11
11
|
border: 1px solid transparent;
|
|
12
|
+
opacity: ${({$disabled:e})=>e?.6:1};
|
|
13
|
+
cursor: ${({$disabled:e})=>e?"not-allowed":"pointer"};
|
|
12
14
|
|
|
13
15
|
&:hover {
|
|
14
|
-
border-color: var(--color-grey-8);
|
|
16
|
+
border-color: ${({$disabled:e})=>e?"transparent":"var(--color-grey-8)"};
|
|
15
17
|
}
|
|
16
18
|
|
|
17
19
|
&:focus-within {
|
|
18
|
-
border-color: var(--color-primary-blue-2);
|
|
20
|
+
border-color: ${({$disabled:e})=>e?"transparent":"var(--color-primary-blue-2)"};
|
|
19
21
|
}
|
|
20
22
|
`,Input=styled.styled.input`
|
|
21
23
|
width: 100%;
|
|
@@ -24,11 +26,12 @@
|
|
|
24
26
|
font-family: var(--font-inter);
|
|
25
27
|
font-size: 16px;
|
|
26
28
|
line-height: 24px;
|
|
27
|
-
color: var(--color-grey-3);
|
|
29
|
+
color: ${({disabled:e})=>e?"var(--color-grey-6)":"var(--color-grey-3)"};
|
|
28
30
|
border: none;
|
|
29
31
|
outline: none;
|
|
30
32
|
border-radius: 8px;
|
|
31
33
|
background-color: transparent;
|
|
34
|
+
cursor: ${({disabled:e})=>e?"not-allowed":"text"};
|
|
32
35
|
|
|
33
36
|
&::placeholder {
|
|
34
37
|
color: var(--color-grey-6);
|
|
@@ -18,6 +18,7 @@ export interface CoursesSelectionProps extends NativeProps, React.PropsWithChild
|
|
|
18
18
|
setCourseIsSelected: React.Dispatch<React.SetStateAction<Record<string, boolean>>>;
|
|
19
19
|
subtitle: string;
|
|
20
20
|
onlyOneCanBeSelected: boolean;
|
|
21
|
+
searchable?: boolean;
|
|
21
22
|
}
|
|
22
|
-
export declare const CoursesSelection: ({ closeOnChange, closeOnBlur, disabled, offset, sx, containerSx, courses, label, courseIsSelected, setCourseIsSelected, subtitle, onlyOneCanBeSelected, ...rest }: CoursesSelectionProps) => React.JSX.Element;
|
|
23
|
+
export declare const CoursesSelection: ({ closeOnChange, closeOnBlur, disabled, offset, sx, containerSx, courses, label, courseIsSelected, setCourseIsSelected, subtitle, onlyOneCanBeSelected, searchable, ...rest }: CoursesSelectionProps) => React.JSX.Element;
|
|
23
24
|
export {};
|
|
@@ -4,5 +4,9 @@ export type TimeProps = {
|
|
|
4
4
|
setTime: (value: string) => void;
|
|
5
5
|
selectedPeriod: string;
|
|
6
6
|
setPeriod: (value: string) => void;
|
|
7
|
+
minTime?: string;
|
|
8
|
+
minPeriod?: string;
|
|
9
|
+
isEndTime?: boolean;
|
|
10
|
+
disabled?: boolean;
|
|
7
11
|
};
|
|
8
|
-
export declare const Time: ({ selectedTime, setTime, selectedPeriod, setPeriod, }: TimeProps) => React.JSX.Element;
|
|
12
|
+
export declare const Time: ({ selectedTime, setTime, selectedPeriod, setPeriod, minTime, minPeriod, isEndTime, disabled, }: TimeProps) => React.JSX.Element;
|