Skip to content

Commit

Permalink
feat: material ui 3 theme
Browse files Browse the repository at this point in the history 
Signed-off-by: tedraykov <[email protected]>
  • Loading branch information
@tedraykov
tedraykov committed Nov 28, 2022
1 parent 450b3fb commit ef21f8c
Show file tree
Hide file tree
Showing 52 changed files with 805 additions and 575 deletions.
13 changes: 13 additions & 0 deletions .eslintignore
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
.DS_Store
node_modules
/build
/.svelte-kit
/package
.env
.env.*
!.env.example

# Ignore files for PNPM, NPM and YARN
pnpm-lock.yaml
package-lock.json
yarn.lock
5 changes: 4 additions & 1 deletion .gitignore
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,4 +6,7 @@ node_modules
.env
.env.*
!.env.example
**/.idea
.vercel
.output
vite.config.js.timestamp-*
vite.config.ts.timestamp-*
13 changes: 13 additions & 0 deletions .prettierignore
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
.DS_Store
node_modules
/build
/.svelte-kit
/package
.env
.env.*
!.env.example

# Ignore files for PNPM, NPM and YARN
pnpm-lock.yaml
package-lock.json
yarn.lock
5 changes: 4 additions & 1 deletion .prettierrc
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,5 +2,8 @@
"useTabs": true,
"singleQuote": true,
"trailingComma": "none",
"printWidth": 100
"printWidth": 100,
"plugins": ["prettier-plugin-svelte"],
"pluginSearchDirs": ["."],
"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
}
4 changes: 2 additions & 2 deletions src/app.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1" />
%sveltekit.head%
</head>
<body>
<div style="display: contents">
%sveltekit.body%
</body>
</div>
</html>
2 changes: 1 addition & 1 deletion src/components/Navbar.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
<Toolbar>
<Container class="max-w-8xl">
<Stack class="items-center" direction="row" gap={4}>
<Button class="sm:hidden p-1.5" variant="outlined" on:click={toggleSidebar}>
<Button class="md:hidden p-1.5" variant="outlined" on:click={toggleSidebar}>
<Icon src={Bars3} class="w-6 h-6 text-inherit" />
</Button>
<a href="/" class="w-12 h-12 p-2">
Expand Down
120 changes: 78 additions & 42 deletions src/components/playground/ApiTable.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@
if (!info?.getValue()) return '';
const { type, props } = info?.getValue();
const Component = deriveControlComponent(type);
return Component ? renderComponent(Component, props ) : '';
return Component ? renderComponent(Component, props) : '';
}
}
];
Expand Down Expand Up @@ -75,49 +75,85 @@
const tableMap = getPropsTableMap(optionsMap);
</script>

<TabGroup class='pt-2'>
<TabList>
{#each Object.keys(tableMap) as componentName}
<Tab>{componentName}</Tab>
{/each}
</TabList>
<TabPanels>
{#each Object.values(tableMap) as table}
<TabPanel>
<Table>
<thead>
{#each get(table).getHeaderGroups() as headerGroup}
<tr>
{#each headerGroup.headers as header}
<TableHeaderCell>
{#if !header.isPlaceholder}
<svelte:component
this={flexRender(
{#if Object.keys(tableMap).length > 1}
<TabGroup class='pt-2'>
<TabList>
{#each Object.keys(tableMap) as componentName}
<Tab>{componentName}</Tab>
{/each}
</TabList>
<TabPanels>
{#each Object.values(tableMap) as table}
<TabPanel>
<Table>
<thead>
{#each get(table).getHeaderGroups() as headerGroup}
<tr>
{#each headerGroup.headers as header}
<TableHeaderCell>
{#if !header.isPlaceholder}
<svelte:component
this={flexRender(
header.column.columnDef.header,
header.getContext()
)}
/>
{/if}
</TableHeaderCell>
{/each}
</tr>
{/each}
</thead>
<tbody>
{#each get(table).getRowModel().rows as row}
<tr>
{#each row.getVisibleCells() as cell}
<TableCell>
<svelte:component
this={flexRender(cell.column.columnDef.cell, cell.getContext())}
/>
{/if}
</TableHeaderCell>
{/each}
</tr>
{/each}
</thead>
<tbody>
{#each get(table).getRowModel().rows as row}
<tr>
{#each row.getVisibleCells() as cell}
<TableCell>
<svelte:component
this={flexRender(cell.column.columnDef.cell, cell.getContext())}
/>
</TableCell>
{/each}
</tr>
{/each}
</tbody>
</Table>
</TabPanel>
</TableCell>
{/each}
</tr>
{/each}
</tbody>
</Table>
</TabPanel>
{/each}
</TabPanels>
</TabGroup>
{:else}
<Table>
<thead>
{#each get(tableMap[Object.keys(tableMap)[0]]).getHeaderGroups() as headerGroup}
<tr>
{#each headerGroup.headers as header}
<TableHeaderCell>
{#if !header.isPlaceholder}
<svelte:component
this={flexRender(
header.column.columnDef.header,
header.getContext()
)}
/>
{/if}
</TableHeaderCell>
{/each}
</tr>
{/each}
</thead>
<tbody>
{#each get(tableMap[Object.keys(tableMap)[0]]).getRowModel().rows as row}
<tr>
{#each row.getVisibleCells() as cell}
<TableCell>
<svelte:component
this={flexRender(cell.column.columnDef.cell, cell.getContext())}
/>
</TableCell>
{/each}
</tr>
{/each}
</TabPanels>
</TabGroup>
</tbody>
</Table>
{/if}
2 changes: 1 addition & 1 deletion src/components/playground/RenderView.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
</script>

<div
class={`flex justify-center py-10 bg-accent-50`}>
class={`flex justify-center py-10 bg-neutral-95`}>
{#if componentTree?.Component}
<svelte:component
this={componentTree.Component}
Expand Down
25 changes: 2 additions & 23 deletions src/docs/playground/button.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,10 +18,8 @@ export default function getButtonTree(defaultProps: ButtonProps): PlaygroundComp
name: 'variant',
value: defaultProps.variant,
options: [
'contained',
'filled',
'outlined'
// TODO: implement
// "text"
]
}
}
Expand All @@ -36,7 +34,7 @@ export default function getButtonTree(defaultProps: ButtonProps): PlaygroundComp
name: 'color',
value: defaultProps.color,
options: [
'accent', 'primary', 'success', 'warning', 'error'
'primary', 'success', 'warning', 'error'
]
}
}
Expand All @@ -54,25 +52,6 @@ export default function getButtonTree(defaultProps: ButtonProps): PlaygroundComp
}
}
}
// TODO: Implement
// {
// name: 'disabled',
// default: false,
// description: 'Whether the button is disabled.',
// control: {
// Component: ControlSwitch,
// props: {
// name: "disabled"
// value: defaultProps.disabled
// }
// }
// },
// TODO: Implement
// {
// name: 'fullWidth',
// default: false,
// description: 'Whether the button is full width.'
// }
]
};
}
20 changes: 10 additions & 10 deletions src/docs/playground/card.ts
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,19 @@
import type {
CardActionPropsOptions,
CardContentPropsOptions,
CardHeaderPropsOptions,
CardPropsOptions,
CardTitlePropsOptions
CardActionProps,
CardContentProps,
CardHeaderProps,
CardProps,
CardTitleProps
} from '$lib';
import { Card, CardContent, CardTitle } from '$lib';
import type { PlaygroundComponentNode } from '../../types';

export type CardDefaultProps = {
Card: CardPropsOptions,
CardAction: CardActionPropsOptions,
CardContent: CardContentPropsOptions,
CardHeader: CardHeaderPropsOptions,
CardTitle: CardTitlePropsOptions
Card: CardProps,
CardAction: CardActionProps,
CardContent: CardContentProps,
CardHeader: CardHeaderProps,
CardTitle: CardTitleProps
}

export default function getCardTree(defaultProps: CardDefaultProps): PlaygroundComponentNode {
Expand Down
44 changes: 44 additions & 0 deletions src/docs/playground/typography.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
import type { PlaygroundComponentNode } from '../../types';
import { Typography, type TypographyProps } from '../../lib';

export default function getTypographyTree(defaultProps: TypographyProps): PlaygroundComponentNode {
return {
Component: Typography,
content: 'Typography',
name: 'Typography',
propDefinitions: [
{
name: 'variant',
description: 'The variant of the text',
default: defaultProps.style,
control: {
type: 'select',
props: {
name: 'variant',
value: defaultProps.style,
options: [
'display',
'headline',
'title',
'label',
'body'
]
}
}
},
{
name: 'size',
default: defaultProps.size,
description: `The size to use.`,
control: {
type: 'select',
props: {
name: 'size',
value: defaultProps.size,
options: ['small', 'medium', 'large']
}
}
}
]
};
}
Loading

1 comment on commit ef21f8c

@vercel
Copy link

@vercel vercel bot commented on ef21f8c Nov 28, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

kitui – ./

kitui-git-trunk-tedraykov.vercel.app
kitui-tedraykov.vercel.app
kitui-seven.vercel.app

Please sign in to comment.