feat(CopySnippet): improve component

.changeset/afraid-plants-smash.md

@@ -0,0 +1,5 @@
+---
+'@cube-dev/ui-kit': minor
+---
+
+Rename Submit to SubmitButton.

.changeset/curly-boxes-shop.md

@@ -0,0 +1,5 @@
+---
+'@cube-dev/ui-kit': patch
+---
+
+Recalculate the sidebar position on container resize.

.changeset/dirty-rats-exercise.md

@@ -0,0 +1,5 @@
+---
+'@cube-dev/ui-kit': minor
+---
+
+Form's resetFields() method now resets errors and touched status as well.

.changeset/funny-oranges-hope.md

@@ -0,0 +1,5 @@
+---
+'@cube-dev/ui-kit': minor
+---
+
+Add `resetFieldsValidation()` and `setFieldError()` methods to form to replace deprecated `setFields()`.

.changeset/khaki-houses-perform.md

@@ -0,0 +1,5 @@
+---
+'@cube-dev/ui-kit': minor
+---
+
+Add ResetButton component.

.changeset/lucky-beans-crash.md

@@ -0,0 +1,5 @@
+---
+'@cube-dev/ui-kit': patch
+---
+
+Fix pressed state in primary type Button.

.changeset/lucky-shoes-bow.md

@@ -0,0 +1,5 @@
+---
+'@cube-dev/ui-kit': patch
+---
+
+Fix bug that prevents `onSizeChange()` callback from being fired when ResizablePanel resized beyond its constraints.

.changeset/new-bees-smoke.md

@@ -0,0 +1,5 @@
+---
+'@cube-dev/ui-kit': minor
+---
+
+Simplify API of CopySnippet and improve its design.

.changeset/swift-parents-pay.md

@@ -0,0 +1,5 @@
+---
+'@cube-dev/ui-kit': minor
+---
+
+Allow to pass base styles to Alert as props.

.changeset/thick-snails-suffer.md

@@ -0,0 +1,5 @@
+---
+'@cube-dev/ui-kit': minor
+---
+
+Add `isInvalid` and `isValid` props to form instance. First one checks if the form has at least one field that is verified and invalid. The second one checks if ALL fields are verified and valid. Be careful: `isValid` and `!isInvalid` are not the same.

.changeset/wet-points-sell.md

@@ -0,0 +1,5 @@
+---
+'@cube-dev/ui-kit': patch
+---
+
+Fix Radio.Button styles.

.changeset/wet-weeks-mate.md

@@ -0,0 +1,5 @@
+---
+'@cube-dev/ui-kit': minor
+---
+
+More flexible and easier control over disable state of Reset and Submit buttons.

package.json

@@ -82,6 +82,7 @@
     "react-transition-group": "^4.4.5",
     "react-types": "^0.1.0",
     "tiny-invariant": "^1.3.3",
+    "usehooks-ts": "^3.1.0",
     "valid-url": "^1.0.9"
   },
   "devDependencies": {

src/components/actions/Button/Button.stories.tsx

@@ -15,21 +15,22 @@ export default {
       defaultValue: undefined,
       control: { type: 'radio', options: [undefined, 'small', 'large'] },
     },
-    type: {
-      defaultValue: undefined,
-      control: {
-        type: 'radio',
-        options: [
-          undefined,
-          'secondary',
-          'primary',
-          'outline',
-          'clear',
-          'neutral',
-          'link',
-        ],
-      },
-    },
+    // @TODO: Migrate to new API
+    // type: {
+    //   defaultValue: undefined,
+    //   control: {
+    //     type: 'radio',
+    //     options: [
+    //       undefined,
+    //       'secondary',
+    //       'primary',
+    //       'outline',
+    //       'clear',
+    //       'neutral',
+    //       'link',
+    //     ],
+    //   },
+    // },
     theme: {
       defaultValue: undefined,
       control: { type: 'radio', options: [undefined, 'danger', 'special'] },
@@ -133,6 +134,17 @@ const TemplateStates: StoryFn<CubeButtonProps> = ({
     >
       {label || 'Pressed'}
     </Button>
+    <Button
+      {...props}
+      mods={{
+        hovered: true,
+        pressed: true,
+        focused: false,
+        disabled: false,
+      }}
+    >
+      {label || 'Pressed & Hovered'}
+    </Button>
     <Button
       {...props}
       mods={{
@@ -197,6 +209,17 @@ const DarkTemplateStates: StoryFn<CubeButtonProps> = ({
     >
       {label || 'Pressed'}
     </Button>
+    <Button
+      {...props}
+      mods={{
+        hovered: true,
+        pressed: true,
+        focused: false,
+        disabled: false,
+      }}
+    >
+      {label || 'Pressed & Hovered'}
+    </Button>
     <Button
       {...props}
       mods={{

src/components/actions/Button/Button.tsx

@@ -118,8 +118,8 @@ const ButtonElement = tasty({
         '': '#clear',
 
         '[data-type="primary"]': '#purple',
-        '[data-type="primary"] & pressed': '#purple',
         '[data-type="primary"] & hovered': '#purple-text',
+        '[data-type="primary"] & pressed': '#purple',
 
         '[data-type="secondary"]': '#purple.10',
         '[data-type="secondary"] & hovered': '#purple.16',

src/components/actions/Button/index.ts

@@ -1,2 +1 @@
 export * from './Button';
-export * from './Submit';

src/components/content/Alert/Alert.tsx

@@ -13,7 +13,7 @@ const AlertElement = tasty({
   styles: {
     display: 'block',
     flow: 'column',
-    radius: '1r',
+    radius: '@large-radius',
     padding: '1.5x',
     preset: 't3',
     color: {

src/components/content/Alert/use-alert.ts

@@ -1,8 +1,8 @@
 import {
   CONTAINER_STYLES,
+  TEXT_STYLES,
   extractStyles,
   filterBaseProps,
-  TEXT_STYLES,
 } from '../../../tasty';
 import { useDeprecationWarning } from '../../../_internal';
 

src/components/content/CopySnippet/CopySnippet.stories.tsx

@@ -72,6 +72,60 @@ JavascriptSyntax.args = {
   sql: \`SELECT * FROM public.line_items\`,
 
 
+  joins: {
+    Products: {
+      sql: \`\${CUBE}.product_id = \${Products}.id\`,
+      relationship: \`belongsTo\`
+    },
+
+    Orders: {
+      sql: \`\${CUBE}.order_id = \${Orders}.id\`,
+      relationship: \`belongsTo\`
+    }
+  },
+
+  measures: {
+    count: {
+      type: \`count\`,
+      drillMembers: [id, createdAt]
+    },
+
+    price: {
+      sql: \`price\`,
+      type: \`sum\`
+    },
+
+    quantity: {
+      sql: \`quantity\`,
+      type: \`sum\`
+    }
+  },
+
+  dimensions: {
+    id: {
+      sql: \`id\`,
+      type: \`number\`,
+      primaryKey: true
+    },
+
+    createdAt: {
+      sql: \`created_at\`,
+      type: \`time\`
+    }
+  }
+});`,
+};
+
+export const Complex = Template.bind({});
+Complex.args = {
+  language: 'javascript',
+  height: 'max 30x',
+  hideText: 'SELECT * FROM public.line_items',
+  actions: <CopySnippet.Button icon={<SettingOutlined />} />,
+  code: `cube('LineItems', {
+  sql: \`SELECT * FROM public.line_items\`,
+
+
   joins: {
     Products: {
       sql: \`\${CUBE}.product_id = \${Products}.id\`,