npm - @companix/uikit - Versions diffs - 0.0.1 - Mend

@companix/uikit 0.0.1

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.

Files changed (124) hide show

package/.eslintrc +54 -0
package/declaration.d.ts +4 -0
package/index.html +12 -0
package/package.json +66 -0
package/playground/App.tsx +166 -0
package/playground/Example.tsx +14 -0
package/playground/Test.tsx +44 -0
package/playground/animation-test-1/index.scss +20 -0
package/playground/animation-test-1/index.tsx +17 -0
package/playground/animation-test-2/index.scss +62 -0
package/playground/animation-test-2/index.tsx +32 -0
package/playground/bootstrap.tsx +19 -0
package/playground/buttons/index.tsx +132 -0
package/playground/checkbox/index.tsx +64 -0
package/playground/date-input/index.tsx +45 -0
package/playground/date-picker/index.tsx +41 -0
package/playground/dialog/index.tsx +92 -0
package/playground/dialog-alert/index.tsx +47 -0
package/playground/drawer/index.tsx +55 -0
package/playground/index.css +33 -0
package/playground/index.scss +270 -0
package/playground/input/index.tsx +112 -0
package/playground/number-inputs/index.tsx +50 -0
package/playground/popovers/index.tsx +70 -0
package/playground/radio-group/index.tsx +69 -0
package/playground/select/index.tsx +72 -0
package/playground/select-tags/index.tsx +36 -0
package/playground/styles.scss +2 -0
package/playground/switch/index.tsx +44 -0
package/playground/tabs/index.tsx +16 -0
package/playground/test.scss +0 -0
package/playground/text-area/index.tsx +17 -0
package/playground/text-input/index.tsx +12 -0
package/playground/toaster/index.tsx +156 -0
package/playground/tooltip/index.tsx +26 -0
package/src/Button/Button.scss +128 -0
package/src/Button/index.tsx +72 -0
package/src/ButtonGroup/ButtonGroup.scss +18 -0
package/src/ButtonGroup/index.tsx +20 -0
package/src/Checkbox/Checkbox.scss +115 -0
package/src/Checkbox/index.tsx +46 -0
package/src/Countdown/index.tsx +54 -0
package/src/DateInput/DateInput.scss +11 -0
package/src/DateInput/index.tsx +96 -0
package/src/DatePicker/Calendar.scss +125 -0
package/src/DatePicker/Calendar.tsx +157 -0
package/src/DatePicker/CalendarHeader.tsx +139 -0
package/src/DatePicker/DatePicker.scss +0 -0
package/src/DatePicker/index.tsx +177 -0
package/src/Dialog/Dialog.scss +25 -0
package/src/Dialog/Popup.scss +55 -0
package/src/Dialog/index.tsx +31 -0
package/src/DialogAlert/Alert.scss +52 -0
package/src/DialogAlert/Alert.tsx +78 -0
package/src/DialogAlert/Viewport.tsx +52 -0
package/src/DialogAlert/index.tsx +37 -0
package/src/Drawer/Drawer.scss +112 -0
package/src/Drawer/index.tsx +46 -0
package/src/File/index.tsx +60 -0
package/src/Form/Form.scss +70 -0
package/src/Form/Input.scss +24 -0
package/src/Form/index.tsx +131 -0
package/src/Icon/icon.scss +18 -0
package/src/Icon/index.tsx +43 -0
package/src/LoadButton/index.tsx +17 -0
package/src/NumberInput/index.tsx +74 -0
package/src/OptionItem/Option.scss +89 -0
package/src/OptionItem/OptionItem.tsx +49 -0
package/src/OptionItem/OptionsList.tsx +26 -0
package/src/Popover/Popover.scss +80 -0
package/src/Popover/index.tsx +117 -0
package/src/Radio/Radio.scss +148 -0
package/src/Radio/index.tsx +68 -0
package/src/Scrollable/ImitateScroll.tsx +141 -0
package/src/Scrollable/Scrollable.scss +50 -0
package/src/Scrollable/index.tsx +141 -0
package/src/Select/Select.scss +80 -0
package/src/Select/SelectInput.tsx +131 -0
package/src/Select/index.tsx +134 -0
package/src/SelectTags/SelectTags.scss +66 -0
package/src/SelectTags/index.tsx +192 -0
package/src/Spinner/Spinner.scss +14 -0
package/src/Spinner/index.tsx +19 -0
package/src/Stepper/StepperInput.scss +35 -0
package/src/Stepper/index.tsx +76 -0
package/src/Switch/Switch.scss +102 -0
package/src/Switch/index.tsx +49 -0
package/src/Tabs/Tabs.scss +58 -0
package/src/Tabs/index.tsx +89 -0
package/src/TextArea/TextArea.scss +34 -0
package/src/TextArea/index.tsx +51 -0
package/src/Toaster/RemoveListener.tsx +11 -0
package/src/Toaster/Toast.tsx +69 -0
package/src/Toaster/Toaster.scss +151 -0
package/src/Toaster/Viewport.tsx +117 -0
package/src/Toaster/index.tsx +52 -0
package/src/Tooltip/Tooltip.scss +28 -0
package/src/Tooltip/index.tsx +33 -0
package/src/__hooks/use-frooze-closing.ts +51 -0
package/src/__hooks/use-loading.ts +34 -0
package/src/__hooks/use-local-storage.ts +19 -0
package/src/__hooks/use-popover-position.ts +24 -0
package/src/__hooks/use-previos.ts +25 -0
package/src/__hooks/use-resize.ts +41 -0
package/src/__hooks/use-scrollbox.ts +45 -0
package/src/__hooks/use-stepper-input.ts +82 -0
package/src/__hooks/use-update.ts +19 -0
package/src/__hooks/useCalendar.ts +104 -0
package/src/__hooks/useCalendarOptions-copy.ts +87 -0
package/src/__hooks/useCalendarOptions.ts +68 -0
package/src/__libs/calendar.ts +175 -0
package/src/__utils/utils.ts +137 -0
package/src/css.scss +120 -0
package/src/index.scss +22 -0
package/src/index.ts +36 -0
package/src/mixins.scss +99 -0
package/src/theme.scss +103 -0
package/src/types.ts +14 -0
package/tailwind.config.js +91 -0
package/themes/classic/animations.scss +179 -0
package/themes/classic/classic.scss +493 -0
package/tsconfig.json +27 -0
package/vite.build.ts +35 -0
package/vite.config.ts +33 -0

package/.eslintrc ADDED Viewed

@@ -0,0 +1,54 @@
+{
+  "env": {
+    "node": true,
+    "browser": true,
+    "es6": true
+  },
+  "extends": [
+    "plugin:react/recommended",
+    "plugin:react-hooks/recommended",
+    "react-app"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "plugins": ["react"],
+  "parserOptions": {
+    "sourceType": "module",
+    "requireConfigFile": false,
+    "ecmaFeatures": {
+      "jsx": true
+    }
+  },
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  },
+  "rules": {
+    "no-var": "error",
+    "typescript-eslint/typescript-estree": "off",
+    "react-hooks/exhaustive-deps": "off",
+    "react/react-in-jsx-scope": "off",
+    "react/no-children-prop": "off",
+    "react/display-name": "off",
+    "jsx-a11y/aria-role": "off",
+    "react/prop-types": "off",
+    "react/jsx-no-target-blank": "off",
+    "import/no-anonymous-default-export": "off",
+    "import/no-extraneous-dependencies": [
+      "error",
+      {
+        "devDependencies": true,
+        "peerDependencies": false
+      }
+    ],
+    "no-throw-literal": "off",
+    "react/no-multi-comp": [2, { "ignoreStateless": true }],
+    "no-restricted-syntax": [
+      "error",
+      {
+        "selector": "CallExpression[arguments.length=1][callee.property.name='reduce']",
+        "message": "Provide initialValue to .reduce()."
+      }
+    ]
+  }
+}

package/declaration.d.ts ADDED Viewed

@@ -0,0 +1,4 @@
+declare module '*.css'
+declare module '*.module.css'
+declare module '*.ttf'
+declare module '*.svg'

package/index.html ADDED Viewed

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Playground</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="./playground/bootstrap.tsx"></script>
+  </body>
+</html>

package/package.json ADDED Viewed

@@ -0,0 +1,66 @@
+{
+  "name": "@companix/uikit",
+  "version": "0.0.01",
+  "module": "./dist/bundle.es.js",
+  "types": "./src/index.ts",
+  "type": "module",
+  "author": "Pavel Victorov",
+  "scripts": {
+    "echo": "echo \"uikit\"",
+    "dev": "vite --config vite.config.ts",
+    "build": "rm -rf dist && vite build --config vite.build.ts"
+  },
+  "sideEffects": [
+    "./dist/uikit.css"
+  ],
+  "license": "ISC",
+  "peerDependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "dependencies": {
+    "@companix/utils-browser": "file:../utils-browser",
+    "@companix/utils-js": "file:../utils-js",
+    "@fortawesome/free-solid-svg-icons": "^7.1.0",
+    "@fortawesome/react-fontawesome": "^3.1.1",
+    "@radix-ui/react-alert-dialog": "^1.1.15",
+    "@radix-ui/react-checkbox": "^1.3.3",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-popover": "^1.1.15",
+    "@radix-ui/react-radio-group": "^1.3.8",
+    "@radix-ui/react-switch": "^1.2.6",
+    "@radix-ui/react-tabs": "^1.1.13",
+    "@radix-ui/react-toast": "^1.2.15",
+    "@radix-ui/react-visually-hidden": "^1.2.4",
+    "classnames": "^2.5.1",
+    "font-awesome": "^4.7.0",
+    "react-input-mask": "^2.0.4",
+    "react-merge-refs": "^3.0.2"
+  },
+  "devDependencies": {
+    "sass": "^1.96.0",
+    "sass-embedded": "^1.96.0",
+    "rollup-plugin-scss": "^4.0.1",
+    "@blueprintjs/core": "^6.2.1",
+    "@radix-ui/react-icons": "^1.3.2",
+    "@react-aria/interactions": "^3.25.3",
+    "@rollup/plugin-eslint": "^9.0.5",
+    "@rollup/plugin-typescript": "^11.1.6",
+    "@tailwindcss/vite": "^4.1.12",
+    "@types/react": "^18.3.1",
+    "@types/react-dom": "^18.3.1",
+    "@types/react-input-mask": "^3.0.6",
+    "@typescript-eslint/parser": "^5.62.0",
+    "@vitejs/plugin-react": "^4.6.0",
+    "eslint-config-react-app": "^7.0.1",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-react": "^7.34.3",
+    "eslint-plugin-react-hooks": "^4.6.2",
+    "eslint-webpack-plugin": "^4.2.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "rollup-plugin-auto-external": "^2.0.0",
+    "vite": "^7.0.0",
+    "vite-plugin-checker": "^0.9.3"
+  }
+}

package/playground/App.tsx ADDED Viewed

@@ -0,0 +1,166 @@
+// import { Test1Animation } from './animation-test-1'
+// import { Test2Animation, Test2CompletedAnimation } from './animation-test-2'
+// import { SelectExample } from './select'
+// import { PopupExample } from './popup'
+// import { TextInput } from './text-input'
+// import { NumberInputs } from './number-inputs'
+// import { Button } from '../Button'
+// import { useState } from 'react'
+// import { Drawer } from '../Drawer'
+// import { Popup } from '../Popup'
+// import { TestApp } from './Test'
+import { useLayoutEffect } from 'react'
+import { ButtonsExample, ButtonsGroupExample } from './buttons'
+import { PopoversExample } from './popovers'
+import { Example } from './Example'
+import { SelectExample } from './select'
+import { TooltipExample } from './tooltip'
+import { CheckboxExample } from './checkbox'
+import { RadioGroupExample } from './radio-group'
+import { TabsExample } from './tabs'
+import { ToasterExample } from './toaster'
+import { DialogExample } from './dialog'
+import { InputsExample } from './input'
+import { TextAreaExample } from './text-area'
+import { SelectTagsExample } from './select-tags'
+import { DateInputExample } from './date-input'
+import { DatePickerExample } from './date-picker'
+import { SwitchExample } from './switch'
+import { DialogAlertExample } from './dialog-alert'
+import { DrawerExample } from './drawer'
+// import { Tabs } from '../Tabs'
+export const App = () => {
+  useLayoutEffect(() => {
+    document.body.classList.add('theme-light')
+  }, [])
+  // return <TestApp />
+  return (
+    <div className="examples-list">
+      <div />
+      <div />
+      {/* <div style={{ height: '200px', width: '100%', position: 'relative' }}>
+        <div className="row-group" style={{ position: 'absolute' }}>
+          <Test1Animation />
+          <Test2Animation />
+          <Test2CompletedAnimation />
+        </div>
+      </div>
+      <TabsApp />
+      <ButtonsExample />
+      <SelectExample /> */}
+      <Example name="Popovers">
+        <PopoversExample />
+      </Example>
+      <Example name="Tooltip">
+        <TooltipExample />
+      </Example>
+      <Example name="Dialog">
+        <DialogExample />
+      </Example>
+      <Example name="DialogAlert">
+        <DialogAlertExample />
+      </Example>
+      <Example name="Drawer">
+        <DrawerExample />
+      </Example>
+      <Example name="Input">
+        <InputsExample />
+      </Example>
+      <Example name="TextArea">
+        <TextAreaExample />
+      </Example>
+      <Example name="Select">
+        <SelectExample />
+      </Example>
+      <Example name="SelectTags">
+        <SelectTagsExample />
+      </Example>
+      <Example name="DateInput">
+        <DateInputExample />
+      </Example>
+      <Example name="DatePicker">
+        <DatePickerExample />
+      </Example>
+      <Example name="Checkbox">
+        <CheckboxExample />
+      </Example>
+      <Example name="RadioGroup">
+        <RadioGroupExample />
+      </Example>
+      <Example name="Switch">
+        <SwitchExample />
+      </Example>
+      <Example name="Tabs">
+        <TabsExample />
+      </Example>
+      <Example name="Buttons">
+        <ButtonsExample />
+      </Example>
+      <Example name="ButtonGroup">
+        <ButtonsGroupExample />
+      </Example>
+      <Example name="Toaster">
+        <ToasterExample />
+      </Example>
+      {/* <div className="flex flex-col gap-10">
+        <DrawerApp />
+        <PopupApp />
+      </div>
+      <PopupExample />
+      <TextInput />
+      <NumberInputs /> */}
+      <div />
+      <div />
+    </div>
+  )
+}
+// const TabsApp = () => {
+//   const [tab, setTab] = useState('tab-1')
+//   return (
+//     <div>
+//       <Tabs onChange={setTab} value={tab}>
+//         <Tabs.Tab value="tab-1">Tab1</Tabs.Tab>
+//         <Tabs.Tab value="tab-2">Tab2</Tabs.Tab>
+//       </Tabs>
+//       Active: {tab}
+//     </div>
+//   )
+// }
+// const DrawerApp = () => {
+//   const [isOpen, setOpen] = useState(false)
+//   return (
+//     <>
+//       <Drawer onClose={() => setOpen(false)} isOpen={isOpen} size="60%">
+//         <Content close={() => setOpen(false)} />
+//       </Drawer>
+//       <Button onClick={() => setOpen((value) => !value)}>{isOpen ? 'Close' : 'Open'} drawer</Button>
+//     </>
+//   )
+// }
+// const Content = ({ close }: { close: () => void }) => {
+//   console.log('RENDER')
+//   return <div onClick={close}>App: click to close</div>
+// }
+// const PopupApp = () => {
+//   const [isOpen, setOpen] = useState(false)
+//   return (
+//     <>
+//       <Popup onClose={() => setOpen(false)} isOpen={isOpen} className="popup-1">
+//         <div style={{ padding: '10px' }}>
+//           <Button onClick={() => setOpen(false)}>App: click to close</Button>
+//         </div>
+//       </Popup>
+//       <Button onClick={() => setOpen((value) => !value)}>{isOpen ? 'Close' : 'Open'} popup</Button>
+//     </>
+//   )
+// }

package/playground/Example.tsx ADDED Viewed

@@ -0,0 +1,14 @@
+interface ExampleProps {
+  children: React.ReactNode
+  pane?: React.ReactNode
+  name: string
+}
+export const Example = ({ name, children, pane }: ExampleProps) => {
+  return (
+    <div className="sample">
+      <div className="sample-name">{name}</div>
+      <div>{children}</div>
+    </div>
+  )
+}

package/playground/Test.tsx ADDED Viewed

@@ -0,0 +1,44 @@
+import './test.scss'
+// import { Popover } from '../Popover'
+// import { Calendar } from '../DatePicker/Calendar'
+import { useLayoutEffect } from 'react'
+import { DatePickerControl } from './date-picker'
+const PopoverDemo = () => {
+  return (
+    <div style={{ width: '280px' }}>
+      <DatePickerControl size="md" />
+    </div>
+  )
+  // const [value, setValue] = useState(new Date())
+  // return (
+  //   <Popover
+  //     open
+  //     fitMaxHeight={false}
+  //     content={() => <Calendar value={value} onChange={setValue} disableFuture />}
+  //   >
+  //     <div></div>
+  //   </Popover>
+  // )
+}
+// const Check = () => {
+//   console.log('render')
+//   return <div>Check</div>
+// }
+export const TestApp = () => {
+  useLayoutEffect(() => {
+    document.body.classList.add('theme-light')
+  }, [])
+  return (
+    <div className="examples-list" style={{ alignItems: 'center' }}>
+      <div />
+      <PopoverDemo />
+      <div />
+    </div>
+  )
+}

package/playground/animation-test-1/index.scss ADDED Viewed

@@ -0,0 +1,20 @@
+.test-1-animation {
+  transition-duration: 4s;
+  transition-property: all;
+  transition-timing-function: linear;
+  // presets before transition in (initial state)
+  &[data-closed][data-enter] {
+    opacity: 0;
+  }
+  // transition in
+  &[data-enter] {
+    opacity: 1;
+  }
+  // transition out
+  &[data-leave] {
+    opacity: 0;
+  }
+}

package/playground/animation-test-1/index.tsx ADDED Viewed

@@ -0,0 +1,17 @@
+import './index.scss'
+// import { useState } from 'react'
+export const Test1Animation = () => {
+  // const [open, setOpen] = useState(false)
+  return (
+    <div style={{ padding: '40px', display: 'flex', gap: '20px' }}>
+      <div style={{ padding: '10px', width: '200px' }}>
+        {/* <button onClick={() => setOpen((open) => !open)}>Animation 1</button> */}
+        {/* <Transition show={open}> */}
+        <div className="test-1-animation box-styles">Target element</div>
+        {/* </Transition> */}
+      </div>
+    </div>
+  )
+}

package/playground/animation-test-2/index.scss ADDED Viewed

@@ -0,0 +1,62 @@
+// Описание test-2-animation: анимация запускается через transform, а исчезает через opacity
+// Данный пример необходим для понимания прерывания enter анимации
+// Анимация появления (data-enter) намеренно сделана долгой, чтобы запустить завершение анимации ещё до окончания анимации enter.
+// В случае если анимация enter была бы окончена, вызов завершения анимации запускал бы этап [data-leave], однако при вызове завершения
+// в моменте выполнения enter, [data-leave] не будет вызван, а вместо этого будет добавлен атрибут [data-closed], который запустит анимацию вспять, до initial состояния, которое описано в [data-closed][data-enter]
+.test-2-animation {
+  // initial - начальное состояние (перед появлением)
+  &[data-closed][data-enter] {
+    transform: scale(0.3);
+  }
+  // animate from initial - анимация до конечного состояния, от начального
+  &[data-enter] {
+    transform: scale(1);
+    transition-delay: 0;
+    transition-duration: 2s;
+    transition-property: transform;
+    transition-timing-function: linear;
+  }
+  // exit - анимация завершения
+  &[data-leave] {
+    transition-delay: 0;
+    transition-duration: 1s;
+    transition-property: opacity;
+    transition-timing-function: linear;
+    opacity: 0;
+  }
+}
+// В данном примере, анимировано прерывание enter
+.test-2-completed-animation {
+  // начальное состояние
+  // также будет запускаться при прерывании enter-анимации
+  &[data-closed][data-enter] {
+    // описываем начальное состояние (перед появлением). Обращаю внимание что "opacity: 0" не будет учтен при data-enter анимации
+    transform: scale(0.3);
+    opacity: 0;
+    // стили использующиеся при прерывании data-enter анимации (переход в начальное состояние)
+    transition-duration: 200ms;
+    transition-property: transform, opacity; // учитываем opacity
+  }
+  // animate - анимация появления запускаемая от начального до конечного состояния
+  &[data-enter] {
+    transform: scale(1);
+    transition-duration: 2s;
+    transition-property: transform;
+    transition-timing-function: linear;
+  }
+  // exit - анимация завершения
+  &[data-leave] {
+    transition-duration: 1s;
+    transition-property: opacity;
+    transition-timing-function: linear;
+    opacity: 0;
+  }
+}

package/playground/animation-test-2/index.tsx ADDED Viewed

@@ -0,0 +1,32 @@
+import './index.scss'
+// import { useState } from 'react'
+export const Test2Animation = () => {
+  // const [open, setOpen] = useState(false)
+  return (
+    <div style={{ padding: '40px', display: 'flex', gap: '20px' }}>
+      <div style={{ padding: '10px', width: '200px' }}>
+        {/* <button onClick={() => setOpen((open) => !open)}>Animation 2(*1)</button> */}
+        {/* <Transition show={open}> */}
+        <div className="test-2-animation box-styles">Target element</div>
+        {/* </Transition> */}
+      </div>
+    </div>
+  )
+}
+export const Test2CompletedAnimation = () => {
+  // const [open, setOpen] = useState(false)
+  return (
+    <div style={{ padding: '40px', display: 'flex', gap: '20px' }}>
+      <div style={{ padding: '10px', width: '200px' }}>
+        {/* <button onClick={() => setOpen((open) => !open)}>Animation 2(*2)</button> */}
+        {/* <Transition show={open}> */}
+        <div className="test-2-completed-animation box-styles">Target element</div>
+        {/* </Transition> */}
+      </div>
+    </div>
+  )
+}

package/playground/bootstrap.tsx ADDED Viewed

@@ -0,0 +1,19 @@
+import './styles.scss'
+import './index.scss'
+import './index.css'
+import '../src/theme.scss'
+import { createRoot } from 'react-dom/client'
+import { App } from './App'
+// import { TestApp } from './Test'
+createRoot(document.getElementById('root')!).render(<App />)
+const error = console.error
+console.error = (...args: any) => {
+  if (/defaultProps/.test(args[0])) return
+  if (/findDOMNode/.test(args[0])) return
+  error(...args)
+}

package/playground/buttons/index.tsx ADDED Viewed

@@ -0,0 +1,132 @@
+import { Appearance, Button, Mode, Size } from '@/Button'
+import {
+  faPlay,
+  faPause,
+  faBookmark,
+  faArrowRight,
+  faChevronRight,
+  faFolderBlank,
+  faEye,
+  faCaretDown,
+  faPen,
+  faFile
+} from '@fortawesome/free-solid-svg-icons'
+import { Icon } from '@/Icon'
+import { ButtonGroup } from '@/ButtonGroup'
+const appearances: Appearance[] = ['primary', 'neutral', 'positive', 'negative']
+const modes: Mode[] = ['default', 'outline', 'minimal']
+const sizes: Size[] = ['sm', 'md', 'lg']
+export const ButtonsExample = () => {
+  return (
+    <div className="col-group">
+      {appearances.map((appearance) => {
+        return (
+          <div className="row-group" key={`appearance-${appearance}`}>
+            {modes.map((mode) => (
+              <Button key={`mode-1-${appearance}-${mode}`} appearance={appearance} mode={mode}>
+                Button
+              </Button>
+            ))}
+            {[...modes].reverse().map((mode) => (
+              <Button key={`mode-2-${appearance}-${mode}`} appearance={appearance} mode={mode} disabled>
+                Button
+              </Button>
+            ))}
+          </div>
+        )
+      })}
+      <div className="row-group">
+        {sizes.map((size) => (
+          <Button key={`size-${size}`} icon={<Icon icon={faBookmark} size="xxxs" />} size={size}>
+            Button
+          </Button>
+        ))}
+      </div>
+      <div className="row-group">
+        <Button icon={<Icon icon={faPause} size="xxxs" />} size="md"></Button>
+        <Button icon={<Icon icon={faPlay} size="xxxs" />} size="md">
+          Button
+        </Button>
+        <Button iconRight={<Icon icon={faArrowRight} size="xxxs" />}>Button</Button>
+        <Button fill iconRight={<Icon icon={faChevronRight} size="xxxs" className="quieter" />}>
+          Button
+        </Button>
+        <Button
+          fill
+          icon={<Icon icon={faFolderBlank} size="xxxs" />}
+          iconRight={<Icon icon={faChevronRight} size="xxxs" className="quieter" />}
+        >
+          Button
+        </Button>
+      </div>
+      <div className="row-group">
+        <Button fill align="left">
+          Left
+        </Button>
+        <Button fill align="center">
+          Center
+        </Button>
+        <Button fill align="right">
+          Right
+        </Button>
+      </div>
+      <div className="row-group">
+        <Button loading>Button fullwidth</Button>
+        <Button disabled>Button disabled</Button>
+        <Button fill>Button fullwidth</Button>
+      </div>
+    </div>
+  )
+}
+export const ButtonsGroupExample = () => {
+  return (
+    <div className="col-group">
+      <div className="row-group">
+        <ButtonGroup>
+          <Button>Button One</Button>
+          <Button>Button Two</Button>
+          <Button>Button Three</Button>
+        </ButtonGroup>
+      </div>
+      <div className="row-group">
+        <ButtonGroup fill>
+          <Button>Secondary</Button>
+          <Button fill>Primary</Button>
+        </ButtonGroup>
+      </div>
+      <div className="row-group">
+        <ButtonGroup>
+          <Button icon={<Icon icon={faBookmark} size="xxxs" />} />
+          <Button>Button name</Button>
+        </ButtonGroup>
+        <ButtonGroup>
+          <Button>Button name</Button>
+          <Button icon={<Icon icon={faBookmark} size="xxxs" />} />
+        </ButtonGroup>
+        <ButtonGroup>
+          <Button
+            icon={<Icon icon={faFile} size="xxxs" />}
+            iconRight={<Icon icon={faCaretDown} size="xxxs" className="quieter" />}
+          >
+            File
+          </Button>
+          <Button
+            icon={<Icon icon={faPen} size="xxxs" />}
+            iconRight={<Icon icon={faCaretDown} size="xxxs" className="quieter" />}
+          >
+            Edit
+          </Button>
+          <Button
+            icon={<Icon icon={faEye} size="xxxs" />}
+            iconRight={<Icon icon={faCaretDown} size="xxxs" className="quieter" />}
+          >
+            View
+          </Button>
+        </ButtonGroup>
+      </div>
+    </div>
+  )
+}