vasceannie/supabase
1
0
Fork 0
Code Issues Pull Requests Actions 8 Packages Projects Releases Wiki Activity

chore: Remove storybook (#31096)

Browse Source 
* Remove all stories files.

* Remove some extra files which were used by storybook or werent used at all.

* Remove all references to storybook in documentation and code.

* Remove all storybook packages.

* Fix prettier error.

* Remove two css configs which were used for storybook.
This commit is contained in:
Ivan Vasilov
2024-12-16 11:50:20 +01:00
committed by GitHub
parent 4d889e7330
commit 7c5912ebe4
51 changed files with 2 additions and 7804 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
apps/design-system/content/docs/tailwind-classes.mdx
View File

@@ -186,9 +186,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/)

15
apps/studio/.storybook/main.js
View File

@@ -1,15 +0,0 @@
const path = require('path')
module.exports = {
stories: ['./*.stories.mdx', '../components/**/*.stories.@(js|jsx|ts|tsx)'],
addons: [
'@storybook/addon-links',
'@storybook/addon-essentials',
'@storybook/addon-interactions',
'storybook-dark-mode',
],
webpackFinal: async (config) => {
config.resolve.modules = [...(config.resolve.modules || []), path.resolve(__dirname, '../')]
return config
},
}

113
apps/studio/.storybook/preview.css
View File

@@ -1,113 +0,0 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
.dark,
.light,
.light .docs-story,
.dark .docs-story {
@apply bg-studio;
}
/* // date picker */
/* !!!! THIS IS A COPY OF THE styles/date-picker.scss !! */
.react-datepicker__input-container input {
@apply block w-full text-base md:text-sm bg-white border border-muted rounded shadow-sm;
}
.react-datepicker-popper {
@apply z-40 w-72 text-sm bg-surface-100 shadow px-3 py-2 border-2 border-background rounded;
}
.react-datepicker-left {
@apply absolute left-0 right-auto top-11 transform-none !important;
}
.react-datepicker-right {
@apply absolute right-0 left-auto top-11 transform-none !important;
}
.react-datepicker__portal {
@apply absolute z-10 w-72 text-sm transform-none bg-white shadow px-3 py-2 top-12 right-0 border-2 border-background rounded;
}
.react-datepicker__month-container {
@apply flex flex-col;
}
.react-datepicker__month {
@apply flex flex-col;
@apply -space-y-px;
}
.react-datepicker__current-month {
@apply ml-2.5 text-lg font-semibold text-border-stronger;
}
.react-datepicker__week {
@apply flex -space-x-px;
}
.react-datepicker__day-names {
@apply flex -space-x-px text-foreground-lighter font-normal text-center text-xs;
}
.react-datepicker__day-name {
@apply w-10 h-10 flex items-center justify-center py-1 rounded-full;
}
.react-datepicker__navigation {
@apply absolute top-2;
}
.react-datepicker__navigation--previous {
@apply right-12 w-10 h-10 rounded transition flex items-center justify-center hover:bg-studio;
}
.react-datepicker__navigation--next {
@apply right-4 w-10 h-10 rounded transition flex items-center justify-center hover:bg-studio;
}
.react-datepicker__day {
@apply w-10 h-10 flex items-center font-normal justify-center text-sm leading-loose transition text-foreground-light;
/* @apply mb-1 py-1; */
@apply -space-y-px;
@apply border border-default;
}
.react-datepicker__day--disabled {
@apply cursor-not-allowed opacity-40 hover:bg-transparent;
}
.react-datepicker__day--outside-month {
@apply text-border-stronger;
}
.react-datepicker__day--in-range {
@apply bg-brand-300 text-scale-fixed-100 border-brand-300;
}
.react-datepicker__day--in-selecting-range {
@apply bg-brand-400 text-scale-fixed-100 border-brand-400;
}
.react-datepicker__day--selecting-range-start {
@apply bg-studio;
}
.react-datepicker__day--selecting-range-end {
@apply bg-studio;
}
.react-datepicker__day--selected {
@apply bg-brand-300 text-white;
}
.react-datepicker__day--range-start {
@apply bg-brand text-white hover:text-border-strong hover:bg-white;
}
.react-datepicker__day--range-end {
@apply bg-brand text-white hover:text-border-strong hover:bg-white;
}

22
apps/studio/.storybook/preview.js
View File

@@ -1,22 +0,0 @@
import './preview.css'
export const parameters = {
actions: { argTypesRegex: '^on[A-Z].*' },
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/,
},
},
darkMode: {
darkClass: 'dark',
lightClass: 'light',
stylePreview: true,
},
}
export const decorators = [
(Story) => {
return <Story />
},
]

34
apps/studio/components/interfaces/Settings/Logs/LogTable.stories.tsx
View File

@@ -1,34 +0,0 @@
import React from 'react'
import LogTable from './LogTable'
export default {
title: 'Logs',
}
export const Functions = (args: any) => (
<div>
<LogTable
queryType="functions"
projectRef="123"
data={[
{
event_message: 'This is a error log\n',
event_type: 'log',
function_id: '001b0b08-331c-403e-810c-a2004b03a019',
level: 'error',
timestamp: 1659545029083869,
id: '3475cf6f-2929-4296-ab44-ce2c17069937',
},
{
event_message: 'This is a uncaughtExceptop\n',
event_type: 'uncaughtException',
function_id: '001b0b08-331c-403e-810c-a2004b03a019',
timestamp: 1659545029083869,
id: '4475cf6f-2929-4296-ab44-ce2c17069937',
level: null,
},
]}
/>
</div>
)

69
apps/studio/components/interfaces/Settings/Logs/LogsErrorRenderers/LogsErrorRenderers.stories.tsx
View File

@@ -1,69 +0,0 @@
import React, { useState } from 'react'
import { DefaultErrorRenderer } from './DefaultErrorRenderer'
import ResourcesExceededErrorRenderer from './ResourcesExceededErrorRenderer'
import { Alert } from 'ui'
export default {
title: 'Logs',
}
export const ErrorRenderers = () => (
<div
style={{
display: 'flex',
flexDirection: 'column',
gap: '10px',
}}
>
{[
<DefaultErrorRenderer key="one" isCustomQuery={false} error="some string error" />,
<DefaultErrorRenderer
key="two"
isCustomQuery={false}
error={{
error: { code: 123, errors: [], status: 'something', message: 'some logflare error' },
}}
/>,
<ResourcesExceededErrorRenderer
key="three"
isCustomQuery
error={{
error: {
code: 123,
errors: [
{ domain: 'global', message: 'Some very long message', reason: 'resourcesExceeded' },
],
status: 'something',
message: 'some logflare error',
},
}}
/>,
<ResourcesExceededErrorRenderer
key="four"
isCustomQuery={false}
error={{
error: {
code: 123,
errors: [
{ domain: 'global', message: 'Some very long message', reason: 'resourcesExceeded' },
],
status: 'something',
message: 'some logflare error',
},
}}
/>,
].map((child, i) => (
<Alert
key={i}
variant="danger"
title="Sorry! An error occurred when fetching data."
withIcon
className="w-1/2"
>
{child}
</Alert>
))}
</div>
)

55
apps/studio/components/ui/Charts/AreaChart.stories.tsx
View File

@@ -1,55 +0,0 @@
import { StoryObj } from '@storybook/react'
import dayjs from 'dayjs'
import React from 'react'
import Chart, { AreaChartProps } from './AreaChart'
export default {
title: 'Charts',
} as StoryObj<typeof Chart>
const DATA = [290, 430, 649, 422, 321, 893, 111].map((value, index) => ({
ram_usage: value,
timestamp: dayjs().subtract(index, 'day').toISOString(),
}))
const PROPS: AreaChartProps<(typeof DATA)[number]> = {
title: 'Memory usage',
xAxisKey: 'timestamp',
yAxisKey: 'ram_usage',
data: DATA,
}
export const AreaChart = () => (
<div className="flex flex-row gap-4 flex-wrap p-10">
{[
{ 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 }) => (
<div className="w-72 h-72" key={title}>
<ExampleName>{title}</ExampleName>
<div className="w-full h-full mt-4">
<Chart {...PROPS} {...props} />
</div>
</div>
))}
</div>
)
const ExampleName: React.FC<React.PropsWithChildren> = ({ children }) => (
<h1 className="font-bold text-foreground-light">{children}</h1>
)

56
apps/studio/components/ui/Charts/BarChart.stories.tsx
View File

@@ -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<typeof Chart>
const DATA = [290, 430, 649, 422, 321, 893, 111].map((value, index) => ({
ram_usage: value,
timestamp: dayjs().subtract(index, 'day').toISOString(),
}))
const PROPS: BarChartProps<(typeof DATA)[number]> = {
title: 'Memory usage',
xAxisKey: 'timestamp',
yAxisKey: 'ram_usage',
data: DATA,
}
export const BarChart = () => (
<div className="flex flex-row gap-4 flex-wrap p-10">
{[
{ 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 }) => (
<div className="w-72 h-72" key={title}>
<ExampleName>{title}</ExampleName>
<div className="w-full h-full mt-4">
<Chart {...PROPS} {...props} />
</div>
</div>
))}
</div>
)
const ExampleName: React.FC<React.PropsWithChildren> = ({ children }) => (
<h1 className="font-bold text-foreground-light">{children}</h1>
)

81
apps/studio/components/ui/Charts/StackedBarChart.stories.tsx
View File

@@ -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<typeof Chart>
const DATA = [290, 430, 649, 422, 321].flatMap((value, index) => [
{
count: value,
level: 'error',
timestamp: dayjs().subtract(index, 'day').toISOString(),
},
{
count: value * 2,
level: 'info',
timestamp: dayjs().subtract(index, 'day').toISOString(),
},
{
count: value * 1.3,
level: 'warn',
timestamp: dayjs().subtract(index, 'day').toISOString(),
},
])
const PROPS = {
title: 'Memory usage',
xAxisKey: 'timestamp',
yAxisKey: 'count',
stackKey: 'level',
data: DATA,
}
export const StackedBarChart = () => (
<div className="flex flex-col gap-4 ">
<ExampleName>Default Stacked Chart Colors</ExampleName>
<div className="flex flex-row ">
{genStackColorScales(DEFAULT_STACK_COLORS).map((c) => (
<div className="w-10 h-10" key={c.base} style={{ background: c.base }}></div>
))}
</div>
<ExampleName>Examples</ExampleName>
<div className="flex flex-row gap-4 flex-wrap pb-10">
{[
{ 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) => (
<div key={i} className="w-72 h-72">
<ExampleName>{title}</ExampleName>
<div className="w-full h-full mt-4">
<Chart {...PROPS} {...props} />
</div>
</div>
))}
</div>
</div>
)
const ExampleName: React.FC<React.PropsWithChildren> = ({ children }) => (
<h1 className="font-bold text-light">{children}</h1>
)

35
apps/studio/components/ui/DatePicker/DatePicker.stories.tsx
View File

@@ -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) => (
<div style={{ margin: '0 auto', minHeight: '420px', marginTop: '220px' }}>
<DatePicker />
</div>
)
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 (
<ReactDatePicker
selected={startDate}
onChange={onChange}
startDate={startDate}
endDate={endDate}
selectsRange
inline
/>
)
}

7
apps/studio/package.json
View File

@@ -16,8 +16,6 @@
"test:update:watch": "vitest --watch --update",
"deploy:staging": "VERCEL_ORG_ID=team_E6KJ1W561hMTjon1QSwOh0WO VERCEL_PROJECT_ID=QmcmhbiAtCMFTAHCuGgQscNbke4TzgWULECctNcKmxWCoT vercel --prod -A .vercel/staging.json",
"typecheck": "tsc --noEmit",
"storybook": "start-storybook -p 6006",
"build-storybook": "build-storybook",
"prettier:check": "prettier --check .",
"prettier:write": "prettier --write ."
},
@@ -135,10 +133,6 @@
},
"devDependencies": {
"@aws-sdk/client-secrets-manager": "^3.410.0",
"@storybook/addon-essentials": "^7.5.3",
"@storybook/addon-interactions": "^7.5.3",
"@storybook/addon-links": "^7.5.3",
"@storybook/react": "^7.5.3",
"@supabase/postgres-meta": "^0.64.4",
"@testing-library/dom": "^9.3.3",
"@testing-library/react": "^14.0.0",
@@ -178,7 +172,6 @@
"next-router-mock": "^0.9.13",
"postcss": "^8.4.31",
"prettier": "^4.0.0-alpha.8",
"storybook-dark-mode": "^3.0.1",
"tailwindcss": "^3.4.1",
"typescript": "~5.5.0"
}

3
babel.config.js
View File

@@ -1,3 +0,0 @@
module.exports = {
presets: [['@babel/preset-env', { targets: { node: 'current' } }], '@babel/preset-typescript'],
}

3076
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

90
packages/ui-patterns/AssistantChat/AssistantChatCommands.stories.tsx
View File

@@ -1,90 +0,0 @@
// import { StoryObj } from '@storybook/react'
// import { AssistantChatForm } from './AssistantChatForm'
// import { AssistantCommandsPopover } from './AssistantCommandsPopover'
// 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 (
// <div className="w-80 h-80">
// <Story />
// </div>
// )
// },
// ],
// // 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<typeof AssistantChatForm>
// export const CommandsPopover: Story = {
// render: function Render(args) {
// const [commandsOpen, setCommandsOpen] = useState<boolean>(false)
// const textAreaRef = createRef<HTMLTextAreaElement>()
// const [value, setValueState] = useState('')
// const [loading, setLoading] = useState(false)
// function handleSubmit(event: React.FormEvent) {
// // set loading for 3 seconds and then reset
// setLoading(true)
// setTimeout(() => {
// setLoading(false)
// }, 1500)
// }
// const suggestions = [
// 'Add policy for org Inserted User Access',
// 'Add policy for User-Specific Todo Access',
// 'Add policy for Org Update Restriction',
// ]
// return (
// <>
// <AssistantCommandsPopover
// open={commandsOpen}
// setOpen={setCommandsOpen}
// textAreaRef={textAreaRef}
// value={value}
// setValue={(e) => setValueState(e)}
// suggestions={suggestions}
// >
// <AssistantChatForm
// {...args}
// textAreaRef={textAreaRef}
// value={value}
// loading={loading}
// disabled={loading}
// onValueChange={(e) => setValueState(e.target.value)}
// commandsOpen={commandsOpen}
// setCommandsOpen={setCommandsOpen}
// onSubmit={async (event) => {
// event.preventDefault()
// handleSubmit(event)
// }}
// />
// </AssistantCommandsPopover>
// <p className="text-xs mt-3 text-foreground-lighter">
// Press <span className="bg-surface-300 px-[3px] py-[2px] border rounded">/</span> to open
// commands
// </p>
// </>
// )
// },
// args: {
// // placeholder: 'Ask AI a question...',
// },
// }

66
packages/ui-patterns/AssistantChat/AssistantChatForm.stories.tsx
View File

@@ -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 (
// <div className="w-80">
// <Story />
// </div>
// )
// },
// ],
// // 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<typeof AssistantChatForm>
// export const Primary: Story = {
// render: function Render(args) {
// const textAreaRef = createRef<HTMLTextAreaElement>()
// const [value, setValueState] = useState('')
// const [loading, setLoading] = useState(false)
// function handleSubmit(event: React.FormEvent) {
// // set loading for 3 seconds and then reset
// setLoading(true)
// setTimeout(() => {
// setLoading(false)
// }, 1500)
// }
// return (
// <AssistantChatForm
// {...args}
// textAreaRef={textAreaRef}
// icon={<Box strokeWidth={1.5} size={24} className="text-foreground-muted" />}
// value={value}
// loading={loading}
// disabled={loading}
// onValueChange={(e) => setValueState(e.target.value)}
// onSubmit={async (event) => {
// event.preventDefault()
// handleSubmit(event)
// }}
// />
// )
// },
// args: {
// // placeholder: 'Ask AI a question...',
// },
// }

69
packages/ui-patterns/DataInputs/Input.stories.tsx
View File

@@ -1,69 +0,0 @@
// import { StoryObj } from '@storybook/react'
// import { Input } from './Input'
// import { User } from 'lucide-react'
// // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
// export default {
// title: 'Data Inputs/Input',
// component: Input,
// 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 (
// <div className="w-80">
// <Story />
// </div>
// )
// },
// ],
// // 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<typeof Input>
// export const Primary: Story = {
// render: function Render(args) {
// return <Input {...args} />
// },
// args: {
// placeholder: 'mildtomato',
// },
// }
// export const withIcon: Story = {
// render: function Render(args) {
// return <Input {...args} />
// },
// args: {
// placeholder: 'mildtomato',
// icon: <User className="text-foreground-muted" strokeWidth={1.5} size={21} />,
// },
// }
// export const withCopy: Story = {
// render: function Render(args) {
// return <Input {...args} />
// },
// args: {
// placeholder: 'mildtomato',
// copy: true,
// },
// }
// export const size: Story = {
// render: function Render(args) {
// return <Input {...args} />
// },
// args: {
// placeholder: 'mildtomato',
// size: 'small',
// },
// }

295
packages/ui-patterns/Dialogs/TextConfirmModal.stories.tsx
View File

@@ -1,295 +0,0 @@
// import { useArgs } from '@storybook/preview-api'
// import { StoryObj } from '@storybook/react'
// import { Button, IconUserPlus } from 'ui'
// import TextConfirmModal from './TextConfirmModal'
// // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
// export default {
// title: 'Dialogs/TextConfirmModal',
// component: TextConfirmModal,
// parameters: {
// // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
// layout: 'centered',
// },
// // 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: {
// title: { control: 'text' },
// cancelLabel: { control: 'text' },
// confirmLabel: { control: 'text' },
// },
// }
// // export default meta
// // More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
// // export const Primary = {
// // args: {
// // size: 'small',
// // // visible: true,
// // },
// // }
// type Story = StoryObj<typeof TextConfirmModal>
// export const Primary: Story = {
// args: {
// confirmString: 'project name',
// visible: false,
// title: 'Are you sure you want to delete?',
// size: 'small',
// // label: 'Try Me!',
// },
// /**
// * 👇 To avoid linting issues, it is recommended to use a function with a capitalized name.
// * If you are not concerned with linting, you may use an arrow function.
// */
// render: function Render(args) {
// const [{ visible }, updateArgs] = useArgs()
// function onVisibleChange() {
// updateArgs({ visible: !visible })
// }
// return (
// <>
// <Button type="default" onClick={() => onVisibleChange()}>
// Open text confirm dialog
// </Button>
// <TextConfirmModal
// // visible={visible}
// key="primary"
// {...args}
// onCancel={() => onVisibleChange()}
// // onChange={onChange}
// // isChecked={isChecked}
// />
// </>
// )
// },
// }
// export const withInfoAlert: Story = {
// args: {
// confirmString: 'project name',
// visible: false,
// variant: 'default',
// title: 'Are you sure you want to move?',
// alert: {
// title: 'This is a reminder banner',
// description: 'This should not be used for important CRUD events.',
// },
// },
// /**
// * 👇 To avoid linting issues, it is recommended to use a function with a capitalized name.
// * If you are not concerned with linting, you may use an arrow function.
// */
// render: function Render(args) {
// const [{ visible }, updateArgs] = useArgs()
// // const [visible, setVisibleState] = useState(args.visible)
// function onVisibleChange() {
// updateArgs({ visible: !visible })
// }
// return (
// <>
// <Button type="default" onClick={() => onVisibleChange()}>
// Open warning text confirm dialog
// </Button>
// <TextConfirmModal key="withWarningAlert" {...args} onCancel={() => onVisibleChange()} />
// </>
// )
// },
// }
// export const withWarningAlert: Story = {
// args: {
// confirmString: 'project name',
// visible: false,
// variant: 'warning',
// title: 'Are you sure you want to delete?',
// alert: {
// title: 'This is a warning',
// description: 'You are about to delete this item. This action cannot be undone.',
// },
// },
// /**
// * 👇 To avoid linting issues, it is recommended to use a function with a capitalized name.
// * If you are not concerned with linting, you may use an arrow function.
// */
// render: function Render(args) {
// const [{ visible }, updateArgs] = useArgs()
// // const [visible, setVisibleState] = useState(args.visible)
// function onVisibleChange() {
// updateArgs({ visible: !visible })
// }
// return (
// <>
// <Button type="default" onClick={() => onVisibleChange()}>
// Open warning text confirm dialog
// </Button>
// <TextConfirmModal key="withWarningAlert" {...args} onCancel={() => onVisibleChange()} />
// </>
// )
// },
// }
// export const withDestructiveAlert: Story = {
// args: {
// confirmString: 'project name',
// visible: false,
// variant: 'destructive',
// title: 'Are you sure you want to delete?',
// alert: {
// title: 'This is a warning',
// description: 'You are about to delete this item. This action cannot be undone.',
// },
// // label: 'Try Me!',
// },
// /**
// * 👇 To avoid linting issues, it is recommended to use a function with a capitalized name.
// * If you are not concerned with linting, you may use an arrow function.
// */
// render: function Render(args) {
// const [{ visible }, updateArgs] = useArgs()
// // const [visible, setVisibleState] = useState(args.visible)
// function onVisibleChange() {
// updateArgs({ visible: !visible })
// }
// return (
// <>
// <Button type="default" onClick={() => onVisibleChange()}>
// Open warning text confirm dialog
// </Button>
// <TextConfirmModal key="withWarningAlert" {...args} onCancel={() => onVisibleChange()} />
// </>
// )
// },
// }
// export const withCancelButton: Story = {
// args: {
// confirmString: 'project name',
// visible: false,
// variant: 'destructive',
// title: 'Are you sure you want to delete?',
// blockDeleteButton: false,
// // label: 'Try Me!',
// },
// /**
// * 👇 To avoid linting issues, it is recommended to use a function with a capitalized name.
// * If you are not concerned with linting, you may use an arrow function.
// */
// render: function Render(args) {
// const [{ visible }, updateArgs] = useArgs()
// // const [visible, setVisibleState] = useState(args.visible)
// function onVisibleChange() {
// updateArgs({ visible: !visible })
// }
// return (
// <>
// <Button type="default" onClick={() => onVisibleChange()}>
// Open warning text confirm dialog
// </Button>
// <TextConfirmModal key="withWarningAlert" {...args} onCancel={() => onVisibleChange()} />
// </>
// )
// },
// }
// export const withChildren: Story = {
// args: {
// confirmString: 'project name',
// visible: false,
// variant: 'destructive',
// title: 'Are you sure you want to delete?',
// },
// /**
// * 👇 To avoid linting issues, it is recommended to use a function with a capitalized name.
// * If you are not concerned with linting, you may use an arrow function.
// */
// render: function Render(args) {
// const [{ visible }, updateArgs] = useArgs()
// function onVisibleChange() {
// updateArgs({ visible: !visible })
// }
// return (
// <>
// <Button type="default" onClick={() => onVisibleChange()}>
// Open warning text confirm dialog
// </Button>
// <TextConfirmModal
// key="withWarningAlert"
// // visible={visible}
// {...args}
// onCancel={() => onVisibleChange()}
// // onChange={onChange}
// // isChecked={isChecked}
// >
// <div className="flex flex-col gap-3 text-sm">
// <div className="flex gap-3 items-center">
// <IconUserPlus className="text-foreground-lighter" />
// <p>
// This is a paragraph <strong>with some bold text</strong>
// </p>
// </div>
// <div className="flex gap-3 items-center">
// <IconUserPlus className="text-foreground-lighter" />
// <p>
// This is a paragraph <strong>with some bold text</strong>
// </p>
// </div>
// <div className="flex gap-3 items-center">
// <IconUserPlus className="text-foreground-lighter" />
// <p>
// This is a paragraph <strong>with some bold text</strong>
// </p>
// </div>
// </div>
// </TextConfirmModal>
// </>
// )
// },
// }
// export const withSize: Story = {
// args: {
// confirmString: 'project name',
// visible: false,
// size: 'xlarge',
// variant: 'destructive',
// title: 'Are you sure you want to delete?',
// },
// /**
// * 👇 To avoid linting issues, it is recommended to use a function with a capitalized name.
// * If you are not concerned with linting, you may use an arrow function.
// */
// render: function Render(args) {
// const [{ visible }, updateArgs] = useArgs()
// function onVisibleChange() {
// updateArgs({ visible: !visible })
// }
// return (
// <>
// <Button type="default" onClick={() => onVisibleChange()}>
// Open warning text confirm dialog
// </Button>
// <TextConfirmModal key="withWarningAlert" {...args} onCancel={() => onVisibleChange()} />
// </>
// )
// },
// }

283
packages/ui-patterns/form/FormItemLayout/FormItemLayout.stories.tsx
View File

@@ -1,283 +0,0 @@
// import { zodResolver } from '@hookform/resolvers/zod'
// import { StoryContext, StoryObj } from '@storybook/react'
// import { useForm } from 'react-hook-form'
// import {
// Button,
// FormControl_Shadcn_,
// FormField_Shadcn_,
// FormItem_Shadcn_,
// Form_Shadcn_,
// PopoverContent_Shadcn_,
// PopoverTrigger_Shadcn_,
// Popover_Shadcn_,
// SelectContent_Shadcn_,
// SelectItem_Shadcn_,
// SelectTrigger_Shadcn_,
// SelectValue_Shadcn_,
// Select_Shadcn_,
// Calendar,
// cn,
// } from 'ui'
// import { z } from 'zod'
// import { transformSourceForm } from '../../lib/transformSource'
// import { FormItemLayout } from './FormItemLayout'
// import { Input } from '../../DataInputs/Input'
// import { Calendar as CalendarIcon } from 'lucide-react'
// import { format } from 'date-fns'
// // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
// export default {
// title: 'Form/FormItemLayout',
// component: FormItemLayout,
// decorators: [
// (Story: any) => {
// return <Story />
// },
// ],
// parameters: {
// // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
// layout: 'centered',
// docs: {
// // controls: { exclude: ['style'] },
// source: {
// language: 'tsx',
// transform: (code: string, StoryContext: StoryContext) =>
// transformSourceForm(code, StoryContext).replace('_c', 'FormInput'),
// },
// },
// },
// // 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: {},
// }
// type Story = StoryObj<typeof FormItemLayout>
// export const Primary: Story = {
// render: function Render(args) {
// const formSchema = z.object({
// username: z.string().min(2, {
// message: 'Username must be at least 2 characters.',
// }),
// })
// // 1. Define your form.
// const form = useForm<z.infer<typeof formSchema>>({
// resolver: zodResolver(formSchema),
// defaultValues: {
// username: '',
// },
// })
// // 2. Define a submit handler.
// function onSubmit(values: z.infer<typeof formSchema>) {
// // Do something with the form values.
// // ✅ This will be type-safe and validated.
// console.log(values)
// // action('form form.handleSubmit(onSubmit)')(values)
// }
// return (
// <Form_Shadcn_ {...form}>
// <form className="w-96 flex flex-col gap-3" onSubmit={form.handleSubmit(onSubmit)}>
// <FormField_Shadcn_
// name="username"
// control={form.control}
// render={({ field }) => (
// <FormItemLayout {...args}>
// <FormControl_Shadcn_>
// <Input placeholder="mildtomato" {...field} />
// </FormControl_Shadcn_>
// </FormItemLayout>
// )}
// />
// <Button size="small" type="primary" htmlType="submit">
// Submit
// </Button>
// </form>
// </Form_Shadcn_>
// )
// },
// args: {
// label: 'Username',
// description: 'this is the description',
// labelOptional: 'optional',
// },
// }
// export const withSelect: Story = {
// render: function Render(args) {
// const FormSchema = z.object({
// email: z
// .string({
// required_error: 'Please select an email to display.',
// })
// .email(),
// })
// const form = useForm<z.infer<typeof FormSchema>>({
// resolver: zodResolver(FormSchema),
// })
// // 2. Define a submit handler.
// function onSubmit(values: z.infer<typeof FormSchema>) {
// // Do something with the form values.
// // ✅ This will be type-safe and validated.
// console.log(values)
// // action('form form.handleSubmit(onSubmit)')(values)
// }
// return (
// <Form_Shadcn_ {...form}>
// <form className="w-96 flex flex-col gap-3" onSubmit={form.handleSubmit(onSubmit)}>
// <FormField_Shadcn_
// name="email"
// control={form.control}
// render={({ field }) => (
// <FormItemLayout {...args}>
// <Select_Shadcn_ onValueChange={field.onChange} defaultValue={field.value}>
// <FormControl_Shadcn_>
// <SelectTrigger_Shadcn_>
// <SelectValue_Shadcn_ placeholder="Select a verified email to display" />
// </SelectTrigger_Shadcn_>
// </FormControl_Shadcn_>
// <SelectContent_Shadcn_>
// <SelectItem_Shadcn_ value="m@example.com">m@example.com</SelectItem_Shadcn_>
// <SelectItem_Shadcn_ value="m@google.com">m@google.com</SelectItem_Shadcn_>
// <SelectItem_Shadcn_ value="m@support.com">m@support.com</SelectItem_Shadcn_>
// </SelectContent_Shadcn_>
// </Select_Shadcn_>
// </FormItemLayout>
// )}
// />
// <Button size="small" type="primary" htmlType="submit">
// Submit
// </Button>
// </form>
// </Form_Shadcn_>
// )
// },
// args: {
// label: 'Username',
// description: 'this is the description',
// labelOptional: 'optional',
// },
// }
// export const withLayoutChange: Story = {
// render: function Render(args) {
// const formSchema = z.object({
// username: z.string().min(2, {
// message: 'Username must be at least 2 characters.',
// }),
// })
// // 1. Define your form.
// const form = useForm<z.infer<typeof formSchema>>({
// resolver: zodResolver(formSchema),
// defaultValues: {
// username: '',
// },
// })
// // 2. Define a submit handler.
// function onSubmit(values: z.infer<typeof formSchema>) {
// // Do something with the form values.
// // ✅ This will be type-safe and validated.
// console.log(values)
// // action('form form.handleSubmit(onSubmit)')(values)
// }
// return (
// <Form_Shadcn_ {...form}>
// <form className="w-[520px] flex flex-col gap-8" onSubmit={form.handleSubmit(onSubmit)}>
// <FormField_Shadcn_
// name="username"
// control={form.control}
// render={({ field }) => (
// <FormItemLayout {...args}>
// <FormControl_Shadcn_>
// <Input placeholder="mildtomato" {...field} />
// </FormControl_Shadcn_>
// </FormItemLayout>
// )}
// />
// <Button size="small" type="primary" htmlType="submit">
// Submit
// </Button>
// </form>
// </Form_Shadcn_>
// )
// },
// args: {
// layout: 'horizontal',
// label: 'Username',
// description: 'this is the description',
// labelOptional: 'optional',
// },
// }
// export const withCalendar: Story = {
// render: function Render(args) {
// const FormSchema = z.object({
// dob: z.date({
// required_error: 'A date of birth is required.',
// }),
// })
// const form = useForm<z.infer<typeof FormSchema>>({
// resolver: zodResolver(FormSchema),
// })
// // 2. Define a submit handler.
// function onSubmit(values: z.infer<typeof FormSchema>) {
// // Do something with the form values.
// // ✅ This will be type-safe and validated.
// console.log(values)
// // action('form form.handleSubmit(onSubmit)')(values)
// }
// return (
// <Form_Shadcn_ {...form}>
// <form className="w-[280px] flex flex-col gap-8" onSubmit={form.handleSubmit(onSubmit)}>
// <FormField_Shadcn_
// name="dob"
// control={form.control}
// render={({ field }) => (
// <FormItemLayout {...args}>
// <Popover_Shadcn_>
// <PopoverTrigger_Shadcn_ asChild>
// <FormControl_Shadcn_>
// <Button
// icon={<CalendarIcon className="text-foreground-muted" size={16} />}
// type={'default'}
// className={cn(!field.value && 'text-muted-foreground', 'justify-start')}
// >
// {field.value ? format(field.value, 'PPP') : <span>Pick a date</span>}
// </Button>
// </FormControl_Shadcn_>
// </PopoverTrigger_Shadcn_>
// <PopoverContent_Shadcn_ className="w-auto p-0" align="start">
// <Calendar
// mode="single"
// selected={field.value}
// onSelect={field.onChange}
// disabled={(date) => date > new Date() || date < new Date('1900-01-01')}
// initialFocus
// />
// </PopoverContent_Shadcn_>
// </Popover_Shadcn_>
// </FormItemLayout>
// )}
// />
// <Button size="small" type="primary" htmlType="submit">
// Submit
// </Button>
// </form>
// </Form_Shadcn_>
// )
// },
// args: {
// layout: 'vertical',
// label: 'Date of birth',
// description: 'Your date of birth is used to calculate your age.',
// labelOptional: 'optional',
// },
// }

357
packages/ui-patterns/form/FormLayout.tsx
View File

@@ -1,357 +0,0 @@
import { zodResolver } from '@hookform/resolvers/zod'
import { Box, FileWarning } from 'lucide-react'
import { useForm } from 'react-hook-form'
import {
Badge,
Button,
Checkbox_Shadcn_,
Form_Shadcn_,
FormControl_Shadcn_,
FormField_Shadcn_,
RadioGroup_Shadcn_,
RadioGroupItem_Shadcn_,
Select_Shadcn_,
SelectContent_Shadcn_,
SelectItem_Shadcn_,
SelectTrigger_Shadcn_,
SelectValue_Shadcn_,
Separator,
Switch,
} from 'ui'
import { z } from 'zod'
import { Input } from '../DataInputs/Input'
import { InfoTooltip } from '../info-tooltip'
import { FormItemLayout } from './FormItemLayout/FormItemLayout'
/**
* This is helper file for the FormLayout stories.
*/
const items = [
{
id: 'recents',
label: 'Recents',
},
{
id: 'home',
label: 'Home',
},
{
id: 'applications',
label: 'Applications',
},
{
id: 'desktop',
label: 'Desktop',
},
{
id: 'downloads',
label: 'Downloads',
},
{
id: 'documents',
label: 'Documents',
},
] as const
export const Page = () => {
const FormSchema = z.object({
username: z.string().min(2, {
message: 'Username must be at least 2 characters.',
}),
kevins_input: z.string().min(6, {
message: 'Username must be at least 6 characters.',
}),
email: z
.string({
required_error: 'Please select an email to display.',
})
.email(),
consistent_settings: z.boolean().default(false).optional(),
switch_option: z.boolean().default(false).optional(),
items: z.array(z.string()).refine((value) => value.some((item) => item), {
message: 'You have to select at least one item.',
}),
type: z.enum(['all', 'mentions', 'none'], {
required_error: 'You need to select a notification type.',
}),
})
const form = useForm<z.infer<typeof FormSchema>>({
resolver: zodResolver(FormSchema),
defaultValues: {
username: '',
items: ['recents', 'home'],
},
})
function onSubmit(data: z.infer<typeof FormSchema>) {
console.log(data)
}
const UserIcon = () => {
return (
<div>
<img
className="relative h-4 w-4 rounded-full"
src="https://avatars.githubusercontent.com/u/8291514?v=4"
/>
</div>
)
}
return (
<Form_Shadcn_ {...form}>
<form onSubmit={form.handleSubmit(onSubmit)} className="w-[420px] flex flex-col gap-8">
<div>
<h1 className="text-foreground">Welcome</h1>
<p className="text-foreground-light">Please fill in the following</p>
</div>
<Separator />
<FormField_Shadcn_
control={form.control}
name="username"
render={({ field }) => (
<FormItemLayout
label="Function name"
description="This is your public display name."
layout="horizontal"
labelOptional="Optional"
afterLabel={<InfoTooltip side="right">You can also rename this later.</InfoTooltip>}
>
<FormControl_Shadcn_>
<Input
icon={<Box strokeWidth={1.5} size={16} />}
placeholder="mildtomato"
{...field}
/>
</FormControl_Shadcn_>
</FormItemLayout>
)}
/>
<Separator />
<FormField_Shadcn_
control={form.control}
name="switch_option"
render={({ field }) => (
<FormItemLayout
afterLabel="Switch"
label="Use ./supabase directory for everything"
description="This is an explanation."
layout="flex"
>
<FormControl_Shadcn_>
<Switch checked={field.value} onCheckedChange={field.onChange} />
</FormControl_Shadcn_>
</FormItemLayout>
)}
/>
<Separator />
<FormField_Shadcn_
control={form.control}
name="email"
render={({ field }) => (
<FormItemLayout
label="Choose user"
description="This is your public display name."
layout="horizontal"
>
<Select_Shadcn_ onValueChange={field.onChange} defaultValue={field.value}>
<FormControl_Shadcn_ className="w-full">
<SelectTrigger_Shadcn_ className="w-full">
<SelectValue_Shadcn_
placeholder="Select a verified email"
className="flex gap-2"
/>
</SelectTrigger_Shadcn_>
</FormControl_Shadcn_>
<SelectContent_Shadcn_>
<SelectItem_Shadcn_ value="m@example.com">
<div className="flex gap-2 items-center">
<UserIcon />
<span>m@example.com</span>
</div>
</SelectItem_Shadcn_>
<SelectItem_Shadcn_ value="m@google.com" className="flex gap-2">
<div className="flex gap-2 items-center">
<UserIcon />
UserIconm@google.com
</div>
</SelectItem_Shadcn_>
<SelectItem_Shadcn_ value="m@support.com" className="flex gap-2">
<div className="flex gap-2 items-center">
<UserIcon />
m@support.com
</div>
</SelectItem_Shadcn_>
</SelectContent_Shadcn_>
</Select_Shadcn_>
</FormItemLayout>
)}
/>
<Separator />
<FormField_Shadcn_
control={form.control}
name="kevins_input"
render={({ field }) => (
<FormItemLayout
afterLabel="Kevins input"
label="Kevins input"
description="This is your public display name."
layout="vertical"
labelOptional="Optional"
>
<FormControl_Shadcn_>
<Input
icon={<Box strokeWidth={1.5} size={16} />}
placeholder="Needs to be 6 long"
{...field}
/>
</FormControl_Shadcn_>
</FormItemLayout>
)}
/>
<Separator />
<FormField_Shadcn_
control={form.control}
name="consistent_settings"
render={({ field }) => (
<FormItemLayout
afterLabel={
<Badge variant={'destructive'} className="flex gap-1">
<FileWarning size={14} strokeWidth={1.5} className="text-destructive-500" />
Danger zone!
</Badge>
}
label="Use consistent settings"
description="This is your public display name."
layout="flex"
>
<FormControl_Shadcn_>
<Checkbox_Shadcn_ checked={field.value} onCheckedChange={field.onChange} />
</FormControl_Shadcn_>
</FormItemLayout>
)}
/>
<Separator />
<FormField_Shadcn_
control={form.control}
name="items"
render={() => (
<FormItemLayout
label="Sidebar"
description="Select the items you want to display in the sidebar."
layout="horizontal"
afterLabel={<InfoTooltip side="right">Please give me info</InfoTooltip>}
>
{/* <div className="mb-4">
<FormLabel className="text-base">Sidebar</FormLabel>
<FormDescription>
Select the items you want to display in the sidebar.
</FormDescription>
</div> */}
{items.map((item) => (
<FormField_Shadcn_
key={item.id}
control={form.control}
name="items"
render={({ field }) => {
return (
<FormItemLayout
key={item.id}
className="flex flex-row items-start space-x-3 space-y-0"
label={item.label}
layout="flex"
hideMessage
>
<FormControl_Shadcn_>
<Checkbox_Shadcn_
checked={field.value?.includes(item.id)}
onCheckedChange={(checked) => {
return checked
? field.onChange([...field.value, item.id])
: field.onChange(field.value?.filter((value) => value !== item.id))
}}
/>
</FormControl_Shadcn_>
</FormItemLayout>
)
}}
/>
))}
{/* <FormMessage /> */}
</FormItemLayout>
)}
/>
<FormField_Shadcn_
control={form.control}
name="type"
render={({ field }) => (
<FormItemLayout
className="space-y-3"
label="Notify me about..."
description="I am descript"
layout="horizontal"
>
<FormControl_Shadcn_>
<RadioGroup_Shadcn_
onValueChange={field.onChange}
defaultValue={field.value}
className="flex flex-col space-y-1"
>
<FormItemLayout
className="flex items-center space-x-3 space-y-0"
label="All new messages"
layout="flex"
hideMessage
>
<FormControl_Shadcn_>
<RadioGroupItem_Shadcn_ value="all" />
</FormControl_Shadcn_>
</FormItemLayout>
<FormItemLayout
className="flex items-center space-x-3 space-y-0"
label="Direct messages and mentions"
layout="flex"
hideMessage
>
<FormControl_Shadcn_>
<RadioGroupItem_Shadcn_ value="mentions" />
</FormControl_Shadcn_>
</FormItemLayout>
<FormItemLayout
className="flex items-center space-x-3 space-y-0"
label="Nothing"
layout="flex"
hideMessage
>
<FormControl_Shadcn_>
<RadioGroupItem_Shadcn_ value="none" />
</FormControl_Shadcn_>
</FormItemLayout>
</RadioGroup_Shadcn_>
</FormControl_Shadcn_>
</FormItemLayout>
)}
/>
<Separator />
<div className="flex flex-row w-full justify-end">
<Button htmlType="submit">Submit</Button>
</div>
</form>
</Form_Shadcn_>
)
}

37
packages/ui-patterns/form/Page.stories.tsx
View File

@@ -1,37 +0,0 @@
// import { within, userEvent, expect } from '@storybook/test'
import { TooltipProvider_Shadcn_ } from 'ui'
import { Page } from './FormLayout'
export default {
title: 'Form Examples/One',
component: Page,
parameters: {
// More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
layout: 'centered',
},
decorators: [
(Story: any) => {
return (
<TooltipProvider_Shadcn_>
<Story />
</TooltipProvider_Shadcn_>
)
},
],
}
export const StateOne = {}
// More on interaction testing: https://storybook.js.org/docs/writing-tests/interaction-testing
// export const LoggedIn = {
// play: async ({ canvasElement }) => {
// const canvas = within(canvasElement)
// const loginButton = canvas.getByRole('button', { name: /Log in/i })
// await expect(loginButton).toBeInTheDocument()
// await userEvent.click(loginButton)
// await expect(loginButton).not.toBeInTheDocument()
// const logoutButton = canvas.getByRole('button', { name: /Log out/i })
// await expect(logoutButton).toBeInTheDocument()
// },
// }

37
packages/ui-patterns/form/Page2.stories.tsx
View File

@@ -1,37 +0,0 @@
// import { within, userEvent, expect } from '@storybook/test'
import { TooltipProvider_Shadcn_ } from 'ui'
import { Page } from './FormLayout2'
export default {
title: 'Form Examples/Side Panel Function Create',
component: Page,
parameters: {
// More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
layout: 'centered',
},
decorators: [
(Story: any) => {
return (
<TooltipProvider_Shadcn_>
<Story />
</TooltipProvider_Shadcn_>
)
},
],
}
export const StateOne = {}
// More on interaction testing: https://storybook.js.org/docs/writing-tests/interaction-testing
// export const LoggedIn = {
// play: async ({ canvasElement }) => {
// const canvas = within(canvasElement)
// const loginButton = canvas.getByRole('button', { name: /Log in/i })
// await expect(loginButton).toBeInTheDocument()
// await userEvent.click(loginButton)
// await expect(loginButton).not.toBeInTheDocument()
// const logoutButton = canvas.getByRole('button', { name: /Log out/i })
// await expect(logoutButton).toBeInTheDocument()
// },
// }

210
packages/ui-patterns/lib/transformSource.tsx
View File

@@ -1,210 +0,0 @@
// import { StoryContext } from '@storybook/react'
// export function transformSourceForm(code: string, StoryContext: StoryContext) {
// let _code = code
// // _code = _code.replace('<FormProvider', '<Form')
// _code = _code.replace(
// `<FormProvider
// clearErrors={() => {}}
// control={{
// _defaultValues: {
// username: ''
// },
// _executeSchema: () => {},
// _fields: {},
// _formState: {
// dirtyFields: {},
// errors: {},
// isDirty: false,
// isLoading: false,
// isSubmitSuccessful: false,
// isSubmitted: false,
// isSubmitting: false,
// isValid: false,
// isValidating: false,
// submitCount: 0,
// touchedFields: {}
// },
// _formValues: {
// username: ''
// },
// _getDirty: () => {},
// _getFieldArray: () => {},
// _getWatch: () => {},
// _names: {
// array: {},
// mount: {},
// unMount: {},
// watch: {}
// },
// _options: {
// defaultValues: {
// username: ''
// },
// mode: 'onSubmit',
// reValidateMode: 'onChange',
// resolver: () => {},
// shouldFocusError: true
// },
// _proxyFormState: {
// dirtyFields: false,
// errors: false,
// isDirty: false,
// isValid: false,
// isValidating: false,
// touchedFields: false
// },
// _removeUnmounted: () => {},
// _reset: () => {},
// _resetDefaultValues: () => {},
// _state: {
// action: false,
// mount: false,
// watch: false
// },
// _subjects: {
// array: {
// next: () => {},
// observers: [],
// subscribe: () => {},
// unsubscribe: () => {}
// },
// state: {
// next: () => {},
// observers: [],
// subscribe: () => {},
// unsubscribe: () => {}
// },
// values: {
// next: () => {},
// observers: [],
// subscribe: () => {},
// unsubscribe: () => {}
// }
// },
// _updateDisabledField: () => {},
// _updateFieldArray: () => {},
// _updateFormState: () => {},
// _updateValid: () => {},
// getFieldState: () => {},
// handleSubmit: () => {},
// register: () => {},
// setError: () => {},
// unregister: () => {}
// }}
// formState={{
// defaultValues: {
// username: ''
// }
// }}
// getFieldState={() => {}}
// getValues={() => {}}
// handleSubmit={() => {}}
// register={() => {}}
// reset={() => {}}
// resetField={() => {}}
// setError={() => {}}
// setFocus={() => {}}
// setValue={() => {}}
// trigger={() => {}}
// unregister={() => {}}
// watch={() => {}}
// >`,
// `<Form_shadcn_ {...form}>`
// )
// _code = _code.replace(
// `
// control={{
// _defaultValues: {
// username: ''
// },
// _executeSchema: () => {},
// _fields: {},
// _formState: {
// dirtyFields: {},
// errors: {},
// isDirty: false,
// isLoading: false,
// isSubmitSuccessful: false,
// isSubmitted: false,
// isSubmitting: false,
// isValid: false,
// isValidating: false,
// submitCount: 0,
// touchedFields: {}
// },
// _formValues: {
// username: ''
// },
// _getDirty: () => {},
// _getFieldArray: () => {},
// _getWatch: () => {},
// _names: {
// array: {},
// mount: {},
// unMount: {},
// watch: {}
// },
// _options: {
// defaultValues: {
// username: ''
// },
// mode: 'onSubmit',
// reValidateMode: 'onChange',
// resolver: () => {},
// shouldFocusError: true
// },
// _proxyFormState: {
// defaultValues: 'all',
// dirtyFields: false,
// errors: false,
// isDirty: false,
// isValid: false,
// isValidating: false,
// touchedFields: false
// },
// _removeUnmounted: () => {},
// _reset: () => {},
// _resetDefaultValues: () => {},
// _state: {
// action: false,
// mount: false,
// watch: false
// },
// _subjects: {
// array: {
// next: () => {},
// observers: [],
// subscribe: () => {},
// unsubscribe: () => {}
// },
// state: {
// next: () => {},
// observers: [],
// subscribe: () => {},
// unsubscribe: () => {}
// },
// values: {
// next: () => {},
// observers: [],
// subscribe: () => {},
// unsubscribe: () => {}
// }
// },
// _updateDisabledField: () => {},
// _updateFieldArray: () => {},
// _updateFormState: () => {},
// _updateValid: () => {},
// getFieldState: () => {},
// handleSubmit: () => {},
// register: () => {},
// setError: () => {},
// unregister: () => {}
// }}`,
// `
// control={form.control}`
// )
// _code = _code.replace('</FormProvider>', '</Form_Shadcn_>')
// return _code
// }

15
packages/ui/.babelrc.json
View File

@@ -1,15 +0,0 @@
{
"presets": [
[
"@babel/preset-env",
{
"targets": {
"chrome": "58"
}
}
],
"@babel/preset-typescript",
"@babel/preset-react"
],
"plugins": []
}

1
packages/ui/README.tokens.md
View File

@@ -1 +0,0 @@
# tokens

2
packages/ui/components.json
View File

@@ -4,7 +4,7 @@
"rsc": false,
"tailwind": {
"config": "./../config/tailwind-shadcn.config.js",
"css": ".storybook/shadcn.css",
"css": "./build/css/source/global.css",
"baseColor": "gray",
"cssVariables": true
},

5
packages/ui/package.json
View File

@@ -94,11 +94,6 @@
"zod": "^3.22.3"
},
"devDependencies": {
"@babel/plugin-syntax-flow": "^7.21.4",
"@babel/preset-env": "^7.21.4",
"@babel/preset-flow": "^7.21.4",
"@babel/preset-react": "^7.18.6",
"@babel/preset-typescript": "^7.21.4",
"@ctrl/tinycolor": "^3.4.0",
"@testing-library/jest-dom": "^6.1.3",
"@testing-library/react": "^14.0.0",

1
packages/ui/postcss.config.js
View File

@@ -1 +0,0 @@
module.exports = require('config/postcss.config')

184
packages/ui/src/components/Accordion/Accordion.stories.tsx
View File

@@ -1,184 +0,0 @@
import React from 'react'
import Accordion, { AccordionProps } from './Accordion'
import { Badge } from '../Badge'
export default {
title: 'Displays/Accordion',
component: Accordion,
}
export const OneItem = (args: AccordionProps) => (
<Accordion {...args} justified={false}>
<Accordion.Item
header={
<>
<span className="text-foreground-muted group-hover:text-foreground">
Title of the thing
</span>
<Badge>Test badge</Badge>
</>
}
id="first"
>
<span className="text-foreground-muted">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur amet labore.
</span>
</Accordion.Item>
</Accordion>
)
export const MultipleItems = (args: AccordionProps) => (
<Accordion {...args} openBehaviour="multiple">
<Accordion.Item
header={
<span className="text-foreground-muted group-hover:text-foreground">
Title of the thing
</span>
}
id={'1'}
>
<span className="text-foreground-muted">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur amet labore.
</span>
</Accordion.Item>
<Accordion.Item
header={
<span className="text-foreground-muted group-hover:text-foreground">
Title of the thing
</span>
}
id={'2'}
>
<span className="text-foreground-muted">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur amet labore.
</span>
</Accordion.Item>
<Accordion.Item
header={
<span className="text-foreground-muted group-hover:text-foreground">
Title of the thing
</span>
}
id={'3'}
>
<span className="text-foreground-muted">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur amet labore.
</span>
</Accordion.Item>
<Accordion.Item
header={
<span className="text-foreground-muted group-hover:text-foreground">
Title of the thing
</span>
}
id={'4'}
>
<span className="text-foreground-muted">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur amet labore.
</span>
</Accordion.Item>
</Accordion>
)
export const Bordered = (args: AccordionProps) => (
<Accordion {...args}>
<Accordion.Item
header={
<span className="text-foreground-muted group-hover:text-foreground">
Title of the thing
</span>
}
id={'1'}
>
<span className="text-foreground-muted">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur amet labore.
</span>
</Accordion.Item>
<Accordion.Item
header={
<span className="text-foreground-muted group-hover:text-foreground">
Title of the thing
</span>
}
id={'2'}
>
<span className="text-foreground-muted">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur amet labore.
</span>
</Accordion.Item>
<Accordion.Item
header={
<span className="text-foreground-muted group-hover:text-foreground">
Title of the thing
</span>
}
id={'3'}
>
<span className="text-foreground-muted">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur amet labore.
</span>
</Accordion.Item>
<Accordion.Item
header={
<span className="text-foreground-muted group-hover:text-foreground">
Title of the thing
</span>
}
id={'4'}
>
<span className="text-foreground-muted">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur amet labore.
</span>
</Accordion.Item>
</Accordion>
)
Bordered.args = {
type: 'bordered',
}
export const LeftAlignedChevron = (args: AccordionProps) => (
<Accordion {...args} justified={false} chevronAlign="left">
<Accordion.Item
header={
<>
<span className="text-foreground-muted group-hover:text-foreground">First item</span>
<Badge>Test badge</Badge>
</>
}
id="first"
>
<span className="text-foreground-muted">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur amet labore.
</span>
</Accordion.Item>
<Accordion.Item
header={
<>
<span className="text-foreground-muted group-hover:text-foreground">Second item</span>
</>
}
id="second"
>
<span className="text-foreground-muted">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur amet labore.
</span>
</Accordion.Item>
</Accordion>
)
// export const withDefaultActive = Multiple.bind({})
// withDefaultActive.args = {
// defaultActiveId: [1],
// }
// export const withIconLeft = Multiple.bind({})
// withIconLeft.args = {
// iconPosition: 'left',
// }
// export const withCustomIcon = Multiple.bind({})
// withCustomIcon.args = {
// icon: <IconArrowUp />,
// }

135
packages/ui/src/components/Alert/Alert.stories.tsx
View File

@@ -1,135 +0,0 @@
import React from 'react'
import { Alert, AlertProps } from './Alert'
export default {
title: 'Displays/Alerts',
component: Alert,
}
export const Neutral = (args: AlertProps) => (
<Alert {...args}>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur amet labore.
</Alert>
)
export const Success = (args: AlertProps) => (
<Alert {...args}>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur amet labore.
</Alert>
)
export const SuccessWithIcon = (args: AlertProps) => (
<Alert {...args}>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur amet labore.
</Alert>
)
export const Danger = (args: AlertProps) => (
<Alert {...args}>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur amet labore.
</Alert>
)
export const DangerWithIcon = (args: AlertProps) => (
<Alert {...args}>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur amet labore.
</Alert>
)
export const Info = (args: AlertProps) => (
<Alert {...args}>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur amet labore.
</Alert>
)
export const InfoWithIcon = (args: AlertProps) => (
<Alert {...args}>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur amet labore.
</Alert>
)
export const Warning = (args: AlertProps) => (
<Alert {...args}>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur amet labore.
</Alert>
)
export const WarningWithIcon = (args: AlertProps) => (
<Alert {...args}>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur amet labore.
</Alert>
)
export const Closable = (args: AlertProps) => (
<Alert {...args}>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur amet labore.
</Alert>
)
export const WithAction = (args: AlertProps) => (
<Alert {...args}>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur amet labore.
</Alert>
)
Neutral.args = {
title: 'Success alert with icon',
withIcon: true,
}
Success.args = {
title: 'Success alert',
variant: 'success',
}
SuccessWithIcon.args = {
title: 'Success alert with icon',
variant: 'success',
withIcon: true,
}
Danger.args = {
title: 'Danger alert',
variant: 'danger',
}
DangerWithIcon.args = {
title: 'Danger alert with icon',
variant: 'danger',
withIcon: true,
}
Info.args = {
title: 'Info alert',
variant: 'info',
}
InfoWithIcon.args = {
title: 'Info alert with icon',
variant: 'info',
withIcon: true,
}
Warning.args = {
title: 'Warning alert',
variant: 'warning',
}
WarningWithIcon.args = {
title: 'Warning alert with icon',
variant: 'warning',
withIcon: true,
}
Closable.args = {
title: 'Closable alert',
closable: true,
}
WithAction.args = {
title: 'Alert with action',
variant: 'warning',
withIcon: true,
actions: <div>Hello</div>,
}

18
packages/ui/src/components/Breadcrumb/Breadcrumb.stories.tsx
View File

@@ -1,18 +0,0 @@
import React from 'react'
import { Breadcrumb } from './../../../'
export default {
title: 'Navigation/Breadcrumb',
component: Breadcrumb,
}
export const Default = ({ children, ...args }: any) => <Breadcrumb {...args}>{children}</Breadcrumb>
Default.args = {
children: [
<Breadcrumb.Item>Brothers</Breadcrumb.Item>,
<Breadcrumb.Item>Grimm</Breadcrumb.Item>,
<Breadcrumb.Item active>Hansel</Breadcrumb.Item>,
<Breadcrumb.Item>Gretel</Breadcrumb.Item>,
],
}

176
packages/ui/src/components/Button/Button.stories.tsx
View File

@@ -1,176 +0,0 @@
// import React from 'react'
// import { Button } from './../Button'
// import type { Meta, StoryObj } from '@storybook/react'
// import { ButtonProps } from './../Button'
// import { IconActivity } from '../Icon/icons/IconActivity'
// const meta: Meta<typeof Button> = {
// /* 👇 The title prop is optional.
// * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
// * to learn how to generate automatic titles
// */
// title: 'Old Primitives/Button',
// component: Button,
// }
// export default meta
// type Story = StoryObj<typeof Button>
// /*
// *👇 Render functions are a framework specific feature to allow you control on how the component renders.
// * See https://storybook.js.org/docs/react/api/csf
// * to learn how to use render functions.
// */
// export const Primary = {
// args: {
// children: 'Hello world',
// type: 'primary',
// },
// render: ({ children, type }: ButtonProps) => <Button type={type}>{children}</Button>,
// }
// export const Default = {
// args: {
// children: 'Hello world',
// type: 'default',
// },
// render: ({ children, type }: ButtonProps) => <Button type={type}>{children}</Button>,
// }
// export const Alternative = {
// args: {
// children: 'Hello world',
// type: 'alternative',
// },
// render: ({ children, type }: ButtonProps) => <Button type={type}>{children}</Button>,
// }
// export const Outline = {
// args: {
// children: 'Hello world',
// type: 'outline',
// },
// render: ({ children, type }: ButtonProps) => <Button type={type}>{children}</Button>,
// }
// export const Secondary = {
// args: {
// children: 'Hello world',
// type: 'secondary',
// },
// render: ({ children, type }: ButtonProps) => <Button type={type}>{children}</Button>,
// }
// export const Dashed = {
// args: {
// children: 'Hello world',
// type: 'dashed',
// },
// render: ({ children, type }: ButtonProps) => <Button type={type}>{children}</Button>,
// }
// export const Link = {
// args: {
// children: 'Hello world',
// type: 'link',
// },
// render: ({ children, type }: ButtonProps) => <Button type={type}>{children}</Button>,
// }
// export const Text = {
// args: {
// children: 'Hello world',
// type: 'text',
// },
// render: ({ children, type }: ButtonProps) => <Button type={type}>{children}</Button>,
// }
// export const Danger = {
// args: {
// children: 'Hello world',
// type: 'danger',
// },
// render: ({ children, type }: ButtonProps) => <Button type={type}>{children}</Button>,
// }
// export const Block = {
// args: {
// children: 'Hello world',
// type: 'primary',
// block: true,
// },
// render: ({ children, type, block }: ButtonProps) => (
// <Button block type={type}>
// {children}
// </Button>
// ),
// }
// export const Disabled = {
// args: {
// children: 'Hello world',
// type: 'primary',
// disabled: true,
// },
// render: ({ children, type, disabled }: ButtonProps) => (
// <Button disabled type={type}>
// {children}
// </Button>
// ),
// }
// export const Sizes = {
// args: {
// children: 'Change the size below',
// type: 'primary',
// size: 'large',
// },
// render: ({ children, type, size }: ButtonProps) => (
// <Button size={size} type={type}>
// {children}
// </Button>
// ),
// }
// export const LeftIcon = {
// args: {
// children: 'Change the size below',
// type: 'default',
// icon: <IconActivity />,
// },
// render: ({ children, type, icon }: ButtonProps) => (
// <Button icon={icon} type={type}>
// {children}
// </Button>
// ),
// }
// export const RightIcon = {
// args: {
// children: 'Change the size below',
// type: 'primary',
// iconRight: <IconActivity />,
// },
// render: ({ children, type, iconRight }: ButtonProps) => (
// <Button iconRight={iconRight} type={type}>
// {children}
// </Button>
// ),
// }
// export const Loading = {
// args: {
// children: 'Change the size below',
// type: 'primary',
// loading: true,
// },
// render: ({ children, type, loading }: ButtonProps) => (
// <Button loading={loading} type={type}>
// {children}
// </Button>
// ),
// }

61
packages/ui/src/components/Card/Card.stories.tsx
View File

@@ -1,61 +0,0 @@
import React from 'react'
import Typography from '../Typography'
// import { AutoForm } from 'uniforms'
import { Card } from './'
export default {
title: 'Displays/Card',
component: Card,
}
export const Default = (args: any) => (
<Card {...args}>
<Typography.Title level={5}>Card content</Typography.Title>
<Typography.Title level={5}>Card content</Typography.Title>
<Typography.Title level={5}>Card content</Typography.Title>
</Card>
)
export const withCover = (args: any) => (
<Card {...args}>
<Typography.Text type="secondary">Sub title here</Typography.Text>
<Typography.Title level={3}>To Do List with Vue.JS</Typography.Title>
</Card>
)
export const withMeta = (args: any) => (
<Card {...args}>
<Card.Meta title={'To Do List with Vue.JS'} description={'To Do List with Vue.JS'}/>
</Card>
)
export const withHover = (args: any) => (
<Card {...args}>
<Card.Meta title={'To Do List with Vue.JS'} description={'To Do List with Vue.JS'}/>
</Card>
)
Default.args = {
title: 'I am a title',
titleExtra: <Typography.Link>Learn more</Typography.Link>,
}
withCover.args = {
cover: (
<img
className="h-64 w-full object-cover"
src={'https://supabase.io/new/images/case-study-monitoro.jpg'}
alt={'title'}
/>
),
}
withMeta.args = {
title: 'title is here'
}
withHover.args = {
title: 'This card can hover',
hoverable: true
}

128
packages/ui/src/components/Checkbox/Checkbox.stories.tsx
View File

@@ -1,128 +0,0 @@
import { Checkbox } from '.'
export default {
title: 'Data Input/Checkbox',
component: Checkbox,
}
export const Default = (args: any) => <Checkbox {...args} />
export const withGroup = (args: any) => (
<Checkbox.Group {...args}>
<Checkbox
id="checkbox1"
name="checkbox1"
label="JavaScript"
description="JavaScript, often abbreviated as JS, is a programming language that conforms to the ECMAScript specification."
/>
<Checkbox
id="checkbox2"
name="checkbox2"
label="Typescript"
description="TypeScript is a programming language developed and maintained by Microsoft. It is a strict syntactical superset of JavaScript and adds optional static typing to the language. "
/>
<Checkbox
id="checkbox3"
name="checkbox3"
label="React"
description="React is an open-source, front end, JavaScript library for building user interfaces or UI components. It is maintained by Facebook and a community of individual developers and companies."
/>
</Checkbox.Group>
)
export const withGroupHorizontal = (args: any) => (
<Checkbox.Group {...args}>
<Checkbox
id="checkbox1"
name="checkbox1"
label="JavaScript"
description="JavaScript, often abbreviated as JS, is a programming language that conforms to the ECMAScript specification."
/>
<Checkbox
id="checkbox2"
name="checkbox2"
label="Typescript"
description="TypeScript is a programming language developed and maintained by Microsoft. It is a strict syntactical superset of JavaScript and adds optional static typing to the language. "
/>
<Checkbox
id="checkbox3"
name="checkbox3"
label="React"
description="React is an open-source, front end, JavaScript library for building user interfaces or UI components. It is maintained by Facebook and a community of individual developers and companies."
/>
</Checkbox.Group>
)
export const size = (args: any) => (
<Checkbox.Group {...args}>
<Checkbox
id="checkbox1"
name="checkbox1"
label="JavaScript"
description="JavaScript, often abbreviated as JS, is a programming language that conforms to the ECMAScript specification."
/>
<Checkbox
id="checkbox2"
name="checkbox2"
label="Typescript"
description="TypeScript is a programming language developed and maintained by Microsoft. It is a strict syntactical superset of JavaScript and adds optional static typing to the language. "
/>
<Checkbox
id="checkbox3"
name="checkbox3"
label="React"
description="React is an open-source, front end, JavaScript library for building user interfaces or UI components. It is maintained by Facebook and a community of individual developers and companies."
/>
</Checkbox.Group>
)
export const withBeforeAndAfterLabels = (args: any) => <Checkbox.Group {...args} />
Default.args = {
label: 'This is the label',
description: 'This is the description',
}
withGroup.args = {
id: 'checkobox-q',
label: 'This is the label',
description: 'This is the description',
disabled: false,
size: 'medium',
className: 'font-sans',
layout: 'vertical',
}
withGroupHorizontal.args = {
id: 'checkobox-q',
label: 'This is the label',
description: 'This is the description',
disabled: false,
className: 'font-sans',
layout: 'horizontal',
}
size.args = {
id: 'checkobox-q',
label: 'Control the size of the checkboxes',
description: 'You can add a size just the Group component and it will affect the children',
disabled: false,
className: 'font-sans',
layout: 'horizontal',
size: 'tiny',
}
withBeforeAndAfterLabels.args = {
label: 'Label',
beforeLabel: 'Before : ',
afterLabel: ' : After',
options: [
{
label: 'Label',
beforeLabel: 'Before : ',
afterLabel: ' : After',
description: 'Description',
},
],
className: 'font-sans',
}

62
packages/ui/src/components/Collapsible/Collapsible.stories.tsx
View File

@@ -1,62 +0,0 @@
import { Collapsible } from './'
import { IconChevronUp } from '../../components/Icon/icons/IconChevronUp'
import { Button } from './../Button'
export default {
title: 'Displays/Collapsible',
component: Collapsible,
}
export const Default = (args: any) => {
return (
<>
<Collapsible className="-space-y-px">
<Collapsible.Trigger asChild>
<button
type="button"
className="group text-foreground flex justify-between items-center w-full bg-surface-100 rounded border border-default p-3"
>
<div className="flex gap-2 items-center">
<IconChevronUp className="transition data-open-parent:rotate-0 data-closed-parent:rotate-180" />
<Button
onClick={(e) => {
e.stopPropagation()
}}
>
Example button
</Button>
</div>
</button>
</Collapsible.Trigger>
<Collapsible.Content>
<div className="group text-foreground flex justify-between items-center w-full bg-surface-100 rounded border border-default p-3">
<h3 className="text-tomato-900">I am content</h3>
<h3 className="text-tomato-900">I am content</h3>
<h3 className="text-tomato-900">I am content</h3>
<h3 className="text-tomato-900">I am content</h3>
</div>
</Collapsible.Content>
</Collapsible>
<Collapsible>
<Collapsible.Trigger asChild>
<button type="button">Click me to expand</button>
</Collapsible.Trigger>
<Collapsible.Content>
<div>
<h3 className="text-tomato-900">I am content</h3>
<h3 className="text-tomato-900">I am content</h3>
<h3 className="text-tomato-900">I am content</h3>
<h3 className="text-tomato-900">I am content</h3>
</div>
</Collapsible.Content>
</Collapsible>
</>
)
}
Default.args = {
placeholder: 'Type text here ...',
disabled: false,
label: 'Name',
layout: 'vertical',
}

157
packages/ui/src/components/ContextMenu/ContextMenu.stories.tsx
View File

@@ -1,157 +0,0 @@
import React, { useState } from 'react'
import { Button } from '../Button'
import { Divider } from '../Divider'
import { IconSettings } from '../Icon/icons/IconSettings'
import { IconLogOut } from '../Icon/icons/IconLogOut'
import { ContextMenu } from '.'
import { IconLogIn } from '../Icon/icons/IconLogIn'
export default {
title: 'Navigation/ContextMenu',
component: ContextMenu,
}
const triggerArea = (
<div
style={{
background: 'gray',
width: '280px',
height: '180px',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
}}
>
<span>Right click this area</span>
</div>
)
export const Default = (args: any) => (
<div style={{ margin: '0 auto', minHeight: '420px', marginTop: '220px' }}>
<ContextMenu
{...args}
overlay={[
<ContextMenu.Misc>
<div>
<span className="block">Signed in as </span>
<span>tom@example.com </span>
</div>
</ContextMenu.Misc>,
<Divider light />,
<ContextMenu.Label>Group label</ContextMenu.Label>,
<ContextMenu.Item onClick={() => console.log('clicked')}>Account</ContextMenu.Item>,
<ContextMenu.Item>Settings</ContextMenu.Item>,
<Divider light />,
<ContextMenu.Item icon={<IconLogIn size="tiny" />}>Log out</ContextMenu.Item>,
]}
>
{triggerArea}
</ContextMenu>
</div>
)
Default.args = {}
export const doNotcloseOverlay = (args: any) => (
<div style={{ margin: '0 auto', minHeight: '420px', marginTop: '220px' }}>
<ContextMenu
{...args}
overlay={[
<ContextMenu.Misc>
<span>Signed in as </span>
<span>tom@example.com </span>
</ContextMenu.Misc>,
<Divider light />,
<ContextMenu.Item>Account</ContextMenu.Item>,
<ContextMenu.Item>Settings</ContextMenu.Item>,
<ContextMenu.Item>
<Button icon={<IconLogOut />}>Log out</Button>
</ContextMenu.Item>,
]}
>
{triggerArea}
</ContextMenu>
</div>
)
doNotcloseOverlay.args = {}
export const withCustomStyles = (args: any) => (
<div
style={{
margin: '0 auto',
minHeight: '420px',
marginTop: '220px',
marginLeft: '400px',
}}
>
<ContextMenu
overlayStyle={{ minWidth: '500px' }}
placement="bottomRight"
{...args}
overlay={[
<ContextMenu.Item>
<span>Signed in as </span>
<span>tom@example.com </span>
</ContextMenu.Item>,
<Divider light />,
<ContextMenu.Item>Account</ContextMenu.Item>,
<ContextMenu.Item>Settings</ContextMenu.Item>,
<Divider light />,
<ContextMenu.Item>
<Button type="default" icon={<IconLogOut />}>
Log out
</Button>
</ContextMenu.Item>,
]}
>
{triggerArea}
</ContextMenu>
</div>
)
withCustomStyles.args = {}
export const Checkbox = (args: any) => {
const [checked, setChecked] = useState(false)
return (
<div style={{ margin: '0 auto', minHeight: '420px', marginTop: '220px' }}>
<ContextMenu
{...args}
overlay={[
<ContextMenu.Item icon={<IconSettings size="small" />}>Account</ContextMenu.Item>,
<ContextMenu.Item>Settings</ContextMenu.Item>,
<Divider light />,
<ContextMenu.Checkbox checked={checked} onChange={setChecked}>
Show subtitles
</ContextMenu.Checkbox>,
]}
>
{triggerArea}
</ContextMenu>
</div>
)
}
export const Radio = (args: any) => {
const [value, setValue] = useState('red')
return (
<div style={{ margin: '0 auto', minHeight: '420px', marginTop: '220px' }}>
<ContextMenu
{...args}
overlay={[
<ContextMenu.RadioGroup value={value} onChange={setValue}>
<ContextMenu.Radio value={'red'}>Red</ContextMenu.Radio>
<ContextMenu.Radio value={'blue'}>Blue</ContextMenu.Radio>
<ContextMenu.Radio value={'green'}>Green</ContextMenu.Radio>
</ContextMenu.RadioGroup>,
]}
>
{triggerArea}
</ContextMenu>
</div>
)
}

52
packages/ui/src/components/Divider/Divider.stories.tsx
View File

@@ -1,52 +0,0 @@
import { Button } from '../Button'
import { Divider } from './'
export default {
title: 'Utilities/Divider',
component: Divider,
}
export const Default = (args: any) => <Divider {...args} />
export const withCenterText = (args: any) => <Divider {...args}>Hello world</Divider>
export const withLeftText = (args: any) => <Divider {...args}>Hello world</Divider>
export const withRightText = (args: any) => <Divider {...args}>Hello world</Divider>
export const lighterColor = (args: any) => <Divider {...args} />
export const vertical = (args: any) => (
<div style={{ height: '32px' }}>
<div className="space-x-3 w-full">
<Divider {...args} />
<Button>Button one</Button>
<Divider {...args} />
<Button>Button two</Button>
<Divider {...args} />
<span>Some text</span>
<Divider {...args} />
<Button>Button three</Button>
</div>
</div>
)
Default.args = {}
withCenterText.args = {}
withLeftText.args = {
orientation: 'left',
}
withRightText.args = {
orientation: 'right',
}
lighterColor.args = {
light: true,
}
vertical.args = {
type: 'vertical',
}

487
packages/ui/src/components/Form/Form.stories.tsx
View File

@@ -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 (
<Form
initialValues={{
email: '',
firstname: '',
}}
validateOnBlur
onSubmit={(values: any, { setSubmitting }: any) => {
setTimeout(() => {
alert(JSON.stringify(values, null, 2))
setSubmitting(false)
}, 400)
}}
>
{({ isSubmitting }: { isSubmitting: boolean }) => (
<div className="space-y-4">
<Input
id="email"
label="email"
placeholder="something in here"
labelOptional="This is a required field"
validation={validateEmail}
/>
{/* <Input
id="firstname"
label="firstname"
placeholder="something in here"
/> */}
<Button loading={isSubmitting} type="primary" htmlType="submit">
Submit
</Button>
</div>
)}
</Form>
)
}
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 (
<Form
initialValues={{
firstname: '',
lastname: '',
email: '',
}}
validationSchema={SignupSchema}
onSubmit={(values: any, { setSubmitting }: any) => {
setTimeout(() => {
alert(JSON.stringify(values, null, 2))
setSubmitting(false)
}, 400)
}}
>
{({ isSubmitting }: any) => (
<div className="space-y-4">
<Input id="firstname" name="firstname" label="firstname" placeholder="firstname" />
<Input id="lastname" name="lastname" label="lastname" placeholder="lastname" />
<Input id="email" name="email" label="Email" placeholder="This is your email" />
<Button loading={isSubmitting} type="primary" htmlType="submit">
Submit
</Button>
</div>
)}
</Form>
)
}
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 (
<>
<Form
initialValues={INITIAL_VALUES}
onSubmit={(values: any, { setSubmitting }: any) => {
setTimeout(() => {
alert(JSON.stringify(values, null, 2))
setSubmitting(false)
}, 400)
}}
validate={(values: Values) => {
const errors: any = {}
console.log('values for validation', values)
if (!values.email) {
errors.email = 'Required'
} else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(values.email)) {
errors.email = 'Invalid email address'
}
if (!values.profession) {
errors.profession = 'Required'
}
if (!values.textarea) {
errors.textarea = 'Required'
}
if (!values.number) {
errors.number = 'Required'
}
if (values.number <= 13) {
errors.number = 'Must be a number above 13'
}
if (values.number >= 32) {
errors.number = 'Must be a number below 32'
}
if (!values.favorite_food) {
errors.favorite_food = 'You must select a favourite food'
}
if (!values.toggle) {
errors.toggle = 'This needs to be turned on'
}
// if (!values.people) {
// errors.people = 'Please select a person'
// }
// if (values.remember_me)
return errors
}}
>
{({ isSubmitting }: any) => (
<>
<div className="space-y-8">
<p>{isSubmitting ? 'submitting' : 'not submitting'}</p>
<Input id="email" label="Email" placeholder="something@gmail.com" />
<Input id="last_name" label="last name" placeholder="something in here" />
<Select id="profession" label="Profession" placeholder="something in here">
<Select.Option key="empty-enum" value="">
---
</Select.Option>
<Select.Option value="teacher">Teacher</Select.Option>
<Select.Option value="firefighter">Firefighter</Select.Option>
<Select.Option value="police">Police</Select.Option>
</Select>
<InputNumber
id="number"
label="Number"
placeholder="124"
labelOptional="Must be between 13 - 31"
/>
<Checkbox id="checkbox_alone" label="checkbox_alone" />
<Input.TextArea id="textarea" rows={5} name="textarea" />
<Checkbox.Group
label="Group of checkboxes"
layout="horizontal"
labelOptional="Optional label"
descriptionText="You can also show label hint text here"
>
<Checkbox
name="check_1"
id="check_1"
label="Remember me"
description="hello world"
/>
<Checkbox
name="check_2"
id="check_2"
label="Remember me"
description="hello world"
/>
<Checkbox
name="check_3"
id="check_3"
label="Remember me"
description="hello world"
/>
</Checkbox.Group>
<Toggle id="toggle" label="Remember me" layout="horizontal" />
<Radio.Group
layout="horizontal"
name="favorite_food"
label="favorite_food"
type="list"
>
<Radio value="pizza" label="Pizza" description="hello world" />
<Radio value="burger" label="Burger" description="hello world" />
<Radio value="fries" label="Fries" description="hello world" />
</Radio.Group>
<Listbox
id="people"
label="Choose a person"
layout="horizontal"
descriptionText="Choose a person for this role"
>
{people.map((person) => {
return (
<Listbox.Option
key={`people-${person.value}`}
value={person.value}
label={person.label}
addOnBefore={({ active, selected }: any) => (
<img src={person.avatar} alt="" className="h-6 w-6 rounded-full" />
)}
children={({ active, selected }: any) => {
// console.log('selected', selected)
// console.log('active', active)
return <span className={'font-normal block truncate'}>{person.label}</span>
}}
/>
)
})}
</Listbox>
<Button loading={isSubmitting} type="primary" htmlType="submit">
Submit
</Button>
</div>
</>
)}
</Form>
</>
)
}
export const CardForm = () => {
// panel
const Panel = ({
children,
header,
footer,
}: {
children: React.ReactNode
header?: React.ReactNode
footer?: React.ReactNode
}) => (
<div className="bg-surface-100 border border-overlay rounded-md w-3/4 mx-auto my-8 shadow overflow-hidden">
{header && <div className="bg-surface-100 px-8 py-4 border-b border-overlay">{header}</div>}
<div className="space-y-6 py-6">{children}</div>
{footer}
</div>
)
const Section = ({
children,
header,
}: {
children: React.ReactNode
header?: React.ReactNode
}) => (
<div className="grid grid-cols-12 px-8 py-2">
{header}
{children}
</div>
)
return (
<>
<Form
initialValues={{ stripe_email_choice: 'emails-2' }}
onSubmit={(values: any, { setSubmitting }: any) => {
setTimeout(() => {
alert(JSON.stringify(values, null, 2))
setSubmitting(false)
}, 400)
}}
validate={(values: Values) => {
const errors: any = {}
return errors
}}
>
{({ isSubmitting }: any) => (
<Panel
header={
<>
<h3 className="text-foreground text-xl font-semibold">Custom Options</h3>
<p className="text-foreground-muted">
These settings apply to payment pages you create using Stripe Checkout and Payment
Links.
</p>
</>
}
footer={
<>
<div className="border-t border-muted"></div>
<div className="py-3 px-6 flex gap-2 justify-end">
<Button loading={isSubmitting} type="secondary" htmlType="submit">
Cancel
</Button>
<Button loading={isSubmitting} type="primary" htmlType="submit">
Save
</Button>
</div>
</>
}
>
{/* <p>{isSubmitting ? 'submitting' : 'not submitting'}</p> */}
{/* <div className="border-t border-muted"></div> */}
<Section
header={<label className="text-sm text-foreground col-span-4">Faster checkout</label>}
>
<Toggle
className="col-span-8"
id="link_with_stripe"
label="Turn on link with Stripe"
layout="flex"
descriptionText="Go to Payment methods settings to configure Apple Pay and Google Pay."
/>
</Section>
<div className="border-t border-muted"></div>
<Section
header={<label className="text-sm text-foreground col-span-4">Faster checkout</label>}
>
<Radio.Group
className="col-span-8"
name="stripe_email_choice"
id="stripe_email_choice"
type="list"
layout="vertical"
>
<Radio
// id="1642469211631"
value="emails-1"
label="Send emails about upcoming renewals"
description="hello world"
align="horizontal"
/>
<Radio
// id="1642469211606"
value="emails-2"
label="Send emails about expiring cards"
description="hello world"
align="horizontal"
/>
</Radio.Group>
</Section>
<div className="border-t border-muted"></div>
<Section
header={<label className="text-sm text-foreground col-span-4">Faster checkout</label>}
>
<div className="col-span-8 space-y-4">
<Input name="app_id" label="Application ID in Stripe" />
<Input
name="service_id"
label="API key"
descriptionText={
<span>
This can be found in{' '}
<span className="text-brand underline cursor-pointer transition hover:text-brand-300">
the developer settings
</span>
</span>
}
/>
</div>
</Section>
</Panel>
)}
</Form>
</>
)
}
export { default as AuthForm } from './examples/AuthForm'

66
packages/ui/src/components/Icon/Icon.stories.tsx
View File

@@ -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) => (
<div className="block font-sans">
<div>
<Typography.Text>
<IconMail {...args} />
</Typography.Text>
</div>
</div>
)
Default.args = {
size: 16,
strokeWidth: 2,
}
// export const IconList = (args: any) => (
// <>
// <div className="font-sans text-xl bg-blue-100 p-5 mb-3 rounded-md">
// This icons uses react-feather from Feather Icons. For detail you can check
// it <a href="https://github.com/feathericons/react-feather">here</a> and{' '}
// <a href="https://feathericons.com/">here</a>
// </div>
// <div className="flex flex-wrap font-sans">
// {LIST_ICONS.map((icon) => (
// <div className="m-2 shadow-lg rounded-lg w-36 h-36 flex flex-col justify-center items-center dark:text-white">
// <Icon type={icon} key={icon} {...args} />
// <span className="mt-2">{icon}</span>
// </div>
// ))}
// </div>
// </>
// )
// IconList.args = {
// size: 16,
// strokeWidth: 2,
// }
// // const SvgMessagesIcon = () => (
// // <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
// // <path
// // stroke-linecap="round"
// // stroke-linejoin="round"
// // stroke-width="2"
// // d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z"
// // />
// // </svg>
// // )
// // export const IconWithSVG = (args: any) => (
// // <Icon {...args} src={<SvgMessagesIcon />} />
// // )
// // IconWithSVG.args = {
// // size: 'xxxlarge',
// // strokeWidth: 4,
// // }

156
packages/ui/src/components/Input/Input.stories.tsx
View File

@@ -1,156 +0,0 @@
import React from 'react'
// import { AutoForm } from 'uniforms'
import { Input } from './../Input'
import { Package } from 'lucide-react'
import { Button } from '../Button'
export default {
title: 'Old primitives/Input',
component: Input,
}
export const Default = (args: any) => <Input {...args} />
export const ErrorState = (args: any) => <Input {...args} />
export const withIcon = (args: any) => <Input {...args} />
export const withOption = (args: any) => <Input {...args} />
export const withDescription = (args: any) => <Input {...args} />
export const withCustomStyle = (args: any) => <Input {...args} />
export const textArea = (args: any) => <Input.TextArea {...args} />
export const textAreaWithCopy = (args: any) => <Input.TextArea {...args} />
export const textAreaWithLimit = (args: any) => <Input.TextArea {...args} />
export const withRevealAndCopy = (args: any) => <Input {...args} />
export const withCustomActions = (args: any) => <Input {...args} />
export const withBeforeAndAfterLabel = (args: any) => <Input {...args} />
export const size = (args: any) => <Input {...args} />
export const borderless = (args: any) => <Input {...args} />
export const date = (args: any) => <Input {...args} step="12" />
const icon: any = <Package />
Default.args = {
placeholder: 'Type text here ...',
disabled: false,
label: 'Name',
layout: 'vertical',
}
ErrorState.args = {
type: 'text',
placeholder: 'Type text here ...',
disabled: false,
label: 'Input with an error message',
error: 'Your password must be less than 4 characters.',
}
withIcon.args = {
type: 'text',
placeholder: 'Type text here ...',
disabled: false,
label: 'Input with an icon',
icon: icon,
}
withOption.args = {
type: 'text',
placeholder: 'Type text here ...',
disabled: false,
label: 'Input with an error message',
labelOptional: 'This is required',
}
withDescription.args = {
type: 'text',
placeholder: 'Type text here ...',
disabled: false,
label: 'Input with an error message',
descriptionText: 'Make your password short and easy to guess',
}
withCustomStyle.args = {
type: 'text',
label: 'This has custom styling {width: 50%}',
style: { width: '50%' },
}
textArea.args = {
type: 'text',
label: 'This is a text area',
}
textAreaWithCopy.args = {
copy: true,
rows: 3,
type: 'text',
label: 'This is a text area',
}
textAreaWithLimit.args = {
type: 'text',
label: 'This is a text area, with 10 rows',
labelOptional: '500 character limit',
rows: 10,
limit: 500,
}
withRevealAndCopy.args = {
type: 'text',
label: 'Reveal and copy',
labelOptional: 'Reveal the text, then copy it',
value: '12341234HDGRHSGR/adJDJD',
copy: true,
reveal: true,
}
withCustomActions.args = {
type: 'text',
label: 'Custom actions',
labelOptional: 'Use any react components',
value: 'Value of input',
actions: [
<Button type="secondary">Copy text</Button>,
<Button type="outline">Delete this</Button>,
],
}
size.args = {
type: 'text',
label: 'You can change the size of this Input',
size: 'tiny',
}
withBeforeAndAfterLabel.args = {
type: 'text',
label: 'This is the label',
beforeLabel: 'Before label : ',
afterLabel: ' : After label',
}
borderless.args = {
type: 'text',
label: 'This is the label',
borderless: true,
size: 'tiny',
}
date.args = {
type: 'date',
placeholder: 'Type text here ...',
disabled: false,
label: 'Name',
layout: 'vertical',
}

61
packages/ui/src/components/InputNumber/InputNumber.stories.tsx
View File

@@ -1,61 +0,0 @@
import React, { useState, useCallback } from 'react'
// import { AutoForm } from 'uniforms'
import { InputNumber } from '.'
import { IconPackage } from './../../index'
import { Button } from '../Button'
import { Space } from '../Space'
export default {
title: 'Data Input/InputNumber',
component: InputNumber,
}
export const Default = (args: any) => <InputNumber {...args} />
export const ErrorState = (args: any) => <InputNumber {...args} />
export const WithIcon = (args: any) => <InputNumber {...args} />
export const Controlled = (props: any) => {
const [state, setState] = useState(() => undefined)
const onChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
// console.log({ e, value: e.currentTarget.value })
setState(e.currentTarget.value)
}, [])
return <InputNumber {...props} onChange={onChange} value={state} />
}
Default.args = {
label: 'Max of 100 and min of 0',
disabled: false,
layout: 'vertical',
max: 100,
min: 0,
}
ErrorState.args = {
disabled: false,
layout: 'vertical',
label: 'Input Number with an error message',
error: 'Input Number must be in range',
}
WithIcon.args = {
label: 'Max of 100 and min of 0 with a Icon',
disabled: false,
layout: 'vertical',
max: 100,
min: 0,
icon: <IconPackage />,
}
Controlled.args = {
label: 'Max of 100 and min of 0',
disabled: false,
layout: 'vertical',
max: 100,
min: 0,
}

14
packages/ui/src/components/InputOld/Input.stories.js
View File

@@ -1,14 +0,0 @@
import React from 'react'
import { Input } from '.'
export default {
title: 'Archive/Input Old',
component: Input,
}
export const Default = (args) => <Input {...args} />
Default.args = {
placeholder: 'Type text here ...',
disabled: false
}

183
packages/ui/src/components/Select/Select.stories.tsx
View File

@@ -1,183 +0,0 @@
import React from 'react'
import Select from '.'
import { IconBook } from '../../index'
const { Option, OptGroup } = Select
export default {
title: 'Data Input/Select',
component: Select,
}
export const Default = (args: any) => (
<Select {...args}>
<Option value="javascript">JavaScript</Option>
<Option value="typeScript">TypeScript</Option>
<Option value="react">React</Option>
</Select>
)
export const withCheckboxes = (args: any) => <Select {...args} />
export const ErrorState = (args: any) => (
<Select {...args}>
<Option value="javascript">JavaScript</Option>
<Option value="typeScript">TypeScript</Option>
<Option value="react">React</Option>
</Select>
)
export const withOptionGroup = (args: any) => (
<Select {...args}>
<OptGroup label="languages">
<Option value="javascript">JavaScript</Option>
<Option value="typeScript">TypeScript</Option>
</OptGroup>
<OptGroup label="libaries">
<Option value="react">React</Option>
</OptGroup>
</Select>
)
export const withIcon = (args: any) => (
<Select {...args}>
<Option value="javascript">JavaScript</Option>
<Option value="typeScript">TypeScript</Option>
<Option value="react">React</Option>
</Select>
)
export const withOptionLabel = (args: any) => (
<Select {...args}>
<Option value="javascript">JavaScript</Option>
<Option value="typeScript">TypeScript</Option>
<Option value="react">React</Option>
</Select>
)
export const withBeforeAndAfterLabel = (args: any) => (
<Select {...args}>
<Option value="javascript">JavaScript</Option>
<Option value="typeScript">TypeScript</Option>
<Option value="react">React</Option>
</Select>
)
export const withDescription = (args: any) => (
<Select {...args}>
<Option value="javascript">JavaScript</Option>
<Option value="typeScript">TypeScript</Option>
<Option value="react">React</Option>
</Select>
)
export const size = (args: any) => (
<Select {...args}>
<Option value="javascript">JavaScript</Option>
<Option value="typeScript">TypeScript</Option>
<Option value="react">React</Option>
</Select>
)
const data = ['England', 'Wales', 'Scotland', 'Ireland']
const icon = <IconBook type={'Book'} />
Default.args = {
disabled: false,
label: 'Label',
className: 'font-sans',
layout: 'vertical',
children: [
<>
<Option value="javascript">JavaScript</Option>
<Option value="typeScript">TypeScript</Option>
<Option value="react">React</Option>
</>,
],
}
withOptionGroup.args = {
placeholder: 'Type text here ...',
disabled: false,
label: 'Input with an error message',
className: 'font-sans',
value: 'Value of input',
layout: 'vertical',
}
withCheckboxes.args = {
disabled: false,
checkboxes: data,
allowedValues: data,
className: 'font-sans',
layout: 'vertical',
}
ErrorState.args = {
placeholder: 'Type text here ...',
disabled: false,
label: 'Input with an error message',
className: 'font-sans',
value: 'Value of input',
error: 'Your password must be less than 4 characters.',
allowedValues: data,
layout: 'vertical',
}
withIcon.args = {
placeholder: 'Type text here ...',
disabled: false,
label: 'Input with an Icon',
className: 'font-sans',
value: 'Value of input',
icon: icon,
allowedValues: data,
layout: 'vertical',
}
withOptionLabel.args = {
placeholder: 'Type text here ...',
disabled: false,
label: 'Input with an error message',
className: 'font-sans',
value: 'Value of input',
labelOptional: 'This is required',
allowedValues: data,
layout: 'vertical',
}
withBeforeAndAfterLabel.args = {
placeholder: 'Type text here ...',
disabled: false,
label: 'Label',
beforeLabel: 'Before : ',
afterLabel: ' : After',
className: 'font-sans',
value: 'Value of input',
labelOptional: 'This is required',
allowedValues: data,
layout: 'vertical',
}
withDescription.args = {
placeholder: 'Type text here ...',
disabled: false,
label: 'Input with an error message',
className: 'font-sans',
value: 'Value of input',
descriptionText: 'Make your password short and easy to guess',
allowedValues: data,
layout: 'vertical',
}
size.args = {
placeholder: 'Type text here ...',
disabled: false,
label: 'Input with a size selected',
value: 'Value of input',
descriptionText: 'Choose a different size and font and padding will change',
allowedValues: data,
layout: 'vertical',
size: 'tiny',
}

262
packages/ui/src/components/SidePanel/SidePanel.stories.tsx
View File

@@ -1,262 +0,0 @@
import { action } from '@storybook/addon-actions'
import { useState } from 'react'
import { Button } from '../Button'
import { Space } from '../Space'
import { SidePanel } from './index'
export default {
title: 'Overlays/SidePanel',
component: SidePanel,
}
const content = (
<span className="text-foreground-muted text-sm">
SidePanel content is inserted here, if you need to insert anything into the SidePanel you can do
so via
<span className="text-code">children</span>
</span>
)
export const Default = (args: any) => (
<>
<SidePanel
{...args}
header={
<>
<h3 className="text-base text-foreground">This is the title</h3>
<p className="text-xs text-foreground-muted">This is the title</p>
</>
}
>
{content}
</SidePanel>
</>
)
export const withWideLayout = (args: any) => (
<>
<SidePanel {...args}>{content}</SidePanel>
</>
)
export const leftAlignedFooter = (args: any) => (
<>
<SidePanel {...args}>{content}</SidePanel>
</>
)
export const leftAligned = (args: any) => (
<>
<SidePanel {...args}>{content}</SidePanel>
</>
)
export const hideFooter = (args: any) => (
<>
<SidePanel {...args}>{content}</SidePanel>
</>
)
export const customFooter = (args: any) => (
<>
<SidePanel {...args}>{content}</SidePanel>
</>
)
export const triggerElement = (args: any) => (
<>
<SidePanel {...args}>
<span className="text-foreground-muted">This was opened with a trigger element</span>
</SidePanel>
</>
)
export const nestedSidepanels = (args: any) => {
const [panel1Visible, setPanel1Visible] = useState(false)
const [panel2Visible, setPanel2Visible] = useState(false)
return (
<>
<div
className="
p-3 px-5
bg-surface-100 border border-control rounded flex gap-4
justify-between
items-center
fixed
top-1/2
left-1/2
w-3/4
-translate-x-1/2
-translate-y-1/2"
>
<div>
<h4 className="text-foreground text-base">Shall we nest some components?</h4>
<p className="text-foreground-light text-sm">yea sure, go on then.</p>
</div>
<Button type="secondary" onClick={() => setPanel1Visible(true)}>
Open sidepanel
</Button>
</div>
<SidePanel
visible={panel1Visible}
onCancel={() => setPanel1Visible(false)}
onConfirm={() => setPanel1Visible(false)}
>
<div className="space-y-3">
<p className="text-sm text-foreground-muted font-light">
This Sidepanel was opened with a trigger element
</p>
<p className="text-sm text-foreground">
You can open a nested panel by clicking the button below
</p>
<Button type="secondary" onClick={() => setPanel2Visible(true)}>
Open nested sidepanel
</Button>
</div>
<SidePanel
visible={panel2Visible}
onCancel={() => setPanel2Visible(false)}
onConfirm={() => setPanel2Visible(false)}
>
<Button type="secondary" onClick={() => setPanel2Visible(false)}>
Close nested sidepanel
</Button>
</SidePanel>
</SidePanel>
</>
)
}
export const longContent = (args: any) => (
<>
<SidePanel {...args}>
<p className="text-foreground-muted">This is a paragraph</p>
<p className="text-foreground-muted">This is a paragraph</p>
<p className="text-foreground-muted">This is a paragraph</p>
<p className="text-foreground-muted">This is a paragraph</p>
<p className="text-foreground-muted">This is a paragraph</p>
<p className="text-foreground-muted">This is a paragraph</p>
<p className="text-foreground-muted">This is a paragraph</p>
<p className="text-foreground-muted">This is a paragraph</p>
<p className="text-foreground-muted">This is a paragraph</p>
<p className="text-foreground-muted">This is a paragraph</p>
<p className="text-foreground-muted">This is a paragraph</p>
<p className="text-foreground-muted">This is a paragraph</p>
<p className="text-foreground-muted">This is a paragraph</p>
<p className="text-foreground-muted">This is a paragraph</p>
<p className="text-foreground-muted">This is a paragraph</p>
<p className="text-foreground-muted">This is a paragraph</p>
<p className="text-foreground-muted">This is a paragraph</p>
<p className="text-foreground-muted">This is a paragraph</p>
<p className="text-foreground-muted">This is a paragraph</p>
<p className="text-foreground-muted">This is a paragraph</p>
<p className="text-foreground-muted">This is a paragraph</p>
<p className="text-foreground-muted">This is a paragraph</p>
<p className="text-foreground-muted">This is a paragraph</p>
<p className="text-foreground-muted">This is a paragraph</p>
<p className="text-foreground-muted">This is a paragraph</p>
<p className="text-foreground-muted">This is a paragraph</p>
<p className="text-foreground-muted">This is a paragraph</p>
<p className="text-foreground-muted">This is a paragraph</p>
<p className="text-foreground-muted">This is a paragraph</p>
<p className="text-foreground-muted">This is a paragraph</p>
<p className="text-foreground-muted">This is a paragraph</p>
<p className="text-foreground-muted">This is a paragraph</p>
<p className="text-foreground-muted">This is a paragraph</p>
<p className="text-foreground-muted">This is a paragraph</p>
<p className="text-foreground-muted">This is a paragraph</p>
<p className="text-foreground-muted">This is a paragraph</p>
<p className="text-foreground-muted">This is a paragraph</p>
<p className="text-foreground-muted">This is a paragraph</p>
<p className="text-foreground-muted">This is a paragraph</p>
<p className="text-foreground-muted">This is a paragraph</p>
<p className="text-foreground-muted">This is a paragraph</p>
<p className="text-foreground-muted">This is a paragraph</p>
<p className="text-foreground-muted">This is a paragraph</p>
<p className="text-foreground-muted">This is a paragraph</p>
<p className="text-foreground-muted">This is a paragraph</p>
</SidePanel>
</>
)
Default.args = {
visible: true,
onCancel: action('onCancel'),
onConfirm: action('onConfirm'),
title: 'This is the title of the SidePanel',
description: 'And i am the description',
}
withWideLayout.args = {
visible: true,
size: 'large',
onCancel: action('onCancel'),
onConfirm: action('onConfirm'),
title: 'This is the title of the SidePanel',
description: 'And i am the description',
}
leftAlignedFooter.args = {
visible: true,
alignFooter: 'left',
onCancel: action('onCancel'),
onConfirm: action('onConfirm'),
title: 'This is the title of the SidePanel',
description: 'And i am the description',
}
leftAligned.args = {
visible: true,
align: 'left',
onCancel: action('onCancel'),
onConfirm: action('onConfirm'),
title: 'This is the title of the SidePanel',
description: 'And i am the description',
}
hideFooter.args = {
visible: true,
hideFooter: true,
onCancel: action('onCancel'),
onConfirm: action('onConfirm'),
title: 'This is the title of the SidePanel',
description: 'And i am the description',
}
customFooter.args = {
visible: true,
onCancel: action('onCancel'),
onConfirm: action('onConfirm'),
title: 'This is the title of the SidePanel',
description: 'And i am the description',
customFooter: [
<Space>
<Button type="secondary">Cancel</Button>
<Button type="danger">Delete</Button>
</Space>,
],
}
triggerElement.args = {
visible: true,
onCancel: action('onCancel'),
onConfirm: action('onConfirm'),
title: 'This is the title of the SidePanel',
description: 'And i am the description',
triggerElement: (
<Button asChild>
<span>Open</span>
</Button>
),
}
longContent.args = {
visible: true,
header: 'Long content',
}

165
packages/ui/src/components/Tabs/Tabs.stories.tsx
View File

@@ -1,165 +0,0 @@
import React from 'react'
import { Button } from '../Button'
import { IconMail } from '../../index'
import Typography from '../Typography'
import { Tabs } from './'
export default {
title: 'Displays/Tabs',
component: Tabs,
}
export const Default = (args: any) => (
<Tabs defaultActiveId={'panel-1'}>
<Tabs.Panel id="panel-1" label="1st tab">
<Typography.Text>Content for the first panel</Typography.Text>
</Tabs.Panel>
<Tabs.Panel id="panel-2" label="2nd tab">
<Typography.Text>Content for the second panel</Typography.Text>
</Tabs.Panel>
<Tabs.Panel id="panel-3" label="3rd tab">
<Typography.Text>Content for the third panel</Typography.Text>
</Tabs.Panel>
</Tabs>
)
export const Underlined = (args: any) => (
<Tabs defaultActiveId={'panel-1'} {...args}>
<Tabs.Panel id="panel-1" label="1st tab">
<Typography.Text>Content for the first panel</Typography.Text>
</Tabs.Panel>
<Tabs.Panel id="panel-2" label="2nd tab">
<Typography.Text>Content for the second panel</Typography.Text>
</Tabs.Panel>
<Tabs.Panel id="panel-3" label="3rd tab">
<Typography.Text>Content for the third panel</Typography.Text>
</Tabs.Panel>
</Tabs>
)
export const WithIcons = (args: any) => (
<Tabs defaultActiveId={'panel-1'} {...args}>
<Tabs.Panel id="panel-1" label="1st tab" icon={<IconMail />}>
<Typography.Text>Content for the first panel</Typography.Text>
</Tabs.Panel>
<Tabs.Panel id="panel-2" label="2nd tab" icon={<IconMail />}>
<Typography.Text>Content for the second panel</Typography.Text>
</Tabs.Panel>
<Tabs.Panel id="panel-3" label="3rd tab" icon={<IconMail />}>
<Typography.Text>Content for the third panel</Typography.Text>
</Tabs.Panel>
</Tabs>
)
export const LargeButtons = (args: any) => (
<Tabs defaultActiveId={'panel-1'} {...args}>
<Tabs.Panel id="panel-1" label="1st tab">
<Typography.Text>Content for the first panel</Typography.Text>
</Tabs.Panel>
<Tabs.Panel id="panel-2" label="2nd tab">
<Typography.Text>Content for the second panel</Typography.Text>
</Tabs.Panel>
<Tabs.Panel id="panel-3" label="3rd tab">
<Typography.Text>Content for the third panel</Typography.Text>
</Tabs.Panel>
</Tabs>
)
export const BlockTabs = (args: any) => (
<Tabs defaultActiveId={'panel-1'} {...args}>
<Tabs.Panel id="panel-1" label="1st tab">
<Typography.Text>Content for the first panel</Typography.Text>
</Tabs.Panel>
<Tabs.Panel id="panel-2" label="2nd tab">
<Typography.Text>Content for the second panel</Typography.Text>
</Tabs.Panel>
<Tabs.Panel id="panel-3" label="3rd tab">
<Typography.Text>Content for the third panel</Typography.Text>
</Tabs.Panel>
</Tabs>
)
const limit = 30
let infitniteSroll: JSX.Element[] = []
for (var i = 0; i < limit; i++) {
infitniteSroll.push(
<Tabs.Panel id={`panel-${i}`} label={`Tab ${i}`}>
<Typography.Text>Content for the panel {i}</Typography.Text>
</Tabs.Panel>
)
}
export const Scroll = (args: any) => (
<Tabs defaultActiveId={'panel-1'} {...args}>
{infitniteSroll}
</Tabs>
)
export const addOnBefore = (args: any) => (
<Tabs defaultActiveId={'panel-1'} {...args}>
<Tabs.Panel id="panel-1" label="1st tab">
<Typography.Text>Content for the first panel</Typography.Text>
</Tabs.Panel>
<Tabs.Panel id="panel-2" label="2nd tab">
<Typography.Text>Content for the second panel</Typography.Text>
</Tabs.Panel>
<Tabs.Panel id="panel-3" label="3rd tab">
<Typography.Text>Content for the third panel</Typography.Text>
</Tabs.Panel>
</Tabs>
)
export const addOnAfter = (args: any) => (
<Tabs defaultActiveId={'panel-1'} {...args}>
<Tabs.Panel id="panel-1" label="1st tab">
<Typography.Text>Content for the first panel</Typography.Text>
</Tabs.Panel>
<Tabs.Panel id="panel-2" label="2nd tab">
<Typography.Text>Content for the second panel</Typography.Text>
</Tabs.Panel>
<Tabs.Panel id="panel-3" label="3rd tab">
<Typography.Text>Content for the third panel</Typography.Text>
</Tabs.Panel>
</Tabs>
)
export const OneTab = () => (
<Tabs defaultActiveId={'panel-1'}>
<Tabs.Panel id="panel-1" label="1st tab">
<Typography.Text>Content for the first panel</Typography.Text>
</Tabs.Panel>
</Tabs>
)
Default.args = {}
Underlined.args = {
type: 'underlined',
}
WithIcons.args = {
type: 'underlined',
}
LargeButtons.args = {
type: 'underlined',
size: 'large',
}
BlockTabs.args = {
type: 'underlined',
block: true,
}
Scroll.args = {
type: 'underlined',
block: true,
scrollable: true,
}
addOnBefore.args = {
type: 'underlined',
size: 'large',
addOnBefore: <Button type="outline">Left button</Button>,
}
addOnAfter.args = {
type: 'underlined',
size: 'large',
addOnAfter: <Button type="outline">Right button</Button>,
}

68
packages/ui/src/components/Toggle/Toggle.stories.tsx
View File

@@ -1,68 +0,0 @@
import React from 'react'
import { Toggle } from '.'
import { Button } from '../Button'
import { Input } from '../Input'
import { Space } from '../Space'
export default {
title: 'Data Input/Toggle',
component: Toggle,
argTypes: {
label: { control: 'text' },
},
}
export const Primary = (args: any) => <Toggle {...args} />
export const Wide = (args: any) => <Toggle {...args} />
export const checkedDefault = (args: any) => <Toggle {...args} />
export const noLabel = (args: any) => <Toggle {...args} />
export const withBeforeAndAfterLabel = (args: any) => <Toggle {...args} />
export const size = (args: any) => <Toggle {...args} />
Primary.args = {
descriptionText: 'This is optional description',
disabled: false,
error: '',
label: "Get insights across your organization's repositories",
labelOptional:
'Star history, issue tracking, and more to come repository.surf organization',
name: 'radiogroup-example',
}
Wide.args = {
descriptionText: 'This is optional description',
disabled: false,
error: '',
label: "Get insights across your organization's repositories",
labelOptional:
'Star history, issue tracking, and more to come repository.surf organization',
name: 'radiogroup-example',
layout: 'wide',
}
checkedDefault.args = {
defaultChecked: true,
descriptionText: 'This is optional description',
label: 'Radio group main label',
labelOptional: 'This is an optional label',
}
noLabel.args = {
active: true,
disabled: false,
error: '',
name: 'radiogroup-example',
layout: 'horizontal',
}
withBeforeAndAfterLabel.args = {
label: 'Label',
beforeLabel: 'Before : ',
afterLabel: ' : After',
}
size.args = {
label: 'Try different sizes',
size: 'tiny',
}

65
packages/ui/src/components/Typography/Typography.stories.tsx
View File

@@ -1,65 +0,0 @@
import React from 'react'
// import { AutoForm } from 'uniforms'
// @ts-ignore
import MarkdownExample from './../../lib/MarkdownSample.md'
import ReactMarkdown from 'react-markdown'
const gfm = require('remark-gfm')
import Typography from '.'
// @ts-ignore
import { Space } from '../../index'
const { Title, Text, Link } = Typography
export default {
title: 'General/Typography',
component: Typography,
}
export const article = () => (
<Typography tag="article">
<ReactMarkdown plugins={[gfm]} source={MarkdownExample} />
</Typography>
)
export const Titles = () => (
<React.Fragment>
<Title level={1}>Hello world</Title>
<Title level={2}>Hello world</Title>
<Title level={3}>Hello world</Title>
<Title level={4}>Hello world</Title>
<Title level={5}>Hello world</Title>
</React.Fragment>
)
export const Texts = () => (
<>
<Text>Supabase UI (default)</Text>
<br />
<Text type="secondary">Supabase UI (secondary)</Text>
<br />
<Text type="success">Supabase UI (success)</Text>
<br />
<Text type="warning">Supabase UI (warning)</Text>
<br />
<Text type="danger">Supabase UI (danger)</Text>
<br />
<Text disabled>Supabase UI (disabled)</Text>
<br />
<Text mark>Supabase UI (mark)</Text>
<br />
<Text code>Supabase UI (code)</Text>
<br />
<Text keyboard>Supabase UI (keyboard)</Text>
<br />
<Text underline>Supabase UI (underline)</Text>
<br />
<Text strikethrough>Supabase UI (strikethrough)</Text>
<br />
<Text strong>Supabase UI (strong)</Text>
<br />
<Link href="https://supabase.io" target="_blank">
Supabase (Link)
</Link>
</>
)

70
packages/ui/src/components/Upload/Upload.stories.tsx
View File

@@ -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<Array<File>>([])
return (
<Upload.Dragger
label="Upload CSV"
layout="horizontal"
files={files}
setFiles={setFiles}
>
<div className="flex flex-col gap-8 justify-evenly">
<div className="space-y-1 text-center">
<svg
className="mx-auto h-12 w-12 text-gray-400"
stroke="currentColor"
fill="none"
viewBox="0 0 48 48"
aria-hidden="true"
>
<path
d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
<div className="flex text-sm text-gray-600">
<Typography.Text className="m-auto text-center">
<Typography.Link
style={{
textDecoration: 'none',
}}
>
Upload a file
</Typography.Link>
{' or drag and drop'}
</Typography.Text>
</div>
<Typography.Text small type="secondary">
PNG, JPG, GIF up to 10MB
</Typography.Text>
{/* <p className="text-xs text-gray-500">PNG, JPG, GIF up to 10MB</p> */}
</div>
{/* Previews */}
{files.length > 0 && (
<div className="grid grid-flow-row grid-cols-3 gap-8 items-center justify-evenly m-auto">
{files.map((file) => (
<img
className="h-32 object-cover w-full rounded-lg"
src={URL.createObjectURL(file)}
alt={file.name}
/>
))}
</div>
)}
</div>
</Upload.Dragger>
)
}

98
packages/ui/src/lib/colors.stories.tsx
View File

@@ -1,98 +0,0 @@
// import { Meta } from '@storybook/react'
// import { cn } from './utils'
// // import { Card } from '@ui/components/shadcn/ui/card'
// import color from './tailwind-demo-classes'
// const meta: Meta = {
// title: 'tailwind/Colors',
// }
// export const Default = () => {
// return (
// <div className="flex flex-col gap-12">
// <div className="flex flex-row gap-12">
// <div>
// <h5 className="mb-3">Background</h5>
// <div className="flex flex-col gap-3">
// {color.background.map((x: string) => {
// return (
// <div className="flex gap-3 items-center">
// <div className={cn(x, 'relative w-12 h-12 border border-overlay shadow')}></div>
// <div className="font-mono text-sm bg-surface-100 px-2 py-0.5 rounded-full">
// {x}
// </div>
// </div>
// )
// })}
// </div>
// </div>
// <div>
// <h5 className="mb-3">Border</h5>
// <div className="flex flex-col gap-3">
// {color.border.map((x) => {
// return (
// <div className="flex gap-3 items-center">
// <div className={cn(x, 'relative w-12 h-12 border-4')}></div>
// <div className="font-mono text-sm bg-surface-100 px-2 py-0.5 rounded-full">
// {x}
// </div>
// </div>
// )
// })}
// </div>
// </div>
// <div>
// <h5 className="mb-3">texts</h5>
// <div className="flex flex-col gap-3">
// {color.text.map((x) => {
// return (
// <div className="flex gap-3 items-center">
// <span className={cn(x, 'relative w-12 h-12 flex items-center justify-center')}>
// ###
// </span>
// <div className="font-mono text-sm bg-surface-100 px-2 py-0.5 rounded-full">
// {x}
// </div>
// </div>
// )
// })}
// </div>
// </div>
// </div>
// <div className="flex flex-row gap-12">
// <div>
// <h5 className="mb-3">Colors</h5>
// <div className="flex flex-col gap-3">
// {color.colors.map((x: string) => {
// return (
// <div className="flex gap-3 items-center">
// <div className={cn(x, 'relative w-12 h-12 border border-overlay shadow')}></div>
// <div className="font-mono text-sm bg-surface-100 px-2 py-0.5 rounded-full">
// {x}
// </div>
// </div>
// )
// })}
// </div>
// </div>
// <div>
// <h5 className="mb-3">Palletes</h5>
// <div className="flex flex-col gap-3">
// {color.palletes.map((x) => {
// return (
// <div className="flex gap-3 items-center">
// <div className={cn(x, 'relative w-12 h-12 border border-overlay shadow')}></div>
// <div className="font-mono text-sm bg-surface-100 px-2 py-0.5 rounded-full">
// {x}
// </div>
// </div>
// )
// })}
// </div>
// </div>
// </div>
// </div>
// )
// }
// export default meta

6
packages/ui/tailwind-theming.md
View File

@@ -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/)

90
packages/ui/tailwind.config.js
View File

@@ -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')],
})

2
packages/ui/tsconfig.json
View File

@@ -4,5 +4,5 @@
"resolveJsonModule": true
},
"include": ["."],
"exclude": ["dist", "build", "node_modules", "**/*.stories.tsx"]
"exclude": ["dist", "build", "node_modules"]
}