docs: update modal documentation

turistikrota · Aug 5, 2023 · 1401a75 · 1401a75
1 parent afb008d
commit 1401a75
Show file tree

Hide file tree

Showing 7 changed files with 127 additions and 45 deletions.
diff --git a/apps/docs/.storybook/preview-head.html b/apps/docs/.storybook/preview-head.html
@@ -29,4 +29,12 @@
   body .sb-argstableBlock-body tr:not(:first-child) {
     border-color: var(--default-background) !important;
   }
+
+  body {
+    color: unset !important;
+  }
 </style>
+
+<script>
+  document.documentElement.classList.add('dark')
+</script>
diff --git a/apps/docs/.storybook/preview.tsx b/apps/docs/.storybook/preview.tsx
@@ -2,7 +2,7 @@ import type { Preview } from '@storybook/react'
 import '@turistikrota/ui/assets/config.css'
 import 'boxicons/css/boxicons.min.css'
 import './tailwind.css'
-import theme, { isDark } from './turistikrota.theme'
+import theme from './turistikrota.theme'
 
 const preview: Preview = {
   parameters: {
@@ -19,17 +19,11 @@ const preview: Preview = {
     themes: {
       clearable: false,
       list: [
-        {
-          name: 'Light',
-          class: [],
-          color: '#ffffff',
-          default: !isDark,
-        },
         {
           name: 'Dark',
           class: ['dark'],
           color: '#000000',
-          default: isDark,
+          default: true,
         },
       ],
     },

diff --git a/apps/docs/.storybook/tailwind.css b/apps/docs/.storybook/tailwind.css
@@ -7,3 +7,48 @@ iframe,
 #storybook-preview-iframe {
   background-color: var(--default-background) !important;
 }
+
+:root {
+  --foreground-rgb: 255, 255, 255 !important;
+  --background-color-start: #141414 !important;
+  --background-color-end: #121212 !important;
+  --popup-background-color: #121212 !important;
+  --header-background-color: #050505 !important;
+  --default-background: #0f0e0e !important;
+  --second-background-color: #121212 !important;
+  --third-background-color: #191919 !important;
+
+  --skeleton-default-color: #201c1c !important;
+  --skeleton-color-50: #212121 !important;
+  --skeleton-color-100: #1f1f1f !important;
+  --skeleton-color-200: #1d1d1d !important;
+  --skeleton-color-300: #1b1b1b !important;
+  --skeleton-color-400: #191919 !important;
+  --skeleton-color-500: #171717 !important;
+  --skeleton-color-600: #151515 !important;
+  --skeleton-color-700: #131313 !important;
+  --skeleton-color-800: #111111 !important;
+  --skeleton-color-900: #0f0f0f !important;
+  --skeleton-color-1000: #0d0d0d !important;
+  --skeleton-color-1100: #0b0b0b !important;
+  --loading-backdrop: brightness(0.5) blur(1px) !important;
+
+  --scroll-bar-bg: rgb(var(--primary-color-500)) !important;
+  --scroll-bar-bg-hover: rgb(var(--primary-color-600)) !important;
+  --scroll-bar-track: var(--background-color-end) !important;
+
+  --progressbar-background: rgb(var(--primary-color-1100)) !important;
+
+  --shadow-color-start: rgba(255, 255, 255, 0.1) !important;
+  --shadow-color-end: rgba(255, 255, 255, 0.6) !important;
+  --preview-border-color: rgba(255, 255, 255, 0.25) !important;
+
+  --border-color: #252525 !important;
+
+  --autofill-background-color: rgb(var(--primary-color-1000)) !important;
+  --autofill-color: rgb(var(--primary-color-50)) !important;
+}
+
+body {
+  color: rgb(var(--foreground-rgb)) !important;
+}
diff --git a/apps/docs/.storybook/turistikrota.theme.ts b/apps/docs/.storybook/turistikrota.theme.ts
@@ -1,24 +1,6 @@
-import { create, ThemeVars } from '@storybook/theming'
+import { create } from '@storybook/theming'
 
-export const isDark =
-  typeof window !== undefined && !!window.matchMedia ? window.matchMedia('(prefers-color-scheme: dark)').matches : false
-
-const light: ThemeVars = {
-  base: 'light',
-  appBg: '#e7edef',
-  appContentBg: 'rgb(239, 244, 245)',
-  appBorderColor: '#f2f0f0',
-  textColor: 'rgb(107 114 128)',
-  textInverseColor: 'rgb(75 85 99)',
-  barTextColor: 'rgb(107 114 128)',
-  barSelectedColor: '#ffffff',
-  barBg: '#e7edef',
-  inputBg: '#e7edef',
-  inputBorder: '#f2f0f0',
-  inputTextColor: 'rgb(107 114 128)',
-}
-
-const dark: ThemeVars = {
+export default create({
   base: 'dark',
   appBg: '#161616',
   appContentBg: '#0f0e0e',
@@ -31,10 +13,6 @@ const dark: ThemeVars = {
   inputBg: '#161616',
   inputBorder: '#252525',
   inputTextColor: 'rgb(229 231 235)',
-}
-
-export default create({
-  ...(!isDark ? light : dark),
   fontBase: 'Arimo, sans-serif',
   fontCode: 'monospace',
 

diff --git a/apps/docs/index.html b/apps/docs/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />

diff --git a/apps/docs/src/stories/components/modal/Modal.example.tsx b/apps/docs/src/stories/components/modal/Modal.example.tsx
@@ -0,0 +1,30 @@
+import Button from '@turistikrota/ui/button'
+import Modal from '@turistikrota/ui/modal'
+import { useState } from 'react'
+
+export default function ModalExample() {
+  const [open, setOpen] = useState(false)
+  return (
+    <>
+      <Modal open={open} onClose={() => setOpen(false)}>
+        <Modal.Head>
+          <Modal.Head.Title>Modal title</Modal.Head.Title>
+          <Modal.Head.Subtitle>Modal subtitle</Modal.Head.Subtitle>
+          <Modal.Head.CloseButton title='Close Modal' onClose={() => setOpen(false)} />
+        </Modal.Head>
+        <Modal.Body>
+          <div className='flex flex-col space-y-4'>
+            <span className='text-gray-300'>Hello</span>
+            <span className='text-gray-300'>Hello</span>
+            <span className='text-gray-300'>Hello</span>
+            <span className='text-gray-300'>Hello</span>
+          </div>
+        </Modal.Body>
+        <Modal.Footer>
+          <Button block={false}>The button</Button>
+        </Modal.Footer>
+      </Modal>
+      <Button onClick={() => setOpen(true)}>Open Modal</Button>
+    </>
+  )
+}
diff --git a/apps/docs/src/stories/components/modal/Modal.mdx b/apps/docs/src/stories/components/modal/Modal.mdx
@@ -1,6 +1,8 @@
 import { Canvas, Meta, Story, ArgsTable, Controls } from '@storybook/blocks'
 import * as ModalStories from './Modal.stories'
 import Alert from '@turistikrota/ui/alert'
+import Example from './Modal.example'
+import Summary from '@/utils/Summary'
 
 <Meta of={ModalStories} />
 
@@ -12,20 +14,45 @@ import Modal from '@turistikrota/ui/modal'
 
 Modal component is used to display content in a layer above the app.
 
-<Alert type='warning'>
-  You can turn the popup you have customized on or off by changing the open value in the field below.
-</Alert>
-
-<Canvas of={ModalStories.Playground} />
-
 <Controls of={ModalStories.Playground} />
 
-## Custom Content Example
+<Example />
+
+<br />
 
-<Alert type='warning'>
-  You can turn the popup you have customized on or off by changing the open value in the field below.
-</Alert>
+<Summary title="Show Code">
 
-<Canvas of={ModalStories.CustomContent} />
+```jsx
+import Button from '@turistikrota/ui/button'
+import Modal from '@turistikrota/ui/modal'
+import { useState } from 'react'
+
+export default function ModalExample() {
+  const [open, setOpen] = useState(false)
+  return (
+    <>
+      <Modal open={open} onClose={() => setOpen(false)}>
+        <Modal.Head>
+          <Modal.Head.Title>Modal title</Modal.Head.Title>
+          <Modal.Head.Subtitle>Modal subtitle</Modal.Head.Subtitle>
+          <Modal.Head.CloseButton title='Close Modal' onClose={() => setOpen(false)} />
+        </Modal.Head>
+        <Modal.Body>
+          <div className='flex flex-col space-y-4'>
+            <span className='text-gray-300'>Hello</span>
+            <span className='text-gray-300'>Hello</span>
+            <span className='text-gray-300'>Hello</span>
+            <span className='text-gray-300'>Hello</span>
+          </div>
+        </Modal.Body>
+        <Modal.Footer>
+          <Button block={false}>The button</Button>
+        </Modal.Footer>
+      </Modal>
+      <Button onClick={() => setOpen(true)}>Open Modal</Button>
+    </>
+  )
+}
+```
 
-<Controls of={ModalStories.CustomContent} />
+</Summary>