Skip to content

Commit d7087e6

Browse files
MildTomatoMildTomato
committed
init
0 parents  commit d7087e6

File tree

657 files changed

+162512
-0
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

657 files changed

+162512
-0
lines changed

‎.eslintrc.js

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
module.exports = {
2+
root: true,
3+
env: {
4+
browser: true,
5+
node: true,
6+
},
7+
parserOptions: {
8+
parser: 'babel-eslint',
9+
},
10+
extends: [
11+
'react-app',
12+
'prettier',
13+
'plugin:prettier/recommended',
14+
],
15+
plugins: ['prettier'],
16+
// add your custom rules here
17+
rules: {},
18+
}

‎.gitignore

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2+
3+
# dependencies
4+
/node_modules
5+
/.pnp
6+
.pnp.js
7+
8+
# testing
9+
/coverage
10+
11+
# production
12+
/build
13+
dist
14+
15+
# misc
16+
.DS_Store
17+
.env.local
18+
.env.development.local
19+
.env.test.local
20+
.env.production.local
21+
22+
npm-debug.log*
23+
yarn-debug.log*
24+
yarn-error.log*
25+
26+
.vscode

‎.prettierrc

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"semi": false,
3+
"singleQuote": true,
4+
"printWidth": 80,
5+
"endOfLine": "auto"
6+
}

‎.storybook/main.js

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
const babel = require('@babel/core')
2+
const postCssLoader = './postCssLoader'
3+
4+
module.exports = {
5+
stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
6+
addons: [
7+
'@storybook/addon-links',
8+
'@storybook/addon-essentials',
9+
'storybook-dark-mode/register',
10+
postCssLoader,
11+
],
12+
webpackFinal: async (config) => {
13+
// This is for fix webpack storybook get module @emotion/styled/base
14+
// It's wrong module, the right module is @emotion/styled-base
15+
config.resolve.alias = {
16+
'@emotion/styled/base': '@emotion/styled-base',
17+
}
18+
19+
return config
20+
},
21+
}

‎.storybook/postCssLoader.js

+47
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
// taken from
2+
// https://github.com/Negan1911/storybook-css-modules-preset/blob/master/index.js
3+
4+
const css_regex = '/\\.css$/'
5+
6+
module.exports = {
7+
webpackFinal(config = {}, options = {}) {
8+
const cssRule = config.module.rules.find(
9+
(_) => _.test.toString() === css_regex
10+
)
11+
12+
return {
13+
...config,
14+
module: {
15+
...config.module,
16+
rules: [
17+
...config.module.rules.filter((_) => _.test.toString() !== css_regex),
18+
{
19+
...cssRule,
20+
exclude: /\.module\.css$/,
21+
},
22+
{
23+
...cssRule,
24+
test: /\.module\.css$/,
25+
use: cssRule.use.map((_) => {
26+
if (_ && _.loader && _.loader.match(/[\/\\]css-loader/g)) {
27+
return {
28+
..._,
29+
options: {
30+
..._.options,
31+
// modules: true,
32+
modules: {
33+
// localIdentName: '[name]__[local]__[hash:base64:5]',
34+
localIdentName: '[local]',
35+
},
36+
},
37+
}
38+
}
39+
40+
return _
41+
}),
42+
},
43+
],
44+
},
45+
}
46+
},
47+
}

‎.storybook/preview.css

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
.dark,
2+
.light {
3+
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
4+
'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif,
5+
'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
6+
}
7+
8+
.dark,
9+
.dark .docs-story {
10+
background: #181818;
11+
}
12+
13+
.light {
14+
background: '#ffffff';
15+
}

‎.storybook/preview.js

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
// import css for san serif font styling
2+
import './preview.css'
3+
4+
export const parameters = {
5+
actions: { argTypesRegex: '^on[A-Z].*' },
6+
darkMode: {
7+
darkClass: 'dark',
8+
lightClass: 'light',
9+
stylePreview: true,
10+
},
11+
}

‎LICENSE

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2021 Supabase
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎README.md

+179
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,179 @@
1+
# Supabase UI
2+
3+
Supabase UI is a React UI library.
4+
5+
🚧
6+
Supabase UI is still a work-in-progress until a major release is published.
7+
8+
[![Product hunt](https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=290768&theme=light)](https://www.producthunt.com/posts/supabase-ui)
9+
10+
11+
[View docs](https://ui.supabase.com)
12+
13+
## Install Supabase UI
14+
15+
```cli
16+
npm install @supabase/ui
17+
```
18+
19+
## Using Supabase UI
20+
21+
Example of importing a component
22+
23+
```js
24+
import { Button } from '@supabase/ui'
25+
26+
//...
27+
28+
return <Button>I am a Supabase UI button</Button>
29+
```
30+
31+
It is probably advisable to use [Normalize](https://github.com/sindresorhus/modern-normalize) with Supabase UI for the timebeing.
32+
33+
## Using Icons
34+
35+
We use [Feather icon library](https://feathericons.com/) in Supabase UI
36+
37+
You can use any Icon from the library as a component by prepending `Icon` to any Icon name, like, `<IconMail>`
38+
39+
```js
40+
import { IconMail } from '@supabase/ui'
41+
42+
//...
43+
44+
return <IconMail size="small" />
45+
```
46+
47+
## Using Supabase UI Auth
48+
49+
You can use our Auth widget straight out the box with Supabase auth including social logins.
50+
51+
<img width="380" alt="Screenshot 2021-02-05 at 19 25 01" src="https://user-images.githubusercontent.com/8291514/107029572-32f72d00-67ea-11eb-982e-e737f052eea1.png">
52+
53+
54+
The Auth component also includes a context component which detects whether a user is logged in or not.
55+
56+
Make sure to also install `@supabase/supabase-js`
57+
58+
```cli
59+
npm install @supabase/supabase-js
60+
```
61+
62+
You can then easily import `Auth` from the ui library and pass the `createClient` to the `Auth` component.
63+
64+
```js
65+
import { Auth, Typography, Button } from "@supabase/ui";
66+
import { createClient } from "@supabase/supabase-js";
67+
68+
const { Text } = Typography
69+
70+
// Create a single supabase client for interacting with your database
71+
const supabase = createClient(
72+
"https://xyzcompany.supabase.co",
73+
"public-anon-key"
74+
);
75+
76+
const Container = (props) => {
77+
const { user } = Auth.useUser();
78+
if (user)
79+
return (
80+
<>
81+
<Text>Signed in: {user.email}</Text>
82+
<Button block onClick={() => props.supabaseClient.auth.signOut()}>
83+
Sign out
84+
</Button>
85+
</>
86+
);
87+
return props.children;
88+
};
89+
90+
export default function Home() {
91+
return (
92+
<Auth.UserContextProvider supabaseClient={supabase}>
93+
<Container supabaseClient={supabase}>
94+
<Auth providers={['facebook', 'github']} supabaseClient={supabase}/>
95+
</Container>
96+
</Auth.UserContextProvider>
97+
);
98+
};
99+
```
100+
101+
## Roadmap
102+
103+
Some of these are a work in progress - we invite anyone to submit a [feature request](https://github.com/supabase/ui/issues/new?labels=enhancement&template=2.Feature_request.md) if there is something you would like to see.
104+
105+
_General_
106+
107+
- [x] Button
108+
- [x] Typography
109+
- [x] Icon
110+
- [x] Image (work in progress)
111+
112+
_Data Input_
113+
114+
- [x] Input
115+
- [x] InputNumber
116+
- [x] Select (custom select wip)
117+
- [x] Checkbox
118+
- [x] Radio
119+
- [x] Toggle
120+
- [ ] Upload
121+
- [ ] Slider
122+
- [ ] Date picker
123+
- [ ] Time picker
124+
- [ ] Form
125+
126+
_Layout_
127+
128+
- [ ] ~~Layout~~
129+
- [ ] ~~Grid (Flex)~~
130+
- [x] Divider
131+
- [x] Space (Flex)
132+
133+
_Display_
134+
135+
- [x] Card
136+
- [ ] Avatar
137+
- [x] Accordion
138+
- [x] Alert
139+
- [x] Badge
140+
- [x] Menu
141+
- [ ] Tooltips
142+
- [ ] Tables
143+
- [ ] Code block
144+
145+
_Navigation_
146+
147+
- [x] Tabs
148+
- [ ] Breadcrumb
149+
- [x] Dropdown
150+
- [x] Menu
151+
- [ ] Page Header
152+
- [ ] Sidebar
153+
- [ ] Flyout menu
154+
- [ ] Steps
155+
156+
_Overlay_
157+
158+
- [x] Modal
159+
- [x] Context Menu
160+
- [x] Drawer / SidePanel
161+
- [ ] Toast messages / Notification
162+
- [ ] Progress
163+
- [ ] Feeds / Timeline
164+
165+
_Utility_
166+
167+
- [x] Loading
168+
- [x] Transition (work in progress)
169+
170+
_Misc_
171+
172+
- [x] Storybook docs
173+
- [ ] Theming (in progress)
174+
- [x] Supabase Auth Elements
175+
- [x] Documentation website
176+
177+
We would be keen to hear any feedback on this project.
178+
179+
Feel free to [submit a question or idea here](https://github.com/supabase/supabase/discussions/category_choices)

‎babel.config.js

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
module.exports = {
2+
presets: [
3+
[
4+
'@babel/env',
5+
{
6+
modules: false,
7+
loose: true,
8+
targets: {
9+
browsers: ['>2%'],
10+
},
11+
},
12+
],
13+
'@babel/preset-react',
14+
],
15+
plugins: ['@babel/plugin-transform-runtime', 'add-react-displayname'],
16+
}

0 commit comments

Comments
 (0)