- {[
- { title: 'Normal', props: {} },
- { title: 'No title', props: { title: undefined } },
- { title: 'Minimal Header', props: { minimalHeader: true } },
- { title: 'Minimal Highlighted Value', props: { minimalHeader: true, highlightedValue: 123 } },
- {
- title: 'Highlighted Value',
- props: { highlightedValue: 123, highlightedLabel: 'some custom label' },
- },
- {
- title: 'Formatter - Auto 2 Precision for floats',
- props: { data: DATA.map((d) => ({ ...d, ram_usage: d.ram_usage + 0.1231233 })) },
- },
- { title: 'UTC Dates', props: { displayDateInUtc: true } },
- { title: 'Custom date format', props: { customDateFormat: 'HH:mm' } },
- { title: 'Value format', props: { format: 'c' } },
- { title: 'Minimal Value format', props: { minimalHeader: true, format: 'c' } },
- { title: 'No data', props: { data: [] } },
- ].map(({ title, props }) => (
-
-)
-
-const ExampleName: React.FC
- {title}
-
- ))}
-
-
- {children}
-) diff --git a/apps/studio/components/ui/Charts/BarChart.stories.tsx b/apps/studio/components/ui/Charts/BarChart.stories.tsx deleted file mode 100644 index d3df720127d..00000000000 --- a/apps/studio/components/ui/Charts/BarChart.stories.tsx +++ /dev/null @@ -1,56 +0,0 @@ -import { StoryObj } from '@storybook/react' -import dayjs from 'dayjs' -import React from 'react' -import Chart, { BarChartProps } from './BarChart' - -export default { - title: 'Charts', -} as StoryObj
- {[
- { title: 'Normal', props: {} },
- { title: 'No title', props: { title: undefined } },
- { title: 'Minimal Header', props: { minimalHeader: true } },
- { title: 'Minimal Highlighted Value', props: { minimalHeader: true, highlightedValue: 123 } },
- {
- title: 'Highlighted Value',
- props: { highlightedValue: 123, highlightedLabel: 'some custom label' },
- },
- {
- title: 'Formatter - Auto 2 Precision for floats',
- props: { data: DATA.map((d) => ({ ...d, ram_usage: d.ram_usage + 0.1231233 })) },
- },
- { title: 'UTC Dates', props: { displayDateInUtc: true } },
- { title: 'Custom date format', props: { customDateFormat: 'HH:mm' } },
- { title: 'Value format', props: { format: 'c' } },
- { title: 'Minimal Value format', props: { minimalHeader: true, format: 'c' } },
- { title: 'No data', props: { data: [] } },
- { title: 'onBarClick', props: { onBarClick: console.log } },
- ].map(({ title, props }) => (
-
-)
-
-const ExampleName: React.FC
- {title}
-
- ))}
-
-
- {children}
-) diff --git a/apps/studio/components/ui/Charts/StackedBarChart.stories.tsx b/apps/studio/components/ui/Charts/StackedBarChart.stories.tsx deleted file mode 100644 index acb8dcca092..00000000000 --- a/apps/studio/components/ui/Charts/StackedBarChart.stories.tsx +++ /dev/null @@ -1,81 +0,0 @@ -import React from 'react' -import { StoryObj } from '@storybook/react' -import dayjs from 'dayjs' -import Chart from './StackedBarChart' -import { DEFAULT_STACK_COLORS, genStackColorScales } from './Charts.constants' - -export default { - title: 'Charts/StackedBarChart', -} as StoryObj
- Default Stacked Chart Colors
- Examples
-
-)
-
-const ExampleName: React.FC
- {genStackColorScales(DEFAULT_STACK_COLORS).map((c) => (
-
- ))}
-
-
-
- {[
- { title: 'Normal', props: {} },
- { title: 'No title', props: { title: undefined } },
- { title: 'Minimal Header', props: { minimalHeader: true } },
- { title: 'Hide Legend', props: { hideLegend: true } },
- { title: 'Hide header', props: { hideHeader: true } },
- { title: 'Percentage Bars', props: { variant: 'percentages' as const } },
- {
- title: 'Percentage Bars with suffix',
- props: { variant: 'percentages' as const, format: 'mem' },
- },
- {
- title: 'Formatter - Auto 2 Precision for floats',
- props: { data: DATA.map((d) => ({ ...d, count: d.count + 5.12 })) },
- },
- { title: 'UTC Dates', props: { displayDateInUtc: true } },
- { title: 'Custom date format', props: { customDateFormat: 'HH:mm' } },
- { title: 'Value format (c suffix)', props: { format: 'c' } },
- { title: 'Minimal Value format', props: { minimalHeader: true, format: 'c' } },
- { title: 'No data', props: { data: [] } },
- ].map(({ title, props }, i) => (
-
-
- {title}
-
- ))}
-
-
- {children}
-) diff --git a/apps/studio/components/ui/DatePicker/DatePicker.stories.tsx b/apps/studio/components/ui/DatePicker/DatePicker.stories.tsx deleted file mode 100644 index c88c49a8b9e..00000000000 --- a/apps/studio/components/ui/DatePicker/DatePicker.stories.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import React, { useState } from 'react' - -import { DatePicker } from '.' -import ReactDatePicker from 'react-datepicker' - -export default { - title: 'Data/DatePicker', - component: DatePicker, -} - -export const Default = (args: any) => ( -
-
-)
-
-export const Simple = () => {
- const [startDate, setStartDate] = useState(new Date())
- const [endDate, setEndDate] = useState(null)
- const onChange = (dates: any) => {
- const [start, end] = dates
- setStartDate(start)
- setEndDate(end)
- }
- return (
-
-//
-// )
-// },
-// ],
-// // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
-// tags: ['autodocs'],
-// // More on argTypes: https://storybook.js.org/docs/api/argtypes
-// // argTypes: {},
-// }
-
-// // export default meta
-
-// type Story = StoryObj-// Press / to open -// commands -//
-// -// ) -// }, -// args: { -// // placeholder: 'Ask AI a question...', -// }, -// } diff --git a/packages/ui-patterns/AssistantChat/AssistantChatForm.stories.tsx b/packages/ui-patterns/AssistantChat/AssistantChatForm.stories.tsx deleted file mode 100644 index a59b6fa8143..00000000000 --- a/packages/ui-patterns/AssistantChat/AssistantChatForm.stories.tsx +++ /dev/null @@ -1,66 +0,0 @@ -// import { StoryObj } from '@storybook/react' -// import { AssistantChatForm } from './AssistantChatForm' -// import { Box, User } from 'lucide-react' -// import { createRef, useRef, useState } from 'react' - -// // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export -// export default { -// title: 'AI/Assistant Chat', -// component: AssistantChatForm, -// parameters: { -// // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout -// layout: 'centered', -// }, -// decorators: [ -// (Story: any) => { -// return ( -//
-//
-// )
-// },
-// ],
-// // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
-// tags: ['autodocs'],
-// // More on argTypes: https://storybook.js.org/docs/api/argtypes
-// // argTypes: {},
-// }
-
-// // export default meta
-
-// type Story = StoryObj
-//
-// )
-// },
-// ],
-// // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
-// tags: ['autodocs'],
-// // More on argTypes: https://storybook.js.org/docs/api/argtypes
-// // argTypes: {},
-// }
-
-// // export default meta
-
-// type Story = StoryObj
-//
-//
-//
-// -// This is a paragraph with some bold text -//
-//
-//
-// -// This is a paragraph with some bold text -//
-//
-//
-// -// This is a paragraph with some bold text -//
-//
- 
-
- )
- }
-
- return (
-
- Hello
,
-}
diff --git a/packages/ui/src/components/Breadcrumb/Breadcrumb.stories.tsx b/packages/ui/src/components/Breadcrumb/Breadcrumb.stories.tsx
deleted file mode 100644
index 681539b05b7..00000000000
--- a/packages/ui/src/components/Breadcrumb/Breadcrumb.stories.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import React from 'react'
-import { Breadcrumb } from './../../../'
-
-export default {
- title: 'Navigation/Breadcrumb',
- component: Breadcrumb,
-}
-
-export const Default = ({ children, ...args }: any) => 
- ),
-}
-
-withMeta.args = {
- title: 'title is here'
-}
-
-withHover.args = {
- title: 'This card can hover',
- hoverable: true
-}
diff --git a/packages/ui/src/components/Checkbox/Checkbox.stories.tsx b/packages/ui/src/components/Checkbox/Checkbox.stories.tsx
deleted file mode 100644
index 55979991380..00000000000
--- a/packages/ui/src/components/Checkbox/Checkbox.stories.tsx
+++ /dev/null
@@ -1,128 +0,0 @@
-import { Checkbox } from '.'
-
-export default {
- title: 'Data Input/Checkbox',
- component: Checkbox,
-}
-
-export const Default = (args: any) =>
-
- I am content
-I am content
-I am content
-I am content
-
-
- I am content
-I am content
-I am content
-I am content
-
- Right click this area
-
-)
-
-export const Default = (args: any) => (
-
-
- Group label ,
- console.log('clicked')}>Account ,
- Settings ,
-
-
-)
-
-Default.args = {}
-
-export const doNotcloseOverlay = (args: any) => (
-
- Signed in as
- tom@example.com
-
- ,
-
-
- Signed in as
- tom@example.com
- ,
- Account ,
- Settings ,
-
- }>Log out
- ,
- ]}
- >
- {triggerArea}
-
-
-)
-
-doNotcloseOverlay.args = {}
-
-export const withCustomStyles = (args: any) => (
-
-
- Signed in as
- tom@example.com
- ,
- Account ,
- Settings ,
-
- }>
- Log out
-
- ,
- ]}
- >
- {triggerArea}
-
-
-)
-
-withCustomStyles.args = {}
-
-export const Checkbox = (args: any) => {
- const [checked, setChecked] = useState(false)
-
- return (
-
- Settings ,
-
- Show subtitles
- ,
- ]}
- >
- {triggerArea}
-
-
- )
-}
-
-export const Radio = (args: any) => {
- const [value, setValue] = useState('red')
-
- return (
-
-
- Red
- Blue
- Green
- ,
- ]}
- >
- {triggerArea}
-
-
- )
-}
diff --git a/packages/ui/src/components/Divider/Divider.stories.tsx b/packages/ui/src/components/Divider/Divider.stories.tsx
deleted file mode 100644
index eb0c6246ffd..00000000000
--- a/packages/ui/src/components/Divider/Divider.stories.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import { Button } from '../Button'
-import { Divider } from './'
-
-export default {
- title: 'Utilities/Divider',
- component: Divider,
-}
-
-export const Default = (args: any) =>
-
-)
-
-Default.args = {}
-
-withCenterText.args = {}
-
-withLeftText.args = {
- orientation: 'left',
-}
-
-withRightText.args = {
- orientation: 'right',
-}
-
-lighterColor.args = {
- light: true,
-}
-
-vertical.args = {
- type: 'vertical',
-}
diff --git a/packages/ui/src/components/Form/Form.stories.tsx b/packages/ui/src/components/Form/Form.stories.tsx
deleted file mode 100644
index ad48d26524c..00000000000
--- a/packages/ui/src/components/Form/Form.stories.tsx
+++ /dev/null
@@ -1,487 +0,0 @@
-import { Form } from '.'
-import { Input, Button, InputNumber, Toggle, Checkbox, Radio, Select, Listbox } from '../../index'
-
-import * as Yup from 'yup'
-import { User } from '../Icon/IconImportHandler'
-import React from 'react'
-
-export default {
- title: 'Data Input/Form',
- component: Form,
-}
-
-interface Values {
- email: string
- last_name: string
- profession: string
- number: number | undefined
- // remember_me: boolean
- checkbox_alone: boolean
- favorite_food: string
- check_3: boolean
- check_2: boolean
- check_1: boolean
- textarea: string
- toggle: boolean
- people: number | undefined
-}
-
-const INITIAL_VALUES: Values = {
- email: '',
- last_name: '',
- profession: '',
- number: undefined,
- checkbox_alone: false,
- // remember_me: false,
- favorite_food: '',
- check_3: false,
- check_2: true,
- check_1: false,
- textarea: '',
- toggle: true,
- people: undefined,
-}
-
-export const InputLevelValidation = () => {
- function validateEmail(value: string) {
- console.log('validateEmail running')
- let error
- if (!value) {
- error = 'Required'
- } else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(value)) {
- error = 'Invalid email address'
- }
- return error
- }
-
- return (
-
- )
-}
-
-export const InputLevelValidationYip = () => {
- // validation schema
- const SignupSchema = Yup.object().shape({
- firstname: Yup.string().min(2, 'Too Short!').max(50, 'Too Long!').required('Required'),
- lastname: Yup.string().min(2, 'Too Short!').max(50, 'Too Long!').required('Required'),
- email: Yup.string().email('Invalid email').required('Required'),
- })
-
- return (
-
- )
-}
-
-const people = [
- {
- value: 1,
- label: 'Wade Cooper',
- avatar:
- 'https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
- },
- {
- value: 2,
- label: 'Arlene Mccoy',
- avatar:
- 'https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
- },
- {
- value: 3,
- label: 'Devon Webb',
- avatar:
- 'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2.25&w=256&h=256&q=80',
- },
- {
- value: 4,
- label: 'Tom Cook',
- avatar:
- 'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
- },
- {
- value: 5,
- label: 'Tanya Fox',
- avatar:
- 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
- },
- {
- value: 6,
- label: 'Hellen Schmidt',
- avatar:
- 'https://images.unsplash.com/photo-1487412720507-e7ab37603c6f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
- },
- {
- value: 7,
- label: 'Caroline Schultz',
- avatar:
- 'https://images.unsplash.com/photo-1568409938619-12e139227838?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
- },
- {
- value: 8,
- label: 'Mason Heaney',
- avatar:
- 'https://images.unsplash.com/photo-1531427186611-ecfd6d936c79?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
- },
- {
- value: 9,
- label: 'Claudie Smitham',
- avatar:
- 'https://images.unsplash.com/photo-1584486520270-19eca1efcce5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
- },
- {
- value: 10,
- label: 'Emil Schaefer',
- avatar:
- 'https://images.unsplash.com/photo-1561505457-3bcad021f8ee?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
- },
-]
-
-export const LargerExample = () => {
- return (
- <>
-
-
- )
-}
-
-export const CardForm = () => {
- // panel
- const Panel = ({
- children,
- header,
- footer,
- }: {
- children: React.ReactNode
- header?: React.ReactNode
- footer?: React.ReactNode
- }) => (
-
-
-
- {header &&
- )
-
- const Section = ({
- children,
- header,
- }: {
- children: React.ReactNode
- header?: React.ReactNode
- }) => (
- {header}
}
- {children}
- {footer}
-
- {header}
- {children}
-
- )
-
- return (
- <>
-
-
- )
-}
-
-export { default as AuthForm } from './examples/AuthForm'
diff --git a/packages/ui/src/components/Icon/Icon.stories.tsx b/packages/ui/src/components/Icon/Icon.stories.tsx
deleted file mode 100644
index 8fcc2f8b607..00000000000
--- a/packages/ui/src/components/Icon/Icon.stories.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-import React from 'react'
-
-import { IconMail, Typography } from './../../index'
-
-export default {
- title: 'General/Icon',
- component: IconMail,
-}
-
-export const Default = (args: any) => (
-
-
-)
-
-Default.args = {
- size: 16,
- strokeWidth: 2,
-}
-
-// export const IconList = (args: any) => (
-// <>
-//
-
-
-
-
-// This icons uses react-feather from Feather Icons. For detail you can check
-// it here and{' '}
-// here
-//
-//
-// {LIST_ICONS.map((icon) => (
-//
-//
-// )
-
-// IconList.args = {
-// size: 16,
-// strokeWidth: 2,
-// }
-
-// // const SvgMessagesIcon = () => (
-// //
-// // )
-
-// // export const IconWithSVG = (args: any) => (
-// //
-//
-// ))}
-// This is the title
-This is the title
- - } - > - {content} -
-
-
-
-
- Shall we nest some components?
-yea sure, go on then.
-
-
- - This Sidepanel was opened with a trigger element -
- -- You can open a nested panel by clicking the button below -
- - -This is a paragraph
-This is a paragraph
-This is a paragraph
-This is a paragraph
-This is a paragraph
-This is a paragraph
-This is a paragraph
-This is a paragraph
-This is a paragraph
-This is a paragraph
-This is a paragraph
-This is a paragraph
-This is a paragraph
-This is a paragraph
-This is a paragraph
-This is a paragraph
-This is a paragraph
-This is a paragraph
-This is a paragraph
-This is a paragraph
-This is a paragraph
-This is a paragraph
-This is a paragraph
-This is a paragraph
-This is a paragraph
-This is a paragraph
-This is a paragraph
-This is a paragraph
-This is a paragraph
-This is a paragraph
-This is a paragraph
-This is a paragraph
-This is a paragraph
-This is a paragraph
-This is a paragraph
-This is a paragraph
-This is a paragraph
-This is a paragraph
-This is a paragraph
-This is a paragraph
-This is a paragraph
-This is a paragraph
-This is a paragraph
-This is a paragraph
-This is a paragraph
--
-
-
-
-
-
-
-
-
-
-
- - Supabase (Link) - - -) diff --git a/packages/ui/src/components/Upload/Upload.stories.tsx b/packages/ui/src/components/Upload/Upload.stories.tsx deleted file mode 100644 index 34d884df7ad..00000000000 --- a/packages/ui/src/components/Upload/Upload.stories.tsx +++ /dev/null @@ -1,70 +0,0 @@ -import React, { useState } from 'react' - -import Upload from '.' -import Typography from '../Typography' - -export default { - title: 'Data Input/Upload', - component: Upload, -} - -export const Draggable = () => { - const [files, setFiles] = useState
-
-
-
-
- PNG, JPG, GIF up to 10MB
-
- {/*
-
- {/* Previews */}
- {files.length > 0 && (
-
-
-
- Upload a file
-
- {' or drag and drop'}
-
-
- PNG, JPG, GIF up to 10MB
*/} -
- {files.map((file) => (
- })
- ))}
-
- )}
-
-//
-// )
-// }
-
-// export default meta
diff --git a/packages/ui/tailwind-theming.md b/packages/ui/tailwind-theming.md
index d12d000ddd8..38a34bf4639 100644
--- a/packages/ui/tailwind-theming.md
+++ b/packages/ui/tailwind-theming.md
@@ -137,9 +137,3 @@ text-border-control
| `500` |
| `DEFAULT` |
| `600` |
-
-## Storybook
-
-The current colors are also auto documented in Storybook
-
-[Storybook Colors](https://ui-storybook-pre-release.vercel.app/)
diff --git a/packages/ui/tailwind.config.js b/packages/ui/tailwind.config.js
deleted file mode 100644
index cc5546ac08d..00000000000
--- a/packages/ui/tailwind.config.js
+++ /dev/null
@@ -1,90 +0,0 @@
-const config = require('config/tailwind.config')
-const { fontFamily } = require('tailwindcss/defaultTheme')
-
-module.exports = config({
- content: ['../../packages/ui/**/*.{tsx,ts,js}', '../../packages/ui/**/*.*.{tsx,ts,js}'],
- theme: {
- container: {
- center: true,
- padding: '2rem',
- screens: {
- '2xl': '1400px',
- },
- },
- extend: {
- keyframes: {
- 'flash-code': {
- '0%': { backgroundColor: 'rgba(63, 207, 142, 0.1)' },
- '100%': { backgroundColor: 'transparent' },
- },
- 'caret-blink': {
- '0%,70%,100%': { opacity: '1' },
- '20%,50%': { opacity: '0' },
- },
- },
- animation: {
- 'flash-code': 'flash-code 1s forwards',
- 'flash-code-slow': 'flash-code 2s forwards',
- 'caret-blink': 'caret-blink 1.25s ease-out infinite',
- },
- colors: {
- border: 'hsl(var(--border-overlay))',
- input: 'hsl(var(--border-control))',
- ring: 'hsl(var(--ring))',
- background: 'hsl(var(--background-default))',
- foreground: 'hsl(var(--foreground-default))',
- primary: {
- DEFAULT: 'hsl(var(--foreground-default))',
- foreground: 'hsl(var(--background-default))',
- },
- secondary: {
- DEFAULT: 'hsl(var(--secondary))',
- foreground: 'hsl(var(--secondary-foreground))',
- },
- destructive: {
- DEFAULT: 'hsl(var(--destructive-default))',
- foreground: 'hsl(var(--foreground-default))',
- },
- muted: {
- DEFAULT: 'hsl(var(--border-overlay))',
- foreground: 'hsl(var(--foreground-lighter))',
- },
- accent: {
- DEFAULT: 'hsl(var(--background-overlay))',
- foreground: 'hsl(var(--foreground-lighter))',
- },
- popover: {
- DEFAULT: 'hsl(var(--background-overlay))',
- foreground: 'hsl(var(--foreground-default))',
- },
- card: {
- DEFAULT: 'hsl(var(--background-overlay))',
- foreground: 'hsl(var(--foreground-default))',
- },
- },
- borderRadius: {
- lg: `var(--radius)`,
- md: `calc(var(--radius) - 2px)`,
- sm: 'calc(var(--radius) - 4px)',
- },
- fontFamily: {
- sans: ['var(--font-sans)', ...fontFamily.sans],
- },
- keyframes: {
- 'accordion-down': {
- from: { height: 0 },
- to: { height: 'var(--radix-accordion-content-height)' },
- },
- 'accordion-up': {
- from: { height: 'var(--radix-accordion-content-height)' },
- to: { height: 0 },
- },
- },
- animation: {
- 'accordion-down': 'accordion-down 0.2s ease-out',
- 'accordion-up': 'accordion-up 0.2s ease-out',
- },
- },
- },
- plugins: [require('tailwindcss-animate')],
-})
diff --git a/packages/ui/tsconfig.json b/packages/ui/tsconfig.json
index aebbf48962e..c6e40b7c779 100644
--- a/packages/ui/tsconfig.json
+++ b/packages/ui/tsconfig.json
@@ -4,5 +4,5 @@
"resolveJsonModule": true
},
"include": ["."],
- "exclude": ["dist", "build", "node_modules", "**/*.stories.tsx"]
+ "exclude": ["dist", "build", "node_modules"]
}
-//
-//
-//
-// Background
-//
-// {color.background.map((x: string) => {
-// return (
-//
-//
-//
-//
-// )
-// })}
-//
-// {x}
-//
-//
-//
-// Border
-//
-// {color.border.map((x) => {
-// return (
-//
-//
-//
-//
-// )
-// })}
-//
-// {x}
-//
-//
-//
-// texts
-//
-// {color.text.map((x) => {
-// return (
-//
-//
-//
-// ###
-//
-//
-// )
-// })}
-//
-// {x}
-//
-//
-//
-//
-//
-// Colors
-//
-// {color.colors.map((x: string) => {
-// return (
-//
-//
-//
-//
-// )
-// })}
-//
-// {x}
-//
-//
-//
-// Palletes
-//
-// {color.palletes.map((x) => {
-// return (
-//
-//
-//
-//
-// )
-// })}
-//
-// {x}
-//
-//