semrush / intergalactic Goto Github PK
View Code? Open in Web Editor NEWIntergalactic is a constantly developing design system and library of React components.
Home Page: https://developer.semrush.com/intergalactic/
License: MIT License
Intergalactic is a constantly developing design system and library of React components.
Home Page: https://developer.semrush.com/intergalactic/
License: MIT License
Describe the bug
Changing the line-height CSS property outside the DatePicker component causes alignment issues inside the component when using DatePicker.InputTrigger.
Code example
Open codesandbox.
To Reproduce
Steps to reproduce the behavior:
Expected behavior
DatePicker.InputTrigger remains unaffected by changes to the line-height property. It displays the humanized date with proper alignment, similar to DatePicker.ButtonTrigger.
Request
For greater accessibility of our chart library, it is important that the data on the graphs can be distinguished not only by color but also by non-color elements, so that one dataset can be distinguished from another. Similar remarks were made in the recommendations from Level Access:
The blue and green lines and areas do not have sufficient contrast with each other and with the white background. They must have at least a 3:1 contrast ratio.
What needs to be done:
It's hilarious a little bit, but our charts still doesn't have any special component that helps to build charts legend. Documentation recommends developers to build chart legends on their own but we able to provide much better DX by creating a high-level component that works with charts out of the box.
Here is the component design: https://developer.semrush.com/intergalactic/data-display/chart-legend/
Problem:
When I pass foreignObject
as a tag, Label is not positioned correctly. Passing the coordinates doesn't change anything because they are not changeable. Code
Example:
I've prepared an example https://codesandbox.io/s/silly-scott-9kqpz2?file=/src/App.tsx
I have made a simple demo on the code sandbox
https://codesandbox.io/s/semrush-theme-3kbhtd?file=/webpack.config.js
I followed by documentation https://developer.semrush.com/intergalactic/style/themes/themes-global/
But I don't see that button changed to a red color. You can check the file: src/theme/button/button.shadow.css
Can you help me to change global styles for any elements?
I started my local project with Vite
My local config is:
^2.9.9
^13.2.0
4.3.0
vite.config.ts:
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// https://vitejs.dev/config/
export default defineConfig(() => {
const config = {
plugins: [react({
babel: {
configFile: true,
}
})]
}
return config;
});
babel.config.js:
const path = require('path');
const presets = [];
const plugins = [
[
'@semcore/babel-plugin-react-semcore',
{
theme: path.resolve(process.cwd(), 'src', 'theme'),
verbose: true,
},
],
];
module.exports = { presets, plugins };
Describe the bug
Noticed, that focus trap doesn't work properly for 'modal inside modal' case
To Reproduce
Expected behavior
Focus is trapped inside the last opened modal
Additional context
Focus is not trapped and leaks to the previous modal (see att. screencast).
Hi there! I try to use this https://developer.semrush.com/intergalactic/style/icon/ lib and copy this import OrientationLandscapeM from '@semcore/ui/icon/OrientationLandscape/m'
code, but got error on the picture
What did i do wrong?
Here's a quick overview of the chart:
Hi team,
The NPM page for @semcore/table lists version 4.3.0 as the latest release, but the changelogs reveal that the actual latest version is 4.12.2.
It appears that only pre-release versions have been pushed to NPM recently. Could you please investigate that?
Our current documentation website contains a lot of home-invented wheels that makes it's support extremely hard. Also it doesn't have good browsers support and loads pretty slow.
Recently https://vitepress.dev/ got out of alpha testing. It should be pretty good for us.
Possible troubles:
User report is here:
we are currently exploring the possibility of using astro as an ssr/template render framework
overall everything works great, but we're running into a few issues that seem to be on the Vite side
- imports like @semcore/ui/* do not work, we get the error Unexpected token 'export'
- when using imports like @semcore/*, everything works fine in development mode, but during the production build we > get an error like Element type is invalid: expected a string, which can be solved with such hack:
import $Button from "@semcore/button"; const Button = $Button.default || $ButtonI found some opened github issues, but nothing has helped me so far
It seems that issue is caused by weird Astro resolver but anyway we must support it.
app-index.js:32 Warning: FunctionMemoComponent: Support for defaultProps will be removed from memo components in a future major release. Use JavaScript default parameters instead. at WrapperForwardRef (webpack-internal:///(app-client)/./node_modules/@semcore/core/lib/es6/index.js:130:34) at div at Box (webpack-internal:///(app-client)/./node_modules/@semcore/flex-box/lib/es6/Box/index.js:12:68) at Component (webpack-internal:///(app-client)/./node_modules/@semcore/core/lib/es6/index.js:194:88) at WrapperForwardRef (webpack-internal:///(app-client)/./node_modules/@semcore/core/lib/es6/index.js:130:34) at FadeInOut at Overlay (webpack-internal:///(app-client)/./node_modules/@semcore/modal/lib/es6/Modal.js:214:24) at FunctionMemoComponent (webpack-internal:///(app-client)/./node_modules/@semcore/core/lib/es6/index.js:270:65) at WrapperForwardRef (webpack-internal:///(app-client)/./node_modules/@semcore/core/lib/es6/index.js:130:34) at Children at Portal (webpack-internal:///(app-client)/./node_modules/@semcore/portal/lib/es6/Portal.js:24:24) at FunctionMemoComponent (webpack-internal:///(app-client)/./node_modules/@semcore/core/lib/es6/index.js:270:65) at WrapperForwardRef (webpack-internal:///(app-client)/./node_modules/@semcore/core/lib/es6/index.js:130:34) at Component (webpack-internal:///(app-client)/./node_modules/@semcore/core/lib/es6/index.js:194:88) at WrapperForwardRef (webpack-internal:///(app-client)/./node_modules/@semcore/core/lib/es6/index.js:130:34) at div at Workspaces (webpack-internal:///(app-client)/./components/(app)/Workspaces/page.jsx:23:80) at InnerLayoutRouter (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/layout-router.js:225:11) at RedirectErrorBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/redirect-boundary.js:73:9) at RedirectBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/redirect-boundary.js:81:11) at NotFoundBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/not-found-boundary.js:40:11) at LoadingBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/layout-router.js:330:11) at ErrorBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/error-boundary.js:87:11) at InnerScrollAndFocusHandler (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/layout-router.js:139:9) at ScrollAndFocusHandler (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/layout-router.js:211:11) at RenderFromTemplateContext (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/render-from-template-context.js:15:44) at OuterLayoutRouter (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/layout-router.js:340:11) at div at main at div at InnerLayoutRouter (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/layout-router.js:225:11) at RedirectErrorBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/redirect-boundary.js:73:9) at RedirectBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/redirect-boundary.js:81:11) at NotFoundBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/not-found-boundary.js:40:11) at LoadingBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/layout-router.js:330:11) at ErrorBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/error-boundary.js:87:11) at InnerScrollAndFocusHandler (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/layout-router.js:139:9) at ScrollAndFocusHandler (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/layout-router.js:211:11) at RenderFromTemplateContext (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/render-from-template-context.js:15:44) at OuterLayoutRouter (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/layout-router.js:340:11) at InnerLayoutRouter (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/layout-router.js:225:11) at RedirectErrorBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/redirect-boundary.js:73:9) at RedirectBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/redirect-boundary.js:81:11) at NotFoundBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/not-found-boundary.js:40:11) at LoadingBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/layout-router.js:330:11) at ErrorBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/error-boundary.js:87:11) at InnerScrollAndFocusHandler (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/layout-router.js:139:9) at ScrollAndFocusHandler (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/layout-router.js:211:11) at RenderFromTemplateContext (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/render-from-template-context.js:15:44) at OuterLayoutRouter (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/layout-router.js:340:11) at body at html at RedirectErrorBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/redirect-boundary.js:73:9) at RedirectBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/redirect-boundary.js:81:11) at NotFoundErrorBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/not-found-boundary.js:33:9) at NotFoundBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/not-found-boundary.js:40:11) at ReactDevOverlay (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/react-dev-overlay/internal/ReactDevOverlay.js:66:9) at HotReload (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/react-dev-overlay/hot-reloader-client.js:276:11) at Router (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/app-router.js:90:11) at ErrorBoundaryHandler (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/error-boundary.js:62:9) at ErrorBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/error-boundary.js:87:11) at AppRouter (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/app-router.js:374:13) at ServerRoot (webpack-internal:///(app-client)/./node_modules/next/dist/client/app-index.js:154:11) at RSCComponent at Root (webpack-internal:///(app-client)/./node_modules/next/dist/client/app-index.js:171:11) window.console.error @ app-index.js:32 console.error @ hydration-error-info.js:45 printWarning @ react-dom.development.js:94 error @ react-dom.development.js:68 updateMemoComponent @ react-dom.development.js:14740 beginWork$1 @ react-dom.development.js:17406 beginWork @ react-dom.development.js:25650 performUnitOfWork @ react-dom.development.js:24501 workLoopSync @ react-dom.development.js:24217 renderRootSync @ react-dom.development.js:24182 performSyncWorkOnRoot @ react-dom.development.js:23677 flushSyncWorkAcrossRoots_impl @ react-dom.development.js:9965 flushSyncWorkOnAllRoots @ react-dom.development.js:9923 processRootScheduleInMicrotask @ react-dom.development.js:10067 eval @ react-dom.development.js:10238 app-index.js:32 Warning: OutsideClick: Support for defaultProps will be removed from function components in a future major release. Use JavaScript default parameters instead. at OutsideClick (webpack-internal:///(app-client)/./node_modules/@semcore/outside-click/lib/es6/OutsideClick.js:18:24) at FunctionMemoComponent (webpack-internal:///(app-client)/./node_modules/@semcore/core/lib/es6/index.js:270:65) at WrapperForwardRef (webpack-internal:///(app-client)/./node_modules/@semcore/core/lib/es6/index.js:130:34) at div at Box (webpack-internal:///(app-client)/./node_modules/@semcore/flex-box/lib/es6/Box/index.js:12:68) at Component (webpack-internal:///(app-client)/./node_modules/@semcore/core/lib/es6/index.js:194:88) at WrapperForwardRef (webpack-internal:///(app-client)/./node_modules/@semcore/core/lib/es6/index.js:130:34) at FadeInOut at Overlay (webpack-internal:///(app-client)/./node_modules/@semcore/modal/lib/es6/Modal.js:214:24) at FunctionMemoComponent (webpack-internal:///(app-client)/./node_modules/@semcore/core/lib/es6/index.js:270:65) at WrapperForwardRef (webpack-internal:///(app-client)/./node_modules/@semcore/core/lib/es6/index.js:130:34) at Children at Portal (webpack-internal:///(app-client)/./node_modules/@semcore/portal/lib/es6/Portal.js:24:24) at FunctionMemoComponent (webpack-internal:///(app-client)/./node_modules/@semcore/core/lib/es6/index.js:270:65) at WrapperForwardRef (webpack-internal:///(app-client)/./node_modules/@semcore/core/lib/es6/index.js:130:34) at Component (webpack-internal:///(app-client)/./node_modules/@semcore/core/lib/es6/index.js:194:88) at WrapperForwardRef (webpack-internal:///(app-client)/./node_modules/@semcore/core/lib/es6/index.js:130:34) at div at Workspaces (webpack-internal:///(app-client)/./components/(app)/Workspaces/page.jsx:23:80) at InnerLayoutRouter (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/layout-router.js:225:11) at RedirectErrorBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/redirect-boundary.js:73:9) at RedirectBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/redirect-boundary.js:81:11) at NotFoundBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/not-found-boundary.js:40:11) at LoadingBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/layout-router.js:330:11) at ErrorBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/error-boundary.js:87:11) at InnerScrollAndFocusHandler (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/layout-router.js:139:9) at ScrollAndFocusHandler (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/layout-router.js:211:11) at RenderFromTemplateContext (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/render-from-template-context.js:15:44) at OuterLayoutRouter (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/layout-router.js:340:11) at div at main at div at InnerLayoutRouter (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/layout-router.js:225:11) at RedirectErrorBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/redirect-boundary.js:73:9) at RedirectBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/redirect-boundary.js:81:11) at NotFoundBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/not-found-boundary.js:40:11) at LoadingBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/layout-router.js:330:11) at ErrorBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/error-boundary.js:87:11) at InnerScrollAndFocusHandler (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/layout-router.js:139:9) at ScrollAndFocusHandler (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/layout-router.js:211:11) at RenderFromTemplateContext (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/render-from-template-context.js:15:44) at OuterLayoutRouter (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/layout-router.js:340:11) at InnerLayoutRouter (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/layout-router.js:225:11) at RedirectErrorBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/redirect-boundary.js:73:9) at RedirectBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/redirect-boundary.js:81:11) at NotFoundBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/not-found-boundary.js:40:11) at LoadingBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/layout-router.js:330:11) at ErrorBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/error-boundary.js:87:11) at InnerScrollAndFocusHandler (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/layout-router.js:139:9) at ScrollAndFocusHandler (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/layout-router.js:211:11) at RenderFromTemplateContext (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/render-from-template-context.js:15:44) at OuterLayoutRouter (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/layout-router.js:340:11) at body at html at RedirectErrorBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/redirect-boundary.js:73:9) at RedirectBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/redirect-boundary.js:81:11) at NotFoundErrorBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/not-found-boundary.js:33:9) at NotFoundBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/not-found-boundary.js:40:11) at ReactDevOverlay (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/react-dev-overlay/internal/ReactDevOverlay.js:66:9) at HotReload (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/react-dev-overlay/hot-reloader-client.js:276:11) at Router (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/app-router.js:90:11) at ErrorBoundaryHandler (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/error-boundary.js:62:9) at ErrorBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/error-boundary.js:87:11) at AppRouter (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/app-router.js:374:13) at ServerRoot (webpack-internal:///(app-client)/./node_modules/next/dist/client/app-index.js:154:11) at RSCComponent at Root (webpack-internal:///(app-client)/./node_modules/next/dist/client/app-index.js:171:11)
Am I in trouble with this error? I'm just using modal.
`
<Modal visible={visible} onClose={handleClose}>
<Modal.Title>Create Workspace</Modal.Title>
<Text size={200} mb={4} tag="p">
You can't change your domain when you create workspace.
</Text>
<Box mt={2}>
<Input size="m" w={370} mb={4} state="normal">
<Input.Value placeholder="Workspace Name" />
</Input>
</Box>
<Box mt={2}>
<Input size="m" w={370} mb={4} state="normal">
<Input.Value placeholder="domain.com" />
</Input>
</Box>
<Button use="primary" theme="success" size="l" onClick={handleClose}>
Create
</Button>
<Button size="l" ml={2} onClick={handleClose}>
Cancel
</Button>
</Modal>`
Describe the bug
DragAndDrop sorting does not work in the list example. The declared behavior for selecting an element to rearrange via pressing the spacebar does not work. Voice over does not correctly read the current state and the ability to select items to rearrange.
Code example
https://codesandbox.io/s/charming-bash-f3qr9h
To Reproduce
Steps to reproduce the behavior:
Expected behavior
After hitting the spacebar, the item should be selected to reorder in the list
Additional context
Link to good workable example.
Describe the bug
The rendering of donut with zero value segment is interrupted by the following error:
Uncaught Error: Pie(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.
Code example
Codesandbox. This bug doesn't appear on React <18.
Expected behavior
In React 16 there is no error when displaying the zero pie.
Additional context
It looks like the error is being caused by this return expression, since React <18 doesn't support return undefined
:
intergalactic/semcore/d3-chart/src/Donut.jsx
Line 348 in a47a5b3
Versions:
@semcore/[email protected]
@semcore/[email protected]
[email protected]
Describe the bug
When interacting with data summary pop-up for charts, user is not able to place focus on 'Close' link
To Reproduce
Expected behavior
'Close' link can be focused (and it is expected to be first focusable element inside the pop-up)
Actual behavior
'Close' link is not available for focusing using keyboard (hence it cannot be pushed by the user). So currently user has to focus through the pop-up completely to close it (see att. screen cast).
Describe the bug
Looks like it was accidentally removed here, so the fixes weren't such safe I suppose ;D
Describe the bug
DateRangePicker fires the native validation on the form submit event with valid data.
Code example
Open codesandbox codesandbox.
To Reproduce
Steps to reproduce the behavior:
Expected behavior
The form is submitted
A lot of our components allows to pass color in color
or theme
prop. The prop accepts color as is or, as a name of color from hardcoded palette:
const colors = preval`
const path = require('path');
module.exports = require('@semcore/babel-plugin-react-semcore').getColorVars(path.resolve(__dirname, './style/var.css'));
`;
All colors resolving goes via resolveColor
function. We need to replace it with some kind of useResolveColor
hook that will resolve colors by css variables + hardcoded default values.
Types for UiKitPagination.TotalPages
don’t have a default value for ComponentTag
. And I can only write <UiKitPagination.TotalPages<'button'> onClick={click} />
. If you add a default value ComponentTag = 'button'
like in many other places I could simple write <UiKitPagination.TotalPages onClick={click} />
without tag specifying.
"@semcore/date-picker": "2.7.1".
Hello! I've encountered incorrect signature in onDisplayedPeriodChange method in MonthRangePicker. See details on screenshots. Long story short, onDisplayedPeriodChange may return argument of type Date or string (date: Date | string), when it must be Date type only (date: Date) according to method's signature.
sssssssssssssssssss<script>alert(123);</script>
<ScRipT>alert("XSS");</ScRipT> <script>alert(123)</script> <script>alert("hellox worldss");</script> <script>alert(�XSS�)</script> <script>alert(�XSS�);</script> <script>alert(�XSS�)</script>�><script>alert(�XSS�)</script>
<script>alert(/XSS�)</script> <script>alert(/XSS/)</script></script><script>alert(1)</script>
�; alert(1);
�)alert(1);//
<style>{font-family:'<iframe/onload=confirm(1)>'
<input/onmouseover="javaSCRIPT:confirm(1)"
<scRipt %00>alert(1) {Opera}
<img/src=%00
onerror=this.onerror=confirm(1)
<style>{font-family:'<iframe/onload=confirm(1)>'
<input/onmouseover="javaSCRIPT:confirm(1)"
<scRipt %00>alert(1) {Opera}
<img/src=%00
onerror=this.onerror=confirm(1)
�><script>alert(�XSS�)</script>
<script>alert(/XSS�)</script> <script>alert(/XSS/)</script></script><script>alert(1)</script>
�; alert(1);
�)alert(1);//
<style>{font-family:'<iframe/onload=confirm(1)>'
<input/onmouseover="javaSCRIPT:confirm(1)"
<scRipt %00>alert(1) {Opera}
<img/src=%00
onerror=this.onerror=confirm(1)
<style>{font-family:'<iframe/onload=confirm(1)>'
<input/onmouseover="javaSCRIPT:confirm(1)"
<scRipt %00>alert(1) {Opera}
<img/src=%00
onerror=this.onerror=confirm(1)
<style>{font-family:'<iframe/onload=confirm(1)>'
<input/onmouseover="javaSCRIPT:confirm(1)"
<scRipt %00>alert(1) {Opera}
<img/src=%00
onerror=this.onerror=confirm(1)
`<script>alert(123);</script>
<ScRipT>alert("XSS");</ScRipT> <script>alert(123)</script> <script>alert("hellox worldss");</script> <script>alert(�XSS�)</script> <script>alert(�XSS�);</script> <script>alert(�XSS�)</script>�><script>alert(�XSS�)</script>
<script>alert(/XSS�)</script> <script>alert(/XSS/)</script></script><script>alert(1)</script>
�; alert(1);
�)alert(1);//
<style>{font-family:'<iframe/onload=confirm(1)>'
<input/onmouseover="javaSCRIPT:confirm(1)"
<scRipt %00>alert(1) {Opera}
<img/src=%00
onerror=this.onerror=confirm(1)
<style>{font-family:'<iframe/onload=confirm(1)>'
<input/onmouseover="javaSCRIPT:confirm(1)"
<scRipt %00>alert(1) {Opera}
<img/src=%00
onerror=this.onerror=confirm(1)
<style>{font-family:'<iframe/onload=confirm(1)>'
<input/onmouseover="javaSCRIPT:confirm(1)"
<scRipt %00>alert(1) {Opera}
<img/src=%00
onerror=this.onerror=confirm(1)
�)alert(1);//
<ScRiPt>alert(1)</sCriPt> <iframe %00 src=" javascript:prompt(1) "%00><style>{font-family:'<iframe/onload=confirm(1)>'
<input/onmouseover="javaSCRIPT:confirm(1)"
<scRipt %00>alert(1) {Opera}
<img/src=%00
onerror=this.onerror=confirm(1)
<style>{font-family:'<iframe/onload=confirm(1)>'
<input/onmouseover="javaSCRIPT:confirm(1)"
<scRipt %00>alert(1) {Opera}
<img/src=%00
onerror=this.onerror=confirm(1)
highlighted
property is needed. Here is demo of attempt with empty array passing, but active highlighted inside of components is nog going to be reset. Demo is herevalue
.Describe the bug
Extra margin-top and margin-bottom for h1 in product-head component
According to this doc it should be only 8px for top and bottom, but on the example page there are additional margins.
Our styling works extremely unobvious. It's better explained here: https://github.com/semrush/intergalactic/blob/master/CONTRIBUTING.md#implicit-code-transformations
I propose to very change it and make it work the way same to way css modules works.
In my propose we will import css as following:
import { SLabel, SItem } from './filename.component.css'.
I also propose to add unplugin (universal plugin for all kinds of bundlers) that will transform compoennts.css file into .tsx
file with React components SLabel, SItem and so on, that also imports a virtual css file.
The virtual css file should contain hashed class names (like with css modules). If classed, described in .component.css
file has attribute selectors, the attribute selectors also are used to generate new css classed that are going to be applied to generated components when corresponding prop is provided. If css class uses css variables the generated component should also accept it via prop, while css variable name should be hashed for isolation.
The unplugin should support filtering variable names to allow us work with existing design tokens (named as --intergalactic-*
)
New year is coming, it's better to publish major release after it.
Describe the bug
The FormatText component does not allow "reversed", "start" and "type" attributes to be used with the <ol> tag.
Code example
Codesandbox.
Expected behavior
I expect the correct behavior of the <ol> tag when using its native attributes.
Describe the bug
Noticed, that the focus ring is not initially visible when a user opens modal.
To Reproduce
Expected behavior
Focus ring is visible
Actual behavior
Focus ring is not visible (see att. screencast)
It's caused by DataTable architecture. Probably we need to develop new component that is not recalculating columns width after first render.
During installation of the package @semcore/babel-plugin-react-semcore
I see next warnings:
WARN deprecated [email protected]: Please use @jridgewell/sourcemap-codec instead
WARN deprecated [email protected]: request has been deprecated, see https://github.com/request/request/issues/3142
WARN deprecated [email protected]: See https://github.com/lydell/source-map-resolve#deprecated
WARN deprecated [email protected]: Please see https://github.com/lydell/urix#deprecated
WARN deprecated [email protected]: Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v8.dev/blog/math-random for details.
WARN deprecated [email protected]: use String.prototype.padStart()
WARN deprecated [email protected]: Use your platform's native performance.now() and performance.timeOrigin.
WARN deprecated [email protected]: this library is no longer supported
WARN deprecated [email protected]: request-promise-native has been deprecated because it extends the now deprecated request package, see https://github.com/request/request/issues/3142
WARN deprecated [email protected]: flatten is deprecated in favor of utility frameworks such as lodash.
WARN deprecated [email protected]: https://github.com/lydell/resolve-url#deprecated
WARN deprecated [email protected]: See https://github.com/lydell/source-map-url#deprecated
WARN deprecated [email protected]: This SVGO version is no longer supported. Upgrade to v2.x.x.
WARN deprecated [email protected]: Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility
Can you fix these warnings?
### Why we need this feature
Product teams need the ability to compare two periods in a DatePicker. With the ability to set a set of presets for the first and second fields for selecting a period.
### What needs to be done
DatePicker needs the ability to compare two periods in a DatePicker. With the ability to set a set of presets for the first and second fields for selecting a period. More details you can find in Figma:
Work flow of the feature + requirements from designers
Design tokens for this feature you can find in this PR #670
Please note that the margin between the lines in the calendar has increased, just like in a calendar with months.
Is your feature request related to a problem? Please describe.
Hello, team!
Can you help me with the new icon for our new reporting 2.0?
Describe the solution you'd like
I thought about metaphor "plug" and already did some drafts.
Describe the bug
After the last major update, I've met an issue related to typings of @semcore/flex-box component. Tag property seems working wrong, forwarding property "tag" from Box interface to the Box component is marked as invalid.
Code example
Example
To Reproduce
All steps listed in an example.
Expected behavior
Box component will recognise "tag" property from it's interface as a valid value
During installation of the package @semcore/babel-plugin-styles
I see next warnings:
WARN deprecated [email protected]: Please use @jridgewell/sourcemap-codec instead
WARN deprecated [email protected]: Please use @jridgewell/sourcemap-codec instead
WARN deprecated [email protected]: Please use @jridgewell/sourcemap-codec instead
WARN deprecated [email protected]: Please use @jridgewell/sourcemap-codec instead
WARN deprecated [email protected]: flatten is deprecated in favor of utility frameworks such as lodash.
WARN deprecated [email protected]: This SVGO version is no longer supported. Upgrade to v2.x.x.
WARN deprecated [email protected]: Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility
Can you fix these warnings?
Describe the bug
During a11y testing for one of our products, I noticed that focusing InputTag component with the keyboard doesn't work as expected (see att. video).
To Reproduce
Steps to reproduce the behavior:
Expected behavior
Input focus behavior is straightforward (for instance, similar to this component - not sure if its behavior 100% correct from a11y point of view, but it works more convenient at least).
Actual behavior
When you attempt to focus on InputTag component, on the first Tab press, default focus ring for 'data-ui-name="InputTags"' component is shown. The custom focus ring appears only after the second Tab press, but 'data-ui-name="ScrollArea.Container"' node inside the InputTags component is focused. See att. video for better understanding.
Describe the bug
When modal elements are focused backward (Shift + Tab), focus get locked on 'Close' icon when reaches it.
To Reproduce
Expected behavior
Backward focus is cycled inside the modal, as it is for regular focus direction.
Actual behavior
Backward focus (Shift + Tab) is not cycled inside modal and locks on 'Close' icon when reaches it (see screen cast in attachment).
Describe the issue
I've noticed that wrong styles applied to Button in on of the examples on our website.
Code example
Find the buggy styles in this example on the website.
Expected behavior
Button in the example above should have Button styles (with use="secondary"
, theme="muted"
), not the BaseTrigger/ButtonTrigger styles. Check the design in the Export guide.
Currently we are publishing all components separately and also publishing @semcore/ui
component to reexport all of them.
It causes the following issues on our side:
@semcore/ui
while branded design system name is Intergalactic.It also causes issues on the user side:
So, we need to replace complex publishing with publishing a single package that will contain all output of components.
Describe the issue
Seems that DropdownMenu trigger doesn't get active
state, when popper is opened (like in the Select component).
Code example
I've found it on our website examples for DropdownMenu.
Expected behavior
As we can see from the design guide, DropdownMenu.Trigger should be in active
state after DropdownMenu was opened.
Additional context
We've discussed this at the daily meeting, and thought it was because BaseTrigger doesn't has a blue border in active state, but it has.
Describe the bug
In DateRangePicker.Trigger render props value has wrong type, it should be Date[]
but now it is just Date
and in the onChange handler too. And also the placeholder is gone.
Actual behavor
<DateRangePicker.Trigger>
{({ value: Date | undefined, onChange: (value: Date, event) => void }) => {
...
}}
</DateRangePicker.Trigger>
Expected behavior
<DateRangePicker.Trigger>
{({ value: Date[] | undefined, onChange: (value: Date[], event) => void, placeholder }) => {
...
}}
</DateRangePicker.Trigger>
I was building a table where I particularly want to decrease the width of Scroll Bar Slider of the DataTable , that goes by
inside my DataTable component. How can I modify it's width and height in particular ?HTML OL element has 'start' and 'reversed' attributes that impacts items' markers.
The native HTML code like this should render an item started with "3".
<ol start="3">
<li> this item starts with "3" </li>
</ol>
At the same time, wrapping lists with FormatText breaks this features
<FormatText>
<ol start="3">
<li> this item starts with "1" </li>
</ol>
</FormatText/>
Looking into source code it is clear why this happens:
Replace custom counter 'item' with built-in counter 'list-item'. This built-in counter is automatically initiated by OL tag and supports OL's attributes.
This code should render an item starting with "3"
<FormatText>
<ol start="3">
<li> this item starts with "3" </li>
</ol>
</FormatText/>
InputSearch component contains clear button that are not exposed from component api while this exposure might be very helpful.
We need to provide api like the following:
<InputSearch>
<InputSearch.SearchIcon />
<InputSearch.Value />
<InputSearch.Clear />
</InputSearch>
Warning recieved from npm run dev with a scroll-area
Warning: ScrollArea.Bar: Support for defaultProps will be removed from function components in a future major release. Use JavaScript default parameters instead.
at Component (webpack-internal:///(ssr)/./node_modules/@semcore/core/lib/cjs/index.js:346:22)
at FunctionMemoComponent (webpack-internal:///(ssr)/./node_modules/@semcore/core/lib/cjs/index.js:308:37)
at WrapperForwardRef (webpack-internal:///(ssr)/./node_modules/@semcore/core/lib/cjs/index.js:168:34)
at div
at Box (webpack-internal:///(ssr)/./node_modules/@semcore/flex-box/lib/cjs/Box/index.js:13:41)
at Component (webpack-internal:///(ssr)/./node_modules/@semcore/core/lib/cjs/index.js:232:39)
at WrapperForwardRef (webpack-internal:///(ssr)/./node_modules/@semcore/core/lib/cjs/index.js:168:34)
at ViewChats (webpack-internal:///(ssr)/./app/viewchats/page.tsx:76:76)
at Lazy
at InnerLayoutRouter (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/layout-router.js:239:11)
at RedirectErrorBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/redirect-boundary.js:72:9)
at RedirectBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/redirect-boundary.js:80:11)
at NotFoundBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/not-found-boundary.js:62:11)
at LoadingBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/layout-router.js:335:11)
at ErrorBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/error-boundary.js:109:11)
at InnerScrollAndFocusHandler (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/layout-router.js:151:9)
at ScrollAndFocusHandler (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/layout-router.js:226:11)
at RenderFromTemplateContext (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/render-from-template-context.js:15:44)
at Lazy
at OuterLayoutRouter (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/layout-router.js:344:11)
at Lazy
at InnerLayoutRouter (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/layout-router.js:239:11)
at RedirectErrorBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/redirect-boundary.js:72:9)
at RedirectBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/redirect-boundary.js:80:11)
at NotFoundErrorBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/not-found-boundary.js:54:9)
at NotFoundBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/not-found-boundary.js:62:11)
at LoadingBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/layout-router.js:335:11)
at ErrorBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/error-boundary.js:109:11)
at InnerScrollAndFocusHandler (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/layout-router.js:151:9)
at ScrollAndFocusHandler (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/layout-router.js:226:11)
at RenderFromTemplateContext (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/render-from-template-context.js:15:44)
at Lazy
at OuterLayoutRouter (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/layout-router.js:344:11)
at Lazy
at body
at html
at RedirectErrorBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/redirect-boundary.js:72:9)
at RedirectBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/redirect-boundary.js:80:11)
at ReactDevOverlay (C:\vercel\chatmd-client\node_modules\next\dist\client\components\react-dev-overlay\internal\ReactDevOverlay.js:66:9)
at HotReload (C:\vercel\chatmd-client\node_modules\next\dist\client\components\react-dev-overlay\hot-reloader-client.js:343:11)
at Router (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/app-router.js:144:11)
at ErrorBoundaryHandler (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/error-boundary.js:82:9)
at ErrorBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/error-boundary.js:109:11)
at AppRouter (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/app-router.js:403:13)
at Lazy
at Lazy
at ServerComponentWrapper (C:\vercel\chatmd-client\node_modules\next\dist\server\app-render\create-server-components-renderer.js:78:31)
at ServerComponentWrapper (C:\vercel\chatmd-client\node_modules\next\dist\server\app-render\create-server-components-renderer.js:78:31)
at ServerInsertedHTMLProvider (C:\vercel\chatmd-client\node_modules\next\dist\server\app-render\server-inserted-html.js:26:39)
Is your feature request related to a problem? Please describe.
We need to add a pattern to the inputs in the invalid state, which I will list below. More details in the ClickUp (links to the results of user testing, etc.)
Describe the solution you'd like
You need to add patterns to the following inputs/components (links lead to the design in the branch of the core Figma library):
The most critical issues of our codebase are:
propsForElement
mechanism.To resolve it, probably we need to almost fully rewrite our components. It's actually not so hard because we will preserve all the tests and styles.
Also, it might be a very good chance to rewrite our components on some framework agnostic technology, such as https://github.com/builderio/mitosis or another that will generate our components runtime code for multiple frameworks such React, Vue, Qwik and Svelte.
I've upgraded to @semcore/[email protected]
(@semcore/[email protected]
) and I'm trying to draw a donut of two segments:
import { colors, Donut, Plot } from '@semcore/ui/d3-chart';
const chartData = {
value,
other: 100 - value,
};
<Plot width={24} height={24} data={chartData}>
<Donut outerRadius={12} innerRadius={7} duration={0}>
<Donut.Pie dataKey='value' />
<Donut.Pie dataKey='other' color={colors['gray-200']} />
</Donut>
</Plot>
However, when the other
value is zero, the rendering of graph is interrupted by the following error:
Uncaught Error: Pie(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.
https://codesandbox.io/s/elastic-breeze-k4xg3d
In this example, the error is not reproduced 🤷🏻, perhaps it's somehow related to the webpack's specific behaviour.
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.